From 469f3b9c6a01858f2254db3525eec92172e25a28 Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Fri, 6 Dec 2024 11:09:57 -0300
Subject: [PATCH 1/5] :sparkles: feat: Added skeleton stories

---
 .../ui/{skeleton.tsx => skeleton/index.tsx}   |  0
 src/components/ui/skeleton/skeleton.mdx       | 19 +++++++++++++
 .../ui/skeleton/skeleton.stories.tsx          | 27 +++++++++++++++++++
 3 files changed, 46 insertions(+)
 rename src/components/ui/{skeleton.tsx => skeleton/index.tsx} (100%)
 create mode 100644 src/components/ui/skeleton/skeleton.mdx
 create mode 100644 src/components/ui/skeleton/skeleton.stories.tsx

diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton/index.tsx
similarity index 100%
rename from src/components/ui/skeleton.tsx
rename to src/components/ui/skeleton/index.tsx
diff --git a/src/components/ui/skeleton/skeleton.mdx b/src/components/ui/skeleton/skeleton.mdx
new file mode 100644
index 00000000..bfefac92
--- /dev/null
+++ b/src/components/ui/skeleton/skeleton.mdx
@@ -0,0 +1,19 @@
+import { Meta, Controls, Primary, Canvas } from '@storybook/blocks'
+import * as Story from './skeleton.stories'
+
+<Meta of={Story} />
+
+# Skeleton
+
+Use to show a placeholder while content is loading.
+
+### Primary
+
+<Canvas of={Story.Primary} />
+
+### Example
+
+<Canvas of={Story.Example} />
+
+<Primary />
+<Controls />
diff --git a/src/components/ui/skeleton/skeleton.stories.tsx b/src/components/ui/skeleton/skeleton.stories.tsx
new file mode 100644
index 00000000..6d93dd06
--- /dev/null
+++ b/src/components/ui/skeleton/skeleton.stories.tsx
@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Skeleton } from '.'
+
+const meta: Meta<React.HTMLAttributes<HTMLDivElement>> = {
+  title: 'Primitives/Skeleton',
+  component: Skeleton,
+  argTypes: {}
+}
+
+export default meta
+
+export const Primary: StoryObj<React.HTMLAttributes<HTMLDivElement>> = {
+  render: (args) => <Skeleton {...args} className="h-4 w-full" />
+}
+
+export const Example: StoryObj<React.HTMLAttributes<HTMLDivElement>> = {
+  render: (args) => (
+    <div className="flex w-full flex-row gap-4">
+      <Skeleton {...args} className="h-16 w-16 rounded-full" />
+      <div className="flex flex-grow flex-col gap-2">
+        <Skeleton {...args} className="h-4" />
+        <Skeleton {...args} className="h-4" />
+        <Skeleton {...args} className="h-4" />
+      </div>
+    </div>
+  )
+}

From 62c532218747d5f2c93de5e4268bf2ce4a0e9f53 Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Fri, 6 Dec 2024 11:10:10 -0300
Subject: [PATCH 2/5] :sparkles: feat: Added Separator stories

---
 .../ui/{separator.tsx => separator/index.tsx} |  0
 src/components/ui/separator/separator.mdx     | 16 ++++++++++
 .../ui/separator/separator.stories.tsx        | 31 +++++++++++++++++++
 3 files changed, 47 insertions(+)
 rename src/components/ui/{separator.tsx => separator/index.tsx} (100%)
 create mode 100644 src/components/ui/separator/separator.mdx
 create mode 100644 src/components/ui/separator/separator.stories.tsx

diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator/index.tsx
similarity index 100%
rename from src/components/ui/separator.tsx
rename to src/components/ui/separator/index.tsx
diff --git a/src/components/ui/separator/separator.mdx b/src/components/ui/separator/separator.mdx
new file mode 100644
index 00000000..85363e8c
--- /dev/null
+++ b/src/components/ui/separator/separator.mdx
@@ -0,0 +1,16 @@
+import { Meta, Controls, Primary, Canvas } from '@storybook/blocks'
+import * as Story from './separator.stories'
+
+<Meta of={Story} />
+
+# Separator
+
+Visually or semantically separates content. \
+[Docs](https://www.radix-ui.com/primitives/docs/components/separator)
+
+### Primary
+
+<Canvas of={Story.Primary} />
+
+<Primary />
+<Controls />
diff --git a/src/components/ui/separator/separator.stories.tsx b/src/components/ui/separator/separator.stories.tsx
new file mode 100644
index 00000000..c5c9f8d9
--- /dev/null
+++ b/src/components/ui/separator/separator.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Separator } from '.'
+
+const meta: Meta<React.HTMLAttributes<HTMLDivElement>> = {
+  title: 'Primitives/Separator',
+  component: Separator,
+  argTypes: {}
+}
+
+export default meta
+
+export const Primary: StoryObj = {
+  render: () => (
+    <div>
+      <div className="space-y-1">
+        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
+        <p className="text-sm text-muted-foreground">
+          An open-source UI component library.
+        </p>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex h-5 items-center space-x-4 text-sm">
+        <div>Blog</div>
+        <Separator orientation="vertical" />
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Source</div>
+      </div>
+    </div>
+  )
+}

From e88f64a6e26874efd5d05beb23f3f476325a49ad Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Fri, 6 Dec 2024 11:10:22 -0300
Subject: [PATCH 3/5] :sparkles: feat: Added Collapsible stories

---
 src/components/ui/collapsible/collapsible.mdx | 16 ++++++
 .../ui/collapsible/collapsible.stories.tsx    | 50 +++++++++++++++++++
 .../index.tsx}                                |  0
 3 files changed, 66 insertions(+)
 create mode 100644 src/components/ui/collapsible/collapsible.mdx
 create mode 100644 src/components/ui/collapsible/collapsible.stories.tsx
 rename src/components/ui/{collapsible.tsx => collapsible/index.tsx} (100%)

