@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-breadcrumb/WakaBreadcrumb.stories.tsx

@@ -1,39 +1,27 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { WakaBreadcrumb } from './index'
-import type { BreadcrumbItem } from './index'
-import * as React from 'react'
-import { Home, Settings, User, FileText, Folder } from 'lucide-react'
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaBreadcrumb, type BreadcrumbItem } from "./index"
+import { Home, Folder, File, Settings, User } from "lucide-react"
 
 const meta: Meta<typeof WakaBreadcrumb> = {
-  title: 'Components/Display/WakaBreadcrumb',
+  title: "Navigation/WakaBreadcrumb",
   component: WakaBreadcrumb,
   parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'A breadcrumb navigation component for showing the current page location within a hierarchy.',
-      },
-    },
+    layout: "padded",
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size of the breadcrumb',
-    },
-    variant: {
-      control: 'select',
-      options: ['default', 'ghost', 'outline'],
-      description: 'Visual variant',
-    },
     showHomeIcon: {
-      control: 'boolean',
-      description: 'Show home icon for first item',
+      control: "boolean",
+      description: "Afficher l'icône Home pour le premier élément",
     },
     maxItems: {
-      control: 'number',
-      description: 'Maximum visible items',
+      control: { type: "number", min: 2, max: 10 },
+      description: "Nombre maximum d'éléments visibles",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Taille du breadcrumb",
     },
   },
 }
@@ -42,196 +30,91 @@ export default meta
 type Story = StoryObj<typeof WakaBreadcrumb>
 
 const basicItems: BreadcrumbItem[] = [
-  { label: 'Home', href: '/' },
-  { label: 'Products', href: '/products' },
-  { label: 'Electronics', href: '/products/electronics' },
-  { label: 'Smartphones' },
+  { label: "Accueil", href: "/" },
+  { label: "Produits", href: "/products" },
+  { label: "Électronique", href: "/products/electronics" },
+  { label: "Smartphones" },
 ]
 
-export const Default: Story = {
-  args: {
-    items: basicItems,
-  },
-}
+const itemsWithIcons: BreadcrumbItem[] = [
+  { label: "Accueil", href: "/", icon: <Home className="tw-h-4 tw-w-4" /> },
+  { label: "Paramètres", href: "/settings", icon: <Settings className="tw-h-4 tw-w-4" /> },
+  { label: "Profil", href: "/settings/profile", icon: <User className="tw-h-4 tw-w-4" /> },
+  { label: "Éditer" },
+]
 
