@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/navigation-menu/NavigationMenu.stories.tsx

@@ -0,0 +1,202 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from './index'
+import { cn } from '../../utils/cn'
+import * as React from 'react'
+
+const meta: Meta<typeof NavigationMenu> = {
+  title: 'Components/NavigationMenu',
+  component: NavigationMenu,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A collection of links for navigating websites.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof NavigationMenu>
+
+const ListItem = React.forwardRef<
+  React.ElementRef<'a'>,
+  React.ComponentPropsWithoutRef<'a'> & { title: string }
+>(({ className, title, children, ...props }, ref) => {
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <a
+          ref={ref}
+          className={cn(
+            'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+            className
+          )}
+          {...props}
+        >
+          <div className="text-sm font-medium leading-none">{title}</div>
+          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+            {children}
+          </p>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  )
+})
+ListItem.displayName = 'ListItem'
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <NavigationMenu {...args}>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+              <li className="row-span-3">
+                <NavigationMenuLink asChild>
+                  <a
+                    className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                    href="#"
+                  >
+                    <div className="mb-2 mt-4 text-lg font-medium">
+                      shadcn/ui
+                    </div>
+                    <p className="text-sm leading-tight text-muted-foreground">
+                      Beautifully designed components built with Radix UI and
+                      Tailwind CSS.
+                    </p>
+                  </a>
+                </NavigationMenuLink>
+              </li>
+              <ListItem href="#" title="Introduction">
+                Re-usable components built using Radix UI and Tailwind CSS.
+              </ListItem>
+              <ListItem href="#" title="Installation">
+                How to install dependencies and structure your app.
+              </ListItem>
+              <ListItem href="#" title="Typography">
+                Styles for headings, paragraphs, lists...etc
+              </ListItem>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+              <ListItem href="#" title="Alert Dialog">
+                A modal dialog that interrupts the user with important content.
+              </ListItem>
+              <ListItem href="#" title="Hover Card">
+                For sighted users to preview content behind a link.
+              </ListItem>
+              <ListItem href="#" title="Progress">
+                Displays an indicator showing the completion progress.
+              </ListItem>
+              <ListItem href="#" title="Scroll-area">
+                Visually or semantically separates content.
+              </ListItem>
+              <ListItem href="#" title="Tabs">
+                A set of layered sections of content.
+              </ListItem>
+              <ListItem href="#" title="Tooltip">
+                A popup that displays information on hover.
+              </ListItem>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
+            Documentation
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+}
+
+export const Simple: Story = {
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
+            Home
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
+            About
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
+            Services
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
+            Contact
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+}
+
+export const WithDropdowns: Story = {
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[400px] gap-3 p-4">
+              <ListItem href="#" title="Analytics">
+                Track and measure your application performance.
+              </ListItem>
+              <ListItem href="#" title="Engagement">
+                Build better relationships with your users.
+              </ListItem>
+              <ListItem href="#" title="Security">
+                Protect your data and your users.
+              </ListItem>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[400px] gap-3 p-4">
+              <ListItem href="#" title="Documentation">
+                Learn how to integrate our tools.
+              </ListItem>
+              <ListItem href="#" title="API Reference">
+                Complete API documentation.
+              </ListItem>
+              <ListItem href="#" title="Guides">
+                Step-by-step tutorials.
+              </ListItem>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
+            Pricing
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+}

package/src/components/popover/Popover.stories.tsx

@@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Popover, PopoverContent, PopoverTrigger } from './index'
+import { Button } from '../button'
+import { Input } from '../input'
+import { Label } from '../label'
+import { Settings, Share, Plus } from 'lucide-react'
+
+const meta: Meta<typeof Popover> = {
+  title: 'Components/Popover',
+  component: Popover,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Displays rich content in a portal, triggered by a button.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Popover>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <Popover {...args}>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Dimensions</h4>
+            <p className="text-sm text-muted-foreground">
+              Set the dimensions for the layer.
+            </p>
+          </div>
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+              <Input
+                id="width"
+                defaultValue="100%"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+              <Input
+                id="height"
+                defaultValue="25px"
+                className="col-span-2 h-8"
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+}
+
+export const Positions: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline">Top</Button>
+        </PopoverTrigger>
+        <PopoverContent side="top" className="w-auto">
+          <p className="text-sm">Popover on top</p>
+        </PopoverContent>
+      </Popover>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline">Right</Button>
+        </PopoverTrigger>
+        <PopoverContent side="right" className="w-auto">
+          <p className="text-sm">Popover on right</p>
+        </PopoverContent>
+      </Popover>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline">Bottom</Button>
+        </PopoverTrigger>
+        <PopoverContent side="bottom" className="w-auto">
+          <p className="text-sm">Popover on bottom</p>
+        </PopoverContent>
+      </Popover>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline">Left</Button>
+        </PopoverTrigger>
+        <PopoverContent side="left" className="w-auto">
+          <p className="text-sm">Popover on left</p>
+        </PopoverContent>
+      </Popover>
+    </div>
+  ),
+}
+
+export const WithForm: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button>
+          <Plus className="mr-2 h-4 w-4" />
+          Add item
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <form className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Add new item</h4>
+            <p className="text-sm text-muted-foreground">
+              Fill in the details below.
+            </p>
+          </div>
+          <div className="grid gap-2">
+            <div className="grid gap-1">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" placeholder="Enter name" />
+            </div>
+            <div className="grid gap-1">
+              <Label htmlFor="description">Description</Label>
+              <Input id="description" placeholder="Enter description" />
+            </div>
+          </div>
+          <Button type="submit">Save</Button>
+        </form>
+      </PopoverContent>
+    </Popover>
+  ),
+}
+
+export const SharePopover: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="secondary">
+          <Share className="mr-2 h-4 w-4" />
+          Share
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Share link</h4>
+            <p className="text-sm text-muted-foreground">
+              Anyone with this link can view this content.
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Input
+              defaultValue="https://example.com/share/abc123"
+              readOnly
+              className="h-8"
+            />
+            <Button size="sm" className="px-3">
+              Copy
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+}
+
+export const SettingsPopover: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Settings className="h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56">
+        <div className="grid gap-4">
+          <h4 className="font-medium leading-none">Settings</h4>
+          <div className="grid gap-2">
+            <button className="text-left text-sm hover:bg-muted p-2 rounded-md">
+              Profile settings
+            </button>
+            <button className="text-left text-sm hover:bg-muted p-2 rounded-md">
+              Notifications
+            </button>
+            <button className="text-left text-sm hover:bg-muted p-2 rounded-md">
+              Privacy
+            </button>
+            <button className="text-left text-sm text-destructive hover:bg-muted p-2 rounded-md">
+              Sign out
+            </button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+}