diff --git a/src/components/ui/collapsible/collapsible.mdx b/src/components/ui/collapsible/collapsible.mdx
new file mode 100644
index 00000000..85c42d9c
--- /dev/null
+++ b/src/components/ui/collapsible/collapsible.mdx
@@ -0,0 +1,16 @@
+import { Meta, Controls, Primary, Canvas } from '@storybook/blocks'
+import * as Story from './collapsible.stories'
+
+<Meta of={Story} />
+
+# Collapsible
+
+An interactive component which expands/collapses a panel. \
+[Docs](https://www.radix-ui.com/primitives/docs/components/collapsible)
+
+### Primary
+
+<Canvas of={Story.Primary} />
+
+<Primary />
+<Controls />
diff --git a/src/components/ui/collapsible/collapsible.stories.tsx b/src/components/ui/collapsible/collapsible.stories.tsx
new file mode 100644
index 00000000..757ab736
--- /dev/null
+++ b/src/components/ui/collapsible/collapsible.stories.tsx
@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '.'
+import React from 'react'
+import { Button } from '../button'
+import { ChevronsUpDown } from 'lucide-react'
+
+const meta: Meta<React.HTMLAttributes<HTMLDivElement>> = {
+  title: 'Primitives/Collapsible',
+  component: Collapsible,
+  argTypes: {}
+}
+
+export default meta
+
+export const Primary: StoryObj = {
+  render: () => {
+    const [isOpen, setIsOpen] = React.useState(false)
+
+    return (
+      <Collapsible
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        className="w-[350px] space-y-2"
+      >
+        <div className="flex items-center justify-between space-x-4 px-4">
+          <h4 className="text-sm font-semibold">
+            @peduarte starred 3 repositories
+          </h4>
+          <CollapsibleTrigger asChild>
+            <Button variant="ghost" size="sm" className="w-9 p-0">
+              <ChevronsUpDown className="h-4 w-4" />
+              <span className="sr-only">Toggle</span>
+            </Button>
+          </CollapsibleTrigger>
+        </div>
+        <div className="rounded-md border px-4 py-3 font-mono text-sm">
+          @radix-ui/primitives
+        </div>
+        <CollapsibleContent className="space-y-2">
+          <div className="rounded-md border px-4 py-3 font-mono text-sm">
+            @radix-ui/colors
+          </div>
+          <div className="rounded-md border px-4 py-3 font-mono text-sm">
+            @stitches/react
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    )
+  }
+}
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible/index.tsx
similarity index 100%
rename from src/components/ui/collapsible.tsx
rename to src/components/ui/collapsible/index.tsx

From f5a3d5fe1e8bc4a65ef5c0c52c5c280572468d78 Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Fri, 6 Dec 2024 11:10:33 -0300
Subject: [PATCH 4/5] :sparkles: feat: Added Command stories

---
 src/components/ui/command/command.mdx         | 16 +++++
 src/components/ui/command/command.stories.tsx | 70 +++++++++++++++++++
 .../ui/{command.tsx => command/index.tsx}     |  0
 3 files changed, 86 insertions(+)
 create mode 100644 src/components/ui/command/command.mdx
 create mode 100644 src/components/ui/command/command.stories.tsx
 rename src/components/ui/{command.tsx => command/index.tsx} (100%)

diff --git a/src/components/ui/command/command.mdx b/src/components/ui/command/command.mdx
new file mode 100644
index 00000000..f9b86ee8
--- /dev/null
+++ b/src/components/ui/command/command.mdx
@@ -0,0 +1,16 @@
+import { Meta, Controls, Primary, Canvas } from '@storybook/blocks'
+import * as Story from './command.stories'
+
+<Meta of={Story} />
+
+# Command
+
+Fast, composable, unstyled command menu for React. \
+[Docs](https://cmdk.paco.me/)
+
+### Primary
+
+<Canvas of={Story.Primary} />
+
+<Primary />
+<Controls />
diff --git a/src/components/ui/command/command.stories.tsx b/src/components/ui/command/command.stories.tsx
new file mode 100644
index 00000000..1cf5f9ad
--- /dev/null
+++ b/src/components/ui/command/command.stories.tsx
@@ -0,0 +1,70 @@
+import { Meta, StoryObj } from '@storybook/react'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+} from '.'
+import {
+  Calendar,
+  Smile,
+  Calculator,
+  User,
+  CreditCard,
+  Settings
+} from 'lucide-react'
+
+const meta: Meta = {
+  title: 'Primitives/Command',
+  component: Command,
+  argTypes: {}
+}
+
+export default meta
+
+export const Primary: StoryObj = {
+  render: (args) => (
+    <Command {...args} className="rounded-lg border shadow-md md:min-w-[450px]">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
+            <Calendar />
+            <span>Calendar</span>
+          </CommandItem>
+          <CommandItem>
+            <Smile />
+            <span>Search Emoji</span>
+          </CommandItem>
+          <CommandItem disabled>
+            <Calculator />
+            <span>Calculator</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
+            <User />
+            <span>Profile</span>
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <CreditCard />
+            <span>Billing</span>
+            <CommandShortcut>⌘B</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <Settings />
+            <span>Settings</span>
+            <CommandShortcut>⌘S</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
diff --git a/src/components/ui/command.tsx b/src/components/ui/command/index.tsx
similarity index 100%
rename from src/components/ui/command.tsx
rename to src/components/ui/command/index.tsx

From 92a1ce149cc9b077d08eaecf6abc64294bd942b7 Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Fri, 6 Dec 2024 11:30:35 -0300
Subject: [PATCH 5/5] :sparkles: feat: Added Combobox stories

---
 src/components/combobox.tsx                   | 75 --------------
 src/components/ui/combobox/combobox.mdx       | 16 +++
 .../ui/combobox/combobox.stories.tsx          | 98 +++++++++++++++++++
 src/components/ui/popover/popover.mdx         |  3 +-
 4 files changed, 116 insertions(+), 76 deletions(-)
 delete mode 100644 src/components/combobox.tsx
 create mode 100644 src/components/ui/combobox/combobox.mdx
 create mode 100644 src/components/ui/combobox/combobox.stories.tsx

diff --git a/src/components/combobox.tsx b/src/components/combobox.tsx
deleted file mode 100644
index 41bd747f..00000000
--- a/src/components/combobox.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Check, ChevronsUpDown } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem
-} from '@/components/ui/command'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from '@/components/ui/popover'
-
-const cloud = [
-  {
-    value: 'aws',
-    label: 'AWS'
-  }
-]
-
-export function Combobox() {
-  const [open, setOpen] = React.useState(false)
-  const [value, setValue] = React.useState('')
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className="w-[200px] justify-between"
-        >
-          {value
-            ? cloud.find((cloud) => cloud.value === value)?.label
-            : 'Select...'}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
-        <Command>
-          <CommandInput placeholder="Search" />
-          <CommandEmpty>Nothing was found.</CommandEmpty>
-          <CommandGroup>
-            {cloud.map((cloud) => (
-              <CommandItem
-                key={cloud.value}
-                value={cloud.value}
-                onSelect={(currentValue) => {
-                  setValue(currentValue === value ? '' : currentValue)
-                  setOpen(false)
-                }}
-              >
-                <Check
-                  className={cn(
-                    'mr-2 h-4 w-4',
-                    value === cloud.value ? 'opacity-100' : 'opacity-0'
-                  )}
-                />
-                {cloud.label}
-              </CommandItem>
-            ))}
-          </CommandGroup>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/src/components/ui/combobox/combobox.mdx b/src/components/ui/combobox/combobox.mdx
new file mode 100644
index 00000000..1835ca26
--- /dev/null
+++ b/src/components/ui/combobox/combobox.mdx
@@ -0,0 +1,16 @@
+import { Meta, Controls, Primary, Canvas } from '@storybook/blocks'
+import * as Story from './combobox.stories'
+
+<Meta of={Story} />
+
+# Combobox
+
+Autocomplete input and command palette with a list of suggestions. \
+The Combobox is built using a composition of the [Popover](/docs/primitives-popover--docs) and the [Command](/docs/primitives-command--docs) components.
+
+### Primary
+
+<Canvas of={Story.Primary} />
+
+<Primary />
+<Controls />
diff --git a/src/components/ui/combobox/combobox.stories.tsx b/src/components/ui/combobox/combobox.stories.tsx
new file mode 100644
index 00000000..929b6f4f
--- /dev/null
+++ b/src/components/ui/combobox/combobox.stories.tsx
@@ -0,0 +1,98 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Popover, PopoverContent, PopoverTrigger } from '../popover'
+import React from 'react'
+import { Button } from '../button'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '../command'
+import { cn } from '@/lib/utils'
+
+const meta: Meta = {
+  title: 'Primitives/Combobox',
+  component: Popover,
+  argTypes: {}
+}
+
+export default meta
+
+const frameworks = [
+  {
+    value: 'next.js',
+    label: 'Next.js'
+  },
+  {
+    value: 'sveltekit',
+    label: 'SvelteKit'
+  },
+  {
+    value: 'nuxt.js',
+    label: 'Nuxt.js'
+  },
+  {
+    value: 'remix',
+    label: 'Remix'
+  },
+  {
+    value: 'astro',
+    label: 'Astro'
+  }
+]
+
+export const Primary: StoryObj = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+    const [value, setValue] = React.useState('')
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-[200px] justify-between"
+          >
+            {value
+              ? frameworks.find((framework) => framework.value === value)?.label
+              : 'Select framework...'}
+            <ChevronsUpDown className="opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[200px] p-0">
+          <Command>
+            <CommandInput placeholder="Search framework..." />
+            <CommandList>
+              <CommandEmpty>No framework found.</CommandEmpty>
+              <CommandGroup>
+                {frameworks.map((framework) => (
+                  <CommandItem
+                    key={framework.value}
+                    value={framework.value}
+                    onSelect={(currentValue) => {
+                      setValue(currentValue === value ? '' : currentValue)
+                      setOpen(false)
+                    }}
+                  >
+                    {framework.label}
+                    <Check
+                      className={cn(
+                        'ml-auto',
+                        value === framework.value ? 'opacity-100' : 'opacity-0'
+                      )}
+                    />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    )
+  }
+}
diff --git a/src/components/ui/popover/popover.mdx b/src/components/ui/popover/popover.mdx
index cf9574be..3299eccc 100644
--- a/src/components/ui/popover/popover.mdx
+++ b/src/components/ui/popover/popover.mdx
@@ -5,7 +5,8 @@ import * as Story from './popover.stories'
 
 # Popover
 
-Displays rich content in a portal, triggered by a button.
+Displays rich content in a portal, triggered by a button. \
+[Docs](https://www.radix-ui.com/primitives/docs/components/popover)
 
 ### Primary