react-achievements 1.3.7 → 2.0.5

package/dist/providers/AchievementProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AchievementProviderProps, AchievementMetrics as AchievementMetricsType } from '../types';
+export interface AchievementContextType {
+    updateMetrics: (newMetrics: AchievementMetricsType | ((prevMetrics: AchievementMetricsType) => AchievementMetricsType)) => void;
+    unlockedAchievements: string[];
+    resetStorage: () => void;
+}
+export declare const AchievementContext: React.Context<AchievementContextType | undefined>;
+export declare const useAchievementContext: () => AchievementContextType;
+export declare const AchievementProvider: React.FC<AchievementProviderProps>;
+export declare function mergeDeep(target: any, source: any): any;

package/dist/redux/achievementSlice.d.ts

@@ -0,0 +1,25 @@
+import { PayloadAction } from '@reduxjs/toolkit';
+import { AchievementConfiguration, InitialAchievementMetrics, AchievementMetrics } from '../types';
+export interface AchievementState {
+    config: AchievementConfiguration;
+    metrics: AchievementMetrics;
+    unlockedAchievements: string[];
+    storageKey: string | null;
+}
+export declare const achievementSlice: import("@reduxjs/toolkit").Slice<AchievementState, {
+    initialize: (state: import("immer/dist/internal").WritableDraft<AchievementState>, action: PayloadAction<{
+        config: AchievementConfiguration;
+        initialState?: InitialAchievementMetrics;
+        storageKey: string;
+    }>) => void;
+    setMetrics: (state: import("immer/dist/internal").WritableDraft<AchievementState>, action: PayloadAction<AchievementMetrics>) => void;
+    unlockAchievement: (state: import("immer/dist/internal").WritableDraft<AchievementState>, action: PayloadAction<string>) => void;
+    resetAchievements: (state: import("immer/dist/internal").WritableDraft<AchievementState>) => void;
+}, "achievements">;
+export declare const initialize: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    config: AchievementConfiguration;
+    initialState?: InitialAchievementMetrics;
+    storageKey: string;
+}, "achievements/initialize">, setMetrics: import("@reduxjs/toolkit").ActionCreatorWithPayload<AchievementMetrics, "achievements/setMetrics">, unlockAchievement: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "achievements/unlockAchievement">, resetAchievements: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"achievements/resetAchievements">;
+declare const _default: import("@reduxjs/toolkit").Reducer<AchievementState>;
+export default _default;

package/dist/redux/notificationSlice.d.ts

@@ -0,0 +1,7 @@
+import { AchievementDetails } from '../types';
+export interface NotificationState {
+    notifications: AchievementDetails[];
+}
+export declare const addNotification: import("@reduxjs/toolkit").ActionCreatorWithPayload<AchievementDetails, "notifications/addNotification">, clearNotifications: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"notifications/clearNotifications">;
+declare const _default: import("@reduxjs/toolkit").Reducer<NotificationState>;
+export default _default;

package/dist/redux/store.d.ts

@@ -0,0 +1,15 @@
+import { AchievementState } from './achievementSlice';
+import { NotificationState } from './notificationSlice';
+export interface RootState {
+    achievements: AchievementState;
+    notifications: NotificationState;
+}
+declare const store: import("@reduxjs/toolkit/dist/configureStore").ToolkitStore<{
+    achievements: AchievementState;
+    notifications: NotificationState;
+}, import("@reduxjs/toolkit").AnyAction, [import("@reduxjs/toolkit").ThunkMiddleware<{
+    achievements: AchievementState;
+    notifications: NotificationState;
+}, import("@reduxjs/toolkit").AnyAction>]>;
+export type AppDispatch = typeof store.dispatch;
+export default store;

package/dist/types.d.ts

