@wakastellar/ui 4.0.0-dev.0 → 4.0.0

package/dist/src/components/waka-charts/WakaBarChart.d.ts

@@ -1,12 +0,0 @@
-import { BarChartProps } from './types';
-/**
- * WakaBarChart - Graphique à barres
- */
-import * as React from "react";
-export interface WakaBarChartProps extends BarChartProps {
-}
-/**
- * Graphique à barres avec support multi-séries, empilé, et animations
- */
-export declare const WakaBarChart: React.ForwardRefExoticComponent<WakaBarChartProps & React.RefAttributes<HTMLDivElement>>;
-export default WakaBarChart;

package/dist/src/components/waka-charts/WakaChart.d.ts

@@ -1,17 +0,0 @@
-import { useRechartsLoader } from './hooks/useRechartsLoader';
-import { BaseChartProps } from './types';
-/**
- * WakaChart - Container de base pour les graphiques
- * Gère le chargement dynamique de Recharts et les états loading/error
- */
-import * as React from "react";
-export interface WakaChartProps extends Omit<BaseChartProps, "data"> {
-    /** Contenu du graphique (rendu par les composants enfants) */
-    children: (components: ReturnType<typeof useRechartsLoader>["components"]) => React.ReactNode;
-}
-/**
- * Container de base pour les graphiques
- * Gère le chargement de Recharts, les états, et le responsive
- */
-export declare const WakaChart: React.ForwardRefExoticComponent<WakaChartProps & React.RefAttributes<HTMLDivElement>>;
-export default WakaChart;

package/dist/src/components/waka-charts/WakaLineChart.d.ts

@@ -1,12 +0,0 @@
-import { LineChartProps } from './types';
-/**
- * WakaLineChart - Graphique en ligne
- */
-import * as React from "react";
-export interface WakaLineChartProps extends LineChartProps {
-}
-/**
- * Graphique en ligne avec support multi-séries, courbes, et animations
- */
-export declare const WakaLineChart: React.ForwardRefExoticComponent<WakaLineChartProps & React.RefAttributes<HTMLDivElement>>;
-export default WakaLineChart;

package/dist/src/components/waka-charts/WakaMiniChart.d.ts

@@ -1,13 +0,0 @@
-import { MiniChartProps } from './types';
-/**
- * WakaMiniChart - Mini graphique pour DataTable
- */
-import * as React from "react";
-export interface WakaMiniChartProps extends MiniChartProps {
-}
-/**
- * Mini graphique optimisé pour les cellules DataTable
- * Affiche une tendance avec sparkline et indicateur de direction
- */
-export declare const WakaMiniChart: React.ForwardRefExoticComponent<WakaMiniChartProps & React.RefAttributes<HTMLDivElement>>;
-export default WakaMiniChart;

package/dist/src/components/waka-charts/WakaPieChart.d.ts

@@ -1,12 +0,0 @@
-import { PieChartProps } from './types';
-/**
- * WakaPieChart - Graphique camembert/donut
- */
-import * as React from "react";
-export interface WakaPieChartProps extends PieChartProps {
-}
-/**
- * Graphique camembert/donut avec labels, animations, et interactivité
- */
-export declare const WakaPieChart: React.ForwardRefExoticComponent<WakaPieChartProps & React.RefAttributes<HTMLDivElement>>;
-export default WakaPieChart;

package/dist/src/components/waka-charts/WakaSparkline.d.ts

@@ -1,13 +0,0 @@
-import { SparklineProps } from './types';
-/**
- * WakaSparkline - Mini graphique inline
- */
-import * as React from "react";
-export interface WakaSparklineProps extends SparklineProps {
-}
-/**
- * Mini graphique inline (sparkline)
- * Idéal pour afficher des tendances dans des tableaux ou textes
- */
-export declare const WakaSparkline: React.ForwardRefExoticComponent<WakaSparklineProps & React.RefAttributes<HTMLDivElement>>;
-export default WakaSparkline;

package/dist/src/components/waka-charts/dataTableHelpers.d.ts

