@tribepad/themis 1.0.0

package/src/elements/Tabs/Tabs.stories.tsx

@@ -0,0 +1,661 @@
+/**
+ * Tabs Component Storybook Stories
+ *
+ * @see tabs-prd.md FR-001 to FR-016 (Tabs Requirements)
+ * @see plan.md (Implementation Plan)
+ */
+
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { useState, type Key } from 'react';
+import { Tabs, TabList, Tab, TabPanel } from './Tabs';
+import { Settings, User, Bell, Mail, CreditCard, Lock } from 'lucide-react';
+
+const meta = {
+  title: 'Elements/Tabs',
+  component: Tabs,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible tabbed interface component with WCAG 2.2 AAA compliance, React Aria primitives, horizontal/vertical orientation, keyboard activation modes, React 19.2 Activity state preservation, and icon/badge support.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Tab layout orientation',
+    },
+    keyboardActivation: {
+      control: 'select',
+      options: ['automatic', 'manual'],
+      description: 'Keyboard activation mode',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Disable all tabs',
+    },
+  },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Default Stories
+// ============================================================================
+
+/**
+ * Default: Basic 3-tab layout with first tab selected
+ */
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultSelectedKey="account" className="w-[400px]">
+      <TabList aria-label="Account settings">
+        <Tab id="account">Account</Tab>
+        <Tab id="password">Password</Tab>
+        <Tab id="settings">Settings</Tab>
+      </TabList>
+      <TabPanel id="account">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Account Information</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Manage your account details and preferences.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="password">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Password Settings</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Update your password and security settings.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="settings">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">General Settings</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Configure application preferences.
+          </p>
+        </div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+// ============================================================================
+// Orientation Stories
+// ============================================================================
+
+/**
+ * Horizontal: Default horizontal layout
+ */
+export const Horizontal: Story = {
+  render: () => (
+    <Tabs orientation="horizontal" className="w-[400px]">
+      <TabList aria-label="Horizontal tabs">
+        <Tab id="tab1">Tab 1</Tab>
+        <Tab id="tab2">Tab 2</Tab>
+        <Tab id="tab3">Tab 3</Tab>
+      </TabList>
+      <TabPanel id="tab1">
+        <div className="p-4">Content for Tab 1</div>
+      </TabPanel>
+      <TabPanel id="tab2">
+        <div className="p-4">Content for Tab 2</div>
+      </TabPanel>
+      <TabPanel id="tab3">
+        <div className="p-4">Content for Tab 3</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * Vertical: Vertical orientation with tabs on the left
+ */
+export const Vertical: Story = {
+  render: () => (
+    <Tabs orientation="vertical" className="flex gap-4 w-[500px]">
+      <TabList aria-label="Vertical tabs" className="w-[150px]">
+        <Tab id="profile">Profile</Tab>
+        <Tab id="billing">Billing</Tab>
+        <Tab id="security">Security</Tab>
+        <Tab id="notifications">Notifications</Tab>
+      </TabList>
+      <div className="flex-1">
+        <TabPanel id="profile">
+          <div className="p-4 border border-[var(--border)] rounded-md">
+            <h3 className="font-semibold mb-2">Profile Settings</h3>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              Manage your profile information.
+            </p>
+          </div>
+        </TabPanel>
+        <TabPanel id="billing">
+          <div className="p-4 border border-[var(--border)] rounded-md">
+            <h3 className="font-semibold mb-2">Billing Information</h3>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              Manage payment methods and billing history.
+            </p>
+          </div>
+        </TabPanel>
+        <TabPanel id="security">
+          <div className="p-4 border border-[var(--border)] rounded-md">
+            <h3 className="font-semibold mb-2">Security Settings</h3>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              Two-factor authentication and security preferences.
+            </p>
+          </div>
+        </TabPanel>
+        <TabPanel id="notifications">
+          <div className="p-4 border border-[var(--border)] rounded-md">
+            <h3 className="font-semibold mb-2">Notification Preferences</h3>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              Choose what notifications you want to receive.
+            </p>
+          </div>
+        </TabPanel>
+      </div>
+    </Tabs>
+  ),
+};
+
+// ============================================================================
+// State Stories
+// ============================================================================
+
+/**
+ * Disabled: All tabs disabled
+ */
+export const Disabled: Story = {
+  render: () => (
+    <Tabs isDisabled className="w-[400px]">
+      <TabList aria-label="Disabled tabs">
+        <Tab id="tab1">Tab 1</Tab>
+        <Tab id="tab2">Tab 2</Tab>
+        <Tab id="tab3">Tab 3</Tab>
+      </TabList>
+      <TabPanel id="tab1">
+        <div className="p-4">Content 1</div>
+      </TabPanel>
+      <TabPanel id="tab2">
+        <div className="p-4">Content 2</div>
+      </TabPanel>
+      <TabPanel id="tab3">
+        <div className="p-4">Content 3</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * DisabledIndividual: Individual tabs disabled using disabledKeys
+ */
+export const DisabledIndividual: Story = {
+  render: () => (
+    <Tabs disabledKeys={['tab2']} className="w-[400px]">
+      <TabList aria-label="Tabs with disabled option">
+        <Tab id="tab1">Available</Tab>
+        <Tab id="tab2">Disabled</Tab>
+        <Tab id="tab3">Available</Tab>
+      </TabList>
+      <TabPanel id="tab1">
+        <div className="p-4">This tab is available.</div>
+      </TabPanel>
+      <TabPanel id="tab2">
+        <div className="p-4">This tab is disabled.</div>
+      </TabPanel>
+      <TabPanel id="tab3">
+        <div className="p-4">This tab is also available.</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+// ============================================================================
+// Icon and Badge Stories
+// ============================================================================
+
+/**
+ * WithIcons: Tabs with lucide icons
+ */
+export const WithIcons: Story = {
+  render: () => (
+    <Tabs className="w-[500px]">
+      <TabList aria-label="Settings with icons">
+        <Tab id="account">
+          <User className="h-4 w-4" aria-hidden="true" />
+          Account
+        </Tab>
+        <Tab id="security">
+          <Lock className="h-4 w-4" aria-hidden="true" />
+          Security
+        </Tab>
+        <Tab id="notifications">
+          <Bell className="h-4 w-4" aria-hidden="true" />
+          Notifications
+        </Tab>
+      </TabList>
+      <TabPanel id="account">
+        <div className="p-4">Account settings content</div>
+      </TabPanel>
+      <TabPanel id="security">
+        <div className="p-4">Security settings content</div>
+      </TabPanel>
+      <TabPanel id="notifications">
+        <div className="p-4">Notification settings content</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * WithBadges: Tabs with notification badges
+ */
+export const WithBadges: Story = {
+  render: () => (
+    <Tabs className="w-[500px]">
+      <TabList aria-label="Navigation with badges">
+        <Tab id="inbox">
+          Inbox
+          <span
+            className="ml-2 inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded-full bg-[var(--primary)] text-[var(--primary-foreground)]"
+            aria-label="12 unread messages"
+          >
+            12
+          </span>
+        </Tab>
+        <Tab id="drafts">
+          Drafts
+          <span
+            className="ml-2 inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded-full bg-[var(--secondary)] text-[var(--secondary-foreground)]"
+            aria-label="3 drafts"
+          >
+            3
+          </span>
+        </Tab>
+        <Tab id="sent">Sent</Tab>
+      </TabList>
+      <TabPanel id="inbox">
+        <div className="p-4">Your inbox messages</div>
+      </TabPanel>
+      <TabPanel id="drafts">
+        <div className="p-4">Your draft messages</div>
+      </TabPanel>
+      <TabPanel id="sent">
+        <div className="p-4">Your sent messages</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * IconsAndBadges: Combined icons and badges
+ */
+export const IconsAndBadges: Story = {
+  render: () => (
+    <Tabs className="w-[600px]">
+      <TabList aria-label="Full navigation">
+        <Tab id="messages">
+          <Mail className="h-4 w-4" aria-hidden="true" />
+          Messages
+          <span
+            className="inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded-full bg-[var(--destructive)] text-[var(--destructive-foreground)]"
+            aria-label="5 unread"
+          >
+            5
+          </span>
+        </Tab>
+        <Tab id="billing">
+          <CreditCard className="h-4 w-4" aria-hidden="true" />
+          Billing
+        </Tab>
+        <Tab id="settings">
+          <Settings className="h-4 w-4" aria-hidden="true" />
+          Settings
+        </Tab>
+      </TabList>
+      <TabPanel id="messages">
+        <div className="p-4">Messages content</div>
+      </TabPanel>
+      <TabPanel id="billing">
+        <div className="p-4">Billing content</div>
+      </TabPanel>
+      <TabPanel id="settings">
+        <div className="p-4">Settings content</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+// ============================================================================
+// Overflow Story
+// ============================================================================
+
+/**
+ * Overflow: Many tabs that require scrolling
+ */
+export const Overflow: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <Tabs>
+        <TabList aria-label="Many tabs">
+          <Tab id="tab1">Dashboard</Tab>
+          <Tab id="tab2">Analytics</Tab>
+          <Tab id="tab3">Reports</Tab>
+          <Tab id="tab4">Users</Tab>
+          <Tab id="tab5">Settings</Tab>
+          <Tab id="tab6">Billing</Tab>
+          <Tab id="tab7">Support</Tab>
+          <Tab id="tab8">Documentation</Tab>
+        </TabList>
+        <TabPanel id="tab1">
+          <div className="p-4">Dashboard content</div>
+        </TabPanel>
+        <TabPanel id="tab2">
+          <div className="p-4">Analytics content</div>
+        </TabPanel>
+        <TabPanel id="tab3">
+          <div className="p-4">Reports content</div>
+        </TabPanel>
+        <TabPanel id="tab4">
+          <div className="p-4">Users content</div>
+        </TabPanel>
+        <TabPanel id="tab5">
+          <div className="p-4">Settings content</div>
+        </TabPanel>
+        <TabPanel id="tab6">
+          <div className="p-4">Billing content</div>
+        </TabPanel>
+        <TabPanel id="tab7">
+          <div className="p-4">Support content</div>
+        </TabPanel>
+        <TabPanel id="tab8">
+          <div className="p-4">Documentation content</div>
+        </TabPanel>
+      </Tabs>
+    </div>
+  ),
+};
+
+/**
+ * ManyTabs: 8+ tabs demonstrating overflow
+ */
+export const ManyTabs: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <Tabs>
+        <TabList aria-label="Extended navigation">
+          {Array.from({ length: 10 }, (_, i) => (
+            <Tab key={`tab${i + 1}`} id={`tab${i + 1}`}>
+              Tab {i + 1}
+            </Tab>
+          ))}
+        </TabList>
+        {Array.from({ length: 10 }, (_, i) => (
+          <TabPanel key={`tab${i + 1}`} id={`tab${i + 1}`}>
+            <div className="p-4">Content for Tab {i + 1}</div>
+          </TabPanel>
+        ))}
+      </Tabs>
+    </div>
+  ),
+};
+
+/**
+ * LongLabels: Tabs with very long text labels
+ */
+export const LongLabels: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <Tabs>
+        <TabList aria-label="Long label tabs">
+          <Tab id="tab1">Account Settings and Preferences</Tab>
+          <Tab id="tab2">Security and Privacy Options</Tab>
+          <Tab id="tab3">Notification Configuration</Tab>
+        </TabList>
+        <TabPanel id="tab1">
+          <div className="p-4">Account settings content</div>
+        </TabPanel>
+        <TabPanel id="tab2">
+          <div className="p-4">Security settings content</div>
+        </TabPanel>
+        <TabPanel id="tab3">
+          <div className="p-4">Notification settings content</div>
+        </TabPanel>
+      </Tabs>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Keyboard Activation Story
+// ============================================================================
+
+/**
+ * ManualActivation: Arrow keys focus tabs, Enter/Space selects
+ */
+export const ManualActivation: Story = {
+  render: () => (
+    <Tabs keyboardActivation="manual" className="w-[400px]">
+      <TabList aria-label="Manual activation tabs">
+        <Tab id="tab1">Tab 1</Tab>
+        <Tab id="tab2">Tab 2</Tab>
+        <Tab id="tab3">Tab 3</Tab>
+      </TabList>
+      <TabPanel id="tab1">
+        <div className="p-4">
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Use arrow keys to focus tabs, then press Enter or Space to select.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="tab2">
+        <div className="p-4">Content for Tab 2</div>
+      </TabPanel>
+      <TabPanel id="tab3">
+        <div className="p-4">Content for Tab 3</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+// ============================================================================
+// Link Tabs Story
+// ============================================================================
+
+/**
+ * LinkTabs: Tabs with href for navigation
+ */
+export const LinkTabs: Story = {
+  render: () => (
+    <Tabs className="w-[400px]">
+      <TabList aria-label="Navigation links">
+        <Tab id="home" href="#home">
+          Home
+        </Tab>
+        <Tab id="about" href="#about">
+          About
+        </Tab>
+        <Tab id="contact" href="#contact">
+          Contact
+        </Tab>
+      </TabList>
+      <TabPanel id="home">
+        <div className="p-4">Home page content</div>
+      </TabPanel>
+      <TabPanel id="about">
+        <div className="p-4">About page content</div>
+      </TabPanel>
+      <TabPanel id="contact">
+        <div className="p-4">Contact page content</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+// ============================================================================
+// RTL Story
+// ============================================================================
+
+/**
+ * RTL: Right-to-left layout
+ */
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl" className="w-[400px]">
+      <Tabs>
+        <TabList aria-label="RTL tabs">
+          <Tab id="tab1">علامة التبويب 1</Tab>
+          <Tab id="tab2">علامة التبويب 2</Tab>
+          <Tab id="tab3">علامة التبويب 3</Tab>
+        </TabList>
+        <TabPanel id="tab1">
+          <div className="p-4">محتوى علامة التبويب 1</div>
+        </TabPanel>
+        <TabPanel id="tab2">
+          <div className="p-4">محتوى علامة التبويب 2</div>
+        </TabPanel>
+        <TabPanel id="tab3">
+          <div className="p-4">محتوى علامة التبويب 3</div>
+        </TabPanel>
+      </Tabs>
+    </div>
+  ),
+};
+
+// ============================================================================
+// State Preservation Story (FR-016)
+// ============================================================================
+
+/**
+ * PreserveState: Form with React Activity state preservation
+ */
+export const PreserveState: Story = {
+  render: function PreserveStateDemo() {
+    const [selected, setSelected] = useState<Key>('form');
+
+    return (
+      <div className="w-[500px]">
+        <p className="text-sm text-[var(--muted-foreground)] mb-4">
+          Type in the form, switch tabs, then switch back - your input is preserved!
+        </p>
+        <Tabs selectedKey={selected} onSelectionChange={setSelected}>
+          <TabList aria-label="State preservation demo">
+            <Tab id="form">Form with State</Tab>
+            <Tab id="other">Other Content</Tab>
+          </TabList>
+          <TabPanel id="form" preserveState>
+            <div className="p-4 space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">Name</label>
+                <input
+                  type="text"
+                  className="w-full px-3 py-2 border border-[var(--border)] rounded-md"
+                  placeholder="Enter your name"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Email</label>
+                <input
+                  type="email"
+                  className="w-full px-3 py-2 border border-[var(--border)] rounded-md"
+                  placeholder="Enter your email"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Message</label>
+                <textarea
+                  className="w-full px-3 py-2 border border-[var(--border)] rounded-md"
+                  rows={3}
+                  placeholder="Enter your message"
+                />
+              </div>
+            </div>
+          </TabPanel>
+          <TabPanel id="other">
+            <div className="p-4">
+              <p className="text-sm text-[var(--muted-foreground)]">
+                This is other content. Switch back to the form tab to see your
+                inputs preserved.
+              </p>
+            </div>
+          </TabPanel>
+        </Tabs>
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Controlled Story
+// ============================================================================
+
+/**
+ * Controlled: Externally controlled selection
+ */
+export const Controlled: Story = {
+  render: function ControlledTabs() {
+    const [selected, setSelected] = useState<Key>('tab1');
+
+    return (
+      <div className="w-[400px]">
+        <div className="flex gap-2 mb-4">
+          <button
+            onClick={() => setSelected('tab1')}
+            className={`px-3 py-1 text-sm rounded-md ${
+              selected === 'tab1'
+                ? 'bg-[var(--primary)] text-[var(--primary-foreground)]'
+                : 'bg-[var(--secondary)] text-[var(--secondary-foreground)]'
+            }`}
+          >
+            Select Tab 1
+          </button>
+          <button
+            onClick={() => setSelected('tab2')}
+            className={`px-3 py-1 text-sm rounded-md ${
+              selected === 'tab2'
+                ? 'bg-[var(--primary)] text-[var(--primary-foreground)]'
+                : 'bg-[var(--secondary)] text-[var(--secondary-foreground)]'
+            }`}
+          >
+            Select Tab 2
+          </button>
+          <button
+            onClick={() => setSelected('tab3')}
+            className={`px-3 py-1 text-sm rounded-md ${
+              selected === 'tab3'
+                ? 'bg-[var(--primary)] text-[var(--primary-foreground)]'
+                : 'bg-[var(--secondary)] text-[var(--secondary-foreground)]'
+            }`}
+          >
+            Select Tab 3
+          </button>
+        </div>
+        <Tabs selectedKey={selected} onSelectionChange={setSelected}>
+          <TabList aria-label="Controlled tabs">
+            <Tab id="tab1">Tab 1</Tab>
+            <Tab id="tab2">Tab 2</Tab>
+            <Tab id="tab3">Tab 3</Tab>
+          </TabList>
+          <TabPanel id="tab1">
+            <div className="p-4">
+              <p>Selected via external button or tab click.</p>
+            </div>
+          </TabPanel>
+          <TabPanel id="tab2">
+            <div className="p-4">Content for Tab 2</div>
+          </TabPanel>
+          <TabPanel id="tab3">
+            <div className="p-4">Content for Tab 3</div>
+          </TabPanel>
+        </Tabs>
+      </div>
+    );
+  },
+};