react-achievements 1.3.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';
@@ -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,25 +30,14 @@ 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 [unlockedAchievements, setUnlockedAchievements] = useState<string[]>(() => {
@@ -78,16 +69,20 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
 
         if (newAchievements.length > 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]));
-
+            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, unlockedAchievements, newlyUnlockedAchievements, storageKey]);
+    }, [config, metrics, unlockedAchievements, storageKey]);
 
     useEffect(() => {
         checkAchievements();
@@ -107,9 +102,7 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
         }
     }, [achievementQueue, currentAchievement, storageKey]);
 
-    const showBadgesModal = () => {
-        setShowBadges(true);
-    };
+    const showBadgesModal = () => setShowBadges(true);
 
     const getAchievements = (achievedIds: string[]) => {
         return Object.values(config).flatMap(conditions =>
@@ -131,19 +124,11 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
         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={!!currentAchievement}
+                isOpen={!!currentAchievement}
                 achievement={currentAchievement}
                 onClose={() => {
                     setCurrentAchievement(null);
@@ -151,13 +136,19 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
                         setShowConfetti(false);
                     }
                 }}
+                styles={mergedStyles.achievementModal}
             />
             <BadgesModal
-                show={showBadges}
+                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>
     );
@@ -169,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[];
 }