@@ -1,34 +0,0 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { ChartColumnConfig } from './types';
-/**
- * Crée une colonne de graphique pour DataTable
- *
- * @example
- * ```tsx
- * import { createChartColumn } from "@wakastellar/ui"
- *
- * const columns = [
- *   createChartColumn<Product>({
- *     accessorKey: "salesHistory",
- *     header: "Trend",
- *     chartType: "sparkline",
- *     width: 120,
- *     showValue: true,
- *   }),
- * ]
- * ```
- */
-export declare function createChartColumn<TData extends Record<string, unknown>>(config: ChartColumnConfig<TData>): ColumnDef<TData, unknown>;
-/**
- * Template de colonne sparkline pour useDataTableColumnTemplates
- */
-export declare const sparklineTemplate: {
-    cell: (value: unknown) => {
-        type: string;
-        data: number[];
-    } | null;
-    size: number;
-    enableSorting: boolean;
-    enableFiltering: boolean;
-};
-export default createChartColumn;

package/dist/src/components/waka-charts/hooks/useChartTheme.d.ts

@@ -1,23 +0,0 @@
-import { ChartTheme, ChartVariant } from '../types';
-export interface UseChartThemeResult {
-    /** Thème complet fusionné */
-    theme: Required<ChartTheme>;
-    /** Obtenir la couleur d'un index */
-    getColor: (index: number) => string;
-    /** Styles du tooltip */
-    tooltipStyles: {
-        contentStyle: React.CSSProperties;
-        wrapperStyle: React.CSSProperties;
-        itemStyle: React.CSSProperties;
-        labelStyle: React.CSSProperties;
-    };
-    /** Classes CSS selon la variante */
-    containerClasses: string;
-}
-/**
- * Hook pour gérer le thème des graphiques
- * @param customTheme - Thème personnalisé partiel
- * @param variant - Variante visuelle
- */
-export declare function useChartTheme(customTheme?: ChartTheme, variant?: ChartVariant): UseChartThemeResult;
-export default useChartTheme;

package/dist/src/components/waka-charts/hooks/useRechartsLoader.d.ts

