react-achievements 1.2.0 → 1.3.1

package/dist/index.esm.js

@@ -1,90 +1,148 @@
 import React, { useEffect, useRef, useState, useCallback, createContext, useContext } from 'react';
 
-const AchievementModal = ({ show, achievement, onClose }) => {
-    if (!show || !achievement)
-        return null;
-    const modalStyle = {
+const defaultStyles = {
+    achievementModal: {
+        overlay: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        content: {
+            backgroundColor: '#ffffff',
+            borderRadius: '8px',
+            padding: '20px',
+            maxWidth: '400px',
+            width: '100%',
+        },
+        title: {
+            fontSize: '24px',
+            fontWeight: 'bold',
+            marginBottom: '10px',
+        },
+        icon: {
+            width: '50px',
+            height: '50px',
+            marginBottom: '10px',
+        },
+        description: {
+            fontSize: '16px',
+            marginBottom: '20px',
+        },
+        button: {
+            backgroundColor: '#007bff',
+            color: '#ffffff',
+            padding: '10px 20px',
+            borderRadius: '4px',
+            border: 'none',
+            cursor: 'pointer',
+        },
+    },
+    badgesModal: {
+        overlay: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        content: {
+            backgroundColor: '#ffffff',
+            borderRadius: '8px',
+            padding: '20px',
+            maxWidth: '600px',
+            width: '100%',
+            maxHeight: '80vh',
+            overflowY: 'auto',
+        },
+        title: {
+            fontSize: '24px',
+            fontWeight: 'bold',
+            marginBottom: '20px',
+        },
+        badgeContainer: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+        },
+        badge: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            margin: '10px',
+        },
+        badgeIcon: {
+            width: '50px',
+            height: '50px',
+            marginBottom: '5px',
+        },
+        badgeTitle: {
+            fontSize: '14px',
+            textAlign: 'center',
+        },
+        button: {
+            backgroundColor: '#007bff',
+            color: '#ffffff',
+            padding: '10px 20px',
+            borderRadius: '4px',
+            border: 'none',
+            cursor: 'pointer',
+            marginTop: '20px',
+        },
+    },
+    badgesButton: {
         position: 'fixed',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        backgroundColor: '#fff',
-        padding: '20px',
-        borderRadius: '8px',
-        boxShadow: '0 0 10px rgba(0,0,0,0.1)',
+        padding: '10px 20px',
+        backgroundColor: '#007bff',
+        color: '#ffffff',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
         zIndex: 1000,
-    };
-    const overlayStyle = {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0,0,0,0.5)',
-        zIndex: 999,
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { style: overlayStyle, onClick: onClose }),
-        React.createElement("div", { style: modalStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": "achievement-title" },
-            React.createElement("h2", { id: "achievement-title" }, "Achievement Unlocked!"),
-            React.createElement("img", { src: achievement.icon, alt: achievement.title, style: { width: '50px', height: '50px' } }),
-            React.createElement("h3", null, achievement.title),
-            React.createElement("p", null, achievement.description),
-            React.createElement("button", { onClick: onClose }, "Okay"))));
+    },
+};
+
+const AchievementModal = ({ isOpen, achievement, onClose, styles }) => {
+    if (!isOpen || !achievement)
+        return null;
+    return (React.createElement("div", { style: styles.overlay },
+        React.createElement("div", { style: styles.content },
+            React.createElement("h2", { style: styles.title }, "Achievement Unlocked!"),
+            React.createElement("img", { src: achievement.icon, alt: achievement.title, style: styles.icon }),
+            React.createElement("h3", { style: styles.title }, achievement.title),
+            React.createElement("p", { style: styles.description }, achievement.description),
+            React.createElement("button", { onClick: onClose, style: styles.button }, "Okay"))));
 };
 var AchievementModal$1 = React.memo(AchievementModal);
 
