@wakastellar/ui 4.0.0 → 4.1.1

package/src/components/DataTable/__tests__/useDataTableAdvanced.test.ts

@@ -1,455 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest"
-import { renderHook, act } from "@testing-library/react"
-import { useDataTableAdvanced } from "../../hooks/useDataTableAdvanced"
-
-// Mock localStorage
-const localStorageMock = {
-  getItem: vi.fn(),
-  setItem: vi.fn(),
-  removeItem: vi.fn(),
-  clear: vi.fn(),
-}
-Object.defineProperty(window, "localStorage", {
-  value: localStorageMock,
-})
-
-// Mock des fonctions de persistance
-vi.mock("../utils", () => ({
-  loadTableState: vi.fn(() => null),
-  saveTableState: vi.fn(),
-  globalFilterFn: vi.fn(),
-}))
-
-describe("useDataTableAdvanced", () => {
-  const mockData = [
-    { id: 1, name: "John Doe", email: "john@example.com" },
-    { id: 2, name: "Jane Smith", email: "jane@example.com" },
-  ]
-
-  const mockColumns = [
-    {
-      accessorKey: "name",
-      header: "Name",
-    },
-    {
-      accessorKey: "email",
-      header: "Email",
-    },
-  ]
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    localStorageMock.getItem.mockReturnValue(null)
-  })
-
-  it("should initialize with default state", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    expect(result.current.sorting).toEqual([])
-    expect(result.current.columnFilters).toEqual([])
-    expect(result.current.columnVisibility).toEqual({})
-    expect(result.current.columnOrder).toEqual([])
-    expect(result.current.expanded).toEqual({})
-    expect(result.current.grouping).toEqual([])
-    expect(result.current.rowSelection).toEqual({})
-    expect(result.current.globalFilter).toBe("")
-    expect(result.current.pagination).toEqual({
-      pageIndex: 0,
-      pageSize: 10,
-    })
-  })
-
-  it("should handle sorting changes", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    act(() => {
-      result.current.setSorting([{ id: "name", desc: false }])
-    })
-
-    expect(result.current.sorting).toEqual([{ id: "name", desc: false }])
-  })
-
-  it("should handle column filter changes", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    act(() => {
-      result.current.setColumnFilters([{ id: "name", value: "John" }])
-    })
-
-    expect(result.current.columnFilters).toEqual([{ id: "name", value: "John" }])
-  })
-
-  it("should handle column visibility changes", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    act(() => {
-      result.current.setColumnVisibility({ name: false })
-    })
-
-    expect(result.current.columnVisibility).toEqual({ name: false })
-  })
-
-  it("should handle column order changes", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    act(() => {
-      result.current.setColumnOrder(["email", "name"])
-    })
-
-    expect(result.current.columnOrder).toEqual(["email", "name"])
-  })
-
-  it("should handle expansion changes", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    act(() => {
-      result.current.setExpanded({ "row-1": true })
-    })
-
-    expect(result.current.expanded).toEqual({ "row-1": true })
-  })
-
-  it("should handle grouping changes", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    act(() => {
-      result.current.setGrouping(["name"])
-    })
-
-    expect(result.current.grouping).toEqual(["name"])
-  })
-
-  it("should handle row selection changes", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    act(() => {
-      result.current.setRowSelection({ "row-1": true })
-    })
-
-    expect(result.current.rowSelection).toEqual({ "row-1": true })
-  })
-
-  it("should handle global filter changes", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    act(() => {
-      result.current.setGlobalFilter("test")
-    })
-
-    expect(result.current.globalFilter).toBe("test")
-  })
-
-  it("should handle pagination changes", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    act(() => {
-      result.current.setPagination({ pageIndex: 1, pageSize: 20 })
-    })
-
-    expect(result.current.pagination).toEqual({ pageIndex: 1, pageSize: 20 })
-  })
-
-  it("should reset filters", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    // Set some filters first
-    act(() => {
-      result.current.setColumnFilters([{ id: "name", value: "John" }])
-      result.current.setGlobalFilter("test")
-    })
-
-    // Reset filters
-    act(() => {
-      result.current.resetFilters()
-    })
-
-    expect(result.current.columnFilters).toEqual([])
-    expect(result.current.globalFilter).toBe("")
-  })
-
-  it("should reset selection", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    // Set some selection first
-    act(() => {
-      result.current.setRowSelection({ "row-1": true })
-    })
-
-    // Reset selection
-    act(() => {
-      result.current.resetSelection()
-    })
-
-    expect(result.current.rowSelection).toEqual({})
-  })
-
-  it("should reset all state", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    // Set some state first
-    act(() => {
-      result.current.setSorting([{ id: "name", desc: false }])
-      result.current.setColumnFilters([{ id: "name", value: "John" }])
-      result.current.setColumnVisibility({ name: false })
-      result.current.setColumnOrder(["email", "name"])
-      result.current.setExpanded({ "row-1": true })
-      result.current.setGrouping(["name"])
-      result.current.setRowSelection({ "row-1": true })
-      result.current.setGlobalFilter("test")
-      result.current.setPagination({ pageIndex: 1, pageSize: 20 })
-    })
-
-    // Reset all
-    act(() => {
-      result.current.resetAll()
-    })
-
-    expect(result.current.sorting).toEqual([])
-    expect(result.current.columnFilters).toEqual([])
-    expect(result.current.columnVisibility).toEqual({})
-    expect(result.current.columnOrder).toEqual([])
-    expect(result.current.expanded).toEqual({})
-    expect(result.current.grouping).toEqual([])
-    expect(result.current.rowSelection).toEqual({})
-    expect(result.current.globalFilter).toBe("")
-    expect(result.current.pagination).toEqual({ pageIndex: 0, pageSize: 10 })
-  })
-
-  it("should handle grouping toggle", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    act(() => {
-      result.current.toggleGrouping("name")
-    })
-
-    expect(result.current.grouping).toEqual(["name"])
-
-    act(() => {
-      result.current.toggleGrouping("name")
-    })
-
-    expect(result.current.grouping).toEqual([])
-  })
-
-  it("should handle clear grouping", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    // Set some grouping first
-    act(() => {
-      result.current.setGrouping(["name", "email"])
-    })
-
-    // Clear grouping
-    act(() => {
-      result.current.clearGrouping()
-    })
-
-    expect(result.current.grouping).toEqual([])
-  })
-
-  it("should handle row expansion toggle", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    act(() => {
-      result.current.toggleRowExpansion("row-1")
-    })
-
-    expect(result.current.expanded).toEqual({ "row-1": true })
-
-    act(() => {
-      result.current.toggleRowExpansion("row-1")
-    })
-
-    expect(result.current.expanded).toEqual({ "row-1": false })
-  })
-
-  it("should handle expand all", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    act(() => {
-      result.current.expandAll()
-    })
-
-    // Should expand all rows
-    expect(result.current.expanded).toEqual({
-      "row-1": true,
-      "row-2": true,
-    })
-  })
-
-  it("should handle collapse all", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    // Set some expansion first
-    act(() => {
-      result.current.setExpanded({ "row-1": true, "row-2": true })
-    })
-
-    // Collapse all
-    act(() => {
-      result.current.collapseAll()
-    })
-
-    expect(result.current.expanded).toEqual({})
-  })
-
-  it("should export data", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    const exportedData = result.current.exportData()
-    expect(exportedData).toEqual(mockData)
-  })
-
-  it("should get grouped data", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    const groupedData = result.current.getGroupedData()
-    expect(groupedData).toEqual(mockData)
-  })
-
-  it("should get expanded data", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-      })
-    )
-
-    const expandedData = result.current.getExpandedData()
-    expect(expandedData).toEqual(mockData)
-  })
-
-  it("should handle server-side pagination", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-        pagination: {
-          mode: "server",
-          currentPage: 0,
-          totalItems: 100,
-          pageSize: 10,
-        },
-      })
-    )
-
-    expect(result.current.pagination).toEqual({
-      pageIndex: 0,
-      pageSize: 10,
-    })
-  })
-
-  it("should handle performance options", () => {
-    const { result } = renderHook(() =>
-      useDataTableAdvanced({
-        data: mockData,
-        columns: mockColumns,
-        performance: {
-          filterDebounceMs: 500,
-        },
-      })
-    )
-
-    expect(result.current).toBeDefined()
-  })
-})

