@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/headtab/Headtab.stories.tsx

@@ -0,0 +1,369 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Headtab, Breadcrumb } from './index'
+import type { HeadtabItem, BreadcrumbItem } from './index'
+import * as React from 'react'
+
+const defaultItems: HeadtabItem[] = [
+  {
+    id: 'overview',
+    label: 'Overview',
+    content: (
+      <div className="p-4 border rounded-lg bg-card">
+        <h3 className="text-lg font-semibold mb-2">Overview</h3>
+        <p className="text-muted-foreground">
+          This is the overview tab content. It provides a general summary of the information.
+        </p>
+      </div>
+    ),
+  },
+  {
+    id: 'details',
+    label: 'Details',
+    content: (
+      <div className="p-4 border rounded-lg bg-card">
+        <h3 className="text-lg font-semibold mb-2">Details</h3>
+        <p className="text-muted-foreground">
+          Detailed information about the selected item goes here.
+        </p>
+        <ul className="mt-4 space-y-2 text-sm">
+          <li>• Detail item 1</li>
+          <li>• Detail item 2</li>
+          <li>• Detail item 3</li>
+        </ul>
+      </div>
+    ),
+  },
+  {
+    id: 'settings',
+    label: 'Settings',
+    content: (
+      <div className="p-4 border rounded-lg bg-card">
+        <h3 className="text-lg font-semibold mb-2">Settings</h3>
+        <p className="text-muted-foreground">
+          Configure your preferences and settings here.
+        </p>
+        <div className="mt-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm">Enable notifications</span>
+            <div className="h-5 w-10 bg-muted rounded-full" />
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm">Dark mode</span>
+            <div className="h-5 w-10 bg-primary rounded-full" />
+          </div>
+        </div>
+      </div>
+    ),
+  },
+]
+
+const manyItems: HeadtabItem[] = [
+  { id: 'tab1', label: 'General', content: <div className="p-4">General content</div> },
+  { id: 'tab2', label: 'Profile', content: <div className="p-4">Profile content</div> },
+  { id: 'tab3', label: 'Security', content: <div className="p-4">Security content</div> },
+  { id: 'tab4', label: 'Notifications', content: <div className="p-4">Notifications content</div> },
+  { id: 'tab5', label: 'Integrations', content: <div className="p-4">Integrations content</div> },
+]
+
+const defaultBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products' },
+  { label: 'Electronics', href: '/products/electronics' },
+  { label: 'Laptops' },
+]
+
+const meta: Meta<typeof Headtab> = {
+  title: 'Blocks/Headtab',
+  component: Headtab,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A header tab navigation component with multiple variants (default, pills, underline) and sizes.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'pills', 'underline'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Headtab>
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <Headtab
+        items={defaultItems}
+        onTabChange={(id) => console.log('Tab changed:', id)}
+      />
+    </div>
+  ),
+}
+
+export const PillsVariant: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <Headtab
+        items={defaultItems}
+        variant="pills"
+        onTabChange={(id) => console.log('Tab changed:', id)}
+      />
+    </div>
+  ),
+}
+
+export const UnderlineVariant: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <Headtab
+        items={defaultItems}
+        variant="underline"
+        onTabChange={(id) => console.log('Tab changed:', id)}
+      />
+    </div>
+  ),
+}
+
+export const SmallSize: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <Headtab
+        items={defaultItems}
+        size="sm"
+        onTabChange={(id) => console.log('Tab changed:', id)}
+      />
+    </div>
+  ),
+}
+
+export const LargeSize: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <Headtab
+        items={defaultItems}
+        size="lg"
+        onTabChange={(id) => console.log('Tab changed:', id)}
+      />
+    </div>
+  ),
+}
+
+export const ManyTabs: Story = {
+  render: () => (
+    <div className="w-[700px]">
+      <Headtab
+        items={manyItems}
+        onTabChange={(id) => console.log('Tab changed:', id)}
+      />
+    </div>
+  ),
+}
+
+export const WithDisabled: Story = {
+  render: () => {
+    const itemsWithDisabled: HeadtabItem[] = [
+      ...defaultItems,
+      {
+        id: 'premium',
+        label: 'Premium',
+        disabled: true,
+        content: <div>Premium content</div>,
+      },
+    ]
+
+    return (
+      <div className="w-[600px]">
+        <Headtab
+          items={itemsWithDisabled}
+          onTabChange={(id) => console.log('Tab changed:', id)}
+        />
+      </div>
+    )
+  },
+}
+
+export const ControlledActive: Story = {
+  render: () => {
+    const [activeTab, setActiveTab] = React.useState('details')
+
+    return (
+      <div className="w-[600px]">
+        <div className="mb-4 flex gap-2">
+          {defaultItems.map((item) => (
+            <button
+              key={item.id}
+              onClick={() => setActiveTab(item.id)}
+              className={`px-3 py-1 text-sm rounded ${
+                activeTab === item.id ? 'bg-primary text-primary-foreground' : 'bg-muted'
+              }`}
+            >
+              Go to {item.label}
+            </button>
+          ))}
+        </div>
+        <Headtab
+          items={defaultItems}
+          defaultActiveId={activeTab}
+          onTabChange={setActiveTab}
+        />
+      </div>
+    )
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8 w-[600px]">
+      <div>
+        <h3 className="text-sm font-medium mb-2 text-muted-foreground">Default</h3>
+        <Headtab items={defaultItems} variant="default" />
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2 text-muted-foreground">Pills</h3>
+        <Headtab items={defaultItems} variant="pills" />
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2 text-muted-foreground">Underline</h3>
+        <Headtab items={defaultItems} variant="underline" />
+      </div>
+    </div>
+  ),
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="space-y-8 w-[600px]">
+      <div>
+        <h3 className="text-sm font-medium mb-2 text-muted-foreground">Small</h3>
+        <Headtab items={defaultItems} size="sm" />
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2 text-muted-foreground">Medium (default)</h3>
+        <Headtab items={defaultItems} size="md" />
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2 text-muted-foreground">Large</h3>
+        <Headtab items={defaultItems} size="lg" />
+      </div>
+    </div>
+  ),
+}
+
+// Breadcrumb stories
+export const BreadcrumbDefault: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <Breadcrumb items={defaultBreadcrumbs} />
+    </div>
+  ),
+}
+
+export const BreadcrumbCustomSeparator: Story = {
+  render: () => (
+    <div className="space-y-4 w-[600px]">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Arrow separator</p>
+        <Breadcrumb items={defaultBreadcrumbs} separator="›" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Chevron separator</p>
+        <Breadcrumb items={defaultBreadcrumbs} separator="»" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Pipe separator</p>
+        <Breadcrumb items={defaultBreadcrumbs} separator="|" />
+      </div>
+    </div>
+  ),
+}
+
+export const BreadcrumbShort: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <Breadcrumb
+        items={[
+          { label: 'Home', href: '/' },
+          { label: 'Settings' },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const PageWithTabsAndBreadcrumb: Story = {
+  render: () => (
+    <div className="w-[700px] p-6 border rounded-lg bg-card">
+      <Breadcrumb
+        items={[
+          { label: 'Dashboard', href: '/' },
+          { label: 'Users', href: '/users' },
+          { label: 'User Settings' },
+        ]}
+        className="mb-4"
+      />
+      <h1 className="text-2xl font-bold mb-6">User Settings</h1>
+      <Headtab
+        items={[
+          {
+            id: 'profile',
+            label: 'Profile',
+            content: (
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm font-medium">Name</label>
+                  <input className="w-full mt-1 p-2 border rounded-md" placeholder="John Doe" />
+                </div>
+                <div>
+                  <label className="text-sm font-medium">Email</label>
+                  <input className="w-full mt-1 p-2 border rounded-md" placeholder="john@example.com" />
+                </div>
+              </div>
+            ),
+          },
+          {
+            id: 'security',
+            label: 'Security',
+            content: (
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm font-medium">Current Password</label>
+                  <input type="password" className="w-full mt-1 p-2 border rounded-md" />
+                </div>
+                <div>
+                  <label className="text-sm font-medium">New Password</label>
+                  <input type="password" className="w-full mt-1 p-2 border rounded-md" />
+                </div>
+              </div>
+            ),
+          },
+          {
+            id: 'notifications',
+            label: 'Notifications',
+            content: (
+              <div className="space-y-3">
+                {['Email notifications', 'Push notifications', 'SMS alerts'].map((label) => (
+                  <div key={label} className="flex items-center justify-between py-2">
+                    <span className="text-sm">{label}</span>
+                    <div className="h-5 w-10 bg-muted rounded-full" />
+                  </div>
+                ))}
+              </div>
+            ),
+          },
+        ]}
+        variant="underline"
+      />
+    </div>
+  ),
+}