@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/file-manager/FileManager.stories.tsx

@@ -0,0 +1,413 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaFileManager, defaultFiles, defaultBreadcrumbs } from './index'
+import type { FileItem, BreadcrumbItem } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaFileManager> = {
+  title: 'Blocks/FileManager',
+  component: WakaFileManager,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A file manager component with grid/list views, breadcrumb navigation, file operations (rename, delete, download), search, and folder creation.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    viewMode: {
+      control: 'select',
+      options: ['grid', 'list'],
+    },
+    showSearch: {
+      control: 'boolean',
+    },
+    showHeader: {
+      control: 'boolean',
+    },
+    showActions: {
+      control: 'boolean',
+    },
+    loading: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaFileManager>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaFileManager
+        files={defaultFiles}
+        breadcrumbs={defaultBreadcrumbs}
+        onNavigate={(path, folderId) => console.log('Navigate:', path, folderId)}
+        onFileOpen={(file) => console.log('Open file:', file)}
+        onDownload={(fileIds) => console.log('Download:', fileIds)}
+        onDelete={(fileIds) => console.log('Delete:', fileIds)}
+        onRename={(fileId, newName) => console.log('Rename:', fileId, newName)}
+        onCreateFolder={(name, path) => console.log('Create folder:', name, path)}
+        onRefresh={() => console.log('Refresh')}
+        onSearch={(query) => console.log('Search:', query)}
+      />
+    </div>
+  ),
+}
+
+export const GridView: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaFileManager
+        files={defaultFiles}
+        breadcrumbs={defaultBreadcrumbs}
+        viewMode="grid"
+        onNavigate={(path) => console.log('Navigate:', path)}
+        onFileOpen={(file) => console.log('Open:', file)}
+      />
+    </div>
+  ),
+}
+
+export const ListView: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaFileManager
+        files={defaultFiles}
+        breadcrumbs={defaultBreadcrumbs}
+        viewMode="list"
+        onNavigate={(path) => console.log('Navigate:', path)}
+        onFileOpen={(file) => console.log('Open:', file)}
+      />
+    </div>
+  ),
+}
+
+export const WithSelection: Story = {
+  render: () => {
+    const [selectedFiles, setSelectedFiles] = React.useState<string[]>([])
+
+    return (
+      <div className="p-6">
+        <WakaFileManager
+          files={defaultFiles}
+          breadcrumbs={defaultBreadcrumbs}
+          selectedFiles={selectedFiles}
+          onSelectionChange={setSelectedFiles}
+          onDownload={(fileIds) => console.log('Download:', fileIds)}
+          onDelete={(fileIds) => {
+            console.log('Delete:', fileIds)
+            setSelectedFiles([])
+          }}
+          onNavigate={(path) => console.log('Navigate:', path)}
+        />
+      </div>
+    )
+  },
+}
+
+export const ManyFiles: Story = {
+  render: () => {
+    const manyFiles: FileItem[] = [
+      // Folders
+      ...['Documents', 'Images', 'Videos', 'Music', 'Downloads', 'Projects'].map((name, i) => ({
+        id: `folder-${i}`,
+        name,
+        type: 'folder' as const,
+        path: `/${name}`,
+        createdAt: new Date('2024-01-01'),
+        modifiedAt: new Date('2024-01-15'),
+      })),
+      // Files
+      ...Array.from({ length: 20 }, (_, i) => ({
+        id: `file-${i}`,
+        name: `Document ${i + 1}.pdf`,
+        type: 'document' as const,
+        path: `/Document ${i + 1}.pdf`,
+        size: Math.floor(Math.random() * 10000000),
+        createdAt: new Date('2024-01-01'),
+        modifiedAt: new Date(Date.now() - Math.random() * 1000 * 60 * 60 * 24 * 30),
+      })),
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaFileManager
+          files={manyFiles}
+          breadcrumbs={defaultBreadcrumbs}
+          onNavigate={(path) => console.log('Navigate:', path)}
+          onFileOpen={(file) => console.log('Open:', file)}
+        />
+      </div>
+    )
+  },
+}
+
+export const MixedFileTypes: Story = {
+  render: () => {
+    const mixedFiles: FileItem[] = [
+      { id: '1', name: 'Documents', type: 'folder', path: '/Documents', createdAt: new Date(), modifiedAt: new Date() },
+      { id: '2', name: 'report.pdf', type: 'document', path: '/report.pdf', size: 2456000, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '3', name: 'photo.jpg', type: 'image', path: '/photo.jpg', size: 5670000, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '4', name: 'video.mp4', type: 'video', path: '/video.mp4', size: 125000000, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '5', name: 'music.mp3', type: 'audio', path: '/music.mp3', size: 8900000, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '6', name: 'archive.zip', type: 'archive', path: '/archive.zip', size: 45000000, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '7', name: 'script.js', type: 'code', path: '/script.js', size: 12000, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '8', name: 'unknown.xyz', type: 'other', path: '/unknown.xyz', size: 1000, createdAt: new Date(), modifiedAt: new Date() },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaFileManager
+          files={mixedFiles}
+          breadcrumbs={defaultBreadcrumbs}
+          viewMode="grid"
+          onNavigate={(path) => console.log('Navigate:', path)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithStarredFiles: Story = {
+  render: () => {
+    const starredFiles: FileItem[] = [
+      { id: '1', name: 'Important Doc.pdf', type: 'document', path: '/Important Doc.pdf', size: 2456000, starred: true, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '2', name: 'Photos', type: 'folder', path: '/Photos', starred: true, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '3', name: 'Project Brief.docx', type: 'document', path: '/Project Brief.docx', size: 156000, starred: true, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '4', name: 'Regular File.txt', type: 'document', path: '/Regular File.txt', size: 5000, createdAt: new Date(), modifiedAt: new Date() },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaFileManager
+          files={starredFiles}
+          breadcrumbs={[{ id: 'starred', name: 'Favoris', path: '/starred' }]}
+          onToggleStar={(fileId) => console.log('Toggle star:', fileId)}
+          onNavigate={(path) => console.log('Navigate:', path)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithSharedFiles: Story = {
+  render: () => {
+    const sharedFiles: FileItem[] = [
+      { id: '1', name: 'Shared Document.pdf', type: 'document', path: '/Shared Document.pdf', size: 2456000, shared: true, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '2', name: 'Team Folder', type: 'folder', path: '/Team Folder', shared: true, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '3', name: 'Private File.docx', type: 'document', path: '/Private File.docx', size: 156000, createdAt: new Date(), modifiedAt: new Date() },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaFileManager
+          files={sharedFiles}
+          breadcrumbs={defaultBreadcrumbs}
+          viewMode="list"
+          onShare={(fileId) => console.log('Share:', fileId)}
+          onNavigate={(path) => console.log('Navigate:', path)}
+        />
+      </div>
+    )
+  },
+}
+
+export const DeepNavigation: Story = {
+  render: () => {
+    const deepBreadcrumbs: BreadcrumbItem[] = [
+      { id: 'root', name: 'Mes fichiers', path: '/' },
+      { id: 'projects', name: 'Projects', path: '/Projects' },
+      { id: 'webapp', name: 'WebApp', path: '/Projects/WebApp' },
+      { id: 'src', name: 'src', path: '/Projects/WebApp/src' },
+      { id: 'components', name: 'components', path: '/Projects/WebApp/src/components' },
+    ]
+
+    const componentFiles: FileItem[] = [
+      { id: '1', name: 'Button.tsx', type: 'code', path: '/Projects/WebApp/src/components/Button.tsx', size: 2500, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '2', name: 'Input.tsx', type: 'code', path: '/Projects/WebApp/src/components/Input.tsx', size: 3200, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '3', name: 'Card.tsx', type: 'code', path: '/Projects/WebApp/src/components/Card.tsx', size: 1800, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '4', name: 'index.ts', type: 'code', path: '/Projects/WebApp/src/components/index.ts', size: 500, createdAt: new Date(), modifiedAt: new Date() },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaFileManager
+          files={componentFiles}
+          breadcrumbs={deepBreadcrumbs}
+          currentPath="/Projects/WebApp/src/components"
+          onNavigate={(path) => console.log('Navigate:', path)}
+        />
+      </div>
+    )
+  },
+}
+
+export const EmptyFolder: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaFileManager
+        files={[]}
+        breadcrumbs={[
+          { id: 'root', name: 'Mes fichiers', path: '/' },
+          { id: 'empty', name: 'Dossier vide', path: '/Dossier vide' },
+        ]}
+        onCreateFolder={(name, path) => console.log('Create folder:', name, path)}
+        onUpload={(files, path) => console.log('Upload:', files, path)}
+        onNavigate={(path) => console.log('Navigate:', path)}
+      />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaFileManager
+        files={[]}
+        breadcrumbs={defaultBreadcrumbs}
+        loading
+      />
+    </div>
+  ),
+}
+
+export const NoHeader: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaFileManager
+        files={defaultFiles}
+        breadcrumbs={defaultBreadcrumbs}
+        showHeader={false}
+        onNavigate={(path) => console.log('Navigate:', path)}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [files, setFiles] = React.useState<FileItem[]>(defaultFiles)
+    const [selectedFiles, setSelectedFiles] = React.useState<string[]>([])
+    const [viewMode, setViewMode] = React.useState<'grid' | 'list'>('grid')
+    const [currentPath, setCurrentPath] = React.useState('/')
+    const [breadcrumbs, setBreadcrumbs] = React.useState<BreadcrumbItem[]>(defaultBreadcrumbs)
+
+    const handleNavigate = (path: string, folderId?: string) => {
+      console.log('Navigate to:', path)
+      setCurrentPath(path)
+      setSelectedFiles([])
+
+      if (path === '/') {
+        setBreadcrumbs(defaultBreadcrumbs)
+        setFiles(defaultFiles)
+      } else {
+        const folder = files.find((f) => f.id === folderId)
+        if (folder) {
+          setBreadcrumbs([
+            ...defaultBreadcrumbs,
+            { id: folder.id, name: folder.name, path: folder.path },
+          ])
+          // Simulate loading folder contents
+          setFiles([
+            { id: 'sub-1', name: 'Subfolder', type: 'folder', path: `${path}/Subfolder`, createdAt: new Date(), modifiedAt: new Date() },
+            { id: 'sub-2', name: 'File in folder.txt', type: 'document', path: `${path}/File.txt`, size: 1234, createdAt: new Date(), modifiedAt: new Date() },
+          ])
+        }
+      }
+    }
+
+    const handleDelete = (fileIds: string[]) => {
+      setFiles((prev) => prev.filter((f) => !fileIds.includes(f.id)))
+      setSelectedFiles([])
+    }
+
+    const handleRename = (fileId: string, newName: string) => {
+      setFiles((prev) =>
+        prev.map((f) => (f.id === fileId ? { ...f, name: newName } : f))
+      )
+    }
+
+    const handleCreateFolder = (name: string) => {
+      const newFolder: FileItem = {
+        id: `folder-${Date.now()}`,
+        name,
+        type: 'folder',
+        path: `${currentPath}/${name}`,
+        createdAt: new Date(),
+        modifiedAt: new Date(),
+      }
+      setFiles((prev) => [...prev, newFolder])
+    }
+
+    return (
+      <div className="p-6">
+        <WakaFileManager
+          files={files}
+          breadcrumbs={breadcrumbs}
+          currentPath={currentPath}
+          selectedFiles={selectedFiles}
+          onSelectionChange={setSelectedFiles}
+          viewMode={viewMode}
+          onViewModeChange={setViewMode}
+          onNavigate={handleNavigate}
+          onFileOpen={(file) => alert(`Opening: ${file.name}`)}
+          onDownload={(fileIds) => alert(`Downloading: ${fileIds.join(', ')}`)}
+          onDelete={handleDelete}
+          onRename={handleRename}
+          onCreateFolder={handleCreateFolder}
+          onSearch={(query) => console.log('Search:', query)}
+          onRefresh={() => console.log('Refresh')}
+          onToggleStar={(fileId) => {
+            setFiles((prev) =>
+              prev.map((f) => (f.id === fileId ? { ...f, starred: !f.starred } : f))
+            )
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const CloudStorage: Story = {
+  render: () => {
+    const cloudFiles: FileItem[] = [
+      { id: '1', name: 'Documents', type: 'folder', path: '/Documents', createdAt: new Date(), modifiedAt: new Date() },
+      { id: '2', name: 'Photos', type: 'folder', path: '/Photos', starred: true, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '3', name: 'Shared with me', type: 'folder', path: '/Shared', shared: true, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '4', name: 'Budget 2024.xlsx', type: 'document', path: '/Budget 2024.xlsx', size: 45000, starred: true, createdAt: new Date(), modifiedAt: new Date() },
+      { id: '5', name: 'Meeting Notes.docx', type: 'document', path: '/Meeting Notes.docx', size: 12000, shared: true, createdAt: new Date(), modifiedAt: new Date() },
+    ]
+
+    return (
+      <div className="min-h-screen bg-muted/30">
+        <header className="bg-background border-b px-6 py-4">
+          <div className="flex items-center justify-between">
+            <span className="font-bold text-xl">Cloud Drive</span>
+            <span className="text-sm text-muted-foreground">2.5 GB / 15 GB used</span>
+          </div>
+        </header>
+        <main className="p-6">
+          <WakaFileManager
+            files={cloudFiles}
+            breadcrumbs={[{ id: 'root', name: 'Mon Drive', path: '/' }]}
+            onNavigate={(path) => console.log('Navigate:', path)}
+            onFileOpen={(file) => console.log('Open:', file)}
+            onDownload={(fileIds) => console.log('Download:', fileIds)}
+            onDelete={(fileIds) => console.log('Delete:', fileIds)}
+            onRename={(fileId, newName) => console.log('Rename:', fileId, newName)}
+            onCreateFolder={(name) => console.log('Create folder:', name)}
+            onUpload={(files) => console.log('Upload:', files)}
+            onShare={(fileId) => console.log('Share:', fileId)}
+            onToggleStar={(fileId) => console.log('Toggle star:', fileId)}
+            onRefresh={() => console.log('Refresh')}
+            onSearch={(query) => console.log('Search:', query)}
+          />
+        </main>
+      </div>
+    )
+  },
+}