@papernote/ui 1.10.12 → 1.10.14

package/src/components/SharedBadge.stories.tsx

@@ -0,0 +1,210 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SharedBadge } from './SharedBadge';
+import Stack from './Stack';
+import Text from './Text';
+import Card, { CardContent, CardHeader, CardTitle } from './Card';
+
+const meta: Meta<typeof SharedBadge> = {
+  title: 'Collaboration/SharedBadge',
+  component: SharedBadge,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Indicator showing content is shared with others. Shows collaborator avatars and count with variant for owned vs shared content.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['owned', 'shared'],
+      description: 'Whether user owns or was shared with',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the badge',
+    },
+    maxDisplay: {
+      control: { type: 'number', min: 1, max: 5 },
+      description: 'Maximum avatars to display',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SharedBadge>;
+
+const sampleCollaborators = [
+  { name: 'Alice Johnson' },
+  { name: 'Bob Smith' },
+  { name: 'Carol Williams' },
+];
+
+// Basic examples
+export const Owned: Story = {
+  args: {
+    sharedWith: sampleCollaborators,
+    variant: 'owned',
+  },
+};
+
+export const SharedWithYou: Story = {
+  args: {
+    sharedWith: sampleCollaborators,
+    variant: 'shared',
+  },
+};
+
+// Both variants
+export const BothVariants: Story = {
+  render: () => (
+    <Stack gap="md">
+      <Stack direction="horizontal" gap="md" align="center">
+        <SharedBadge sharedWith={sampleCollaborators} variant="owned" />
+        <Text size="sm" className="text-ink-500">You shared this</Text>
+      </Stack>
+      <Stack direction="horizontal" gap="md" align="center">
+        <SharedBadge sharedWith={sampleCollaborators} variant="shared" />
+        <Text size="sm" className="text-ink-500">Shared with you</Text>
+      </Stack>
+    </Stack>
+  ),
+};
+
+// All sizes
+export const Sizes: Story = {
+  render: () => (
+    <Stack gap="md">
+      <Stack direction="horizontal" gap="md" align="center">
+        <Text size="sm" className="text-ink-400 w-16">Small</Text>
+        <SharedBadge sharedWith={sampleCollaborators} variant="owned" size="sm" />
+      </Stack>
+      <Stack direction="horizontal" gap="md" align="center">
+        <Text size="sm" className="text-ink-400 w-16">Medium</Text>
+        <SharedBadge sharedWith={sampleCollaborators} variant="owned" size="md" />
+      </Stack>
+      <Stack direction="horizontal" gap="md" align="center">
+        <Text size="sm" className="text-ink-400 w-16">Large</Text>
+        <SharedBadge sharedWith={sampleCollaborators} variant="owned" size="lg" />
+      </Stack>
+    </Stack>
+  ),
+};
+
+// Different collaborator counts
+export const CollaboratorCounts: Story = {
+  render: () => (
+    <Stack gap="md">
+      <Stack direction="horizontal" gap="md" align="center">
+        <SharedBadge sharedWith={[{ name: 'Alice' }]} variant="owned" />
+        <Text size="sm" className="text-ink-500">1 person</Text>
+      </Stack>
+      <Stack direction="horizontal" gap="md" align="center">
+        <SharedBadge sharedWith={sampleCollaborators.slice(0, 2)} variant="owned" />
+        <Text size="sm" className="text-ink-500">2 people</Text>
+      </Stack>
+      <Stack direction="horizontal" gap="md" align="center">
+        <SharedBadge sharedWith={sampleCollaborators} variant="owned" />
+        <Text size="sm" className="text-ink-500">3 people</Text>
+      </Stack>
+      <Stack direction="horizontal" gap="md" align="center">
+        <SharedBadge
+          sharedWith={[...sampleCollaborators, { name: 'David' }, { name: 'Eve' }]}
+          variant="owned"
+          maxDisplay={3}
+        />
+        <Text size="sm" className="text-ink-500">5 people (max 3)</Text>
+      </Stack>
+    </Stack>
+  ),
+};
+
+// Clickable
+export const Clickable: Story = {
+  render: () => (
+    <SharedBadge
+      sharedWith={sampleCollaborators}
+      variant="owned"
+      onClick={() => alert('Show sharing settings')}
+    />
+  ),
+};
+
+// In context - Document card
+export const DocumentCard: Story = {
+  render: () => (
+    <Card className="w-80">
+      <CardHeader>
+        <Stack direction="horizontal" justify="between" align="start">
+          <CardTitle>Q4 Budget</CardTitle>
+          <SharedBadge
+            sharedWith={sampleCollaborators.slice(0, 2)}
+            variant="owned"
+            size="sm"
+          />
+        </Stack>
+      </CardHeader>
+      <CardContent>
+        <Text size="sm" className="text-ink-500">
+          Quarterly budget planning document shared with the finance team.
+        </Text>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// In context - File list
+export const FileList: Story = {
+  render: () => (
+    <div className="w-96 border border-paper-200 rounded-lg overflow-hidden">
+      {[
+        { name: 'Family Budget.xlsx', variant: 'owned' as const, sharedWith: [{ name: 'Jane' }] },
+        { name: 'Tax Documents', variant: 'shared' as const, sharedWith: [{ name: 'Accountant' }] },
+        { name: 'Savings Goals.pdf', variant: 'owned' as const, sharedWith: sampleCollaborators },
+      ].map((file, index) => (
+        <div
+          key={file.name}
+          className={`p-3 flex items-center justify-between ${
+            index > 0 ? 'border-t border-paper-200' : ''
+          }`}
+        >
+          <Text size="sm" weight="medium">{file.name}</Text>
+          <SharedBadge
+            sharedWith={file.sharedWith}
+            variant={file.variant}
+            size="sm"
+          />
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+// With avatars
+export const WithAvatars: Story = {
+  args: {
+    sharedWith: [
+      { name: 'Alice Johnson', avatar: 'https://i.pravatar.cc/100?u=alice' },
+      { name: 'Bob Smith', avatar: 'https://i.pravatar.cc/100?u=bob' },
+    ],
+    variant: 'owned',
+  },
+};
+
+// Empty state (renders nothing)
+export const EmptyState: Story = {
+  render: () => (
+    <Stack gap="md">
+      <Text size="sm" className="text-ink-500">
+        SharedBadge with no collaborators renders nothing:
+      </Text>
+      <div className="p-4 border border-dashed border-paper-300 rounded-lg min-h-12 flex items-center justify-center">
+        <SharedBadge sharedWith={[]} variant="owned" />
+        <Text size="xs" className="text-ink-400">(empty)</Text>
+      </div>
+    </Stack>
+  ),
+};

package/src/components/SharedBadge.tsx

@@ -0,0 +1,111 @@
+import { Users, User } from 'lucide-react';
+import { CollaboratorAvatars, Collaborator } from './CollaboratorAvatars';
+
+export interface SharedBadgeProps {
+  /** Array of people this content is shared with */
+  sharedWith: Collaborator[];
+  /** Whether the user owns this content or was shared with them */
+  variant: 'owned' | 'shared';
+  /** Size of the badge */
+  size?: 'sm' | 'md' | 'lg';
+  /** Maximum avatars to display */
+  maxDisplay?: number;
+  /** Click handler */
+  onClick?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const sizeStyles = {
+  sm: {
+    badge: 'px-2 py-1 gap-1.5 text-xs',
+    icon: 'w-3.5 h-3.5',
+  },
+  md: {
+    badge: 'px-2.5 py-1.5 gap-2 text-sm',
+    icon: 'w-4 h-4',
+  },
+  lg: {
+    badge: 'px-3 py-2 gap-2.5 text-base',
+    icon: 'w-5 h-5',
+  },
+};
+
+const variantConfig = {
+  owned: {
+    bg: 'bg-accent-50',
+    border: 'border-accent-200',
+    text: 'text-accent-700',
+    icon: Users,
+    label: 'Shared by you',
+  },
+  shared: {
+    bg: 'bg-primary-50',
+    border: 'border-primary-200',
+    text: 'text-primary-700',
+    icon: User,
+    label: 'Shared with you',
+  },
+};
+
+/**
+ * SharedBadge - Indicator showing content is shared with others.
+ * 
+ * Features:
+ * - Two variants: owned (you shared it) or shared (shared with you)
+ * - Shows collaborator avatars
+ * - Displays count of collaborators
+ * - Three sizes: sm, md, lg
+ * - Optional click handler
+ */
+export function SharedBadge({
+  sharedWith,
+  variant,
+  size = 'md',
+  maxDisplay = 3,
+  onClick,
+  className = '',
+}: SharedBadgeProps) {
+  const styles = sizeStyles[size];
+  const config = variantConfig[variant];
+  const Icon = config.icon;
+
+  const count = sharedWith.length;
+  
+  if (count === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`
+        inline-flex items-center
+        ${styles.badge}
+        ${config.bg}
+        border ${config.border}
+        rounded-full
+        ${onClick ? 'cursor-pointer hover:opacity-90 transition-opacity' : ''}
+        ${className}
+      `}
+      onClick={onClick}
+      role={onClick ? 'button' : 'status'}
+      aria-label={`${config.label} with ${count} ${count === 1 ? 'person' : 'people'}`}
+    >
+      <Icon className={`${styles.icon} ${config.text}`} />
+      
+      {count <= maxDisplay ? (
+        <CollaboratorAvatars
+          collaborators={sharedWith}
+          max={maxDisplay}
+          size={size === 'lg' ? 'md' : 'sm'}
+        />
+      ) : (
+        <span className={`font-medium ${config.text}`}>
+          {count} {count === 1 ? 'person' : 'people'}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default SharedBadge;

package/src/components/StreakBadge.stories.tsx

@@ -0,0 +1,222 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { StreakBadge } from './StreakBadge';
+import Stack from './Stack';
+import Text from './Text';
+import Card, { CardContent, CardHeader, CardTitle } from './Card';
+
+const meta: Meta<typeof StreakBadge> = {
+  title: 'Feedback/StreakBadge',
+  component: StreakBadge,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Display streak achievements with a flame icon. The color intensity increases with streak length, and includes optional "New Record" indicator with animation.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    count: {
+      control: { type: 'number', min: 1, max: 365, step: 1 },
+      description: 'The streak count',
+    },
+    unit: {
+      control: 'select',
+      options: ['days', 'weeks', 'months'],
+      description: 'The unit of time for the streak',
+    },
+    type: {
+      control: 'text',
+      description: 'Optional type descriptor',
+    },
+    isNewRecord: {
+      control: 'boolean',
+      description: 'Whether this is a new personal record',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the badge',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof StreakBadge>;
+
+// Basic example
+export const Default: Story = {
+  args: {
+    count: 12,
+    unit: 'days',
+  },
+};
+
+// All sizes
+export const Sizes: Story = {
+  render: () => (
+    <Stack direction="horizontal" gap="md" align="center">
+      <Stack align="center" gap="xs">
+        <StreakBadge count={7} unit="days" size="sm" />
+        <Text size="xs" className="text-ink-400">Small</Text>
+      </Stack>
+      <Stack align="center" gap="xs">
+        <StreakBadge count={7} unit="days" size="md" />
+        <Text size="xs" className="text-ink-400">Medium</Text>
+      </Stack>
+      <Stack align="center" gap="xs">
+        <StreakBadge count={7} unit="days" size="lg" />
+        <Text size="xs" className="text-ink-400">Large</Text>
+      </Stack>
+    </Stack>
+  ),
+};
+
+// Color intensity progression
+export const ColorProgression: Story = {
+  render: () => (
+    <Stack gap="md">
+      <Text weight="semibold" className="text-ink-600">Color intensity increases with streak length:</Text>
+      <Stack direction="horizontal" gap="md" wrap>
+        <Stack align="center" gap="xs">
+          <StreakBadge count={3} unit="days" />
+          <Text size="xs" className="text-ink-400">Starting</Text>
+        </Stack>
+        <Stack align="center" gap="xs">
+          <StreakBadge count={7} unit="days" />
+          <Text size="xs" className="text-ink-400">1 week</Text>
+        </Stack>
+        <Stack align="center" gap="xs">
+          <StreakBadge count={30} unit="days" />
+          <Text size="xs" className="text-ink-400">1 month</Text>
+        </Stack>
+        <Stack align="center" gap="xs">
+          <StreakBadge count={100} unit="days" />
+          <Text size="xs" className="text-ink-400">100 days</Text>
+        </Stack>
+        <Stack align="center" gap="xs">
+          <StreakBadge count={365} unit="days" />
+          <Text size="xs" className="text-ink-400">1 year</Text>
+        </Stack>
+      </Stack>
+    </Stack>
+  ),
+};
+
+// With type descriptor
+export const WithType: Story = {
+  render: () => (
+    <Stack gap="md" direction="horizontal" wrap>
+      <StreakBadge count={12} unit="days" type="budget" />
+      <StreakBadge count={8} unit="weeks" type="savings" />
+      <StreakBadge count={3} unit="months" type="tracking" />
+    </Stack>
+  ),
+};
+
+// New record
+export const NewRecord: Story = {
+  args: {
+    count: 15,
+    unit: 'days',
+    type: 'budget',
+    isNewRecord: true,
+  },
+};
+
+// Different units
+export const DifferentUnits: Story = {
+  render: () => (
+    <Stack gap="md" direction="horizontal" wrap>
+      <StreakBadge count={1} unit="days" />
+      <StreakBadge count={5} unit="days" />
+      <StreakBadge count={1} unit="weeks" />
+      <StreakBadge count={4} unit="weeks" />
+      <StreakBadge count={1} unit="months" />
+      <StreakBadge count={6} unit="months" />
+    </Stack>
+  ),
+};
+
+// In context - Profile card
+export const ProfileContext: Story = {
+  render: () => (
+    <Card className="w-80">
+      <CardHeader>
+        <CardTitle>Your Achievements</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Stack gap="md">
+          <Stack direction="horizontal" justify="between" align="center">
+            <Text size="sm" className="text-ink-600">Budget Streak</Text>
+            <StreakBadge count={12} unit="days" type="budget" size="sm" isNewRecord />
+          </Stack>
+          <Stack direction="horizontal" justify="between" align="center">
+            <Text size="sm" className="text-ink-600">Savings Streak</Text>
+            <StreakBadge count={8} unit="weeks" type="savings" size="sm" />
+          </Stack>
+          <Stack direction="horizontal" justify="between" align="center">
+            <Text size="sm" className="text-ink-600">Tracking Streak</Text>
+            <StreakBadge count={45} unit="days" type="tracking" size="sm" />
+          </Stack>
+        </Stack>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// Dashboard highlight
+export const DashboardHighlight: Story = {
+  render: () => (
+    <div className="bg-gradient-to-br from-warning-50 to-warning-100 p-6 rounded-xl border border-warning-200 w-80">
+      <Stack align="center" gap="md">
+        <StreakBadge count={30} unit="days" type="budget" size="lg" isNewRecord />
+        <Stack align="center" gap="xs">
+          <Text weight="semibold" className="text-ink-800">
+            30-Day Milestone!
+          </Text>
+          <Text size="sm" className="text-ink-600 text-center">
+            You've stayed under budget for a full month. 
+            That's your longest streak yet!
+          </Text>
+        </Stack>
+      </Stack>
+    </div>
+  ),
+};
+
+// Comparison
+export const Comparison: Story = {
+  render: () => (
+    <Stack gap="lg">
+      <Stack direction="horizontal" gap="lg" align="center">
+        <Stack gap="xs" align="center" className="w-32">
+          <Text size="xs" className="text-ink-400 uppercase tracking-wide">Last Month</Text>
+          <StreakBadge count={5} unit="days" />
+        </Stack>
+        <Stack gap="xs" align="center" className="w-32">
+          <Text size="xs" className="text-ink-400 uppercase tracking-wide">This Month</Text>
+          <StreakBadge count={18} unit="days" isNewRecord />
+        </Stack>
+      </Stack>
+      <div className="text-center">
+        <Text size="sm" className="text-success-600">
+          +260% improvement! Keep it up!
+        </Text>
+      </div>
+    </Stack>
+  ),
+};
+
+// Inline usage
+export const InlineUsage: Story = {
+  render: () => (
+    <div className="bg-white p-4 rounded-lg shadow-card border border-paper-200 w-96">
+      <Text size="sm" className="text-ink-600 leading-relaxed">
+        Great job! You're on a <StreakBadge count={12} unit="days" size="sm" /> 
+        budget streak. That's your best this year!
+      </Text>
+    </div>
+  ),
+};

package/src/components/StreakBadge.tsx

@@ -0,0 +1,132 @@
+
+import { Flame, Sparkles } from 'lucide-react';
+
+export interface StreakBadgeProps {
+  /** The streak count */
+  count: number;
+  /** The unit of time for the streak */
+  unit: 'days' | 'weeks' | 'months';
+  /** Optional type descriptor (e.g., "budget", "savings") */
+  type?: string;
+  /** Whether this is a new personal record */
+  isNewRecord?: boolean;
+  /** Size of the badge */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const sizeStyles = {
+  sm: {
+    container: 'px-2 py-1 gap-1',
+    icon: 'w-3.5 h-3.5',
+    count: 'text-sm font-bold',
+    unit: 'text-xs',
+    record: 'text-2xs px-1.5 py-0.5',
+  },
+  md: {
+    container: 'px-3 py-1.5 gap-1.5',
+    icon: 'w-4 h-4',
+    count: 'text-base font-bold',
+    unit: 'text-sm',
+    record: 'text-xs px-2 py-0.5',
+  },
+  lg: {
+    container: 'px-4 py-2 gap-2',
+    icon: 'w-5 h-5',
+    count: 'text-lg font-bold',
+    unit: 'text-base',
+    record: 'text-sm px-2 py-1',
+  },
+};
+
+// Color intensity increases with streak length
+function getFlameColor(count: number): string {
+  if (count >= 100) return 'text-error-500'; // Red hot
+  if (count >= 30) return 'text-warning-500'; // Orange
+  if (count >= 7) return 'text-warning-400'; // Light orange
+  return 'text-warning-300'; // Warm yellow
+}
+
+function getBackgroundColor(count: number): string {
+  if (count >= 100) return 'bg-error-50';
+  if (count >= 30) return 'bg-warning-50';
+  if (count >= 7) return 'bg-warning-50/70';
+  return 'bg-warning-50/50';
+}
+
+/**
+ * StreakBadge - Display streak achievements with a flame icon.
+ * 
+ * Features:
+ * - Flame icon with color intensity based on streak length
+ * - Optional type descriptor (e.g., "12-day budget streak")
+ * - New record indicator with sparkle animation
+ * - Three sizes: sm, md, lg
+ * - Compact inline display
+ */
+export function StreakBadge({
+  count,
+  unit,
+  type,
+  isNewRecord = false,
+  size = 'md',
+  className = '',
+}: StreakBadgeProps) {
+  const styles = sizeStyles[size];
+  const flameColor = getFlameColor(count);
+  const bgColor = getBackgroundColor(count);
+
+  const unitLabel = count === 1 ? unit.slice(0, -1) : unit; // day vs days
+
+  return (
+    <div
+      className={`
+        inline-flex items-center
+        ${bgColor}
+        rounded-full
+        ${styles.container}
+        ${className}
+      `}
+      role="status"
+      aria-label={`${count} ${unitLabel}${type ? ` ${type}` : ''} streak${isNewRecord ? ' - new record!' : ''}`}
+    >
+      {/* Flame icon */}
+      <Flame 
+        className={`${styles.icon} ${flameColor} ${count >= 30 ? 'animate-pulse-slow' : ''}`} 
+      />
+      
+      {/* Count */}
+      <span className={`${styles.count} text-ink-800`}>
+        {count}
+      </span>
+      
+      {/* Unit and type */}
+      <span className={`${styles.unit} text-ink-500`}>
+        {unitLabel}
+        {type && (
+          <span className="text-ink-400"> {type}</span>
+        )}
+      </span>
+
+      {/* New record indicator */}
+      {isNewRecord && (
+        <span 
+          className={`
+            inline-flex items-center gap-0.5
+            bg-success-500 text-white
+            rounded-full
+            ${styles.record}
+            font-medium
+            animate-bounce-subtle
+          `}
+        >
+          <Sparkles className="w-3 h-3" />
+          New!
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default StreakBadge;