@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-tree/WakaTree.stories.tsx

@@ -0,0 +1,359 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaTree, moveNode } from './index'
+import type { TreeNode } from './index'
+import * as React from 'react'
+import { FileText, Image, FileCode, Settings, Database, Globe } from 'lucide-react'
+
+const meta: Meta<typeof WakaTree> = {
+  title: 'Components/Display/WakaTree',
+  component: WakaTree,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A tree view component for displaying hierarchical data with selection, expansion, and drag-and-drop support.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    selectionMode: {
+      control: 'select',
+      options: ['none', 'single', 'multiple'],
+      description: 'Selection mode',
+    },
+    showCheckboxes: {
+      control: 'boolean',
+      description: 'Show checkboxes',
+    },
+    showIcons: {
+      control: 'boolean',
+      description: 'Show file/folder icons',
+    },
+    draggable: {
+      control: 'boolean',
+      description: 'Enable drag and drop',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the tree',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTree>
+
+const fileSystemData: TreeNode[] = [
+  {
+    id: 'src',
+    label: 'src',
+    children: [
+      {
+        id: 'components',
+        label: 'components',
+        children: [
+          { id: 'button.tsx', label: 'Button.tsx' },
+          { id: 'input.tsx', label: 'Input.tsx' },
+          { id: 'card.tsx', label: 'Card.tsx' },
+        ],
+      },
+      {
+        id: 'hooks',
+        label: 'hooks',
+        children: [
+          { id: 'useState.ts', label: 'useState.ts' },
+          { id: 'useEffect.ts', label: 'useEffect.ts' },
+        ],
+      },
+      {
+        id: 'utils',
+        label: 'utils',
+        children: [
+          { id: 'helpers.ts', label: 'helpers.ts' },
+          { id: 'constants.ts', label: 'constants.ts' },
+        ],
+      },
+      { id: 'app.tsx', label: 'App.tsx' },
+      { id: 'index.tsx', label: 'index.tsx' },
+    ],
+  },
+  {
+    id: 'public',
+    label: 'public',
+    children: [
+      { id: 'index.html', label: 'index.html' },
+      { id: 'favicon.ico', label: 'favicon.ico' },
+    ],
+  },
+  { id: 'package.json', label: 'package.json' },
+  { id: 'tsconfig.json', label: 'tsconfig.json' },
+  { id: 'readme.md', label: 'README.md' },
+]
+
+export const Default: Story = {
+  args: {
+    data: fileSystemData,
+    className: 'w-[300px] border rounded-lg p-2',
+  },
+}
+
+export const WithSelection: Story = {
+  render: () => {
+    const [selectedIds, setSelectedIds] = React.useState<string[]>(['button.tsx'])
+
+    return (
+      <div className="w-[300px] border rounded-lg p-2">
+        <WakaTree
+          data={fileSystemData}
+          selectedIds={selectedIds}
+          onSelect={setSelectedIds}
+          selectionMode="single"
+        />
+        <div className="mt-4 pt-4 border-t text-sm">
+          Selected: {selectedIds.length > 0 ? selectedIds.join(', ') : 'None'}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const MultipleSelection: Story = {
+  render: () => {
+    const [selectedIds, setSelectedIds] = React.useState<string[]>([])
+
+    return (
+      <div className="w-[300px] border rounded-lg p-2">
+        <WakaTree
+          data={fileSystemData}
+          selectedIds={selectedIds}
+          onSelect={setSelectedIds}
+          selectionMode="multiple"
+          showCheckboxes
+        />
+        <div className="mt-4 pt-4 border-t text-sm">
+          Selected ({selectedIds.length}): {selectedIds.join(', ') || 'None'}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const ExpandAll: Story = {
+  args: {
+    data: fileSystemData,
+    defaultExpandAll: true,
+    className: 'w-[300px] border rounded-lg p-2',
+  },
+}
+
+export const Sizes: Story = {
+  render: () => {
+    const simpleData: TreeNode[] = [
+      {
+        id: 'folder1',
+        label: 'Documents',
+        children: [
+          { id: 'file1', label: 'report.pdf' },
+          { id: 'file2', label: 'summary.docx' },
+        ],
+      },
+      {
+        id: 'folder2',
+        label: 'Images',
+        children: [
+          { id: 'img1', label: 'photo.jpg' },
+          { id: 'img2', label: 'screenshot.png' },
+        ],
+      },
+    ]
+
+    return (
+      <div className="flex gap-8">
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Small</p>
+          <WakaTree
+            data={simpleData}
+            size="sm"
+            defaultExpandAll
+            className="w-[200px] border rounded-lg p-2"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Medium</p>
+          <WakaTree
+            data={simpleData}
+            size="md"
+            defaultExpandAll
+            className="w-[200px] border rounded-lg p-2"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Large</p>
+          <WakaTree
+            data={simpleData}
+            size="lg"
+            defaultExpandAll
+            className="w-[200px] border rounded-lg p-2"
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithCustomIcons: Story = {
+  render: () => {
+    const dataWithIcons: TreeNode[] = [
+      {
+        id: 'docs',
+        label: 'Documents',
+        icon: <FileText className="h-4 w-4 text-blue-500" />,
+        children: [
+          { id: 'doc1', label: 'Report.pdf', icon: <FileText className="h-4 w-4 text-red-500" /> },
+          { id: 'doc2', label: 'Notes.txt', icon: <FileText className="h-4 w-4 text-gray-500" /> },
+        ],
+      },
+      {
+        id: 'images',
+        label: 'Images',
+        icon: <Image className="h-4 w-4 text-green-500" />,
+        children: [
+          { id: 'img1', label: 'Photo.jpg', icon: <Image className="h-4 w-4 text-green-500" /> },
+          { id: 'img2', label: 'Logo.png', icon: <Image className="h-4 w-4 text-green-500" /> },
+        ],
+      },
+      {
+        id: 'code',
+        label: 'Source Code',
+        icon: <FileCode className="h-4 w-4 text-purple-500" />,
+        children: [
+          { id: 'code1', label: 'index.ts', icon: <FileCode className="h-4 w-4 text-blue-500" /> },
+          { id: 'code2', label: 'app.tsx', icon: <FileCode className="h-4 w-4 text-blue-500" /> },
+        ],
+      },
+    ]
+
+    return (
+      <WakaTree
+        data={dataWithIcons}
+        showIcons={false}
+        defaultExpandAll
+        className="w-[300px] border rounded-lg p-2"
+      />
+    )
+  },
+}
+
+export const DragAndDrop: Story = {
+  render: () => {
+    const [data, setData] = React.useState<TreeNode[]>([
+      {
+        id: 'folder1',
+        label: 'Folder A',
+        children: [
+          { id: 'item1', label: 'Item 1' },
+          { id: 'item2', label: 'Item 2' },
+        ],
+      },
+      {
+        id: 'folder2',
+        label: 'Folder B',
+        children: [
+          { id: 'item3', label: 'Item 3' },
+        ],
+      },
+      {
+        id: 'folder3',
+        label: 'Folder C',
+        children: [],
+      },
+    ])
+
+    const handleDrop = (draggedId: string, targetId: string, position: 'before' | 'after' | 'inside') => {
+      setData(prev => moveNode(prev, draggedId, targetId, position))
+    }
+
+    return (
+      <div className="w-[300px] border rounded-lg p-2">
+        <p className="text-sm text-muted-foreground mb-4">Drag items to reorganize</p>
+        <WakaTree
+          data={data}
+          draggable
+          onDrop={handleDrop}
+          defaultExpandAll
+        />
+      </div>
+    )
+  },
+}
+
+export const NoIcons: Story = {
+  args: {
+    data: fileSystemData,
+    showIcons: false,
+    defaultExpandAll: true,
+    className: 'w-[300px] border rounded-lg p-2',
+  },
+}
+
+export const SettingsTree: Story = {
+  render: () => {
+    const settingsData: TreeNode[] = [
+      {
+        id: 'general',
+        label: 'General',
+        icon: <Settings className="h-4 w-4" />,
+        children: [
+          { id: 'profile', label: 'Profile' },
+          { id: 'account', label: 'Account' },
+          { id: 'notifications', label: 'Notifications' },
+        ],
+      },
+      {
+        id: 'security',
+        label: 'Security',
+        icon: <Database className="h-4 w-4" />,
+        children: [
+          { id: 'password', label: 'Password' },
+          { id: '2fa', label: 'Two-Factor Auth' },
+          { id: 'sessions', label: 'Active Sessions' },
+        ],
+      },
+      {
+        id: 'integrations',
+        label: 'Integrations',
+        icon: <Globe className="h-4 w-4" />,
+        children: [
+          { id: 'api', label: 'API Keys' },
+          { id: 'webhooks', label: 'Webhooks' },
+          { id: 'oauth', label: 'OAuth Apps' },
+        ],
+      },
+    ]
+
+    const [selectedIds, setSelectedIds] = React.useState<string[]>(['profile'])
+
+    return (
+      <div className="flex border rounded-lg overflow-hidden w-[600px]">
+        <div className="w-[200px] border-r p-2 bg-muted/30">
+          <WakaTree
+            data={settingsData}
+            selectedIds={selectedIds}
+            onSelect={setSelectedIds}
+            selectionMode="single"
+            showIcons={false}
+            defaultExpandAll
+          />
+        </div>
+        <div className="flex-1 p-4">
+          <h3 className="font-semibold capitalize">{selectedIds[0] || 'Select a setting'}</h3>
+          <p className="text-sm text-muted-foreground mt-2">
+            Configure your {selectedIds[0] || '...'} settings here.
+          </p>
+        </div>
+      </div>
+    )
+  },
+}