-const BadgesModal = ({ show, achievements, onClose }) => {
-    if (!show)
+const BadgesModal = ({ isOpen, achievements, onClose, styles }) => {
+    if (!isOpen)
         return null;
-    const modalStyle = {
-        position: 'fixed',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        backgroundColor: '#fff',
-        padding: '20px',
-        borderRadius: '8px',
-        boxShadow: '0 0 10px rgba(0,0,0,0.1)',
-        zIndex: 1000,
-        maxWidth: '80%',
-        maxHeight: '80%',
-        overflow: 'auto',
-    };
-    const overlayStyle = {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0,0,0,0.5)',
-        zIndex: 999,
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { style: overlayStyle, onClick: onClose }),
-        React.createElement("div", { style: modalStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": "badges-title" },
-            React.createElement("h2", { id: "badges-title" }, "Your Achievements"),
-            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', justifyContent: 'center' } }, achievements.map(achievement => (React.createElement("div", { key: achievement.id, style: { margin: '10px', textAlign: 'center' } },
-                React.createElement("img", { src: achievement.icon, alt: achievement.title, style: { width: '50px', height: '50px' } }),
-                React.createElement("h4", null, achievement.title))))),
-            React.createElement("button", { onClick: onClose, style: { marginTop: '20px' } }, "Close"))));
+    return (React.createElement("div", { style: styles.overlay },
+        React.createElement("div", { style: styles.content },
+            React.createElement("h2", { style: styles.title }, "Your Achievements"),
+            React.createElement("div", { style: styles.badgeContainer }, achievements.map((achievement) => (React.createElement("div", { key: achievement.id, style: styles.badge },
+                React.createElement("img", { src: achievement.icon, alt: achievement.title, style: styles.badgeIcon }),
+                React.createElement("span", { style: styles.badgeTitle }, achievement.title))))),
+            React.createElement("button", { onClick: onClose, style: styles.button }, "Close"))));
 };
 var BadgesModal$1 = React.memo(BadgesModal);
 
-const BadgesButton = ({ onClick, position }) => {
-    const buttonStyle = {
-        position: 'fixed',
+const BadgesButton = ({ onClick, position, styles }) => {
+    const positionStyle = {
         [position.split('-')[0]]: '20px',
         [position.split('-')[1]]: '20px',
-        padding: '10px 20px',
-        backgroundColor: '#007bff',
-        color: '#fff',
-        border: 'none',
-        borderRadius: '5px',
-        cursor: 'pointer',
-        zIndex: 998,
     };
-    return (React.createElement("button", { style: buttonStyle, onClick: onClick }, "View Achievements"));
+    return (React.createElement("button", { onClick: onClick, style: Object.assign(Object.assign({}, styles), positionStyle) }, "View Achievements"));
 };
 var BadgesButton$1 = React.memo(BadgesButton);
 
@@ -174,35 +232,26 @@ var useWindowSize = function (initialWidth, initialHeight) {
     return state;
 };
 
-const ConfettiWrapper = ({ show, confettiProps }) => {
+const ConfettiWrapper = ({ show }) => {
     const { width, height } = useWindowSize();
     if (!show)
         return null;
-    return (React.createElement(Confetti, Object.assign({ width: width, height: height }, confettiProps)));
+    return React.createElement(Confetti, { width: width, height: height, recycle: false });
 };
 
 const AchievementContext = createContext(undefined);
-const AchievementProvider = ({ children, config, initialState = {}, storageKey = 'react-achievements', badgesButtonPosition = 'top-right' }) => {
-    const extractMetrics = (state) => {
-        return Object.keys(config).reduce((acc, key) => {
-            if (key in state) {
-                acc[key] = state[key];
-            }
-            else {
-                acc[key] = [];
-            }
-            return acc;
-        }, {});
-    };
+const AchievementProvider = ({ children, config, initialState = {}, storageKey = 'react-achievements', badgesButtonPosition = 'top-right', styles = {}, }) => {
+    const mergedStyles = React.useMemo(() => mergeDeep(defaultStyles, styles), [styles]);
     const [metrics, setMetrics] = useState(() => {
         const savedMetrics = localStorage.getItem(`${storageKey}-metrics`);
-        if (savedMetrics) {
-            return JSON.parse(savedMetrics);
-        }
-        return extractMetrics(initialState);
+        return savedMetrics ? JSON.parse(savedMetrics) : initialState;
     });
-    const [achievedAchievements, setAchievedAchievements] = useState(() => {
-        const saved = localStorage.getItem(`${storageKey}-achievements`);
+    const [unlockedAchievements, setUnlockedAchievements] = useState(() => {
+        const saved = localStorage.getItem(`${storageKey}-unlocked-achievements`);
+        return saved ? JSON.parse(saved) : [];
+    });
+    const [newlyUnlockedAchievements, setNewlyUnlockedAchievements] = useState(() => {
+        const saved = localStorage.getItem(`${storageKey}-newly-unlocked-achievements`);
         return saved ? JSON.parse(saved) : [];
     });
     const [achievementQueue, setAchievementQueue] = useState([]);
@@ -214,31 +263,43 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
         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));
+            const newlyUnlockedIds = newAchievements.map(a => a.id);
+            setUnlockedAchievements(prev => {
+                const updated = [...prev, ...newlyUnlockedIds];
+                localStorage.setItem(`${storageKey}-unlocked-achievements`, JSON.stringify(updated));
+                return updated;
+            });
+            setNewlyUnlockedAchievements(prev => {
+                const updated = [...prev, ...newlyUnlockedIds];
+                localStorage.setItem(`${storageKey}-newly-unlocked-achievements`, JSON.stringify(updated));
+                return updated;
+            });
             setAchievementQueue(prevQueue => [...prevQueue, ...newAchievements]);
             setShowConfetti(true);
         }
-    }, [config, metrics, achievedAchievements, storageKey]);
+    }, [config, metrics, unlockedAchievements, storageKey]);
     useEffect(() => {
         checkAchievements();
     }, [metrics, checkAchievements]);
     useEffect(() => {
         if (achievementQueue.length > 0 && !currentAchievement) {
-            setCurrentAchievement(achievementQueue[0]);
+            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]);
-    const showBadgesModal = () => {
-        setShowBadges(true);
-    };
+    }, [achievementQueue, currentAchievement, storageKey]);
+    const showBadgesModal = () => setShowBadges(true);
     const getAchievements = (achievedIds) => {
         return Object.values(config).flatMap(conditions => conditions.filter(c => achievedIds.includes(c.data.id)).map(c => c.data));
     };
