@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/header/WakaHeader.stories.tsx

@@ -0,0 +1,455 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaHeader } from './index'
+import type { HeaderAction, HeaderFilter, HeaderNotification, HeaderUserMenu } from './index'
+import * as React from 'react'
+import { Plus, Download, Upload, Filter, Settings, User, LogOut, CreditCard, HelpCircle, FileText, Calendar, Folder, LayoutGrid } from 'lucide-react'
+
+const defaultNotifications: HeaderNotification[] = [
+  {
+    id: '1',
+    title: 'Nouvelle commande reçue',
+    description: 'Commande #1234 de Jean Dupont',
+    time: 'Il y a 5 minutes',
+    read: false,
+    onClick: () => console.log('Click notification 1'),
+  },
+  {
+    id: '2',
+    title: 'Paiement confirmé',
+    description: 'Le paiement de 250€ a été validé',
+    time: 'Il y a 1 heure',
+    read: false,
+    onClick: () => console.log('Click notification 2'),
+  },
+  {
+    id: '3',
+    title: 'Nouveau message',
+    description: 'Marie vous a envoyé un message',
+    time: 'Il y a 2 heures',
+    read: true,
+    onClick: () => console.log('Click notification 3'),
+  },
+  {
+    id: '4',
+    title: 'Rapport généré',
+    description: 'Le rapport mensuel est prêt',
+    time: 'Hier',
+    read: true,
+    onClick: () => console.log('Click notification 4'),
+  },
+]
+
+const defaultUserMenu: HeaderUserMenu = {
+  name: 'Jean Dupont',
+  email: 'jean.dupont@example.com',
+  avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Jean',
+  items: [
+    { label: 'Mon profil', icon: <User className="h-4 w-4" />, onClick: () => console.log('Profile') },
+    { label: 'Paramètres', icon: <Settings className="h-4 w-4" />, onClick: () => console.log('Settings') },
+    { label: 'Facturation', icon: <CreditCard className="h-4 w-4" />, onClick: () => console.log('Billing') },
+    { separator: true, label: '' },
+    { label: 'Aide', icon: <HelpCircle className="h-4 w-4" />, onClick: () => console.log('Help') },
+    { separator: true, label: '' },
+    { label: 'Déconnexion', icon: <LogOut className="h-4 w-4" />, onClick: () => console.log('Logout') },
+  ],
+}
+
+const defaultFilters: HeaderFilter[] = [
+  {
+    id: 'status',
+    label: 'Statut',
+    icon: <Filter className="h-4 w-4" />,
+    options: [
+      { value: 'all', label: 'Tous' },
+      { value: 'active', label: 'Actif' },
+      { value: 'inactive', label: 'Inactif' },
+      { value: 'pending', label: 'En attente' },
+    ],
+    value: 'all',
+    onChange: (value) => console.log('Status filter:', value),
+  },
+  {
+    id: 'type',
+    label: 'Type',
+    options: [
+      { value: 'all', label: 'Tous les types' },
+      { value: 'document', label: 'Document' },
+      { value: 'image', label: 'Image' },
+      { value: 'video', label: 'Vidéo' },
+    ],
+    placeholder: 'Type de fichier',
+    onChange: (value) => console.log('Type filter:', value),
+  },
+  {
+    id: 'date',
+    label: 'Date',
+    icon: <Calendar className="h-4 w-4" />,
+    options: [
+      { value: 'all', label: 'Toutes les dates' },
+      { value: 'today', label: "Aujourd'hui" },
+      { value: 'week', label: 'Cette semaine' },
+      { value: 'month', label: 'Ce mois' },
+    ],
+    onChange: (value) => console.log('Date filter:', value),
+  },
+]
+
+const meta: Meta<typeof WakaHeader> = {
+  title: 'Blocks/Header',
+  component: WakaHeader,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A header component with search, filters, notifications, user menu, and customizable actions.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    sticky: {
+      control: 'boolean',
+    },
+    showSearch: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaHeader>
+
+export const Default: Story = {
+  render: () => (
+    <div className="min-h-[400px] bg-muted/30">
+      <WakaHeader
+        title="Tableau de bord"
+        showSearch
+        onSearchChange={(value) => console.log('Search:', value)}
+        userMenu={defaultUserMenu}
+        notifications={defaultNotifications}
+        unreadCount={2}
+      />
+      <div className="p-6">
+        <p className="text-muted-foreground">Page content goes here...</p>
+      </div>
+    </div>
+  ),
+}
+
+export const WithPrimaryAction: Story = {
+  render: () => (
+    <div className="min-h-[400px] bg-muted/30">
+      <WakaHeader
+        title="Documents"
+        primaryAction={{
+          id: 'new',
+          label: 'Nouveau document',
+          icon: <Plus className="h-4 w-4" />,
+          onClick: () => console.log('Create new'),
+        }}
+        showSearch
+        userMenu={defaultUserMenu}
+      />
+      <div className="p-6">
+        <p className="text-muted-foreground">Documents list...</p>
+      </div>
+    </div>
+  ),
+}
+
+export const WithSecondaryActions: Story = {
+  render: () => (
+    <div className="min-h-[400px] bg-muted/30">
+      <WakaHeader
+        title="Fichiers"
+        primaryAction={{
+          id: 'upload',
+          label: 'Upload',
+          icon: <Upload className="h-4 w-4" />,
+          onClick: () => console.log('Upload'),
+        }}
+        secondaryActions={[
+          {
+            id: 'download',
+            label: 'Télécharger',
+            icon: <Download className="h-4 w-4" />,
+            variant: 'outline',
+            onClick: () => console.log('Download'),
+          },
+          {
+            id: 'settings',
+            label: 'Options',
+            icon: <Settings className="h-4 w-4" />,
+            variant: 'ghost',
+            onClick: () => console.log('Settings'),
+          },
+        ]}
+        showSearch
+        userMenu={defaultUserMenu}
+      />
+      <div className="p-6">
+        <p className="text-muted-foreground">Files content...</p>
+      </div>
+    </div>
+  ),
+}
+
+export const WithFilters: Story = {
+  render: () => (
+    <div className="min-h-[400px] bg-muted/30">
+      <WakaHeader
+        title="Liste des fichiers"
+        subtitle="Gérez vos documents"
+        primaryAction={{
+          id: 'new',
+          label: 'Ajouter',
+          icon: <Plus className="h-4 w-4" />,
+          onClick: () => console.log('Add'),
+        }}
+        showSearch
+        filters={defaultFilters}
+        userMenu={defaultUserMenu}
+      />
+      <div className="p-6">
+        <p className="text-muted-foreground">Filtered content...</p>
+      </div>
+    </div>
+  ),
+}
+
+export const WithNotifications: Story = {
+  render: () => (
+    <div className="min-h-[400px] bg-muted/30">
+      <WakaHeader
+        title="Notifications"
+        notifications={defaultNotifications}
+        unreadCount={2}
+        userMenu={defaultUserMenu}
+      />
+      <div className="p-6">
+        <p className="text-muted-foreground">Click the bell icon to see notifications.</p>
+      </div>
+    </div>
+  ),
+}
+
+export const WithSubtitle: Story = {
+  render: () => (
+    <div className="min-h-[400px] bg-muted/30">
+      <WakaHeader
+        title="Projet Alpha"
+        subtitle="3 tâches en cours • 12 terminées"
+        showSearch
+        userMenu={defaultUserMenu}
+      />
+      <div className="p-6">
+        <p className="text-muted-foreground">Project content...</p>
+      </div>
+    </div>
+  ),
+}
+
+export const NoSearch: Story = {
+  render: () => (
+    <div className="min-h-[400px] bg-muted/30">
+      <WakaHeader
+        title="Paramètres"
+        showSearch={false}
+        userMenu={defaultUserMenu}
+      />
+      <div className="p-6">
+        <p className="text-muted-foreground">Settings content without search...</p>
+      </div>
+    </div>
+  ),
+}
+
+export const CustomLeftContent: Story = {
+  render: () => (
+    <div className="min-h-[400px] bg-muted/30">
+      <WakaHeader
+        primaryAction={{
+          id: 'new',
+          label: 'Créer',
+          onClick: () => console.log('Create'),
+        }}
+        leftContent={
+          <div className="flex items-center gap-2 ml-2">
+            <span className="text-sm font-medium">Filtres:</span>
+            <button className="px-2 py-1 text-xs bg-primary text-primary-foreground rounded-full">
+              Tous
+            </button>
+            <button className="px-2 py-1 text-xs bg-muted rounded-full">
+              Actifs
+            </button>
+            <button className="px-2 py-1 text-xs bg-muted rounded-full">
+              Archives
+            </button>
+          </div>
+        }
+        userMenu={defaultUserMenu}
+      />
+      <div className="p-6">
+        <p className="text-muted-foreground">Custom left content...</p>
+      </div>
+    </div>
+  ),
+}
+
+export const CustomRightContent: Story = {
+  render: () => (
+    <div className="min-h-[400px] bg-muted/30">
+      <WakaHeader
+        title="Dashboard"
+        showSearch
+        rightContent={
+          <div className="flex items-center gap-1">
+            <button className="p-2 rounded hover:bg-muted">
+              <LayoutGrid className="h-4 w-4" />
+            </button>
+            <button className="p-2 rounded hover:bg-muted">
+              <Folder className="h-4 w-4" />
+            </button>
+          </div>
+        }
+        userMenu={defaultUserMenu}
+      />
+      <div className="p-6">
+        <p className="text-muted-foreground">Custom view toggles...</p>
+      </div>
+    </div>
+  ),
+}
+
+export const NonSticky: Story = {
+  render: () => (
+    <div className="min-h-[800px] bg-muted/30">
+      <WakaHeader
+        title="Non-Sticky Header"
+        subtitle="Scroll down to see the difference"
+        sticky={false}
+        showSearch
+        userMenu={defaultUserMenu}
+      />
+      <div className="p-6 space-y-4">
+        {Array.from({ length: 20 }).map((_, i) => (
+          <div key={i} className="p-4 bg-card rounded-lg border">
+            Content block {i + 1}
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [searchValue, setSearchValue] = React.useState('')
+    const [filters, setFilters] = React.useState<Record<string, string>>({
+      status: 'all',
+      type: 'all',
+    })
+
+    const interactiveFilters: HeaderFilter[] = [
+      {
+        id: 'status',
+        label: 'Statut',
+        options: [
+          { value: 'all', label: 'Tous' },
+          { value: 'active', label: 'Actif' },
+          { value: 'pending', label: 'En attente' },
+        ],
+        value: filters.status,
+        onChange: (value) => setFilters((prev) => ({ ...prev, status: value })),
+      },
+      {
+        id: 'type',
+        label: 'Type',
+        options: [
+          { value: 'all', label: 'Tous' },
+          { value: 'doc', label: 'Documents' },
+          { value: 'img', label: 'Images' },
+        ],
+        value: filters.type,
+        onChange: (value) => setFilters((prev) => ({ ...prev, type: value })),
+      },
+    ]
+
+    return (
+      <div className="min-h-[400px] bg-muted/30">
+        <WakaHeader
+          title="Interactive Demo"
+          showSearch
+          searchValue={searchValue}
+          onSearchChange={setSearchValue}
+          onSearchSubmit={(val) => alert(`Searching for: ${val}`)}
+          filters={interactiveFilters}
+          primaryAction={{
+            id: 'create',
+            label: 'Create',
+            onClick: () => alert('Create clicked'),
+          }}
+          userMenu={defaultUserMenu}
+        />
+        <div className="p-6">
+          <div className="bg-card p-4 rounded-lg border">
+            <h3 className="font-semibold mb-2">Current State:</h3>
+            <p className="text-sm text-muted-foreground">Search: "{searchValue}"</p>
+            <p className="text-sm text-muted-foreground">Filters: {JSON.stringify(filters)}</p>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const FullFeatured: Story = {
+  render: () => (
+    <div className="min-h-[500px] bg-muted/30">
+      <WakaHeader
+        title="Gestion des documents"
+        subtitle="128 documents • 4.2 GB utilisés"
+        primaryAction={{
+          id: 'new',
+          label: 'Nouveau',
+          icon: <Plus className="h-4 w-4" />,
+          onClick: () => console.log('New'),
+        }}
+        secondaryActions={[
+          {
+            id: 'import',
+            label: 'Importer',
+            icon: <Upload className="h-4 w-4" />,
+            variant: 'outline',
+            onClick: () => console.log('Import'),
+          },
+        ]}
+        showSearch
+        searchPlaceholder="Rechercher un document..."
+        filters={defaultFilters}
+        notifications={defaultNotifications}
+        unreadCount={2}
+        userMenu={defaultUserMenu}
+      />
+      <div className="p-6">
+        <div className="grid gap-4 md:grid-cols-3">
+          {['Documents récents', 'Partagés avec moi', 'Favoris'].map((title) => (
+            <div key={title} className="p-4 bg-card rounded-lg border">
+              <h3 className="font-semibold mb-2">{title}</h3>
+              <div className="space-y-2">
+                {[1, 2, 3].map((i) => (
+                  <div key={i} className="flex items-center gap-2 text-sm">
+                    <FileText className="h-4 w-4 text-muted-foreground" />
+                    <span>Document {i}.pdf</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  ),
+}