@wakastellar/ui 2.1.0 → 2.1.2

package/README.md

@@ -10,7 +10,7 @@
 
 **Bibliothèque de 200+ composants React professionnels pour applications Next.js modernes**
 
-[Quick Start](#quick-start) • [Tailwind v3/v4](#compatibilité-tailwind-v3--v4) • [Composants](#composants) • [Thèmes](#système-de-thèmes) • [i18n](#internationalisation)
+[Quick Start](#quick-start) • [CLI](#cli) • [Tailwind v3/v4](#compatibilité-tailwind-v3--v4) • [Composants](#composants) • [Thèmes](#système-de-thèmes) • [i18n](#internationalisation)
 
 </div>
 
@@ -31,7 +31,7 @@
 
 ## Quick Start
 
-### 1. Installation
+### Option 1 : Package complet (recommandé)
 
 ```bash
 pnpm add @wakastellar/ui
@@ -39,12 +39,6 @@ pnpm add @wakastellar/ui
 npm install @wakastellar/ui
 ```
 
-### 2. Configuration (selon votre version de Tailwind)
-
-Voir la section [Compatibilité Tailwind v3 / v4](#compatibilité-tailwind-v3--v4) ci-dessous.
-
-### 3. Utilisation
-
 ```tsx
 import { Button, Card, CardHeader, CardTitle, CardContent } from "@wakastellar/ui"
 
@@ -62,6 +56,24 @@ export default function Page() {
 }
 ```
 
+### Option 2 : CLI (composants individuels)
+
+```bash
+# Initialiser votre projet
+npx wakastellar-ui init
+
+# Ajouter des composants
+npx wakastellar-ui add button card input
+
+# Lister les composants disponibles
+npx wakastellar-ui list
+
+# Rechercher un composant
+npx wakastellar-ui search "date picker"
+```
+
+Voir la section [CLI](#cli) pour plus de détails.
+
 ---
 
 ## Compatibilité Tailwind v3 / v4
@@ -130,6 +142,57 @@ const preset = require("@wakastellar/ui/tailwind-preset")
 
 ---
 
+## CLI
+
+Le CLI permet d'ajouter des composants individuels à votre projet, similaire à shadcn/ui.
+
+### Commandes
+
+```bash
+# Initialiser un projet
+npx wakastellar-ui init
+npx wakastellar-ui init --defaults  # Utilise les paramètres par défaut
+
+# Ajouter des composants
+npx wakastellar-ui add button
+npx wakastellar-ui add button card input dialog
+npx wakastellar-ui add waka-datatable --overwrite
+
+# Lister les composants
+npx wakastellar-ui list
+npx wakastellar-ui list --type ui
+npx wakastellar-ui list --category gamification
+
+# Rechercher
+npx wakastellar-ui search button
+npx wakastellar-ui search "date picker"
+```
+
+### Configuration (components.json)
+
+Le fichier `components.json` est créé par `init` et configure votre projet :
+
+```json
+{
+  "$schema": "https://wakastellar.dev/schema.json",
+  "style": "default",
+  "tailwind": {
+    "version": "v4",
+    "css": "app/globals.css"
+  },
+  "aliases": {
+    "components": "@/components/ui",
+    "utils": "@/lib/utils"
+  }
+}
+```
+
+### Résolution des dépendances
+
+Le CLI installe automatiquement les dépendances internes. Par exemple, ajouter `waka-modal` installera aussi `button` s'il n'est pas déjà présent.
+
+---
+
 ## Composants
 
 ### Catégories principales

package/dist/blocks/auth-2fa/index.d.ts

@@ -0,0 +1,38 @@
+export type TwoFactorMethod = "authenticator" | "sms" | "email" | "hardware";
+export interface BackupCode {
+    code: string;
+    used: boolean;
+}
+export interface TwoFactorStatus {
+    enabled: boolean;
+    method?: TwoFactorMethod;
+    phone?: string;
+    email?: string;
+    lastVerified?: Date | string;
+}
+export interface Auth2FAProps {
+    /** Current 2FA status */
+    status?: TwoFactorStatus;
+    /** Available methods */
+    availableMethods?: TwoFactorMethod[];
+    /** QR code data URL for authenticator setup */
+    qrCodeUrl?: string;
+    /** Secret key for manual entry */
+    secretKey?: string;
+    /** Backup codes */
+    backupCodes?: BackupCode[];
+    /** Handler for enabling 2FA */
+    onEnable?: (method: TwoFactorMethod, verificationCode: string) => Promise<boolean>;
+    /** Handler for disabling 2FA */
+    onDisable?: (verificationCode: string) => Promise<boolean>;
+    /** Handler for regenerating backup codes */
+    onRegenerateBackupCodes?: () => Promise<BackupCode[]>;
+    /** Handler for sending verification code */
+    onSendCode?: (method: TwoFactorMethod) => Promise<boolean>;
+    /** Custom className */
+    className?: string;
+}
+export declare function Auth2FA({ status, availableMethods, qrCodeUrl, secretKey, backupCodes, onEnable, onDisable, onRegenerateBackupCodes, onSendCode, className, }: Auth2FAProps): import("react/jsx-runtime").JSX.Element;
+export declare const defaultBackupCodes: BackupCode[];
+export declare const defaultStatus: TwoFactorStatus;
+export default Auth2FA;

package/dist/blocks/chat-interface/index.d.ts

@@ -0,0 +1,66 @@
+export interface ChatUser {
+    id: string;
+    name: string;
+    avatar?: string;
+    status?: "online" | "offline" | "away" | "busy";
+    lastSeen?: Date | string;
+}
+export interface ChatMessage {
+    id: string;
+    content: string;
+    senderId: string;
+    timestamp: Date | string;
+    status?: "sending" | "sent" | "delivered" | "read";
+    replyTo?: string;
+    attachments?: ChatAttachment[];
+    reactions?: ChatReaction[];
+}
+export interface ChatAttachment {
+    id: string;
+    type: "image" | "file" | "audio";
+    name: string;
+    url: string;
+    size?: string;
+    thumbnail?: string;
+}
+export interface ChatReaction {
+    emoji: string;
+    userId: string;
+}
+export interface ChatConversation {
+    id: string;
+    participants: ChatUser[];
+    lastMessage?: ChatMessage;
+    unreadCount?: number;
+    isPinned?: boolean;
+    isGroup?: boolean;
+    groupName?: string;
+    groupAvatar?: string;
+}
+export interface ChatInterfaceProps {
+    /** Current user */
+    currentUser: ChatUser;
+    /** List of conversations */
+    conversations?: ChatConversation[];
+    /** Currently selected conversation */
+    selectedConversation?: ChatConversation;
+    /** Messages in selected conversation */
+    messages?: ChatMessage[];
+    /** Handler for sending message */
+    onSendMessage?: (content: string, attachments?: File[]) => void;
+    /** Handler for selecting conversation */
+    onSelectConversation?: (conversation: ChatConversation) => void;
+    /** Handler for typing indicator */
+    onTyping?: () => void;
+    /** Users currently typing */
+    typingUsers?: ChatUser[];
+    /** Show sidebar */
+    showSidebar?: boolean;
+    /** Custom className */
+    className?: string;
+}
+export declare function ChatInterface({ currentUser, conversations, selectedConversation, messages, onSendMessage, onSelectConversation, onTyping, typingUsers, showSidebar, className, }: ChatInterfaceProps): import("react/jsx-runtime").JSX.Element;
+export declare const defaultUsers: ChatUser[];
+export declare const defaultConversations: ChatConversation[];
+export declare const defaultMessages: ChatMessage[];
+export default ChatInterface;

package/dist/blocks/checkout-flow/index.d.ts

@@ -0,0 +1,76 @@
+import * as React from "react";
+export interface CartItem {
+    id: string;
+    name: string;
+    description?: string;
+    price: number;
+    quantity: number;
+    image?: string;
+    variant?: string;
+}
+export interface ShippingMethod {
+    id: string;
+    name: string;
+    description: string;
+    price: number;
+    estimatedDays: string;
+    icon?: React.ReactNode;
+}
+export interface PaymentMethod {
+    id: string;
+    type: "card" | "paypal" | "apple" | "google" | "bank";
+    label: string;
+    icon?: React.ReactNode;
+    last4?: string;
+}
+export interface CheckoutAddress {
+    firstName: string;
+    lastName: string;
+    email: string;
+    phone: string;
+    address: string;
+    apartment?: string;
+    city: string;
+    state: string;
+    postalCode: string;
+    country: string;
+}
+export interface CheckoutFlowProps {
+    /** Cart items */
+    items: CartItem[];
+    /** Available shipping methods */
+    shippingMethods?: ShippingMethod[];
+    /** Available payment methods */
+    paymentMethods?: PaymentMethod[];
+    /** Coupon code handler */
+    onApplyCoupon?: (code: string) => Promise<{
+        discount: number;
+        type: "percent" | "fixed";
+    } | null>;
+    /** Applied discount */
+    discount?: {
+        code: string;
+        amount: number;
+        type: "percent" | "fixed";
+    };
+    /** Remove discount */
+    onRemoveDiscount?: () => void;
+    /** Submit order handler */
+    onSubmitOrder?: (data: {
+        address: CheckoutAddress;
+        shippingMethod: string;
+        paymentMethod: string;
+        saveInfo: boolean;
+    }) => Promise<void>;
+    /** Currency symbol */
+    currency?: string;
+    /** Tax rate (percentage) */
+    taxRate?: number;
+    /** Custom className */
+    className?: string;
+}
+export declare function CheckoutFlow({ items, shippingMethods, paymentMethods, onApplyCoupon, discount, onRemoveDiscount, onSubmitOrder, currency, taxRate, className, }: CheckoutFlowProps): import("react/jsx-runtime").JSX.Element;
+export declare const defaultShippingMethods: ShippingMethod[];
+export declare const defaultPaymentMethods: PaymentMethod[];
+export declare const defaultCartItems: CartItem[];
+export default CheckoutFlow;

package/dist/blocks/dashboard-kpi/index.d.ts

@@ -0,0 +1,69 @@
+import * as React from "react";
+export interface KPIMetric {
+    id: string;
+    label: string;
+    value: string | number;
+    previousValue?: string | number;
+    change?: number;
+    changeLabel?: string;
+    trend?: "up" | "down" | "neutral";
+    icon?: React.ReactNode;
+    color?: "default" | "blue" | "green" | "yellow" | "red" | "purple";
+    sparkline?: number[];
+    target?: number;
+    current?: number;
+}
+export interface KPIChartData {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface DashboardKPIProps {
+    /** Title of the dashboard */
+    title?: string;
+    /** Description */
+    description?: string;
+    /** Main KPI metrics */
+    metrics: KPIMetric[];
+    /** Period selector options */
+    periods?: {
+        value: string;
+        label: string;
+    }[];
+    /** Selected period */
+    selectedPeriod?: string;
+    /** Period change handler */
+    onPeriodChange?: (period: string) => void;
+    /** Refresh handler */
+    onRefresh?: () => void;
+    /** Export handler */
+    onExport?: () => void;
+    /** Custom chart component */
+    chart?: React.ReactNode;
+    /** Secondary metrics for the bottom section */
+    secondaryMetrics?: KPIMetric[];
+    /** Goals/targets section */
+    goals?: {
+        id: string;
+        label: string;
+        current: number;
+        target: number;
+        unit?: string;
+    }[];
+    /** Loading state */
+    isLoading?: boolean;
+    /** Last updated timestamp */
+    lastUpdated?: string | Date;
+    /** Custom className */
+    className?: string;
+}
+export declare function DashboardKPI({ title, description, metrics, periods, selectedPeriod, onPeriodChange, onRefresh, onExport, chart, secondaryMetrics, goals, isLoading, lastUpdated, className, }: DashboardKPIProps): import("react/jsx-runtime").JSX.Element;
+export declare const defaultKPIMetrics: KPIMetric[];
+export declare const defaultGoals: {
+    id: string;
+    label: string;
+    current: number;
+    target: number;
+    unit: string;
+}[];
+export default DashboardKPI;

package/dist/blocks/deployment-dashboard/index.d.ts

@@ -0,0 +1,68 @@
+export type DeploymentStatus = "pending" | "building" | "deploying" | "success" | "failed" | "cancelled" | "rollback";
+export type Environment = "development" | "staging" | "production";
+export interface Deployment {
+    id: string;
+    status: DeploymentStatus;
+    environment: Environment;
+    branch: string;
+    commit: string;
+    commitMessage: string;
+    author: {
+        name: string;
+        avatar?: string;
+    };
+    startedAt: Date | string;
+    finishedAt?: Date | string;
+    duration?: string;
+    url?: string;
+    logs?: string[];
+}
+export interface Pipeline {
+    id: string;
+    name: string;
+    status: DeploymentStatus;
+    stages: PipelineStage[];
+    trigger: string;
+    branch: string;
+    startedAt: Date | string;
+}
+export interface PipelineStage {
+    id: string;
+    name: string;
+    status: DeploymentStatus;
+    duration?: string;
+    logs?: string[];
+}
+export interface EnvironmentStatus {
+    name: Environment;
+    status: "healthy" | "degraded" | "down";
+    url: string;
+    lastDeployment?: Deployment;
+    uptime?: string;
+    responseTime?: string;
+}
+export interface DeploymentDashboardProps {
+    /** Recent deployments */
+    deployments?: Deployment[];
+    /** Active pipelines */
+    pipelines?: Pipeline[];
+    /** Environment statuses */
+    environments?: EnvironmentStatus[];
+    /** Handler for deploying */
+    onDeploy?: (environment: Environment, branch: string) => void;
+    /** Handler for rollback */
+    onRollback?: (deploymentId: string) => void;
+    /** Handler for cancelling */
+    onCancel?: (deploymentId: string) => void;
+    /** Handler for retrying */
+    onRetry?: (deploymentId: string) => void;
+    /** Available branches */
+    branches?: string[];
+    /** Custom className */
+    className?: string;
+}
+export declare function DeploymentDashboard({ deployments, pipelines, environments, onDeploy, onRollback, onCancel, onRetry, branches, className, }: DeploymentDashboardProps): import("react/jsx-runtime").JSX.Element;
+export declare const defaultDeployments: Deployment[];
+export declare const defaultPipelines: Pipeline[];
+export declare const defaultEnvironments: EnvironmentStatus[];
+export default DeploymentDashboard;

package/dist/blocks/index.d.ts

@@ -30,3 +30,10 @@ export * from './landing';
 export * from './pricing';
 export * from './wizard';
 export * from './i18n-editor';
+export * from './dashboard-kpi';
+export * from './checkout-flow';
+export * from './player-profile';
+export * from './auth-2fa';
+export { ChatInterface, defaultUsers as defaultChatInterfaceUsers, defaultConversations as defaultChatInterfaceConversations, defaultMessages as defaultChatInterfaceMessages, } from './chat-interface';
+export type { ChatInterfaceProps, ChatUser as ChatInterfaceUser, ChatMessage as ChatInterfaceMessage, ChatConversation as ChatInterfaceConversation, ChatAttachment as ChatInterfaceAttachment, ChatReaction as ChatInterfaceReaction, } from './chat-interface';
+export * from './deployment-dashboard';

package/dist/blocks/player-profile/index.d.ts

@@ -0,0 +1,78 @@
+import * as React from "react";
+export interface PlayerStats {
+    label: string;
+    value: string | number;
+    icon?: React.ReactNode;
+    color?: "default" | "blue" | "green" | "yellow" | "red" | "purple";
+}
+export interface Achievement {
+    id: string;
+    name: string;
+    description: string;
+    icon?: React.ReactNode;
+    rarity?: "common" | "rare" | "epic" | "legendary";
+    unlockedAt?: Date | string;
+    progress?: number;
+    maxProgress?: number;
+}
+export interface PlayerBadge {
+    id: string;
+    name: string;
+    icon?: React.ReactNode;
+    color?: string;
+}
+export interface MatchHistory {
+    id: string;
+    result: "win" | "loss" | "draw";
+    score?: string;
+    opponent?: string;
+    mode?: string;
+    date: Date | string;
+    xpGained?: number;
+}
+export interface PlayerProfileProps {
+    /** Player name */
+    name: string;
+    /** Player avatar URL */
+    avatar?: string;
+    /** Player title/rank */
+    title?: string;
+    /** Current level */
+    level: number;
+    /** Current XP */
+    currentXP: number;
+    /** XP needed for next level */
+    maxXP: number;
+    /** Total XP earned */
+    totalXP?: number;
+    /** Current rank */
+    rank?: string;
+    /** Rank icon */
+    rankIcon?: React.ReactNode;
+    /** Player stats */
+    stats?: PlayerStats[];
+    /** Achievements */
+    achievements?: Achievement[];
+    /** Badges */
+    badges?: PlayerBadge[];
+    /** Match history */
+    matchHistory?: MatchHistory[];
+    /** Streak count */
+    streak?: number;
+    /** Join date */
+    joinDate?: Date | string;
+    /** Total playtime */
+    playtime?: string;
+    /** Friends count */
+    friendsCount?: number;
+    /** Is online */
+    isOnline?: boolean;
+    /** Custom className */
+    className?: string;
+}
+export declare function PlayerProfile({ name, avatar, title, level, currentXP, maxXP, totalXP, rank, rankIcon, stats, achievements, badges, matchHistory, streak, joinDate, playtime, friendsCount, isOnline, className, }: PlayerProfileProps): import("react/jsx-runtime").JSX.Element;
+export declare const defaultPlayerStats: PlayerStats[];
+export declare const defaultAchievements: Achievement[];
+export declare const defaultBadges: PlayerBadge[];
+export declare const defaultMatchHistory: MatchHistory[];
+export default PlayerProfile;