@snowcone-app/ui 0.1.43 → 0.2.0

package/src/primitives/stories/Button.stories.tsx

@@ -0,0 +1,185 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from '@iconify/react';
+import { Button } from '../button';
+
+const meta: Meta<typeof Button> = {
+  title: 'UI/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'primary', 'secondary', 'tertiary', 'field', 'ghost', 'destructive', 'outline', 'link'],
+      description: 'Button style variant',
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'md', 'lg', 'icon'],
+      description: 'Button size',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the button',
+    },
+    isPending: {
+      control: 'boolean',
+      description: 'HeroUI compatibility: Shows loading state',
+    },
+    onClick: { action: 'clicked' },
+    onPress: { action: 'pressed (HeroUI compat)' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Basic variants
+export const Default: Story = {
+  args: {
+    children: 'Default Button',
+    variant: 'default',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    children: 'Primary Button',
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary Button',
+    variant: 'secondary',
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    children: 'Tertiary Button',
+    variant: 'tertiary',
+  },
+};
+
+export const Field: Story = {
+  args: {
+    children: 'Field Button',
+    variant: 'field',
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: 'Ghost Button',
+    variant: 'ghost',
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    children: 'Delete',
+    variant: 'destructive',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: 'Outline Button',
+    variant: 'outline',
+  },
+};
+
+export const Link: Story = {
+  args: {
+    children: 'Link Button',
+    variant: 'link',
+  },
+};
+
+// Sizes
+export const Small: Story = {
+  args: {
+    children: 'Small',
+    size: 'sm',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    children: 'Medium',
+    size: 'md',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: 'Large',
+    size: 'lg',
+  },
+};
+
+// With Icons
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <>
+        <Icon icon="gravity-ui:plus" className="size-4" />
+        Add Item
+      </>
+    ),
+  },
+};
+
+export const IconOnly: Story = {
+  args: {
+    children: <Icon icon="gravity-ui:gear" className="size-5" />,
+    size: 'icon',
+    variant: 'ghost',
+  },
+};
+
+// States
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled',
+    disabled: true,
+  },
+};
+
+export const Pending: Story = {
+  args: {
+    children: 'Loading...',
+    isPending: true,
+  },
+};
+
+// All Variants Gallery
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap gap-2">
+        <Button variant="default">Default</Button>
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="tertiary">Tertiary</Button>
+        <Button variant="field">Field</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="destructive">Destructive</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="link">Link</Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="sm">Small</Button>
+        <Button size="default">Default</Button>
+        <Button size="lg">Large</Button>
+        <Button size="icon">
+          <Icon icon="gravity-ui:star" className="size-5" />
+        </Button>
+      </div>
+    </div>
+  ),
+};

