@wakastellar/ui 2.3.5 → 3.0.0

package/src/components/waka-checkout-stepper/WakaCheckoutStepper.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCheckoutStepper, type CheckoutStep } from "./index"
+import { useState } from "react"
+
+const meta: Meta<typeof WakaCheckoutStepper> = {
+  title: "E-commerce/WakaCheckoutStepper",
+  component: WakaCheckoutStepper,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    currentStep: {
+      control: { type: "number", min: 0, max: 4 },
+      description: "Index de l'étape courante",
+    },
+    orientation: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "Orientation du stepper",
+    },
+    showStepContent: {
+      control: "boolean",
+      description: "Afficher le contenu des étapes",
+    },
+    allowNavigation: {
+      control: "boolean",
+      description: "Permettre la navigation entre étapes",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCheckoutStepper>
+
+const checkoutSteps: CheckoutStep[] = [
+  { id: "cart", title: "Panier", description: "Vérifiez vos articles" },
+  { id: "shipping", title: "Livraison", description: "Adresse de livraison" },
+  { id: "payment", title: "Paiement", description: "Mode de paiement" },
+  { id: "review", title: "Confirmation", description: "Vérifiez votre commande" },
+]
+
+export const Default: Story = {
+  args: {
+    steps: checkoutSteps,
+    currentStep: 1,
+    orientation: "horizontal",
+  },
+  render: (args) => <WakaCheckoutStepper {...args} />,
+}
+
+export const Vertical: Story = {
+  args: {
+    steps: checkoutSteps,
+    currentStep: 2,
+    orientation: "vertical",
+  },
+  render: (args) => (
+    <div style={{ maxHeight: 400 }}>
+      <WakaCheckoutStepper {...args} />
+    </div>
+  ),
+}
+
+export const FirstStep: Story = {
+  args: {
+    steps: checkoutSteps,
+    currentStep: 0,
+    orientation: "horizontal",
+  },
+  render: (args) => <WakaCheckoutStepper {...args} />,
+}
+
+export const LastStep: Story = {
+  args: {
+    steps: checkoutSteps,
+    currentStep: 3,
+    orientation: "horizontal",
+  },
+  render: (args) => <WakaCheckoutStepper {...args} />,
+}
+
+export const WithError: Story = {
+  args: {
+    steps: checkoutSteps.map((step, i) => 
+      i === 2 ? { ...step, status: "error" as const } : step
+    ),
+    currentStep: 2,
+    orientation: "horizontal",
+  },
+  render: (args) => <WakaCheckoutStepper {...args} />,
+}
+
+export const AllCompleted: Story = {
+  args: {
+    steps: checkoutSteps.map(step => ({ ...step, status: "completed" as const })),
+    currentStep: 4,
+    orientation: "horizontal",
+  },
+  render: (args) => <WakaCheckoutStepper {...args} />,
+}
+

package/src/components/waka-cohort-table/WakaCohortTable.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCohortTable, type CohortRow } from "./index"
+
+const meta: Meta<typeof WakaCohortTable> = {
+  title: "Admin/WakaCohortTable",
+  component: WakaCohortTable,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    metric: { control: "select", options: ["retention", "churn", "revenue", "engagement"], description: "Métrique" },
+    period: { control: "select", options: ["day", "week", "month", "quarter"], description: "Période" },
+    showExport: { control: "boolean", description: "Exporter" },
+    colorScale: { control: "select", options: ["green", "blue", "purple", "red"], description: "Échelle de couleur" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCohortTable>
+
+const cohorts: CohortRow[] = [
+  { id: "jan", label: "Jan 2024", size: 1000, data: [{ value: 100 }, { value: 85 }, { value: 72 }, { value: 68 }, { value: 60 }] },
+  { id: "feb", label: "Fév 2024", size: 1200, data: [{ value: 100 }, { value: 82 }, { value: 70 }, { value: 65 }] },
+  { id: "mar", label: "Mar 2024", size: 950, data: [{ value: 100 }, { value: 88 }, { value: 75 }] },
+  { id: "apr", label: "Avr 2024", size: 1100, data: [{ value: 100 }, { value: 90 }] },
+  { id: "may", label: "Mai 2024", size: 1300, data: [{ value: 100 }] },
+]
+
+export const Default: Story = {
+  args: { cohorts, metric: "retention", period: "month", showExport: true },
+  render: (args) => <WakaCohortTable {...args} />,
+}
+
+export const ChurnMetric: Story = {
+  args: {
+    cohorts: cohorts.map(c => ({ ...c, data: c.data.map((d, i) => ({ value: i === 0 ? 0 : 100 - d.value })) })),
+    metric: "churn",
+    period: "month",
+    colorScale: "red",
+  },
+  render: (args) => <WakaCohortTable {...args} />,
+}
+
+export const WeeklyPeriod: Story = {
+  args: {
+    cohorts: cohorts.slice(0, 4).map((c, i) => ({ ...c, id: `w${i}`, label: `Semaine ${i + 1}` })),
+    metric: "retention",
+    period: "week",
+  },
+  render: (args) => <WakaCohortTable {...args} />,
+}
+
+export const CompactView: Story = {
+  args: { cohorts: cohorts.slice(0, 3), metric: "retention", showExport: false },
+  render: (args) => <WakaCohortTable {...args} />,
+}
+

package/src/components/waka-color-picker/WakaColorPicker.stories.tsx

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaColorPicker } from "./index"
+import { useState } from "react"
+
+const meta: Meta<typeof WakaColorPicker> = {
+  title: "Forms/WakaColorPicker",
+  component: WakaColorPicker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: "color",
+      description: "Valeur de la couleur",
+    },
+    format: {
+      control: "select",
+      options: ["hex", "rgb", "hsl"],
+      description: "Format de la couleur",
+    },
+    showAlpha: {
+      control: "boolean",
+      description: "Afficher le canal alpha",
+    },
+    showPresets: {
+      control: "boolean",
+      description: "Afficher les couleurs prédéfinies",
+    },
+    showEyeDropper: {
+      control: "boolean",
+      description: "Afficher l'outil EyeDropper",
+    },
+    disabled: {
+      control: "boolean",
+      description: "État désactivé",
+    },
+    placeholder: {
+      control: "text",
+      description: "Texte placeholder",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Taille du composant",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaColorPicker>
+
+export const Default: Story = {
+  args: {
+    value: "#3b82f6",
+    format: "hex",
+    showPresets: true,
+    showEyeDropper: true,
+    size: "md",
+  },
+  render: (args) => <WakaColorPicker {...args} />,
+}
+
+export const WithAlpha: Story = {
+  args: {
+    value: "rgba(59, 130, 246, 0.5)",
+    format: "rgb",
+    showAlpha: true,
+    showPresets: true,
+  },
+  render: (args) => <WakaColorPicker {...args} />,
+}
+
+export const RGBFormat: Story = {
+  args: {
+    value: "rgb(239, 68, 68)",
+    format: "rgb",
+    showPresets: true,
+  },
+  render: (args) => <WakaColorPicker {...args} />,
+}
+
+export const HSLFormat: Story = {
+  args: {
+    value: "hsl(262, 83%, 58%)",
+    format: "hsl",
+    showPresets: true,
+  },
+  render: (args) => <WakaColorPicker {...args} />,
+}
+
+export const CustomPresets: Story = {
+  args: {
+    value: "#10b981",
+    format: "hex",
+    showPresets: true,
+    presets: [
+      "#1f2937", "#374151", "#6b7280", "#9ca3af",
+      "#dc2626", "#ea580c", "#ca8a04", "#16a34a",
+      "#0891b2", "#2563eb", "#7c3aed", "#c026d3",
+    ],
+  },
+  render: (args) => <WakaColorPicker {...args} />,
+}
+
+export const SmallSize: Story = {
+  args: {
+    value: "#ef4444",
+    format: "hex",
+    size: "sm",
+    showPresets: false,
+  },
+  render: (args) => <WakaColorPicker {...args} />,
+}
+
+export const LargeSize: Story = {
+  args: {
+    value: "#8b5cf6",
+    format: "hex",
+    size: "lg",
+    showPresets: true,
+    showEyeDropper: true,
+  },
+  render: (args) => <WakaColorPicker {...args} />,
+}
+
+export const Disabled: Story = {
+  args: {
+    value: "#6366f1",
+    format: "hex",
+    disabled: true,
+  },
+  render: (args) => <WakaColorPicker {...args} />,
+}
+
+export const WithoutPresets: Story = {
+  args: {
+    value: "#f97316",
+    format: "hex",
+    showPresets: false,
+    showEyeDropper: false,
+  },
+  render: (args) => <WakaColorPicker {...args} />,
+}

package/src/components/waka-combo-counter/WakaComboCounter.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaComboCounter, useComboCounter } from "./index"
+import { Button } from "../button"
+import * as React from "react"
+
+const InteractiveDemo = () => {
+  const { combo, multiplier, timeRemaining, increment, reset } = useComboCounter({
+    timerDuration: 3000,
+    autoDecay: true,
+  })
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <WakaComboCounter
+        combo={combo}
+        multiplier={multiplier}
+        timeRemaining={timeRemaining}
+        size="lg"
+        showTimer
+        showMultiplier
+        animated
+      />
+      <div className="flex gap-2">
+        <Button onClick={() => increment()}>+1 Combo</Button>
+        <Button onClick={() => increment(5)} variant="secondary">+5 Combo</Button>
+        <Button onClick={reset} variant="destructive">Reset</Button>
+      </div>
+    </div>
+  )
+}
+
+const meta: Meta<typeof WakaComboCounter> = {
+  title: "Components/Gamification/WakaComboCounter",
+  component: WakaComboCounter,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "xl"],
+      description: "Size variant",
+    },
+    intensity: {
+      control: "select",
+      options: ["low", "medium", "high", "extreme"],
+      description: "Visual intensity",
+    },
+    showTimer: {
+      control: "boolean",
+      description: "Show timer bar",
+    },
+    showMultiplier: {
+      control: "boolean",
+      description: "Show multiplier badge",
+    },
+    animated: {
+      control: "boolean",
+      description: "Enable animations",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaComboCounter>
+
+export const Default: Story = {
+  args: {
+    combo: 15,
+    multiplier: 2,
+    timeRemaining: 75,
+    size: "md",
+    intensity: "medium",
+    showTimer: true,
+    showMultiplier: true,
+    animated: true,
+  },
+  render: (args) => <WakaComboCounter {...args} />,
+}
+
+export const HighCombo: Story = {
+  args: {
+    combo: 50,
+    multiplier: 5,
+    timeRemaining: 60,
+    size: "lg",
+    intensity: "high",
+    showTimer: true,
+    showMultiplier: true,
+    animated: true,
+  },
+  render: (args) => <WakaComboCounter {...args} />,
+}
+
+export const Extreme: Story = {
+  args: {
+    combo: 100,
+    multiplier: 10,
+    maxMultiplier: 10,
+    timeRemaining: 40,
+    size: "xl",
+    intensity: "extreme",
+    showTimer: true,
+    showMultiplier: true,
+    animated: true,
+  },
+  render: (args) => <WakaComboCounter {...args} />,
+}
+
+export const Compact: Story = {
+  args: {
+    combo: 8,
+    multiplier: 1,
+    timeRemaining: 90,
+    size: "sm",
+    intensity: "low",
+    showTimer: true,
+    showMultiplier: false,
+    animated: true,
+  },
+  render: (args) => <WakaComboCounter {...args} />,
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveDemo />,
+}
+

package/src/components/waka-combobox/WakaCombobox.stories.tsx

@@ -0,0 +1,250 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaCombobox, type ComboboxOption } from './index'
+import * as React from 'react'
+import { User, Building, Globe } from 'lucide-react'
+
+const meta: Meta<typeof WakaCombobox> = {
+  title: 'Components/Forms/WakaCombobox',
+  component: WakaCombobox,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A combobox component with single/multi-select, async search, and option creation.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    multiple: {
+      control: 'boolean',
+      description: 'Enable multi-select mode',
+    },
+    creatable: {
+      control: 'boolean',
+      description: 'Allow creating new options',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the component',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the component',
+    },
+    clearable: {
+      control: 'boolean',
+      description: 'Allow clearing the selection',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCombobox>
+
+const frameworks: ComboboxOption[] = [
+  { value: 'nextjs', label: 'Next.js', description: 'The React Framework' },
+  { value: 'sveltekit', label: 'SvelteKit', description: 'Web development, streamlined' },
+  { value: 'nuxt', label: 'Nuxt', description: 'The Intuitive Vue Framework' },
+  { value: 'remix', label: 'Remix', description: 'Build better websites' },
+  { value: 'astro', label: 'Astro', description: 'The web framework for content' },
+]
+
+const groupedOptions: ComboboxOption[] = [
+  { value: 'john', label: 'John Doe', group: 'Users', icon: <User className="h-4 w-4" /> },
+  { value: 'jane', label: 'Jane Smith', group: 'Users', icon: <User className="h-4 w-4" /> },
+  { value: 'acme', label: 'Acme Inc', group: 'Organizations', icon: <Building className="h-4 w-4" /> },
+  { value: 'globex', label: 'Globex Corp', group: 'Organizations', icon: <Building className="h-4 w-4" /> },
+  { value: 'us', label: 'United States', group: 'Countries', icon: <Globe className="h-4 w-4" /> },
+  { value: 'uk', label: 'United Kingdom', group: 'Countries', icon: <Globe className="h-4 w-4" /> },
+]
+
+export const Default: Story = {
+  render: function ComboboxDemo() {
+    const [value, setValue] = React.useState<string | string[] | undefined>()
+
+    return (
+      <div className="w-[300px]">
+        <WakaCombobox
+          options={frameworks}
+          value={value as string}
+          onChange={(v) => setValue(v as string)}
+          placeholder="Select a framework..."
+        />
+      </div>
+    )
+  },
+}
+
+export const Multiple: Story = {
+  render: function MultipleDemo() {
+    const [value, setValue] = React.useState<string[] | undefined>()
+
+    return (
+      <div className="w-[300px]">
+        <WakaCombobox
+          options={frameworks}
+          value={value}
+          onChange={(v) => setValue(v as string[])}
+          multiple
+          placeholder="Select frameworks..."
+        />
+      </div>
+    )
+  },
+}
+
+export const WithGroups: Story = {
+  render: function GroupsDemo() {
+    const [value, setValue] = React.useState<string | undefined>()
+
+    return (
+      <div className="w-[300px]">
+        <WakaCombobox
+          options={groupedOptions}
+          value={value}
+          onChange={(v) => setValue(v as string)}
+          placeholder="Search..."
+        />
+      </div>
+    )
+  },
+}
+
+export const Creatable: Story = {
+  render: function CreatableDemo() {
+    const [value, setValue] = React.useState<string | undefined>()
+
+    return (
+      <div className="w-[300px]">
+        <WakaCombobox
+          options={frameworks}
+          value={value}
+          onChange={(v) => setValue(v as string)}
+          creatable
+          createLabel="Add"
+          placeholder="Select or create..."
+        />
+      </div>
+    )
+  },
+}
+
+export const AsyncSearch: Story = {
+  render: function AsyncDemo() {
+    const [value, setValue] = React.useState<string | undefined>()
+    const [loading, setLoading] = React.useState(false)
+
+    const searchFn = async (query: string): Promise<ComboboxOption[]> => {
+      setLoading(true)
+      await new Promise((resolve) => setTimeout(resolve, 500))
+      setLoading(false)
+      return frameworks.filter((f) =>
+        f.label.toLowerCase().includes(query.toLowerCase())
+      )
+    }
+
+    return (
+      <div className="w-[300px]">
+        <WakaCombobox
+          options={frameworks}
+          value={value}
+          onChange={(v) => setValue(v as string)}
+          onSearch={searchFn}
+          loading={loading}
+          placeholder="Search frameworks..."
+        />
+      </div>
+    )
+  },
+}
+
+export const WithMaxSelections: Story = {
+  render: function MaxSelectionsDemo() {
+    const [value, setValue] = React.useState<string[]>([])
+
+    return (
+      <div className="w-[300px]">
+        <WakaCombobox
+          options={frameworks}
+          value={value}
+          onChange={(v) => setValue((v as string[]) || [])}
+          multiple
+          maxSelections={3}
+          placeholder="Select up to 3..."
+        />
+        <p className="text-xs text-muted-foreground mt-2">
+          Selected: {value.length}/3
+        </p>
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: function SizesDemo() {
+    const [value, setValue] = React.useState<string | undefined>()
+
+    return (
+      <div className="space-y-4 w-[300px]">
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Small</p>
+          <WakaCombobox
+            options={frameworks}
+            value={value}
+            onChange={(v) => setValue(v as string)}
+            size="sm"
+            placeholder="Select..."
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Medium</p>
+          <WakaCombobox
+            options={frameworks}
+            value={value}
+            onChange={(v) => setValue(v as string)}
+            size="md"
+            placeholder="Select..."
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Large</p>
+          <WakaCombobox
+            options={frameworks}
+            value={value}
+            onChange={(v) => setValue(v as string)}
+            size="lg"
+            placeholder="Select..."
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithError: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <WakaCombobox
+        options={frameworks}
+        error
+        placeholder="Required field..."
+      />
+      <p className="text-sm text-destructive mt-1">This field is required</p>
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <WakaCombobox
+        options={frameworks}
+        value="nextjs"
+        disabled
+        placeholder="Disabled..."
+      />
+    </div>
+  ),
+}