Merge pull request XavierGeerinck#5 from lloydrichards/feat/storybook…

…-cli

feat(storybook): ✨ added storybook files to registry and CLI

apps/www/public/registry/index.json

@@ -5,7 +5,8 @@
       "@radix-ui/react-accordion"
     ],
     "files": [
-      "ui/accordion.tsx"
+      "ui/accordion.tsx",
+      "stories/accordion.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -25,7 +26,8 @@
       "button"
     ],
     "files": [
-      "ui/alert-dialog.tsx"
+      "ui/alert-dialog.tsx",
+      "stories/alert-dialog.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -35,7 +37,8 @@
       "@radix-ui/react-aspect-ratio"
     ],
     "files": [
-      "ui/aspect-ratio.tsx"
+      "ui/aspect-ratio.tsx",
+      "stories/aspect-ratio.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -45,7 +48,8 @@
       "@radix-ui/react-avatar"
     ],
     "files": [
-      "ui/avatar.tsx"
+      "ui/avatar.tsx",
+      "stories/avatar.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -62,7 +66,8 @@
       "@radix-ui/react-slot"
     ],
     "files": [
-      "ui/button.tsx"
+      "ui/button.tsx",
+      "stories/button.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -93,7 +98,8 @@
       "@radix-ui/react-checkbox"
     ],
     "files": [
-      "ui/checkbox.tsx"
+      "ui/checkbox.tsx",
+      "stories/checkbox.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -103,7 +109,8 @@
       "@radix-ui/react-collapsible"
     ],
     "files": [
-      "ui/collapsible.tsx"
+      "ui/collapsible.tsx",
+      "stories/collapsible.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -126,7 +133,8 @@
       "@radix-ui/react-context-menu"
     ],
     "files": [
-      "ui/context-menu.tsx"
+      "ui/context-menu.tsx",
+      "stories/context-menu.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -136,7 +144,8 @@
       "@radix-ui/react-dialog"
     ],
     "files": [
-      "ui/dialog.tsx"
+      "ui/dialog.tsx",
+      "stories/dialog.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -146,7 +155,8 @@
       "@radix-ui/react-dropdown-menu"
     ],
     "files": [
-      "ui/dropdown-menu.tsx"
+      "ui/dropdown-menu.tsx",
+      "stories/dropdown-menu.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -174,14 +184,16 @@
       "@radix-ui/react-hover-card"
     ],
     "files": [
-      "ui/hover-card.tsx"
+      "ui/hover-card.tsx",
+      "stories/hover-card.stories.tsx"
     ],
     "type": "components:ui"
   },
   {
     "name": "input",
     "files": [
-      "ui/input.tsx"
+      "ui/input.tsx",
+      "stories/input.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -191,7 +203,8 @@
       "@radix-ui/react-label"
     ],
     "files": [
-      "ui/label.tsx"
+      "ui/label.tsx",
+      "stories/label.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -201,7 +214,8 @@
       "@radix-ui/react-menubar"
     ],
     "files": [
-      "ui/menubar.tsx"
+      "ui/menubar.tsx",
+      "stories/menubar.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -221,7 +235,8 @@
       "@radix-ui/react-popover"
     ],
     "files": [
-      "ui/popover.tsx"
+      "ui/popover.tsx",
+      "stories/popover.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -231,7 +246,8 @@
       "@radix-ui/react-progress"
     ],
     "files": [
-      "ui/progress.tsx"
+      "ui/progress.tsx",
+      "stories/progress.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -241,7 +257,8 @@
       "@radix-ui/react-radio-group"
     ],
     "files": [
-      "ui/radio-group.tsx"
+      "ui/radio-group.tsx",
+      "stories/radio-group.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -251,7 +268,8 @@
       "@radix-ui/react-scroll-area"
     ],
     "files": [
-      "ui/scroll-area.tsx"
+      "ui/scroll-area.tsx",
+      "stories/scroll-area.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -261,7 +279,8 @@
       "@radix-ui/react-select"
     ],
     "files": [
-      "ui/select.tsx"
+      "ui/select.tsx",
+      "stories/select.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -271,7 +290,8 @@
       "@radix-ui/react-separator"
     ],
     "files": [
-      "ui/separator.tsx"
+      "ui/separator.tsx",
+      "stories/separator.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -298,7 +318,8 @@
       "@radix-ui/react-slider"
     ],
     "files": [
-      "ui/slider.tsx"
+      "ui/slider.tsx",
+      "stories/slider.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -308,7 +329,8 @@
       "@radix-ui/react-switch"
     ],
     "files": [
-      "ui/switch.tsx"
+      "ui/switch.tsx",
+      "stories/switch.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -325,14 +347,16 @@
       "@radix-ui/react-tabs"
     ],
     "files": [
-      "ui/tabs.tsx"
+      "ui/tabs.tsx",
+      "stories/tabs.stories.tsx"
     ],
     "type": "components:ui"
   },
   {
     "name": "textarea",
     "files": [
-      "ui/textarea.tsx"
+      "ui/textarea.tsx",
+      "stories/textarea.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -364,7 +388,8 @@
       "@radix-ui/react-tooltip"
     ],
     "files": [
-      "ui/tooltip.tsx"
+      "ui/tooltip.tsx",
+      "stories/tooltip.stories.tsx"
     ],
     "type": "components:ui"
   }