package/src/primitives/stories/Card.stories.tsx

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from '@iconify/react';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../card';
+import { Button } from '../button';
+import { Label } from '../label';
+import { Input } from '../input';
+
+const meta: Meta<typeof Card> = {
+  title: 'UI/Card',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card description goes here.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card content goes here. This is where the main information is displayed.</p>
+      </CardContent>
+      <CardFooter>
+        <Button>Action</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const WithForm: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Create Account</CardTitle>
+        <CardDescription>Enter your details to create a new account.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" placeholder="John Doe" />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="john@example.com" />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="password">Password</Label>
+          <Input id="password" type="password" />
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="secondary">Cancel</Button>
+        <Button>Create</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const Notification: Story = {
+  render: () => (
+    <Card className="w-[380px]">
+      <CardHeader>
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>You have 3 unread messages.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {[
+          { title: 'Your call has been confirmed.', time: '1 hour ago' },
+          { title: 'You have a new message!', time: '2 hours ago' },
+          { title: 'Your subscription is expiring soon!', time: '5 hours ago' },
+        ].map((notification, i) => (
+          <div key={i} className="flex items-start gap-4">
+            <div className="bg-primary/10 flex h-8 w-8 items-center justify-center rounded-full">
+              <Icon icon="gravity-ui:bell" className="text-primary size-4" />
+            </div>
+            <div className="space-y-1">
+              <p className="text-sm leading-none font-label">{notification.title}</p>
+              <p className="text-muted-foreground text-sm">{notification.time}</p>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full" variant="secondary">
+          <Icon icon="gravity-ui:check" className="mr-2 size-4" />
+          Mark all as read
+        </Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const Stats: Story = {
+  render: () => (
+    <div className="grid gap-4 md:grid-cols-3">
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-label">Total Revenue</CardTitle>
+          <Icon icon="gravity-ui:dollar" className="text-muted-foreground size-4" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">$45,231.89</div>
+          <p className="text-muted-foreground text-xs">+20.1% from last month</p>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-label">Subscriptions</CardTitle>
+          <Icon icon="gravity-ui:persons" className="text-muted-foreground size-4" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">+2,350</div>
+          <p className="text-muted-foreground text-xs">+180.1% from last month</p>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-label">Active Now</CardTitle>
+          <Icon icon="gravity-ui:chart-line" className="text-muted-foreground size-4" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">+573</div>
+          <p className="text-muted-foreground text-xs">+201 since last hour</p>
+        </CardContent>
+      </Card>
+    </div>
+  ),
+};
+
+export const Product: Story = {
+  render: () => (
+    <Card className="w-[300px] overflow-hidden">
+      <div className="bg-muted flex aspect-square items-center justify-center">
+        <Icon icon="gravity-ui:t-shirt" className="text-muted-foreground size-24" />
+      </div>
+      <CardHeader>
+        <CardTitle>Classic T-Shirt</CardTitle>
+        <CardDescription>Comfortable cotton blend</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-between">
+          <span className="text-2xl font-bold">$29.99</span>
+          <span className="text-muted-foreground text-sm line-through">$39.99</span>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">
+          <Icon icon="gravity-ui:shopping-cart" className="mr-2 size-4" />
+          Add to Cart
+        </Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const Simple: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardContent className="pt-6">
+        <p className="text-muted-foreground text-center">A simple card with just content, no header or footer.</p>
+      </CardContent>
+    </Card>
+  ),
+};

package/src/primitives/stories/Checkbox.stories.tsx

@@ -0,0 +1,214 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Checkbox } from '../checkbox';
+import { Label } from '../label';
+import { Card, CardContent, CardHeader, CardTitle } from '../card';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'UI/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    checked: {
+      control: 'boolean',
+      description: 'Checked state',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the checkbox',
+    },
+    onCheckedChange: {
+      control: false,
+      description: 'Callback when checked state changes',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  ),
+};
+
+export const Checked: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="checked" defaultChecked />
+      <Label htmlFor="checked">Checked by default</Label>
+    </div>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="controlled"
+            checked={checked}
+            onCheckedChange={(value) => setChecked(value === true)}
+          />
+          <Label htmlFor="controlled">Subscribe to newsletter</Label>
+        </div>
+        <p className="text-sm text-muted-foreground">Checked: {checked.toString()}</p>
+      </div>
+    );
+  },
+};
+
+export const DefaultChecked: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="default-checked" defaultChecked />
+      <Label htmlFor="default-checked">Default checked</Label>
+    </div>
+  ),
+};
+
+export const Indeterminate: Story = {
+  render: () => {
+    const [checked, setChecked] = useState<boolean | 'indeterminate'>('indeterminate');
+
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center space-x-2">
+          <Checkbox id="indeterminate" checked={checked} onCheckedChange={setChecked} />
+          <Label htmlFor="indeterminate">Select all</Label>
+        </div>
+        <p className="text-sm text-muted-foreground">State: {String(checked)}</p>
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center space-x-2">
+        <Checkbox id="disabled-off" disabled />
+        <Label htmlFor="disabled-off" className="opacity-50">
+          Disabled (unchecked)
+        </Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="disabled-on" disabled defaultChecked />
+        <Label htmlFor="disabled-on" className="opacity-50">
+          Disabled (checked)
+        </Label>
+      </div>
+    </div>
+  ),
+};
+
+export const WithDescription: Story = {
+  render: () => (
+    <div className="items-top flex space-x-2">
+      <Checkbox id="terms2" />
+      <div className="grid gap-1.5 leading-none">
+        <Label htmlFor="terms2">Accept terms and conditions</Label>
+        <p className="text-sm text-muted-foreground">
+          You agree to our Terms of Service and Privacy Policy.
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+export const FormExample: Story = {
+  render: () => {
+    const [preferences, setPreferences] = useState({
+      marketing: true,
+      notifications: true,
+      updates: false,
+    });
+
+    return (
+      <div className="w-full max-w-sm space-y-4">
+        <h3 className="text-lg font-heading">Email Preferences</h3>
+        <div className="space-y-4">
+          <div className="flex items-start space-x-3">
+            <Checkbox
+              id="marketing"
+              checked={preferences.marketing}
+              onCheckedChange={(checked) =>
+                setPreferences({ ...preferences, marketing: checked as boolean })
+              }
+            />
+            <div className="space-y-1">
+              <Label htmlFor="marketing">Marketing emails</Label>
+              <p className="text-sm text-muted-foreground">
+                Receive emails about new products, features, and more.
+              </p>
+            </div>
+          </div>
+          <div className="flex items-start space-x-3">
+            <Checkbox
+              id="notifications"
+              checked={preferences.notifications}
+              onCheckedChange={(checked) =>
+                setPreferences({ ...preferences, notifications: checked as boolean })
+              }
+            />
+            <div className="space-y-1">
+              <Label htmlFor="notifications">Notification emails</Label>
+              <p className="text-sm text-muted-foreground">
+                Receive emails about your account activity.
+              </p>
+            </div>
+          </div>
+          <div className="flex items-start space-x-3">
+            <Checkbox
+              id="updates"
+              checked={preferences.updates}
+              onCheckedChange={(checked) =>
+                setPreferences({ ...preferences, updates: checked as boolean })
+              }
+            />
+            <div className="space-y-1">
+              <Label htmlFor="updates">Product updates</Label>
+              <p className="text-sm text-muted-foreground">
+                Receive emails about product updates and new features.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const OnCard: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Preferences</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center space-x-2">
+          <Checkbox id="card-emails" defaultChecked />
+          <Label htmlFor="card-emails">Receive emails</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="card-sms" />
+          <Label htmlFor="card-sms">Receive SMS</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="card-push" defaultChecked />
+          <Label htmlFor="card-push">Push notifications</Label>
+        </div>
+      </CardContent>
+    </Card>
+  ),
+};