@@ -1,161 +0,0 @@
-/**
- * Hook pour charger Recharts dynamiquement
- * Permet d'utiliser les graphiques sans avoir Recharts en dépendance obligatoire
- */
-export interface RechartsComponents {
-    ResponsiveContainer: React.ComponentType<{
-        width?: number | string;
-        height?: number | string;
-        children: React.ReactNode;
-    }>;
-    BarChart: React.ComponentType<{
-        data?: unknown[];
-        layout?: "vertical" | "horizontal";
-        barGap?: number;
-        barCategoryGap?: number | string;
-        children?: React.ReactNode;
-    }>;
-    LineChart: React.ComponentType<{
-        data?: unknown[];
-        children?: React.ReactNode;
-    }>;
-    AreaChart: React.ComponentType<{
-        data?: unknown[];
-        children?: React.ReactNode;
-    }>;
-    PieChart: React.ComponentType<{
-        children?: React.ReactNode;
-    }>;
-    Bar: React.ComponentType<{
-        dataKey: string;
-        fill?: string;
-        radius?: number | [number, number, number, number];
-        stackId?: string;
-        barSize?: number;
-        animationDuration?: number;
-        isAnimationActive?: boolean;
-        name?: string;
-    }>;
-    Line: React.ComponentType<{
-        dataKey: string;
-        stroke?: string;
-        strokeWidth?: number;
-        type?: "linear" | "monotone" | "step" | "basis" | "natural";
-        dot?: boolean | object;
-        activeDot?: boolean | object;
-        strokeDasharray?: string;
-        animationDuration?: number;
-        isAnimationActive?: boolean;
-        name?: string;
-    }>;
-    Area: React.ComponentType<{
-        dataKey: string;
-        fill?: string;
-        stroke?: string;
-        strokeWidth?: number;
-        fillOpacity?: number;
-        type?: "linear" | "monotone" | "step" | "basis" | "natural";
-        dot?: boolean | object;
-        stackId?: string;
-        animationDuration?: number;
-        isAnimationActive?: boolean;
-        name?: string;
-    }>;
-    Pie: React.ComponentType<{
-        data?: unknown[];
-        dataKey?: string;
-        nameKey?: string;
-        cx?: string | number;
-        cy?: string | number;
-        innerRadius?: number | string;
-        outerRadius?: number | string;
-        startAngle?: number;
-        endAngle?: number;
-        paddingAngle?: number;
-        fill?: string;
-        label?: boolean | object | ((props: unknown) => React.ReactNode);
-        labelLine?: boolean | object;
-        animationDuration?: number;
-        isAnimationActive?: boolean;
-        children?: React.ReactNode;
-    }>;
-    Cell: React.ComponentType<{
-        fill?: string;
-        stroke?: string;
-        key?: string | number;
-    }>;
-    XAxis: React.ComponentType<{
-        dataKey?: string;
-        hide?: boolean;
-        tickFormatter?: (value: unknown) => string;
-        axisLine?: boolean | object;
-        tickLine?: boolean | object;
-        tick?: boolean | object;
-        type?: "number" | "category";
-    }>;
-    YAxis: React.ComponentType<{
-        hide?: boolean;
-        tickFormatter?: (value: unknown) => string;
-        domain?: [number | string, number | string];
-        unit?: string;
-        axisLine?: boolean | object;
-        tickLine?: boolean | object;
-        tick?: boolean | object;
-    }>;
-    CartesianGrid: React.ComponentType<{
-        strokeDasharray?: string;
-        stroke?: string;
-        horizontal?: boolean;
-        vertical?: boolean;
-    }>;
-    Tooltip: React.ComponentType<{
-        content?: React.ReactNode | ((props: unknown) => React.ReactNode);
-        formatter?: (value: unknown, name: string) => [string, string] | string;
-        labelFormatter?: (label: unknown) => string;
-        cursor?: boolean | object;
-        wrapperStyle?: React.CSSProperties;
-        contentStyle?: React.CSSProperties;
-        itemStyle?: React.CSSProperties;
-        labelStyle?: React.CSSProperties;
-    }>;
-    Legend: React.ComponentType<{
-        align?: "left" | "center" | "right";
-        verticalAlign?: "top" | "middle" | "bottom";
-        layout?: "horizontal" | "vertical";
-        iconType?: "circle" | "diamond" | "square" | "star" | "triangle" | "wye";
-        wrapperStyle?: React.CSSProperties;
-        formatter?: (value: string) => string;
-    }>;
-    defs: React.ComponentType<{
-        children?: React.ReactNode;
-    }>;
-    linearGradient: React.ComponentType<{
-        id: string;
-        x1?: string;
-        y1?: string;
-        x2?: string;
-        y2?: string;
-        children?: React.ReactNode;
-    }>;
-    stop: React.ComponentType<{
-        offset: string;
-        stopColor: string;
-        stopOpacity?: number;
-    }>;
-}
-export interface UseRechartsLoaderResult {
-    /** Composants Recharts chargés */
-    components: RechartsComponents | null;
-    /** État de chargement */
-    loading: boolean;
-    /** Erreur de chargement */
-    error: Error | null;
-    /** Recharts est disponible */
-    isAvailable: boolean;
-}
-/**
- * Hook pour charger Recharts dynamiquement
- * @returns État du chargement et composants Recharts
- */
-export declare function useRechartsLoader(): UseRechartsLoaderResult;
-export default useRechartsLoader;

package/dist/src/components/waka-charts/index.d.ts

