@snowcone-app/ui 0.1.43 → 0.2.1

package/src/primitives/stories/Popover.stories.tsx

@@ -0,0 +1,178 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Popover, PopoverTrigger, PopoverContent } from '../popover';
+import { Button } from '../button';
+import { Label } from '../label';
+import { Input } from '../input';
+
+const meta: Meta<typeof Popover> = {
+  title: 'UI/Popover',
+  component: Popover,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    open: {
+      control: 'boolean',
+      description: 'Whether the popover is open',
+    },
+    modal: {
+      control: 'boolean',
+      description: 'Whether the popover is modal',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="secondary">Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-label 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"
+              />
+            </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"
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <div className="space-y-4">
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button variant="secondary">
+              {open ? 'Close' : 'Open'} Popover
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <p>This is a controlled popover.</p>
+            <Button onClick={() => setOpen(false)} className="mt-2" size="sm">
+              Close
+            </Button>
+          </PopoverContent>
+        </Popover>
+        <p className="text-sm text-muted-foreground">Open: {open.toString()}</p>
+      </div>
+    );
+  },
+};
+
+export const ControlledState: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <div className="space-y-4">
+        <Popover open={isOpen} onOpenChange={setIsOpen}>
+          <PopoverTrigger asChild>
+            <Button variant="secondary">Toggle Popover</Button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <p>Controlled state example</p>
+          </PopoverContent>
+        </Popover>
+        <p className="text-sm text-muted-foreground">isOpen: {isOpen.toString()}</p>
+      </div>
+    );
+  },
+};
+
+export const Positions: Story = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="secondary">Top</Button>
+        </PopoverTrigger>
+        <PopoverContent side="top" className="w-auto">
+          <p>Top popover</p>
+        </PopoverContent>
+      </Popover>
+
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="secondary">Right</Button>
+        </PopoverTrigger>
+        <PopoverContent side="right" className="w-auto">
+          <p>Right popover</p>
+        </PopoverContent>
+      </Popover>
+
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="secondary">Bottom</Button>
+        </PopoverTrigger>
+        <PopoverContent side="bottom" className="w-auto">
+          <p>Bottom popover</p>
+        </PopoverContent>
+      </Popover>
+
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="secondary">Left</Button>
+        </PopoverTrigger>
+        <PopoverContent side="left" className="w-auto">
+          <p>Left popover</p>
+        </PopoverContent>
+      </Popover>
+    </div>
+  ),
+};
+
+export const WithForm: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button>Update Settings</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-label leading-none">Settings</h4>
+            <p className="text-sm text-muted-foreground">Configure your preferences.</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="email">Email</Label>
+              <Input id="email" type="email" placeholder="Enter email" />
+            </div>
+          </div>
+          <Button className="w-full">Save</Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+};

package/src/primitives/stories/RadioGroup.stories.tsx

@@ -0,0 +1,205 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { RadioGroup, RadioGroupItem, Radio } from '../radio-group';
+import { Label } from '../label';
+import { Card, CardContent, CardHeader, CardTitle } from '../card';
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'UI/RadioGroup',
+  component: RadioGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'Selected value',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the radio group',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-one">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-one" id="option-one" />
+        <Label htmlFor="option-one">Option One</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-two" id="option-two" />
+        <Label htmlFor="option-two">Option Two</Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState('comfortable');
+    return (
+      <div className="space-y-4">
+        <RadioGroup value={value} onValueChange={setValue}>
+          <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>
+        <p className="text-sm text-muted-foreground">Selected: {value}</p>
+      </div>
+    );
+  },
+};
+
+export const WithHorizontalOrientation: Story = {
+  render: () => {
+    const [value, setValue] = useState('medium');
+    return (
+      <div className="space-y-4">
+        <RadioGroup value={value} onValueChange={setValue} orientation="horizontal">
+          <Radio value="small" id="size-small">Small</Radio>
+          <Radio value="medium" id="size-medium">Medium</Radio>
+          <Radio value="large" id="size-large">Large</Radio>
+        </RadioGroup>
+        <p className="text-sm text-muted-foreground">Selected: {value}</p>
+      </div>
+    );
+  },
+};
+
+export const UsingRadioComponent: Story = {
+  render: () => (
+    <RadioGroup defaultValue="banana">
+      <Radio value="apple" id="fruit-apple">
+        Apple
+      </Radio>
+      <Radio value="banana" id="fruit-banana">
+        Banana
+      </Radio>
+      <Radio value="orange" id="fruit-orange">
+        Orange
+      </Radio>
+    </RadioGroup>
+  ),
+};
+
+export const Horizontal: Story = {
+  render: () => (
+    <RadioGroup defaultValue="center" className="flex flex-row gap-4">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="left" id="align-left" />
+        <Label htmlFor="align-left">Left</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="center" id="align-center" />
+        <Label htmlFor="align-center">Center</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="right" id="align-right" />
+        <Label htmlFor="align-right">Right</Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-one" disabled>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-one" id="d1" />
+        <Label htmlFor="d1" className="opacity-50">Option One</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-two" id="d2" />
+        <Label htmlFor="d2" className="opacity-50">Option Two</Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+export const FormExample: Story = {
+  render: () => {
+    const [plan, setPlan] = useState('pro');
+    return (
+      <div className="w-full max-w-md space-y-4">
+        <h3 className="text-lg font-heading">Select Plan</h3>
+        <RadioGroup value={plan} onValueChange={setPlan} className="space-y-3">
+          <div className="flex items-start space-x-3 p-4 border border-divider rounded-lg cursor-pointer hover:bg-muted">
+            <RadioGroupItem value="free" id="plan-free" className="mt-1" />
+            <div className="space-y-1">
+              <Label htmlFor="plan-free" className="font-label cursor-pointer">
+                Free
+              </Label>
+              <p className="text-sm text-muted-foreground">
+                Perfect for trying out our service. Limited features.
+              </p>
+            </div>
+          </div>
+          <div className="flex items-start space-x-3 p-4 border border-divider rounded-lg cursor-pointer hover:bg-muted">
+            <RadioGroupItem value="pro" id="plan-pro" className="mt-1" />
+            <div className="space-y-1">
+              <Label htmlFor="plan-pro" className="font-label cursor-pointer">
+                Pro - $9/month
+              </Label>
+              <p className="text-sm text-muted-foreground">
+                All features unlocked. Great for individuals.
+              </p>
+            </div>
+          </div>
+          <div className="flex items-start space-x-3 p-4 border border-divider rounded-lg cursor-pointer hover:bg-muted">
+            <RadioGroupItem value="enterprise" id="plan-enterprise" className="mt-1" />
+            <div className="space-y-1">
+              <Label htmlFor="plan-enterprise" className="font-label cursor-pointer">
+                Enterprise - Contact us
+              </Label>
+              <p className="text-sm text-muted-foreground">
+                Custom solutions for large teams.
+              </p>
+            </div>
+          </div>
+        </RadioGroup>
+      </div>
+    );
+  },
+};
+
+export const OnCard: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Notification Settings</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <RadioGroup defaultValue="all" className="space-y-3">
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="all" id="card-all" />
+            <Label htmlFor="card-all">All notifications</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="important" id="card-important" />
+            <Label htmlFor="card-important">Important only</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="none" id="card-none" />
+            <Label htmlFor="card-none">None</Label>
+          </div>
+        </RadioGroup>
+      </CardContent>
+    </Card>
+  ),
+};

