@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-thread-view/WakaThreadView.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaThreadView, type ThreadData, type ThreadParticipant } from "./index"
+
+const meta: Meta<typeof WakaThreadView> = {
+  title: "Communication/WakaThreadView",
+  component: WakaThreadView,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    showReplyInput: {
+      control: "boolean",
+      description: "Afficher le champ de réponse",
+    },
+    maxNestingLevel: {
+      control: "number",
+      description: "Niveau maximum d'imbrication",
+    },
+    collapsible: {
+      control: "boolean",
+      description: "Permettre de réduire le thread",
+    },
+    defaultExpanded: {
+      control: "boolean",
+      description: "Développé par défaut",
+    },
+    isLoading: {
+      control: "boolean",
+      description: "État de chargement",
+    },
+    hasMoreReplies: {
+      control: "boolean",
+      description: "Indique s'il y a plus de réponses",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaThreadView>
+
+const participants: ThreadParticipant[] = [
+  { id: "1", name: "Alice Martin", avatar: "https://i.pravatar.cc/150?u=alice" },
+  { id: "2", name: "Bob Dupont", avatar: "https://i.pravatar.cc/150?u=bob" },
+  { id: "3", name: "Charlie Bernard", avatar: "https://i.pravatar.cc/150?u=charlie" },
+]
+
+const sampleThread: ThreadData = {
+  id: "thread-1",
+  title: "Discussion sur le nouveau design",
+  parentMessage: {
+    id: "msg-1",
+    author: participants[0],
+    content: "Que pensez-vous du nouveau design de la page d'accueil ?",
+    timestamp: new Date(Date.now() - 3600000),
+    replies: [
+      {
+        id: "msg-2",
+        author: participants[1],
+        content: "J'aime beaucoup ! Les couleurs sont très harmonieuses.",
+        timestamp: new Date(Date.now() - 1800000),
+      },
+      {
+        id: "msg-3",
+        author: participants[2],
+        content: "Pareil, c'est vraiment bien. Par contre, je pense qu'on pourrait améliorer le contraste du texte.",
+        timestamp: new Date(Date.now() - 900000),
+      },
+    ],
+  },
+  replyCount: 2,
+  participants,
+  isFollowing: true,
+  lastActivity: new Date(),
+}
+
+const currentUser: ThreadParticipant = {
+  id: "current",
+  name: "Moi",
+  avatar: "https://i.pravatar.cc/150?u=current",
+}
+
+export const Default: Story = {
+  args: {
+    thread: sampleThread,
+    currentUser,
+    showReplyInput: true,
+    collapsible: true,
+    defaultExpanded: true,
+    hasMoreReplies: false,
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 600 }}>
+      <WakaThreadView {...args} />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  args: {
+    thread: sampleThread,
+    currentUser,
+    isLoading: true,
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 600 }}>
+      <WakaThreadView {...args} />
+    </div>
+  ),
+}
+
+export const WithMoreReplies: Story = {
+  args: {
+    thread: {
+      ...sampleThread,
+      replyCount: 15,
+    },
+    currentUser,
+    hasMoreReplies: true,
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 600 }}>
+      <WakaThreadView {...args} />
+    </div>
+  ),
+}
+
+export const Closed: Story = {
+  args: {
+    thread: {
+      ...sampleThread,
+      isClosed: true,
+    },
+    currentUser,
+    showReplyInput: false,
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 600 }}>
+      <WakaThreadView {...args} />
+    </div>
+  ),
+}
+

package/src/components/waka-timeline/WakaTimeline.stories.tsx

@@ -1,44 +1,37 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { WakaTimeline } from './index'
-import type { TimelineItem } from './index'
-import * as React from 'react'
-import { Package, Truck, CheckCircle, Clock, AlertTriangle, MessageSquare, User, GitCommit } from 'lucide-react'
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaTimeline, type TimelineItem } from "./index"
+import { Check, Clock, AlertCircle, Package, Truck, Home, CreditCard, Star } from "lucide-react"
 
 const meta: Meta<typeof WakaTimeline> = {
-  title: 'Components/Display/WakaTimeline',
+  title: "Navigation/WakaTimeline",
   component: WakaTimeline,
   parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'A timeline component for displaying events, activities, or steps in chronological order.',
-      },
-    },
+    layout: "padded",
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     orientation: {
-      control: 'select',
-      options: ['vertical', 'horizontal'],
-      description: 'Timeline orientation',
+      control: "select",
+      options: ["vertical", "horizontal"],
+      description: "Orientation de la timeline",
     },
     linePosition: {
-      control: 'select',
-      options: ['left', 'center', 'right'],
-      description: 'Position of the line (vertical only)',
+      control: "select",
+      options: ["left", "center", "right"],
+      description: "Position de la ligne (vertical)",
     },
     size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size of the timeline',
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Taille des éléments",
     },