@@ -1,57 +0,0 @@
-/**
- * WakaCharts - Composants de visualisation de données
- *
- * @module waka-charts
- * @description
- * Composants de graphiques basés sur Recharts avec support de :
- * - Graphiques à barres, lignes, aires, camembert
- * - Sparklines et mini-graphiques
- * - Intégration DataTable
- * - Thème CSS variables
- * - Chargement dynamique (peer dependency optionnel)
- *
- * @example
- * ```tsx
- * import {
- *   WakaBarChart,
- *   WakaLineChart,
- *   WakaPieChart,
- *   WakaSparkline,
- * } from "@wakastellar/ui"
- *
- * // Graphique à barres
- * <WakaBarChart
- *   data={[
- *     { name: "Jan", value: 100 },
- *     { name: "Feb", value: 150 },
- *   ]}
- *   variant="gradient"
- *   animation
- *   tooltip
- * />
- *
- * // Sparkline dans du texte
- * <p>Ventes: <WakaSparkline data={[10, 15, 8, 20, 25]} /></p>
- * ```
- */
-export { WakaChart } from './WakaChart';
-export type { WakaChartProps } from './WakaChart';
-export { WakaBarChart } from './WakaBarChart';
-export type { WakaBarChartProps } from './WakaBarChart';
-export { WakaLineChart } from './WakaLineChart';
-export type { WakaLineChartProps } from './WakaLineChart';
-export { WakaAreaChart } from './WakaAreaChart';
-export type { WakaAreaChartProps } from './WakaAreaChart';
-export { WakaPieChart } from './WakaPieChart';
-export type { WakaPieChartProps } from './WakaPieChart';
-export { WakaSparkline } from './WakaSparkline';
-export type { WakaSparklineProps } from './WakaSparkline';
-export { WakaMiniChart } from './WakaMiniChart';
-export type { WakaMiniChartProps } from './WakaMiniChart';
-export { useRechartsLoader } from './hooks/useRechartsLoader';
-export type { UseRechartsLoaderResult, RechartsComponents } from './hooks/useRechartsLoader';
-export { useChartTheme } from './hooks/useChartTheme';
-export type { UseChartThemeResult } from './hooks/useChartTheme';
-export { createChartColumn, sparklineTemplate } from './dataTableHelpers';
-export type { ChartDataPoint, ChartSeries, ChartVariant, ChartSize, ChartTheme, ChartTooltipConfig, ChartLegendConfig, ChartAxisConfig, BaseChartProps, BarChartProps, LineChartProps, AreaChartProps, PieChartProps, SparklineProps, MiniChartProps, ChartColumnConfig, } from './types';
-export { DEFAULT_CHART_COLORS, CHART_SIZE_MAP } from './types';

package/dist/src/components/waka-charts/types.d.ts

