@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-tabs-morph/WakaTabsMorph.stories.tsx

@@ -0,0 +1,471 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaTabsMorph, WakaTabPanel, useTabs } from './index'
+import type { TabItem } from './index'
+import * as React from 'react'
+import { Home, User, Settings, Bell, Mail, Heart, Star, Zap, Inbox, Archive, Trash2 } from 'lucide-react'
+
+const meta: Meta<typeof WakaTabsMorph> = {
+  title: 'Components/Effects/WakaTabsMorph',
+  component: WakaTabsMorph,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Animated tabs component with morphing indicator that smoothly transitions between tabs.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'pills', 'underline', 'enclosed'],
+      description: 'Tab style variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Tab size',
+    },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Tab orientation',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Full width tabs',
+    },
+    animationDuration: {
+      control: { type: 'range', min: 100, max: 500, step: 50 },
+      description: 'Animation duration in ms',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTabsMorph>
+
+const basicTabs: TabItem[] = [
+  { id: 'tab1', label: 'Overview' },
+  { id: 'tab2', label: 'Analytics' },
+  { id: 'tab3', label: 'Settings' },
+]
+
+export const Default: Story = {
+  args: {
+    tabs: basicTabs,
+  },
+  render: (args) => <WakaTabsMorph {...args} />,
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Default</p>
+        <WakaTabsMorph tabs={basicTabs} variant="default" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Pills</p>
+        <WakaTabsMorph tabs={basicTabs} variant="pills" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Underline</p>
+        <WakaTabsMorph tabs={basicTabs} variant="underline" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Enclosed</p>
+        <WakaTabsMorph tabs={basicTabs} variant="enclosed" />
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <WakaTabsMorph tabs={basicTabs} size="sm" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Medium</p>
+        <WakaTabsMorph tabs={basicTabs} size="md" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaTabsMorph tabs={basicTabs} size="lg" />
+      </div>
+    </div>
+  ),
+}
+
+export const WithIcons: Story = {
+  render: () => {
+    const iconTabs: TabItem[] = [
+      { id: 'home', label: 'Home', icon: <Home className="h-4 w-4" /> },
+      { id: 'profile', label: 'Profile', icon: <User className="h-4 w-4" /> },
+      { id: 'settings', label: 'Settings', icon: <Settings className="h-4 w-4" /> },
+    ]
+
+    return <WakaTabsMorph tabs={iconTabs} />
+  },
+}
+
+export const WithBadges: Story = {
+  render: () => {
+    const badgeTabs: TabItem[] = [
+      { id: 'inbox', label: 'Inbox', icon: <Inbox className="h-4 w-4" />, badge: 5 },
+      { id: 'archive', label: 'Archive', icon: <Archive className="h-4 w-4" />, badge: 12 },
+      { id: 'trash', label: 'Trash', icon: <Trash2 className="h-4 w-4" /> },
+    ]
+
+    return (
+      <div className="space-y-8">
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Default with badges</p>
+          <WakaTabsMorph tabs={badgeTabs} />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Pills with badges</p>
+          <WakaTabsMorph tabs={badgeTabs} variant="pills" />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithContent: Story = {
+  render: () => {
+    const contentTabs: TabItem[] = [
+      {
+        id: 'overview',
+        label: 'Overview',
+        icon: <Home className="h-4 w-4" />,
+        content: (
+          <div className="p-4 border rounded-lg mt-4">
+            <h3 className="font-semibold mb-2">Overview</h3>
+            <p className="text-muted-foreground">
+              This is the overview content. It provides a general summary of your dashboard.
+            </p>
+          </div>
+        ),
+      },
+      {
+        id: 'analytics',
+        label: 'Analytics',
+        icon: <Zap className="h-4 w-4" />,
+        content: (
+          <div className="p-4 border rounded-lg mt-4">
+            <h3 className="font-semibold mb-2">Analytics</h3>
+            <p className="text-muted-foreground">
+              View your analytics data and insights here.
+            </p>
+          </div>
+        ),
+      },
+      {
+        id: 'settings',
+        label: 'Settings',
+        icon: <Settings className="h-4 w-4" />,
+        content: (
+          <div className="p-4 border rounded-lg mt-4">
+            <h3 className="font-semibold mb-2">Settings</h3>
+            <p className="text-muted-foreground">
+              Configure your preferences and account settings.
+            </p>
+          </div>
+        ),
+      },
+    ]
+
+    return (
+      <div className="w-[500px]">
+        <WakaTabsMorph tabs={contentTabs} />
+      </div>
+    )
+  },
+}
+
+export const FullWidth: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaTabsMorph tabs={basicTabs} fullWidth />
+    </div>
+  ),
+}
+
+export const VerticalOrientation: Story = {
+  render: () => {
+    const verticalTabs: TabItem[] = [
+      { id: 'general', label: 'General', icon: <Settings className="h-4 w-4" /> },
+      { id: 'notifications', label: 'Notifications', icon: <Bell className="h-4 w-4" /> },
+      { id: 'email', label: 'Email', icon: <Mail className="h-4 w-4" /> },
+      { id: 'privacy', label: 'Privacy', icon: <User className="h-4 w-4" /> },
+    ]
+
+    return (
+      <div className="w-[400px]">
+        <WakaTabsMorph
+          tabs={verticalTabs}
+          orientation="vertical"
+          renderContent={(tab) => (
+            <div className="p-4 border rounded-lg flex-1">
+              <h3 className="font-semibold mb-2">{tab.label} Settings</h3>
+              <p className="text-muted-foreground">
+                Configure your {tab.label.toLowerCase()} preferences here.
+              </p>
+            </div>
+          )}
+        />
+      </div>
+    )
+  },
+}
+
+export const VerticalVariants: Story = {
+  render: () => {
+    const verticalTabs: TabItem[] = [
+      { id: 'tab1', label: 'First' },
+      { id: 'tab2', label: 'Second' },
+      { id: 'tab3', label: 'Third' },
+    ]
+
+    return (
+      <div className="flex gap-12">
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Default</p>
+          <WakaTabsMorph tabs={verticalTabs} orientation="vertical" variant="default" />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Pills</p>
+          <WakaTabsMorph tabs={verticalTabs} orientation="vertical" variant="pills" />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Underline</p>
+          <WakaTabsMorph tabs={verticalTabs} orientation="vertical" variant="underline" />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const DisabledTabs: Story = {
+  render: () => {
+    const tabsWithDisabled: TabItem[] = [
+      { id: 'active1', label: 'Active' },
+      { id: 'disabled', label: 'Disabled', disabled: true },
+      { id: 'active2', label: 'Also Active' },
+    ]
+
+    return <WakaTabsMorph tabs={tabsWithDisabled} />
+  },
+}
+
+export const Controlled: Story = {
+  render: () => {
+    const [activeTab, setActiveTab] = React.useState('tab2')
+
+    return (
+      <div className="space-y-4">
+        <WakaTabsMorph
+          tabs={basicTabs}
+          activeTab={activeTab}
+          onChange={setActiveTab}
+        />
+        <p className="text-sm text-muted-foreground">
+          Active tab: {activeTab}
+        </p>
+        <div className="flex gap-2">
+          {basicTabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className="px-3 py-1 text-sm border rounded hover:bg-muted"
+            >
+              Go to {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const tabs: TabItem[] = [
+      { id: 'home', label: 'Home', icon: <Home className="h-4 w-4" /> },
+      { id: 'favorites', label: 'Favorites', icon: <Heart className="h-4 w-4" /> },
+      { id: 'starred', label: 'Starred', icon: <Star className="h-4 w-4" /> },
+    ]
+
+    const {
+      activeTab,
+      activeTabData,
+      setActiveTab,
+      goToNext,
+      goToPrevious,
+      goToFirst,
+      goToLast,
+    } = useTabs(tabs)
+
+    return (
+      <div className="space-y-4">
+        <WakaTabsMorph tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
+        <div className="p-4 border rounded-lg">
+          <p className="text-sm">
+            Active: <strong>{activeTabData?.label}</strong>
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <button
+            onClick={goToFirst}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            First
+          </button>
+          <button
+            onClick={goToPrevious}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Previous
+          </button>
+          <button
+            onClick={goToNext}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Next
+          </button>
+          <button
+            onClick={goToLast}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Last
+          </button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithTabPanel: Story = {
+  render: () => {
+    const tabs: TabItem[] = [
+      { id: 'photos', label: 'Photos', icon: <Heart className="h-4 w-4" /> },
+      { id: 'videos', label: 'Videos', icon: <Star className="h-4 w-4" /> },
+      { id: 'music', label: 'Music', icon: <Zap className="h-4 w-4" /> },
+    ]
+
+    const [activeTab, setActiveTab] = React.useState('photos')
+
+    return (
+      <div className="w-[400px]">
+        <WakaTabsMorph tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
+        <div className="mt-4">
+          <WakaTabPanel tabId="photos" activeTab={activeTab}>
+            <div className="p-4 border rounded-lg">
+              <h3 className="font-semibold mb-2">Photos</h3>
+              <p className="text-muted-foreground">Your photo library</p>
+            </div>
+          </WakaTabPanel>
+          <WakaTabPanel tabId="videos" activeTab={activeTab}>
+            <div className="p-4 border rounded-lg">
+              <h3 className="font-semibold mb-2">Videos</h3>
+              <p className="text-muted-foreground">Your video collection</p>
+            </div>
+          </WakaTabPanel>
+          <WakaTabPanel tabId="music" activeTab={activeTab}>
+            <div className="p-4 border rounded-lg">
+              <h3 className="font-semibold mb-2">Music</h3>
+              <p className="text-muted-foreground">Your music library</p>
+            </div>
+          </WakaTabPanel>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const RenderContentFunction: Story = {
+  render: () => {
+    const tabs: TabItem[] = [
+      { id: 'overview', label: 'Overview' },
+      { id: 'metrics', label: 'Metrics' },
+      { id: 'logs', label: 'Logs' },
+    ]
+
+    return (
+      <div className="w-[500px]">
+        <WakaTabsMorph
+          tabs={tabs}
+          variant="underline"
+          renderContent={(tab) => (
+            <div className="p-4 mt-4 border rounded-lg bg-muted/30">
+              <h3 className="font-semibold mb-2">{tab.label}</h3>
+              <p className="text-muted-foreground">
+                Content for the {tab.label.toLowerCase()} tab. This is rendered dynamically.
+              </p>
+            </div>
+          )}
+        />
+      </div>
+    )
+  },
+}
+
+export const ManyTabs: Story = {
+  render: () => {
+    const manyTabs: TabItem[] = Array.from({ length: 7 }, (_, i) => ({
+      id: `tab${i + 1}`,
+      label: `Tab ${i + 1}`,
+    }))
+
+    return (
+      <div className="w-[600px]">
+        <WakaTabsMorph tabs={manyTabs} variant="underline" />
+      </div>
+    )
+  },
+}
+
+export const SettingsPage: Story = {
+  render: () => {
+    const settingsTabs: TabItem[] = [
+      { id: 'profile', label: 'Profile', icon: <User className="h-4 w-4" /> },
+      { id: 'account', label: 'Account', icon: <Settings className="h-4 w-4" /> },
+      { id: 'notifications', label: 'Notifications', icon: <Bell className="h-4 w-4" />, badge: 3 },
+      { id: 'security', label: 'Security', icon: <Zap className="h-4 w-4" /> },
+    ]
+
+    return (
+      <div className="w-[600px] border rounded-lg p-6">
+        <h2 className="text-2xl font-bold mb-6">Settings</h2>
+        <WakaTabsMorph
+          tabs={settingsTabs}
+          variant="enclosed"
+          renderContent={(tab) => (
+            <div className="p-4 mt-4">
+              <h3 className="text-lg font-semibold mb-4">{tab.label}</h3>
+              <div className="space-y-4">
+                <div className="flex items-center justify-between p-3 bg-muted/50 rounded-md">
+                  <span>Option 1</span>
+                  <button className="px-3 py-1 text-sm bg-primary text-primary-foreground rounded">
+                    Edit
+                  </button>
+                </div>
+                <div className="flex items-center justify-between p-3 bg-muted/50 rounded-md">
+                  <span>Option 2</span>
+                  <button className="px-3 py-1 text-sm bg-primary text-primary-foreground rounded">
+                    Edit
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        />
+      </div>
+    )
+  },
+}