-export const WithHomeIcon: Story = {
+const longItems: BreadcrumbItem[] = [
+  { label: "Accueil", href: "/" },
+  { label: "Documents", href: "/documents" },
+  { label: "Projets", href: "/documents/projects" },
+  { label: "2024", href: "/documents/projects/2024" },
+  { label: "Q1", href: "/documents/projects/2024/q1" },
+  { label: "Rapports", href: "/documents/projects/2024/q1/reports" },
+  { label: "Rapport final" },
+]
+
+export const Default: Story = {
   args: {
     items: basicItems,
     showHomeIcon: true,
   },
-}
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="space-y-6">
-      <div>
-        <p className="text-sm text-muted-foreground mb-2">Small</p>
-        <WakaBreadcrumb items={basicItems} size="sm" />
-      </div>
-      <div>
-        <p className="text-sm text-muted-foreground mb-2">Medium (Default)</p>
-        <WakaBreadcrumb items={basicItems} size="md" />
-      </div>
-      <div>
-        <p className="text-sm text-muted-foreground mb-2">Large</p>
-        <WakaBreadcrumb items={basicItems} size="lg" />
-      </div>
-    </div>
-  ),
-}
-
-export const Variants: Story = {
-  render: () => (
-    <div className="space-y-6">
-      <div>
-        <p className="text-sm text-muted-foreground mb-2">Default</p>
-        <WakaBreadcrumb items={basicItems} variant="default" />
-      </div>
-      <div>
-        <p className="text-sm text-muted-foreground mb-2">Ghost</p>
-        <WakaBreadcrumb items={basicItems} variant="ghost" />
-      </div>
-      <div>
-        <p className="text-sm text-muted-foreground mb-2">Outline</p>
-        <WakaBreadcrumb items={basicItems} variant="outline" />
-      </div>
-    </div>
-  ),
+  render: (args) => <WakaBreadcrumb {...args} />,
 }
 
 export const WithIcons: Story = {
-  render: () => {
-    const itemsWithIcons: BreadcrumbItem[] = [
-      { label: 'Home', href: '/', icon: <Home className="h-4 w-4" /> },
-      { label: 'Settings', href: '/settings', icon: <Settings className="h-4 w-4" /> },
-      { label: 'Profile', href: '/settings/profile', icon: <User className="h-4 w-4" /> },
-      { label: 'Edit', icon: <FileText className="h-4 w-4" /> },
-    ]
-
-    return <WakaBreadcrumb items={itemsWithIcons} />
+  args: {
+    items: itemsWithIcons,
+    showHomeIcon: false,
   },
+  render: (args) => <WakaBreadcrumb {...args} />,
 }
 
 export const Collapsed: Story = {
-  render: () => {
-    const longPath: BreadcrumbItem[] = [
-      { label: 'Home', href: '/' },
-      { label: 'Documents', href: '/documents' },
-      { label: 'Work', href: '/documents/work' },
-      { label: 'Projects', href: '/documents/work/projects' },
-      { label: '2024', href: '/documents/work/projects/2024' },
-      { label: 'Q1', href: '/documents/work/projects/2024/q1' },
-      { label: 'Reports' },
-    ]
-
-    return (
-      <div className="space-y-6">
-        <div>
-          <p className="text-sm text-muted-foreground mb-2">Max 4 items (collapsed)</p>
-          <WakaBreadcrumb items={longPath} maxItems={4} />
-        </div>
-        <div>
-          <p className="text-sm text-muted-foreground mb-2">All items visible</p>
-          <WakaBreadcrumb items={longPath} />
-        </div>
-      </div>
-    )
+  args: {
+    items: longItems,
+    maxItems: 4,
+    showHomeIcon: true,
   },
+  render: (args) => <WakaBreadcrumb {...args} />,
 }
 
 export const CustomSeparator: Story = {
-  render: () => (
-    <div className="space-y-6">
-      <div>
-        <p className="text-sm text-muted-foreground mb-2">Slash separator</p>
-        <WakaBreadcrumb
-          items={basicItems}
-          separator={<span className="text-muted-foreground mx-2">/</span>}
-        />
-      </div>
-      <div>
-        <p className="text-sm text-muted-foreground mb-2">Arrow separator</p>
-        <WakaBreadcrumb
-          items={basicItems}
-          separator={<span className="text-muted-foreground mx-2">→</span>}
-        />
-      </div>
-      <div>
-        <p className="text-sm text-muted-foreground mb-2">Dot separator</p>
-        <WakaBreadcrumb
-          items={basicItems}
-          separator={<span className="text-muted-foreground mx-2">•</span>}
-        />
-      </div>
-    </div>
-  ),
-}
-
-export const WithClickHandler: Story = {
-  render: () => {
-    const handleClick = (item: BreadcrumbItem, index: number) => {
-      alert(`Clicked: ${item.label} at index ${index}`)
-    }
-
-    return (
-      <WakaBreadcrumb
-        items={basicItems}
-        onItemClick={handleClick}
-      />
-    )
+  args: {
+    items: basicItems,
+    separator: "/",
+    showHomeIcon: false,
   },
+  render: (args) => <WakaBreadcrumb {...args} />,
 }
 
-export const DisabledItems: Story = {
-  render: () => {
-    const itemsWithDisabled: BreadcrumbItem[] = [
-      { label: 'Home', href: '/' },
-      { label: 'Products', href: '/products' },
-      { label: 'Archived', href: '/products/archived', disabled: true },
-      { label: 'Item' },
-    ]
-
-    return <WakaBreadcrumb items={itemsWithDisabled} />
+export const TwoItems: Story = {
+  args: {
+    items: [
+      { label: "Tableau de bord", href: "/dashboard" },
+      { label: "Statistiques" },
+    ],
+    showHomeIcon: true,
   },
+  render: (args) => <WakaBreadcrumb {...args} />,
 }
 
-export const FileExplorer: Story = {
-  render: () => {
-    const filePath: BreadcrumbItem[] = [
-      { label: 'Root', href: '/', icon: <Folder className="h-4 w-4" /> },
-      { label: 'Users', href: '/users', icon: <Folder className="h-4 w-4" /> },
-      { label: 'john', href: '/users/john', icon: <Folder className="h-4 w-4" /> },
-      { label: 'Documents', href: '/users/john/documents', icon: <Folder className="h-4 w-4" /> },
-      { label: 'report.pdf', icon: <FileText className="h-4 w-4" /> },
-    ]
-
-    return (
-      <div className="border rounded-lg p-4 w-[500px]">
-        <div className="bg-muted/50 rounded p-2">
-          <WakaBreadcrumb items={filePath} showHomeIcon={false} size="sm" />
-        </div>
-        <div className="mt-4 text-sm text-muted-foreground">
-          Current location: /users/john/documents/report.pdf
-        </div>
-      </div>
-    )
+export const SingleItem: Story = {
+  args: {
+    items: [{ label: "Accueil" }],
+    showHomeIcon: true,
   },
+  render: (args) => <WakaBreadcrumb {...args} />,
 }
 
-export const DashboardHeader: Story = {
-  render: () => {
-    const dashboardPath: BreadcrumbItem[] = [
-      { label: 'Dashboard', href: '/dashboard' },
-      { label: 'Analytics', href: '/dashboard/analytics' },
-      { label: 'User Metrics' },
-    ]
-
-    return (
-      <div className="border-b pb-4 w-[600px]">
-        <WakaBreadcrumb items={dashboardPath} showHomeIcon />
-        <h1 className="text-2xl font-bold mt-4">User Metrics</h1>
-        <p className="text-muted-foreground">View detailed user engagement metrics</p>
-      </div>
-    )
+export const WithDisabledItem: Story = {
+  args: {
+    items: [
+      { label: "Accueil", href: "/" },
+      { label: "Archive", href: "/archive", disabled: true },
+      { label: "2023", href: "/archive/2023" },
+      { label: "Document" },
+    ],
+    showHomeIcon: true,
   },
+  render: (args) => <WakaBreadcrumb {...args} />,
 }

package/src/components/waka-breadcrumb-path/WakaBreadcrumbPath.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaBreadcrumbPath, type BreadcrumbPathItem } from "./index"
+import { Home, Folder, File } from "lucide-react"
+
+const meta: Meta<typeof WakaBreadcrumbPath> = {
+  title: "Navigation/WakaBreadcrumbPath",
+  component: WakaBreadcrumbPath,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    maxItems: { control: "number", description: "Items max visibles" },
+    showIcons: { control: "boolean", description: "Afficher les icônes" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaBreadcrumbPath>
+
+const items: BreadcrumbPathItem[] = [
+  { id: "1", label: "Accueil", href: "/", icon: <Home className="tw-h-4 tw-w-4" /> },
+  { id: "2", label: "Documents", href: "/docs", icon: <Folder className="tw-h-4 tw-w-4" /> },
+  { id: "3", label: "Projets", href: "/docs/projects", icon: <Folder className="tw-h-4 tw-w-4" /> },
+  { id: "4", label: "Rapport.pdf", icon: <File className="tw-h-4 tw-w-4" /> },
+]
+
+export const Default: Story = {
+  args: { items, showIcons: true },
+  render: (args) => <WakaBreadcrumbPath {...args} />,
+}
+
+export const Collapsed: Story = {
+  args: { items, maxItems: 3, showIcons: true },
+  render: (args) => <WakaBreadcrumbPath {...args} />,
+}
+
+export const NoIcons: Story = {
+  args: { items, showIcons: false },
+  render: (args) => <WakaBreadcrumbPath {...args} />,
+}
+

package/src/components/waka-budget-burn/WakaBudgetBurn.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaBudgetBurn, type SpendDataPoint, type BudgetCategory } from "./index"
+
+const meta: Meta<typeof WakaBudgetBurn> = {
+  title: "DevOps/WakaBudgetBurn",
+  component: WakaBudgetBurn,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    budget: { control: "number", description: "Budget total" },
+    currency: { control: "text", description: "Devise" },
+    showProjection: { control: "boolean", description: "Afficher la projection" },
+    showIdealLine: { control: "boolean", description: "Afficher la ligne ideale" },
+    showCategories: { control: "boolean", description: "Afficher les categories" },
+    showTrends: { control: "boolean", description: "Afficher les tendances" },
+    animated: { control: "boolean", description: "Animations activees" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaBudgetBurn>
+
+const spendHistory: SpendDataPoint[] = Array.from({ length: 30 }, (_, i) => ({
+  date: new Date(Date.now() - (30 - i) * 24 * 60 * 60 * 1000),
+  amount: 300 + Math.random() * 200,
+}))
+
+const categories: BudgetCategory[] = [
+  { id: "compute", name: "Compute", budget: 5000, spent: 3200, color: "#3b82f6" },
+  { id: "storage", name: "Storage", budget: 2000, spent: 1800, color: "#10b981" },
+  { id: "network", name: "Network", budget: 1000, spent: 600, color: "#f59e0b" },
+]
+
+export const Default: Story = {
+  args: {
+    budget: 10000,
+    spendHistory,
+    categories,
+    startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+    endDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
+    showProjection: true,
+    showIdealLine: true,
+    showCategories: true,
+    showTrends: true,
+    currency: "EUR",
+  },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaBudgetBurn {...args} />
+    </div>
+  ),
+}
+
+export const OverBudget: Story = {
+  args: {
+    budget: 5000,
+    spendHistory: spendHistory.map(p => ({ ...p, amount: p.amount * 1.5 })),
+    startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+    endDate: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000),
+    showProjection: true,
+    showIdealLine: true,
+    currency: "EUR",
+  },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaBudgetBurn {...args} />
+    </div>
+  ),
+}
+
+export const UnderBudget: Story = {
+  args: {
+    budget: 10000,
+    spendHistory: spendHistory.slice(0, 10).map(p => ({ ...p, amount: p.amount * 0.3 })),
+    startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+    endDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
+    showProjection: true,
+    showIdealLine: true,
+    currency: "$",
+  },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaBudgetBurn {...args} />
+    </div>
+  ),
+}