@snowcone-app/ui 0.1.42 → 0.2.0

package/src/primitives/stories/Collapsible.stories.tsx

@@ -0,0 +1,230 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Icon } from '@iconify/react';
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  Disclosure,
+  DisclosureTrigger,
+  DisclosureContent,
+} from '../collapsible';
+import { Button } from '../button';
+
+const meta: Meta<typeof Collapsible> = {
+  title: 'UI/Collapsible',
+  component: Collapsible,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    open: {
+      control: 'boolean',
+      description: 'Open state',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the collapsible',
+    },
+    onOpenChange: {
+      control: false,
+      description: 'Callback when open state changes',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Collapsible className="w-[350px] space-y-2">
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-label">@radix-ui/collapsible</h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm">
+            <Icon icon="gravity-ui:chevron-down" className="size-4" />
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-md border border-divider px-4 py-2 text-sm">
+        @radix-ui/primitives
+      </div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border border-divider px-4 py-2 text-sm">
+          @radix-ui/colors
+        </div>
+        <div className="rounded-md border border-divider px-4 py-2 text-sm">
+          @stitches/react
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <div className="space-y-4">
+        <Collapsible open={open} onOpenChange={setOpen} className="w-[350px] space-y-2">
+          <div className="flex items-center justify-between space-x-4">
+            <h4 className="text-sm font-label">Controlled Collapsible</h4>
+            <CollapsibleTrigger asChild>
+              <Button variant="secondary" size="sm">
+                {open ? 'Close' : 'Open'}
+              </Button>
+            </CollapsibleTrigger>
+          </div>
+          <CollapsibleContent>
+            <div className="rounded-md border border-divider p-4 text-sm">
+              This content can be expanded and collapsed.
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+        <p className="text-sm text-muted-foreground">Open: {open.toString()}</p>
+      </div>
+    );
+  },
+};
+
+export const UsingDisclosureAlias: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <div className="space-y-4">
+        <Disclosure
+          open={open}
+          onOpenChange={setOpen}
+          className="w-[350px] space-y-2"
+        >
+          <div className="flex items-center justify-between space-x-4">
+            <h4 className="text-sm font-label">Using Disclosure Component</h4>
+            <DisclosureTrigger asChild>
+              <Button variant="ghost" size="sm">
+                <Icon
+                  icon="gravity-ui:chevron-down"
+                  className={`size-4 transition-transform ${open ? 'rotate-180' : ''}`}
+                />
+              </Button>
+            </DisclosureTrigger>
+          </div>
+          <DisclosureContent>
+            <div className="rounded-md border border-divider p-4 text-sm">
+              Disclosure is an alias for Collapsible (same API).
+            </div>
+          </DisclosureContent>
+        </Disclosure>
+        <p className="text-sm text-muted-foreground">Open: {open.toString()}</p>
+      </div>
+    );
+  },
+};
+
+export const WithAnimation: Story = {
+  render: () => (
+    <Collapsible defaultOpen className="w-[350px]">
+      <CollapsibleTrigger asChild>
+        <Button variant="secondary" className="w-full justify-between">
+          Animated Content
+          <Icon icon="gravity-ui:chevron-down" className="size-4" />
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="mt-2 rounded-md border border-divider p-4 space-y-2">
+          <p className="text-sm">This content slides in and out smoothly.</p>
+          <p className="text-sm text-muted-foreground">
+            The animation is defined in globals.css using the collapsible-up
+            and collapsible-down keyframes.
+          </p>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  ),
+};
+
+export const NestedCollapsibles: Story = {
+  render: () => (
+    <Collapsible defaultOpen className="w-[400px] space-y-2">
+      <CollapsibleTrigger asChild>
+        <Button variant="secondary" className="w-full justify-between">
+          Parent Section
+          <Icon icon="gravity-ui:chevron-down" className="size-4" />
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="ml-4 space-y-2 border-l border-divider pl-4">
+          <Collapsible className="space-y-2">
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm" className="w-full justify-between">
+                Child Section 1
+                <Icon icon="gravity-ui:chevron-down" className="size-4" />
+              </Button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="rounded-md bg-muted p-3 text-sm">
+                Nested content 1
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+          <Collapsible className="space-y-2">
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm" className="w-full justify-between">
+                Child Section 2
+                <Icon icon="gravity-ui:chevron-down" className="size-4" />
+              </Button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="rounded-md bg-muted p-3 text-sm">
+                Nested content 2
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  ),
+};
+
+export const FAQ: Story = {
+  render: () => {
+    const faqs = [
+      {
+        question: 'Is it accessible?',
+        answer: 'Yes. It adheres to the WAI-ARIA design pattern.',
+      },
+      {
+        question: 'Is it styled?',
+        answer: 'Yes. It comes with default styles that match your theme.',
+      },
+      {
+        question: 'Is it animated?',
+        answer: 'Yes. It has smooth expand/collapse animations.',
+      },
+    ];
+
+    return (
+      <div className="w-[400px] space-y-2">
+        <h3 className="text-lg mb-4 font-heading">Frequently Asked Questions</h3>
+        {faqs.map((faq, index) => (
+          <Collapsible key={index} className="border border-divider rounded-lg">
+            <CollapsibleTrigger asChild>
+              <Button
+                variant="ghost"
+                className="w-full justify-between px-4 py-3 h-auto font-label"
+              >
+                {faq.question}
+                <Icon icon="gravity-ui:plus" className="size-4" />
+              </Button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="px-4 pb-3 text-sm text-muted-foreground">{faq.answer}</div>
+            </CollapsibleContent>
+          </Collapsible>
+        ))}
+      </div>
+    );
+  },
+};

