@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-address-autocomplete/WakaAddressAutocomplete.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaAddressAutocomplete } from "./index"
+
+const meta: Meta<typeof WakaAddressAutocomplete> = {
+  title: "Forms/WakaAddressAutocomplete",
+  component: WakaAddressAutocomplete,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    placeholder: { control: "text", description: "Placeholder" },
+    disabled: { control: "boolean", description: "Désactivé" },
+    showRecent: { control: "boolean", description: "Afficher les récents" },
+    showCurrentLocation: { control: "boolean", description: "Position actuelle" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAddressAutocomplete>
+
+export const Default: Story = {
+  args: { placeholder: "Rechercher une adresse...", showRecent: true, showCurrentLocation: true },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaAddressAutocomplete {...args} />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  args: { placeholder: "Adresse", disabled: true },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaAddressAutocomplete {...args} />
+    </div>
+  ),
+}
+
+export const Minimal: Story = {
+  args: { placeholder: "Entrez une adresse", showRecent: false, showCurrentLocation: false },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaAddressAutocomplete {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-admincrumb/WakaAdmincrumb.stories.tsx

@@ -0,0 +1,166 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+import { WakaAdmincrumb, useAdmincrumb, type AdmincrumbLevel, type AdmincrumbItem } from "./index"
+
+const meta: Meta<typeof WakaAdmincrumb> = {
+  title: "Admin/WakaAdmincrumb",
+  component: WakaAdmincrumb,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    showIcons: { control: "boolean", description: "Afficher les icônes" },
+    showBadges: { control: "boolean", description: "Afficher les badges de type" },
+    showHome: { control: "boolean", description: "Afficher le bouton Home" },
+    resetable: { control: "boolean", description: "Afficher le bouton réinitialiser" },
+    variant: { 
+      control: "select", 
+      options: ["default", "minimal", "pills", "inline", "compact"],
+      description: "Style du breadcrumb" 
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAdmincrumb>
+
+const partnerItems: AdmincrumbItem[] = [
+  { id: "partner1", name: "Partenaire Alpha", type: "partner" },
+  { id: "partner2", name: "Partenaire Beta", type: "partner" },
+  { id: "partner3", name: "Partenaire Gamma", type: "partner" },
+]
+
+const networkItems: AdmincrumbItem[] = [
+  { id: "network1", name: "Réseau France", type: "network" },
+  { id: "network2", name: "Réseau Europe", type: "network" },
+]
+
+const customerItems: AdmincrumbItem[] = [
+  { id: "customer1", name: "Client Entreprise", type: "customer" },
+  { id: "customer2", name: "Client PME", type: "customer" },
+  { id: "customer3", name: "Client Startup", type: "customer" },
+]
+
+// Composant wrapper interactif qui gère l'état
+function InteractiveAdmincrumb({
+  showIcons = true,
+  showBadges = false,
+  showHome = false,
+  resetable = false,
+  variant = "default",
+  initialPartner,
+  initialNetwork,
+}: {
+  showIcons?: boolean
+  showBadges?: boolean
+  showHome?: boolean
+  resetable?: boolean
+  variant?: "default" | "minimal" | "pills" | "inline" | "compact"
+  initialPartner?: AdmincrumbItem
+  initialNetwork?: AdmincrumbItem
+}) {
+  const { partner, network, customer, handleLevelChange, reset } = useAdmincrumb()
+  
+  // Initialisation au premier rendu si des valeurs initiales sont fournies
+  const [initialized, setInitialized] = React.useState(false)
+  React.useEffect(() => {
+    if (!initialized) {
+      if (initialPartner) handleLevelChange(0, initialPartner)
+      if (initialNetwork) handleLevelChange(1, initialNetwork)
+      setInitialized(true)
+    }
+  }, [initialized, initialPartner, initialNetwork, handleLevelChange])
+
+  const levels: AdmincrumbLevel[] = [
+    {
+      type: "partner",
+      items: partnerItems,
+      selected: partner,
+      onSelect: (item) => handleLevelChange(0, item),
+      placeholder: "Sélectionner un partenaire",
+    },
+    {
+      type: "network",
+      items: networkItems,
+      selected: network,
+      onSelect: (item) => handleLevelChange(1, item),
+      placeholder: "Sélectionner un réseau",
+    },
+    {
+      type: "customer",
+      items: customerItems,
+      selected: customer,
+      onSelect: (item) => handleLevelChange(2, item),
+      placeholder: "Sélectionner un client",
+    },
+  ]
+
+  return (
+    <WakaAdmincrumb
+      levels={levels}
+      showIcons={showIcons}
+      showBadges={showBadges}
+      showHome={showHome}
+      resetable={resetable}
+      variant={variant}
+      onLevelChange={handleLevelChange}
+      onReset={reset}
+    />
+  )
+}
+
+export const Default: Story = {
+  render: () => <InteractiveAdmincrumb showIcons showBadges />,
+}
+
+export const WithSelection: Story = {
+  render: () => (
+    <InteractiveAdmincrumb
+      showIcons
+      showBadges
+      initialPartner={partnerItems[0]}
+      initialNetwork={networkItems[0]}
+    />
+  ),
+}
+
+export const NoBadges: Story = {
+  render: () => <InteractiveAdmincrumb showIcons showBadges={false} />,
+}
+
+export const WithHomeButton: Story = {
+  render: () => (
+    <InteractiveAdmincrumb
+      showIcons
+      showBadges
+      showHome
+      initialPartner={partnerItems[0]}
+    />
+  ),
+}
+
+export const Resetable: Story = {
+  render: () => (
+    <InteractiveAdmincrumb
+      showIcons
+      resetable
+      initialPartner={partnerItems[0]}
+      initialNetwork={networkItems[0]}
+    />
+  ),
+}
+
+export const MinimalVariant: Story = {
+  render: () => <InteractiveAdmincrumb variant="minimal" showIcons />,
+}
+
+export const PillsVariant: Story = {
+  render: () => <InteractiveAdmincrumb variant="pills" showIcons />,
+}
+
+export const InlineVariant: Story = {
+  render: () => <InteractiveAdmincrumb variant="inline" showIcons={false} />,
+}
+
+export const CompactVariant: Story = {
+  render: () => <InteractiveAdmincrumb variant="compact" showIcons showBadges={false} />,
+}

package/src/components/waka-alert-panel/WakaAlertPanel.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaAlertPanel } from "./index"
+
+const meta: Meta<typeof WakaAlertPanel> = {
+  title: "Admin/WakaAlertPanel",
+  component: WakaAlertPanel,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    showFilters: { control: "boolean", description: "Afficher les filtres" },
+    showActions: { control: "boolean", description: "Afficher les actions" },
+    maxHeight: { control: "number", description: "Hauteur max (px)" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAlertPanel>
+
+const alerts = [
+  { id: "1", title: "Serveur en surcharge", severity: "critical" as const, message: "CPU > 95%", timestamp: new Date() },
+  { id: "2", title: "Certificat expire bientôt", severity: "warning" as const, message: "Expiration dans 7 jours", timestamp: new Date(Date.now() - 3600000) },
+  { id: "3", title: "Nouveau déploiement", severity: "info" as const, message: "v2.1.0 déployée", timestamp: new Date(Date.now() - 7200000) },
+  { id: "4", title: "Espace disque faible", severity: "warning" as const, message: "< 10% disponible", timestamp: new Date(Date.now() - 86400000) },
+]
+
+export const Default: Story = {
+  args: { alerts, showFilters: true, showActions: true },
+  render: (args) => <WakaAlertPanel {...args} />,
+}
+
+export const CriticalOnly: Story = {
+  args: { alerts: alerts.filter(a => a.severity === "critical"), showActions: true },
+  render: (args) => <WakaAlertPanel {...args} />,
+}
+
+export const Empty: Story = {
+  args: { alerts: [], showFilters: true },
+  render: (args) => <WakaAlertPanel {...args} />,
+}
+
+export const Compact: Story = {
+  args: { alerts, showFilters: false, showActions: false, maxHeight: 200 },
+  render: (args) => <WakaAlertPanel {...args} />,
+}
+

package/src/components/waka-alert-stack/WakaAlertStack.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaAlertStack, type Alert } from "./index"
+
+const meta: Meta<typeof WakaAlertStack> = {
+  title: "Admin/WakaAlertStack",
+  component: WakaAlertStack,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    position: { control: "select", options: ["top-right", "top-left", "bottom-right", "bottom-left"], description: "Position" },
+    maxVisible: { control: "number", description: "Alertes visibles max" },
+    showDismiss: { control: "boolean", description: "Bouton fermer" },
+    autoHide: { control: "boolean", description: "Masquage auto" },
+    autoHideDuration: { control: "number", description: "Durée (ms)" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAlertStack>
+
+const alerts: Alert[] = [
+  { id: "1", title: "Alerte critique", message: "Service non disponible", severity: "critical", timestamp: new Date() },
+  { id: "2", title: "Attention", message: "Maintenance prévue demain", severity: "warning", timestamp: new Date() },
+  { id: "3", title: "Information", message: "Mise à jour disponible", severity: "info", timestamp: new Date() },
+]
+
+export const Default: Story = {
+  args: { alerts, position: "top-right", maxVisible: 5, showDismiss: true },
+  render: (args) => (
+    <div style={{ width: 400, height: 300, position: "relative" }}>
+      <WakaAlertStack {...args} />
+    </div>
+  ),
+}
+
+export const BottomLeft: Story = {
+  args: { alerts, position: "bottom-left", showDismiss: true },
+  render: (args) => (
+    <div style={{ width: 400, height: 300, position: "relative" }}>
+      <WakaAlertStack {...args} />
+    </div>
+  ),
+}
+
+export const AutoHide: Story = {
+  args: { alerts: [alerts[2]], autoHide: true, autoHideDuration: 3000 },
+  render: (args) => (
+    <div style={{ width: 400, height: 200, position: "relative" }}>
+      <WakaAlertStack {...args} />
+    </div>
+  ),
+}
+
+export const Stacked: Story = {
+  args: { alerts: [...alerts, ...alerts.map(a => ({ ...a, id: a.id + "-2" }))], maxVisible: 3 },
+  render: (args) => (
+    <div style={{ width: 400, height: 400, position: "relative" }}>
+      <WakaAlertStack {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-allocation-matrix/WakaAllocationMatrix.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaAllocationMatrix, type Resource, type Consumer } from "./index"
+
+const meta: Meta<typeof WakaAllocationMatrix> = {
+  title: "DevOps/WakaAllocationMatrix",
+  component: WakaAllocationMatrix,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    showFilters: { control: "boolean", description: "Afficher les filtres" },
+    editable: { control: "boolean", description: "Mode édition" },
+    showCapacity: { control: "boolean", description: "Afficher la capacité" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAllocationMatrix>
+
+const resources: Resource[] = [
+  { id: "dev1", name: "Alice", category: "Frontend", capacity: 100 },
+  { id: "dev2", name: "Bob", category: "Backend", capacity: 100 },
+  { id: "dev3", name: "Charlie", category: "DevOps", capacity: 100 },
+]
+
+const consumers: Consumer[] = [
+  { id: "proj1", name: "Projet Alpha" },
+  { id: "proj2", name: "Projet Beta" },
+  { id: "proj3", name: "Support" },
+]
+
+const allocations = [
+  { resourceId: "dev1", consumerId: "proj1", value: 60 },
+  { resourceId: "dev1", consumerId: "proj2", value: 30 },
+  { resourceId: "dev2", consumerId: "proj1", value: 80 },
+  { resourceId: "dev2", consumerId: "proj3", value: 20 },
+  { resourceId: "dev3", consumerId: "proj2", value: 50 },
+  { resourceId: "dev3", consumerId: "proj3", value: 40 },
+]
+
+export const Default: Story = {
+  args: {
+    resources,
+    consumers,
+    allocations,
+    showFilters: true,
+    showCapacity: true,
+  },
+  render: (args) => <WakaAllocationMatrix {...args} />,
+}
+
+export const Editable: Story = {
+  args: { resources, consumers, allocations, editable: true, showCapacity: true },
+  render: (args) => <WakaAllocationMatrix {...args} />,
+}
+
+export const Overallocated: Story = {
+  args: {
+    resources,
+    consumers,
+    allocations: [
+      { resourceId: "dev1", consumerId: "proj1", value: 70 },
+      { resourceId: "dev1", consumerId: "proj2", value: 50 },
+    ],
+    showCapacity: true,
+  },
+  render: (args) => <WakaAllocationMatrix {...args} />,
+}
+

package/src/components/waka-approval-chain/WakaApprovalChain.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaApprovalChain, type Approver } from "./index"
+
+const meta: Meta<typeof WakaApprovalChain> = {
+  title: "Admin/WakaApprovalChain",
+  component: WakaApprovalChain,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    orientation: { control: "select", options: ["horizontal", "vertical"], description: "Orientation" },
+    showComments: { control: "boolean", description: "Afficher les commentaires" },
+    interactive: { control: "boolean", description: "Mode interactif" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaApprovalChain>
+
+const approvers: Approver[] = [
+  { id: "1", name: "Alice Martin", role: "Manager", status: "approved", date: new Date(Date.now() - 86400000), comment: "Approuvé" },
+  { id: "2", name: "Bob Dupont", role: "Finance", status: "approved", date: new Date(Date.now() - 43200000) },
+  { id: "3", name: "Charlie Bernard", role: "Directeur", status: "pending" },
+]
+
+export const Default: Story = {
+  args: { approvers, orientation: "horizontal", showComments: true },
+  render: (args) => <WakaApprovalChain {...args} />,
+}
+
+export const Vertical: Story = {
+  args: { approvers, orientation: "vertical", showComments: true },
+  render: (args) => (
+    <div style={{ maxWidth: 400 }}>
+      <WakaApprovalChain {...args} />
+    </div>
+  ),
+}
+
+export const AllApproved: Story = {
+  args: {
+    approvers: approvers.map(a => ({ ...a, status: "approved" as const, date: new Date() })),
+    orientation: "horizontal",
+  },
+  render: (args) => <WakaApprovalChain {...args} />,
+}
+
+export const Rejected: Story = {
+  args: {
+    approvers: [
+      { ...approvers[0], status: "approved" as const },
+      { ...approvers[1], status: "rejected" as const, comment: "Budget insuffisant" },
+      { ...approvers[2], status: "skipped" as const },
+    ],
+    showComments: true,
+  },
+  render: (args) => <WakaApprovalChain {...args} />,
+}
+
+export const Interactive: Story = {
+  args: { approvers, interactive: true, showComments: true },
+  render: (args) => <WakaApprovalChain {...args} />,
+}
+

package/src/components/waka-audit-log/WakaAuditLog.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaAuditLog, type AuditEvent } from "./index"
+
+const meta: Meta<typeof WakaAuditLog> = {
+  title: "DevOps/WakaAuditLog",
+  component: WakaAuditLog,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    showFilters: { control: "boolean", description: "Afficher les filtres" },
+    showExport: { control: "boolean", description: "Afficher l'export" },
+    showSearch: { control: "boolean", description: "Afficher la recherche" },
+    loading: { control: "boolean", description: "Etat de chargement" },
+    hasMore: { control: "boolean", description: "Plus d'evenements disponibles" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAuditLog>
+
+const events: AuditEvent[] = [
+  {
+    id: "1",
+    type: "login",
+    user: { id: "u1", name: "Alice", email: "alice@example.com" },
+    timestamp: new Date(Date.now() - 1000 * 60 * 5),
+    severity: "info",
+    description: "User logged in successfully",
+    ipAddress: "192.168.1.1",
+  },
+  {
+    id: "2",
+    type: "update",
+    user: { id: "u2", name: "Bob", email: "bob@example.com" },
+    timestamp: new Date(Date.now() - 1000 * 60 * 30),
+    severity: "warning",
+    description: "Changed email notification preferences",
+    resource: "User Settings",
+  },
+  {
+    id: "3",
+    type: "delete",
+    user: { id: "u1", name: "Alice", email: "alice@example.com" },
+    timestamp: new Date(Date.now() - 1000 * 60 * 60),
+    severity: "critical",
+    description: "API Key deleted",
+    resource: "API Key",
+  },
+  {
+    id: "4",
+    type: "create",
+    user: { id: "u3", name: "Charlie", email: "charlie@example.com" },
+    timestamp: new Date(Date.now() - 1000 * 60 * 120),
+    severity: "info",
+    description: "Created new project",
+    resource: "New Project",
+  },
+]
+
+export const Default: Story = {
+  args: { events, showFilters: true, showSearch: true, showExport: true },
+  render: (args) => <WakaAuditLog {...args} />,
+}
+
+export const Minimal: Story = {
+  args: { events, showFilters: false, showSearch: false, showExport: false },
+  render: (args) => <WakaAuditLog {...args} />,
+}
+
+export const Empty: Story = {
+  args: { events: [], showFilters: true, showSearch: true },
+  render: (args) => <WakaAuditLog {...args} />,
+}