@wakastellar/ui 1.0.12 → 2.1.0

package/src/components/DataTable/workers/exportWorker.ts

@@ -0,0 +1,213 @@
+/**
+ * Web Worker pour l'export de grandes tables
+ *
+ * Ce worker gère la conversion de données en différents formats (CSV, JSON, XML)
+ * dans un thread séparé pour éviter de bloquer l'interface utilisateur.
+ *
+ * @example
+ * // Utilisation via le hook useDataTableExport
+ * const { exportDataAsync } = useDataTableExport({ data, columns })
+ * await exportDataAsync('csv') // Utilise automatiquement le worker pour >1000 lignes
+ */
+
+export interface ExportWorkerMessage {
+  type: 'export'
+  format: 'csv' | 'json' | 'xml'
+  data: Record<string, unknown>[]
+  columns: {
+    key: string
+    header: string
+  }[]
+  filename: string
+}
+
+export interface ExportWorkerResponse {
+  type: 'success' | 'error' | 'progress'
+  content?: string
+  blob?: Blob
+  progress?: number
+  error?: string
+}
+
+// Fonction pour convertir en CSV
+function convertToCSV(
+  data: Record<string, unknown>[],
+  columns: { key: string; header: string }[]
+): string {
+  const headers = columns.map(col => col.header).join(',')
+
+  const rows = data.map(row => {
+    return columns
+      .map(col => {
+        const value = row[col.key]
+        const stringValue = String(value ?? '')
+        // Échapper les virgules, guillemets et sauts de ligne
+        if (stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n')) {
+          return `"${stringValue.replace(/"/g, '""')}"`
+        }
+        return stringValue
+      })
+      .join(',')
+  })
+
+  return [headers, ...rows].join('\n')
+}
+
+// Fonction pour convertir en JSON
+function convertToJSON(data: Record<string, unknown>[]): string {
+  return JSON.stringify(data, null, 2)
+}
+
+// Fonction pour convertir en XML
+function convertToXML(
+  data: Record<string, unknown>[],
+  columns: { key: string; header: string }[]
+): string {
+  let xmlContent = '<?xml version="1.0" encoding="UTF-8"?>\n<data>\n'
+
+  data.forEach((row, index) => {
+    xmlContent += `  <row id="${index}">\n`
+    columns.forEach(col => {
+      const value = row[col.key]
+      const stringValue = String(value ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+      xmlContent += `    <${col.key}>${stringValue}</${col.key}>\n`
+    })
+    xmlContent += '  </row>\n'
+  })
+
+  xmlContent += '</data>'
+  return xmlContent
+}
+
+// Fonction pour traiter les données par chunks et signaler la progression
+function processWithProgress(
+  data: Record<string, unknown>[],
+  columns: { key: string; header: string }[],
+  format: 'csv' | 'json' | 'xml',
+  onProgress: (progress: number) => void
+): string {
+  const CHUNK_SIZE = 1000
+  const totalRows = data.length
+  let result = ''
+
+  // Pour JSON, on ne peut pas faire de chunking
+  if (format === 'json') {
+    onProgress(50)
+    result = convertToJSON(data)
+    onProgress(100)
+    return result
+  }
+
+  // Pour CSV
+  if (format === 'csv') {
+    result = columns.map(col => col.header).join(',') + '\n'
+
+    for (let i = 0; i < totalRows; i += CHUNK_SIZE) {
+      const chunk = data.slice(i, Math.min(i + CHUNK_SIZE, totalRows))
+      const chunkRows = chunk.map(row => {
+        return columns
+          .map(col => {
+            const value = row[col.key]
+            const stringValue = String(value ?? '')
+            if (stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n')) {
+              return `"${stringValue.replace(/"/g, '""')}"`
+            }
+            return stringValue
+          })
+          .join(',')
+      })
+      result += chunkRows.join('\n') + (i + CHUNK_SIZE < totalRows ? '\n' : '')
+      onProgress(Math.round(((i + CHUNK_SIZE) / totalRows) * 100))
+    }
+
+    return result
+  }
+
+  // Pour XML
+  if (format === 'xml') {
+    result = '<?xml version="1.0" encoding="UTF-8"?>\n<data>\n'
+
+    for (let i = 0; i < totalRows; i += CHUNK_SIZE) {
+      const chunk = data.slice(i, Math.min(i + CHUNK_SIZE, totalRows))
+
+      chunk.forEach((row, idx) => {
+        result += `  <row id="${i + idx}">\n`
+        columns.forEach(col => {
+          const value = row[col.key]
+          const stringValue = String(value ?? '')
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+          result += `    <${col.key}>${stringValue}</${col.key}>\n`
+        })
+        result += '  </row>\n'
+      })
+
+      onProgress(Math.round(((i + CHUNK_SIZE) / totalRows) * 100))
+    }
+
+    result += '</data>'
+    return result
+  }
+
+  return result
+}
+
+// Handler du worker
+self.onmessage = function (e: MessageEvent<ExportWorkerMessage>) {
+  const { type, format, data, columns, filename } = e.data
+
+  if (type !== 'export') {
+    self.postMessage({
+      type: 'error',
+      error: `Unknown message type: ${type}`,
+    } as ExportWorkerResponse)
+    return
+  }
+
+  try {
+    // Reporter la progression
+    const onProgress = (progress: number) => {
+      self.postMessage({
+        type: 'progress',
+        progress,
+      } as ExportWorkerResponse)
+    }
+
+    // Convertir les données
+    const content = processWithProgress(data, columns, format, onProgress)
+
+    // Créer le blob approprié
+    let mimeType: string
+    switch (format) {
+      case 'csv':
+        mimeType = 'text/csv;charset=utf-8;'
+        break
+      case 'json':
+        mimeType = 'application/json'
+        break
+      case 'xml':
+        mimeType = 'application/xml'
+        break
+      default:
+        mimeType = 'text/plain'
+    }
+
+    // Envoyer la réponse
+    self.postMessage({
+      type: 'success',
+      content,
+    } as ExportWorkerResponse)
+  } catch (error) {
+    self.postMessage({
+      type: 'error',
+      error: error instanceof Error ? error.message : 'Unknown error during export',
+    } as ExportWorkerResponse)
+  }
+}
+
+// Export vide pour que le fichier soit reconnu comme un module
+export {}

package/src/components/accordion/index.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+import { cn } from "../../utils/cn"
+
+const Accordion: typeof AccordionPrimitive.Root = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+
+
+
+
+
+
+

package/src/components/alert/index.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../utils/cn"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
+

package/src/components/alert-dialog/index.tsx

@@ -0,0 +1,146 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { cn } from "../../utils/cn"
+
+const AlertDialog: typeof AlertDialogPrimitive.Root = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger: typeof AlertDialogPrimitive.Trigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal: typeof AlertDialogPrimitive.Portal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      "mt-2 inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-semibold ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
+
+
+
+
+
+
+

package/src/components/aspect-ratio/index.tsx

@@ -0,0 +1,12 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio: typeof AspectRatioPrimitive.Root = AspectRatioPrimitive.Root
+
+export { AspectRatio }
+
+
+
+
+
+
+

package/src/components/avatar/index.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { cn } from "../../utils/cn"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
+
+
+
+
+
+
+

package/src/components/badge/Badge.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Badge } from './index'
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A badge component for displaying status, labels, or counts.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'secondary', 'destructive', 'outline'],
+      description: 'The visual style of the badge',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Badge>
+
+export const Default: Story = {
+  args: {
+    children: 'Badge',
+    variant: 'default',
+  },
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+    </div>
+  ),
+}
+
+export const WithCount: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Badge>3</Badge>
+      <Badge variant="secondary">12</Badge>
+      <Badge variant="destructive">99+</Badge>
+    </div>
+  ),
+}
+
+export const AsStatus: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Badge className="bg-green-500 hover:bg-green-600">Active</Badge>
+      <Badge className="bg-yellow-500 hover:bg-yellow-600">Pending</Badge>
+      <Badge className="bg-red-500 hover:bg-red-600">Inactive</Badge>
+    </div>
+  ),
+}

package/src/components/badge/index.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../utils/cn"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
+