react-achievements 1.1.0 → 1.3.0

package/dist/stories/Button.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import './button.css';
+export interface ButtonProps {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    primary?: boolean;
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * How large should the button be?
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Button contents
+     */
+    label: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => React.JSX.Element;

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: "color";
+        };
+    };
+    args: {
+        onClick: import("@vitest/spy").Mock<[], void>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/dist/stories/Header.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './header.css';
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => React.JSX.Element;
+export {};

package/dist/stories/Header.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ user, onLogin, onLogout, onCreateAccount }: import("./Header").HeaderProps) => import("react").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        onLogin: import("@vitest/spy").Mock<[], void>;
+        onLogout: import("@vitest/spy").Mock<[], void>;
+        onCreateAccount: import("@vitest/spy").Mock<[], void>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './page.css';
+export declare const Page: React.FC;

package/dist/stories/Page.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/dist/utils/EventEmitter.d.ts

@@ -0,0 +1,6 @@
+import EventEmitter from 'eventemitter3';
+interface EventTypes {
+    checkAchievements: (payload: Record<string, any>) => void;
+}
+declare const reactAchievementsEventEmitter: EventEmitter<EventTypes, any>;
+export { reactAchievementsEventEmitter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-achievements",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "This package allows users to transpose a React achievements engine over their React apps",
   "keywords": [
     "react",
@@ -13,15 +13,28 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rollup -c",
-    "deploy": "npm run build && npm publish"
+    "deploy": "npm run build && npm publish",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "author": "David Brown",
   "license": "ISC",
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@storybook/addon-essentials": "^8.2.8",
+    "@storybook/addon-interactions": "^8.2.8",
+    "@storybook/addon-links": "^8.2.8",
+    "@storybook/addon-onboarding": "^8.2.8",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.2.8",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-webpack5": "^8.2.8",
+    "@storybook/test": "^8.2.9",
     "rollup": "^4.19.0",
     "rollup-plugin-typescript2": "^0.36.0",
+    "storybook": "^8.2.8",
     "typescript": "^5.5.4"
   },
   "dependencies": {

package/src/context/AchievementContext.tsx

@@ -8,7 +8,7 @@ import ConfettiWrapper from '../components/ConfettiWrapper';
 interface AchievementContextProps {
     metrics: Metrics;
     setMetrics: (metrics: Metrics | ((prevMetrics: Metrics) => Metrics)) => void;
-    achievedAchievements: string[];
+    unlockedAchievements: string[];
     checkAchievements: () => void;
     showBadgesModal: () => void;
 }
@@ -41,97 +41,124 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
         }, {} as Metrics);
     };
 
-    const getAchievements = () =>{
-        const achievements =  Object.values(config).flatMap(conditions =>
-            conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data)
-        )
-        console.log(achievements);
-        return achievements;
-    }
-
     const [metrics, setMetrics] = useState<Metrics>(() => {
         const savedMetrics = localStorage.getItem(`${storageKey}-metrics`);
         if (savedMetrics) {
             return JSON.parse(savedMetrics);
         }
-        const state = extractMetrics(initialState);
-        // localStorage.setItem(`${storageKey}-metrics`, JSON.stringify(state));
-        return state;
+        return extractMetrics(initialState);
+    });
+
+    const [unlockedAchievements, setUnlockedAchievements] = useState<string[]>(() => {
+        const saved = localStorage.getItem(`${storageKey}-unlocked-achievements`);
+        return saved ? JSON.parse(saved) : [];
     });
 
