@papernote/ui 1.10.12 → 1.10.13

package/src/components/MotivationalMessage.stories.tsx

@@ -0,0 +1,258 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { MotivationalMessage } from './MotivationalMessage';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { Trophy, TrendingUp, Target, Heart } from 'lucide-react';
+
+const meta: Meta<typeof MotivationalMessage> = {
+  title: 'Feedback/MotivationalMessage',
+  component: MotivationalMessage,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Display encouraging messages with different tones. Features colored borders, tone-specific icons, optional titles, and dismissible functionality.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    tone: {
+      control: 'select',
+      options: ['celebration', 'encouragement', 'tip'],
+      description: 'The tone affects styling and default icon',
+    },
+    message: {
+      control: 'text',
+      description: 'The message to display',
+    },
+    title: {
+      control: 'text',
+      description: 'Optional title for emphasis',
+    },
+    dismissible: {
+      control: 'boolean',
+      description: 'Whether the message can be dismissed',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MotivationalMessage>;
+
+// Basic examples for each tone
+export const Celebration: Story = {
+  args: {
+    tone: 'celebration',
+    title: 'Congratulations!',
+    message: 'You achieved your savings goal this month! Keep up the great work.',
+  },
+};
+
+export const Encouragement: Story = {
+  args: {
+    tone: 'encouragement',
+    title: 'You\'re doing great!',
+    message: 'You\'re 3 months ahead of your savings goal. Your consistency is paying off!',
+  },
+};
+
+export const Tip: Story = {
+  args: {
+    tone: 'tip',
+    title: 'Pro tip',
+    message: 'Setting up automatic transfers can help you save without thinking about it.',
+  },
+};
+
+// All tones together
+export const AllTones: Story = {
+  render: () => (
+    <Stack gap="md" className="w-96">
+      <MotivationalMessage
+        tone="celebration"
+        title="Congratulations!"
+        message="You achieved your savings goal this month!"
+      />
+      <MotivationalMessage
+        tone="encouragement"
+        title="Keep it up!"
+        message="You're making great progress towards your financial goals."
+      />
+      <MotivationalMessage
+        tone="tip"
+        title="Quick tip"
+        message="Review your subscriptions monthly to avoid unused charges."
+      />
+    </Stack>
+  ),
+};
+
+// Without titles
+export const WithoutTitles: Story = {
+  render: () => (
+    <Stack gap="md" className="w-96">
+      <MotivationalMessage
+        tone="celebration"
+        message="Great week! You saved $200 more than usual."
+      />
+      <MotivationalMessage
+        tone="encouragement"
+        message="You're on track to reach your goal by December."
+      />
+      <MotivationalMessage
+        tone="tip"
+        message="Try the 50/30/20 budgeting rule for better savings."
+      />
+    </Stack>
+  ),
+};
+
+// Custom icons
+export const CustomIcons: Story = {
+  render: () => (
+    <Stack gap="md" className="w-96">
+      <MotivationalMessage
+        tone="celebration"
+        icon={<Trophy className="w-5 h-5" />}
+        title="Achievement Unlocked!"
+        message="You've completed 30 days of budget tracking!"
+      />
+      <MotivationalMessage
+        tone="encouragement"
+        icon={<TrendingUp className="w-5 h-5" />}
+        title="Trending Up!"
+        message="Your savings rate increased by 15% this quarter."
+      />
+      <MotivationalMessage
+        tone="tip"
+        icon={<Target className="w-5 h-5" />}
+        title="Goal Setting"
+        message="Break big goals into smaller milestones for better motivation."
+      />
+    </Stack>
+  ),
+};
+
+// Dismissible
+export const Dismissible: Story = {
+  render: function DismissibleDemo() {
+    const [visible, setVisible] = useState(true);
+
+    if (!visible) {
+      return (
+        <button 
+          onClick={() => setVisible(true)}
+          className="text-sm text-accent-600 hover:text-accent-700"
+        >
+          Show message again
+        </button>
+      );
+    }
+
+    return (
+      <div className="w-96">
+        <MotivationalMessage
+          tone="celebration"
+          title="Great news!"
+          message="You're under budget for dining out this month. Keep it up!"
+          dismissible
+          onDismiss={() => setVisible(false)}
+        />
+      </div>
+    );
+  },
+};
+
+// In context - Dashboard widget
+export const DashboardWidget: Story = {
+  render: () => (
+    <div className="bg-white p-6 rounded-xl shadow-card border border-paper-200 w-96">
+      <Stack gap="md">
+        <Stack direction="horizontal" justify="between" align="center">
+          <Text weight="semibold" size="lg">Weekly Insights</Text>
+          <Text size="sm" className="text-ink-400">This week</Text>
+        </Stack>
+        
+        <Stack gap="sm">
+          <MotivationalMessage
+            tone="celebration"
+            message="You saved $150 more than last week!"
+          />
+          <MotivationalMessage
+            tone="tip"
+            message="Your electricity bill is due in 3 days. You have sufficient funds."
+          />
+        </Stack>
+      </Stack>
+    </div>
+  ),
+};
+
+// Empty state encouragement
+export const EmptyStateEncouragement: Story = {
+  render: () => (
+    <div className="bg-paper-50 p-8 rounded-xl border border-paper-200 w-96 text-center">
+      <Stack align="center" gap="lg">
+        <div className="w-16 h-16 bg-accent-100 rounded-full flex items-center justify-center">
+          <Heart className="w-8 h-8 text-accent-500" />
+        </div>
+        <Stack align="center" gap="sm">
+          <Text weight="semibold" size="lg">No transactions yet</Text>
+          <Text size="sm" className="text-ink-500">
+            Connect your first account to start tracking your finances.
+          </Text>
+        </Stack>
+        <MotivationalMessage
+          tone="encouragement"
+          message="The best time to start managing your money is today!"
+        />
+      </Stack>
+    </div>
+  ),
+};
+
+// Stacked notifications
+export const StackedNotifications: Story = {
+  render: function StackedDemo() {
+    const [messages, setMessages] = useState([
+      { id: 1, tone: 'celebration' as const, message: 'Budget goal achieved!' },
+      { id: 2, tone: 'tip' as const, message: 'Consider setting up emergency fund.' },
+      { id: 3, tone: 'encouragement' as const, message: 'You\'re ahead of 80% of users your age!' },
+    ]);
+
+    const dismiss = (id: number) => {
+      setMessages(msgs => msgs.filter(m => m.id !== id));
+    };
+
+    if (messages.length === 0) {
+      return (
+        <button 
+          onClick={() => setMessages([
+            { id: 1, tone: 'celebration' as const, message: 'Budget goal achieved!' },
+            { id: 2, tone: 'tip' as const, message: 'Consider setting up emergency fund.' },
+            { id: 3, tone: 'encouragement' as const, message: 'You\'re ahead of 80% of users your age!' },
+          ])}
+          className="text-sm text-accent-600 hover:text-accent-700"
+        >
+          Reset messages
+        </button>
+      );
+    }
+
+    return (
+      <Stack gap="sm" className="w-96">
+        {messages.map(msg => (
+          <MotivationalMessage
+            key={msg.id}
+            tone={msg.tone}
+            message={msg.message}
+            dismissible
+            onDismiss={() => dismiss(msg.id)}
+          />
+        ))}
+      </Stack>
+    );
+  },
+};

package/src/components/MotivationalMessage.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { PartyPopper, Sparkles, Lightbulb, X } from 'lucide-react';
+
+export interface MotivationalMessageProps {
+  /** The message to display */
+  message: string;
+  /** The tone of the message affects styling and default icon */
+  tone: 'celebration' | 'encouragement' | 'tip';
+  /** Custom icon to override the default */
+  icon?: React.ReactNode;
+  /** Whether the message can be dismissed */
+  dismissible?: boolean;
+  /** Callback when the message is dismissed */
+  onDismiss?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+  /** Optional title for the message */
+  title?: string;
+}
+
+const toneStyles = {
+  celebration: {
+    bg: 'bg-success-50',
+    border: 'border-l-success-500',
+    iconBg: 'bg-success-100',
+    iconColor: 'text-success-600',
+    titleColor: 'text-success-800',
+  },
+  encouragement: {
+    bg: 'bg-accent-50',
+    border: 'border-l-accent-500',
+    iconBg: 'bg-accent-100',
+    iconColor: 'text-accent-600',
+    titleColor: 'text-accent-800',
+  },
+  tip: {
+    bg: 'bg-warning-50',
+    border: 'border-l-warning-500',
+    iconBg: 'bg-warning-100',
+    iconColor: 'text-warning-600',
+    titleColor: 'text-warning-800',
+  },
+};
+
+const defaultIcons = {
+  celebration: PartyPopper,
+  encouragement: Sparkles,
+  tip: Lightbulb,
+};
+
+/**
+ * MotivationalMessage - Display encouraging messages with different tones.
+ * 
+ * Features:
+ * - Three tones: celebration, encouragement, tip
+ * - Colored left border and background based on tone
+ * - Default icons per tone (can be overridden)
+ * - Optional title for emphasis
+ * - Dismissible with callback
+ * - Fade-in animation
+ */
+export function MotivationalMessage({
+  message,
+  tone,
+  icon,
+  dismissible = false,
+  onDismiss,
+  className = '',
+  title,
+}: MotivationalMessageProps) {
+  const styles = toneStyles[tone];
+  const DefaultIcon = defaultIcons[tone];
+
+  return (
+    <div
+      className={`
+        ${styles.bg} 
+        border-l-4 ${styles.border}
+        rounded-r-lg
+        p-4
+        animate-fade-in
+        ${className}
+      `}
+      role="status"
+      aria-live="polite"
+    >
+      <div className="flex items-start gap-3">
+        {/* Icon */}
+        <div className={`${styles.iconBg} ${styles.iconColor} p-2 rounded-lg shrink-0`}>
+          {icon || <DefaultIcon className="w-5 h-5" />}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          {title && (
+            <h4 className={`font-semibold ${styles.titleColor} mb-1`}>
+              {title}
+            </h4>
+          )}
+          <p className="text-ink-700 text-sm leading-relaxed">
+            {message}
+          </p>
+        </div>
+
+        {/* Dismiss button */}
+        {dismissible && (
+          <button
+            onClick={onDismiss}
+            className="shrink-0 p-1 rounded hover:bg-black/5 transition-colors text-ink-400 hover:text-ink-600"
+            aria-label="Dismiss message"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default MotivationalMessage;

package/src/components/PermissionBadge.stories.tsx

@@ -0,0 +1,208 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { PermissionBadge, PermissionLevel } from './PermissionBadge';
+import Stack from './Stack';
+import Text from './Text';
+import { Card, CardContent, CardHeader, CardTitle } from './Card';
+import { CollaboratorAvatars } from './CollaboratorAvatars';
+
+const meta: Meta<typeof PermissionBadge> = {
+  title: 'Collaboration/PermissionBadge',
+  component: PermissionBadge,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Shows permission level (view/edit/admin) with optional dropdown for editing. Color-coded badges with descriptive icons.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    level: {
+      control: 'select',
+      options: ['view', 'edit', 'admin'],
+      description: 'Current permission level',
+    },
+    editable: {
+      control: 'boolean',
+      description: 'Whether permission can be changed',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the badge',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PermissionBadge>;
+
+// Basic examples for each level
+export const ViewOnly: Story = {
+  args: {
+    level: 'view',
+  },
+};
+
+export const Edit: Story = {
+  args: {
+    level: 'edit',
+  },
+};
+
+export const Admin: Story = {
+  args: {
+    level: 'admin',
+  },
+};
+
+// All levels
+export const AllLevels: Story = {
+  render: () => (
+    <Stack direction="horizontal" gap="md">
+      <PermissionBadge level="view" />
+      <PermissionBadge level="edit" />
+      <PermissionBadge level="admin" />
+    </Stack>
+  ),
+};
+
+// All sizes
+export const Sizes: Story = {
+  render: () => (
+    <Stack gap="lg">
+      <Stack direction="horizontal" gap="md" align="center">
+        <Text size="sm" className="text-ink-400 w-16">Small</Text>
+        <PermissionBadge level="view" size="sm" />
+        <PermissionBadge level="edit" size="sm" />
+        <PermissionBadge level="admin" size="sm" />
+      </Stack>
+      <Stack direction="horizontal" gap="md" align="center">
+        <Text size="sm" className="text-ink-400 w-16">Medium</Text>
+        <PermissionBadge level="view" size="md" />
+        <PermissionBadge level="edit" size="md" />
+        <PermissionBadge level="admin" size="md" />
+      </Stack>
+      <Stack direction="horizontal" gap="md" align="center">
+        <Text size="sm" className="text-ink-400 w-16">Large</Text>
+        <PermissionBadge level="view" size="lg" />
+        <PermissionBadge level="edit" size="lg" />
+        <PermissionBadge level="admin" size="lg" />
+      </Stack>
+    </Stack>
+  ),
+};
+
+// Editable
+export const Editable: Story = {
+  render: function EditableDemo() {
+    const [level, setLevel] = useState<PermissionLevel>('view');
+
+    return (
+      <Stack align="center" gap="md">
+        <PermissionBadge
+          level={level}
+          editable
+          onChange={setLevel}
+        />
+        <Text size="sm" className="text-ink-500">
+          Click to change permission level
+        </Text>
+      </Stack>
+    );
+  },
+};
+
+// In context - Collaborator list
+export const CollaboratorList: Story = {
+  render: function CollaboratorListDemo() {
+    const [permissions, setPermissions] = useState<Record<string, PermissionLevel>>({
+      alice: 'admin',
+      bob: 'edit',
+      carol: 'view',
+    });
+
+    const updatePermission = (user: string, level: PermissionLevel) => {
+      setPermissions((prev) => ({ ...prev, [user]: level }));
+    };
+
+    const collaborators = [
+      { id: 'alice', name: 'Alice Johnson', avatar: 'https://i.pravatar.cc/100?u=alice' },
+      { id: 'bob', name: 'Bob Smith', avatar: 'https://i.pravatar.cc/100?u=bob' },
+      { id: 'carol', name: 'Carol Williams' },
+    ];
+
+    return (
+      <Card className="w-96">
+        <CardHeader>
+          <CardTitle>Shared with</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Stack gap="md">
+            {collaborators.map((collab) => (
+              <Stack key={collab.id} direction="horizontal" justify="between" align="center">
+                <Stack direction="horizontal" gap="sm" align="center">
+                  <CollaboratorAvatars
+                    collaborators={[collab]}
+                    max={1}
+                    size="sm"
+                  />
+                  <Text size="sm" weight="medium">{collab.name}</Text>
+                </Stack>
+                <PermissionBadge
+                  level={permissions[collab.id]}
+                  editable={collab.id !== 'alice'} // Owner can't change their own
+                  onChange={(level) => updatePermission(collab.id, level)}
+                  size="sm"
+                />
+              </Stack>
+            ))}
+          </Stack>
+        </CardContent>
+      </Card>
+    );
+  },
+};
+
+// In context - Document info
+export const DocumentInfo: Story = {
+  render: () => (
+    <div className="bg-white p-4 rounded-lg shadow-card border border-paper-200 w-80">
+      <Stack gap="sm">
+        <Stack direction="horizontal" justify="between" align="center">
+          <Text weight="semibold">Q4 Budget</Text>
+          <PermissionBadge level="edit" size="sm" />
+        </Stack>
+        <Text size="sm" className="text-ink-500">
+          You have edit access to this document.
+        </Text>
+      </Stack>
+    </div>
+  ),
+};
+
+// Static vs editable comparison
+export const StaticVsEditable: Story = {
+  render: () => (
+    <Stack gap="lg">
+      <Stack gap="sm">
+        <Text size="sm" weight="semibold" className="text-ink-600">Static (read-only)</Text>
+        <Stack direction="horizontal" gap="md">
+          <PermissionBadge level="view" />
+          <PermissionBadge level="edit" />
+          <PermissionBadge level="admin" />
+        </Stack>
+      </Stack>
+      <Stack gap="sm">
+        <Text size="sm" weight="semibold" className="text-ink-600">Editable (click to change)</Text>
+        <Stack direction="horizontal" gap="md">
+          <PermissionBadge level="view" editable onChange={() => {}} />
+          <PermissionBadge level="edit" editable onChange={() => {}} />
+          <PermissionBadge level="admin" editable onChange={() => {}} />
+        </Stack>
+      </Stack>
+    </Stack>
+  ),
+};