@papernote/ui 1.10.11 → 1.10.13

package/src/components/AchievementBadge.stories.tsx

@@ -0,0 +1,290 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AchievementBadge } from './AchievementBadge';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { Card, CardContent, CardHeader, CardTitle } from './Card';
+import { 
+  Trophy, 
+  Target, 
+  Wallet, 
+  PiggyBank, 
+  TrendingUp,
+  Calendar,
+  Star,
+  Zap,
+  Award,
+  Crown,
+} from 'lucide-react';
+
+const meta: Meta<typeof AchievementBadge> = {
+  title: 'Feedback/AchievementBadge',
+  component: AchievementBadge,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Display achievement badges with earned/locked/in-progress states. Features circular progress ring, tooltip with details, and visual states for different achievement statuses.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['earned', 'locked', 'in-progress'],
+      description: 'Current state of the achievement',
+    },
+    progress: {
+      control: { type: 'number', min: 0, max: 100, step: 5 },
+      description: 'Progress percentage for in-progress variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the badge',
+    },
+    showTooltip: {
+      control: 'boolean',
+      description: 'Whether to show tooltip on hover',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AchievementBadge>;
+
+const sampleBadge = {
+  icon: <Trophy className="w-full h-full" />,
+  name: 'Budget Master',
+  description: 'Stay under budget for 3 consecutive months',
+  earnedAt: new Date('2024-03-15'),
+};
+
+// Basic examples for each variant
+export const Earned: Story = {
+  args: {
+    badge: sampleBadge,
+    variant: 'earned',
+  },
+};
+
+export const Locked: Story = {
+  args: {
+    badge: {
+      icon: <Crown className="w-full h-full" />,
+      name: 'Finance King',
+      description: 'Reach $100,000 in total savings',
+    },
+    variant: 'locked',
+  },
+};
+
+export const InProgress: Story = {
+  args: {
+    badge: {
+      icon: <Target className="w-full h-full" />,
+      name: 'Goal Setter',
+      description: 'Set and track 5 financial goals',
+    },
+    variant: 'in-progress',
+    progress: 60,
+  },
+};
+
+// All sizes
+export const Sizes: Story = {
+  render: () => (
+    <Stack direction="horizontal" gap="lg" align="center">
+      <Stack align="center" gap="sm">
+        <AchievementBadge badge={sampleBadge} variant="earned" size="sm" />
+        <Text size="xs" className="text-ink-400">Small</Text>
+      </Stack>
+      <Stack align="center" gap="sm">
+        <AchievementBadge badge={sampleBadge} variant="earned" size="md" />
+        <Text size="xs" className="text-ink-400">Medium</Text>
+      </Stack>
+      <Stack align="center" gap="sm">
+        <AchievementBadge badge={sampleBadge} variant="earned" size="lg" />
+        <Text size="xs" className="text-ink-400">Large</Text>
+      </Stack>
+    </Stack>
+  ),
+};
+
+// Progress levels
+export const ProgressLevels: Story = {
+  render: () => (
+    <Stack direction="horizontal" gap="md" align="center">
+      {[0, 25, 50, 75, 100].map((progress) => (
+        <Stack key={progress} align="center" gap="sm">
+          <AchievementBadge
+            badge={{
+              icon: <Target className="w-full h-full" />,
+              name: 'Goal Setter',
+              description: 'Set and track 5 financial goals',
+            }}
+            variant={progress === 100 ? 'earned' : 'in-progress'}
+            progress={progress}
+          />
+          <Text size="xs" className="text-ink-400">{progress}%</Text>
+        </Stack>
+      ))}
+    </Stack>
+  ),
+};
+
+// Collection of badges
+export const BadgeCollection: Story = {
+  render: () => {
+    const badges = [
+      {
+        badge: { icon: <Star className="w-full h-full" />, name: 'First Steps', description: 'Connect your first bank account', earnedAt: new Date('2024-01-10') },
+        variant: 'earned' as const,
+      },
+      {
+        badge: { icon: <Wallet className="w-full h-full" />, name: 'Budget Beginner', description: 'Create your first budget', earnedAt: new Date('2024-01-15') },
+        variant: 'earned' as const,
+      },
+      {
+        badge: { icon: <Trophy className="w-full h-full" />, name: 'Budget Master', description: 'Stay under budget for 3 months', earnedAt: new Date('2024-03-15') },
+        variant: 'earned' as const,
+      },
+      {
+        badge: { icon: <PiggyBank className="w-full h-full" />, name: 'Super Saver', description: 'Save $1,000 in a month' },
+        variant: 'in-progress' as const,
+        progress: 75,
+      },
+      {
+        badge: { icon: <TrendingUp className="w-full h-full" />, name: 'Investor', description: 'Track investment portfolio' },
+        variant: 'in-progress' as const,
+        progress: 30,
+      },
+      {
+        badge: { icon: <Crown className="w-full h-full" />, name: 'Finance King', description: 'Reach $100k in savings' },
+        variant: 'locked' as const,
+      },
+    ];
+
+    return (
+      <div className="grid grid-cols-3 gap-6">
+        {badges.map((item, index) => (
+          <Stack key={index} align="center" gap="sm">
+            <AchievementBadge {...item} />
+            <Text size="xs" className="text-ink-500 text-center max-w-20">
+              {item.badge.name}
+            </Text>
+          </Stack>
+        ))}
+      </div>
+    );
+  },
+};
+
+// Profile card context
+export const ProfileContext: Story = {
+  render: () => (
+    <Card className="w-96">
+      <CardHeader>
+        <CardTitle>Achievements</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Stack gap="md">
+          <Stack direction="horizontal" gap="sm" justify="center">
+            <AchievementBadge
+              badge={{ icon: <Star className="w-full h-full" />, name: 'First Steps', description: 'Connect your first account', earnedAt: new Date() }}
+              variant="earned"
+              size="sm"
+            />
+            <AchievementBadge
+              badge={{ icon: <Trophy className="w-full h-full" />, name: 'Budget Master', description: 'Stay under budget 3 months', earnedAt: new Date() }}
+              variant="earned"
+              size="sm"
+            />
+            <AchievementBadge
+              badge={{ icon: <Zap className="w-full h-full" />, name: 'Quick Start', description: 'Complete onboarding', earnedAt: new Date() }}
+              variant="earned"
+              size="sm"
+            />
+            <AchievementBadge
+              badge={{ icon: <Calendar className="w-full h-full" />, name: '30-Day Streak', description: 'Track for 30 days' }}
+              variant="in-progress"
+              progress={45}
+              size="sm"
+            />
+            <AchievementBadge
+              badge={{ icon: <Award className="w-full h-full" />, name: 'Tax Pro', description: 'Categorize all expenses' }}
+              variant="locked"
+              size="sm"
+            />
+          </Stack>
+          <Stack direction="horizontal" justify="between" className="pt-2 border-t border-paper-200">
+            <Text size="sm" className="text-ink-500">Total Earned</Text>
+            <Text size="sm" weight="semibold" className="text-ink-700">3 of 12</Text>
+          </Stack>
+        </Stack>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// Without tooltip
+export const WithoutTooltip: Story = {
+  args: {
+    badge: sampleBadge,
+    variant: 'earned',
+    showTooltip: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'When `showTooltip` is false, hovering over the badge does not show the tooltip.',
+      },
+    },
+  },
+};
+
+// Showcase with labels
+export const ShowcaseWithLabels: Story = {
+  render: () => (
+    <Stack gap="xl">
+      <Stack direction="horizontal" gap="lg" align="start">
+        <Stack align="center" gap="md" className="p-6 bg-paper-50 rounded-xl">
+          <AchievementBadge
+            badge={{ icon: <Trophy className="w-full h-full" />, name: 'Budget Master', description: 'Stay under budget for 3 months', earnedAt: new Date() }}
+            variant="earned"
+            size="lg"
+          />
+          <Stack align="center" gap="xs">
+            <Text weight="semibold" className="text-ink-700">Budget Master</Text>
+            <Text size="sm" className="text-ink-500">Earned Mar 15, 2024</Text>
+          </Stack>
+        </Stack>
+
+        <Stack align="center" gap="md" className="p-6 bg-paper-50 rounded-xl">
+          <AchievementBadge
+            badge={{ icon: <PiggyBank className="w-full h-full" />, name: 'Super Saver', description: 'Save $1,000 in a month' }}
+            variant="in-progress"
+            progress={75}
+            size="lg"
+          />
+          <Stack align="center" gap="xs">
+            <Text weight="semibold" className="text-ink-700">Super Saver</Text>
+            <Text size="sm" className="text-ink-500">75% complete</Text>
+          </Stack>
+        </Stack>
+
+        <Stack align="center" gap="md" className="p-6 bg-paper-50 rounded-xl">
+          <AchievementBadge
+            badge={{ icon: <Crown className="w-full h-full" />, name: 'Finance King', description: 'Reach $100k in savings' }}
+            variant="locked"
+            size="lg"
+          />
+          <Stack align="center" gap="xs">
+            <Text weight="semibold" className="text-ink-400">Finance King</Text>
+            <Text size="sm" className="text-ink-400">Locked</Text>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Stack>
+  ),
+};

package/src/components/AchievementBadge.tsx

@@ -0,0 +1,196 @@
+import React from 'react';
+import Tooltip from './Tooltip';
+
+export interface AchievementBadgeData {
+  /** Icon to display (React node, typically from lucide-react) */
+  icon: React.ReactNode;
+  /** Name of the achievement */
+  name: string;
+  /** Description of how to earn this achievement */
+  description: string;
+  /** When the achievement was earned (undefined if not earned) */
+  earnedAt?: Date;
+}
+
+export interface AchievementBadgeProps {
+  /** The badge data */
+  badge: AchievementBadgeData;
+  /** Current state of the achievement */
+  variant: 'earned' | 'locked' | 'in-progress';
+  /** Progress percentage (0-100) for in-progress variant */
+  progress?: number;
+  /** Size of the badge */
+  size?: 'sm' | 'md' | 'lg';
+  /** Whether to show tooltip on hover */
+  showTooltip?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const sizeStyles = {
+  sm: {
+    container: 'w-12 h-12',
+    iconContainer: 'w-10 h-10',
+    icon: 'w-5 h-5',
+    ring: 40,
+    ringStroke: 3,
+  },
+  md: {
+    container: 'w-16 h-16',
+    iconContainer: 'w-14 h-14',
+    icon: 'w-7 h-7',
+    ring: 56,
+    ringStroke: 3,
+  },
+  lg: {
+    container: 'w-20 h-20',
+    iconContainer: 'w-18 h-18',
+    icon: 'w-9 h-9',
+    ring: 72,
+    ringStroke: 4,
+  },
+};
+
+/**
+ * AchievementBadge - Display achievement badges with earned/locked/in-progress states.
+ * 
+ * Features:
+ * - Three variants: earned (full color + glow), locked (grayscale), in-progress (with ring)
+ * - Circular progress ring for in-progress state
+ * - Optional tooltip showing name, description, and earned date
+ * - Three sizes: sm, md, lg
+ */
+export function AchievementBadge({
+  badge,
+  variant,
+  progress = 0,
+  size = 'md',
+  showTooltip = true,
+  className = '',
+}: AchievementBadgeProps) {
+  const styles = sizeStyles[size];
+  const clampedProgress = Math.min(100, Math.max(0, progress));
+
+  // Calculate progress ring
+  const ringSize = styles.ring;
+  const ringRadius = (ringSize - styles.ringStroke) / 2;
+  const ringCircumference = 2 * Math.PI * ringRadius;
+  const ringOffset = ringCircumference - (clampedProgress / 100) * ringCircumference;
+
+  const variantStyles = {
+    earned: 'bg-success-100 text-success-600 shadow-md',
+    locked: 'bg-paper-200 text-ink-300 grayscale opacity-60',
+    'in-progress': 'bg-accent-100 text-accent-600',
+  };
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    }).format(date);
+  };
+
+  const tooltipContent = (
+    <div className="text-center max-w-48">
+      <div className="font-semibold">{badge.name}</div>
+      <div className="text-ink-300 mt-1">{badge.description}</div>
+      {variant === 'earned' && badge.earnedAt && (
+        <div className="text-success-400 mt-2 text-2xs">
+          Earned {formatDate(badge.earnedAt)}
+        </div>
+      )}
+      {variant === 'in-progress' && (
+        <div className="text-accent-400 mt-2 text-2xs">
+          {clampedProgress}% complete
+        </div>
+      )}
+      {variant === 'locked' && (
+        <div className="text-ink-400 mt-2 text-2xs">
+          Not yet earned
+        </div>
+      )}
+    </div>
+  );
+
+  const badgeElement = (
+    <div
+      className={`
+        relative
+        ${styles.container}
+        flex items-center justify-center
+        ${className}
+      `}
+      role="img"
+      aria-label={`${badge.name}: ${variant === 'earned' ? 'Earned' : variant === 'locked' ? 'Locked' : `${clampedProgress}% complete`}`}
+    >
+      {/* Progress ring for in-progress variant */}
+      {variant === 'in-progress' && (
+        <svg
+          className="absolute inset-0 w-full h-full -rotate-90"
+          viewBox={`0 0 ${ringSize} ${ringSize}`}
+        >
+          {/* Background ring */}
+          <circle
+            cx={ringSize / 2}
+            cy={ringSize / 2}
+            r={ringRadius}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={styles.ringStroke}
+            className="text-paper-200"
+          />
+          {/* Progress ring */}
+          <circle
+            cx={ringSize / 2}
+            cy={ringSize / 2}
+            r={ringRadius}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={styles.ringStroke}
+            strokeLinecap="round"
+            strokeDasharray={ringCircumference}
+            strokeDashoffset={ringOffset}
+            className="text-accent-500 transition-all duration-500"
+          />
+        </svg>
+      )}
+
+      {/* Badge icon container */}
+      <div
+        className={`
+          ${styles.iconContainer}
+          rounded-full
+          flex items-center justify-center
+          ${variantStyles[variant]}
+          ${variant === 'earned' ? 'animate-scale-in' : ''}
+          transition-all duration-300
+        `}
+      >
+        <div className={styles.icon}>
+          {badge.icon}
+        </div>
+      </div>
+
+      {/* Glow effect for earned badges */}
+      {variant === 'earned' && (
+        <div
+          className="absolute inset-0 rounded-full bg-success-400/20 animate-pulse-slow -z-10 blur-md"
+          style={{ transform: 'scale(1.1)' }}
+        />
+      )}
+    </div>
+  );
+
+  if (showTooltip) {
+    return (
+      <Tooltip content={tooltipContent} position="top">
+        {badgeElement}
+      </Tooltip>
+    );
+  }
+
+  return badgeElement;
+}
+
+export default AchievementBadge;