react-achievements 1.2.0 → 1.3.1

package/src/context/AchievementContext.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
 import { Metrics, AchievementConfig, AchievementData, MetricValue } from '../types';
+import { defaultStyles, Styles } from '../defaultStyles';
 import AchievementModal from '../components/AchievementModal';
 import BadgesModal from '../components/BadgesModal';
 import BadgesButton from '../components/BadgesButton';
@@ -8,7 +9,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;
 }
@@ -19,6 +20,7 @@ interface AchievementProviderProps {
     initialState?: Record<string, MetricValue>;
     storageKey?: string;
     badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    styles?: Partial<Styles>;
 }
 
 const AchievementContext = createContext<AchievementContextProps | undefined>(undefined);
@@ -28,29 +30,23 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
                                                                             config,
                                                                             initialState = {},
                                                                             storageKey = 'react-achievements',
-                                                                            badgesButtonPosition = 'top-right'
+                                                                            badgesButtonPosition = 'top-right',
+                                                                            styles = {},
                                                                         }) => {
-    const extractMetrics = (state: Record<string, MetricValue>): Metrics => {
-        return Object.keys(config).reduce((acc, key) => {
-            if (key in state) {
-                acc[key] = state[key];
-            } else {
-                acc[key] = [];
-            }
-            return acc;
-        }, {} as Metrics);
-    };
+    const mergedStyles = React.useMemo(() => mergeDeep(defaultStyles, styles), [styles]);
 
     const [metrics, setMetrics] = useState<Metrics>(() => {
         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<string[]>(() => {
-        const saved = localStorage.getItem(`${storageKey}-achievements`);
+    const [unlockedAchievements, setUnlockedAchievements] = useState<string[]>(() => {
+        const saved = localStorage.getItem(`${storageKey}-unlocked-achievements`);
+        return saved ? JSON.parse(saved) : [];
+    });
+
+    const [newlyUnlockedAchievements, setNewlyUnlockedAchievements] = useState<string[]>(() => {
+        const saved = localStorage.getItem(`${storageKey}-newly-unlocked-achievements`);
         return saved ? JSON.parse(saved) : [];
     });
 
@@ -65,20 +61,28 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
         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();
@@ -86,14 +90,19 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
 
     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]);
+    }, [achievementQueue, currentAchievement, storageKey]);
 
-    const showBadgesModal = () => {
-        setShowBadges(true);
-    };
+    const showBadgesModal = () => setShowBadges(true);
 
     const getAchievements = (achievedIds: string[]) => {
         return Object.values(config).flatMap(conditions =>
@@ -110,7 +119,7 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
                 return updatedMetrics;
             });
         },
-        achievedAchievements,
+        unlockedAchievements,
         checkAchievements,
         showBadgesModal
     };
@@ -119,21 +128,27 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
         <AchievementContext.Provider value={contextValue}>
             {children}
             <AchievementModal
-                show={!!currentAchievement}
+                isOpen={!!currentAchievement}
                 achievement={currentAchievement}
                 onClose={() => {
                     setCurrentAchievement(null);
-                    if (achievementQueue.length === 0) {
+                    if (achievementQueue.length === 0 && newlyUnlockedAchievements.length === 0) {
                         setShowConfetti(false);
                     }
                 }}
+                styles={mergedStyles.achievementModal}
             />
             <BadgesModal
-                show={showBadges}
-                achievements={getAchievements(achievedAchievements)}
+                isOpen={showBadges}
+                achievements={getAchievements(unlockedAchievements)}
                 onClose={() => setShowBadges(false)}
+                styles={mergedStyles.badgesModal}
+            />
+            <BadgesButton
+                onClick={showBadgesModal}
+                position={badgesButtonPosition}
+                styles={mergedStyles.badgesButton}
             />
-            <BadgesButton onClick={showBadgesModal} position={badgesButtonPosition} />
             <ConfettiWrapper show={showConfetti || achievementQueue.length > 0} />
         </AchievementContext.Provider>
     );
@@ -145,4 +160,26 @@ export const useAchievement = () => {
         throw new Error('useAchievement must be used within an AchievementProvider');
     }
     return context;
-};
+};
+
+// Helper function to deep merge objects
+function mergeDeep(target: any, source: any) {
+    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: any) {
+    return (item && typeof item === 'object' && !Array.isArray(item));
+}

package/src/defaultStyles.ts

@@ -0,0 +1,138 @@
+type StyleObject = { [key: string]: string | number };
+
+interface ModalStyles {
+    overlay: StyleObject;
+    content: StyleObject;
+    title: StyleObject;
+    icon: StyleObject;
+    description: StyleObject;
+    button: StyleObject;
+}
+
+interface BadgesModalStyles {
+    overlay: StyleObject;
+    content: StyleObject;
+    title: StyleObject;
+    badgeContainer: StyleObject;
+    badge: StyleObject;
+    badgeIcon: StyleObject;
+    badgeTitle: StyleObject;
+    button: StyleObject;
+}
+
+export interface Styles {
+    achievementModal: ModalStyles;
+    badgesModal: BadgesModalStyles;
+    badgesButton: StyleObject;
+}
+
+export const defaultStyles: Styles = {
+    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',
+        padding: '10px 20px',
+        backgroundColor: '#007bff',
+        color: '#ffffff',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        zIndex: 1000,
+    },
+};

package/src/types.ts

@@ -1,11 +1,3 @@
-export type MetricValueItem = number | boolean | string | any;
-
-export type MetricValue = MetricValueItem[];
-
-export interface Metrics {
-    [key: string]: MetricValue;
-}
-
 export interface AchievementData {
     id: string;
     title: string;
@@ -13,11 +5,17 @@ export interface AchievementData {
     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[];
 }