-    const [achievedAchievements, setAchievedAchievements] = useState<string[]>(() => {
-        const saved = localStorage.getItem(`${storageKey}-achievements`);
+    const [newlyUnlockedAchievements, setNewlyUnlockedAchievements] = useState<string[]>(() => {
+        const saved = localStorage.getItem(`${storageKey}-newly-unlocked-achievements`);
         return saved ? JSON.parse(saved) : [];
     });
 
-    const [newAchievement, setNewAchievement] = useState<AchievementData | null>(null);
+    const [achievementQueue, setAchievementQueue] = useState<AchievementData[]>([]);
+    const [currentAchievement, setCurrentAchievement] = useState<AchievementData | null>(null);
     const [showBadges, setShowBadges] = useState(false);
     const [showConfetti, setShowConfetti] = useState(false);
 
-    useEffect(() => {
-        localStorage.setItem(`${storageKey}-metrics`, JSON.stringify(metrics));
-    }, [metrics, storageKey]);
-
     const checkAchievements = useCallback(() => {
         const newAchievements: AchievementData[] = [];
 
         Object.entries(config).forEach(([metricKey, conditions]) => {
             const metricValue = metrics[metricKey];
             conditions.forEach(condition => {
-                if (condition.check(metricValue) && !achievedAchievements.includes(condition.data.id)) {
+                if (condition.check(metricValue) && !unlockedAchievements.includes(condition.data.id)) {
                     newAchievements.push(condition.data);
                 }
             });
         });
 
         if (newAchievements.length > 0) {
-            const updatedAchievements = [...achievedAchievements, ...newAchievements.map(a => a.id)];
-            setAchievedAchievements(updatedAchievements);
-            localStorage.setItem(`${storageKey}-achievements`, JSON.stringify(updatedAchievements));
-            setNewAchievement(newAchievements[0]);
+            const newlyUnlockedIds = newAchievements.map(a => a.id);
+            setUnlockedAchievements(prev => [...prev, ...newlyUnlockedIds]);
+            setNewlyUnlockedAchievements(prev => [...prev, ...newlyUnlockedIds]);
+
+            localStorage.setItem(`${storageKey}-unlocked-achievements`, JSON.stringify([...unlockedAchievements, ...newlyUnlockedIds]));
+            localStorage.setItem(`${storageKey}-newly-unlocked-achievements`, JSON.stringify([...newlyUnlockedAchievements, ...newlyUnlockedIds]));
+
+            setAchievementQueue(prevQueue => [...prevQueue, ...newAchievements]);
             setShowConfetti(true);
         }
-    }, [config, metrics, achievedAchievements, storageKey]);
+    }, [config, metrics, unlockedAchievements, newlyUnlockedAchievements, storageKey]);
 
     useEffect(() => {
         checkAchievements();
-    }, [checkAchievements]);
+    }, [metrics, checkAchievements]);
+
+    useEffect(() => {
+        if (achievementQueue.length > 0 && !currentAchievement) {
+            const nextAchievement = achievementQueue[0];
+            setCurrentAchievement(nextAchievement);
+            setAchievementQueue(prevQueue => prevQueue.slice(1));
+
+            setNewlyUnlockedAchievements(prev => {
+                const updated = prev.filter(id => id !== nextAchievement.id);
+                localStorage.setItem(`${storageKey}-newly-unlocked-achievements`, JSON.stringify(updated));
+                return updated;
+            });
+        }
+    }, [achievementQueue, currentAchievement, storageKey]);
 
     const showBadgesModal = () => {
         setShowBadges(true);
     };
 
+    const getAchievements = (achievedIds: string[]) => {
+        return Object.values(config).flatMap(conditions =>
+            conditions.filter(c => achievedIds.includes(c.data.id)).map(c => c.data)
+        );
+    };
+
     const contextValue: AchievementContextProps = {
         metrics,
         setMetrics: (newMetrics) => {
             setMetrics(prevMetrics => {
                 const updatedMetrics = typeof newMetrics === 'function' ? newMetrics(prevMetrics) : newMetrics;
+                localStorage.setItem(`${storageKey}-metrics`, JSON.stringify(updatedMetrics));
                 return updatedMetrics;
             });
         },
-        achievedAchievements,
+        unlockedAchievements,
         checkAchievements,
         showBadgesModal
     };
 
+    useEffect(() => {
+        if (newlyUnlockedAchievements.length > 0) {
+            const achievementsToShow = getAchievements(newlyUnlockedAchievements);
+            setAchievementQueue(achievementsToShow);
+            setShowConfetti(true);
+        }
+    }, []); // Run this effect only on component mount
+
     return (
         <AchievementContext.Provider value={contextValue}>
             {children}
             <AchievementModal
-                show={!!newAchievement}
-                achievement={newAchievement}
+                show={!!currentAchievement}
+                achievement={currentAchievement}
                 onClose={() => {
-                    setNewAchievement(null);
-                    setShowConfetti(false);
+                    setCurrentAchievement(null);
+                    if (achievementQueue.length === 0 && newlyUnlockedAchievements.length === 0) {
+                        setShowConfetti(false);
+                    }
                 }}
             />
             <BadgesModal
                 show={showBadges}
-                achievements={getAchievements()}
+                achievements={getAchievements(unlockedAchievements)}
                 onClose={() => setShowBadges(false)}
             />
             <BadgesButton onClick={showBadgesModal} position={badgesButtonPosition} />
-            <ConfettiWrapper show={showConfetti} />
+            <ConfettiWrapper show={showConfetti || achievementQueue.length > 0} />
         </AchievementContext.Provider>
     );
 };

package/src/stories/Button.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/src/stories/Button.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import './button.css';
+
+export interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};