@papernote/ui 1.10.10 → 1.10.12

package/dist/styles.css

@@ -2394,6 +2394,25 @@ input:checked + .slider:before{
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+@keyframes rowFlash{
+
+  0%{
+    background-color: rgb(187 247 208);
+  }
+
+  25%{
+    background-color: rgb(187 247 208);
+  }
+
+  100%{
+    background-color: transparent;
+  }
+}
+
+.animate-row-flash{
+  animation: rowFlash 2s ease-out;
+}
+
 @keyframes scaleIn{
 
   0%{
@@ -2590,6 +2609,28 @@ input:checked + .slider:before{
   animation: spin 1s linear infinite;
 }
 
+@keyframes successCheck{
+
+  0%{
+    transform: scale(0);
+    opacity: 0;
+  }
+
+  50%{
+    transform: scale(1.2);
+    opacity: 1;
+  }
+
+  100%{
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animate-success-check{
+  animation: successCheck 0.6s ease-out;
+}
+
 .cursor-col-resize{
   cursor: col-resize;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.10.10",
+  "version": "1.10.12",
   "type": "module",
   "description": "A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive",
   "main": "dist/index.js",
@@ -54,6 +54,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/canvas-confetti": "^1.9.0",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
@@ -107,6 +108,7 @@
     "url": "https://github.com/kwhittenberger/papernote-ui/issues"
   },
   "dependencies": {
+    "canvas-confetti": "^1.9.4",
     "react-spreadsheet": "^0.10.1",
     "xlsx": "^0.18.5"
   }

package/src/components/Badge.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import Badge from './Badge';
 import { Check, X, AlertCircle, Info as InfoIcon } from 'lucide-react';
 
@@ -249,3 +250,58 @@ export const CountBadges: Story = {
     </div>
   ),
 };
+
+export const Animated: Story = {
+  args: {
+    children: 'Animated Badge',
+    variant: 'success',
+    animate: true,
+  },
+};
+
+export const AnimatedBadges: Story = {
+  render: () => {
+    const [badges, setBadges] = useState<string[]>([]);
+    const [counter, setCounter] = useState(0);
+
+    const addBadge = () => {
+      const newBadge = `Badge ${counter + 1}`;
+      setBadges([...badges, newBadge]);
+      setCounter(counter + 1);
+    };
+
+    const removeBadge = (index: number) => {
+      setBadges(badges.filter((_, i) => i !== index));
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <button
+          onClick={addBadge}
+          style={{
+            padding: '0.5rem 1rem',
+            border: '1px solid #e5e5e5',
+            borderRadius: '0.375rem',
+            background: 'white',
+            cursor: 'pointer',
+            width: 'fit-content',
+          }}
+        >
+          Add Badge
+        </button>
+        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', minHeight: '2rem' }}>
+          {badges.map((badge, index) => (
+            <Badge
+              key={badge}
+              variant="info"
+              animate
+              onRemove={() => removeBadge(index)}
+            >
+              {badge}
+            </Badge>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Badge.tsx

@@ -16,6 +16,8 @@ export interface BadgeProps {
   truncate?: boolean;
   /** Maximum width for the badge (useful with truncate), e.g. '150px' or '10rem' */
   maxWidth?: string;
+  /** Apply fade-in animation when badge appears */
+  animate?: boolean;
 }
 
 export default function Badge({
@@ -29,6 +31,7 @@ export default function Badge({
   pill = false,
   truncate = false,
   maxWidth,
+  animate = false,
 }: BadgeProps) {
   const variantStyles = {
     success: 'bg-success-50 text-success-700 border-success-200',
@@ -79,6 +82,7 @@ export default function Badge({
           inline-block rounded-full
           ${dotVariantStyles[variant]}
           ${dotSizeStyles[size]}
+          ${animate ? 'animate-fade-in' : ''}
           ${className}
         `}
         aria-label={`${variant} indicator`}
@@ -95,6 +99,7 @@ export default function Badge({
         ${variantStyles[variant]}
         ${pill ? pillSizeStyles[size] : sizeStyles[size]}
         ${truncate ? 'max-w-full overflow-hidden' : ''}
+        ${animate ? 'animate-fade-in' : ''}
         ${className}
       `}
       style={maxWidth ? { maxWidth } : undefined}

package/src/components/Button.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import Button from './Button';
 import { Save, Trash, Plus, Download } from 'lucide-react';
 
@@ -253,3 +254,100 @@ export const AllSizes: Story = {
     </div>
   ),
 };
+
+export const SuccessAnimation: Story = {
+  args: {
+    variant: 'primary',
+    showSuccess: true,
+    children: 'Saved!',
+  },
+};
+
+export const SaveWithSuccess: Story = {
+  render: () => {
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+
+    const handleSave = async () => {
+      setSaving(true);
+      setSaved(false);
+      
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      setSaving(false);
+      setSaved(true);
+      
+      // Reset after animation completes
+      setTimeout(() => setSaved(false), 1500);
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'flex-start' }}>
+        <Button
+          variant="primary"
+          icon={<Save />}
+          loading={saving}
+          showSuccess={saved}
+          onClick={handleSave}
+        >
+          Save Changes
+        </Button>
+        <p style={{ fontSize: '0.875rem', color: '#64748b' }}>
+          Click to simulate save with success animation
+        </p>
+      </div>
+    );
+  },
+};
+
+export const SuccessAnimationVariants: Story = {
+  render: () => {
+    const [successStates, setSuccessStates] = useState<Record<string, boolean>>({});
+
+    const triggerSuccess = (key: string) => {
+      setSuccessStates(prev => ({ ...prev, [key]: true }));
+      setTimeout(() => {
+        setSuccessStates(prev => ({ ...prev, [key]: false }));
+      }, 1500);
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <p style={{ fontSize: '0.875rem', color: '#64748b', marginBottom: '0.5rem' }}>
+          Click any button to see the success animation
+        </p>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <Button
+            variant="primary"
+            showSuccess={successStates['primary']}
+            onClick={() => triggerSuccess('primary')}
+          >
+            Primary
+          </Button>
+          <Button
+            variant="secondary"
+            showSuccess={successStates['secondary']}
+            onClick={() => triggerSuccess('secondary')}
+          >
+            Secondary
+          </Button>
+          <Button
+            variant="outline"
+            showSuccess={successStates['outline']}
+            onClick={() => triggerSuccess('outline')}
+          >
+            Outline
+          </Button>
+          <Button
+            variant="ghost"
+            showSuccess={successStates['ghost']}
+            onClick={() => triggerSuccess('ghost')}
+          >
+            Ghost
+          </Button>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Button.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react';
-import { Loader2 } from 'lucide-react';
+import React, { forwardRef, useState, useEffect, useRef } from 'react';
+import { Loader2, Check } from 'lucide-react';
 
 /**
  * Button component props
@@ -23,6 +23,10 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   badge?: number | string;
   /** Badge color variant */
   badgeVariant?: 'primary' | 'success' | 'warning' | 'error';
+  /** Show success checkmark animation (briefly shows checkmark, then reverts) */
+  showSuccess?: boolean;
+  /** Duration in ms for success animation (default: 1500) */
+  successDuration?: number;
 }
 
 /**
@@ -76,11 +80,40 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
   iconOnly = false,
   badge,
   badgeVariant = 'error',
+  showSuccess = false,
+  successDuration = 1500,
   children,
   disabled,
   className = '',
   ...props
 }, ref) => {
+  // Track success animation state
+  const [isShowingSuccess, setIsShowingSuccess] = useState(false);
+  const successTimeoutRef = useRef<number | null>(null);
+
+  // Handle showSuccess prop changes
+  useEffect(() => {
+    if (showSuccess && !isShowingSuccess) {
+      setIsShowingSuccess(true);
+      
+      // Clear any existing timeout
+      if (successTimeoutRef.current) {
+        window.clearTimeout(successTimeoutRef.current);
+      }
+      
+      // Set timeout to revert back
+      successTimeoutRef.current = window.setTimeout(() => {
+        setIsShowingSuccess(false);
+      }, successDuration);
+    }
+    
+    return () => {
+      if (successTimeoutRef.current) {
+        window.clearTimeout(successTimeoutRef.current);
+      }
+    };
+  }, [showSuccess, successDuration, isShowingSuccess]);
+
   const baseStyles = 'inline-flex items-center justify-center font-medium rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400 disabled:opacity-40 disabled:cursor-not-allowed';
 
   const variantStyles = {
@@ -117,12 +150,15 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
     lg: 'min-w-[20px] h-5 text-xs px-1.5',
   };
 
+  // Determine what to show inside button
+  const showSuccessState = isShowingSuccess && !loading;
+
   const buttonElement = (
     <button
       ref={ref}
       className={`
         ${baseStyles}
-        ${variantStyles[variant]}
+        ${showSuccessState ? 'bg-success-500 border-success-500 text-white' : variantStyles[variant]}
         ${sizeStyles[size]}
         ${fullWidth && !iconOnly ? 'w-full' : ''}
         ${className}
@@ -134,11 +170,14 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
       {loading && (
         <Loader2 className={`${iconSize[size]} animate-spin`} />
       )}
-      {!loading && icon && iconPosition === 'left' && (
+      {showSuccessState && (
+        <Check className={`${iconSize[size]} animate-success-check`} />
+      )}
+      {!loading && !showSuccessState && icon && iconPosition === 'left' && (
         <span className={iconSize[size]}>{icon}</span>
       )}
-      {!iconOnly && children}
-      {!loading && icon && iconPosition === 'right' && !iconOnly && (
+      {!iconOnly && !showSuccessState && children}
+      {!loading && !showSuccessState && icon && iconPosition === 'right' && !iconOnly && (
         <span className={iconSize[size]}>{icon}</span>
       )}
     </button>

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',
+  },
+};