@wakastellar/ui 2.3.5 → 2.4.0

package/dist/stories/Button.d.ts

@@ -0,0 +1,14 @@
+export interface ButtonProps {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/** Primary UI component for user interaction */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<({ primary, size, backgroundColor, label, ...props }: import('./Button').ButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/dist/stories/Header.d.ts

@@ -0,0 +1,11 @@
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/stories/Header.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<({ user, onLogin, onLogout, onCreateAccount }: import('./Header').HeaderProps) => import("react/jsx-runtime").JSX.Element>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/stories/Page.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const Page: React.FC;

package/dist/stories/Page.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<import('react').FC<{}>>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wakastellar/ui",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "description": "Zero-config UI Library for Next.js with TweakCN theming and i18n support",
   "keywords": [
     "ui",
@@ -151,6 +151,12 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-onboarding": "^10.1.11",
+    "@storybook/addon-vitest": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
+    "@tailwindcss/vite": "^4.1.18",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
@@ -170,7 +176,7 @@
     "playwright": "^1.56.0",
     "postcss": "^8.4.31",
     "react-hook-form": "^7.70.0",
-    "storybook": "^9.1.17",
+    "storybook": "^10.1.11",
     "tailwindcss": "^4.1.8",
     "typescript": "^5.5.0",
     "vite": "^7.1.9",
@@ -187,6 +193,8 @@
     "test": "vitest --config vitest.config.unit.ts",
     "test:watch": "vitest --config vitest.config.unit.ts --watch",
     "test:coverage": "vitest --config vitest.config.unit.ts --coverage",
-    "test:ui": "vitest --config vitest.config.unit.ts --ui"
+    "test:ui": "vitest --config vitest.config.unit.ts --ui",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }

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>
+    )
+  },
+}