sonance-brand-mcp 1.1.4 → 1.1.7

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

@@ -0,0 +1,258 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Badge, Chip } from './badge';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Feedback/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A small status indicator component. Use for labels, counts, or status indicators.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'primary', 'secondary', 'success', 'error', 'warning', 'info', 'outline'],
+      description: 'Visual style variant',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Badge size',
+      table: {
+        defaultValue: { summary: 'md' },
+      },
+    },
+    children: {
+      control: 'text',
+      description: 'Badge content',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story
+export const Default: Story = {
+  args: {
+    children: 'Badge',
+  },
+};
+
+// Variants
+export const Primary: Story = {
+  args: {
+    children: 'Primary',
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary',
+    variant: 'secondary',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    children: 'Success',
+    variant: 'success',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    children: 'Error',
+    variant: 'error',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    children: 'Warning',
+    variant: 'warning',
+  },
+};
+
+export const Info: Story = {
+  args: {
+    children: 'Info',
+    variant: 'info',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: 'Outline',
+    variant: 'outline',
+  },
+};
+
+// All Variants
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="primary">Primary</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="error">Error</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="info">Info</Badge>
+      <Badge variant="outline">Outline</Badge>
+    </div>
+  ),
+};
+
+// All Sizes
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Badge size="sm">Small</Badge>
+      <Badge size="md">Medium</Badge>
+      <Badge size="lg">Large</Badge>
+    </div>
+  ),
+};
+
+// Status Examples
+export const StatusExamples: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <Badge variant="success">Active</Badge>
+        <span className="text-foreground-secondary">User account is active</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <Badge variant="warning">Pending</Badge>
+        <span className="text-foreground-secondary">Awaiting approval</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <Badge variant="error">Suspended</Badge>
+        <span className="text-foreground-secondary">Account suspended</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <Badge variant="info">New</Badge>
+        <span className="text-foreground-secondary">Recently added</span>
+      </div>
+    </div>
+  ),
+};
+
+// Chip Component
+export const ChipDefault: StoryObj<typeof Chip> = {
+  render: () => (
+    <Chip>Removable Chip</Chip>
+  ),
+};
+
+export const ChipWithClose: StoryObj<typeof Chip> = {
+  render: () => (
+    <Chip onClose={() => console.log('Closed!')}>
+      Click X to Remove
+    </Chip>
+  ),
+};
+
+// Chips Example
+export const ChipsExample: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Chip variant="primary" onClose={() => {}}>React</Chip>
+      <Chip variant="primary" onClose={() => {}}>TypeScript</Chip>
+      <Chip variant="primary" onClose={() => {}}>Tailwind</Chip>
+      <Chip variant="secondary" onClose={() => {}}>Next.js</Chip>
+      <Chip variant="secondary" onClose={() => {}}>Storybook</Chip>
+    </div>
+  ),
+};
+
+// Count Badges
+export const CountBadges: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <div className="relative">
+        <span className="text-foreground">Notifications</span>
+        <Badge variant="error" size="sm" className="absolute -top-2 -right-6">3</Badge>
+      </div>
+      <div className="relative">
+        <span className="text-foreground">Messages</span>
+        <Badge variant="primary" size="sm" className="absolute -top-2 -right-6">12</Badge>
+      </div>
+      <div className="relative">
+        <span className="text-foreground">Cart</span>
+        <Badge variant="info" size="sm" className="absolute -top-2 -right-4">5</Badge>
+      </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">
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="primary">Primary</Badge>
+            <Badge variant="success">Success</Badge>
+            <Badge variant="error">Error</Badge>
+            <Badge variant="warning">Warning</Badge>
+            <Badge variant="info">Info</Badge>
+          </div>
+        </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">
+          <div className="flex items-center gap-4">
+            <div className="flex gap-2">
+              <Badge variant="primary" size="sm">Small</Badge>
+              <Badge variant="primary" size="md">Medium</Badge>
+              <Badge variant="primary" size="lg">Large</Badge>
+            </div>
+            <div className="flex gap-2">
+              <Badge variant="success">Active</Badge>
+              <Badge variant="warning">Pending</Badge>
+              <Badge variant="error">Inactive</Badge>
+            </div>
+          </div>
+        </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 justify-between">
+            <div className="flex gap-2">
+              <Badge variant="default">Default</Badge>
+              <Badge variant="primary">Primary</Badge>
+              <Badge variant="secondary">Secondary</Badge>
+              <Badge variant="success">Success</Badge>
+              <Badge variant="error">Error</Badge>
+              <Badge variant="warning">Warning</Badge>
+              <Badge variant="info">Info</Badge>
+              <Badge variant="outline">Outline</Badge>
+            </div>
+            <div className="flex gap-2">
+              <Chip variant="primary" onClose={() => {}}>React</Chip>
+              <Chip variant="primary" onClose={() => {}}>TypeScript</Chip>
+              <Chip variant="secondary" onClose={() => {}}>Tailwind</Chip>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,175 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Breadcrumbs } from './breadcrumbs';
+import { Folder } from 'lucide-react';
+
+const meta: Meta<typeof Breadcrumbs> = {
+  title: 'Components/Navigation/Breadcrumbs',
+  component: Breadcrumbs,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A breadcrumb navigation component for showing the current page location.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      { label: 'Products', href: '#' },
+      { label: 'Speakers', href: '#' },
+      { label: 'In-Wall', href: '#' },
+      { label: 'VP66 TL' },
+    ],
+  },
+};
+
+export const WithHome: Story = {
+  args: {
+    showHome: true,
+    items: [
+      { label: 'Products', href: '#' },
+      { label: 'Speakers', href: '#' },
+      { label: 'VP66 TL' },
+    ],
+  },
+};
+
+export const TwoLevels: Story = {
+  args: {
+    items: [
+      { label: 'Dashboard', href: '#' },
+      { label: 'Settings' },
+    ],
+  },
+};
+
+export const WithIcons: Story = {
+  args: {
+    items: [
+      { label: 'Documents', href: '#', icon: <Folder className="h-4 w-4" /> },
+      { label: 'Projects', href: '#', icon: <Folder className="h-4 w-4" /> },
+      { label: 'Report.pdf' },
+    ],
+  },
+};
+
+export const CustomSeparator: Story = {
+  args: {
+    separator: <span className="text-foreground-muted">/</span>,
+    items: [
+      { label: 'Home', href: '#' },
+      { label: 'Category', href: '#' },
+      { label: 'Subcategory', href: '#' },
+      { label: 'Current Page' },
+    ],
+  },
+};
+
+export const LongPath: Story = {
+  args: {
+    showHome: true,
+    items: [
+      { label: 'Electronics', href: '#' },
+      { label: 'Audio', href: '#' },
+      { label: 'Speakers', href: '#' },
+      { label: 'In-Wall Speakers', href: '#' },
+      { label: 'Premium Series', href: '#' },
+      { label: 'VP66 TL' },
+    ],
+  },
+};
+
+export const AllExamples: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Simple</p>
+        <Breadcrumbs
+          items={[
+            { label: 'Home', href: '#' },
+            { label: 'Current Page' },
+          ]}
+        />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">With Home Icon</p>
+        <Breadcrumbs
+          showHome
+          items={[
+            { label: 'Products', href: '#' },
+            { label: 'Details' },
+          ]}
+        />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Deep Navigation</p>
+        <Breadcrumbs
+          items={[
+            { label: 'Level 1', href: '#' },
+            { label: 'Level 2', href: '#' },
+            { label: 'Level 3', href: '#' },
+            { label: 'Level 4' },
+          ]}
+        />
+      </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">
+          <Breadcrumbs
+            items={[
+              { label: 'Products', href: '#' },
+              { label: 'VP66 TL' },
+            ]}
+          />
+        </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">
+          <Breadcrumbs
+            showHome
+            items={[
+              { label: 'Products', href: '#' },
+              { label: 'Speakers', href: '#' },
+              { label: 'In-Wall', href: '#' },
+              { label: 'VP66 TL' },
+            ]}
+          />
+        </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">
+          <Breadcrumbs
+            showHome
+            items={[
+              { label: 'Electronics', href: '#' },
+              { label: 'Audio', href: '#' },
+              { label: 'Speakers', href: '#' },
+              { label: 'In-Wall Speakers', href: '#' },
+              { label: 'Premium Series', href: '#' },
+              { label: 'VP66 TL' },
+            ]}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};