@wakastellar/ui 2.4.0 → 3.1.0

package/dist/useDataTableImport-S_hhA5Wo.js

@@ -1,9 +0,0 @@
-"use strict";var j=Object.create;var C=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var O=(f,n,w,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let h of X(n))!F.call(f,h)&&h!==w&&C(f,h,{get:()=>n[h],enumerable:!(l=D(n,h))||l.enumerable});return f};var g=(f,n,w)=>(w=f!=null?j(K(f)):{},O(n||!f||!f.__esModule?C(w,"default",{value:f,enumerable:!0}):w,f));const d=require("react");function R({data:f,columns:n,exportConfig:w}){const l=d.useMemo(()=>({formats:["csv","xlsx","json"],filename:"export",includeHeaders:!0,...w}),[w]),h=d.useCallback((e,s)=>{if(!e.length)return;const r=n.filter(a=>a.accessorKey||a.id).map(a=>a.header||a.accessorKey||a.id).join(","),c=e.map(a=>n.filter(o=>o.accessorKey||o.id).map(o=>{const m=o.accessorKey?a[o.accessorKey]:a[o.id],E=o.formatter?o.formatter(m):m,L=String(E||"");return L.includes(",")||L.includes('"')||L.includes(`
-`)?`"${L.replace(/"/g,'""')}"`:L}).join(",")),t=[r,...c].join(`
-`),u=new Blob([t],{type:"text/csv;charset=utf-8;"}),p=document.createElement("a");p.href=URL.createObjectURL(u),p.download=`${s||l.filename}.csv`,p.click(),URL.revokeObjectURL(p.href)},[n,l.filename]),x=d.useCallback((e,s)=>{const r=JSON.stringify(e,null,2),c=new Blob([r],{type:"application/json"}),t=document.createElement("a");t.href=URL.createObjectURL(c),t.download=`${s||l.filename}.json`,t.click(),URL.revokeObjectURL(t.href)},[l.filename]),k=d.useCallback(async(e,s)=>{try{if(typeof window>"u")throw new Error("XLSX export not available in server environment");const r=await import("xlsx"),t=[n.filter(a=>a.accessorKey||a.id).map(a=>a.header||a.accessorKey||a.id),...e.map(a=>n.filter(o=>o.accessorKey||o.id).map(o=>{const m=o.accessorKey?a[o.accessorKey]:a[o.id];return o.formatter?o.formatter(m):m}))],u=r.utils.aoa_to_sheet(t),p=r.utils.book_new();r.utils.book_append_sheet(p,u,"Sheet1"),r.writeFile(p,`${s||l.filename}.xlsx`)}catch(r){throw console.error("Erreur lors de l'export XLSX:",r),new Error("La librairie xlsx n'est pas disponible")}},[n,l.filename]),v=d.useCallback(async(e,s)=>{try{if(typeof window>"u")throw new Error("PDF export not available in server environment");const r=await import("jspdf"),c=await import("jspdf-autotable"),t=new r.default,u=n.filter(a=>a.accessorKey||a.id).map(a=>a.header||a.accessorKey||a.id),p=e.map(a=>n.filter(o=>o.accessorKey||o.id).map(o=>{const m=o.accessorKey?a[o.accessorKey]:a[o.id];return o.formatter?o.formatter(m):m}));t.autoTable({head:[u],body:p,startY:20,styles:{fontSize:8},headStyles:{fillColor:[66,139,202]}}),t.save(`${s||l.filename}.pdf`)}catch(r){throw console.error("Erreur lors de l'export PDF:",r),new Error("Les librairies jsPDF et jspdf-autotable ne sont pas disponibles")}},[n,l.filename]),y=d.useCallback((e,s)=>{const r=n.filter(p=>p.accessorKey||p.id).map(p=>p.accessorKey||p.id);let c=`<?xml version="1.0" encoding="UTF-8"?>
-<data>
-`;e.forEach((p,a)=>{c+=`  <row id="${a}">
-`,r.forEach(o=>{const m=p[o],E=String(m||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");c+=`    <${o}>${E}</${o}>
-`}),c+=`  </row>
-`}),c+="</data>";const t=new Blob([c],{type:"application/xml"}),u=document.createElement("a");u.href=URL.createObjectURL(t),u.download=`${s||l.filename}.xml`,u.click(),URL.revokeObjectURL(u.href)},[n,l.filename]),b=d.useCallback(async(e,s,r)=>{const c=s||f,t=r||l.filename;if(l.onExport){l.onExport(c,e);return}switch(e.toLowerCase()){case"csv":h(c,t);break;case"json":x(c,t);break;case"xlsx":await k(c,t);break;case"pdf":await v(c,t);break;case"xml":y(c,t);break;default:throw new Error(`Format d'export non supporté: ${e}`)}},[f,l,h,x,k,v,y]),S=d.useCallback(async e=>b(e),[b]),i=d.useCallback(async(e,s)=>b(e,s),[b]);return{exportData:b,exportAll:S,exportSelected:i,supportedFormats:l.formats,isExportSupported:e=>l.formats.includes(e)}}function U({importConfig:f}){const n=d.useMemo(()=>({accept:".csv,.xlsx,.json,.xml",...f}),[f]),w=d.useCallback((i,e=",")=>{const s=i.split(`
-`).filter(t=>t.trim());if(s.length===0)return[];const r=s[0].split(e).map(t=>t.trim().replace(/"/g,""));return s.slice(1).map(t=>{const u=t.split(e).map(a=>a.trim().replace(/"/g,"")),p={};return r.forEach((a,o)=>{p[a]=u[o]||""}),p})},[]),l=d.useCallback(i=>{try{const e=JSON.parse(i);return Array.isArray(e)?e:[e]}catch{throw new Error("Format JSON invalide")}},[]),h=d.useCallback(i=>{try{const r=new DOMParser().parseFromString(i,"text/xml").querySelectorAll("row");return Array.from(r).map(c=>{const t={};return Array.from(c.children).forEach(u=>{t[u.tagName]=u.textContent||""}),t})}catch{throw new Error("Format XML invalide")}},[]),x=d.useCallback(async i=>{try{if(typeof window>"u")throw new Error("XLSX parsing not available in server environment");const e=await import("xlsx"),s=await i.arrayBuffer(),r=e.read(s,{type:"array"}),c=r.SheetNames[0],t=r.Sheets[c],u=e.utils.sheet_to_json(t,{header:1});if(u.length===0)return[];const p=u[0];return u.slice(1).map(a=>{const o={};return p.forEach((m,E)=>{o[m]=a[E]||""}),o})}catch{throw new Error("Erreur lors du parsing du fichier XLSX")}},[]),k=d.useCallback(i=>n.validate?n.validate(i):Array.isArray(i)?i.length===0?{valid:!1,errors:["Aucune donnée trouvée"]}:{valid:!0,errors:[]}:{valid:!1,errors:["Les données doivent être un tableau"]},[n.validate]),v=d.useCallback(i=>n.columnMapping?i.map(e=>{const s={};return Object.entries(n.columnMapping).forEach(([r,c])=>{e[r]!==void 0&&(s[c]=e[r])}),s}):i,[n.columnMapping]),y=d.useCallback(async i=>{const e=i.name.split(".").pop()?.toLowerCase();let s=[];try{const r=await i.text();switch(e){case"csv":s=w(r,n.parseOptions?.csv?.delimiter);break;case"json":s=l(r);break;case"xml":s=h(r);break;case"xlsx":s=await x(i);break;default:throw new Error(`Format de fichier non supporté: ${e}`)}const c=k(s);if(!c.valid)throw new Error(`Données invalides: ${c.errors.join(", ")}`);const t=v(s);return n.onImport&&n.onImport(t),t}catch(r){throw new Error(`Erreur lors de l'import: ${r instanceof Error?r.message:"Erreur inconnue"}`)}},[n,w,l,h,x,k,v]),b=d.useCallback(()=>{const i=document.createElement("input");return i.type="file",i.accept=n.accept,i.multiple=!1,i},[n.accept]),S=d.useCallback(()=>new Promise((i,e)=>{const s=b();s.onchange=async r=>{const c=r.target.files?.[0];if(!c){e(new Error("Aucun fichier sélectionné"));return}try{const t=await y(c);i(t)}catch(t){e(t)}},s.click()}),[b,y]);return{importData:y,importWithUI:S,supportedFormats:n.accept?.split(",")||[],isFormatSupported:i=>{const e=i.split(".").pop()?.toLowerCase();return n.accept?.includes(e||"")||!1}}}exports.useDataTableExport=R;exports.useDataTableImport=U;

package/src/components/DataTable/README.md

@@ -1,446 +0,0 @@
-# 📊 DataTable
-
-Composant de table de données ultra-complet basé sur **TanStack Table v8**, totalement configurable et typé.
-
-## ✨ Fonctionnalités
-
-- ✅ **Tri multi-colonnes** (client & serveur)
-- ✅ **Filtrage global et par colonne**
-- ✅ **Pagination** (client & serveur)
-- ✅ **Sélection multiple** avec checkbox
-- ✅ **Export** (CSV, JSON)
-- ✅ **Import** (CSV)
-- ✅ **Layouts multiples** (standard, card, compact, split, infinite)
-- ✅ **Variants visuels** (bordered, minimal, striped, glass)
-- ✅ **Densité ajustable** (comfortable, compact)
-- ✅ **Toolbar personnalisable** avec actions
-- ✅ **Virtualisation** pour grandes données
-- ✅ **Thème clair/sombre** via TweakCN
-- ✅ **i18n** complet
-- ✅ **Responsive** (mobile-first)
-- ✅ **Accessibilité** (a11y)
-- ✅ **TypeScript** 100%
-
-## 📦 Installation
-
-```bash
-pnpm add @wakastart/ui @tanstack/react-table
-```
-
-## 🚀 Utilisation de base
-
-```tsx
-import { DataTable } from "@wakastart/ui"
-import { ColumnDef } from "@tanstack/react-table"
-
-interface User {
-  id: string
-  name: string
-  email: string
-}
-
-const columns: ColumnDef<User>[] = [
-  {
-    accessorKey: "name",
-    header: "Name",
-  },
-  {
-    accessorKey: "email",
-    header: "Email",
-  },
-]
-
-const data: User[] = [
-  { id: "1", name: "John", email: "john@example.com" },
-  { id: "2", name: "Jane", email: "jane@example.com" },
-]
-
-function MyTable() {
-  return <DataTable data={data} columns={columns} />
-}
-```
-
-## 🎨 Exemples avancés
-
-### Table avec sélection et actions
-
-```tsx
-<DataTable
-  data={users}
-  columns={columns}
-  selection
-  toolbar={{
-    showSearch: true,
-    actions: [
-      {
-        id: "delete",
-        label: "Delete",
-        icon: <Trash />,
-        onClick: (selectedRows) => console.log(selectedRows),
-        requiresSelection: true,
-        variant: "destructive",
-      },
-    ],
-  }}
-  onSelectionChange={(selectedRows) => console.log(selectedRows)}
-/>
-```
-
-### Pagination serveur
-
-```tsx
-<DataTable
-  data={users}
-  columns={columns}
-  pagination={{
-    mode: "server",
-    currentPage: 0,
-    totalItems: 1000,
-    pageSize: 10,
-    onPageChange: (page) => fetchPage(page),
-    onPageSizeChange: (size) => setPageSize(size),
-  }}
-/>
-```
-
-### Export et Import
-
-```tsx
-<DataTable
-  data={users}
-  columns={columns}
-  enableExport
-  enableImport
-/>
-```
-
-### Layouts alternatifs
-
-```tsx
-<DataTable
-  data={users}
-  columns={columns}
-  layout="card" // ou "compact", "split", "infinite"
-  variant="glass" // ou "bordered", "minimal", "striped"
-  density="compact" // ou "comfortable"
-/>
-```
-
-### Header sticky
-
-```tsx
-<DataTable
-  data={users}
-  columns={columns}
-  headerSticky
-  virtualizationHeight={600}
-/>
-```
-
-### Filtres avancés avec autocomplete
-
-```tsx
-<DataTable
-  data={users}
-  columns={columns}
-  filterPosition="right" // ou "left", "top", "bottom", "modal"
-  filters={[
-    {
-      id: "name-filter",
-      label: "Nom",
-      type: "text",
-      column: "name",
-      placeholder: "Rechercher par nom...",
-    },
-    {
-      id: "role-filter",
-      label: "Rôle",
-      type: "multiselect",
-      column: "role",
-      placeholder: "Sélectionner des rôles...",
-    },
-    {
-      id: "status-filter",
-      label: "Statut",
-      type: "select",
-      column: "status",
-      options: [
-        { label: "Actif", value: "active" },
-        { label: "Inactif", value: "inactive" },
-      ],
-    },
-    {
-      id: "date-filter",
-      label: "Date de création",
-      type: "date",
-      column: "createdAt",
-    },
-    {
-      id: "age-filter",
-      label: "Âge",
-      type: "range",
-      column: "age",
-    },
-  ]}
-  onFiltersChange={(activeFilters) => console.log(activeFilters)}
-/>
-```
-
-**Caractéristiques des filtres** :
-- 🎯 **Bouton compact** : S'ouvre dans un panneau au clic (ne prend pas de place)
-- 🔍 **Autocomplete intelligent** : Suggestions automatiques basées sur les données de la colonne
-- 📝 **Types multiples** : text, select, multiselect, date, range
-- 📍 **Positions flexibles** :
-  - `top`/`bottom` : Popover compact (400px)
-  - `left`/`right` : Sheet latéral (400-540px)
-  - `modal` : Popover modal
-- ✅ **Gestion des filtres actifs** : Affichage et suppression facile des filtres appliqués
-- 🔧 **Opérateurs multiples** : contains, equals, startsWith, endsWith, in, notIn, between, etc.
-
-## 📚 Props
-
-### DataTableProps<TData>
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `data` | `TData[]` | **required** | Données à afficher |
-| `columns` | `ColumnDef<TData>[]` | **required** | Définition des colonnes |
-| `layout` | `DataTableLayout` | `"standard"` | Layout d'affichage |
-| `variant` | `DataTableVariant` | `"bordered"` | Variant visuel |
-| `density` | `DataTableDensity` | `"comfortable"` | Densité d'affichage |
-| `selection` | `boolean` | `false` | Activer la sélection |
-| `pagination` | `PaginationConfig` | `undefined` | Configuration pagination |
-| `toolbar` | `ToolbarConfig` | `undefined` | Configuration toolbar |
-| `filters` | `FilterConfig[]` | `undefined` | Configuration filtres |
-| `filterPosition` | `FilterPosition` | `"top"` | Position des filtres |
-| `loading` | `boolean` | `false` | État de chargement |
-| `error` | `string \| null` | `null` | Message d'erreur |
-| `emptyState` | `ReactNode` | `undefined` | État vide personnalisé |
-| `headerSticky` | `boolean` | `false` | Header fixe |
-| `enableExport` | `boolean \| ExportConfig` | `false` | Activer l'export |
-| `enableImport` | `boolean \| ImportConfig` | `false` | Activer l'import |
-| `enableVirtualization` | `boolean` | `false` | Activer virtualisation |
-| `onRowClick` | `(row: TData) => void` | `undefined` | Callback clic ligne |
-| `onSelectionChange` | `(rows: TData[]) => void` | `undefined` | Callback sélection |
-| `className` | `string` | `undefined` | Classe CSS |
-| `tableId` | `string` | `undefined` | ID pour persistance |
-
-### PaginationConfig
-
-```ts
-interface PaginationConfig {
-  mode?: "client" | "server"
-  pageSize?: number
-  pageSizeOptions?: number[]
-  currentPage?: number
-  totalItems?: number
-  onPageChange?: (page: number) => void
-  onPageSizeChange?: (size: number) => void
-}
-```
-
-### ToolbarConfig
-
-```ts
-interface ToolbarConfig {
-  actions?: TableAction[]
-  showSearch?: boolean
-  showColumnToggle?: boolean
-  showDensity?: boolean
-  showRefresh?: boolean
-  onRefresh?: () => void
-}
-```
-
-### TableAction
-
-```ts
-interface TableAction {
-  id: string
-  label: string
-  icon?: ReactNode
-  onClick: (selectedRows: TData[]) => void
-  requiresSelection?: boolean
-  variant?: "default" | "destructive" | "outline" | "ghost"
-  disabled?: boolean
-}
-```
-
-### FilterConfig
-
-```ts
-interface FilterConfig {
-  id: string
-  label: string
-  type: "text" | "select" | "multiselect" | "date" | "range"
-  column?: string
-  placeholder?: string
-  defaultValue?: any
-  options?: Array<{ label: string; value: string | number }>
-}
-```
-
-**Types de filtres** :
-- `text` : Champ texte avec autocomplete basé sur les valeurs de la colonne
-- `select` : Liste déroulante simple
-- `multiselect` : Sélection multiple avec checkboxes
-- `date` : Sélecteur de date
-- `range` : Plage numérique (min/max)
-
-## 🎛️ Hooks
-
-### useDataTable
-
-Hook principal pour gérer la logique du DataTable.
-
-```tsx
-const {
-  table,
-  sorting,
-  setSorting,
-  columnFilters,
-  setColumnFilters,
-  globalFilter,
-  setGlobalFilter,
-  selectedRows,
-  resetFilters,
-  exportData,
-} = useDataTable({
-  data,
-  columns,
-  pagination,
-  tableId,
-})
-```
-
-### useTableLayout
-
-Hook pour gérer le layout et la densité.
-
-```tsx
-const {
-  layout,
-  setLayout,
-  density,
-  setDensity,
-  toggleLayout,
-  toggleDensity,
-  isMobile,
-  densityClasses,
-} = useTableLayout("standard", "comfortable")
-```
-
-## 🌍 Internationalisation
-
-Le composant supporte l'i18n via `react-i18next`. Toutes les clés sont sous le namespace `datatable` :
-
-```json
-{
-  "datatable": {
-    "loading": "Chargement...",
-    "noData": "Aucune donnée",
-    "selectAll": "Tout sélectionner",
-    "pagination": {
-      "showing": "Affichage",
-      "to": "à",
-      "of": "sur",
-      "results": "résultats",
-      "rowsPerPage": "Lignes par page"
-    },
-    "toolbar": {
-      "search": "Rechercher...",
-      "selected": "sélectionnés",
-      "clear": "Effacer",
-      "export": "Exporter",
-      "columns": "Colonnes"
-    }
-  }
-}
-```
-
-## 🎨 Personnalisation
-
-### Styles personnalisés
-
-```tsx
-<DataTable
-  data={data}
-  columns={columns}
-  className="custom-table"
-/>
-```
-
-### Variant personnalisé
-
-Le composant utilise Tailwind CSS. Vous pouvez personnaliser via les variants :
-
-- `bordered` : bordures et coins arrondis
-- `minimal` : sans bordures
-- `striped` : lignes alternées
-- `glass` : effet glassmorphism
-
-## 🔧 Utilitaires
-
-### Export
-
-```ts
-import { exportToCSV, exportToJSON } from "@wakastart/ui"
-
-exportToCSV(data, "users.csv")
-exportToJSON(data, "users.json")
-```
-
-### Import
-
-```ts
-import { parseCSV } from "@wakastart/ui"
-
-const data = await parseCSV(file)
-```
-
-### Persistance
-
-```ts
-import { saveTableState, loadTableState } from "@wakastart/ui"
-
-saveTableState("my-table", state)
-const state = loadTableState("my-table")
-```
-
-## 🧪 Tests
-
-```tsx
-import { render, screen } from "@testing-library/react"
-import { DataTable } from "@wakastart/ui"
-
-test("renders table with data", () => {
-  render(<DataTable data={testData} columns={testColumns} />)
-  expect(screen.getByText("John")).toBeInTheDocument()
-})
-```
-
-## 📖 Documentation complète
-
-- [TanStack Table](https://tanstack.com/table/v8)
-- [WakaStart UI](https://ui.wakastart.com)
-- [Exemples de démo](/demo/app/datatable)
-
-## 📝 Changelog
-
-### v1.0.0 (2024-10-15)
-
-- 🎉 Initial release
-- ✨ Support complet de TanStack Table v8
-- 🎨 Layouts multiples
-- 🌍 i18n complet
-- 📊 Export/Import
-- 🎯 TypeScript strict
-
-## 🤝 Contribution
-
-Contributions bienvenues ! Voir [CONTRIBUTING.md](../../../CONTRIBUTING.md)
-
-## 📄 License
-
-MIT © WakaStart
-