@wakastellar/ui 2.3.4 → 2.4.0

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

@@ -0,0 +1,383 @@
+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'
+
+const meta: Meta<typeof WakaTimeline> = {
+  title: 'Components/Display/WakaTimeline',
+  component: WakaTimeline,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A timeline component for displaying events, activities, or steps in chronological order.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+      description: 'Timeline orientation',
+    },
+    linePosition: {
+      control: 'select',
+      options: ['left', 'center', 'right'],
+      description: 'Position of the line (vertical only)',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the timeline',
+    },
+    showDates: {
+      control: 'boolean',
+      description: 'Show dates',
+    },
+    collapsible: {
+      control: 'boolean',
+      description: 'Make items collapsible',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTimeline>
+
+const basicItems: TimelineItem[] = [
+  {
+    id: '1',
+    title: 'Order Placed',
+    description: 'Your order has been confirmed',
+    date: new Date('2024-01-15'),
+    status: 'completed',
+  },
+  {
+    id: '2',
+    title: 'Processing',
+    description: 'Your order is being prepared',
+    date: new Date('2024-01-16'),
+    status: 'completed',
+  },
+  {
+    id: '3',
+    title: 'Shipped',
+    description: 'Your order is on its way',
+    date: new Date('2024-01-17'),
+    status: 'current',
+  },
+  {
+    id: '4',
+    title: 'Delivered',
+    description: 'Estimated delivery date',
+    date: new Date('2024-01-20'),
+    status: 'pending',
+  },
+]
+
+export const Default: Story = {
+  args: {
+    items: basicItems,
+    className: 'w-[400px]',
+  },
+}
+
+export const Horizontal: Story = {
+  args: {
+    items: basicItems,
+    orientation: 'horizontal',
+    className: 'w-[800px]',
+  },
+}
+
+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 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 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>
+    </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>
+          </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 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 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>
+        </div>
+        <WakaTimeline items={trackingItems} />
+      </div>
+    )
+  },
+}