package/src/components/progress/Progress.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Progress } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof Progress> = {
+  title: 'Components/Progress',
+  component: Progress,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Displays an indicator showing the completion progress of a task.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'The progress value (0-100)',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Progress>
+
+export const Default: Story = {
+  args: {
+    value: 60,
+    className: 'w-[300px]',
+  },
+}
+
+export const Values: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[300px]">
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">0%</span>
+        <Progress value={0} />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">25%</span>
+        <Progress value={25} />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">50%</span>
+        <Progress value={50} />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">75%</span>
+        <Progress value={75} />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">100%</span>
+        <Progress value={100} />
+      </div>
+    </div>
+  ),
+}
+
+export const Animated: Story = {
+  render: function AnimatedProgress() {
+    const [progress, setProgress] = React.useState(13)
+
+    React.useEffect(() => {
+      const timer = setTimeout(() => setProgress(66), 500)
+      return () => clearTimeout(timer)
+    }, [])
+
+    return <Progress value={progress} className="w-[300px]" />
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[300px]">
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">Small (h-2)</span>
+        <Progress value={60} className="h-2" />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">Default (h-4)</span>
+        <Progress value={60} />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">Large (h-6)</span>
+        <Progress value={60} className="h-6" />
+      </div>
+    </div>
+  ),
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="w-[300px] space-y-2">
+      <div className="flex justify-between text-sm">
+        <span>Uploading...</span>
+        <span className="text-muted-foreground">73%</span>
+      </div>
+      <Progress value={73} />
+    </div>
+  ),
+}

package/src/components/radio-group/RadioGroup.stories.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { RadioGroup, RadioGroupItem } from './index'
+import { Label } from '../label'
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Components/RadioGroup',
+  component: RadioGroup,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A set of checkable buttons where only one can be checked at a time.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof RadioGroup>
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'comfortable',
+  },
+  render: (args) => (
+    <RadioGroup {...args}>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="default" id="r1" />
+        <Label htmlFor="r1">Default</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="comfortable" id="r2" />
+        <Label htmlFor="r2">Comfortable</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="compact" id="r3" />
+        <Label htmlFor="r3">Compact</Label>
+      </div>
+    </RadioGroup>
+  ),
+}
+
+export const Horizontal: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-1" className="flex gap-4">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-1" id="h1" />
+        <Label htmlFor="h1">Option 1</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-2" id="h2" />
+        <Label htmlFor="h2">Option 2</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-3" id="h3" />
+        <Label htmlFor="h3">Option 3</Label>
+      </div>
+    </RadioGroup>
+  ),
+}
+
+export const WithDescription: Story = {
+  render: () => (
+    <RadioGroup defaultValue="card" className="gap-4">
+      <div className="flex items-start space-x-3">
+        <RadioGroupItem value="card" id="card" className="mt-1" />
+        <div className="grid gap-1.5 leading-none">
+          <Label htmlFor="card">Card payment</Label>
+          <p className="text-sm text-muted-foreground">
+            Pay with credit or debit card
+          </p>
+        </div>
+      </div>
+      <div className="flex items-start space-x-3">
+        <RadioGroupItem value="paypal" id="paypal" className="mt-1" />
+        <div className="grid gap-1.5 leading-none">
+          <Label htmlFor="paypal">PayPal</Label>
+          <p className="text-sm text-muted-foreground">
+            Pay with your PayPal account
+          </p>
+        </div>
+      </div>
+      <div className="flex items-start space-x-3">
+        <RadioGroupItem value="bank" id="bank" className="mt-1" />
+        <div className="grid gap-1.5 leading-none">
+          <Label htmlFor="bank">Bank transfer</Label>
+          <p className="text-sm text-muted-foreground">
+            Pay via bank transfer
+          </p>
+        </div>
+      </div>
+    </RadioGroup>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-1">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-1" id="d1" />
+        <Label htmlFor="d1">Available</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-2" id="d2" disabled />
+        <Label htmlFor="d2" className="text-muted-foreground">Disabled</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-3" id="d3" />
+        <Label htmlFor="d3">Available</Label>
+      </div>
+    </RadioGroup>
+  ),
+}
+
+export const FormExample: Story = {
+  render: () => (
+    <form className="w-[300px] space-y-6">
+      <div className="space-y-3">
+        <Label>Notification preferences</Label>
+        <RadioGroup defaultValue="all">
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="all" id="notify-all" />
+            <Label htmlFor="notify-all">All notifications</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="important" id="notify-important" />
+            <Label htmlFor="notify-important">Important only</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="none" id="notify-none" />
+            <Label htmlFor="notify-none">None</Label>
+          </div>
+        </RadioGroup>
+      </div>
+    </form>
+  ),
+}