package/src/components/DataTable/examples/EditExample.tsx

@@ -1,166 +0,0 @@
-import React from "react"
-import { ColumnDef } from "@tanstack/react-table"
-import { DataTable } from "../DataTable"
-
-interface User {
-  id: string
-  name: string
-  email: string
-  age: number
-  role: string
-  active: boolean
-  createdAt: string
-}
-
-const sampleData: User[] = [
-  {
-    id: "1",
-    name: "John Doe",
-    email: "john@example.com",
-    age: 30,
-    role: "admin",
-    active: true,
-    createdAt: "2023-01-15",
-  },
-  {
-    id: "2",
-    name: "Jane Smith",
-    email: "jane@example.com",
-    age: 25,
-    role: "user",
-    active: false,
-    createdAt: "2023-02-20",
-  },
-]
-
-const columns: ColumnDef<User>[] = [
-  {
-    accessorKey: "name",
-    header: "Nom",
-  },
-  {
-    accessorKey: "email",
-    header: "Email",
-  },
-  {
-    accessorKey: "age",
-    header: "Âge",
-  },
-  {
-    accessorKey: "role",
-    header: "Rôle",
-  },
-  {
-    accessorKey: "active",
-    header: "Actif",
-  },
-  {
-    accessorKey: "createdAt",
-    header: "Créé le",
-  },
-]
-
-export function EditExample() {
-  const handleSave = async (rowId: string, data: Partial<User>) => {
-    console.log("Sauvegarde:", rowId, data)
-    // Ici vous feriez l'appel API pour sauvegarder
-    await new Promise(resolve => setTimeout(resolve, 1000)) // Simulation
-  }
-
-  const handleCancel = (rowId: string, originalData: User) => {
-    console.log("Annulation:", rowId, originalData)
-  }
-
-  const validateField = (field: keyof User, value: any): string | null => {
-    if (field === "email" && value && !value.includes("@")) {
-      return "Email invalide"
-    }
-    if (field === "age" && value && (value < 0 || value > 120)) {
-      return "Âge doit être entre 0 et 120"
-    }
-    return null
-  }
-
-  const editConfig = {
-    editableColumns: [
-      {
-        field: "name" as keyof User,
-        config: {
-          type: "text" as const,
-          placeholder: "Entrez le nom",
-          required: true,
-        },
-      },
-      {
-        field: "email" as keyof User,
-        config: {
-          type: "email" as const,
-          placeholder: "Entrez l'email",
-          required: true,
-        },
-        validate: (value: any) => {
-          if (!value || !value.includes("@")) {
-            return "Email invalide"
-          }
-          return null
-        },
-      },
-      {
-        field: "age" as keyof User,
-        config: {
-          type: "number" as const,
-          min: 0,
-          max: 120,
-          step: 1,
-        },
-      },
-      {
-        field: "role" as keyof User,
-        config: {
-          type: "select" as const,
-          options: [
-            { value: "admin", label: "Administrateur" },
-            { value: "user", label: "Utilisateur" },
-            { value: "moderator", label: "Modérateur" },
-          ],
-        },
-      },
-      {
-        field: "active" as keyof User,
-        config: {
-          type: "switch" as const,
-        },
-      },
-      {
-        field: "createdAt" as keyof User,
-        config: {
-          type: "date" as const,
-        },
-      },
-    ],
-    onSave: handleSave,
-    onCancel: handleCancel,
-    autoSave: false, // Désactiver l'auto-save pour cet exemple
-  }
-
-  return (
-    <div className="space-y-4">
-      <div>
-        <h3 className="text-lg font-semibold">Exemple d'édition de DataTable</h3>
-        <p className="text-sm text-muted-foreground">
-          Cliquez sur "Edit" pour modifier une ligne, puis "Save" pour sauvegarder ou "Cancel" pour annuler.
-        </p>
-      </div>
-      
-      <DataTable
-        data={sampleData}
-        columns={columns}
-        edit={editConfig}
-        pagination={{ pageSize: 10 }}
-        selection
-      />
-    </div>
-  )
-}
-
-export default EditExample