@@ -251,20 +312,20 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
                 return updatedMetrics;
             });
         },
-        achievedAchievements,
+        unlockedAchievements,
         checkAchievements,
         showBadgesModal
     };
     return (React.createElement(AchievementContext.Provider, { value: contextValue },
         children,
-        React.createElement(AchievementModal$1, { show: !!currentAchievement, achievement: currentAchievement, onClose: () => {
+        React.createElement(AchievementModal$1, { isOpen: !!currentAchievement, achievement: currentAchievement, onClose: () => {
                 setCurrentAchievement(null);
-                if (achievementQueue.length === 0) {
+                if (achievementQueue.length === 0 && newlyUnlockedAchievements.length === 0) {
                     setShowConfetti(false);
                 }
-            } }),
-        React.createElement(BadgesModal$1, { show: showBadges, achievements: getAchievements(achievedAchievements), onClose: () => setShowBadges(false) }),
-        React.createElement(BadgesButton$1, { onClick: showBadgesModal, position: badgesButtonPosition }),
+            }, styles: mergedStyles.achievementModal }),
+        React.createElement(BadgesModal$1, { isOpen: showBadges, achievements: getAchievements(unlockedAchievements), onClose: () => setShowBadges(false), styles: mergedStyles.badgesModal }),
+        React.createElement(BadgesButton$1, { onClick: showBadgesModal, position: badgesButtonPosition, styles: mergedStyles.badgesButton }),
         React.createElement(ConfettiWrapper, { show: showConfetti || achievementQueue.length > 0 })));
 };
 const useAchievement = () => {
@@ -274,5 +335,26 @@ const useAchievement = () => {
     }
     return context;
 };
