@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-dock/WakaDock.stories.tsx

@@ -0,0 +1,332 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDock, WakaFloatingDock, WakaAppDock } from './index'
+import type { DockItem } from './index'
+import * as React from 'react'
+import {
+  Home,
+  Search,
+  Mail,
+  Calendar,
+  Settings,
+  Music,
+  Image,
+  FileText,
+  Terminal,
+  Globe,
+  MessageSquare,
+  ShoppingBag,
+  Gamepad2,
+  Palette,
+  FolderOpen,
+} from 'lucide-react'
+
+const meta: Meta<typeof WakaDock> = {
+  title: 'Components/Display/WakaDock',
+  component: WakaDock,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A macOS-style dock component with magnification effect, tooltips, and badge support.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['bottom', 'left', 'right'],
+      description: 'Position of the dock',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Size of dock icons',
+    },
+    magnification: {
+      control: { type: 'range', min: 1, max: 2, step: 0.1 },
+      description: 'Magnification factor on hover',
+    },
+    magnificationDistance: {
+      control: { type: 'range', min: 50, max: 300, step: 10 },
+      description: 'Distance for magnification effect',
+    },
+    showLabels: {
+      control: 'boolean',
+      description: 'Show labels on hover',
+    },
+    fixed: {
+      control: 'boolean',
+      description: 'Use fixed positioning',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDock>
+
+const basicItems: DockItem[] = [
+  { id: 'home', icon: <Home className="h-6 w-6" />, label: 'Home', onClick: () => console.log('Home') },
+  { id: 'search', icon: <Search className="h-6 w-6" />, label: 'Search', onClick: () => console.log('Search') },
+  { id: 'mail', icon: <Mail className="h-6 w-6" />, label: 'Mail', badge: 3, onClick: () => console.log('Mail') },
+  { id: 'calendar', icon: <Calendar className="h-6 w-6" />, label: 'Calendar', onClick: () => console.log('Calendar') },
+  { id: 'settings', icon: <Settings className="h-6 w-6" />, label: 'Settings', onClick: () => console.log('Settings') },
+]
+
+export const Default: Story = {
+  args: {
+    items: basicItems,
+    fixed: false,
+  },
+}
+
+export const Positions: Story = {
+  render: () => {
+    const [position, setPosition] = React.useState<'bottom' | 'left' | 'right'>('bottom')
+
+    return (
+      <div className="w-[500px] h-[400px] border rounded-lg relative bg-muted/30 overflow-hidden">
+        <div className="absolute top-4 left-4 flex gap-2">
+          {(['bottom', 'left', 'right'] as const).map((pos) => (
+            <button
+              key={pos}
+              onClick={() => setPosition(pos)}
+              className={`px-3 py-1 text-sm rounded ${
+                position === pos ? 'bg-primary text-primary-foreground' : 'bg-background border'
+              }`}
+            >
+              {pos}
+            </button>
+          ))}
+        </div>
+        <WakaDock items={basicItems} position={position} fixed={false} />
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-12">
+      <div>
+        <p className="text-sm text-muted-foreground mb-4">Small</p>
+        <WakaDock items={basicItems} size="sm" fixed={false} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-4">Default</p>
+        <WakaDock items={basicItems} size="default" fixed={false} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-4">Large</p>
+        <WakaDock items={basicItems} size="lg" fixed={false} />
+      </div>
+    </div>
+  ),
+}
+
+export const WithBadges: Story = {
+  render: () => {
+    const itemsWithBadges: DockItem[] = [
+      { id: 'mail', icon: <Mail className="h-6 w-6" />, label: 'Mail', badge: 12 },
+      { id: 'messages', icon: <MessageSquare className="h-6 w-6" />, label: 'Messages', badge: 3 },
+      { id: 'calendar', icon: <Calendar className="h-6 w-6" />, label: 'Calendar', badge: '!' },
+      { id: 'store', icon: <ShoppingBag className="h-6 w-6" />, label: 'Store', badge: 'New' },
+      { id: 'settings', icon: <Settings className="h-6 w-6" />, label: 'Settings' },
+    ]
+
+    return <WakaDock items={itemsWithBadges} fixed={false} />
+  },
+}
+
+export const WithActiveIndicator: Story = {
+  render: () => {
+    const [activeId, setActiveId] = React.useState('home')
+
+    const items: DockItem[] = [
+      { id: 'home', icon: <Home className="h-6 w-6" />, label: 'Home' },
+      { id: 'search', icon: <Search className="h-6 w-6" />, label: 'Search' },
+      { id: 'mail', icon: <Mail className="h-6 w-6" />, label: 'Mail' },
+      { id: 'settings', icon: <Settings className="h-6 w-6" />, label: 'Settings' },
+    ].map((item) => ({
+      ...item,
+      active: item.id === activeId,
+      onClick: () => setActiveId(item.id),
+    }))
+
+    return (
+      <div className="space-y-4">
+        <WakaDock items={items} fixed={false} />
+        <p className="text-sm text-muted-foreground text-center">
+          Active: {activeId}
+        </p>
+      </div>
+    )
+  },
+}
+
+export const MacOSStyle: Story = {
+  render: () => {
+    const macItems: DockItem[] = [
+      { id: 'finder', icon: <FolderOpen className="h-6 w-6 text-blue-500" />, label: 'Finder', active: true },
+      { id: 'safari', icon: <Globe className="h-6 w-6 text-blue-400" />, label: 'Safari' },
+      { id: 'mail', icon: <Mail className="h-6 w-6 text-blue-600" />, label: 'Mail', badge: 5 },
+      { id: 'music', icon: <Music className="h-6 w-6 text-red-500" />, label: 'Music' },
+      { id: 'photos', icon: <Image className="h-6 w-6 text-gradient" />, label: 'Photos' },
+      { id: 'messages', icon: <MessageSquare className="h-6 w-6 text-green-500" />, label: 'Messages', badge: 2 },
+      { id: 'notes', icon: <FileText className="h-6 w-6 text-yellow-500" />, label: 'Notes' },
+      { id: 'terminal', icon: <Terminal className="h-6 w-6 text-gray-500" />, label: 'Terminal' },
+    ]
+
+    return (
+      <div className="w-[600px] h-[400px] border rounded-lg relative bg-gradient-to-br from-blue-500/20 to-purple-500/20 overflow-hidden">
+        <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+          Desktop
+        </div>
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2">
+          <WakaDock
+            items={macItems}
+            magnification={1.6}
+            magnificationDistance={120}
+            fixed={false}
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const VerticalDock: Story = {
+  render: () => {
+    const items: DockItem[] = [
+      { id: 'home', icon: <Home className="h-5 w-5" />, label: 'Home' },
+      { id: 'search', icon: <Search className="h-5 w-5" />, label: 'Search' },
+      { id: 'mail', icon: <Mail className="h-5 w-5" />, label: 'Mail', badge: 3 },
+      { id: 'calendar', icon: <Calendar className="h-5 w-5" />, label: 'Calendar' },
+      { id: 'settings', icon: <Settings className="h-5 w-5" />, label: 'Settings' },
+    ]
+
+    return (
+      <div className="flex gap-8">
+        <div className="w-[300px] h-[400px] border rounded-lg relative bg-muted/30 overflow-hidden">
+          <div className="absolute inset-0 flex items-center justify-center text-sm text-muted-foreground">
+            Left Dock
+          </div>
+          <WakaDock items={items} position="left" size="sm" fixed={false} />
+        </div>
+        <div className="w-[300px] h-[400px] border rounded-lg relative bg-muted/30 overflow-hidden">
+          <div className="absolute inset-0 flex items-center justify-center text-sm text-muted-foreground">
+            Right Dock
+          </div>
+          <WakaDock items={items} position="right" size="sm" fixed={false} />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const NoLabels: Story = {
+  args: {
+    items: basicItems,
+    showLabels: false,
+    fixed: false,
+  },
+}
+
+export const MagnificationSettings: Story = {
+  render: () => {
+    const [magnification, setMagnification] = React.useState(1.5)
+    const [distance, setDistance] = React.useState(150)
+
+    return (
+      <div className="space-y-8">
+        <div className="space-y-4">
+          <div className="flex items-center gap-4">
+            <label className="text-sm w-32">Magnification:</label>
+            <input
+              type="range"
+              min={1}
+              max={2}
+              step={0.1}
+              value={magnification}
+              onChange={(e) => setMagnification(Number(e.target.value))}
+              className="flex-1"
+            />
+            <span className="text-sm w-12">{magnification.toFixed(1)}x</span>
+          </div>
+          <div className="flex items-center gap-4">
+            <label className="text-sm w-32">Distance:</label>
+            <input
+              type="range"
+              min={50}
+              max={300}
+              step={10}
+              value={distance}
+              onChange={(e) => setDistance(Number(e.target.value))}
+              className="flex-1"
+            />
+            <span className="text-sm w-12">{distance}px</span>
+          </div>
+        </div>
+        <WakaDock
+          items={basicItems}
+          magnification={magnification}
+          magnificationDistance={distance}
+          fixed={false}
+        />
+      </div>
+    )
+  },
+}
+
+export const AppDockWithSections: Story = {
+  render: () => {
+    const sections = [
+      {
+        items: [
+          { id: 'finder', icon: <FolderOpen className="h-6 w-6 text-blue-500" />, label: 'Finder', active: true },
+          { id: 'safari', icon: <Globe className="h-6 w-6 text-blue-400" />, label: 'Safari' },
+          { id: 'mail', icon: <Mail className="h-6 w-6 text-blue-600" />, label: 'Mail', badge: 5 },
+        ],
+      },
+      {
+        items: [
+          { id: 'music', icon: <Music className="h-6 w-6 text-red-500" />, label: 'Music' },
+          { id: 'photos', icon: <Image className="h-6 w-6" />, label: 'Photos' },
+          { id: 'games', icon: <Gamepad2 className="h-6 w-6 text-purple-500" />, label: 'Games' },
+        ],
+      },
+      {
+        items: [
+          { id: 'terminal', icon: <Terminal className="h-6 w-6 text-gray-500" />, label: 'Terminal' },
+          { id: 'settings', icon: <Settings className="h-6 w-6 text-gray-600" />, label: 'Settings' },
+        ],
+      },
+    ]
+
+    return (
+      <div className="w-[700px] h-[400px] border rounded-lg relative bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 overflow-hidden">
+        <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+          App Dock with Sections
+        </div>
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2">
+          <WakaAppDock sections={sections} fixed={false} />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const DarkMode: Story = {
+  render: () => (
+    <div className="dark bg-gray-900 p-8 rounded-lg">
+      <div className="w-[500px] h-[300px] border border-gray-700 rounded-lg relative bg-gradient-to-br from-gray-800 to-gray-900 overflow-hidden">
+        <div className="absolute inset-0 flex items-center justify-center text-gray-400">
+          Dark Mode Dock
+        </div>
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2">
+          <WakaDock items={basicItems} fixed={false} />
+        </div>
+      </div>
+    </div>
+  ),
+}