@papernote/ui 1.10.11 → 1.10.13

package/src/components/ActivityFeed.stories.tsx

@@ -0,0 +1,236 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { ActivityFeed, ActivityItem } from './ActivityFeed';
+import Stack from './Stack';
+import Text from './Text';
+import { Card, CardContent, CardHeader, CardTitle } from './Card';
+import { FileEdit, Upload, MessageSquare, UserPlus, Trash2, Eye } from 'lucide-react';
+
+const meta: Meta<typeof ActivityFeed> = {
+  title: 'Collaboration/ActivityFeed',
+  component: ActivityFeed,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Timeline of collaborative activity. Shows user avatars with actions and relative timestamps. Supports load more functionality.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    maxItems: {
+      control: { type: 'number', min: 1, max: 20 },
+      description: 'Maximum items to display',
+    },
+    showTimestamps: {
+      control: 'boolean',
+      description: 'Whether to show timestamps',
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Whether more items are loading',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ActivityFeed>;
+
+const now = new Date();
+const sampleActivities: ActivityItem[] = [
+  {
+    id: '1',
+    user: { name: 'Alice Johnson', avatar: 'https://i.pravatar.cc/100?u=alice' },
+    action: 'edited',
+    target: 'Q4 Budget.xlsx',
+    timestamp: new Date(now.getTime() - 5 * 60000), // 5 mins ago
+    icon: <FileEdit className="w-4 h-4" />,
+  },
+  {
+    id: '2',
+    user: { name: 'Bob Smith' },
+    action: 'added a comment on',
+    target: 'Expense Report',
+    timestamp: new Date(now.getTime() - 30 * 60000), // 30 mins ago
+    icon: <MessageSquare className="w-4 h-4" />,
+  },
+  {
+    id: '3',
+    user: { name: 'Carol Williams', avatar: 'https://i.pravatar.cc/100?u=carol' },
+    action: 'uploaded',
+    target: 'Invoice-2024-001.pdf',
+    timestamp: new Date(now.getTime() - 2 * 3600000), // 2 hours ago
+    icon: <Upload className="w-4 h-4" />,
+  },
+  {
+    id: '4',
+    user: { name: 'David Brown' },
+    action: 'invited',
+    target: 'Eve Davis',
+    timestamp: new Date(now.getTime() - 24 * 3600000), // 1 day ago
+    icon: <UserPlus className="w-4 h-4" />,
+  },
+  {
+    id: '5',
+    user: { name: 'Eve Davis', avatar: 'https://i.pravatar.cc/100?u=eve' },
+    action: 'viewed',
+    target: 'Annual Report',
+    timestamp: new Date(now.getTime() - 3 * 24 * 3600000), // 3 days ago
+    icon: <Eye className="w-4 h-4" />,
+  },
+];
+
+// Basic example
+export const Default: Story = {
+  args: {
+    activities: sampleActivities,
+  },
+};
+
+// With max items
+export const WithMaxItems: Story = {
+  args: {
+    activities: sampleActivities,
+    maxItems: 3,
+    onLoadMore: () => alert('Load more clicked'),
+  },
+};
+
+// Without timestamps
+export const WithoutTimestamps: Story = {
+  args: {
+    activities: sampleActivities,
+    showTimestamps: false,
+  },
+};
+
+// Empty state
+export const Empty: Story = {
+  args: {
+    activities: [],
+  },
+};
+
+// Loading more
+export const LoadingMore: Story = {
+  args: {
+    activities: sampleActivities.slice(0, 3),
+    loading: true,
+    onLoadMore: () => {},
+  },
+};
+
+// Interactive with load more
+export const Interactive: Story = {
+  render: function InteractiveDemo() {
+    const [items, setItems] = useState(sampleActivities.slice(0, 3));
+    const [loading, setLoading] = useState(false);
+
+    const loadMore = () => {
+      setLoading(true);
+      setTimeout(() => {
+        setItems(sampleActivities);
+        setLoading(false);
+      }, 1000);
+    };
+
+    return (
+      <div className="w-96">
+        <ActivityFeed
+          activities={items}
+          onLoadMore={items.length < sampleActivities.length ? loadMore : undefined}
+          loading={loading}
+        />
+      </div>
+    );
+  },
+};
+
+// In context - Sidebar panel
+export const SidebarPanel: Story = {
+  render: () => (
+    <Card className="w-80">
+      <CardHeader>
+        <CardTitle>Recent Activity</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ActivityFeed
+          activities={sampleActivities.slice(0, 4)}
+          maxItems={4}
+        />
+      </CardContent>
+    </Card>
+  ),
+};
+
+// Without icons
+export const WithoutIcons: Story = {
+  args: {
+    activities: sampleActivities.map(({ icon, ...rest }) => rest),
+  },
+};
+
+// Various action types
+export const ActionTypes: Story = {
+  render: () => {
+    const actions: ActivityItem[] = [
+      {
+        id: '1',
+        user: { name: 'User' },
+        action: 'created',
+        target: 'New Document',
+        timestamp: new Date(),
+        icon: <FileEdit className="w-4 h-4" />,
+      },
+      {
+        id: '2',
+        user: { name: 'User' },
+        action: 'shared',
+        target: 'Budget.xlsx',
+        timestamp: new Date(),
+        icon: <UserPlus className="w-4 h-4" />,
+      },
+      {
+        id: '3',
+        user: { name: 'User' },
+        action: 'commented on',
+        target: 'Report',
+        timestamp: new Date(),
+        icon: <MessageSquare className="w-4 h-4" />,
+      },
+      {
+        id: '4',
+        user: { name: 'User' },
+        action: 'deleted',
+        target: 'Old File.pdf',
+        timestamp: new Date(),
+        icon: <Trash2 className="w-4 h-4" />,
+      },
+    ];
+
+    return (
+      <div className="w-96">
+        <ActivityFeed activities={actions} showTimestamps={false} />
+      </div>
+    );
+  },
+};
+
+// Full page activity log
+export const FullPageLog: Story = {
+  render: () => (
+    <div className="bg-white p-6 rounded-xl shadow-card border border-paper-200 w-[500px]">
+      <Stack gap="md">
+        <Stack direction="horizontal" justify="between" align="center">
+          <Text size="lg" weight="semibold">Activity Log</Text>
+          <Text size="sm" className="text-ink-400">Last 7 days</Text>
+        </Stack>
+        <ActivityFeed
+          activities={sampleActivities}
+          onLoadMore={() => alert('Load more')}
+        />
+      </Stack>
+    </div>
+  ),
+};

package/src/components/ActivityFeed.tsx

@@ -0,0 +1,160 @@
+import { Activity } from 'lucide-react';
+import { CollaboratorAvatars, Collaborator } from './CollaboratorAvatars';
+import Button from './Button';
+
+export interface ActivityItem {
+  /** Unique identifier for the activity */
+  id: string;
+  /** User who performed the action */
+  user: Collaborator;
+  /** Description of the action */
+  action: string;
+  /** Optional target of the action (e.g., document name) */
+  target?: string;
+  /** When the activity occurred */
+  timestamp: Date;
+  /** Optional custom icon */
+  icon?: React.ReactNode;
+}
+
+export interface ActivityFeedProps {
+  /** Array of activities to display */
+  activities: ActivityItem[];
+  /** Maximum number of items to display */
+  maxItems?: number;
+  /** Whether to show timestamps */
+  showTimestamps?: boolean;
+  /** Callback to load more activities */
+  onLoadMore?: () => void;
+  /** Whether more items are being loaded */
+  loading?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+// Format relative time
+function formatRelativeTime(date: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+/**
+ * ActivityFeed - Timeline of collaborative activity.
+ * 
+ * Features:
+ * - Displays activities in a vertical timeline
+ * - Shows user avatars with actions
+ * - Relative timestamps
+ * - Load more functionality
+ * - Custom icons per activity
+ */
+export function ActivityFeed({
+  activities,
+  maxItems,
+  showTimestamps = true,
+  onLoadMore,
+  loading = false,
+  className = '',
+}: ActivityFeedProps) {
+  const displayedActivities = maxItems ? activities.slice(0, maxItems) : activities;
+  const hasMore = maxItems ? activities.length > maxItems : false;
+
+  if (activities.length === 0) {
+    return (
+      <div className={`text-center py-8 ${className}`}>
+        <Activity className="w-8 h-8 text-ink-300 mx-auto mb-2" />
+        <p className="text-ink-500 text-sm">No activity yet</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${className}`} role="feed" aria-label="Activity feed">
+      <div className="space-y-4">
+        {displayedActivities.map((activity, index) => (
+          <div
+            key={activity.id}
+            className="flex gap-3"
+            role="article"
+            aria-label={`${activity.user.name} ${activity.action}${activity.target ? ` ${activity.target}` : ''}`}
+          >
+            {/* Timeline connector */}
+            <div className="flex flex-col items-center">
+              <CollaboratorAvatars
+                collaborators={[activity.user]}
+                max={1}
+                size="sm"
+              />
+              {index < displayedActivities.length - 1 && (
+                <div className="w-0.5 flex-1 bg-paper-200 mt-2" />
+              )}
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 min-w-0 pb-4">
+              <div className="flex items-start justify-between gap-2">
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm text-ink-700">
+                    <span className="font-medium text-ink-800">
+                      {activity.user.name}
+                    </span>
+                    {' '}
+                    {activity.action}
+                    {activity.target && (
+                      <>
+                        {' '}
+                        <span className="font-medium text-ink-800">
+                          {activity.target}
+                        </span>
+                      </>
+                    )}
+                  </p>
+                </div>
+
+                {/* Icon or timestamp */}
+                <div className="flex items-center gap-2 shrink-0">
+                  {activity.icon && (
+                    <span className="text-ink-400">
+                      {activity.icon}
+                    </span>
+                  )}
+                  {showTimestamps && (
+                    <span className="text-xs text-ink-400 whitespace-nowrap">
+                      {formatRelativeTime(activity.timestamp)}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Load more */}
+      {(hasMore || onLoadMore) && (
+        <div className="mt-4 text-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onLoadMore}
+            loading={loading}
+          >
+            {loading ? 'Loading...' : 'Load more'}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ActivityFeed;

package/src/components/Celebration.stories.tsx

@@ -0,0 +1,175 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Celebration, useCelebration } from './Celebration';
+import Button from './Button';
+import Stack from './Stack';
+import Card, { CardHeader, CardTitle, CardContent } from './Card';
+
+const meta: Meta<typeof Celebration> = {
+  title: 'Feedback/Celebration',
+  component: Celebration,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Celebration>;
+
+// Interactive demo with buttons
+function CelebrationDemo() {
+  const [trigger, setTrigger] = useState(false);
+  const [celebrationType, setCelebrationType] = useState<'confetti' | 'fireworks' | 'stars'>('confetti');
+
+  return (
+    <Card style={{ width: '400px' }}>
+      <CardHeader>
+        <CardTitle>Celebration Demo</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Stack gap="md">
+          <Stack direction="horizontal" gap="sm">
+            <Button
+              variant={celebrationType === 'confetti' ? 'primary' : 'secondary'}
+              onClick={() => setCelebrationType('confetti')}
+            >
+              Confetti
+            </Button>
+            <Button
+              variant={celebrationType === 'fireworks' ? 'primary' : 'secondary'}
+              onClick={() => setCelebrationType('fireworks')}
+            >
+              Fireworks
+            </Button>
+            <Button
+              variant={celebrationType === 'stars' ? 'primary' : 'secondary'}
+              onClick={() => setCelebrationType('stars')}
+            >
+              Stars
+            </Button>
+          </Stack>
+          <Button
+            variant="primary"
+            size="lg"
+            onClick={() => setTrigger(true)}
+          >
+            🎉 Celebrate!
+          </Button>
+        </Stack>
+      </CardContent>
+      <Celebration
+        trigger={trigger}
+        type={celebrationType}
+        onComplete={() => setTrigger(false)}
+      />
+    </Card>
+  );
+}
+
+export const Interactive: Story = {
+  render: () => <CelebrationDemo />,
+};
+
+// Hook demo
+function HookDemo() {
+  const { celebrate } = useCelebration();
+
+  return (
+    <Card style={{ width: '400px' }}>
+      <CardHeader>
+        <CardTitle>Using useCelebration Hook</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Stack gap="sm">
+          <Button onClick={() => celebrate()}>
+            Default Confetti
+          </Button>
+          <Button onClick={() => celebrate({ type: 'fireworks', duration: 3000 })}>
+            Fireworks (3s)
+          </Button>
+          <Button onClick={() => celebrate({ type: 'stars', colors: ['#ffd700', '#ffed4a', '#fff'] })}>
+            Golden Stars
+          </Button>
+          <Button onClick={() => celebrate({ colors: ['#22c55e'], particleCount: 200 })}>
+            Green Confetti
+          </Button>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}
+
+export const WithHook: Story = {
+  render: () => <HookDemo />,
+};
+
+// Goal completion scenario
+function GoalCompletionDemo() {
+  const [goalCompleted, setGoalCompleted] = useState(false);
+
+  return (
+    <Card style={{ width: '400px' }}>
+      <CardHeader>
+        <CardTitle>Goal: Save $1,000</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Stack gap="md">
+          <div style={{ 
+            width: '100%', 
+            height: '8px', 
+            backgroundColor: '#e5e7eb', 
+            borderRadius: '4px',
+            overflow: 'hidden'
+          }}>
+            <div style={{ 
+              width: goalCompleted ? '100%' : '85%', 
+              height: '100%', 
+              backgroundColor: goalCompleted ? '#22c55e' : '#3b82f6',
+              transition: 'width 0.5s ease'
+            }} />
+          </div>
+          <Button
+            variant="primary"
+            onClick={() => setGoalCompleted(true)}
+            disabled={goalCompleted}
+          >
+            {goalCompleted ? '🎉 Goal Reached!' : 'Complete Goal'}
+          </Button>
+        </Stack>
+      </CardContent>
+      <Celebration
+        trigger={goalCompleted}
+        type="fireworks"
+        duration={3000}
+        colors={['#22c55e', '#10b981', '#34d399']}
+      />
+    </Card>
+  );
+}
+
+export const GoalCompletion: Story = {
+  render: () => <GoalCompletionDemo />,
+};
+
+export const Confetti: Story = {
+  args: {
+    trigger: true,
+    type: 'confetti',
+  },
+};
+
+export const Fireworks: Story = {
+  args: {
+    trigger: true,
+    type: 'fireworks',
+    duration: 3000,
+  },
+};
+
+export const Stars: Story = {
+  args: {
+    trigger: true,
+    type: 'stars',
+  },
+};