@wakastellar/ui 4.0.0 → 4.1.1

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

@@ -1,424 +1,82 @@
-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'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { WakaUserManagement } from './index'
+import type { UserRecord, RoleDefinition } from '../_shared/identity'
+
+const roles: RoleDefinition[] = [
+  { id: 'admin', label: 'Administrateur' },
+  { id: 'member', label: 'Membre' },
+  { id: 'viewer', label: 'Lecteur' },
+]
+
+const users: UserRecord[] = [
+  {
+    id: 'u1',
+    email: 'alice.martin@example.com',
+    firstName: 'Alice',
+    lastName: 'Martin',
+    roleId: 'admin',
+    status: 'active',
+    lastLoginAt: new Date(2026, 4, 20),
+  },
+  {
+    id: 'u2',
+    email: 'bob.dupont@example.com',
+    firstName: 'Bob',
+    lastName: 'Dupont',
+    roleId: 'member',
+    status: 'invited',
+  },
+  {
+    id: 'u3',
+    email: 'claire.petit@example.com',
+    firstName: 'Claire',
+    lastName: 'Petit',
+    roleId: 'viewer',
+    status: 'suspended',
+    lastLoginAt: new Date(2026, 3, 5),
+  },
+]
 
 const meta: Meta<typeof WakaUserManagement> = {
-  title: 'Blocks/UserManagement',
+  title: 'Blocks/Identity/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',
-    },
-  },
+  parameters: { layout: 'fullscreen' },
 }
-
 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>
-    )
+  args: {
+    users,
+    roles,
+    onInvite: async (p) => console.log('invite', p),
+    onEditUser: async (u, p) => console.log('edit', u.id, p),
+    onDeleteUser: async (u) => console.log('delete', u.id),
+    onChangeRole: async (id, r) => console.log('change role', id, r),
+    onToggleStatus: async (id, a) => console.log('toggle', id, a),
   },
-}
-
-export const Loading: Story = {
-  render: () => (
-    <div className="p-6">
-      <WakaUserManagement
-        users={[]}
-        loading
-        onSearchChange={(query) => console.log('Search:', query)}
-      />
+  render: (args) => (
+    <div className="h-screen">
+      <WakaUserManagement {...args} />
     </div>
   ),
 }
 
 export const Empty: Story = {
-  render: () => (
-    <div className="p-6">
-      <WakaUserManagement
-        users={[]}
-        onCreate={(user) => console.log('Create:', user)}
-        onSearchChange={(query) => console.log('Search:', query)}
-      />
+  args: { users: [], roles },
+  render: (args) => (
+    <div className="h-screen">
+      <WakaUserManagement {...args} />
     </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)"
-      />
+export const Loading: Story = {
+  args: { users: [], roles, isLoading: true },
+  render: (args) => (
+    <div className="h-screen">
+      <WakaUserManagement {...args} />
     </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>
-    )
-  },
-}
-
-/**
- * Playground — generated to make the Storybook Controls panel functional.
- * Exposes a default arg set wired to the component via {...args}.
- */
-export const Playground: Story = {
-  args: {
-    showBulkActions: false,
-    showCreateButton: false,
-    loading: false,
-  },
-  render: (args) => <WakaUserManagement {...args} />,
-}

package/src/blocks/user-management/WakaUserManagement.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Blocks/Identity/UserManagement/Docs" />
+
+# WakaUserManagement
+
+Tableau des utilisateurs d'un tenant avec invitation, édition et révocation. Le bloc est 100% controllé — il n'effectue aucun appel réseau lui-même. Toutes les actions remontent via callbacks (`onInvite`, `onEditUser`, etc.).
+
+## Pattern Push Panel
+
+L'invitation et l'édition n'ouvrent pas une modale en overlay : un panneau latéral droit (520px par défaut) pousse le tableau vers la gauche. Sous le breakpoint `md`, le panneau bascule automatiquement en `Sheet` overlay.
+
+## Usage
+
+```tsx
+import { WakaUserManagement } from '@wakastellar/ui'
+
+<WakaUserManagement
+  users={users}
+  roles={roles}
+  onInvite={async (payload) => api.invite(payload)}
+  onEditUser={async (user, patch) => api.updateUser(user.id, patch)}
+  onDeleteUser={async (user) => api.deleteUser(user.id)}
+  onChangeRole={async (userId, roleId) => api.setRole(userId, roleId)}
+  onToggleStatus={async (userId, active) => api.setActive(userId, active)}
+/>
+```
+
+## Notes
+
+- Le bloc doit vivre dans un container avec hauteur explicite (ex: `h-screen`) pour que le scroll de la table fonctionne.
+- Les `RoleDefinition.id` doivent matcher les `UserRecord.roleId`.