react-achievements 1.3.7 → 2.0.3

package/src/providers/AchievementProvider.tsx

@@ -0,0 +1,185 @@
+import React, { useEffect, useCallback } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState, AppDispatch } from '../redux/store';
+import { initialize, setMetrics, unlockAchievement, resetAchievements } from '../redux/achievementSlice';
+import { addNotification, clearNotifications } from '../redux/notificationSlice';
+import {
+    AchievementDetails,
+    AchievementMetricValue,
+    AchievementUnlockCondition,
+    AchievementProviderProps,
+    AchievementMetrics as AchievementMetricsType,
+} from '../types';
+import { defaultStyles, Styles } from '../defaultStyles';
+import AchievementModal from '../components/AchievementModal';
+import BadgesModal from '../components/BadgesModal';
+import BadgesButton from '../components/BadgesButton';
+import ConfettiWrapper from '../components/ConfettiWrapper';
+import { defaultAchievementIcons } from '../assets/defaultIcons';
+
+export interface AchievementContextType {
+    updateMetrics: (newMetrics: AchievementMetricsType | ((prevMetrics: AchievementMetricsType) => AchievementMetricsType)) => void;
+    unlockedAchievements: string[];
+    resetStorage: () => void;
+}
+
+export const AchievementContext = React.createContext<AchievementContextType | undefined>(undefined);
+
+export const useAchievementContext = () => {
+    const context = React.useContext(AchievementContext);
+    if (!context) {
+        throw new Error('useAchievementContext must be used within an AchievementProvider');
+    }
+    return context;
+};
+
+export const AchievementProvider: React.FC<AchievementProviderProps> = ({
+                                                                            children,
+                                                                            config,
+                                                                            initialState = {},
+                                                                            storageKey = 'react-achievements',
+                                                                            badgesButtonPosition = 'top-right',
+                                                                            styles = {},
+                                                                            icons = {},
+                                                                        }: AchievementProviderProps) => {
+    const dispatch: AppDispatch = useDispatch();
+    const metrics = useSelector((state: RootState) => state.achievements.metrics);
+    const unlockedAchievementIds = useSelector((state: RootState) => state.achievements.unlockedAchievements);
+    const notifications = useSelector((state: RootState) => state.notifications.notifications);
+    const mergedStyles = React.useMemo(() => mergeDeep(defaultStyles, styles), [styles]);
+
+    const [currentAchievement, setCurrentAchievement] = React.useState<AchievementDetails | null>(null);
+    const [showBadges, setShowBadges] = React.useState(false);
+    const [showConfetti, setShowConfetti] = React.useState(false);
+
+    const mergedIcons = React.useMemo(() => ({ ...defaultAchievementIcons, ...icons }), [icons]);
+
+    const updateMetrics = useCallback(
+        (newMetrics: AchievementMetricsType | ((prevMetrics: AchievementMetricsType) => AchievementMetricsType)) => {
+            dispatch(setMetrics(typeof newMetrics === 'function' ? newMetrics(metrics) : newMetrics));
+        },
+        [dispatch, metrics]
+    );
+
+    const resetStorage = useCallback(() => {
+        localStorage.removeItem(storageKey);
+        dispatch(resetAchievements());
+    }, [dispatch, storageKey]);
+
+    useEffect(() => {
+        dispatch(initialize({ config, initialState, storageKey }));
+    }, [dispatch, config, initialState, storageKey]);
+
+    const checkAchievements = useCallback(() => {
+        const newAchievements: AchievementDetails[] = [];
+
+        if (!unlockedAchievementIds) {
+            console.error('unlockedAchievements is undefined!');
+            return;
+        }
+
+        Object.entries(config).forEach(([metricName, conditions]) => {
+            const metricValues = metrics[metricName];
+
+            if (!metricValues) {
+                return;
+            }
+
+            conditions.forEach((condition) => {
+                if (
+                    metricValues.some((value: AchievementMetricValue) => condition.isConditionMet(value)) &&
+                    !unlockedAchievementIds.includes(condition.achievementDetails.achievementId)
+                ) {
+                    newAchievements.push(condition.achievementDetails);
+                }
+            });
+        });
+
+        if (newAchievements.length > 0) {
+            newAchievements.forEach((achievement) => {
+                dispatch(unlockAchievement(achievement.achievementId));
+                dispatch(addNotification(achievement));
+            });
+            setShowConfetti(true);
+        }
+    }, [config, metrics, unlockedAchievementIds, dispatch]);
+
+    useEffect(() => {
+        checkAchievements();
+    }, [metrics, checkAchievements]);
+
+    useEffect(() => {
+        if (notifications.length > 0 && !currentAchievement) {
+            setCurrentAchievement(notifications[0]);
+        }
+    }, [notifications, currentAchievement]);
+
+    const showBadgesModal = () => setShowBadges(true);
+
+    const getAchievements = useCallback(
+        (achievedIds: string[]) => {
+            return Object.values(config).flatMap((conditions) =>
+                conditions
+                    .filter((c) => achievedIds.includes(c.achievementDetails.achievementId))
+                    .map((c) => c.achievementDetails)
+            );
+        },
+        [config]
+    );
+
+    const unlockedAchievementsDetails = getAchievements(unlockedAchievementIds);
+
+    return (
+        <AchievementContext.Provider value={{ updateMetrics, unlockedAchievements: unlockedAchievementIds, resetStorage }}>
+            {children}
+            <AchievementModal
+                isOpen={!!currentAchievement}
+                achievement={currentAchievement}
+                onClose={() => {
+                    setCurrentAchievement(null);
+                    if (currentAchievement) {
+                        dispatch(clearNotifications());
+                    }
+                }}
+                styles={mergedStyles.achievementModal}
+                icons={mergedIcons}
+            />
+            <BadgesModal
+                isOpen={showBadges}
+                achievements={unlockedAchievementsDetails}
+                onClose={() => setShowBadges(false)}
+                styles={mergedStyles.badgesModal}
+                icons={mergedIcons}
+            />
+            <BadgesButton
+                onClick={showBadgesModal}
+                position={badgesButtonPosition}
+                styles={mergedStyles.badgesButton}
+                unlockedAchievements={unlockedAchievementsDetails}
+            />
+            <ConfettiWrapper show={showConfetti || notifications.length > 0} />
+        </AchievementContext.Provider>
+    );
+};
+
+function isObject(item: any) {
+    return item && typeof item === 'object' && !Array.isArray(item);
+}
+
+export function mergeDeep(target: any, source: any) {
+    const output = { ...target };
+    if (isObject(target) && isObject(source)) {
+        Object.keys(source).forEach((key) => {
+            if (isObject(source[key])) {
+                if (!(key in target)) {
+                    output[key] = source[key];
+                } else {
+                    output[key] = mergeDeep(target[key], source[key]);
+                }
+            } else {
+                output[key] = source[key];
+            }
+        });
+    }
+    return output;
+}

