react-achievements 1.0.2 → 1.0.4

package/dist/badges.d.ts

@@ -1,8 +1,8 @@
-interface BadgeConfig {
+export interface BadgeConfig {
     id: string;
     icon: string;
     title: string;
     description: string;
 }
 declare const defaultBadges: BadgeConfig[];
-export { defaultBadges, BadgeConfig };
+export { defaultBadges };

package/dist/components/Achievement.d.ts

@@ -6,5 +6,5 @@ interface AchievementProps {
     message: string;
     children: React.ReactNode;
 }
-declare const Achievement: React.FC<AchievementProps>;
-export default Achievement;
+declare const _default: React.NamedExoticComponent<AchievementProps>;
+export default _default;

package/dist/components/AchievementModal.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { AchievementData } from '../types';
 interface AchievementModalProps {
     show: boolean;
-    message: string;
+    achievement: AchievementData | null;
     onClose: () => void;
 }
-declare const AchievementModal: React.FC<AchievementModalProps>;
-export default AchievementModal;
+declare const _default: React.NamedExoticComponent<AchievementModalProps>;
+export default _default;

package/dist/components/BadgesButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface BadgesButtonProps {
+    onClick: () => void;
+    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+declare const _default: React.NamedExoticComponent<BadgesButtonProps>;
+export default _default;

package/dist/components/BadgesModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AchievementData } from '../types';
+interface BadgesModalProps {
+    show: boolean;
+    achievements: AchievementData[];
+    onClose: () => void;
+}
+declare const _default: React.NamedExoticComponent<BadgesModalProps>;
+export default _default;

package/dist/components/ConfettiWrapper.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import { ConfettiProps } from 'react-confetti';
 interface ConfettiWrapperProps {
     show: boolean;
+    confettiProps?: Partial<ConfettiProps>;
 }
 declare const ConfettiWrapper: React.FC<ConfettiWrapperProps>;
 export default ConfettiWrapper;

package/dist/components/Progress.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ProgressProps {
+    style?: React.CSSProperties;
+}
+declare const _default: React.NamedExoticComponent<ProgressProps>;
+export default _default;

package/dist/context/AchievementContext.d.ts

@@ -1,16 +1,18 @@
 import React, { ReactNode } from 'react';
-import { BadgeConfig } from '../badges';
-import { LevelConfig } from '../levels';
+import { Metrics, AchievementConfig } from '../types';
 interface AchievementContextProps {
-    metric: number;
-    setMetric: (value: number) => void;
-    badges: BadgeConfig[];
-    levels: LevelConfig[];
-    achievedLevels: number[];
-    handleAchieve: (level: number, message: string) => void;
+    metrics: Metrics;
+    setMetrics: (metrics: Metrics) => void;
+    achievedAchievements: string[];
+    checkAchievements: () => void;
+    showBadgesModal: () => void;
 }
-declare const AchievementProvider: React.FC<{
+interface AchievementProviderProps {
     children: ReactNode;
-}>;
-declare const useAchievement: () => AchievementContextProps;
-export { AchievementProvider, useAchievement };
+    config: AchievementConfig;
+    storageKey?: string;
+    badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+export declare const AchievementProvider: React.FC<AchievementProviderProps>;
+export declare const useAchievement: () => AchievementContextProps;
+export {};

package/dist/index.cjs.js

@@ -2,27 +2,94 @@
 
 var React = require('react');
 
-const defaultBadges = [
-    {
-        id: 'beginner',
-        icon: '/path/to/beginner-icon.png',
-        title: 'Beginner',
-        description: 'Achieved beginner level',
-    },
-    {
-        id: 'intermediate',
-        icon: '/path/to/intermediate-icon.png',
-        title: 'Intermediate',
-        description: 'Achieved intermediate level',
-    },
-    // Add more badges as needed
-];
-
-const levels = [
-    { level: 1, threshold: 10, badgeId: 'beginner' },
-    { level: 2, threshold: 50, badgeId: 'intermediate' },
-    // Add more levels as needed
-];
+const AchievementModal = ({ show, achievement, onClose }) => {
+    if (!show || !achievement)
+        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,
+    };
+    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"))));
+};
+var AchievementModal$1 = React.memo(AchievementModal);
+
+const BadgesModal = ({ show, achievements, onClose }) => {
+    if (!show)
+        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("p", null, achievement.description))))),
+            React.createElement("button", { onClick: onClose, style: { marginTop: '20px' } }, "Close"))));
+};
+var BadgesModal$1 = React.memo(BadgesModal);
+
+const BadgesButton = ({ onClick, position }) => {
+    const buttonStyle = {
+        position: 'fixed',
+        [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"));
+};
+var BadgesButton$1 = React.memo(BadgesButton);
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -110,87 +177,63 @@ var useWindowSize = function (initialWidth, initialHeight) {
     return state;
 };
 
-const ConfettiWrapper = ({ show }) => {
+const ConfettiWrapper = ({ show, confettiProps }) => {
     const { width, height } = useWindowSize();
-    return show ? React.createElement(Confetti, { width: width, height: height }) : null;
-};
-
-const AchievementModal = ({ show, message, onClose }) => {
     if (!show)
         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,
-    };
-    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 },
-            React.createElement("h2", null, "Achievement Unlocked!"),
-            React.createElement("p", null, message),
-            React.createElement("button", { onClick: onClose }, "Okay"))));
-};
-
-const Badge = ({ icon, title, description, position = 'top-right' }) => {
-    const badgeStyle = {
-        position: 'fixed',
-        [position.split('-')[0]]: '10px',
-        [position.split('-')[1]]: '10px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        backgroundColor: '#fff',
-        border: '1px solid #ccc',
-        borderRadius: '8px',
-        padding: '10px',
-        boxShadow: '0 0 10px rgba(0,0,0,0.1)',
-    };
-    return (React.createElement("div", { style: badgeStyle },
-        React.createElement("img", { src: icon, alt: title, style: { width: '50px', height: '50px' } }),
-        React.createElement("h4", null, title),
-        React.createElement("p", null, description)));
+    return (React.createElement(Confetti, Object.assign({ width: width, height: height }, confettiProps)));
 };
 
 const AchievementContext = React.createContext(undefined);
