@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/scroll-area/ScrollArea.stories.tsx

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ScrollArea, ScrollBar } from './index'
+import { Separator } from '../separator'
+
+const meta: Meta<typeof ScrollArea> = {
+  title: 'Components/ScrollArea',
+  component: ScrollArea,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Augments native scroll functionality for custom, cross-browser styling.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof ScrollArea>
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+)
+
+export const Default: Story = {
+  args: {
+    className: 'h-72 w-48 rounded-md border',
+  },
+  render: (args) => (
+    <ScrollArea {...args}>
+      <div className="p-4">
+        <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+        {tags.map((tag) => (
+          <div key={tag}>
+            <div className="text-sm">{tag}</div>
+            <Separator className="my-2" />
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+}
+
+const works = [
+  { artist: "Ornella Binni", art: "Artwork 1" },
+  { artist: "Tom Byrom", art: "Artwork 2" },
+  { artist: "Vladimir Malyutin", art: "Artwork 3" },
+  { artist: "Jane Doe", art: "Artwork 4" },
+  { artist: "John Smith", art: "Artwork 5" },
+  { artist: "Alice Brown", art: "Artwork 6" },
+]
+
+export const Horizontal: Story = {
+  render: () => (
+    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+      <div className="flex w-max space-x-4 p-4">
+        {works.map((work) => (
+          <figure key={work.artist} className="shrink-0">
+            <div className="h-32 w-48 rounded-md bg-muted" />
+            <figcaption className="pt-2 text-xs text-muted-foreground">
+              Photo by{" "}
+              <span className="font-semibold text-foreground">
+                {work.artist}
+              </span>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  ),
+}
+
+const items = Array.from({ length: 20 }).map((_, i) => ({
+  id: i + 1,
+  title: `Item ${i + 1}`,
+  description: `Description for item ${i + 1}`,
+}))
+
+export const List: Story = {
+  render: () => (
+    <ScrollArea className="h-[300px] w-[350px] rounded-md border p-4">
+      <h4 className="mb-4 text-sm font-medium leading-none">Items</h4>
+      <div className="space-y-4">
+        {items.map((item) => (
+          <div key={item.id} className="flex items-center space-x-4">
+            <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center text-xs">
+              {item.id}
+            </div>
+            <div>
+              <p className="text-sm font-medium">{item.title}</p>
+              <p className="text-xs text-muted-foreground">{item.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+}
+
+export const Card: Story = {
+  render: () => (
+    <div className="rounded-lg border w-[350px]">
+      <div className="p-4 border-b">
+        <h3 className="font-medium">Notifications</h3>
+        <p className="text-sm text-muted-foreground">You have 20 unread messages.</p>
+      </div>
+      <ScrollArea className="h-[200px]">
+        <div className="p-4 space-y-4">
+          {Array.from({ length: 10 }).map((_, i) => (
+            <div key={i} className="flex items-start space-x-3">
+              <div className="h-8 w-8 rounded-full bg-primary/10" />
+              <div className="flex-1">
+                <p className="text-sm font-medium">Notification {i + 1}</p>
+                <p className="text-xs text-muted-foreground">2 minutes ago</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  ),
+}
+
+export const CodeBlock: Story = {
+  render: () => (
+    <ScrollArea className="h-[200px] w-[400px] rounded-md border bg-muted/50 p-4">
+      <pre className="text-sm">
+        <code>{`function fibonacci(n) {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+// Example usage
+console.log(fibonacci(10)); // 55
+
+// More complex example
+const memoFib = (function() {
+  const cache = {};
+  return function fib(n) {
+    if (n in cache) return cache[n];
+    if (n <= 1) return n;
+    cache[n] = fib(n - 1) + fib(n - 2);
+    return cache[n];
+  };
+})();
+
+console.log(memoFib(100));`}</code>
+      </pre>
+    </ScrollArea>
+  ),
+}

package/src/components/select/Select.stories.tsx

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+  SelectSeparator,
+} from './index'
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Displays a list of options for the user to pick from, triggered by a button.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Select>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <Select {...args}>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="orange">Orange</SelectItem>
+        <SelectItem value="grape">Grape</SelectItem>
+        <SelectItem value="mango">Mango</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const WithGroups: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Select a timezone" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>North America</SelectLabel>
+          <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
+          <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
+          <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Europe</SelectLabel>
+          <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
+          <SelectItem value="cet">Central European Time (CET)</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const WithDefaultValue: Story = {
+  render: () => (
+    <Select defaultValue="banana">
+      <SelectTrigger className="w-[180px]">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="orange">Orange</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Select disabled>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Disabled select" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+        </SelectContent>
+      </Select>
+      <Select>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana" disabled>Banana (out of stock)</SelectItem>
+          <SelectItem value="orange">Orange</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+}
+
+export const WithForm: Story = {
+  render: () => (
+    <form className="space-y-4 w-[300px]">
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Country</label>
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Select a country" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="us">United States</SelectItem>
+            <SelectItem value="uk">United Kingdom</SelectItem>
+            <SelectItem value="fr">France</SelectItem>
+            <SelectItem value="de">Germany</SelectItem>
+            <SelectItem value="jp">Japan</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Language</label>
+        <Select defaultValue="en">
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="en">English</SelectItem>
+            <SelectItem value="fr">French</SelectItem>
+            <SelectItem value="de">German</SelectItem>
+            <SelectItem value="ja">Japanese</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </form>
+  ),
+}

package/src/components/separator/Separator.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Separator } from './index'
+
+const meta: Meta<typeof Separator> = {
+  title: 'Components/Separator',
+  component: Separator,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Visually or semantically separates content.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'The orientation of the separator',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Separator>
+
+export const Default: Story = {
+  args: {
+    className: 'my-4',
+  },
+  render: (args) => (
+    <div className="w-[300px]">
+      <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 {...args} />
+      <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>
+  ),
+}
+
+export const Horizontal: Story = {
+  render: () => (
+    <div className="w-[300px] space-y-4">
+      <p className="text-sm">Section 1 content goes here.</p>
+      <Separator />
+      <p className="text-sm">Section 2 content goes here.</p>
+      <Separator />
+      <p className="text-sm">Section 3 content goes here.</p>
+    </div>
+  ),
+}
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-10 items-center space-x-4">
+      <span className="text-sm">Home</span>
+      <Separator orientation="vertical" />
+      <span className="text-sm">About</span>
+      <Separator orientation="vertical" />
+      <span className="text-sm">Contact</span>
+    </div>
+  ),
+}
+
+export const InCard: Story = {
+  render: () => (
+    <div className="w-[350px] rounded-lg border p-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="font-medium">Subscription</h3>
+          <p className="text-sm text-muted-foreground">Manage your plan</p>
+        </div>
+        <span className="text-sm font-medium text-primary">Pro Plan</span>
+      </div>
+      <Separator className="my-4" />
+      <div className="space-y-2">
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">Next billing date</span>
+          <span>January 1, 2024</span>
+        </div>
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">Amount</span>
+          <span>$29/month</span>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const WithIcons: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <div className="flex items-center space-x-1">
+        <span className="text-sm">10 likes</span>
+      </div>
+      <Separator orientation="vertical" className="h-4" />
+      <div className="flex items-center space-x-1">
+        <span className="text-sm">5 comments</span>
+      </div>
+      <Separator orientation="vertical" className="h-4" />
+      <div className="flex items-center space-x-1">
+        <span className="text-sm">3 shares</span>
+      </div>
+    </div>
+  ),
+}

package/src/components/sheet/Sheet.stories.tsx

@@ -0,0 +1,195 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  SheetFooter,
+  SheetClose,
+} from './index'
+import { Button } from '../button'
+import { Input } from '../input'
+import { Label } from '../label'
+
+const meta: Meta<typeof Sheet> = {
+  title: 'Components/Sheet',
+  component: Sheet,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Extends the Dialog component to display content that complements the main content of the screen. Slides in from the edge of the screen.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Sheet>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <Sheet {...args}>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open Sheet</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>
+            Make changes to your profile here. Click save when you're done.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input id="name" value="Pedro Duarte" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input id="username" value="@peduarte" className="col-span-3" />
+          </div>
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button type="submit">Save changes</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+}
+
+export const Sides: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="outline">Left</Button>
+        </SheetTrigger>
+        <SheetContent side="left">
+          <SheetHeader>
+            <SheetTitle>Left Sheet</SheetTitle>
+            <SheetDescription>This sheet slides in from the left.</SheetDescription>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="outline">Right</Button>
+        </SheetTrigger>
+        <SheetContent side="right">
+          <SheetHeader>
+            <SheetTitle>Right Sheet</SheetTitle>
+            <SheetDescription>This sheet slides in from the right.</SheetDescription>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="outline">Top</Button>
+        </SheetTrigger>
+        <SheetContent side="top">
+          <SheetHeader>
+            <SheetTitle>Top Sheet</SheetTitle>
+            <SheetDescription>This sheet slides in from the top.</SheetDescription>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="outline">Bottom</Button>
+        </SheetTrigger>
+        <SheetContent side="bottom">
+          <SheetHeader>
+            <SheetTitle>Bottom Sheet</SheetTitle>
+            <SheetDescription>This sheet slides in from the bottom.</SheetDescription>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>
+    </div>
+  ),
+}
+
+export const WithForm: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button>Create Account</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Create account</SheetTitle>
+          <SheetDescription>
+            Fill in the details below to create your account.
+          </SheetDescription>
+        </SheetHeader>
+        <form className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input id="email" type="email" placeholder="m@example.com" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input id="password" type="password" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="confirm">Confirm Password</Label>
+            <Input id="confirm" type="password" />
+          </div>
+        </form>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </SheetClose>
+          <Button type="submit">Create</Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+}
+
+export const Navigation: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <line x1="4" x2="20" y1="12" y2="12" />
+            <line x1="4" x2="20" y1="6" y2="6" />
+            <line x1="4" x2="20" y1="18" y2="18" />
+          </svg>
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left">
+        <SheetHeader>
+          <SheetTitle>Navigation</SheetTitle>
+        </SheetHeader>
+        <nav className="grid gap-2 py-4">
+          <a href="#" className="block px-2 py-1 text-lg hover:underline">Home</a>
+          <a href="#" className="block px-2 py-1 text-lg hover:underline">About</a>
+          <a href="#" className="block px-2 py-1 text-lg hover:underline">Services</a>
+          <a href="#" className="block px-2 py-1 text-lg hover:underline">Contact</a>
+        </nav>
+      </SheetContent>
+    </Sheet>
+  ),
+}