package/src/redux/achievementSlice.ts

@@ -0,0 +1,71 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import {
+    AchievementConfiguration,
+    InitialAchievementMetrics,
+    AchievementMetrics,
+} from '../types';
+
+export interface AchievementState {
+    config: AchievementConfiguration;
+    metrics: AchievementMetrics;
+    unlockedAchievements: string[];
+    storageKey: string | null;
+}
+
+const initialState: AchievementState = {
+    config: {},
+    metrics: {},
+    unlockedAchievements: [],
+    storageKey: null,
+};
+
+export const achievementSlice = createSlice({
+    name: 'achievements',
+    initialState,
+    reducers: {
+        initialize: (state, action: PayloadAction<{ config: AchievementConfiguration; initialState?: InitialAchievementMetrics; storageKey: string }>) => {
+            state.config = action.payload.config;
+            state.storageKey = action.payload.storageKey;
+            const storedState = action.payload.storageKey ? localStorage.getItem(action.payload.storageKey) : null;
+            if (storedState) {
+                try {
+                    const parsedState = JSON.parse(storedState);
+                    state.metrics = parsedState.achievements?.metrics || {};
+                    state.unlockedAchievements = parsedState.achievements?.unlockedAchievements || [];
+                } catch (error) {
+                    console.error('Error parsing stored achievement state:', error);
+                    state.metrics = action.payload.initialState ? Object.keys(action.payload.initialState).reduce((acc, key) => ({ ...acc, [key]: Array.isArray(action.payload.initialState![key]) ? action.payload.initialState![key] : [action.payload.initialState![key]] }), {}) : {};
+                    state.unlockedAchievements = [];
+                }
+            } else {
+                state.metrics = action.payload.initialState ? Object.keys(action.payload.initialState).reduce((acc, key) => ({ ...acc, [key]: Array.isArray(action.payload.initialState![key]) ? action.payload.initialState![key] : [action.payload.initialState![key]] }), {}) : {};
+                state.unlockedAchievements = [];
+            }
+        },
+        setMetrics: (state, action: PayloadAction<AchievementMetrics>) => {
+            state.metrics = action.payload;
+            if (state.storageKey) {
+                localStorage.setItem(state.storageKey, JSON.stringify({ achievements: { metrics: state.metrics, unlockedAchievements: state.unlockedAchievements } }));
+            }
+        },
+        unlockAchievement: (state, action: PayloadAction<string>) => {
+            if (!state.unlockedAchievements.includes(action.payload)) {
+                state.unlockedAchievements.push(action.payload);
+                if (state.storageKey) {
+                    localStorage.setItem(state.storageKey, JSON.stringify({ achievements: { metrics: state.metrics, unlockedAchievements: state.unlockedAchievements } }));
+                }
+            }
+        },
+        resetAchievements: (state) => {
+            state.metrics = {};
+            state.unlockedAchievements = [];
+            if (state.storageKey) {
+                localStorage.removeItem(state.storageKey);
+            }
+        },
+    },
+});
+
+export const { initialize, setMetrics, unlockAchievement, resetAchievements } = achievementSlice.actions;
+
+export default achievementSlice.reducer;