+// Helper function to deep merge objects
+function mergeDeep(target, source) {
+    const output = Object.assign({}, target);
+    if (isObject(target) && isObject(source)) {
+        Object.keys(source).forEach(key => {
+            if (isObject(source[key])) {
+                if (!(key in target))
+                    Object.assign(output, { [key]: source[key] });
+                else
+                    output[key] = mergeDeep(target[key], source[key]);
+            }
+            else {
+                Object.assign(output, { [key]: source[key] });
+            }
+        });
+    }
+    return output;
+}
+function isObject(item) {
+    return (item && typeof item === 'object' && !Array.isArray(item));
+}
 
 export { AchievementProvider, ConfettiWrapper, useAchievement };

package/dist/types.d.ts

@@ -1,18 +1,17 @@
-export type MetricValueItem = number | boolean | string | any;
-export type MetricValue = MetricValueItem[];
-export interface Metrics {
-    [key: string]: MetricValue;
-}
 export interface AchievementData {
     id: string;
     title: string;
     description: string;
     icon: string;
 }
+export type MetricValue = number | string | boolean | Date;
+export interface Metrics {
+    [key: string]: MetricValue[];
+}
 export interface AchievementCondition {
-    check: (metricValue: MetricValue) => boolean;
+    check: (value: MetricValue[]) => boolean;
     data: AchievementData;
 }
 export interface AchievementConfig {
-    [metricKey: string]: AchievementCondition[];
+    [key: string]: AchievementCondition[];
 }

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.2.0",
+  "version": "1.3.1",
   "description": "This package allows users to transpose a React achievements engine over their React apps",
   "keywords": [
     "react",

package/src/components/AchievementModal.tsx

@@ -1,48 +1,27 @@
 import React from 'react';
 import { AchievementData } from '../types';
+import { Styles } from '../defaultStyles';
 
 interface AchievementModalProps {
-    show: boolean;
+    isOpen: boolean;
     achievement: AchievementData | null;
     onClose: () => void;
+    styles: Styles['achievementModal'];
 }
 
-const AchievementModal: React.FC<AchievementModalProps> = ({ show, achievement, onClose }) => {
-    if (!show || !achievement) return null;
-
-    const modalStyle: React.CSSProperties = {
-        position: 'fixed',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        backgroundColor: '#fff',
-        padding: '20px',
-        borderRadius: '8px',
-        boxShadow: '0 0 10px rgba(0,0,0,0.1)',
-        zIndex: 1000,
-    };
-
-    const overlayStyle: React.CSSProperties = {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0,0,0,0.5)',
-        zIndex: 999,
-    };
+const AchievementModal: React.FC<AchievementModalProps> = ({ isOpen, achievement, onClose, styles }) => {
+    if (!isOpen || !achievement) return null;
 
     return (
-        <>
-            <div style={overlayStyle} onClick={onClose} />
-            <div style={modalStyle} role="dialog" aria-modal="true" aria-labelledby="achievement-title">
-                <h2 id="achievement-title">Achievement Unlocked!</h2>
-                <img src={achievement.icon} alt={achievement.title} style={{ width: '50px', height: '50px' }} />
-                <h3>{achievement.title}</h3>
-                <p>{achievement.description}</p>
-                <button onClick={onClose}>Okay</button>
+        <div style={styles.overlay as React.CSSProperties}>
+            <div style={styles.content}>
+                <h2 style={styles.title}>Achievement Unlocked!</h2>
+                <img src={achievement.icon} alt={achievement.title} style={styles.icon} />
+                <h3 style={styles.title}>{achievement.title}</h3>
+                <p style={styles.description}>{achievement.description}</p>
+                <button onClick={onClose} style={styles.button}>Okay</button>
             </div>
-        </>
+        </div>
     );
 };
 

package/src/components/BadgesButton.tsx

@@ -1,26 +1,20 @@
 import React from 'react';
+import { Styles } from '../defaultStyles';
 
 interface BadgesButtonProps {
     onClick: () => void;
     position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    styles: Styles['badgesButton'];
 }
 
-const BadgesButton: React.FC<BadgesButtonProps> = ({ onClick, position }) => {
-    const buttonStyle: React.CSSProperties = {
-        position: 'fixed',
+const BadgesButton: React.FC<BadgesButtonProps> = ({ onClick, position, styles }) => {
+    const positionStyle = {
         [position.split('-')[0]]: '20px',
         [position.split('-')[1]]: '20px',
-        padding: '10px 20px',
-        backgroundColor: '#007bff',
-        color: '#fff',
-        border: 'none',
-        borderRadius: '5px',
-        cursor: 'pointer',
-        zIndex: 998,
     };
 
     return (
-        <button style={buttonStyle} onClick={onClick}>
+        <button onClick={onClick} style={{ ...styles, ...positionStyle }}>
             View Achievements
         </button>
     );

package/src/components/BadgesModal.tsx

@@ -1,56 +1,32 @@
 import React from 'react';
 import { AchievementData } from '../types';
+import { Styles } from '../defaultStyles';
 
 interface BadgesModalProps {
-    show: boolean;
+    isOpen: boolean;
     achievements: AchievementData[];
     onClose: () => void;
+    styles: Styles['badgesModal'];
 }
 
-const BadgesModal: React.FC<BadgesModalProps> = ({ show, achievements, onClose }) => {
-    if (!show) return null;
-
-    const modalStyle: React.CSSProperties = {
-        position: 'fixed',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        backgroundColor: '#fff',
-        padding: '20px',
-        borderRadius: '8px',
-        boxShadow: '0 0 10px rgba(0,0,0,0.1)',
-        zIndex: 1000,
-        maxWidth: '80%',
-        maxHeight: '80%',
-        overflow: 'auto',
-    };
-
-    const overlayStyle: React.CSSProperties = {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0,0,0,0.5)',
-        zIndex: 999,
-    };
+const BadgesModal: React.FC<BadgesModalProps> = ({ isOpen, achievements, onClose, styles }) => {
+    if (!isOpen) return null;
 
     return (
-        <>
-            <div style={overlayStyle} onClick={onClose} />
-            <div style={modalStyle} role="dialog" aria-modal="true" aria-labelledby="badges-title">
-                <h2 id="badges-title">Your Achievements</h2>
-                <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center' }}>
-                    {achievements.map(achievement => (
-                        <div key={achievement.id} style={{ margin: '10px', textAlign: 'center' }}>
-                            <img src={achievement.icon} alt={achievement.title} style={{ width: '50px', height: '50px' }} />
-                            <h4>{achievement.title}</h4>
+        <div style={styles.overlay as React.CSSProperties}>
+            <div style={styles.content}>
+                <h2 style={styles.title}>Your Achievements</h2>
+                <div style={styles.badgeContainer}>
+                    {achievements.map((achievement) => (
+                        <div key={achievement.id} style={styles.badge}>
+                            <img src={achievement.icon} alt={achievement.title} style={styles.badgeIcon} />
+                            <span style={styles.badgeTitle}>{achievement.title}</span>
                         </div>
                     ))}
                 </div>
-                <button onClick={onClose} style={{ marginTop: '20px' }}>Close</button>
+                <button onClick={onClose} style={styles.button}>Close</button>
             </div>
-        </>
+        </div>
     );
 };
 

package/src/components/ConfettiWrapper.tsx

@@ -1,25 +1,17 @@
 import React from 'react';
 import Confetti from 'react-confetti';
 import { useWindowSize } from 'react-use';
-import { ConfettiProps } from 'react-confetti';
 
 interface ConfettiWrapperProps {
     show: boolean;
-    confettiProps?: Partial<ConfettiProps>;
 }
 
-const ConfettiWrapper: React.FC<ConfettiWrapperProps> = ({ show, confettiProps }) => {
+const ConfettiWrapper: React.FC<ConfettiWrapperProps> = ({ show }) => {
     const { width, height } = useWindowSize();
 
     if (!show) return null;
 
-    return (
-        <Confetti
-            width={width}
-            height={height}
-            {...confettiProps}
-        />
-    );
+    return <Confetti width={width} height={height} recycle={false} />;
 };
 
 export default ConfettiWrapper;