apps/www/public/registry/styles/default/accordion.json

@@ -7,6 +7,10 @@
     {
       "name": "accordion.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\"border-b\", className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"h-4 w-4 shrink-0 transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"pb-4 pt-0\">{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"
+    },
+    {
+      "name": "accordion.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"../default/ui/accordion\"\n\nconst meta: Meta<typeof Accordion> = {\n  title: \"ui/Accordion\",\n  component: Accordion,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Accordion>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Accordion {...args}>\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other components'\n          aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It's animated by default, but you can disable it if you prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  ),\n  args: {\n    type: \"single\",\n    collapsible: true,\n  },\n}\n"
     }
   ],
   "type": "components:ui"

apps/www/public/registry/styles/default/alert-dialog.json

@@ -10,6 +10,10 @@
     {
       "name": "alert-dialog.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = ({\n  className,\n  ...props\n}: AlertDialogPrimitive.AlertDialogPortalProps) => (\n  <AlertDialogPrimitive.Portal className={cn(className)} {...props} />\n)\nAlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName\n\nconst AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, children, ...props }, ref) => (\n  <AlertDialogPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPortal>\n    <AlertDialogOverlay />\n    <AlertDialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full\",\n        className\n      )}\n      {...props}\n    />\n  </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold\", className)}\n    {...props}\n  />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nAlertDialogDescription.displayName =\n  AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Action>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Action\n    ref={ref}\n    className={cn(buttonVariants(), className)}\n    {...props}\n  />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Cancel\n    ref={ref}\n    className={cn(\n      buttonVariants({ variant: \"outline\" }),\n      \"mt-2 sm:mt-0\",\n      className\n    )}\n    {...props}\n  />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n}\n"
+    },
+    {
+      "name": "alert-dialog.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"../default/ui/alert-dialog\"\nimport { Button } from \"../default/ui/button\"\n\nconst meta: Meta<typeof AlertDialog> = {\n  title: \"ui/AlertDialog\",\n  component: AlertDialog,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof AlertDialog>\n\nexport const Base: Story = {\n  render: () => (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you sure absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"

apps/www/public/registry/styles/default/aspect-ratio.json

@@ -7,6 +7,10 @@
     {
       "name": "aspect-ratio.tsx",
       "content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n"
+    },
+    {
+      "name": "aspect-ratio.stories.tsx",
+      "content": "import Image from \"next/image\"\nimport { Meta, StoryObj } from \"@storybook/react\"\n\nimport { AspectRatio } from \"@/registry/default/ui/aspect-ratio\"\n\nconst meta: Meta<typeof AspectRatio> = {\n  title: \"ui/AspectRatio\",\n  component: AspectRatio,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof AspectRatio>\n\nexport const Base: Story = {\n  render: () => (\n    <AspectRatio ratio={16 / 9} className=\"bg-slate-50 dark:bg-slate-800\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1576075796033-848c2a5f3696?w=800&dpr=2&q=80\"\n        alt=\"Photo by Alvaro Pinot\"\n        fill\n        className=\"rounded-md object-cover\"\n      />\n    </AspectRatio>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"

apps/www/public/registry/styles/default/avatar.json

@@ -7,6 +7,10 @@
     {
       "name": "avatar.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full\", className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n"
+    },
+    {
+      "name": "avatar.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"../default/ui/avatar\"\n\nconst meta: Meta<typeof Avatar> = {\n  title: \"ui/Avatar\",\n  component: Avatar,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Avatar>\n\nexport const Base: Story = {\n  render: () => (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"