package/src/redux/notificationSlice.ts

@@ -0,0 +1,26 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { AchievementDetails } from '../types';
+
+export interface NotificationState {
+    notifications: AchievementDetails[];
+}
+
+const initialState: NotificationState = {
+    notifications: [],
+};
+
+const notificationSlice = createSlice({
+    name: 'notifications',
+    initialState,
+    reducers: {
+        addNotification: (state, action: PayloadAction<AchievementDetails>) => {
+            state.notifications.push(action.payload);
+        },
+        clearNotifications: (state) => {
+            state.notifications = [];
+        },
+    },
+});
+
+export const { addNotification, clearNotifications } = notificationSlice.actions;
+export default notificationSlice.reducer;

package/src/redux/store.ts

@@ -0,0 +1,20 @@
+import { configureStore } from '@reduxjs/toolkit';
+import achievementReducer from '../redux/achievementSlice';
+import notificationReducer from '../redux/notificationSlice';
+import { AchievementState } from './achievementSlice';
+import { NotificationState } from './notificationSlice';
+
+export interface RootState {
+    achievements: AchievementState;
+    notifications: NotificationState;
+}
+
+const store = configureStore({
+    reducer: {
+        achievements: achievementReducer,
+        notifications: notificationReducer,
+    },
+});
+
+export type AppDispatch = typeof store.dispatch;
+export default store;

package/src/types.ts

@@ -1,21 +1,32 @@
-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 type AchievementIconRecord = Record<string, string>;
 
-export interface Metrics {
-    [key: string]: MetricValue[];
+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/demo/src/stories/Button.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './button.css';
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={backgroundColor && { backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};
-
-Button.propTypes = {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary: PropTypes.bool,
-  /**
-   * What background color to use
-   */
-  backgroundColor: PropTypes.string,
-  /**
-   * How large should the button be?
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Button contents
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Optional click handler
-   */
-  onClick: PropTypes.func,
-};
-
-Button.defaultProps = {
-  backgroundColor: null,
-  primary: false,
-  size: 'medium',
-  onClick: undefined,
-};

package/demo/src/stories/Button.stories.js

@@ -1,48 +0,0 @@
-import { fn } from '@storybook/test';
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-export default {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};