-const AchievementProvider = ({ children }) => {
-    const [metric, setMetric] = React.useState(0);
-    const [achievedLevels, setAchievedLevels] = React.useState([]);
+const AchievementProvider = ({ children, config, storageKey = 'react-achievements', badgesButtonPosition = 'top-right' }) => {
+    const [metrics, setMetrics] = React.useState({});
+    const [achievedAchievements, setAchievedAchievements] = React.useState(() => {
+        const saved = localStorage.getItem(`${storageKey}-achievements`);
+        return saved ? JSON.parse(saved) : [];
+    });
+    const [newAchievement, setNewAchievement] = React.useState(null);
+    const [showBadges, setShowBadges] = React.useState(false);
     const [showConfetti, setShowConfetti] = React.useState(false);
-    const [modalMessage, setModalMessage] = React.useState('');
-    const handleAchieve = (level, message) => {
-        if (!achievedLevels.includes(level)) {
-            setAchievedLevels([...achievedLevels, level]);
+    const checkAchievements = () => {
+        const newAchievements = [];
+        Object.entries(config).forEach(([metricKey, conditions]) => {
+            const metricValue = metrics[metricKey];
+            conditions.forEach(condition => {
+                if (condition.check(metricValue) && !achievedAchievements.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]);
             setShowConfetti(true);
-            setModalMessage(message);
         }
     };
-    const handleCloseModal = () => {
-        setShowConfetti(false);
-        setModalMessage('');
+    const showBadgesModal = () => {
+        setShowBadges(true);
+    };
+    const contextValue = {
+        metrics,
+        setMetrics: (newMetrics) => {
+            setMetrics(newMetrics);
+            checkAchievements();
+        },
+        achievedAchievements,
+        checkAchievements,
+        showBadgesModal
     };
-    return (React.createElement(AchievementContext.Provider, { value: { metric, setMetric, badges: defaultBadges, levels, achievedLevels, handleAchieve } },
+    return (React.createElement(AchievementContext.Provider, { value: contextValue },
         children,
-        levels.map(levelConfig => {
-            var _a, _b, _c;
-            return achievedLevels.includes(levelConfig.level) ? (React.createElement(Badge, { key: levelConfig.level, icon: ((_a = defaultBadges.find(badge => badge.id === levelConfig.badgeId)) === null || _a === void 0 ? void 0 : _a.icon) || '', title: ((_b = defaultBadges.find(badge => badge.id === levelConfig.badgeId)) === null || _b === void 0 ? void 0 : _b.title) || '', description: ((_c = defaultBadges.find(badge => badge.id === levelConfig.badgeId)) === null || _c === void 0 ? void 0 : _c.description) || '' })) : null;
-        }),
-        React.createElement(ConfettiWrapper, { show: showConfetti }),
-        React.createElement(AchievementModal, { show: !!modalMessage, message: modalMessage, onClose: handleCloseModal })));
+        React.createElement(AchievementModal$1, { show: !!newAchievement, achievement: newAchievement, onClose: () => {
+                setNewAchievement(null);
+                setShowConfetti(false);
+            } }),
+        React.createElement(BadgesModal$1, { show: showBadges, achievements: Object.values(config).flatMap(conditions => conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data)), onClose: () => setShowBadges(false) }),
+        React.createElement(BadgesButton$1, { onClick: showBadgesModal, position: badgesButtonPosition }),
+        React.createElement(ConfettiWrapper, { show: showConfetti })));
 };
 const useAchievement = () => {
     const context = React.useContext(AchievementContext);
@@ -200,21 +243,6 @@ const useAchievement = () => {
     return context;
 };
 
-const Achievement = ({ metric, threshold, onAchieve, message, children }) => {
-    const { setMetric, achievedLevels, levels, handleAchieve } = useAchievement();
-    React.useEffect(() => {
-        if (metric >= threshold && !achievedLevels.includes(threshold)) {
-            onAchieve();
-            const levelConfig = levels.find(level => level.threshold === threshold);
-            if (levelConfig) {
-                setMetric(metric);
-                handleAchieve(levelConfig.level, message);
-            }
-        }
-    }, [metric, threshold, onAchieve, setMetric, achievedLevels, levels, message, handleAchieve]);
-    return React.createElement("div", null, children);
-};
-
-exports.Achievement = Achievement;
 exports.AchievementProvider = AchievementProvider;
+exports.ConfettiWrapper = ConfettiWrapper;
 exports.useAchievement = useAchievement;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 import { AchievementProvider, useAchievement } from './context/AchievementContext';
-import Achievement from './components/Achievement';
-export { AchievementProvider, useAchievement, Achievement };
+import { Metrics, AchievementConfig, AchievementData, AchievementCondition } from './types';
+import ConfettiWrapper from './components/ConfettiWrapper';
+export { AchievementProvider, useAchievement, Metrics, AchievementConfig, AchievementData, AchievementCondition, ConfettiWrapper };

package/dist/index.esm.js

@@ -1,26 +1,93 @@
 import React, { useEffect, useRef, useState, useCallback, createContext, useContext } from 'react';
 
-const defaultBadges = [
-    {
-        id: 'beginner',
-        icon: '/path/to/beginner-icon.png',
-        title: 'Beginner',
-        description: 'Achieved beginner level',
-    },
-    {
-        id: 'intermediate',
-        icon: '/path/to/intermediate-icon.png',
-        title: 'Intermediate',
-        description: 'Achieved intermediate level',
-    },
-    // Add more badges as needed
-];
-
-const levels = [
-    { level: 1, threshold: 10, badgeId: 'beginner' },
-    { level: 2, threshold: 50, badgeId: 'intermediate' },
-    // Add more levels as needed
-];
+const AchievementModal = ({ show, achievement, onClose }) => {
+    if (!show || !achievement)
+        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,
+    };
+    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"))));
+};
+var AchievementModal$1 = React.memo(AchievementModal);
+
+const BadgesModal = ({ show, achievements, onClose }) => {
+    if (!show)
+        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("p", null, achievement.description))))),
+            React.createElement("button", { onClick: onClose, style: { marginTop: '20px' } }, "Close"))));
+};
+var BadgesModal$1 = React.memo(BadgesModal);
+
+const BadgesButton = ({ onClick, position }) => {
+    const buttonStyle = {
+        position: 'fixed',
+        [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"));
+};
+var BadgesButton$1 = React.memo(BadgesButton);
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -108,87 +175,63 @@ var useWindowSize = function (initialWidth, initialHeight) {
     return state;
 };
 
-const ConfettiWrapper = ({ show }) => {
+const ConfettiWrapper = ({ show, confettiProps }) => {
     const { width, height } = useWindowSize();
-    return show ? React.createElement(Confetti, { width: width, height: height }) : null;
-};
-
-const AchievementModal = ({ show, message, onClose }) => {
     if (!show)
         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,
-    };
-    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 },
-            React.createElement("h2", null, "Achievement Unlocked!"),
-            React.createElement("p", null, message),
-            React.createElement("button", { onClick: onClose }, "Okay"))));
-};
-
-const Badge = ({ icon, title, description, position = 'top-right' }) => {
-    const badgeStyle = {
-        position: 'fixed',
-        [position.split('-')[0]]: '10px',
-        [position.split('-')[1]]: '10px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        backgroundColor: '#fff',
-        border: '1px solid #ccc',
-        borderRadius: '8px',
-        padding: '10px',
-        boxShadow: '0 0 10px rgba(0,0,0,0.1)',
-    };
-    return (React.createElement("div", { style: badgeStyle },
-        React.createElement("img", { src: icon, alt: title, style: { width: '50px', height: '50px' } }),
-        React.createElement("h4", null, title),
-        React.createElement("p", null, description)));
+    return (React.createElement(Confetti, Object.assign({ width: width, height: height }, confettiProps)));
 };
 
 const AchievementContext = createContext(undefined);
