react-achievements 1.0.7 → 1.0.9

package/README.md

@@ -62,12 +62,12 @@ const achievementConfig = {
       }
     },
     {
-      check: (value) => value.length >= 10,
+      check: (value) => values.reduce((sum, val) => sum + (typeof val === 'number' ? val : 0), 0) >= 100,
       data: {
-        id: 'ten_transactions',
-        title: 'Ten Transactions',
-        description: 'Completed ten transactions',
-        icon: '/path/to/icon.png'
+          id: 'thousand_dollars',
+          title: 'Big Spender',
+          description: 'Spent a total of $1000', 
+          icon: '/path/to/icon.png'
       }
     },
   ],

package/dist/context/AchievementContext.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Metrics, AchievementConfig } from '../types';
+import { Metrics, AchievementConfig, MetricValue } from '../types';
 interface AchievementContextProps {
     metrics: Metrics;
     setMetrics: (metrics: Metrics | ((prevMetrics: Metrics) => Metrics)) => void;
@@ -10,7 +10,7 @@ interface AchievementContextProps {
 interface AchievementProviderProps {
     children: ReactNode;
     config: AchievementConfig;
-    initialState?: Record<string, any>;
+    initialState?: Record<string, MetricValue>;
     storageKey?: string;
     badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }

package/dist/index.cjs.js

@@ -68,8 +68,7 @@ const BadgesModal = ({ show, achievements, onClose }) => {
             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("h4", null, achievement.title))))),
             React.createElement("button", { onClick: onClose, style: { marginTop: '20px' } }, "Close"))));
 };
 var BadgesModal$1 = React.memo(BadgesModal);
@@ -191,9 +190,15 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
             if (key in state) {
                 acc[key] = state[key];
             }
+            else {
+                acc[key] = [];
+            }
             return acc;
         }, {});
     };
+    const getAchievements = () => {
+        return Object.values(config).flatMap(conditions => conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data));
+    };
     const [metrics, setMetrics] = React.useState(() => {
         const savedMetrics = localStorage.getItem(`${storageKey}-metrics`);
         if (savedMetrics) {
@@ -253,7 +258,7 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
                 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(BadgesModal$1, { show: showBadges, achievements: getAchievements(), onClose: () => setShowBadges(false) }),
         React.createElement(BadgesButton$1, { onClick: showBadgesModal, position: badgesButtonPosition }),
         React.createElement(ConfettiWrapper, { show: showConfetti })));
 };

package/dist/index.esm.js

@@ -66,8 +66,7 @@ const BadgesModal = ({ show, achievements, onClose }) => {
             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("h4", null, achievement.title))))),
             React.createElement("button", { onClick: onClose, style: { marginTop: '20px' } }, "Close"))));
 };
 var BadgesModal$1 = React.memo(BadgesModal);
@@ -189,9 +188,15 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
             if (key in state) {
                 acc[key] = state[key];
             }
+            else {
+                acc[key] = [];
+            }
             return acc;
         }, {});
     };
+    const getAchievements = () => {
+        return Object.values(config).flatMap(conditions => conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data));
+    };
     const [metrics, setMetrics] = useState(() => {
         const savedMetrics = localStorage.getItem(`${storageKey}-metrics`);
         if (savedMetrics) {
@@ -251,7 +256,7 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
                 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(BadgesModal$1, { show: showBadges, achievements: getAchievements(), onClose: () => setShowBadges(false) }),
         React.createElement(BadgesButton$1, { onClick: showBadgesModal, position: badgesButtonPosition }),
         React.createElement(ConfettiWrapper, { show: showConfetti })));
 };

package/dist/types.d.ts

@@ -1,4 +1,5 @@
-export type MetricValue = number | boolean | string | any;
+export type MetricValueItem = number | boolean | string | any;
+export type MetricValue = MetricValueItem[];
 export interface Metrics {
     [key: string]: MetricValue;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-achievements",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "This package allows users to transpose a React achievements engine over their React apps",
   "keywords": [
     "react",

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/BadgesModal.tsx

@@ -45,7 +45,6 @@ const BadgesModal: React.FC<BadgesModalProps> = ({ show, achievements, onClose }
                         <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>

package/src/context/AchievementContext.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
-import { Metrics, AchievementConfig, AchievementData } from '../types';
+import { Metrics, AchievementConfig, AchievementData, MetricValue } from '../types';
 import AchievementModal from '../components/AchievementModal';
 import BadgesModal from '../components/BadgesModal';
 import BadgesButton from '../components/BadgesButton';
@@ -16,7 +16,7 @@ interface AchievementContextProps {
 interface AchievementProviderProps {
     children: ReactNode;
     config: AchievementConfig;
-    initialState?: Record<string, any>;
+    initialState?: Record<string, MetricValue>;
     storageKey?: string;
     badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
@@ -30,15 +30,23 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
                                                                             storageKey = 'react-achievements',
                                                                             badgesButtonPosition = 'top-right'
                                                                         }) => {
-    const extractMetrics = (state: Record<string, any>): Metrics => {
+    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 getAchievements = () =>{
+        return Object.values(config).flatMap(conditions =>
+            conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data)
+        )
+    }
+
     const [metrics, setMetrics] = useState<Metrics>(() => {
         const savedMetrics = localStorage.getItem(`${storageKey}-metrics`);
         if (savedMetrics) {
@@ -115,9 +123,7 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
             />
             <BadgesModal
                 show={showBadges}
-                achievements={Object.values(config).flatMap(conditions =>
-                    conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data)
-                )}
+                achievements={getAchievements()}
                 onClose={() => setShowBadges(false)}
             />
             <BadgesButton onClick={showBadgesModal} position={badgesButtonPosition} />

package/src/types.ts

@@ -1,4 +1,6 @@
-export type MetricValue = number | boolean | string | any;
+export type MetricValueItem = number | boolean | string | any;
+
+export type MetricValue = MetricValueItem[];
 
 export interface Metrics {
     [key: string]: MetricValue;