package/src/primitives/stories/Select.stories.tsx

@@ -0,0 +1,222 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+  SelectSeparator,
+} from '../select';
+import { Label } from '../label';
+import { Card, CardContent, CardHeader, CardTitle } from '../card';
+
+const meta: Meta<typeof Select> = {
+  title: 'UI/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="blueberry">Blueberry</SelectItem>
+        <SelectItem value="grapes">Grapes</SelectItem>
+        <SelectItem value="pineapple">Pineapple</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-1.5">
+      <Label htmlFor="framework">Framework</Label>
+      <Select>
+        <SelectTrigger id="framework">
+          <SelectValue placeholder="Select framework" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="next">Next.js</SelectItem>
+          <SelectItem value="remix">Remix</SelectItem>
+          <SelectItem value="astro">Astro</SelectItem>
+          <SelectItem value="gatsby">Gatsby</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <div className="space-y-4">
+        <Select value={value} onValueChange={setValue}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Select a timezone" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="est">Eastern Time</SelectItem>
+            <SelectItem value="cst">Central Time</SelectItem>
+            <SelectItem value="mst">Mountain Time</SelectItem>
+            <SelectItem value="pst">Pacific Time</SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-sm text-muted-foreground">Selected: {value || 'None'}</p>
+      </div>
+    );
+  },
+};
+
+export const WithGroups: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[280px]">
+        <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="mst">Mountain Standard Time (MST)</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>
+          <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Asia</SelectLabel>
+          <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
+          <SelectItem value="cst-china">China Standard Time (CST)</SelectItem>
+          <SelectItem value="ist">India Standard Time (IST)</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Select disabled>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Disabled" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option1">Option 1</SelectItem>
+        <SelectItem value="option2">Option 2</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const WithDisabledItems: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Select plan" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="free">Free</SelectItem>
+        <SelectItem value="pro">Pro</SelectItem>
+        <SelectItem value="enterprise" disabled>
+          Enterprise (Coming Soon)
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const FormExample: Story = {
+  render: () => (
+    <form className="w-full max-w-sm space-y-4">
+      <div className="space-y-1.5">
+        <Label htmlFor="country">Country</Label>
+        <Select>
+          <SelectTrigger id="country">
+            <SelectValue placeholder="Select country" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="us">United States</SelectItem>
+            <SelectItem value="uk">United Kingdom</SelectItem>
+            <SelectItem value="ca">Canada</SelectItem>
+            <SelectItem value="au">Australia</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="language">Language</Label>
+        <Select defaultValue="en">
+          <SelectTrigger id="language">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="en">English</SelectItem>
+            <SelectItem value="es">Spanish</SelectItem>
+            <SelectItem value="fr">French</SelectItem>
+            <SelectItem value="de">German</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </form>
+  ),
+};
+
+export const OnCard: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Settings</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="card-country">Country</Label>
+          <Select>
+            <SelectTrigger id="card-country">
+              <SelectValue placeholder="Select country" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="us">United States</SelectItem>
+              <SelectItem value="uk">United Kingdom</SelectItem>
+              <SelectItem value="ca">Canada</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="card-language">Language</Label>
+          <Select defaultValue="en">
+            <SelectTrigger id="card-language">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="en">English</SelectItem>
+              <SelectItem value="es">Spanish</SelectItem>
+              <SelectItem value="fr">French</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </CardContent>
+    </Card>
+  ),
+};