@snowcone-app/ui 0.1.42 → 0.2.0

package/src/primitives/stories/DropdownMenu.stories.tsx

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Icon } from '@iconify/react';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from '../dropdown-menu';
+import { Button } from '../button';
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: 'UI/DropdownMenu',
+  component: DropdownMenu,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="secondary">Open Menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <Icon icon="gravity-ui:person" />
+            Profile
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Icon icon="gravity-ui:gear" />
+            Settings
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <Icon icon="gravity-ui:arrow-right-from-square" />
+          Log out
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+export const WithCheckboxItems: Story = {
+  render: () => {
+    const [showStatusBar, setShowStatusBar] = useState(true);
+    const [showActivityBar, setShowActivityBar] = useState(false);
+    const [showPanel, setShowPanel] = useState(false);
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="secondary">View Options</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+          <DropdownMenuCheckboxItem checked={showStatusBar} onCheckedChange={setShowStatusBar}>
+            Status Bar
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem checked={showActivityBar} onCheckedChange={setShowActivityBar}>
+            Activity Bar
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
+            Panel
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+};
+
+export const WithRadioItems: Story = {
+  render: () => {
+    const [position, setPosition] = useState('bottom');
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="secondary">Panel Position</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+          <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+            <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+};
+
+export const WithSubMenu: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="secondary">More Options</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuItem>
+          <Icon icon="gravity-ui:file" />
+          New File
+        </DropdownMenuItem>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Icon icon="gravity-ui:persons" />
+            Invite users
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem>
+              <Icon icon="gravity-ui:envelope" />
+              Email
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Icon icon="gravity-ui:comment" />
+              Message
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Icon icon="gravity-ui:circle-plus" />
+              More...
+            </DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <Icon icon="gravity-ui:gear" />
+          Settings
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+export const ContextMenuStyle: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Icon icon="gravity-ui:ellipsis" className="size-5" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem>
+          <Icon icon="gravity-ui:pencil" />
+          Edit
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <Icon icon="gravity-ui:copy" />
+          Duplicate
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="text-danger">
+          <Icon icon="gravity-ui:trash-bin" />
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};

package/src/primitives/stories/Fieldset.stories.tsx

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Fieldset, Legend } from '../fieldset';
+import { TextField } from '../text-field';
+import { Input } from '../input';
+import { Label } from '../label';
+import { RadioGroup, Radio } from '../radio-group';
+import { Checkbox } from '../checkbox';
+import { Card, CardContent, CardHeader, CardTitle } from '../card';
+import { Button } from '../button';
+
+const meta: Meta<typeof Fieldset> = {
+  title: 'UI/Fieldset',
+  component: Fieldset,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'When true, all form elements inside will be disabled',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Fieldset className="w-[300px]">
+      <Legend>Personal Information</Legend>
+      <TextField>
+        <Label>First Name</Label>
+        <Input placeholder="John" />
+      </TextField>
+      <TextField>
+        <Label>Last Name</Label>
+        <Input placeholder="Doe" />
+      </TextField>
+    </Fieldset>
+  ),
+};
+
+export const WithRadioGroup: Story = {
+  render: () => (
+    <Fieldset className="w-[300px]">
+      <Legend>Notification Preferences</Legend>
+      <RadioGroup defaultValue="email">
+        <div className="flex items-center space-x-2">
+          <Radio value="email" id="pref-email" />
+          <Label htmlFor="pref-email">Email</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio value="sms" id="pref-sms" />
+          <Label htmlFor="pref-sms">SMS</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio value="push" id="pref-push" />
+          <Label htmlFor="pref-push">Push Notifications</Label>
+        </div>
+      </RadioGroup>
+    </Fieldset>
+  ),
+};
+
+export const WithCheckboxes: Story = {
+  render: () => (
+    <Fieldset className="w-[300px]">
+      <Legend>Interests</Legend>
+      <div className="space-y-2">
+        <div className="flex items-center space-x-2">
+          <Checkbox id="interest-tech" />
+          <Label htmlFor="interest-tech">Technology</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="interest-design" />
+          <Label htmlFor="interest-design">Design</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="interest-business" />
+          <Label htmlFor="interest-business">Business</Label>
+        </div>
+      </div>
+    </Fieldset>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Fieldset className="w-[300px]" disabled>
+      <Legend>Disabled Fieldset</Legend>
+      <TextField>
+        <Label>Name</Label>
+        <Input placeholder="Cannot edit" />
+      </TextField>
+      <TextField>
+        <Label>Email</Label>
+        <Input type="email" placeholder="Cannot edit" />
+      </TextField>
+    </Fieldset>
+  ),
+};
+
+export const MultipleFieldsets: Story = {
+  render: () => (
+    <form className="w-[350px] space-y-6">
+      <Fieldset>
+        <Legend>Account Information</Legend>
+        <TextField>
+          <Label>Username</Label>
+          <Input placeholder="Choose a username" />
+        </TextField>
+        <TextField>
+          <Label>Email</Label>
+          <Input type="email" placeholder="your@email.com" />
+        </TextField>
+      </Fieldset>
+
+      <Fieldset>
+        <Legend>Security</Legend>
+        <TextField>
+          <Label>Password</Label>
+          <Input type="password" placeholder="Create password" />
+        </TextField>
+        <TextField>
+          <Label>Confirm Password</Label>
+          <Input type="password" placeholder="Confirm password" />
+        </TextField>
+      </Fieldset>
+
+      <Fieldset>
+        <Legend>Preferences</Legend>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="newsletter" />
+          <Label htmlFor="newsletter">Subscribe to newsletter</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="terms" />
+          <Label htmlFor="terms">I agree to the terms</Label>
+        </div>
+      </Fieldset>
+    </form>
+  ),
+};
+
+export const OnCard: Story = {
+  render: () => (
+    <Card className="w-[400px]">
+      <CardHeader>
+        <CardTitle>Registration Form</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <Fieldset>
+          <Legend>Contact Details</Legend>
+          <TextField>
+            <Label>Full Name</Label>
+            <Input placeholder="Enter your name" />
+          </TextField>
+          <TextField>
+            <Label>Phone</Label>
+            <Input type="tel" placeholder="+1 (555) 000-0000" />
+          </TextField>
+        </Fieldset>
+
+        <Fieldset>
+          <Legend>Communication</Legend>
+          <RadioGroup defaultValue="email">
+            <div className="flex items-center space-x-2">
+              <Radio value="email" id="comm-email" />
+              <Label htmlFor="comm-email">Contact via Email</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Radio value="phone" id="comm-phone" />
+              <Label htmlFor="comm-phone">Contact via Phone</Label>
+            </div>
+          </RadioGroup>
+        </Fieldset>
+
+        <Button className="w-full">Submit</Button>
+      </CardContent>
+    </Card>
+  ),
+};
+
+export const DisabledExample: Story = {
+  name: 'Disabled Example',
+  render: () => (
+    <div className="w-[350px] space-y-4">
+      <p className="text-sm text-foreground/60 mb-4">
+        Fieldset is used for semantic grouping of form controls.
+        Use the <code>disabled</code> prop to disable all child form elements.
+      </p>
+
+      <Fieldset>
+        <Legend>Normal Fieldset</Legend>
+        <TextField>
+          <Label>Input</Label>
+          <Input placeholder="Editable" />
+        </TextField>
+      </Fieldset>
+
+      <Fieldset disabled>
+        <Legend>Disabled Fieldset</Legend>
+        <TextField>
+          <Label>Input</Label>
+          <Input placeholder="Disabled" />
+        </TextField>
+      </Fieldset>
+    </div>
+  ),
+};

