@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-tag-input/WakaTagInput.stories.tsx

@@ -0,0 +1,224 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaTagInput, type Tag, type TagSuggestion, type TagCategory } from "./index"
+import { useState } from "react"
+
+const meta: Meta<typeof WakaTagInput> = {
+  title: "Forms/WakaTagInput",
+  component: WakaTagInput,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    placeholder: {
+      control: "text",
+      description: "Texte placeholder",
+    },
+    maxTags: {
+      control: "number",
+      description: "Nombre maximum de tags",
+    },
+    minTags: {
+      control: "number",
+      description: "Nombre minimum de tags",
+    },
+    allowDuplicates: {
+      control: "boolean",
+      description: "Autoriser les doublons",
+    },
+    allowCreate: {
+      control: "boolean",
+      description: "Permettre la création de nouveaux tags",
+    },
+    draggable: {
+      control: "boolean",
+      description: "Tags réorganisables par drag & drop",
+    },
+    disabled: {
+      control: "boolean",
+      description: "État désactivé",
+    },
+    readOnly: {
+      control: "boolean",
+      description: "Mode lecture seule",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Taille des tags",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTagInput>
+
+const initialTags: Tag[] = [
+  { id: "1", value: "React" },
+  { id: "2", value: "TypeScript" },
+  { id: "3", value: "Tailwind" },
+]
+
+const categorizedTags: Tag[] = [
+  { id: "1", value: "React", category: "frontend" },
+  { id: "2", value: "Node.js", category: "backend" },
+  { id: "3", value: "Docker", category: "devops" },
+]
+
+const suggestions: TagSuggestion[] = [
+  { value: "React", category: "frontend", description: "JavaScript library" },
+  { value: "Vue.js", category: "frontend", description: "Progressive framework" },
+  { value: "Angular", category: "frontend", description: "TypeScript framework" },
+  { value: "Node.js", category: "backend", description: "JavaScript runtime" },
+  { value: "Python", category: "backend", description: "Programming language" },
+  { value: "Docker", category: "devops", description: "Container platform" },
+  { value: "Kubernetes", category: "devops", description: "Container orchestration" },
+]
+
+const categories: TagCategory[] = [
+  { name: "frontend", bgColor: "#dbeafe", textColor: "#1e40af", borderColor: "#93c5fd" },
+  { name: "backend", bgColor: "#dcfce7", textColor: "#166534", borderColor: "#86efac" },
+  { name: "devops", bgColor: "#fef3c7", textColor: "#92400e", borderColor: "#fcd34d" },
+]
+
+const ControlledTagInput = (props: any) => {
+  const [tags, setTags] = useState<Tag[]>(props.tags || initialTags)
+  return <WakaTagInput {...props} tags={tags} onChange={setTags} />
+}
+
+export const Default: Story = {
+  args: {
+    tags: initialTags,
+    placeholder: "Ajouter un tag...",
+    allowCreate: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <ControlledTagInput {...args} />
+    </div>
+  ),
+}
+
+export const WithSuggestions: Story = {
+  args: {
+    tags: [],
+    suggestions,
+    placeholder: "Tapez pour rechercher...",
+    allowCreate: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <ControlledTagInput {...args} />
+    </div>
+  ),
+}
+
+export const WithCategories: Story = {
+  args: {
+    tags: categorizedTags,
+    suggestions,
+    categories,
+    placeholder: "Ajouter une technologie...",
+    allowCreate: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <ControlledTagInput {...args} />
+    </div>
+  ),
+}
+
+export const Draggable: Story = {
+  args: {
+    tags: initialTags,
+    placeholder: "Glissez pour réorganiser...",
+    draggable: true,
+    allowCreate: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <ControlledTagInput {...args} />
+    </div>
+  ),
+}
+
+export const MaxTags: Story = {
+  args: {
+    tags: initialTags,
+    placeholder: "Max 5 tags",
+    maxTags: 5,
+    allowCreate: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <ControlledTagInput {...args} />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  args: {
+    tags: initialTags,
+    readOnly: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaTagInput {...args} onChange={() => {}} />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    tags: initialTags,
+    disabled: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaTagInput {...args} onChange={() => {}} />
+    </div>
+  ),
+}
+
+export const SmallSize: Story = {
+  args: {
+    tags: initialTags,
+    placeholder: "Tags compacts",
+    size: "sm",
+    allowCreate: true,
+  },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <ControlledTagInput {...args} />
+    </div>
+  ),
+}
+
+export const LargeSize: Story = {
+  args: {
+    tags: initialTags,
+    placeholder: "Grands tags",
+    size: "lg",
+    allowCreate: true,
+  },
+  render: (args) => (
+    <div style={{ width: 450 }}>
+      <ControlledTagInput {...args} />
+    </div>
+  ),
+}
+
+export const NoDuplicates: Story = {
+  args: {
+    tags: initialTags,
+    placeholder: "Pas de doublons",
+    allowDuplicates: false,
+    allowCreate: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <ControlledTagInput {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-team-banner/WakaTeamBanner.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaTeamBanner } from "./index"
+
+const meta: Meta<typeof WakaTeamBanner> = {
+  title: "UI/WakaTeamBanner",
+  component: WakaTeamBanner,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: { control: "select", options: ["default", "compact", "hero"], description: "Variante" },
+    showMembers: { control: "boolean", description: "Afficher les membres" },
+    showStats: { control: "boolean", description: "Afficher les stats" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTeamBanner>
+
+const team = {
+  name: "Équipe Alpha",
+  description: "Une équipe passionnée par l'innovation",
+  logo: "https://picsum.photos/seed/team/100/100",
+  members: [
+    { id: "1", name: "Alice", avatar: "https://i.pravatar.cc/150?u=alice", role: "Lead" },
+    { id: "2", name: "Bob", avatar: "https://i.pravatar.cc/150?u=bob", role: "Dev" },
+    { id: "3", name: "Charlie", avatar: "https://i.pravatar.cc/150?u=charlie", role: "Design" },
+  ],
+  stats: { projects: 12, members: 8, achievements: 24 },
+}
+
+export const Default: Story = {
+  args: { team, variant: "default", showMembers: true, showStats: true },
+  render: (args) => <WakaTeamBanner {...args} />,
+}
+
+export const Compact: Story = {
+  args: { team, variant: "compact", showMembers: true, showStats: false },
+  render: (args) => <WakaTeamBanner {...args} />,
+}
+
+export const Hero: Story = {
+  args: { team, variant: "hero", showMembers: true, showStats: true },
+  render: (args) => <WakaTeamBanner {...args} />,
+}
+
+export const NoMembers: Story = {
+  args: { team, variant: "default", showMembers: false, showStats: true },
+  render: (args) => <WakaTeamBanner {...args} />,
+}
+

package/src/components/waka-theme-creator/WakaThemeCreator.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaThemeCreator } from "./index"
+
+const meta: Meta<typeof WakaThemeCreator> = {
+  title: "Themes/WakaThemeCreator",
+  component: WakaThemeCreator,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    showPreview: { control: "boolean", description: "Afficher l'aperçu" },
+    showExport: { control: "boolean", description: "Permettre l'export" },
+    showImport: { control: "boolean", description: "Permettre l'import" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaThemeCreator>
+
+const defaultColors = {
+  primary: "#3b82f6",
+  secondary: "#6366f1",
+  background: "#ffffff",
+  foreground: "#0f172a",
+  muted: "#f1f5f9",
+  accent: "#f59e0b",
+}
+
+export const Default: Story = {
+  args: { initialColors: defaultColors, showPreview: true, showExport: true, showImport: true },
+  render: (args) => <WakaThemeCreator {...args} />,
+}
+
+export const DarkTheme: Story = {
+  args: {
+    initialColors: {
+      primary: "#8b5cf6",
+      secondary: "#ec4899",
+      background: "#0f172a",
+      foreground: "#f8fafc",
+      muted: "#1e293b",
+      accent: "#22c55e",
+    },
+    showPreview: true,
+    showExport: true,
+  },
+  render: (args) => <WakaThemeCreator {...args} />,
+}
+
+export const MinimalUI: Story = {
+  args: { initialColors: defaultColors, showPreview: false, showExport: false, showImport: false },
+  render: (args) => <WakaThemeCreator {...args} />,
+}
+
+export const WithPreviewOnly: Story = {
+  args: { initialColors: defaultColors, showPreview: true, showExport: false },
+  render: (args) => <WakaThemeCreator {...args} />,
+}
+

package/src/components/waka-theme-manager/WakaThemeManager.stories.tsx

@@ -0,0 +1,298 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaThemeManager, type TweakCNTheme } from "./index"
+
+const meta: Meta<typeof WakaThemeManager> = {
+  title: "Themes/WakaThemeManager",
+  component: WakaThemeManager,
+  parameters: { layout: "fullscreen" },
+  tags: ["autodocs"],
+  argTypes: {
+    showPreview: {
+      control: "boolean",
+      description: "Afficher la prévisualisation",
+    },
+    showExport: {
+      control: "boolean",
+      description: "Permettre l'export du thème",
+    },
+    showImport: {
+      control: "boolean",
+      description: "Permettre l'import de thème",
+    },
+    allowCustomColors: {
+      control: "boolean",
+      description: "Permettre la modification des couleurs",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "base", "lg", "full"],
+      description: "Taille du composant",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaThemeManager>
+
+const defaultTheme: TweakCNTheme = {
+  name: "Mon thème personnalisé",
+  description: "Un thème moderne et élégant",
+  author: "Wakastart",
+  version: "1.0.0",
+  colors: {
+    background: "#ffffff",
+    foreground: "#0a0a0a",
+    card: "#ffffff",
+    cardForeground: "#0a0a0a",
+    popover: "#ffffff",
+    popoverForeground: "#0a0a0a",
+    primary: "#0a0a0a",
+    primaryForeground: "#fafafa",
+    secondary: "#f4f4f5",
+    secondaryForeground: "#0a0a0a",
+    muted: "#f4f4f5",
+    mutedForeground: "#737373",
+    accent: "#f4f4f5",
+    accentForeground: "#0a0a0a",
+    destructive: "#ef4444",
+    destructiveForeground: "#fafafa",
+    border: "#e4e4e7",
+    input: "#e4e4e7",
+    ring: "#0a0a0a",
+  },
+}
+
+const oceanTheme: TweakCNTheme = {
+  name: "Océan",
+  description: "Thème inspiré de l'océan",
+  author: "Wakastart",
+  version: "1.0.0",
+  colors: {
+    background: "#f0f9ff",
+    foreground: "#0c4a6e",
+    card: "#ffffff",
+    cardForeground: "#0c4a6e",
+    popover: "#ffffff",
+    popoverForeground: "#0c4a6e",
+    primary: "#0284c7",
+    primaryForeground: "#ffffff",
+    secondary: "#e0f2fe",
+    secondaryForeground: "#0369a1",
+    muted: "#f0f9ff",
+    mutedForeground: "#64748b",
+    accent: "#bae6fd",
+    accentForeground: "#0c4a6e",
+    destructive: "#ef4444",
+    destructiveForeground: "#ffffff",
+    border: "#bae6fd",
+    input: "#e0f2fe",
+    ring: "#0284c7",
+    chart1: "#0284c7",
+    chart2: "#0ea5e9",
+    chart3: "#38bdf8",
+    chart4: "#7dd3fc",
+    chart5: "#bae6fd",
+  },
+}
+
+const sunsetTheme: TweakCNTheme = {
+  name: "Coucher de soleil",
+  description: "Thème aux couleurs chaudes",
+  author: "Wakastart",
+  version: "1.0.0",
+  colors: {
+    background: "#fffbeb",
+    foreground: "#78350f",
+    card: "#ffffff",
+    cardForeground: "#78350f",
+    popover: "#ffffff",
+    popoverForeground: "#78350f",
+    primary: "#f97316",
+    primaryForeground: "#ffffff",
+    secondary: "#fed7aa",
+    secondaryForeground: "#9a3412",
+    muted: "#fef3c7",
+    mutedForeground: "#92400e",
+    accent: "#fdba74",
+    accentForeground: "#78350f",
+    destructive: "#dc2626",
+    destructiveForeground: "#ffffff",
+    border: "#fed7aa",
+    input: "#fef3c7",
+    ring: "#f97316",
+    chart1: "#f97316",
+    chart2: "#fb923c",
+    chart3: "#fdba74",
+    chart4: "#fed7aa",
+    chart5: "#ffedd5",
+  },
+}
+
+export const Default: Story = {
+  args: {
+    showPreview: true,
+    showExport: true,
+    showImport: true,
+    allowCustomColors: true,
+    size: "base",
+  },
+  render: (args) => (
+    <div className="p-6">
+      <WakaThemeManager {...args} />
+    </div>
+  ),
+}
+
+export const WithInitialTheme: Story = {
+  args: {
+    initialTheme: oceanTheme,
+    showPreview: true,
+    showExport: true,
+    showImport: true,
+    allowCustomColors: true,
+  },
+  render: (args) => (
+    <div className="p-6">
+      <WakaThemeManager {...args} />
+    </div>
+  ),
+}
+
+export const SunsetTheme: Story = {
+  args: {
+    initialTheme: sunsetTheme,
+    showPreview: true,
+    showExport: true,
+    showImport: true,
+    allowCustomColors: true,
+  },
+  render: (args) => (
+    <div className="p-6">
+      <WakaThemeManager {...args} />
+    </div>
+  ),
+}
+
+export const ExportOnly: Story = {
+  args: {
+    initialTheme: defaultTheme,
+    showPreview: true,
+    showExport: true,
+    showImport: false,
+    allowCustomColors: false,
+  },
+  render: (args) => (
+    <div className="p-6">
+      <WakaThemeManager {...args} />
+    </div>
+  ),
+}
+
+export const ImportOnly: Story = {
+  args: {
+    showPreview: true,
+    showExport: false,
+    showImport: true,
+    allowCustomColors: false,
+  },
+  render: (args) => (
+    <div className="p-6">
+      <WakaThemeManager {...args} />
+    </div>
+  ),
+}
+
+export const NoColorEditor: Story = {
+  args: {
+    initialTheme: oceanTheme,
+    showPreview: true,
+    showExport: true,
+    showImport: true,
+    allowCustomColors: false,
+  },
+  render: (args) => (
+    <div className="p-6">
+      <WakaThemeManager {...args} />
+    </div>
+  ),
+}
+
+export const NoPreview: Story = {
+  args: {
+    showPreview: false,
+    showExport: true,
+    showImport: true,
+    allowCustomColors: true,
+  },
+  render: (args) => (
+    <div className="p-6">
+      <WakaThemeManager {...args} />
+    </div>
+  ),
+}
+
+export const SmallSize: Story = {
+  args: {
+    initialTheme: defaultTheme,
+    showPreview: true,
+    showExport: true,
+    showImport: true,
+    allowCustomColors: true,
+    size: "sm",
+  },
+  render: (args) => (
+    <div className="p-6">
+      <WakaThemeManager {...args} />
+    </div>
+  ),
+}
+
+export const LargeSize: Story = {
+  args: {
+    initialTheme: defaultTheme,
+    showPreview: true,
+    showExport: true,
+    showImport: true,
+    allowCustomColors: true,
+    size: "lg",
+  },
+  render: (args) => (
+    <div className="p-6">
+      <WakaThemeManager {...args} />
+    </div>
+  ),
+}
+
+export const FullWidth: Story = {
+  args: {
+    initialTheme: defaultTheme,
+    showPreview: true,
+    showExport: true,
+    showImport: true,
+    allowCustomColors: true,
+    size: "full",
+  },
+  render: (args) => (
+    <div className="p-6">
+      <WakaThemeManager {...args} />
+    </div>
+  ),
+}
+
+export const WithCallbacks: Story = {
+  args: {
+    initialTheme: defaultTheme,
+    showPreview: true,
+    showExport: true,
+    showImport: true,
+    allowCustomColors: true,
+    onThemeChange: (theme) => console.log("Theme changed:", theme),
+    onThemeSave: (theme) => console.log("Theme saved:", theme),
+    onThemeLoad: (theme) => console.log("Theme loaded:", theme),
+  },
+  render: (args) => (
+    <div className="p-6">
+      <WakaThemeManager {...args} />
+    </div>
+  ),
+}

package/src/components/waka-theme-manager/index.tsx

@@ -132,9 +132,9 @@ const WakaThemeManager = React.forwardRef<HTMLDivElement, WakaThemeManagerProps>
   }, ref) => {
     // Utiliser le contexte de thème (optionnel)
     const themeContext = useThemeSafe()
-    const contextTheme = themeContext?.theme
+    const contextTheme = themeContext?.currentTheme
     const themes = themeContext?.themes || []
-    const setTheme = themeContext?.setTheme
+    const changeTheme = themeContext?.changeTheme
     
     const [currentTheme, setCurrentTheme] = useState<TweakCNTheme>(
       initialTheme || {
@@ -180,17 +180,12 @@ const WakaThemeManager = React.forwardRef<HTMLDivElement, WakaThemeManagerProps>
       })
       
       // Mettre à jour le contexte de thème si disponible
-      if (setTheme) {
+      if (changeTheme) {
         // Créer un thème compatible avec le contexte
-        const contextTheme = {
-          id: theme.name.toLowerCase().replace(/\s+/g, '-'),
-          label: theme.name,
-          description: theme.description || "",
-          previewColor: theme.colors.primary
-        }
-        setTheme(contextTheme.id)
+        const themeId = theme.name.toLowerCase().replace(/\s+/g, '-')
+        changeTheme(themeId)
       }
-    }, [setTheme])
+    }, [changeTheme])
 
     // Charger un thème depuis une URL JSON
     const loadThemeFromUrl = async (url: string) => {