@wakastellar/ui 2.3.5 → 3.0.0

package/src/blocks/activity-timeline/ActivityTimeline.stories.tsx

@@ -0,0 +1,460 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaActivityTimeline, defaultActivities, defaultActivityFilters } from './index'
+import type { ActivityItem, ActivityFilter } from './index'
+import * as React from 'react'
+import { Bell, Star, MessageSquare, Upload } from 'lucide-react'
+
+const meta: Meta<typeof WakaActivityTimeline> = {
+  title: 'Blocks/ActivityTimeline',
+  component: WakaActivityTimeline,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'An activity timeline component with filtering, search, grouping by day, and multiple layout options (timeline, feed, compact).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    layout: {
+      control: 'select',
+      options: ['timeline', 'feed', 'compact'],
+    },
+    showSearch: {
+      control: 'boolean',
+    },
+    showFilters: {
+      control: 'boolean',
+    },
+    showRefresh: {
+      control: 'boolean',
+    },
+    groupByDay: {
+      control: 'boolean',
+    },
+    showAvatars: {
+      control: 'boolean',
+    },
+    relativeTime: {
+      control: 'boolean',
+    },
+    loading: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaActivityTimeline>
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaActivityTimeline
+        activities={defaultActivities}
+        filters={defaultActivityFilters}
+        onFilterChange={(filter) => console.log('Filter:', filter)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const TimelineLayout: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaActivityTimeline
+        activities={defaultActivities}
+        layout="timeline"
+        title="Activity Timeline"
+      />
+    </div>
+  ),
+}
+
+export const FeedLayout: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaActivityTimeline
+        activities={defaultActivities}
+        layout="feed"
+        title="Activity Feed"
+      />
+    </div>
+  ),
+}
+
+export const CompactLayout: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaActivityTimeline
+        activities={defaultActivities}
+        layout="compact"
+        title="Recent Activity"
+        showSearch={false}
+        showFilters={false}
+      />
+    </div>
+  ),
+}
+
+export const WithFilters: Story = {
+  render: () => {
+    const [activeFilter, setActiveFilter] = React.useState<string | null>(null)
+
+    return (
+      <div className="w-[600px]">
+        <WakaActivityTimeline
+          activities={defaultActivities}
+          filters={defaultActivityFilters}
+          activeFilter={activeFilter ?? undefined}
+          onFilterChange={setActiveFilter}
+          title="Filtered Activity"
+        />
+      </div>
+    )
+  },
+}
+
+export const ManyActivities: Story = {
+  render: () => {
+    const manyActivities: ActivityItem[] = [
+      // Today
+      {
+        id: '1',
+        type: 'created',
+        title: 'a créé le projet "Dashboard v2"',
+        user: { id: '1', name: 'Marie Dupont' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 5),
+      },
+      {
+        id: '2',
+        type: 'commented',
+        title: 'a commenté sur "API Integration"',
+        user: { id: '2', name: 'Pierre Martin' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 30),
+        metadata: { comment: 'Excellent travail sur cette partie!' },
+      },
+      {
+        id: '3',
+        type: 'uploaded',
+        title: 'a uploadé 5 fichiers',
+        user: { id: '3', name: 'Sophie Bernard' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2),
+      },
+      {
+        id: '4',
+        type: 'approved',
+        title: 'a approuvé la PR #123',
+        user: { id: '1', name: 'Marie Dupont' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 4),
+      },
+      // Yesterday
+      {
+        id: '5',
+        type: 'assigned',
+        title: 'a assigné "Bug fix" à Pierre',
+        user: { id: '4', name: 'Jean Dubois' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24),
+      },
+      {
+        id: '6',
+        type: 'completed',
+        title: 'a terminé la tâche "Design mockups"',
+        user: { id: '3', name: 'Sophie Bernard' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 26),
+      },
+      {
+        id: '7',
+        type: 'updated',
+        title: 'a mis à jour les spécifications',
+        user: { id: '2', name: 'Pierre Martin' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 28),
+      },
+      // 2 days ago
+      {
+        id: '8',
+        type: 'deleted',
+        title: 'a supprimé "Old Draft"',
+        user: { id: '1', name: 'Marie Dupont' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 48),
+      },
+      {
+        id: '9',
+        type: 'shared',
+        title: 'a partagé le document avec l\'équipe',
+        user: { id: '4', name: 'Jean Dubois' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 50),
+      },
+      {
+        id: '10',
+        type: 'mentioned',
+        title: 'vous a mentionné dans un commentaire',
+        user: { id: '3', name: 'Sophie Bernard' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 52),
+      },
+    ]
+
+    return (
+      <div className="w-[600px]">
+        <WakaActivityTimeline
+          activities={manyActivities}
+          filters={defaultActivityFilters}
+          groupByDay
+          showLoadMore
+          onLoadMore={() => console.log('Load more')}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithCustomIcons: Story = {
+  render: () => {
+    const customActivities: ActivityItem[] = [
+      {
+        id: '1',
+        type: 'custom',
+        title: 'Nouvelle notification importante',
+        description: 'Vous avez une mise à jour système en attente',
+        user: { id: '1', name: 'Système' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 10),
+        icon: <Bell className="h-4 w-4" />,
+        color: 'text-yellow-500',
+      },
+      {
+        id: '2',
+        type: 'custom',
+        title: 'Projet marqué comme favori',
+        user: { id: '2', name: 'Marie Dupont' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 60),
+        icon: <Star className="h-4 w-4" />,
+        color: 'text-orange-500',
+      },
+      {
+        id: '3',
+        type: 'custom',
+        title: 'Nouveau message dans le chat',
+        description: 'Pierre a envoyé un message',
+        user: { id: '3', name: 'Pierre Martin' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 3),
+        icon: <MessageSquare className="h-4 w-4" />,
+        color: 'text-blue-500',
+      },
+      {
+        id: '4',
+        type: 'custom',
+        title: 'Fichier synchronisé',
+        user: { id: '1', name: 'Système' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 5),
+        icon: <Upload className="h-4 w-4" />,
+        color: 'text-green-500',
+      },
+    ]
+
+    return (
+      <div className="w-[600px]">
+        <WakaActivityTimeline
+          activities={customActivities}
+          title="Custom Activity"
+          showFilters={false}
+        />
+      </div>
+    )
+  },
+}
+
+export const NoGrouping: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaActivityTimeline
+        activities={defaultActivities}
+        groupByDay={false}
+        title="Ungrouped Activity"
+      />
+    </div>
+  ),
+}
+
+export const AbsoluteTime: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaActivityTimeline
+        activities={defaultActivities}
+        relativeTime={false}
+        title="Absolute Timestamps"
+      />
+    </div>
+  ),
+}
+
+export const NoAvatars: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaActivityTimeline
+        activities={defaultActivities}
+        showAvatars={false}
+        title="Without Avatars"
+      />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaActivityTimeline
+        activities={[]}
+        loading
+        title="Loading..."
+      />
+    </div>
+  ),
+}
+
+export const LoadingMore: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaActivityTimeline
+        activities={defaultActivities}
+        showLoadMore
+        loadingMore
+        onLoadMore={() => console.log('Load more')}
+      />
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaActivityTimeline
+        activities={[]}
+        title="No Activity"
+      />
+    </div>
+  ),
+}
+
+export const WithSearchAndFilters: Story = {
+  render: () => {
+    const [activeFilter, setActiveFilter] = React.useState<string | null>(null)
+
+    return (
+      <div className="w-[600px]">
+        <WakaActivityTimeline
+          activities={defaultActivities}
+          filters={defaultActivityFilters}
+          activeFilter={activeFilter ?? undefined}
+          onFilterChange={setActiveFilter}
+          showSearch
+          showFilters
+          showRefresh
+          onRefresh={() => console.log('Refresh')}
+          title="Searchable Activity"
+        />
+      </div>
+    )
+  },
+}
+
+export const MinimalUI: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaActivityTimeline
+        activities={defaultActivities.slice(0, 3)}
+        layout="compact"
+        showSearch={false}
+        showFilters={false}
+        showRefresh={false}
+        groupByDay={false}
+        showAvatars={false}
+      />
+    </div>
+  ),
+}
+
+export const InSidebar: Story = {
+  render: () => (
+    <div className="w-[300px] border rounded-lg p-4">
+      <WakaActivityTimeline
+        activities={defaultActivities}
+        layout="compact"
+        showSearch={false}
+        showFilters={false}
+        showRefresh={false}
+        groupByDay={false}
+        title="Recent"
+      />
+    </div>
+  ),
+}
+
+export const ProjectActivity: Story = {
+  render: () => {
+    const projectActivities: ActivityItem[] = [
+      {
+        id: '1',
+        type: 'created',
+        title: 'a créé la branche feature/auth',
+        user: { id: '1', name: 'Alice', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Alice' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 15),
+      },
+      {
+        id: '2',
+        type: 'approved',
+        title: 'a mergé PR #456 dans main',
+        user: { id: '2', name: 'Bob', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Bob' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 45),
+      },
+      {
+        id: '3',
+        type: 'commented',
+        title: 'a commenté sur PR #457',
+        user: { id: '3', name: 'Carol', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Carol' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2),
+        metadata: { comment: 'LGTM! Just one small suggestion on line 42.' },
+      },
+      {
+        id: '4',
+        type: 'rejected',
+        title: 'a demandé des changements sur PR #458',
+        user: { id: '1', name: 'Alice', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Alice' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 4),
+      },
+      {
+        id: '5',
+        type: 'completed',
+        title: 'a fermé l\'issue #123',
+        user: { id: '2', name: 'Bob', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Bob' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24),
+      },
+    ]
+
+    return (
+      <div className="min-h-screen bg-muted/30">
+        <header className="bg-background border-b px-6 py-4">
+          <h1 className="font-bold text-xl">Project Activity</h1>
+          <p className="text-sm text-muted-foreground">my-org/my-repo</p>
+        </header>
+        <main className="p-6 max-w-3xl mx-auto">
+          <WakaActivityTimeline
+            activities={projectActivities}
+            layout="feed"
+            filters={[
+              { id: 'prs', label: 'Pull Requests', types: ['approved', 'rejected', 'commented'] },
+              { id: 'branches', label: 'Branches', types: ['created', 'deleted'] },
+              { id: 'issues', label: 'Issues', types: ['completed', 'assigned'] },
+            ]}
+            onRefresh={() => console.log('Refresh')}
+            showLoadMore
+            onLoadMore={() => console.log('Load more')}
+          />
+        </main>
+      </div>
+    )
+  },
+}