@@ -1,298 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-/**
- * Point de données pour un graphique
- */
-export interface ChartDataPoint {
-    /** Nom/label de la donnée (axe X pour barres/lignes, légende pour pie) */
-    name: string;
-    /** Valeur principale */
-    value?: number;
-    /** Valeurs multiples pour les séries */
-    [key: string]: string | number | undefined;
-}
-/**
- * Configuration d'une série de données
- */
-export interface ChartSeries {
-    /** Clé de l'accessor dans les données */
-    dataKey: string;
-    /** Label pour la légende */
-    label?: string;
-    /** Couleur de la série */
-    color?: string;
-    /** Type de ligne (pour line/area charts) */
-    strokeDasharray?: string;
-    /** Épaisseur du trait */
-    strokeWidth?: number;
-    /** Opacité de remplissage (pour area charts) */
-    fillOpacity?: number;
-}
-/**
- * Variantes visuelles des graphiques
- */
-export type ChartVariant = "default" | "gradient" | "outline" | "glass";
-/**
- * Tailles des graphiques
- */
-export type ChartSize = "sm" | "md" | "lg" | "xl" | "auto";
-/**
- * Configuration du thème du graphique
- */
-export interface ChartTheme {
-    /** Couleurs principales */
-    colors?: string[];
-    /** Couleur de la grille */
-    gridColor?: string;
-    /** Couleur des axes */
-    axisColor?: string;
-    /** Couleur du texte */
-    textColor?: string;
-    /** Couleur de fond du tooltip */
-    tooltipBackground?: string;
-    /** Couleur du texte du tooltip */
-    tooltipText?: string;
-    /** Couleur de la bordure du tooltip */
-    tooltipBorder?: string;
-    /** Font family */
-    fontFamily?: string;
-}
-/**
- * Configuration du tooltip
- */
-export interface ChartTooltipConfig {
-    /** Afficher le tooltip */
-    enabled?: boolean;
-    /** Format personnalisé du tooltip */
-    formatter?: (value: number, name: string, dataPoint: ChartDataPoint) => ReactNode;
-    /** Préfixe des valeurs */
-    valuePrefix?: string;
-    /** Suffixe des valeurs */
-    valueSuffix?: string;
-}
-/**
- * Configuration de la légende
- */
-export interface ChartLegendConfig {
-    /** Afficher la légende */
-    enabled?: boolean;
-    /** Position de la légende */
-    position?: "top" | "bottom" | "left" | "right";
-    /** Alignement */
-    align?: "left" | "center" | "right";
-}
-/**
- * Configuration des axes
- */
-export interface ChartAxisConfig {
-    /** Afficher l'axe X */
-    showXAxis?: boolean;
-    /** Afficher l'axe Y */
-    showYAxis?: boolean;
-    /** Format de l'axe X */
-    xAxisFormatter?: (value: unknown) => string;
-    /** Format de l'axe Y */
-    yAxisFormatter?: (value: unknown) => string;
-    /** Unité de l'axe Y */
-    yAxisUnit?: string;
-    /** Domaine de l'axe Y [min, max] */
-    yAxisDomain?: [number | "auto" | "dataMin" | "dataMax", number | "auto" | "dataMin" | "dataMax"];
-}
-/**
- * Props communes à tous les graphiques
- */
-export interface BaseChartProps {
-    /** Données du graphique */
-    data: ChartDataPoint[];
-    /** Variante visuelle */
-    variant?: ChartVariant;
-    /** Taille du graphique */
-    size?: ChartSize;
-    /** Hauteur personnalisée en pixels */
-    height?: number;
-    /** Largeur personnalisée en pixels ou pourcentage */
-    width?: number | string;
-    /** Activer les animations */
-    animation?: boolean;
-    /** Durée de l'animation en ms */
-    animationDuration?: number;
-    /** Afficher la grille */
-    grid?: boolean;
-    /** Configuration du tooltip */
-    tooltip?: boolean | ChartTooltipConfig;
-    /** Configuration de la légende */
-    legend?: boolean | ChartLegendConfig;
-    /** Configuration des axes */
-    axis?: ChartAxisConfig;
-    /** Thème personnalisé */
-    theme?: ChartTheme;
-    /** Classes CSS additionnelles */
-    className?: string;
-    /** Style inline */
-    style?: CSSProperties;
-    /** Titre du graphique */
-    title?: string;
-    /** Description/sous-titre */
-    description?: string;
-    /** État de chargement */
-    loading?: boolean;
-    /** Message d'erreur */
-    error?: string;
-    /** Callback au clic sur un élément */
-    onClick?: (data: ChartDataPoint, index: number) => void;
-    /** Responsive */
-    responsive?: boolean;
-}
-/**
- * Props pour les graphiques à barres
- */
-export interface BarChartProps extends BaseChartProps {
-    /** Clés des données à afficher */
-    dataKeys?: string[];
-    /** Séries configurées */
-    series?: ChartSeries[];
-    /** Disposition des barres */
-    layout?: "vertical" | "horizontal";
-    /** Barres empilées */
-    stacked?: boolean;
-    /** Rayon des coins */
-    radius?: number;
-    /** Largeur des barres (pourcentage) */
-    barSize?: number;
-    /** Écart entre les groupes de barres */
-    barGap?: number;
-    /** Écart entre les catégories */
-    barCategoryGap?: number | string;
-}
-/**
- * Props pour les graphiques en ligne
- */
-export interface LineChartProps extends BaseChartProps {
-    /** Clés des données à afficher */
-    dataKeys?: string[];
-    /** Séries configurées */
-    series?: ChartSeries[];
-    /** Type de courbe */
-    curve?: "linear" | "monotone" | "step" | "basis" | "natural";
-    /** Afficher les points */
-    dots?: boolean;
-    /** Taille des points */
-    dotSize?: number;
-    /** Points actifs (hover) */
-    activeDot?: boolean;
-    /** Épaisseur des lignes */
-    strokeWidth?: number;
-}
-/**
- * Props pour les graphiques en aire
- */
-export interface AreaChartProps extends LineChartProps {
-    /** Aires empilées */
-    stacked?: boolean;
-    /** Opacité du remplissage */
-    fillOpacity?: number;
-    /** Type de gradient */
-    gradientDirection?: "vertical" | "horizontal";
-}
-/**
- * Props pour les graphiques camembert/donut
- */
-export interface PieChartProps extends BaseChartProps {
-    /** Clé de la valeur */
-    dataKey?: string;
-    /** Clé du nom/label */
-    nameKey?: string;
-    /** Rayon intérieur (0 = camembert, >0 = donut) */
-    innerRadius?: number | string;
-    /** Rayon extérieur */
-    outerRadius?: number | string;
-    /** Angle de départ (en degrés) */
-    startAngle?: number;
-    /** Angle de fin */
-    endAngle?: number;
-    /** Espacement entre les segments */
-    paddingAngle?: number;
-    /** Afficher les labels */
-    label?: boolean | "percent" | "value" | "name";
-    /** Position des labels */
-    labelPosition?: "inside" | "outside";
-}
-/**
- * Props pour les sparklines (mini graphiques inline)
- */
-export interface SparklineProps {
-    /** Données (valeurs simples) */
-    data: number[];
-    /** Type de sparkline */
-    type?: "line" | "bar" | "area";
-    /** Largeur */
-    width?: number;
-    /** Hauteur */
-    height?: number;
-    /** Couleur */
-    color?: string;
-    /** Couleur de remplissage (area) */
-    fillColor?: string;
-    /** Opacité du remplissage */
-    fillOpacity?: number;
-    /** Afficher le min/max */
-    showMinMax?: boolean;
-    /** Afficher la valeur actuelle */
-    showValue?: boolean;
-    /** Classes CSS */
-    className?: string;
-    /** Animation */
-    animation?: boolean;
-}
-/**
- * Props pour les mini-graphiques DataTable
- */
-export interface MiniChartProps {
-    /** Données */
-    data: number[] | ChartDataPoint[];
-    /** Type de graphique */
-    type?: "line" | "bar" | "area" | "sparkline";
-    /** Largeur */
-    width?: number;
-    /** Hauteur */
-    height?: number;
-    /** Couleur principale */
-    color?: string;
-    /** Afficher la tendance (up/down) */
-    showTrend?: boolean;
-    /** Format de la valeur */
-    valueFormatter?: (value: number) => string;
-    /** Classes CSS */
-    className?: string;
-}
-/**
- * Configuration pour créer une colonne chart dans DataTable
- */
-export interface ChartColumnConfig<TData> {
-    /** Clé d'accès aux données */
-    accessorKey: keyof TData;
-    /** En-tête de colonne */
-    header?: string;
-    /** Type de graphique */
-    chartType?: "sparkline" | "bar" | "line" | "area";
-    /** Largeur de la colonne */
-    width?: number;
-    /** Hauteur du graphique */
-    height?: number;
-    /** Couleur */
-    color?: string;
-    /** Afficher la valeur */
-    showValue?: boolean;
-    /** Format de la valeur */
-    valueFormatter?: (value: number) => string;
-}
-/**
- * Couleurs par défaut pour les graphiques
- */
-export declare const DEFAULT_CHART_COLORS: string[];
-/**
- * Tailles prédéfinies
- */
-export declare const CHART_SIZE_MAP: Record<ChartSize, {
-    width: number | string;
-    height: number;
-}>;