package/src/primitives/stories/Input.stories.tsx

@@ -0,0 +1,172 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from '@iconify/react';
+import { Input } from '../input';
+import { Label } from '../label';
+import { Card, CardContent, CardHeader, CardTitle } from '../card';
+
+const meta: Meta<typeof Input> = {
+  title: 'UI/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the input',
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Shows error state',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[300px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex w-full max-w-sm flex-col gap-1.5">
+      <Label htmlFor="email">Email</Label>
+      <Input type="email" id="email" placeholder="Enter your email" />
+    </div>
+  ),
+};
+
+export const WithStartContent: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <Input
+        placeholder="Search..."
+        startContent={<Icon icon="gravity-ui:magnifier" className="size-4" />}
+      />
+    </div>
+  ),
+};
+
+export const WithEndContent: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <Input
+        type="password"
+        placeholder="Enter password"
+        endContent={<Icon icon="gravity-ui:eye" className="size-4 cursor-pointer" />}
+      />
+    </div>
+  ),
+};
+
+export const WithBothContent: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <Input
+        type="text"
+        placeholder="Amount"
+        startContent={<span className="text-sm">$</span>}
+        endContent={<span className="text-sm">.00</span>}
+      />
+    </div>
+  ),
+};
+
+export const Invalid: Story = {
+  render: () => (
+    <div className="flex w-full max-w-sm flex-col gap-1.5">
+      <Label htmlFor="email-invalid">Email</Label>
+      <Input type="email" id="email-invalid" placeholder="Enter email" isInvalid />
+      <p className="text-sm text-danger">Please enter a valid email address.</p>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Disabled input',
+    disabled: true,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[300px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+
+export const File: Story = {
+  render: () => (
+    <div className="flex w-full max-w-sm flex-col gap-1.5">
+      <Label htmlFor="file">Upload File</Label>
+      <Input id="file" type="file" />
+    </div>
+  ),
+};
+
+export const FormExample: Story = {
+  render: () => (
+    <form className="w-full max-w-sm space-y-4">
+      <div className="space-y-1.5">
+        <Label htmlFor="name">Full Name</Label>
+        <Input id="name" placeholder="John Doe" />
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="form-email">Email</Label>
+        <Input
+          id="form-email"
+          type="email"
+          placeholder="john@example.com"
+          startContent={<Icon icon="gravity-ui:envelope" className="size-4" />}
+        />
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="phone">Phone</Label>
+        <Input
+          id="phone"
+          type="tel"
+          placeholder="+1 (555) 000-0000"
+          startContent={<Icon icon="gravity-ui:smartphone" className="size-4" />}
+        />
+      </div>
+    </form>
+  ),
+};
+
+export const OnCard: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Contact Info</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="card-name">Name</Label>
+          <Input id="card-name" placeholder="John Doe" />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="card-email">Email</Label>
+          <Input id="card-email" type="email" placeholder="john@example.com" />
+        </div>
+      </CardContent>
+    </Card>
+  ),
+};