sonance-brand-mcp 1.1.4 → 1.2.2

package/dist/assets/components/divider.stories.tsx

@@ -0,0 +1,176 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Divider } from './divider';
+
+const meta: Meta<typeof Divider> = {
+  title: 'Components/Utilities/Divider',
+  component: Divider,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A visual separator for dividing content sections.',
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+    label: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-full max-w-md">
+      <p className="text-foreground-secondary">Content above the divider</p>
+      <Divider className="my-4" />
+      <p className="text-foreground-secondary">Content below the divider</p>
+    </div>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="w-full max-w-md">
+      <p className="text-foreground-secondary">Content above</p>
+      <Divider label="OR" className="my-4" />
+      <p className="text-foreground-secondary">Content below</p>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex items-center gap-4 h-12">
+      <span className="text-foreground-secondary">Item 1</span>
+      <Divider orientation="vertical" />
+      <span className="text-foreground-secondary">Item 2</span>
+      <Divider orientation="vertical" />
+      <span className="text-foreground-secondary">Item 3</span>
+    </div>
+  ),
+};
+
+export const InCard: Story = {
+  render: () => (
+    <div className="w-80 border border-border p-4">
+      <h3 className="font-medium text-foreground">Card Title</h3>
+      <p className="text-sm text-foreground-muted mt-1">Card subtitle or description</p>
+      <Divider className="my-4" />
+      <p className="text-sm text-foreground-secondary">
+        This is the main content area of the card. The divider separates the header from the content.
+      </p>
+      <Divider className="my-4" />
+      <div className="flex justify-end gap-2">
+        <button className="text-sm text-foreground-muted hover:text-foreground">Cancel</button>
+        <button className="text-sm text-primary hover:text-primary-hover">Confirm</button>
+      </div>
+    </div>
+  ),
+};
+
+export const LoginForm: Story = {
+  render: () => (
+    <div className="w-80 space-y-4">
+      <button className="w-full px-4 py-2 border border-border text-foreground hover:bg-secondary-hover transition-colors">
+        Continue with Google
+      </button>
+      <button className="w-full px-4 py-2 border border-border text-foreground hover:bg-secondary-hover transition-colors">
+        Continue with GitHub
+      </button>
+      <Divider label="or" className="my-6" />
+      <input
+        type="email"
+        placeholder="Email address"
+        className="w-full px-3 py-2 border border-border bg-background text-foreground"
+      />
+      <button className="w-full px-4 py-2 bg-primary text-primary-foreground hover:bg-primary-hover transition-colors">
+        Continue with Email
+      </button>
+    </div>
+  ),
+};
+
+export const NavigationBar: Story = {
+  render: () => (
+    <nav className="flex items-center gap-4 p-4 border border-border">
+      <a href="#" className="text-sm text-foreground hover:text-foreground-secondary">Home</a>
+      <a href="#" className="text-sm text-foreground hover:text-foreground-secondary">Products</a>
+      <a href="#" className="text-sm text-foreground hover:text-foreground-secondary">About</a>
+      <Divider orientation="vertical" className="h-4" />
+      <a href="#" className="text-sm text-foreground hover:text-foreground-secondary">Support</a>
+      <a href="#" className="text-sm text-foreground hover:text-foreground-secondary">Contact</a>
+    </nav>
+  ),
+};
+
+export const AllExamples: Story = {
+  render: () => (
+    <div className="space-y-8 w-full max-w-md">
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Horizontal</p>
+        <Divider />
+      </div>
+
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">With Label</p>
+        <Divider label="Section" />
+      </div>
+
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Vertical (in flex container)</p>
+        <div className="flex items-center gap-4 h-8">
+          <span>Left</span>
+          <Divider orientation="vertical" />
+          <span>Center</span>
+          <Divider orientation="vertical" />
+          <span>Right</span>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// Responsive Matrix - Mobile, Tablet, Desktop
+export const ResponsiveMatrix: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Mobile */}
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <div className="w-[375px] border border-dashed border-border p-4">
+          <p className="text-foreground-secondary text-sm">Content above</p>
+          <Divider className="my-4" />
+          <p className="text-foreground-secondary text-sm">Content below</p>
+        </div>
+      </div>
+      {/* Tablet */}
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <div className="w-[768px] border border-dashed border-border p-4">
+          <Divider label="OR" />
+        </div>
+      </div>
+      {/* Desktop */}
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <div className="w-[1280px] border border-dashed border-border p-4">
+          <div className="flex items-center gap-4 h-8">
+            <span className="text-foreground-secondary">Section 1</span>
+            <Divider orientation="vertical" />
+            <span className="text-foreground-secondary">Section 2</span>
+            <Divider orientation="vertical" />
+            <span className="text-foreground-secondary">Section 3</span>
+            <Divider orientation="vertical" />
+            <span className="text-foreground-secondary">Section 4</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/drawer.stories.tsx

@@ -0,0 +1,216 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerFooter } from './drawer';
+import { Button } from './button';
+import { Input } from './input';
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Components/Overlays/Drawer',
+  component: Drawer,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A sliding panel overlay that appears from the edge of the screen.',
+      },
+    },
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Drawer</Button>
+        <Drawer open={open} onClose={() => setOpen(false)}>
+          <DrawerHeader onClose={() => setOpen(false)}>
+            <DrawerTitle>Drawer Title</DrawerTitle>
+          </DrawerHeader>
+          <DrawerBody>
+            <p className="text-foreground-secondary">
+              This is the drawer content area. You can add any content here.
+            </p>
+          </DrawerBody>
+          <DrawerFooter>
+            <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
+            <Button onClick={() => setOpen(false)}>Save</Button>
+          </DrawerFooter>
+        </Drawer>
+      </>
+    );
+  },
+};
+
+export const LeftPosition: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Left Drawer</Button>
+        <Drawer open={open} onClose={() => setOpen(false)} position="left">
+          <DrawerHeader onClose={() => setOpen(false)}>
+            <DrawerTitle>Navigation</DrawerTitle>
+          </DrawerHeader>
+          <DrawerBody>
+            <nav className="space-y-2">
+              {['Dashboard', 'Products', 'Orders', 'Customers', 'Settings'].map((item) => (
+                <a
+                  key={item}
+                  href="#"
+                  className="block px-4 py-2 text-foreground hover:bg-secondary-hover rounded transition-colors"
+                >
+                  {item}
+                </a>
+              ))}
+            </nav>
+          </DrawerBody>
+        </Drawer>
+      </>
+    );
+  },
+};
+
+export const TopPosition: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Top Drawer</Button>
+        <Drawer open={open} onClose={() => setOpen(false)} position="top">
+          <DrawerHeader onClose={() => setOpen(false)}>
+            <DrawerTitle>Notifications</DrawerTitle>
+          </DrawerHeader>
+          <DrawerBody>
+            <p className="text-foreground-secondary">
+              Top drawer content appears from the top of the screen.
+            </p>
+          </DrawerBody>
+        </Drawer>
+      </>
+    );
+  },
+};
+
+export const BottomPosition: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Bottom Drawer</Button>
+        <Drawer open={open} onClose={() => setOpen(false)} position="bottom">
+          <DrawerHeader onClose={() => setOpen(false)}>
+            <DrawerTitle>Quick Actions</DrawerTitle>
+          </DrawerHeader>
+          <DrawerBody>
+            <div className="grid grid-cols-4 gap-4">
+              {['Share', 'Copy', 'Edit', 'Delete'].map((action) => (
+                <button
+                  key={action}
+                  className="flex flex-col items-center gap-2 p-4 hover:bg-secondary-hover rounded transition-colors"
+                >
+                  <div className="w-10 h-10 rounded-full bg-primary" />
+                  <span className="text-sm text-foreground">{action}</span>
+                </button>
+              ))}
+            </div>
+          </DrawerBody>
+        </Drawer>
+      </>
+    );
+  },
+};
+
+export const FormDrawer: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Edit Profile</Button>
+        <Drawer open={open} onClose={() => setOpen(false)}>
+          <DrawerHeader onClose={() => setOpen(false)}>
+            <DrawerTitle>Edit Profile</DrawerTitle>
+          </DrawerHeader>
+          <DrawerBody>
+            <form className="space-y-4">
+              <Input label="Full Name" placeholder="John Doe" />
+              <Input label="Email" type="email" placeholder="john@example.com" />
+              <Input label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
+            </form>
+          </DrawerBody>
+          <DrawerFooter>
+            <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
+            <Button onClick={() => setOpen(false)}>Save Changes</Button>
+          </DrawerFooter>
+        </Drawer>
+      </>
+    );
+  },
+};
+
+// Responsive Matrix - Mobile, Tablet, Desktop (static previews)
+export const ResponsiveMatrix: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Mobile */}
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <div className="w-[375px] h-[400px] border border-dashed border-border relative overflow-hidden">
+          <div className="absolute right-0 top-0 bottom-0 w-[280px] bg-background border-l border-border shadow-lg">
+            <div className="p-4 border-b border-border">
+              <h3 className="font-semibold">Drawer Title</h3>
+            </div>
+            <div className="p-4">
+              <p className="text-sm text-foreground-secondary">Full-height drawer on mobile.</p>
+              <div className="mt-4 space-y-4">
+                <Input label="Name" placeholder="Enter name" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Tablet */}
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <div className="w-[768px] h-[300px] border border-dashed border-border relative overflow-hidden">
+          <div className="absolute right-0 top-0 bottom-0 w-[400px] bg-background border-l border-border shadow-lg">
+            <div className="p-4 border-b border-border">
+              <h3 className="font-semibold">Edit Profile</h3>
+            </div>
+            <div className="p-4 space-y-4">
+              <Input label="Name" placeholder="John Doe" />
+              <Input label="Email" placeholder="john@example.com" />
+            </div>
+            <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-border flex justify-end gap-2">
+              <Button variant="secondary" size="sm">Cancel</Button>
+              <Button size="sm">Save</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Desktop */}
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <div className="w-[1280px] h-[300px] border border-dashed border-border relative overflow-hidden bg-black/20">
+          <div className="absolute right-0 top-0 bottom-0 w-[480px] bg-background border-l border-border shadow-lg">
+            <div className="p-6 border-b border-border">
+              <h3 className="text-lg font-semibold">Settings Panel</h3>
+            </div>
+            <div className="p-6 space-y-4">
+              <Input label="Display Name" placeholder="Enter display name" />
+              <Input label="Email" type="email" placeholder="email@example.com" />
+            </div>
+            <div className="absolute bottom-0 left-0 right-0 p-6 border-t border-border flex justify-end gap-2">
+              <Button variant="secondary">Cancel</Button>
+              <Button>Save Changes</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};