@wakastellar/ui 3.5.0 → 4.0.0-dev.0

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

@@ -0,0 +1,302 @@
+/**
+ * Types pour les composants de graphiques
+ * @module waka-charts/types
+ */
+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;
+}>;

package/dist/components/waka-chat-bubble/index.d.ts

@@ -0,0 +1,127 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+export type MessageStatus = "sending" | "sent" | "delivered" | "read" | "failed";
+export type ReadReceiptStatus = "sent" | "delivered" | "read";
+export interface MessageReaction {
+    emoji: string;
+    count: number;
+    users: string[];
+    reacted: boolean;
+}
+export interface MessageAttachment {
+    id: string;
+    type: "image" | "file" | "video" | "audio";
+    url: string;
+    name: string;
+    size?: number;
+    mimeType?: string;
+    thumbnail?: string;
+    width?: number;
+    height?: number;
+}
+export interface LinkPreview {
+    url: string;
+    title: string;
+    description?: string;
+    image?: string;
+    favicon?: string;
+    siteName?: string;
+}
+export interface MessageThread {
+    count: number;
+    lastReply?: string;
+    participants: Array<{
+        id: string;
+        name: string;
+        avatar?: string;
+    }>;
+}
+export interface ChatUser {
+    id: string;
+    name: string;
+    avatar?: string;
+    initials?: string;
+}
+export interface WakaChatBubbleProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof bubbleVariants> {
+    /** The message content */
+    message: string;
+    /** Whether the message was sent by the current user */
+    isSent?: boolean;
+    /** User who sent the message */
+    sender?: ChatUser;
+    /** Show avatar */
+    showAvatar?: boolean;
+    /** Message timestamp */
+    timestamp?: Date | string;
+    /** Format for timestamp display */
+    timestampFormat?: "time" | "datetime" | "relative";
+    /** Message status */
+    status?: MessageStatus;
+    /** Read receipt status (for sent messages) */
+    readReceipt?: ReadReceiptStatus;
+    /** Reactions on the message */
+    reactions?: MessageReaction[];
+    /** Thread/reply info */
+    thread?: MessageThread;
+    /** Whether the message was edited */
+    isEdited?: boolean;
+    /** Attachments */
+    attachments?: MessageAttachment[];
+    /** Link preview */
+    linkPreview?: LinkPreview;
+    /** Enable markdown rendering */
+    markdown?: boolean;
+    /** Called when reaction is added */
+    onAddReaction?: (emoji: string) => void;
+    /** Called when existing reaction is toggled */
+    onToggleReaction?: (emoji: string) => void;
+    /** Called when reply button is clicked */
+    onReply?: () => void;
+    /** Called when edit is requested */
+    onEdit?: () => void;
+    /** Called when delete is requested */
+    onDelete?: () => void;
+    /** Called when retry is requested (for failed messages) */
+    onRetry?: () => void;
+    /** Called when thread is clicked */
+    onThreadClick?: () => void;
+    /** Called when attachment is clicked */
+    onAttachmentClick?: (attachment: MessageAttachment) => void;
+    /** Called when link preview is clicked */
+    onLinkPreviewClick?: (url: string) => void;
+    /** Show action menu */
+    showActions?: boolean;
+    /** Emoji picker content (render prop) */
+    emojiPicker?: (onSelect: (emoji: string) => void) => React.ReactNode;
+    /** Quick reaction emojis */
+    quickReactions?: string[];
+    /** Custom timestamp renderer */
+    renderTimestamp?: (timestamp: Date | string) => React.ReactNode;
+    /** Maximum width of the bubble */
+    maxWidth?: string | number;
+}
+declare const bubbleVariants: (props?: {
+    variant?: "default" | "minimal" | "elevated";
+    isSent?: boolean;
+} & import("class-variance-authority/types").ClassProp) => string;
+export declare const WakaChatBubble: React.ForwardRefExoticComponent<WakaChatBubbleProps & React.RefAttributes<HTMLDivElement>>;
+export interface WakaChatTypingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Users currently typing */
+    users?: ChatUser[];
+    /** Show avatar */
+    showAvatar?: boolean;
+}
+export declare function WakaChatTypingIndicator({ users, showAvatar, className, ...props }: WakaChatTypingIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export interface WakaChatDateSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Date to display */
+    date: Date | string;
+}
+export declare function WakaChatDateSeparator({ date, className, ...props }: WakaChatDateSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export interface WakaChatSystemMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** System message text */
+    message: string;
+    /** Icon to display */
+    icon?: React.ReactNode;
+}
+export declare function WakaChatSystemMessage({ message, icon, className, ...props }: WakaChatSystemMessageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/waka-checklist/index.d.ts

@@ -0,0 +1,123 @@
+import * as React from "react";
+export type TaskStatus = "pending" | "completed" | "skipped";
+export interface ChecklistTask {
+    /** Unique identifier */
+    id: string;
+    /** Task title */
+    title: string;
+    /** Task description (shown when expanded) */
+    description?: string;
+    /** Category/group the task belongs to */
+    category?: string;
+    /** Action button label */
+    actionLabel?: string;
+    /** Callback when action is triggered */
+    onAction?: () => void;
+    /** Whether the task can be skipped */
+    skippable?: boolean;
+    /** Custom icon */
+    icon?: React.ReactNode;
+    /** Reward points for completing this task */
+    points?: number;
+    /** Whether this task is required */
+    required?: boolean;
+}
+export interface ChecklistCategory {
+    /** Category identifier */
+    id: string;
+    /** Category label */
+    label: string;
+    /** Category description */
+    description?: string;
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+export interface ChecklistState {
+    /** Map of task ID to status */
+    tasks: Record<string, TaskStatus>;
+    /** Whether the checklist is collapsed */
+    collapsed: boolean;
+    /** Set of expanded task IDs */
+    expandedTasks: Set<string>;
+}
+export interface WakaChecklistProps {
+    /** Checklist identifier for localStorage persistence */
+    checklistId: string;
+    /** List of tasks */
+    tasks: ChecklistTask[];
+    /** Category definitions */
+    categories?: ChecklistCategory[];
+    /** Title of the checklist */
+    title?: string;
+    /** Subtitle/description */
+    subtitle?: string;
+    /** Show progress bar */
+    showProgress?: boolean;
+    /** Show completion percentage */
+    showPercentage?: boolean;
+    /** Enable localStorage persistence */
+    persistent?: boolean;
+    /** Show celebration on completion */
+    showCelebration?: boolean;
+    /** Callback when all tasks are completed */
+    onComplete?: () => void;
+    /** Callback when a task status changes */
+    onTaskChange?: (taskId: string, status: TaskStatus) => void;
+    /** Initially collapsed */
+    defaultCollapsed?: boolean;
+    /** Allow collapsing the checklist */
+    collapsible?: boolean;
+    /** Size variant */
+    size?: "sm" | "default" | "lg";
+    /** Custom className */
+    className?: string;
+}
+export interface UseChecklistOptions {
+    /** Checklist identifier for localStorage */
+    checklistId: string;
+    /** List of tasks */
+    tasks: ChecklistTask[];
+    /** Enable localStorage persistence */
+    persistent?: boolean;
+    /** Initially collapsed */
+    defaultCollapsed?: boolean;
+    /** Callback when all tasks are completed */
+    onComplete?: () => void;
+    /** Callback when a task status changes */
+    onTaskChange?: (taskId: string, status: TaskStatus) => void;
+}
+export interface UseChecklistReturn {
+    /** Current state of all tasks */
+    taskStates: Record<string, TaskStatus>;
+    /** Whether checklist is collapsed */
+    isCollapsed: boolean;
+    /** Set of expanded task IDs */
+    expandedTasks: Set<string>;
+    /** Mark a task as completed */
+    completeTask: (taskId: string) => void;
+    /** Skip a task */
+    skipTask: (taskId: string) => void;
+    /** Reset a task to pending */
+    resetTask: (taskId: string) => void;
+    /** Toggle task expansion */
+    toggleTaskExpanded: (taskId: string) => void;
+    /** Toggle checklist collapse */
+    toggleCollapsed: () => void;
+    /** Reset entire checklist */
+    resetChecklist: () => void;
+    /** Completion progress (0-100) */
+    progress: number;
+    /** Number of completed tasks */
+    completedCount: number;
+    /** Number of skipped tasks */
+    skippedCount: number;
+    /** Total number of tasks */
+    totalCount: number;
+    /** Whether all tasks are completed or skipped */
+    isComplete: boolean;
+    /** Get status of a specific task */
+    getTaskStatus: (taskId: string) => TaskStatus;
+}
+export declare function useChecklist({ checklistId, tasks, persistent, defaultCollapsed, onComplete, onTaskChange, }: UseChecklistOptions): UseChecklistReturn;
+export declare function WakaChecklist({ checklistId, tasks, categories, title, subtitle, showProgress, showPercentage, persistent, showCelebration, onComplete, onTaskChange, defaultCollapsed, collapsible, size, className, }: WakaChecklistProps): import("react/jsx-runtime").JSX.Element;
+export default WakaChecklist;