@tribepad/themis 1.0.0

package/src/elements/Badge/Badge.stories.tsx

@@ -0,0 +1,509 @@
+/**
+ * Badge Component Stories
+ * Storybook stories for Badge component demonstrating all variants, sizes, and states
+ *
+ * @see badge-prd.md for requirements
+ * @see plan.md for architecture details
+ */
+
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { Badge } from './Badge';
+import { CheckCircle, X, AlertCircle, Star, Bell, Tag, User } from 'lucide-react';
+
+const meta = {
+  title: 'Elements/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible badge component for labels, tags, and status indicators with React Aria primitives, CVA variant styling, and WCAG 2.2 AAA compliance (7:1 contrast ratio, 44x44px touch targets for actionable badges).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'accent', 'destructive', 'content'],
+      description: 'Badge color variant',
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Badge size',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    iconPosition: {
+      control: 'select',
+      options: ['start', 'end'],
+      description: 'Position of the icon relative to content',
+      table: {
+        defaultValue: { summary: 'start' },
+      },
+    },
+    count: {
+      control: 'text',
+      description: 'Count or number to display (can be number or string)',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Disable actionable badge interaction',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story
+export const Default: Story = {
+  args: {
+    children: 'Badge',
+    variant: 'primary',
+    size: 'default',
+  },
+};
+
+// Variant stories
+export const Primary: Story = {
+  args: {
+    children: 'Active',
+    variant: 'primary',
+  },
+};
+
+export const Accent: Story = {
+  args: {
+    children: 'Featured',
+    variant: 'accent',
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    children: 'Error',
+    variant: 'destructive',
+  },
+};
+
+export const Content: Story = {
+  args: {
+    children: 'Draft',
+    variant: 'content',
+  },
+};
+
+// Size stories
+export const Small: Story = {
+  args: {
+    children: 'Small',
+    size: 'sm',
+  },
+};
+
+export const DefaultSize: Story = {
+  args: {
+    children: 'Default',
+    size: 'default',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: 'Large',
+    size: 'lg',
+  },
+};
+
+// Icon stories
+export const WithIconStart: Story = {
+  args: {
+    children: 'Verified',
+    icon: <CheckCircle />,
+    iconPosition: 'start',
+  },
+};
+
+export const WithIconEnd: Story = {
+  args: {
+    children: 'Remove',
+    icon: <X />,
+    iconPosition: 'end',
+    variant: 'content',
+  },
+};
+
+export const IconOnly: Story = {
+  args: {
+    icon: <Star />,
+    variant: 'accent',
+    'aria-label': 'Starred',
+  },
+};
+
+// Count stories
+export const WithCount: Story = {
+  args: {
+    count: 5,
+    variant: 'destructive',
+  },
+};
+
+export const WithCountString: Story = {
+  args: {
+    count: '99+',
+    variant: 'destructive',
+  },
+};
+
+export const WithCountAndLabel: Story = {
+  args: {
+    children: 'Notifications',
+    count: 12,
+    variant: 'primary',
+  },
+};
+
+export const WithIconAndCount: Story = {
+  args: {
+    icon: <Bell />,
+    count: 3,
+    variant: 'destructive',
+  },
+};
+
+export const WithIconLabelAndCount: Story = {
+  args: {
+    icon: <Bell />,
+    children: 'Messages',
+    count: '99+',
+    variant: 'primary',
+  },
+};
+
+// Actionable badge stories
+export const Actionable: Story = {
+  args: {
+    children: 'Click me',
+    onPress: () => alert('Badge pressed!'),
+  },
+};
+
+export const ActionableWithIcon: Story = {
+  args: {
+    children: 'Filter',
+    icon: <X />,
+    iconPosition: 'end',
+    variant: 'content',
+    onPress: () => alert('Filter removed!'),
+  },
+};
+
+export const ActionableDisabled: Story = {
+  args: {
+    children: 'Disabled',
+    onPress: () => alert('This should not fire'),
+    isDisabled: true,
+  },
+};
+
+// Grid of all variants
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Badge variant="primary">Primary</Badge>
+      <Badge variant="accent">Accent</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="content">Content</Badge>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All 4 badge variants in one view.',
+      },
+    },
+  },
+};
+
+// Grid of all sizes
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Badge size="sm">Small</Badge>
+      <Badge size="default">Default</Badge>
+      <Badge size="lg">Large</Badge>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All 3 badge sizes in one view.',
+      },
+    },
+  },
+};
+
+// Theme integration stories
+export const LightTheme: Story = {
+  args: {
+    children: 'Light Theme Badge',
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+};
+
+export const DarkTheme: Story = {
+  args: {
+    children: 'Dark Theme Badge',
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+    docs: {
+      description: {
+        story: 'Badge adapts to dark theme via semantic tokens.',
+      },
+    },
+  },
+};
+
+// Real-world examples
+export const StatusBadges: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap gap-2">
+        <Badge variant="primary" icon={<CheckCircle />}>
+          Active
+        </Badge>
+        <Badge variant="accent" icon={<Star />}>
+          Featured
+        </Badge>
+        <Badge variant="destructive" icon={<AlertCircle />}>
+          Error
+        </Badge>
+        <Badge variant="content">Draft</Badge>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Status badges with icons for clear visual communication.',
+      },
+    },
+  },
+};
+
+export const NotificationBadges: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-8 p-4">
+      <div className="relative inline-block">
+        <Bell className="h-6 w-6" />
+        <Badge
+          count={3}
+          variant="destructive"
+          size="sm"
+          className="absolute -right-1.5 -top-1.5"
+        />
+      </div>
+      <div className="relative inline-block">
+        <User className="h-6 w-6" />
+        <Badge
+          count="99+"
+          variant="primary"
+          size="sm"
+          className="absolute -right-2.5 -top-1.5"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Notification badges positioned on icons.',
+      },
+    },
+  },
+};
+
+export const FilterTags: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge
+        variant="content"
+        icon={<X />}
+        iconPosition="end"
+        onPress={() => alert('Removed: JavaScript')}
+      >
+        JavaScript
+      </Badge>
+      <Badge
+        variant="content"
+        icon={<X />}
+        iconPosition="end"
+        onPress={() => alert('Removed: React')}
+      >
+        React
+      </Badge>
+      <Badge
+        variant="content"
+        icon={<X />}
+        iconPosition="end"
+        onPress={() => alert('Removed: TypeScript')}
+      >
+        TypeScript
+      </Badge>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Removable filter tags using actionable badges. Click to remove.',
+      },
+    },
+  },
+};
+
+export const CategoryTags: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="primary" icon={<Tag />}>
+        Technology
+      </Badge>
+      <Badge variant="accent" icon={<Tag />}>
+        Design
+      </Badge>
+      <Badge variant="content" icon={<Tag />}>
+        Marketing
+      </Badge>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Category tags with consistent icon usage.',
+      },
+    },
+  },
+};
+
+// Accessibility stories
+export const FocusVisible: Story = {
+  args: {
+    children: 'Focus Me',
+    onPress: () => {},
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Press Tab to see the focus ring. Actionable badges have 44x44px touch targets for WCAG 2.2 AAA compliance.',
+      },
+    },
+  },
+};
+
+export const TouchTarget: Story = {
+  args: {
+    children: 'Touch',
+    size: 'sm',
+    onPress: () => alert('Pressed!'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Even small actionable badges have 44x44px minimum touch targets (exceeds WCAG 2.2 requirement).',
+      },
+    },
+  },
+};
+
+// 2-Layer Architecture
+export const TwoLayerArchitecture: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div className="rounded-lg border border-[var(--border)] p-4">
+        <h4 className="mb-2 font-medium">2-Layer Architecture (Actionable Badges)</h4>
+        <ul className="mb-4 list-disc space-y-1 pl-4 text-sm text-[var(--muted-foreground)]">
+          <li>
+            <strong>Layer 1:</strong> Touch Target (44x44px, transparent) - handles accessibility
+          </li>
+          <li>
+            <strong>Layer 2:</strong> Visual Badge - colors, size, content
+          </li>
+        </ul>
+        <div className="flex gap-4">
+          <Badge onPress={() => {}}>Default</Badge>
+          <Badge size="sm" onPress={() => {}}>
+            Small
+          </Badge>
+          <Badge size="lg" onPress={() => {}}>
+            Large
+          </Badge>
+        </div>
+      </div>
+      <p className="text-xs text-[var(--muted-foreground)]">
+        All actionable badges above have the same 44x44px touch target. Open DevTools to inspect the layer structure.
+      </p>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Explains the 2-layer architecture for actionable badges. The touch target (Layer 1) is always 44x44px for accessibility. The visual badge (Layer 2) is the compact visible element.',
+      },
+    },
+  },
+};
+
+export const StaticVsActionable: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h4 className="mb-2 font-medium">Static Badges (no onPress)</h4>
+        <div className="flex gap-2">
+          <Badge>Static</Badge>
+          <Badge variant="accent">Label</Badge>
+          <Badge variant="destructive" count={5} />
+        </div>
+        <p className="mt-2 text-xs text-[var(--muted-foreground)]">
+          Renders as &lt;span&gt;, not focusable, no touch target
+        </p>
+      </div>
+      <div>
+        <h4 className="mb-2 font-medium">Actionable Badges (with onPress)</h4>
+        <div className="flex gap-2">
+          <Badge onPress={() => {}}>Clickable</Badge>
+          <Badge variant="content" icon={<X />} iconPosition="end" onPress={() => {}}>
+            Remove
+          </Badge>
+        </div>
+        <p className="mt-2 text-xs text-[var(--muted-foreground)]">
+          Renders as &lt;button&gt;, keyboard focusable, 44x44px touch target
+        </p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Static badges are simple spans. Actionable badges (with onPress) become keyboard accessible buttons with 44x44px touch targets.',
+      },
+    },
+  },
+};