Merge pull request #75 from LerianStudio/feature/storybook

✨ More Storybook

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 />

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>
+    )
+  }
+}

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 />

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>
+    )
+  }
+}

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 />

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>
+  )
+}

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
 

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 />