package/src/primitives/stories/Drawer.stories.tsx

@@ -0,0 +1,378 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerClose,
+} from '../drawer';
+import { Button } from '../button';
+import { Input } from '../input';
+import { Textarea } from '../textarea';
+import { Label } from '../label';
+
+const meta = {
+  title: 'UI/Drawer',
+  component: Drawer,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A mobile-optimized drawer component that works correctly on all platforms including iOS Safari.
+
+## Key Features
+- CSS-based animations for smooth, native-feeling performance
+- Backdrop blur overlay by default for modern iOS 26+ appearance
+- Automatic safe-area handling (no explicit props needed)
+- Native swipe-to-dismiss gesture support
+- Works with scrollable page content
+- No dependency on Vaul or other drawer libraries
+
+## Why This Exists
+The Vaul drawer library causes viewport issues on iOS Safari 26, leaving a white gap at the bottom of the screen after the drawer closes. This component avoids those issues by using proper positioning and CSS animations.
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof Drawer>;
+
+export const Default: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="secondary">Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Edit Profile</DrawerTitle>
+          <DrawerDescription>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="p-4 space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input id="name" placeholder="Enter your name" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="username">Username</Label>
+            <Input id="username" placeholder="@username" />
+          </div>
+        </div>
+        <DrawerFooter>
+          <Button>Save changes</Button>
+          <DrawerClose asChild>
+            <Button variant="secondary">Cancel</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const WithScroll: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="secondary">Terms & Conditions</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Terms of Service</DrawerTitle>
+          <DrawerDescription>Please read our terms carefully.</DrawerDescription>
+        </DrawerHeader>
+        <div className="p-4">
+          <div className="space-y-4 text-sm text-muted-foreground">
+            {Array.from({ length: 20 }).map((_, i) => (
+              <p key={i}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+                ex ea commodo consequat.
+              </p>
+            ))}
+          </div>
+        </div>
+        <DrawerFooter>
+          <Button>I Accept</Button>
+          <DrawerClose asChild>
+            <Button variant="secondary">Decline</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const ContactForm: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Contact Us</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Get in Touch</DrawerTitle>
+          <DrawerDescription>
+            Fill out the form below and we&apos;ll get back to you as soon as possible.
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="p-4 space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="firstName">First Name</Label>
+              <Input id="firstName" placeholder="John" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="lastName">Last Name</Label>
+              <Input id="lastName" placeholder="Doe" />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input id="email" type="email" placeholder="john@example.com" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="message">Message</Label>
+            <Textarea id="message" placeholder="How can we help?" />
+          </div>
+        </div>
+        <DrawerFooter>
+          <Button className="w-full">Send Message</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const SimpleConfirmation: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="destructive">Delete Account</Button>
+      </DrawerTrigger>
+      <DrawerContent maxHeight="40dvh">
+        <DrawerHeader className="text-center">
+          <DrawerTitle>Are you sure?</DrawerTitle>
+          <DrawerDescription>
+            This action cannot be undone. This will permanently delete your account and remove your data from our
+            servers.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="flex-row justify-center gap-2">
+          <DrawerClose asChild>
+            <Button variant="secondary">Cancel</Button>
+          </DrawerClose>
+          <Button variant="destructive">Delete Account</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const TallDrawer: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="secondary">Open Tall Drawer (90%)</Button>
+      </DrawerTrigger>
+      <DrawerContent maxHeight="90dvh">
+        <DrawerHeader>
+          <DrawerTitle>Full Screen Experience</DrawerTitle>
+          <DrawerDescription>This drawer takes up 90% of the viewport height.</DrawerDescription>
+        </DrawerHeader>
+        <div className="p-4 flex-1">
+          <div className="h-full flex items-center justify-center text-muted-foreground">
+            Lots of space for content here
+          </div>
+        </div>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button variant="secondary" className="w-full">
+              Close
+            </Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const HiddenHandle: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="secondary">Open (No Handle)</Button>
+      </DrawerTrigger>
+      <DrawerContent hideHandle>
+        <DrawerHeader>
+          <DrawerTitle>Clean Look</DrawerTitle>
+          <DrawerDescription>
+            This drawer has no visible handle. Swipe gestures still work for dismissal.
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="p-4">
+          <p className="text-sm text-muted-foreground">
+            You can still swipe down to dismiss this drawer, even though the handle is hidden.
+          </p>
+        </div>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button className="w-full">Got it</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const Controlled: Story = {
+  render: function ControlledDrawer() {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <div className="flex flex-col gap-4 items-center">
+        <p className="text-sm text-muted-foreground">Drawer is {open ? 'open' : 'closed'}</p>
+        <Drawer open={open} onOpenChange={setOpen}>
+          <DrawerTrigger asChild>
+            <Button>Open Controlled Drawer</Button>
+          </DrawerTrigger>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>Controlled Drawer</DrawerTitle>
+              <DrawerDescription>This drawer&apos;s state is controlled externally.</DrawerDescription>
+            </DrawerHeader>
+            <div className="p-4">
+              <p className="text-sm text-muted-foreground">
+                The parent component controls whether this drawer is open or closed. This is useful for programmatic
+                control.
+              </p>
+            </div>
+            <DrawerFooter>
+              <Button onClick={() => setOpen(false)}>Close Programmatically</Button>
+              <DrawerClose asChild>
+                <Button variant="secondary">Close via Context</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      </div>
+    );
+  },
+};
+
+export const NoOverlay: Story = {
+  render: () => (
+    <div className="p-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg">
+      <Drawer>
+        <DrawerTrigger asChild>
+          <Button variant="secondary">Open (No Overlay)</Button>
+        </DrawerTrigger>
+        <DrawerContent showOverlay={false}>
+          <DrawerHeader>
+            <DrawerTitle>No Overlay</DrawerTitle>
+            <DrawerDescription>The background is visible behind this drawer.</DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4">
+            <p className="text-sm text-muted-foreground">
+              Notice that there&apos;s no dark overlay. The colorful background is still visible.
+            </p>
+          </div>
+          <DrawerFooter>
+            <DrawerClose asChild>
+              <Button className="w-full">Close</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  ),
+};
+
+export const SwipeToTest: Story = {
+  render: () => (
+    <div className="text-center space-y-4">
+      <p className="text-sm text-muted-foreground max-w-sm">
+        On touch devices, you can swipe down on the drawer to dismiss it. Try it on iOS Safari!
+      </p>
+      <Drawer>
+        <DrawerTrigger asChild>
+          <Button>Test Swipe Gesture</Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Swipe Me Down!</DrawerTitle>
+            <DrawerDescription>
+              Touch and drag downward anywhere on this drawer to dismiss it.
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4 space-y-4">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <div key={i} className="p-4 bg-muted rounded-lg">
+                Item {i + 1}
+              </div>
+            ))}
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  ),
+};
+
+export const CustomBackground: Story = {
+  render: () => (
+    <div className="p-8 bg-gradient-to-br from-blue-400 via-teal-300 to-green-300 rounded-lg min-h-[200px]">
+      <div className="text-center space-y-4">
+        <p className="text-sm text-white/80 max-w-sm mx-auto">
+          Custom colored drawer with blur overlay. The drawer background extends
+          naturally into the safe areas - no configuration needed.
+        </p>
+        <Drawer>
+          <DrawerTrigger asChild>
+            <Button className="bg-white/90 text-emerald-700 hover:bg-white">
+              Open Custom Drawer
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent className="bg-emerald-500" scrollFadeColor="#22c55e">
+            <DrawerTitle className="sr-only">Custom Styled Drawer</DrawerTitle>
+            <div className="px-6 pb-4">
+              <h2 className="text-xl font-bold text-white">Custom Background</h2>
+              <p className="text-emerald-100 text-sm mt-1">
+                Blur overlay + safe areas work automatically
+              </p>
+            </div>
+            <div className="px-6">
+              <div className="bg-emerald-400 border border-emerald-300 rounded-lg p-3 mb-4">
+                <p className="text-white text-sm">
+                  Notice the blurred gradient visible through the overlay above.
+                  Safe area at bottom matches the drawer background.
+                </p>
+              </div>
+              <div className="space-y-3 pb-4">
+                {Array.from({ length: 10 }).map((_, i) => (
+                  <div
+                    key={i}
+                    className="p-4 bg-emerald-400 rounded-lg border border-emerald-300"
+                  >
+                    <div className="font-medium text-white">Item {i + 1}</div>
+                    <div className="text-sm text-emerald-100">
+                      Content with custom colored background
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </DrawerContent>
+        </Drawer>
+      </div>
+    </div>
+  ),
+};