@@ -1,17 +1,26 @@
-export interface AchievementData {
-    id: string;
-    title: string;
-    description: string;
-    icon: string;
+export type AchievementMetricValue = number | string | boolean | Date;
+export interface AchievementDetails {
+    achievementId: string;
+    achievementTitle: string;
+    achievementDescription: string;
+    achievementIconKey?: string;
 }
-export type MetricValue = number | string | boolean | Date;
-export interface Metrics {
-    [key: string]: MetricValue[];
+export type AchievementIconRecord = Record<string, string>;
+export interface AchievementConfiguration {
+    [metricName: string]: Array<AchievementUnlockCondition<AchievementMetricValue>>;
 }
-export interface AchievementCondition {
-    check: (value: MetricValue[]) => boolean;
-    data: AchievementData;
+export type InitialAchievementMetrics = Record<string, AchievementMetricValue | AchievementMetricValue[] | undefined>;
+export type AchievementMetrics = Record<string, AchievementMetricValue[]>;
+export interface AchievementProviderProps {
+    children: React.ReactNode;
+    config: AchievementConfiguration;
+    initialState?: InitialAchievementMetrics;
+    storageKey?: string;
+    badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    styles?: Partial<import('./defaultStyles').Styles>;
+    icons?: Record<string, string>;
 }
-export interface AchievementConfig {
-    [key: string]: AchievementCondition[];
+export interface AchievementUnlockCondition<T extends AchievementMetricValue> {
+    isConditionMet: (value: T) => boolean;
+    achievementDetails: AchievementDetails;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-achievements",
-  "version": "1.3.7",
+  "version": "2.0.5",
   "description": "This package allows users to transpose a React achievements engine over their React apps",
   "keywords": [
     "react",
@@ -21,29 +21,37 @@
   "license": "ISC",
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.4.8",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@storybook/addon-essentials": "^8.2.8",
-    "@storybook/addon-interactions": "^8.2.8",
-    "@storybook/addon-links": "^8.2.8",
-    "@storybook/addon-onboarding": "^8.2.8",
+    "@storybook/addon-essentials": "^8.6.8",
+    "@storybook/addon-interactions": "^8.6.8",
+    "@storybook/addon-links": "^8.6.8",
+    "@storybook/addon-onboarding": "^8.6.8",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/blocks": "^8.2.8",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-webpack5": "^8.2.8",
-    "@storybook/test": "^8.2.9",
+    "@storybook/blocks": "^8.6.8",
+    "@storybook/react": "^8.6.8",
+    "@storybook/react-webpack5": "^8.6.8",
+    "@storybook/test": "^8.6.8",
     "rollup": "^4.19.0",
     "rollup-plugin-typescript2": "^0.36.0",
-    "storybook": "^8.2.8",
-    "typescript": "^5.5.4"
-  },
-  "dependencies": {
+    "storybook": "^8.6.8",
+    "typescript": "^5.5.4",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.12",
     "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "react": "^18.3.1",
-    "react-confetti": "^6.1.0",
-    "react-use": "^17.5.1"
+    "@types/react-dom": "^18.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-redux": "^8.0.0 || ^9.0.0",
+    "@reduxjs/toolkit": "^1.0.0",
+    "react-confetti": "^6.0.0",
+    "react-use": "^17.0.0"
+  },
+  "dependencies": {
   }
-}
+}

package/src/assets/defaultIcons.ts

@@ -0,0 +1,100 @@
+// src/defaultIcons.ts
+
+export const defaultAchievementIcons = {
+    // General Progress & Milestones
+    levelUp: '🏆',
+    questComplete: '📜',
+    monsterDefeated: '⚔️',
+    itemCollected: '📦',
+    challengeCompleted: '🏁',
+    milestoneReached: '🏅',
+    firstStep: '👣',
+    newBeginnings: '🌱',
+    breakthrough: '💡',
+    growth: '📈',
+
+    // Social & Engagement
+    shared: '🔗',
+    liked: '❤️',
+    commented: '💬',
+    followed: '👥',
+    invited: '🤝',
+    communityMember: '🏘️',
+    supporter: '🌟',
+    connected: '🌐',
+    participant: '🙋',
+    influencer: '📣',
+
+    // Time & Activity
+    activeDay: '☀️',
+    activeWeek: '📅',
+    activeMonth: '🗓️',
+    earlyBird: '⏰',
+    nightOwl: '🌙',
+    streak: '🔥',
+    dedicated: '⏳',
+    punctual: '⏱️',
+    consistent: '🔄',
+    marathon: '🏃',
+
+    // Creativity & Skill
+    artist: '🎨',
+    writer: '✍️',
+    innovator: '🔬',
+    creator: '🛠️',
+    expert: '🎓',
+    master: '👑',
+    pioneer: '🚀',
+    performer: '🎭',
+    thinker: '🧠',
+    explorer: '🗺️',
+
+    // Achievement Types
+    bronze: '🥉',
+    silver: '🥈',
+    gold: '🥇',
+    diamond: '💎',
+    legendary: '✨',
+    epic: '💥',
+    rare: '🔮',
+    common: '🔘',
+    special: '🎁',
+    hidden: '❓',
+
+    // Numbers & Counters
+    one: '1️⃣',
+    ten: '🔟',
+    hundred: '💯',
+    thousand: '🔢',
+
+    // Actions & Interactions
+    clicked: '🖱️',
+    used: '🔑',
+    found: '🔍',
+    built: '🧱',
+    solved: '🧩',
+    discovered: '🔭',
+    unlocked: '🔓',
+    upgraded: '⬆️',
+    repaired: '🔧',
+    defended: '🛡️',
+
+    // Placeholders
+    default: '⭐', // A fallback icon
+    loading: '⏳',
+    error: '⚠️',
+    success: '✅',
+    failure: '❌',
+
+    // Miscellaneous
+    trophy: '🏆',
+    star: '⭐',
+    flag: '🚩',
+    puzzle: '🧩',
+    gem: '💎',
+    crown: '👑',
+    medal: '🏅',
+    ribbon: '🎗️',
+    badge: '🎖️',
+    shield: '🛡️',
+};

package/src/components/AchievementModal.tsx

@@ -1,24 +1,53 @@
 import React from 'react';
-import { AchievementData } from '../types';
+import { AchievementDetails, AchievementIconRecord } from '../types';
 import { Styles } from '../defaultStyles';
+import { defaultAchievementIcons } from '../assets/defaultIcons';
 
 interface AchievementModalProps {
     isOpen: boolean;
-    achievement: AchievementData | null;
+    achievement: AchievementDetails | null;
     onClose: () => void;
     styles: Styles['achievementModal'];
+    icons?: Record<string, string>;
 }
 
-const AchievementModal: React.FC<AchievementModalProps> = ({ isOpen, achievement, onClose, styles }) => {
+const AchievementModal: React.FC<AchievementModalProps> = ({ isOpen, achievement, onClose, styles, icons = {} }) => {
     if (!isOpen || !achievement) return null;
 
+    const mergedIcons: AchievementIconRecord = { ...defaultAchievementIcons, ...icons };
+    const iconToDisplay = achievement?.achievementIconKey ? (mergedIcons[achievement.achievementIconKey] || mergedIcons.default) : mergedIcons.default;
+
     return (
-        <div style={styles.overlay as React.CSSProperties}>
-            <div style={styles.content}>
+        <div style={{
+            ...styles.overlay,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'fixed', // Ensure it covers the screen
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)', // Optional semi-transparent background
+        }}>
+            <div style={{
+                ...styles.content,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center', // Center content horizontally
+                justifyContent: 'center', // Center content vertically
+                padding: '20px',
+                borderRadius: '8px',
+                backgroundColor: 'white', // Or your modal background color
+            }}>
                 <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>
+                {iconToDisplay.startsWith('http') || iconToDisplay.startsWith('data:image') ? (
+                    <img src={iconToDisplay} alt={achievement.achievementTitle} style={styles.icon} />
+                ) : (
+                    <p style={{ fontSize: '3em' }}>{iconToDisplay}</p>
+                )}
+                <h3 style={styles.title}>{achievement.achievementTitle}</h3>
+                <p style={styles.description}>{achievement.achievementDescription}</p>
                 <button onClick={onClose} style={styles.button}>Okay</button>
             </div>
         </div>

package/src/components/BadgesButton.tsx

@@ -1,21 +1,47 @@
 import React from 'react';
 import { Styles } from '../defaultStyles';
+import { AchievementDetails } from '../types';
 
 interface BadgesButtonProps {
     onClick: () => void;
-    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     styles: Styles['badgesButton'];
+    unlockedAchievements: AchievementDetails[];
+    icon?: React.ReactNode; // Allow custom icons
+    drawer?: boolean; // Indicate if it triggers a drawer
+    customStyles?: React.CSSProperties; // Allow custom styles
 }
 
-const BadgesButton: React.FC<BadgesButtonProps> = ({ onClick, position, styles }) => {
-    const positionStyle = {
-        [position.split('-')[0]]: '20px',
-        [position.split('-')[1]]: '20px',
+const BadgesButton: React.FC<BadgesButtonProps> = ({
+                                                       onClick,
+                                                       position,
+                                                       styles,
+                                                       unlockedAchievements,
+                                                       icon,
+                                                       drawer = false,
+                                                       customStyles,
+                                                   }) => {
+    const positionStyle = position
+        ? {
+            [position.split('-')[0]]: '20px',
+            [position.split('-')[1]]: '20px',
+        }
+        : {};
+
+    const handleButtonClick = () => {
+        onClick();
     };
 
+    const achievementsText = 'View Achievements';
+
+    const buttonContent = icon ? icon : achievementsText;
+
     return (
-        <button onClick={onClick} style={{ ...styles, ...positionStyle }}>
-            View Achievements
+        <button
+            onClick={handleButtonClick}
+            style={{ ...styles, ...positionStyle, ...customStyles }}
+        >
+            {buttonContent}
         </button>
     );
 };

package/src/components/BadgesModal.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
-import { AchievementData } from '../types';
+import {AchievementDetails, AchievementIconRecord} from '../types';
 import { Styles } from '../defaultStyles';
+import { defaultAchievementIcons } from '../assets/defaultIcons'; // Import default icons
 
 interface BadgesModalProps {
     isOpen: boolean;
-    achievements: AchievementData[];
+    achievements: AchievementDetails[];
     onClose: () => void;
     styles: Styles['badgesModal'];
+    icons?: Record<string, string>; // Optional user-specified icons
 }
 
-const BadgesModal: React.FC<BadgesModalProps> = ({ isOpen, achievements, onClose, styles }) => {
+const BadgesModal: React.FC<BadgesModalProps> = ({ isOpen, achievements, onClose, styles, icons = {} }) => {
     if (!isOpen) return null;
 
     return (
@@ -17,12 +19,24 @@ const BadgesModal: React.FC<BadgesModalProps> = ({ isOpen, achievements, onClose
             <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>
-                    ))}
+                    {achievements.map((achievement) => {
+                        const mergedIcons: AchievementIconRecord = { ...defaultAchievementIcons, ...icons };
+                        let iconToDisplay: string | undefined = mergedIcons.default;
+                        if (achievement.achievementIconKey && mergedIcons[achievement.achievementIconKey]) {
+                            iconToDisplay = mergedIcons[achievement.achievementIconKey];
+                        }
+                        return (
+                            <div key={achievement.achievementId} style={styles.badge}>
+                                {/* Render icon based on type (Unicode or image path) */}
+                                {iconToDisplay.startsWith('http') || iconToDisplay.startsWith('data:image') ? (
+                                    <img src={iconToDisplay} alt={achievement.achievementTitle} style={styles.badgeIcon} />
+                                ) : (
+                                    <p style={{ fontSize: '2em' }}>{iconToDisplay}</p> // Render Unicode as large text
+                                )}
+                                <span style={styles.badgeTitle}>{achievement.achievementTitle}</span>
+                            </div>
+                        );
+                    })}
                 </div>
                 <button onClick={onClose} style={styles.button}>Close</button>
             </div>

package/src/hooks/useAchievement.ts

@@ -0,0 +1,20 @@
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState, AppDispatch } from '../redux/store';
+import { useAchievementContext } from '../providers/AchievementProvider';
+
+export const useAchievement = () => {
+    const dispatch: AppDispatch = useDispatch();
+    const { updateMetrics, unlockedAchievements, resetStorage } = useAchievementContext() || {};
+    const metrics = useSelector((state: RootState) => state.achievements.metrics);
+    const notifications = useSelector((state: RootState) => state.notifications.notifications);
+    const config = useSelector((state: RootState) => state.achievements.config);
+
+    return {
+        metrics: metrics,
+        unlockedAchievements: unlockedAchievements || [],
+        notifications: notifications,
+        config: config,
+        updateMetrics: updateMetrics || (() => {}),
+        resetStorage: resetStorage || (() => {}),
+    };
+};

package/src/index.ts

@@ -1,13 +1,17 @@
-import { AchievementProvider, useAchievement } from './context/AchievementContext';
-import { Metrics, AchievementConfig, AchievementData, AchievementCondition } from './types';
+import { AchievementProvider, useAchievementContext as useAchievement } from './providers/AchievementProvider';
+import { AchievementMetrics, AchievementConfiguration, AchievementDetails, AchievementUnlockCondition } from './types';
 import ConfettiWrapper from './components/ConfettiWrapper';
+import achievementReducer from './redux/achievementSlice';
+import notificationReducer from './redux/notificationSlice'
 
 export {
     AchievementProvider,
     useAchievement,
-    Metrics,
-    AchievementConfig,
-    AchievementData,
-    AchievementCondition,
-    ConfettiWrapper
+    AchievementMetrics,
+    AchievementConfiguration,
+    AchievementDetails,
+    AchievementUnlockCondition,
+    ConfettiWrapper,
+    achievementReducer,
+    notificationReducer,
 };