@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/user-management/UserManagement.stories.tsx

@@ -0,0 +1,411 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaUserManagement, defaultUsers, defaultPermissions } from './index'
+import type { UserData, UserRole, UserStatus, UserFormData, UserPermission } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaUserManagement> = {
+  title: 'Blocks/UserManagement',
+  component: WakaUserManagement,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A user management component with CRUD operations, role management, status changes, search, filters, bulk actions, and permissions.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showBulkActions: {
+      control: 'boolean',
+    },
+    showCreateButton: {
+      control: 'boolean',
+    },
+    loading: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaUserManagement>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaUserManagement
+        users={defaultUsers}
+        onSearchChange={(query) => console.log('Search:', query)}
+        onRoleFilterChange={(role) => console.log('Role filter:', role)}
+        onStatusFilterChange={(status) => console.log('Status filter:', status)}
+        onCreate={(user) => console.log('Create:', user)}
+        onEdit={(userId, data) => console.log('Edit:', userId, data)}
+        onDelete={(userId) => console.log('Delete:', userId)}
+        onRoleChange={(userId, role) => console.log('Role change:', userId, role)}
+        onStatusChange={(userId, status) => console.log('Status change:', userId, status)}
+        onResetPassword={(userId) => console.log('Reset password:', userId)}
+        onRefresh={() => console.log('Refresh')}
+        onExport={() => console.log('Export')}
+      />
+    </div>
+  ),
+}
+
+export const WithSelection: Story = {
+  render: () => {
+    const [selectedUsers, setSelectedUsers] = React.useState<string[]>([])
+
+    return (
+      <div className="p-6">
+        <WakaUserManagement
+          users={defaultUsers}
+          selectedUsers={selectedUsers}
+          onSelectionChange={setSelectedUsers}
+          onBulkDelete={(userIds) => {
+            console.log('Bulk delete:', userIds)
+            setSelectedUsers([])
+          }}
+          onSearchChange={(query) => console.log('Search:', query)}
+          onCreate={(user) => console.log('Create:', user)}
+          onDelete={(userId) => console.log('Delete:', userId)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithPermissions: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaUserManagement
+        users={defaultUsers}
+        permissions={defaultPermissions}
+        onCreate={(user) => console.log('Create:', user)}
+        onEdit={(userId, data) => console.log('Edit:', userId, data)}
+        onSearchChange={(query) => console.log('Search:', query)}
+      />
+    </div>
+  ),
+}
+
+export const ManyUsers: Story = {
+  render: () => {
+    const manyUsers: UserData[] = Array.from({ length: 50 }, (_, i) => ({
+      id: `user-${i + 1}`,
+      email: `user${i + 1}@example.com`,
+      displayName: `User ${i + 1}`,
+      firstName: `First${i + 1}`,
+      lastName: `Last${i + 1}`,
+      role: (['admin', 'moderator', 'user', 'guest'] as UserRole[])[i % 4],
+      status: (['active', 'inactive', 'pending', 'banned'] as UserStatus[])[i % 4],
+      createdAt: new Date(Date.now() - Math.random() * 1000 * 60 * 60 * 24 * 365),
+      lastLogin: Math.random() > 0.3 ? new Date(Date.now() - Math.random() * 1000 * 60 * 60 * 24 * 30) : undefined,
+    }))
+
+    return (
+      <div className="p-6">
+        <WakaUserManagement
+          users={manyUsers}
+          onSearchChange={(query) => console.log('Search:', query)}
+          onRoleFilterChange={(role) => console.log('Role filter:', role)}
+          onStatusFilterChange={(status) => console.log('Status filter:', status)}
+        />
+      </div>
+    )
+  },
+}
+
+export const Loading: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaUserManagement
+        users={[]}
+        loading
+        onSearchChange={(query) => console.log('Search:', query)}
+      />
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaUserManagement
+        users={[]}
+        onCreate={(user) => console.log('Create:', user)}
+        onSearchChange={(query) => console.log('Search:', query)}
+      />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaUserManagement
+        users={defaultUsers}
+        showCreateButton={false}
+        showBulkActions={false}
+        title="Utilisateurs"
+        description="Liste des utilisateurs (lecture seule)"
+      />
+    </div>
+  ),
+}
+
+export const CustomRoles: Story = {
+  render: () => {
+    const customRoles = [
+      { value: 'admin' as UserRole, label: 'Super Admin', color: 'destructive' },
+      { value: 'moderator' as UserRole, label: 'Content Manager', color: 'warning' },
+      { value: 'user' as UserRole, label: 'Standard User', color: 'default' },
+      { value: 'guest' as UserRole, label: 'Viewer', color: 'secondary' },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaUserManagement
+          users={defaultUsers}
+          roles={customRoles}
+          onRoleChange={(userId, role) => console.log('Role change:', userId, role)}
+          onSearchChange={(query) => console.log('Search:', query)}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [users, setUsers] = React.useState<UserData[]>(defaultUsers)
+    const [selectedUsers, setSelectedUsers] = React.useState<string[]>([])
+    const [searchQuery, setSearchQuery] = React.useState('')
+    const [roleFilter, setRoleFilter] = React.useState<UserRole | 'all'>('all')
+    const [statusFilter, setStatusFilter] = React.useState<UserStatus | 'all'>('all')
+    const [loading, setLoading] = React.useState(false)
+    const [actionLoading, setActionLoading] = React.useState(false)
+
+    const handleCreate = async (data: UserFormData) => {
+      setActionLoading(true)
+      await new Promise((r) => setTimeout(r, 1000))
+      const newUser: UserData = {
+        id: `user-${Date.now()}`,
+        ...data,
+        createdAt: new Date(),
+      }
+      setUsers((prev) => [...prev, newUser])
+      setActionLoading(false)
+    }
+
+    const handleEdit = async (userId: string, data: Partial<UserFormData>) => {
+      setActionLoading(true)
+      await new Promise((r) => setTimeout(r, 1000))
+      setUsers((prev) =>
+        prev.map((u) => (u.id === userId ? { ...u, ...data } : u))
+      )
+      setActionLoading(false)
+    }
+
+    const handleDelete = async (userId: string) => {
+      setActionLoading(true)
+      await new Promise((r) => setTimeout(r, 500))
+      setUsers((prev) => prev.filter((u) => u.id !== userId))
+      setActionLoading(false)
+    }
+
+    const handleBulkDelete = async (userIds: string[]) => {
+      setActionLoading(true)
+      await new Promise((r) => setTimeout(r, 500))
+      setUsers((prev) => prev.filter((u) => !userIds.includes(u.id)))
+      setSelectedUsers([])
+      setActionLoading(false)
+    }
+
+    const handleRefresh = async () => {
+      setLoading(true)
+      await new Promise((r) => setTimeout(r, 1500))
+      setLoading(false)
+    }
+
+    return (
+      <div className="p-6">
+        <WakaUserManagement
+          users={users}
+          permissions={defaultPermissions}
+          selectedUsers={selectedUsers}
+          onSelectionChange={setSelectedUsers}
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          roleFilter={roleFilter}
+          onRoleFilterChange={setRoleFilter}
+          statusFilter={statusFilter}
+          onStatusFilterChange={setStatusFilter}
+          onCreate={handleCreate}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+          onBulkDelete={handleBulkDelete}
+          onRoleChange={(userId, role) => handleEdit(userId, { role })}
+          onStatusChange={(userId, status) => handleEdit(userId, { status })}
+          onResetPassword={(userId) => alert(`Reset password for ${userId}`)}
+          onRefresh={handleRefresh}
+          onExport={() => alert('Exporting...')}
+          loading={loading}
+          actionLoading={actionLoading}
+        />
+      </div>
+    )
+  },
+}
+
+export const FilteredByRole: Story = {
+  render: () => {
+    const [roleFilter, setRoleFilter] = React.useState<UserRole | 'all'>('admin')
+
+    return (
+      <div className="p-6">
+        <WakaUserManagement
+          users={defaultUsers}
+          roleFilter={roleFilter}
+          onRoleFilterChange={setRoleFilter}
+          onSearchChange={(query) => console.log('Search:', query)}
+          title="Administrateurs"
+          description="Utilisateurs avec le rôle admin"
+        />
+      </div>
+    )
+  },
+}
+
+export const FilteredByStatus: Story = {
+  render: () => {
+    const [statusFilter, setStatusFilter] = React.useState<UserStatus | 'all'>('pending')
+
+    return (
+      <div className="p-6">
+        <WakaUserManagement
+          users={defaultUsers}
+          statusFilter={statusFilter}
+          onStatusFilterChange={setStatusFilter}
+          onSearchChange={(query) => console.log('Search:', query)}
+          title="Utilisateurs en attente"
+          description="Comptes nécessitant une activation"
+        />
+      </div>
+    )
+  },
+}
+
+export const AdminPanel: Story = {
+  render: () => {
+    const adminUsers: UserData[] = [
+      {
+        id: '1',
+        email: 'admin@company.com',
+        displayName: 'Admin Principal',
+        firstName: 'Admin',
+        lastName: 'Principal',
+        avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Admin',
+        role: 'admin',
+        status: 'active',
+        createdAt: new Date('2022-01-01'),
+        lastLogin: new Date(),
+      },
+      {
+        id: '2',
+        email: 'sarah@company.com',
+        displayName: 'Sarah Manager',
+        firstName: 'Sarah',
+        lastName: 'Manager',
+        avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah',
+        role: 'moderator',
+        status: 'active',
+        createdAt: new Date('2023-03-15'),
+        lastLogin: new Date(Date.now() - 1000 * 60 * 60 * 2),
+      },
+      {
+        id: '3',
+        email: 'john@company.com',
+        displayName: 'John Developer',
+        firstName: 'John',
+        lastName: 'Developer',
+        avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=John',
+        role: 'user',
+        status: 'active',
+        createdAt: new Date('2023-06-01'),
+        lastLogin: new Date(Date.now() - 1000 * 60 * 60 * 24),
+      },
+      {
+        id: '4',
+        email: 'new.hire@company.com',
+        displayName: 'New Hire',
+        firstName: 'New',
+        lastName: 'Hire',
+        role: 'user',
+        status: 'pending',
+        createdAt: new Date(),
+      },
+      {
+        id: '5',
+        email: 'contractor@external.com',
+        displayName: 'External Contractor',
+        firstName: 'External',
+        lastName: 'Contractor',
+        role: 'guest',
+        status: 'active',
+        createdAt: new Date('2023-09-01'),
+        lastLogin: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7),
+      },
+    ]
+
+    const extendedPermissions: UserPermission[] = [
+      { id: 'read', name: 'Lecture', description: 'Accès en lecture aux ressources', category: 'Base' },
+      { id: 'write', name: 'Écriture', description: 'Création et modification', category: 'Base' },
+      { id: 'delete', name: 'Suppression', description: 'Suppression de ressources', category: 'Base' },
+      { id: 'users:read', name: 'Voir utilisateurs', description: 'Liste des utilisateurs', category: 'Utilisateurs' },
+      { id: 'users:write', name: 'Gérer utilisateurs', description: 'Créer et modifier', category: 'Utilisateurs' },
+      { id: 'users:delete', name: 'Supprimer utilisateurs', description: 'Supprimer des comptes', category: 'Utilisateurs' },
+      { id: 'settings:read', name: 'Voir paramètres', description: 'Accès aux paramètres', category: 'Admin' },
+      { id: 'settings:write', name: 'Modifier paramètres', description: 'Changer les paramètres', category: 'Admin' },
+      { id: 'billing', name: 'Facturation', description: 'Gestion de la facturation', category: 'Admin' },
+    ]
+
+    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">
+            <div>
+              <h1 className="font-bold text-xl">Admin Panel</h1>
+              <p className="text-sm text-muted-foreground">Company Dashboard</p>
+            </div>
+            <nav className="flex gap-4 text-sm">
+              <a href="#" className="text-muted-foreground hover:text-foreground">Dashboard</a>
+              <a href="#" className="text-foreground font-medium">Users</a>
+              <a href="#" className="text-muted-foreground hover:text-foreground">Settings</a>
+            </nav>
+          </div>
+        </header>
+        <main className="p-6">
+          <WakaUserManagement
+            users={adminUsers}
+            permissions={extendedPermissions}
+            onSearchChange={(query) => console.log('Search:', query)}
+            onRoleFilterChange={(role) => console.log('Role filter:', role)}
+            onStatusFilterChange={(status) => console.log('Status filter:', status)}
+            onCreate={(user) => console.log('Create:', user)}
+            onEdit={(userId, data) => console.log('Edit:', userId, data)}
+            onDelete={(userId) => console.log('Delete:', userId)}
+            onRoleChange={(userId, role) => console.log('Role change:', userId, role)}
+            onStatusChange={(userId, status) => console.log('Status change:', userId, status)}
+            onResetPassword={(userId) => console.log('Reset password:', userId)}
+            onRefresh={() => console.log('Refresh')}
+            onExport={() => console.log('Export')}
+            title="Team Members"
+            description="Manage your organization's users and their permissions."
+          />
+        </main>
+      </div>
+    )
+  },
+}