-    showDates: {
-      control: 'boolean',
-      description: 'Show dates',
+    animated: {
+      control: "boolean",
+      description: "Animations activées",
     },
     collapsible: {
-      control: 'boolean',
-      description: 'Make items collapsible',
+      control: "boolean",
+      description: "Éléments réductibles",
     },
   },
 }
@@ -46,338 +39,192 @@ const meta: Meta<typeof WakaTimeline> = {
 export default meta
 type Story = StoryObj<typeof WakaTimeline>
 
-const basicItems: TimelineItem[] = [
+const orderItems: TimelineItem[] = [
+  {
+    id: "1",
+    title: "Commande passée",
+    description: "Votre commande a été confirmée",
+    date: new Date("2024-01-10T10:30:00"),
+    status: "completed",
+    icon: <CreditCard className="tw-h-4 tw-w-4" />,
+  },
+  {
+    id: "2",
+    title: "En préparation",
+    description: "Votre colis est en cours de préparation",
+    date: new Date("2024-01-11T14:00:00"),
+    status: "completed",
+    icon: <Package className="tw-h-4 tw-w-4" />,
+  },
+  {
+    id: "3",
+    title: "Expédié",
+    description: "Votre colis a été remis au transporteur",
+    date: new Date("2024-01-12T09:00:00"),
+    status: "current",
+    icon: <Truck className="tw-h-4 tw-w-4" />,
+  },
+  {
+    id: "4",
+    title: "Livraison",
+    description: "Estimation: 13 janvier",
+    status: "pending",
+    icon: <Home className="tw-h-4 tw-w-4" />,
+  },
+]
+
+const projectItems: TimelineItem[] = [
+  {
+    id: "1",
+    title: "Lancement du projet",
+    description: "Réunion de kick-off avec l'équipe",
+    date: "Janvier 2024",
+    status: "completed",
+  },
+  {
+    id: "2",
+    title: "Phase de conception",
+    description: "Maquettes et spécifications techniques",
+    date: "Février 2024",
+    status: "completed",
+  },
+  {
+    id: "3",
+    title: "Développement",
+    description: "Implémentation des fonctionnalités principales",
+    date: "Mars - Avril 2024",
+    status: "current",
+    content: (
+      <div className="tw-mt-2 tw-p-3 tw-bg-muted tw-rounded-lg tw-text-sm">
+        <p className="tw-font-medium">Tâches en cours:</p>
+        <ul className="tw-list-disc tw-list-inside tw-mt-1">
+          <li>API Backend - 80%</li>
+          <li>Interface utilisateur - 60%</li>
+          <li>Tests unitaires - 40%</li>
+        </ul>
+      </div>
+    ),
+  },
   {
-    id: '1',
-    title: 'Order Placed',
-    description: 'Your order has been confirmed',
-    date: new Date('2024-01-15'),
-    status: 'completed',
+    id: "4",
+    title: "Tests & QA",
+    description: "Validation et corrections de bugs",
+    date: "Mai 2024",
+    status: "pending",
   },
   {
-    id: '2',
-    title: 'Processing',
-    description: 'Your order is being prepared',
-    date: new Date('2024-01-16'),
-    status: 'completed',
+    id: "5",
+    title: "Mise en production",
+    description: "Déploiement et lancement officiel",
+    date: "Juin 2024",
+    status: "pending",
+  },
+]
+
+const errorItems: TimelineItem[] = [
+  {
+    id: "1",
+    title: "Paiement initié",
+    date: new Date(),
+    status: "completed",
   },
   {
-    id: '3',
-    title: 'Shipped',
-    description: 'Your order is on its way',
-    date: new Date('2024-01-17'),
-    status: 'current',
+    id: "2",
+    title: "Vérification",
+    date: new Date(),
+    status: "completed",
   },
   {
-    id: '4',
-    title: 'Delivered',
-    description: 'Estimated delivery date',
-    date: new Date('2024-01-20'),
-    status: 'pending',
+    id: "3",
+    title: "Erreur de transaction",
+    description: "Le paiement a été refusé par votre banque",
+    date: new Date(),
+    status: "error",
+    icon: <AlertCircle className="tw-h-4 tw-w-4" />,
   },
 ]
 
 export const Default: Story = {
   args: {
-    items: basicItems,
-    className: 'w-[400px]',
+    items: orderItems,
+    orientation: "vertical",
+    animated: true,
   },
+  render: (args) => (
+    <div style={{ maxWidth: 500 }}>
+      <WakaTimeline {...args} />
+    </div>
+  ),
 }
 
 export const Horizontal: Story = {
   args: {
-    items: basicItems,
-    orientation: 'horizontal',
-    className: 'w-[800px]',
+    items: orderItems,
+    orientation: "horizontal",
   },
+  render: (args) => <WakaTimeline {...args} />,
 }
 
-export const WithIcons: Story = {
-  render: () => {
-    const items: TimelineItem[] = [
-      {
-        id: '1',
-        title: 'Order Confirmed',
-        description: 'Order #12345 has been placed',
-        date: new Date('2024-01-15'),
-        status: 'completed',
-        icon: <Package className="h-4 w-4" />,
-      },
-      {
-        id: '2',
-        title: 'Shipped',
-        description: 'Package handed to carrier',
-        date: new Date('2024-01-16'),
-        status: 'completed',
-        icon: <Truck className="h-4 w-4" />,
-      },
-      {
-        id: '3',
-        title: 'Out for Delivery',
-        description: 'Driver en route',
-        date: new Date('2024-01-17'),
-        status: 'current',
-        icon: <Clock className="h-4 w-4" />,
-      },
-      {
-        id: '4',
-        title: 'Delivered',
-        description: 'Package delivered',
-        date: new Date('2024-01-17'),
-        status: 'pending',
-        icon: <CheckCircle className="h-4 w-4" />,
-      },
-    ]
-
-    return <WakaTimeline items={items} className="w-[400px]" />
+export const ProjectTimeline: Story = {
+  args: {
+    items: projectItems,
+    orientation: "vertical",
+    collapsible: true,
   },
+  render: (args) => (
+    <div style={{ maxWidth: 600 }}>
+      <WakaTimeline {...args} />
+    </div>
+  ),
 }
 
-export const WithStatuses: Story = {
-  render: () => {
-    const items: TimelineItem[] = [
-      {
-        id: '1',
-        title: 'Task Completed',
-        description: 'Initial setup done',
-        status: 'completed',
-      },
-      {
-        id: '2',
-        title: 'In Progress',
-        description: 'Currently working on this',
-        status: 'current',
-      },
-      {
-        id: '3',
-        title: 'Error Occurred',
-        description: 'Something went wrong',
-        status: 'error',
-      },
-      {
-        id: '4',
-        title: 'Pending',
-        description: 'Waiting to start',
-        status: 'pending',
-      },
-    ]
-
-    return <WakaTimeline items={items} showDates={false} className="w-[400px]" />
+export const WithError: Story = {
+  args: {
+    items: errorItems,
+    orientation: "vertical",
   },
-}
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex gap-12">
-      <div>
-        <p className="text-sm text-muted-foreground mb-4">Small</p>
-        <WakaTimeline items={basicItems.slice(0, 3)} size="sm" className="w-[250px]" />
-      </div>
-      <div>
-        <p className="text-sm text-muted-foreground mb-4">Medium</p>
-        <WakaTimeline items={basicItems.slice(0, 3)} size="md" className="w-[300px]" />
-      </div>
-      <div>
-        <p className="text-sm text-muted-foreground mb-4">Large</p>
-        <WakaTimeline items={basicItems.slice(0, 3)} size="lg" className="w-[350px]" />
-      </div>
+  render: (args) => (
+    <div style={{ maxWidth: 400 }}>
+      <WakaTimeline {...args} />
     </div>
   ),
 }
 
-export const Collapsible: Story = {
-  render: () => {
-    const items: TimelineItem[] = [
-      {
-        id: '1',
-        title: 'Project Started',
-        description: 'Initial commit',
-        date: new Date('2024-01-10'),
-        status: 'completed',
-        content: (
-          <div className="space-y-2">
-            <p className="text-sm">Created repository and initial project structure.</p>
-            <ul className="text-xs text-muted-foreground list-disc pl-4">
-              <li>Setup package.json</li>
-              <li>Added TypeScript config</li>
-              <li>Created src directory</li>
-            </ul>
-          </div>
-        ),
-      },
-      {
-        id: '2',
-        title: 'Feature Development',
-        description: 'Added core features',
-        date: new Date('2024-01-12'),
-        status: 'completed',
-        content: (
-          <div className="space-y-2">
-            <p className="text-sm">Implemented main functionality.</p>
-            <div className="flex gap-2">
-              <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded">+500 lines</span>
-              <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded">3 commits</span>
-            </div>
-          </div>
-        ),
-      },
-      {
-        id: '3',
-        title: 'Testing',
-        description: 'In progress',
-        date: new Date('2024-01-15'),
-        status: 'current',
-        content: (
-          <div className="space-y-2">
-            <p className="text-sm">Writing unit and integration tests.</p>
-            <div className="w-full bg-muted rounded-full h-2">
-              <div className="bg-primary h-2 rounded-full w-[60%]" />
-            </div>
-            <p className="text-xs text-muted-foreground">60% complete</p>
+export const CenteredLine: Story = {
+  args: {
+    items: orderItems,
+    orientation: "vertical",
+    linePosition: "center",
+  },
+  render: (args) => (
+    <div style={{ maxWidth: 600 }}>
+      <WakaTimeline {...args} />
           </div>
         ),
-      },
-    ]
-
-    return <WakaTimeline items={items} collapsible className="w-[450px]" />
-  },
 }
 
-export const CustomColors: Story = {
-  render: () => {
-    const items: TimelineItem[] = [
-      {
-        id: '1',
-        title: 'Design Phase',
-        description: 'UI/UX design completed',
-        status: 'completed',
-        color: '#8B5CF6', // Purple
-      },
-      {
-        id: '2',
-        title: 'Development',
-        description: 'Frontend development',
-        status: 'completed',
-        color: '#3B82F6', // Blue
-      },
-      {
-        id: '3',
-        title: 'Review',
-        description: 'Code review in progress',
-        status: 'current',
-        color: '#F59E0B', // Amber
-      },
-      {
-        id: '4',
-        title: 'Deployment',
-        description: 'Ready for production',
-        status: 'pending',
-        color: '#10B981', // Green
-      },
-    ]
-
-    return <WakaTimeline items={items} showDates={false} className="w-[400px]" />
+export const SmallSize: Story = {
+  args: {
+    items: orderItems,
+    orientation: "vertical",
+    size: "sm",
   },
+  render: (args) => (
+    <div style={{ maxWidth: 400 }}>
+      <WakaTimeline {...args} />
+    </div>
+  ),
 }
 
-export const ActivityFeed: Story = {
-  render: () => {
-    const activities: TimelineItem[] = [
-      {
-        id: '1',
-        title: 'John commented on your post',
-        description: '"Great work on this feature!"',
-        date: new Date(Date.now() - 3600000),
-        status: 'completed',
-        icon: <MessageSquare className="h-4 w-4 text-blue-500" />,
-      },
-      {
-        id: '2',
-        title: 'New follower',
-        description: 'Jane started following you',
-        date: new Date(Date.now() - 7200000),
-        status: 'completed',
-        icon: <User className="h-4 w-4 text-green-500" />,
-      },
-      {
-        id: '3',
-        title: 'Deployment successful',
-        description: 'v2.1.0 deployed to production',
-        date: new Date(Date.now() - 14400000),
-        status: 'completed',
-        icon: <GitCommit className="h-4 w-4 text-purple-500" />,
-      },
-      {
-        id: '4',
-        title: 'Warning',
-        description: 'High CPU usage detected',
-        date: new Date(Date.now() - 21600000),
-        status: 'error',
-        icon: <AlertTriangle className="h-4 w-4" />,
-      },
-    ]
-
-    return (
-      <div className="border rounded-lg p-4 w-[450px]">
-        <h3 className="font-semibold mb-4">Recent Activity</h3>
-        <WakaTimeline items={activities} size="sm" />
-      </div>
-    )
+export const LargeSize: Story = {
+  args: {
+    items: projectItems,
+    orientation: "vertical",
+    size: "lg",
   },
-}
-
-export const OrderTracking: Story = {
-  render: () => {
-    const trackingItems: TimelineItem[] = [
-      {
-        id: '1',
-        title: 'Order Confirmed',
-        description: 'Your order #ORD-2024-001 has been confirmed',
-        date: new Date('2024-01-15T09:30:00'),
-        status: 'completed',
-        icon: <CheckCircle className="h-4 w-4" />,
-      },
-      {
-        id: '2',
-        title: 'Payment Received',
-        description: 'Payment of $129.99 processed successfully',
-        date: new Date('2024-01-15T09:32:00'),
-        status: 'completed',
-        icon: <CheckCircle className="h-4 w-4" />,
-      },
-      {
-        id: '3',
-        title: 'Preparing Shipment',
-        description: 'Your items are being packed',
-        date: new Date('2024-01-16T14:00:00'),
-        status: 'completed',
-        icon: <Package className="h-4 w-4" />,
-      },
-      {
-        id: '4',
-        title: 'Shipped',
-        description: 'Package handed to FedEx - Tracking: FX123456789',
-        date: new Date('2024-01-17T08:00:00'),
-        status: 'current',
-        icon: <Truck className="h-4 w-4" />,
-      },
-      {
-        id: '5',
-        title: 'Delivery',
-        description: 'Estimated: Jan 20, 2024',
-        status: 'pending',
-        icon: <Clock className="h-4 w-4" />,
-      },
-    ]
-
-    return (
-      <div className="border rounded-lg p-6 w-[500px]">
-        <div className="mb-6">
-          <h3 className="font-semibold text-lg">Order Status</h3>
-          <p className="text-sm text-muted-foreground">Track your order progress</p>
+  render: (args) => (
+    <div style={{ maxWidth: 700 }}>
+      <WakaTimeline {...args} />
         </div>
-        <WakaTimeline items={trackingItems} />
-      </div>
-    )
-  },
+  ),
 }