@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-credit-card-input/WakaCreditCardInput.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCreditCardInput } from "./index"
+import { useState } from "react"
+
+const meta: Meta<typeof WakaCreditCardInput> = {
+  title: "E-commerce/WakaCreditCardInput",
+  component: WakaCreditCardInput,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    showCardPreview: {
+      control: "boolean",
+      description: "Afficher l'aperçu de la carte",
+    },
+    showCardType: {
+      control: "boolean",
+      description: "Afficher le type de carte détecté",
+    },
+    disabled: {
+      control: "boolean",
+      description: "État désactivé",
+    },
+    layout: {
+      control: "select",
+      options: ["stacked", "inline"],
+      description: "Disposition des champs",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Taille des champs",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditCardInput>
+
+export const Default: Story = {
+  args: {
+    showCardPreview: true,
+    showCardType: true,
+    layout: "stacked",
+    size: "md",
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaCreditCardInput {...args} />
+    </div>
+  ),
+}
+
+export const InlineLayout: Story = {
+  args: {
+    showCardPreview: false,
+    showCardType: true,
+    layout: "inline",
+    size: "md",
+  },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaCreditCardInput {...args} />
+    </div>
+  ),
+}
+
+export const WithoutPreview: Story = {
+  args: {
+    showCardPreview: false,
+    showCardType: true,
+    layout: "stacked",
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaCreditCardInput {...args} />
+    </div>
+  ),
+}
+
+export const SmallSize: Story = {
+  args: {
+    showCardPreview: true,
+    size: "sm",
+    layout: "stacked",
+  },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaCreditCardInput {...args} />
+    </div>
+  ),
+}
+
+export const LargeSize: Story = {
+  args: {
+    showCardPreview: true,
+    size: "lg",
+    layout: "stacked",
+  },
+  render: (args) => (
+    <div style={{ width: 450 }}>
+      <WakaCreditCardInput {...args} />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    showCardPreview: true,
+    disabled: true,
+    layout: "stacked",
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaCreditCardInput {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-datetime-picker.form-integration/WakaDateTimePickerForm.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { WakaDateTimePickerForm } from "./index"
+
+type FormValues = {
+  date: Date | null
+  range: { from: Date | undefined; to: Date | undefined } | null
+}
+
+const meta: Meta<typeof WakaDateTimePickerForm> = {
+  title: "Forms/WakaDateTimePickerForm",
+  component: WakaDateTimePickerForm,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    label: { control: "text", description: "Label du champ" },
+    placeholder: { control: "text", description: "Placeholder" },
+    variant: { control: "select", options: ["date", "datetime", "range"], description: "Variante" },
+    showPresets: { control: "boolean", description: "Afficher les presets" },
+    disabled: { control: "boolean", description: "Désactivé" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDateTimePickerForm>
+
+const FormExample = (props: { variant: "date" | "datetime" | "range"; label: string }) => {
+  const { control } = useForm<FormValues>({
+    defaultValues: {
+      date: new Date(),
+      range: {
+        from: new Date(),
+        to: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000),
+      },
+    },
+  })
+
+  const name = props.variant === "range" ? "range" : "date"
+
+  return (
+    <form className="tw-space-y-4">
+      <WakaDateTimePickerForm
+        name={name}
+        control={control}
+        label={props.label}
+        variant={props.variant}
+        showPresets
+      />
+    </form>
+  )
+}
+
+export const DateOnly: Story = {
+  args: {
+    label: "Date",
+    variant: "date",
+  },
+  render: (args) => <FormExample label={args.label ?? "Date"} variant="date" />,
+}
+
+export const DateTime: Story = {
+  args: {
+    label: "Date et heure",
+    variant: "datetime",
+  },
+  render: (args) => <FormExample label={args.label ?? "Date et heure"} variant="datetime" />,
+}
+
+export const Range: Story = {
+  args: {
+    label: "Période",
+    variant: "range",
+  },
+  render: (args) => <FormExample label={args.label ?? "Période"} variant="range" />,
+}
+

package/src/components/waka-dependency-tree/WakaDependencyTree.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaDependencyTree, type Dependency } from "./index"
+
+const meta: Meta<typeof WakaDependencyTree> = {
+  title: "DevOps/WakaDependencyTree",
+  component: WakaDependencyTree,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    showVulnerabilities: { control: "boolean", description: "Afficher les vulnérabilités" },
+    showOutdated: { control: "boolean", description: "Afficher les packages obsolètes" },
+    expandAll: { control: "boolean", description: "Tout déplier" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDependencyTree>
+
+const dependencies: Dependency[] = [
+  {
+    id: "react",
+    name: "react",
+    version: "18.2.0",
+    type: "direct",
+    vulnerability: "none",
+    children: [
+      { id: "react-dom", name: "react-dom", version: "18.2.0", type: "direct", vulnerability: "none" },
+    ],
+  },
+  {
+    id: "lodash",
+    name: "lodash",
+    version: "4.17.20",
+    type: "direct",
+    vulnerability: "high",
+    latestVersion: "4.17.21",
+  },
+  {
+    id: "axios",
+    name: "axios",
+    version: "0.21.1",
+    type: "direct",
+    vulnerability: "critical",
+    latestVersion: "1.6.0",
+    children: [
+      { id: "follow-redirects", name: "follow-redirects", version: "1.14.0", type: "transitive", vulnerability: "medium" },
+    ],
+  },
+  {
+    id: "typescript",
+    name: "typescript",
+    version: "5.0.0",
+    type: "dev",
+    vulnerability: "none",
+  },
+]
+
+export const Default: Story = {
+  args: { dependencies, showVulnerabilities: true, showOutdated: true },
+  render: (args) => <WakaDependencyTree {...args} />,
+}
+
+export const ExpandedAll: Story = {
+  args: { dependencies, showVulnerabilities: true, expandAll: true },
+  render: (args) => <WakaDependencyTree {...args} />,
+}
+
+export const VulnerabilitiesOnly: Story = {
+  args: { dependencies: dependencies.filter(d => d.vulnerability !== "none"), showVulnerabilities: true },
+  render: (args) => <WakaDependencyTree {...args} />,
+}
+

package/src/components/waka-device-trust/WakaDeviceTrust.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaDeviceTrust, type TrustedDevice } from "./index"
+
+const meta: Meta<typeof WakaDeviceTrust> = {
+  title: "Security/WakaDeviceTrust",
+  component: WakaDeviceTrust,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    size: { control: "select", options: ["sm", "md", "lg"], description: "Taille du composant" },
+    showDetails: { control: "boolean", description: "Afficher les details" },
+    loading: { control: "boolean", description: "Etat de chargement" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDeviceTrust>
+
+const devices: TrustedDevice[] = [
+  {
+    id: "1",
+    name: "MacBook Pro",
+    type: "laptop",
+    status: "trusted",
+    trustedAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+    lastUsedAt: new Date(),
+    isCurrentDevice: true,
+    os: "macOS 14.0",
+    browser: "Chrome 120",
+  },
+  {
+    id: "2",
+    name: "iPhone 15",
+    type: "mobile",
+    status: "trusted",
+    trustedAt: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000),
+    lastUsedAt: new Date(Date.now() - 3600000),
+    os: "iOS 17",
+    browser: "Safari",
+  },
+  {
+    id: "3",
+    name: "Windows PC",
+    type: "desktop",
+    status: "pending",
+    trustedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
+    lastUsedAt: new Date(Date.now() - 86400000),
+    os: "Windows 11",
+    browser: "Edge",
+  },
+]
+
+export const Default: Story = {
+  args: {
+    devices,
+    currentDeviceId: "1",
+    onAddDevice: () => console.log("Add device clicked"),
+    onRemoveDevice: async (id) => {
+      console.log("Remove device:", id)
+      return true
+    },
+  },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaDeviceTrust {...args} />
+    </div>
+  ),
+}
+
+export const AllTrusted: Story = {
+  args: {
+    devices: devices.map((d) => ({ ...d, status: "trusted" as const })),
+    currentDeviceId: "1",
+    onRemoveDevice: async (id) => {
+      console.log("Remove device:", id)
+      return true
+    },
+  },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaDeviceTrust {...args} />
+    </div>
+  ),
+}
+
+export const SingleDevice: Story = {
+  args: {
+    devices: [devices[0]],
+    currentDeviceId: "1",
+    onAddDevice: () => console.log("Add device clicked"),
+  },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaDeviceTrust {...args} />
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  args: {
+    devices: [],
+    onAddDevice: () => console.log("Add device clicked"),
+  },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaDeviceTrust {...args} />
+    </div>
+  ),
+}

package/src/components/waka-empty-state/WakaEmptyState.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaEmptyState } from "./index"
+import { Inbox, Search, FileX, ShoppingCart } from "lucide-react"
+
+const meta: Meta<typeof WakaEmptyState> = {
+  title: "UI/WakaEmptyState",
+  component: WakaEmptyState,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: { control: "select", options: ["default", "search", "error"], description: "Variante" },
+    size: { control: "select", options: ["sm", "md", "lg"], description: "Taille" },
+    layout: { control: "select", options: ["vertical", "horizontal"], description: "Disposition" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaEmptyState>
+
+export const Default: Story = {
+  args: {
+    title: "Aucun élément",
+    description: "Commencez par ajouter votre premier élément",
+    icon: <Inbox className="tw-h-12 tw-w-12" />,
+    actionLabel: "Ajouter",
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaEmptyState {...args} />
+    </div>
+  ),
+}
+
+export const SearchState: Story = {
+  args: {
+    variant: "search",
+    title: "Aucun résultat",
+    description: "Essayez avec d'autres termes de recherche",
+    icon: <Search className="tw-h-12 tw-w-12" />,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaEmptyState {...args} />
+    </div>
+  ),
+}
+
+SearchState.storyName = "Search"
+
+export const Error: Story = {
+  args: {
+    variant: "error",
+    title: "Erreur de chargement",
+    description: "Impossible de charger les données",
+    icon: <FileX className="tw-h-12 tw-w-12" />,
+    actionLabel: "Réessayer",
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaEmptyState {...args} />
+    </div>
+  ),
+}
+
+export const EmptyCart: Story = {
+  args: {
+    title: "Panier vide",
+    description: "Ajoutez des articles pour continuer",
+    icon: <ShoppingCart className="tw-h-12 tw-w-12" />,
+    actionLabel: "Voir les produits",
+    size: "lg",
+  },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaEmptyState {...args} />
+    </div>
+  ),
+}
+
+export const Small: Story = {
+  args: { title: "Rien ici", description: "Liste vide", size: "sm" },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaEmptyState {...args} />
+    </div>
+  ),
+}

package/src/components/waka-feature-announcement/WakaFeatureAnnouncement.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaFeatureAnnouncement } from "./index"
+
+const meta: Meta<typeof WakaFeatureAnnouncement> = {
+  title: "UI/WakaFeatureAnnouncement",
+  component: WakaFeatureAnnouncement,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: { control: "select", options: ["modal", "banner", "tooltip", "spotlight"], description: "Variante" },
+    showDismiss: { control: "boolean", description: "Bouton fermer" },
+    showNavigation: { control: "boolean", description: "Navigation multi-features" },
+    autoPlay: { control: "boolean", description: "Lecture auto vidéo" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaFeatureAnnouncement>
+
+const features = [
+  { id: "1", title: "Nouveau Dashboard", description: "Découvrez notre interface entièrement repensée", media: { type: "image" as const, src: "https://picsum.photos/seed/feat1/600/400" }, tag: "Nouveau" },
+  { id: "2", title: "Mode sombre", description: "Travaillez confortablement de jour comme de nuit", media: { type: "image" as const, src: "https://picsum.photos/seed/feat2/600/400" }, tag: "Populaire" },
+]
+
+export const Default: Story = {
+  args: { features, variant: "modal", showDismiss: true, showNavigation: true },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaFeatureAnnouncement {...args} />
+    </div>
+  ),
+}
+
+export const Banner: Story = {
+  args: { features: [features[0]], variant: "banner", showDismiss: true },
+  render: (args) => <WakaFeatureAnnouncement {...args} />,
+}
+
+export const SingleFeature: Story = {
+  args: { features: [features[0]], variant: "modal", showNavigation: false },
+  render: (args) => (
+    <div style={{ width: 450 }}>
+      <WakaFeatureAnnouncement {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-feature-flag-row/WakaFeatureFlagRow.stories.tsx

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaFeatureFlagRow, defaultFeatureFlags, type FeatureFlag } from "./index"
+
+const meta: Meta<typeof WakaFeatureFlagRow> = {
+  title: "DevOps/WakaFeatureFlagRow",
+  component: WakaFeatureFlagRow,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    readOnly: { control: "boolean", description: "Mode lecture seule" },
+    compact: { control: "boolean", description: "Mode compact" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaFeatureFlagRow>
+
+const sampleFlag: FeatureFlag = {
+  id: "new-dashboard",
+  key: "new_dashboard",
+  name: "New Dashboard",
+  description: "Nouvelle interface du tableau de bord avec des graphiques améliorés",
+  status: "percentage",
+  enabled: true,
+  percentage: 50,
+  createdAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+  updatedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
+  createdBy: "product-team",
+  environment: "staging",
+  tags: ["dashboard", "experiment"],
+}
+
+const disabledFlag: FeatureFlag = {
+  id: "beta-feature",
+  key: "beta_feature",
+  name: "Beta Feature",
+  description: "Fonctionnalité en cours de développement",
+  status: "disabled",
+  enabled: false,
+  createdAt: new Date(Date.now() - 60 * 24 * 60 * 60 * 1000),
+  updatedAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
+  environment: "development",
+}
+
+const fullRolloutFlag: FeatureFlag = {
+  id: "stable-feature",
+  key: "stable_feature",
+  name: "Stable Feature",
+  description: "Fonctionnalité entièrement déployée en production",
+  status: "enabled",
+  enabled: true,
+  createdAt: new Date(Date.now() - 90 * 24 * 60 * 60 * 1000),
+  updatedAt: new Date(Date.now() - 14 * 24 * 60 * 60 * 1000),
+  environment: "production",
+  tags: ["stable"],
+}
+
+const segmentFlag: FeatureFlag = {
+  id: "premium-feature",
+  key: "premium_feature",
+  name: "Premium Feature",
+  description: "Fonctionnalité réservée aux utilisateurs premium",
+  status: "segment",
+  enabled: true,
+  segments: [
+    { id: "s1", name: "Premium Users", description: "Utilisateurs avec abonnement premium" },
+    { id: "s2", name: "Beta Testers", description: "Testeurs beta approuvés" },
+  ],
+  createdAt: new Date(Date.now() - 45 * 24 * 60 * 60 * 1000),
+  updatedAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000),
+  createdBy: "engineering",
+  environment: "production",
+  tags: ["premium", "targeted"],
+}
+
+export const Default: Story = {
+  args: {
+    flag: sampleFlag,
+    onToggle: (enabled) => console.log("Toggle:", enabled),
+    onPercentageChange: (percentage) => console.log("Percentage:", percentage),
+    onEdit: () => console.log("Edit"),
+    onDelete: () => console.log("Delete"),
+    onViewHistory: () => console.log("View History"),
+    onDuplicate: () => console.log("Duplicate"),
+  },
+  render: (args) => (
+    <div className="max-w-2xl">
+      <WakaFeatureFlagRow {...args} />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    flag: disabledFlag,
+    onToggle: (enabled) => console.log("Toggle:", enabled),
+    onEdit: () => console.log("Edit"),
+  },
+  render: (args) => (
+    <div className="max-w-2xl">
+      <WakaFeatureFlagRow {...args} />
+    </div>
+  ),
+}
+
+export const FullRollout: Story = {
+  args: {
+    flag: fullRolloutFlag,
+    onToggle: (enabled) => console.log("Toggle:", enabled),
+  },
+  render: (args) => (
+    <div className="max-w-2xl">
+      <WakaFeatureFlagRow {...args} />
+    </div>
+  ),
+}
+
+export const WithSegments: Story = {
+  args: {
+    flag: segmentFlag,
+    onToggle: (enabled) => console.log("Toggle:", enabled),
+    onEdit: () => console.log("Edit"),
+    onViewHistory: () => console.log("View History"),
+  },
+  render: (args) => (
+    <div className="max-w-2xl">
+      <WakaFeatureFlagRow {...args} />
+    </div>
+  ),
+}
+
+export const Compact: Story = {
+  args: {
+    flag: sampleFlag,
+    compact: true,
+    onToggle: (enabled) => console.log("Toggle:", enabled),
+  },
+  render: (args) => (
+    <div className="max-w-md">
+      <WakaFeatureFlagRow {...args} />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  args: {
+    flag: sampleFlag,
+    readOnly: true,
+  },
+  render: (args) => (
+    <div className="max-w-2xl">
+      <WakaFeatureFlagRow {...args} />
+    </div>
+  ),
+}
+
+export const MultipleFlags: Story = {
+  render: () => (
+    <div className="max-w-2xl space-y-4">
+      {defaultFeatureFlags.map((flag) => (
+        <WakaFeatureFlagRow
+          key={flag.id}
+          flag={flag}
+          onToggle={(enabled) => console.log(`${flag.key}: ${enabled}`)}
+          onEdit={() => console.log(`Edit ${flag.key}`)}
+          onDelete={() => console.log(`Delete ${flag.key}`)}
+          onViewHistory={() => console.log(`History ${flag.key}`)}
+          onDuplicate={() => console.log(`Duplicate ${flag.key}`)}
+        />
+      ))}
+    </div>
+  ),
+}
+
+export const CompactList: Story = {
+  render: () => (
+    <div className="max-w-md border rounded-lg">
+      {defaultFeatureFlags.map((flag) => (
+        <WakaFeatureFlagRow
+          key={flag.id}
+          flag={flag}
+          compact
+          onToggle={(enabled) => console.log(`${flag.key}: ${enabled}`)}
+        />
+      ))}
+    </div>
+  ),
+}