-const AchievementProvider = ({ children }) => {
-    const [metric, setMetric] = useState(0);
-    const [achievedLevels, setAchievedLevels] = useState([]);
+const AchievementProvider = ({ children, config, storageKey = 'react-achievements', badgesButtonPosition = 'top-right' }) => {
+    const [metrics, setMetrics] = useState({});
+    const [achievedAchievements, setAchievedAchievements] = useState(() => {
+        const saved = localStorage.getItem(`${storageKey}-achievements`);
+        return saved ? JSON.parse(saved) : [];
+    });
+    const [newAchievement, setNewAchievement] = useState(null);
+    const [showBadges, setShowBadges] = useState(false);
     const [showConfetti, setShowConfetti] = useState(false);
-    const [modalMessage, setModalMessage] = useState('');
-    const handleAchieve = (level, message) => {
-        if (!achievedLevels.includes(level)) {
-            setAchievedLevels([...achievedLevels, level]);
+    const checkAchievements = () => {
+        const newAchievements = [];
+        Object.entries(config).forEach(([metricKey, conditions]) => {
+            const metricValue = metrics[metricKey];
+            conditions.forEach(condition => {
+                if (condition.check(metricValue) && !achievedAchievements.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]);
             setShowConfetti(true);
-            setModalMessage(message);
         }
     };
-    const handleCloseModal = () => {
-        setShowConfetti(false);
-        setModalMessage('');
+    const showBadgesModal = () => {
+        setShowBadges(true);
+    };
+    const contextValue = {
+        metrics,
+        setMetrics: (newMetrics) => {
+            setMetrics(newMetrics);
+            checkAchievements();
+        },
+        achievedAchievements,
+        checkAchievements,
+        showBadgesModal
     };
-    return (React.createElement(AchievementContext.Provider, { value: { metric, setMetric, badges: defaultBadges, levels, achievedLevels, handleAchieve } },
+    return (React.createElement(AchievementContext.Provider, { value: contextValue },
         children,
-        levels.map(levelConfig => {
-            var _a, _b, _c;
-            return achievedLevels.includes(levelConfig.level) ? (React.createElement(Badge, { key: levelConfig.level, icon: ((_a = defaultBadges.find(badge => badge.id === levelConfig.badgeId)) === null || _a === void 0 ? void 0 : _a.icon) || '', title: ((_b = defaultBadges.find(badge => badge.id === levelConfig.badgeId)) === null || _b === void 0 ? void 0 : _b.title) || '', description: ((_c = defaultBadges.find(badge => badge.id === levelConfig.badgeId)) === null || _c === void 0 ? void 0 : _c.description) || '' })) : null;
-        }),
-        React.createElement(ConfettiWrapper, { show: showConfetti }),
-        React.createElement(AchievementModal, { show: !!modalMessage, message: modalMessage, onClose: handleCloseModal })));
+        React.createElement(AchievementModal$1, { show: !!newAchievement, achievement: newAchievement, onClose: () => {
+                setNewAchievement(null);
+                setShowConfetti(false);
+            } }),
+        React.createElement(BadgesModal$1, { show: showBadges, achievements: Object.values(config).flatMap(conditions => conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data)), onClose: () => setShowBadges(false) }),
+        React.createElement(BadgesButton$1, { onClick: showBadgesModal, position: badgesButtonPosition }),
+        React.createElement(ConfettiWrapper, { show: showConfetti })));
 };
 const useAchievement = () => {
     const context = useContext(AchievementContext);
@@ -198,19 +241,4 @@ const useAchievement = () => {
     return context;
 };
 
-const Achievement = ({ metric, threshold, onAchieve, message, children }) => {
-    const { setMetric, achievedLevels, levels, handleAchieve } = useAchievement();
-    React.useEffect(() => {
-        if (metric >= threshold && !achievedLevels.includes(threshold)) {
-            onAchieve();
-            const levelConfig = levels.find(level => level.threshold === threshold);
-            if (levelConfig) {
-                setMetric(metric);
-                handleAchieve(levelConfig.level, message);
-            }
-        }
-    }, [metric, threshold, onAchieve, setMetric, achievedLevels, levels, message, handleAchieve]);
-    return React.createElement("div", null, children);
-};
-
-export { Achievement, AchievementProvider, useAchievement };
+export { AchievementProvider, ConfettiWrapper, useAchievement };

package/dist/levels.d.ts

@@ -1,7 +1,7 @@
-interface LevelConfig {
+export interface LevelConfig {
     level: number;
     threshold: number;
     badgeId: string;
 }
-declare const levels: LevelConfig[];
-export { levels, LevelConfig };
+declare const defaultLevels: LevelConfig[];
+export { defaultLevels };

package/dist/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-achievements",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "This package allows users to transpose a React achievements engine over their React apps",
   "keywords": [
     "react",
@@ -12,7 +12,8 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "deploy": "npm run build && npm publish"
   },
   "author": "David Brown",
   "license": "ISC",

package/public/badges/icon1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M560-440q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35ZM280-320q-33 0-56.5-23.5T200-400v-320q0-33 23.5-56.5T280-800h560q33 0 56.5 23.5T920-720v320q0 33-23.5 56.5T840-320H280Zm80-80h400q0-33 23.5-56.5T840-480v-160q-33 0-56.5-23.5T760-720H360q0 33-23.5 56.5T280-640v160q33 0 56.5 23.5T360-400Zm440 240H120q-33 0-56.5-23.5T40-240v-440h80v440h680v80ZM280-400v-320 320Z"/></svg>

package/src/components/AchievementModal.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
+import { AchievementData } from '../types';
 
 interface AchievementModalProps {
     show: boolean;
-    message: string;
+    achievement: AchievementData | null;
     onClose: () => void;
 }
 
-const AchievementModal: React.FC<AchievementModalProps> = ({ show, message, onClose }) => {
-    if (!show) return null;
+const AchievementModal: React.FC<AchievementModalProps> = ({ show, achievement, onClose }) => {
+    if (!show || !achievement) return null;
 
     const modalStyle: React.CSSProperties = {
         position: 'fixed',
@@ -34,13 +35,15 @@ const AchievementModal: React.FC<AchievementModalProps> = ({ show, message, onCl
     return (
         <>
             <div style={overlayStyle} onClick={onClose} />
-            <div style={modalStyle}>
-                <h2>Achievement Unlocked!</h2>
-                <p>{message}</p>
+            <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>
         </>
     );
 };
 
-export default AchievementModal;
+export default React.memo(AchievementModal);

package/src/components/BadgesButton.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface BadgesButtonProps {
+    onClick: () => void;
+    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+
+const BadgesButton: React.FC<BadgesButtonProps> = ({ onClick, position }) => {
+    const buttonStyle: React.CSSProperties = {
+        position: 'fixed',
+        [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}>
+            View Achievements
+        </button>
+    );
+};
+
+export default React.memo(BadgesButton);

package/src/components/BadgesModal.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { AchievementData } from '../types';
+
+interface BadgesModalProps {
+    show: boolean;
+    achievements: AchievementData[];
+    onClose: () => void;
+}
+
+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,
+    };
+
+    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>
+                            <p>{achievement.description}</p>
+                        </div>
+                    ))}
+                </div>
+                <button onClick={onClose} style={{ marginTop: '20px' }}>Close</button>
+            </div>
+        </>
+    );
+};
+
+export default React.memo(BadgesModal);

package/src/components/ConfettiWrapper.tsx

@@ -1,15 +1,25 @@
 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 }) => {
+const ConfettiWrapper: React.FC<ConfettiWrapperProps> = ({ show, confettiProps }) => {
     const { width, height } = useWindowSize();
 
-    return show ? <Confetti width={width} height={height} /> : null;
+    if (!show) return null;
+
+    return (
+        <Confetti
+            width={width}
+            height={height}
+            {...confettiProps}
+        />
+    );
 };
 
-export default ConfettiWrapper;
+export default ConfettiWrapper;

package/src/context/AchievementContext.tsx

@@ -1,65 +1,106 @@
 import React, { createContext, useContext, useState, ReactNode } from 'react';
-import { defaultBadges, BadgeConfig } from '../badges';
-import { levels, LevelConfig } from '../levels';
-import ConfettiWrapper from '../components/ConfettiWrapper';
+import { Metrics, AchievementConfig, AchievementData } from '../types';
 import AchievementModal from '../components/AchievementModal';
-import Badge from '../components/Badge';
+import BadgesModal from '../components/BadgesModal';
+import BadgesButton from '../components/BadgesButton';
+import ConfettiWrapper from '../components/ConfettiWrapper';
 
 interface AchievementContextProps {
-    metric: number;
-    setMetric: (value: number) => void;
-    badges: BadgeConfig[];
-    levels: LevelConfig[];
-    achievedLevels: number[];
-    handleAchieve: (level: number, message: string) => void;
+    metrics: Metrics;
+    setMetrics: (metrics: Metrics) => void;
+    achievedAchievements: string[];
+    checkAchievements: () => void;
+    showBadgesModal: () => void;
+}
+
+interface AchievementProviderProps {
+    children: ReactNode;
+    config: AchievementConfig;
+    storageKey?: string;
+    badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
 
 const AchievementContext = createContext<AchievementContextProps | undefined>(undefined);
 
-const AchievementProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-    const [metric, setMetric] = useState(0);
-    const [achievedLevels, setAchievedLevels] = useState<number[]>([]);
+export const AchievementProvider: React.FC<AchievementProviderProps> = ({
+                                                                            children,
+                                                                            config,
+                                                                            storageKey = 'react-achievements',
+                                                                            badgesButtonPosition = 'top-right'
+                                                                        }) => {
+    const [metrics, setMetrics] = useState<Metrics>({});
+    const [achievedAchievements, setAchievedAchievements] = useState<string[]>(() => {
+        const saved = localStorage.getItem(`${storageKey}-achievements`);
+        return saved ? JSON.parse(saved) : [];
+    });
+    const [newAchievement, setNewAchievement] = useState<AchievementData | null>(null);
+    const [showBadges, setShowBadges] = useState(false);
     const [showConfetti, setShowConfetti] = useState(false);
-    const [modalMessage, setModalMessage] = useState('');
 
-    const handleAchieve = (level: number, message: string) => {
-        if (!achievedLevels.includes(level)) {
-            setAchievedLevels([...achievedLevels, level]);
+    const checkAchievements = () => {
+        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)) {
+                    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]);
             setShowConfetti(true);
-            setModalMessage(message);
         }
     };
 
-    const handleCloseModal = () => {
-        setShowConfetti(false);
-        setModalMessage('');
+    const showBadgesModal = () => {
+        setShowBadges(true);
+    };
+
+    const contextValue: AchievementContextProps = {
+        metrics,
+        setMetrics: (newMetrics: Metrics) => {
+            setMetrics(newMetrics);
+            checkAchievements();
+        },
+        achievedAchievements,
+        checkAchievements,
+        showBadgesModal
     };
 
     return (
-        <AchievementContext.Provider value={{ metric, setMetric, badges: defaultBadges, levels, achievedLevels, handleAchieve }}>
+        <AchievementContext.Provider value={contextValue}>
             {children}
-            {levels.map(levelConfig =>
-                achievedLevels.includes(levelConfig.level) ? (
-                    <Badge
-                        key={levelConfig.level}
-                        icon={defaultBadges.find(badge => badge.id === levelConfig.badgeId)?.icon || ''}
-                        title={defaultBadges.find(badge => badge.id === levelConfig.badgeId)?.title || ''}
-                        description={defaultBadges.find(badge => badge.id === levelConfig.badgeId)?.description || ''}
-                    />
-                ) : null
-            )}
+            <AchievementModal
+                show={!!newAchievement}
+                achievement={newAchievement}
+                onClose={() => {
+                    setNewAchievement(null);
+                    setShowConfetti(false);
+                }}
+            />
+            <BadgesModal
+                show={showBadges}
+                achievements={Object.values(config).flatMap(conditions =>
+                    conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data)
+                )}
+                onClose={() => setShowBadges(false)}
+            />
+            <BadgesButton onClick={showBadgesModal} position={badgesButtonPosition} />
             <ConfettiWrapper show={showConfetti} />
-            <AchievementModal show={!!modalMessage} message={modalMessage} onClose={handleCloseModal} />
         </AchievementContext.Provider>
     );
 };
 
-const useAchievement = () => {
+export const useAchievement = () => {
     const context = useContext(AchievementContext);
     if (context === undefined) {
         throw new Error('useAchievement must be used within an AchievementProvider');
     }
     return context;
-};
-
-export { AchievementProvider, useAchievement };
+};

package/src/index.ts

@@ -1,4 +1,13 @@
 import { AchievementProvider, useAchievement } from './context/AchievementContext';
-import Achievement from './components/Achievement';
+import { Metrics, AchievementConfig, AchievementData, AchievementCondition } from './types';
+import ConfettiWrapper from './components/ConfettiWrapper';
 
-export { AchievementProvider, useAchievement, Achievement };
+export {
+    AchievementProvider,
+    useAchievement,
+    Metrics,
+    AchievementConfig,
+    AchievementData,
+    AchievementCondition,
+    ConfettiWrapper
+};

package/src/{custom.d.ts → react-confetti.d.ts}

@@ -1,7 +1,7 @@
 declare module 'react-confetti' {
     import { ComponentType } from 'react';
 
-    interface ConfettiProps {
+    export interface ConfettiProps {
         width?: number;
         height?: number;
         numberOfPieces?: number;
@@ -16,6 +16,4 @@ declare module 'react-confetti' {
 
     const Confetti: ComponentType<ConfettiProps>;
     export default Confetti;
-}
-
-declare module 'react-use'
+}

package/src/react-use.d.ts

@@ -0,0 +1,4 @@
+declare module 'react-use' {
+    export function useWindowSize(): { width: number; height: number };
+    // Add other functions from react-use that you're using
+}

package/src/types.ts

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

package/tsconfig.json

@@ -105,5 +105,7 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
   },
-  "include": ["src"]
+  "include": [
+    "src",
+    "react-confetti.d.ts"]
 }

package/src/badges.ts

@@ -1,24 +0,0 @@
-interface BadgeConfig {
-    id: string;
-    icon: string;
-    title: string;
-    description: string;
-}
-
-const defaultBadges: BadgeConfig[] = [
-    {
-        id: 'beginner',
-        icon: '/path/to/beginner-icon.png',
-        title: 'Beginner',
-        description: 'Achieved beginner level',
-    },
-    {
-        id: 'intermediate',
-        icon: '/path/to/intermediate-icon.png',
-        title: 'Intermediate',
-        description: 'Achieved intermediate level',
-    },
-    // Add more badges as needed
-];
-
-export { defaultBadges, BadgeConfig };

package/src/components/Achievement.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { useAchievement } from '../context/AchievementContext';
-
-interface AchievementProps {
-    metric: number;
-    threshold: number;
-    onAchieve: () => void;
-    message: string;
-    children: React.ReactNode;
-}
-
-const Achievement: React.FC<AchievementProps> = ({ metric, threshold, onAchieve, message, children }) => {
-    const { setMetric, achievedLevels, levels, handleAchieve } = useAchievement();
-
-    React.useEffect(() => {
-        if (metric >= threshold && !achievedLevels.includes(threshold)) {
-            onAchieve();
-            const levelConfig = levels.find(level => level.threshold === threshold);
-            if (levelConfig) {
-                setMetric(metric);
-                handleAchieve(levelConfig.level, message);
-            }
-        }
-    }, [metric, threshold, onAchieve, setMetric, achievedLevels, levels, message, handleAchieve]);
-
-    return <div>{children}</div>;
-};
-
-export default Achievement;

package/src/components/Badge.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-interface BadgeProps {
-    icon: string;
-    title: string;
-    description: string;
-    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-}
-
-const Badge: React.FC<BadgeProps> = ({ icon, title, description, position = 'top-right' }) => {
-    const badgeStyle: React.CSSProperties = {
-        position: 'fixed',
-        [position.split('-')[0]]: '10px',
-        [position.split('-')[1]]: '10px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        backgroundColor: '#fff',
-        border: '1px solid #ccc',
-        borderRadius: '8px',
-        padding: '10px',
-        boxShadow: '0 0 10px rgba(0,0,0,0.1)',
-    };
-
-    return (
-        <div style={badgeStyle}>
-            <img src={icon} alt={title} style={{ width: '50px', height: '50px' }} />
-            <h4>{title}</h4>
-            <p>{description}</p>
-        </div>
-    );
-};
-
-export default Badge;

package/src/levels.ts

@@ -1,13 +0,0 @@
-interface LevelConfig {
-    level: number;
-    threshold: number;
-    badgeId: string;
-}
-
-const levels: LevelConfig[] = [
-    { level: 1, threshold: 10, badgeId: 'beginner' },
-    { level: 2, threshold: 50, badgeId: 'intermediate' },
-    // Add more levels as needed
-];
-
-export { levels, LevelConfig };