react-achievements 2.2.2 → 3.0.1

package/src/providers/AchievementProvider.tsx

@@ -1,202 +0,0 @@
-import React, { useEffect, useCallback, useState, useMemo, useRef } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { RootState, AppDispatch } from '../redux/store';
-import { initialize, setMetrics, resetAchievements, unlockAchievement, clearNotifications } from '../redux/achievementSlice';
-import { toast, ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import {
-    AchievementDetails,
-    AchievementMetricValue,
-    AchievementConfiguration,
-    AchievementProviderProps,
-    AchievementMetrics,
-    AchievementState
-} from '../types';
-import BadgesButton from '../components/BadgesButton';
-import BadgesModal from '../components/BadgesModal';
-import ConfettiWrapper from '../components/ConfettiWrapper';
-import { defaultStyles } from '../defaultStyles';
-
-export interface AchievementContextType {
-    updateMetrics: (newMetrics: AchievementMetrics | ((prevMetrics: AchievementMetrics) => AchievementMetrics)) => 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;
-};
-
-// Helper function to serialize dates for Redux actions
-const serializeMetrics = (metrics: AchievementMetrics): AchievementMetrics => {
-    return Object.entries(metrics).reduce((acc, [key, values]) => ({
-        ...acc,
-        [key]: values.map(value => value instanceof Date ? value.toISOString() : value)
-    }), {} as AchievementMetrics);
-};
-
-// Helper function to parse potential date strings
-const deserializeValue = (value: string | number | boolean): AchievementMetricValue => {
-    if (typeof value === 'string') {
-        // Try to parse ISO date string
-        const date = new Date(value);
-        if (!isNaN(date.getTime()) && value === date.toISOString()) {
-            return date;
-        }
-    }
-    return value;
-};
-
-const AchievementProvider: React.FC<AchievementProviderProps> = ({
-    children,
-    config,
-    initialState = {},
-    storageKey = 'react-achievements',
-    badgesButtonPosition = 'top-right',
-    styles = {},
-    icons = {},
-}) => {
-    const dispatch: AppDispatch = useDispatch();
-    const configRef = useRef(config);
-    const metrics = useSelector((state: RootState) => state.achievements.metrics);
-    const unlockedAchievementIds = useSelector((state: RootState) => state.achievements.unlockedAchievements);
-    const pendingNotifications = useSelector((state: RootState) => state.achievements.pendingNotifications);
-    const [showBadges, setShowBadges] = useState(false);
-    const [showConfetti, setShowConfetti] = useState(false);
-
-    // Update config ref when it changes
-    useEffect(() => {
-        configRef.current = config;
-    }, [config]);
-
-    const checkAchievements = useCallback(() => {
-        Object.entries(configRef.current).forEach(([metricName, conditions]) => {
-            const metricValues = metrics[metricName];
-            if (!metricValues) return;
-
-            const latestValue = deserializeValue(metricValues[metricValues.length - 1]);
-            const state: AchievementState = {
-                metrics: Object.entries(metrics).reduce((acc, [key, values]) => ({
-                    ...acc,
-                    [key]: values.map(deserializeValue)
-                }), {}),
-                unlockedAchievements: unlockedAchievementIds
-            };
-
-            conditions.forEach((condition) => {
-                if (
-                    condition.isConditionMet(latestValue, state) &&
-                    !unlockedAchievementIds.includes(condition.achievementDetails.achievementId)
-                ) {
-                    dispatch(unlockAchievement(condition.achievementDetails));
-                    setShowConfetti(true);
-                }
-            });
-        });
-    }, [metrics, unlockedAchievementIds, dispatch]);
-
-    // Handle notifications
-    useEffect(() => {
-        if (pendingNotifications.length > 0) {
-            pendingNotifications.forEach((notification) => {
-                toast.success(
-                    <div>
-                        <h4 style={{ margin: '0 0 8px 0' }}>Achievement Unlocked! 🎉</h4>
-                        <strong>{notification.achievementTitle}</strong>
-                        <p style={{ margin: '4px 0 0 0' }}>{notification.achievementDescription}</p>
-                        {notification.achievementIconKey && icons[notification.achievementIconKey] && (
-                            <div style={{ fontSize: '24px', marginTop: '8px' }}>
-                                {icons[notification.achievementIconKey]}
-                            </div>
-                        )}
-                    </div>,
-                    {
-                        position: "top-right",
-                        autoClose: 5000,
-                        hideProgressBar: false,
-                        closeOnClick: true,
-                        pauseOnHover: true,
-                        draggable: true,
-                    }
-                );
-            });
-            dispatch(clearNotifications());
-        }
-    }, [pendingNotifications, dispatch, icons]);
-
-    // Reset confetti after delay
-    useEffect(() => {
-        if (showConfetti) {
-            const timer = setTimeout(() => setShowConfetti(false), 5000);
-            return () => clearTimeout(timer);
-        }
-    }, [showConfetti]);
-
-    // Check for achievements when metrics change
-    useEffect(() => {
-        checkAchievements();
-    }, [metrics, checkAchievements]);
-
-    // Initialize on mount, but don't store config in Redux
-    useEffect(() => {
-        dispatch(initialize({
-            initialState,
-            storageKey,
-        }));
-    }, [dispatch, initialState, storageKey]);
-
-    // Convert achievement IDs to details using config from ref
-    const achievementDetails = useMemo(() => {
-        return unlockedAchievementIds
-            .map(id => {
-                const achievement = Object.values(configRef.current)
-                    .flat()
-                    .find(condition => condition.achievementDetails.achievementId === id);
-                return achievement?.achievementDetails;
-            })
-            .filter((a): a is AchievementDetails => !!a);
-    }, [unlockedAchievementIds]);
-
-    return (
-        <AchievementContext.Provider value={{
-            updateMetrics: (newMetrics) => {
-                if (typeof newMetrics === 'function') {
-                    const updatedMetrics = newMetrics(metrics);
-                    dispatch(setMetrics(serializeMetrics(updatedMetrics)));
-                } else {
-                    dispatch(setMetrics(serializeMetrics(newMetrics)));
-                }
-            },
-            unlockedAchievements: unlockedAchievementIds,
-            resetStorage: () => {
-                localStorage.removeItem(storageKey);
-                dispatch(resetAchievements());
-            },
-        }}>
-            {children}
-            <ToastContainer />
-            <ConfettiWrapper show={showConfetti} />
-            <BadgesButton
-                onClick={() => setShowBadges(true)}
-                position={badgesButtonPosition}
-                styles={styles.badgesButton || defaultStyles.badgesButton}
-                unlockedAchievements={achievementDetails}
-            />
-            <BadgesModal
-                isOpen={showBadges}
-                achievements={achievementDetails}
-                onClose={() => setShowBadges(false)}
-                styles={styles.badgesModal || defaultStyles.badgesModal}
-                icons={icons}
-            />
-        </AchievementContext.Provider>
-    );
-};
-
-export { AchievementProvider };

package/src/react-confetti.d.ts

@@ -1,19 +0,0 @@
-declare module 'react-confetti' {
-    import { ComponentType } from 'react';
-
-    export interface ConfettiProps {
-        width?: number;
-        height?: number;
-        numberOfPieces?: number;
-        recycle?: boolean;
-        run?: boolean;
-        colors?: string[];
-        gravity?: number;
-        wind?: number;
-        tweenDuration?: number;
-        drawShape?: (ctx: CanvasRenderingContext2D) => void;
-    }
-
-    const Confetti: ComponentType<ConfettiProps>;
-    export default Confetti;
-}

package/src/react-use.d.ts

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

package/src/redux/achievementSlice.ts

@@ -1,116 +0,0 @@
-// src/redux/achievementSlice.ts
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import {
-    InitialAchievementMetrics,
-    AchievementMetrics,
-    AchievementDetails,
-    AchievementMetricValue,
-} from '../types';
-
-// Helper function to serialize dates
-const serializeValue = (value: AchievementMetricValue): string | number | boolean => {
-    if (value instanceof Date) {
-        return value.toISOString();
-    }
-    return value;
-};
-
-// Helper function to process metrics for storage
-const processMetrics = (metrics: AchievementMetrics): Record<string, (string | number | boolean)[]> => {
-    return Object.entries(metrics).reduce((acc, [key, values]) => ({
-        ...acc,
-        [key]: values.map(serializeValue)
-    }), {});
-};
-
-export interface AchievementState {
-    metrics: Record<string, (string | number | boolean)[]>;
-    unlockedAchievements: string[];
-    storageKey: string | null;
-    pendingNotifications: AchievementDetails[];
-}
-
-const initialState: AchievementState = {
-    metrics: {},
-    unlockedAchievements: [],
-    storageKey: null,
-    pendingNotifications: [],
-};
-
-export const achievementSlice = createSlice({
-    name: 'achievements',
-    initialState,
-    reducers: {
-        initialize: (state, action: PayloadAction<{ 
-            initialState?: InitialAchievementMetrics & { unlockedAchievements?: string[] }; 
-            storageKey: string 
-        }>) => {
-            state.storageKey = action.payload.storageKey;
-
-            // Load from storage first
-            if (action.payload.storageKey) {
-                const stored = localStorage.getItem(action.payload.storageKey);
-                if (stored) {
-                    try {
-                        const parsed = JSON.parse(stored);
-                        state.metrics = parsed.metrics || {};
-                        state.unlockedAchievements = parsed.unlockedAchievements || [];
-                        return;
-                    } catch (error) {
-                        console.error('Error parsing stored achievements:', error);
-                    }
-                }
-            }
-
-            // If no storage or parse error, use initial state
-            if (action.payload.initialState) {
-                const { unlockedAchievements, ...metrics } = action.payload.initialState;
-                state.metrics = Object.entries(metrics).reduce((acc, [key, value]) => ({
-                    ...acc,
-                    [key]: Array.isArray(value) ? value.map(serializeValue) : [serializeValue(value as AchievementMetricValue)]
-                }), {});
-                state.unlockedAchievements = unlockedAchievements || [];
-            }
-        },
-
-        setMetrics: (state, action: PayloadAction<AchievementMetrics>) => {
-            state.metrics = processMetrics(action.payload);
-            if (state.storageKey) {
-                localStorage.setItem(state.storageKey, JSON.stringify({
-                    metrics: state.metrics,
-                    unlockedAchievements: state.unlockedAchievements
-                }));
-            }
-        },
-
-        unlockAchievement: (state, action: PayloadAction<AchievementDetails>) => {
-            if (!state.unlockedAchievements.includes(action.payload.achievementId)) {
-                state.unlockedAchievements.push(action.payload.achievementId);
-                state.pendingNotifications.push(action.payload);
-                if (state.storageKey) {
-                    localStorage.setItem(state.storageKey, JSON.stringify({
-                        metrics: state.metrics,
-                        unlockedAchievements: state.unlockedAchievements
-                    }));
-                }
-            }
-        },
-
-        clearNotifications: (state) => {
-            state.pendingNotifications = [];
-        },
-
-        resetAchievements: (state) => {
-            state.metrics = {};
-            state.unlockedAchievements = [];
-            state.pendingNotifications = [];
-            if (state.storageKey) {
-                localStorage.removeItem(state.storageKey);
-            }
-        },
-    },
-});
-
-export const { initialize, setMetrics, resetAchievements, unlockAchievement, clearNotifications } = achievementSlice.actions;
-
-export default achievementSlice.reducer;

package/src/redux/notificationSlice.ts

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

package/src/redux/store.ts

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

package/src/types.ts

@@ -1,39 +0,0 @@
-import {Styles} from "./defaultStyles";
-
-export type AchievementMetricValue = number | string | boolean | Date;
-
-export interface AchievementState {
-    metrics: Record<string, AchievementMetricValue[]>;
-    unlockedAchievements: string[];
-}
-
-export interface AchievementDetails {
-    achievementId: string;
-    achievementTitle: string;
-    achievementDescription: string;
-    achievementIconKey?: string;
-}
-
-export type AchievementIconRecord = Record<string, string>;
-
-export interface AchievementUnlockCondition {
-    isConditionMet: (value: AchievementMetricValue, state?: AchievementState) => boolean;
-    achievementDetails: AchievementDetails;
-}
-
-export interface AchievementConfiguration {
-    [metricName: string]: AchievementUnlockCondition[];
-}
-
-export type InitialAchievementMetrics = Record<string, AchievementMetricValue | AchievementMetricValue[] | undefined>;
-export type AchievementMetrics = Record<string, AchievementMetricValue[]>;
-
-export interface AchievementProviderProps {
-    children: React.ReactNode;
-    config: AchievementConfiguration;
-    initialState?: InitialAchievementMetrics & { previouslyAwardedAchievements?: string[] };
-    storageKey?: string;
-    badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    styles?: Partial<Styles>;
-    icons?: Record<string, string>;
-}

package/tsconfig.json

@@ -1,113 +0,0 @@
-{
-  "compilerOptions": {
-    /* Visit https://aka.ms/tsconfig to read more about this file */
-
-    /* Projects */
-    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
-    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
-    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
-    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
-    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
-    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
-
-    /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-     "jsx": "react",                                /* Specify what JSX code is generated. */
-    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
-    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
-    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
-    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
-    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
-    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
-    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
-    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
-    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
-
-    /* Modules */
-    "module": "ES6",                                /* Specify what module code is generated. */
-    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-     "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
-    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
-    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
-    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
-    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
-    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
-    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
-    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files. */
-    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
-    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
-
-    /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
-    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
-    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
-
-    /* Emit */
-     "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
-    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
-    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
-    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
-    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-     "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
-    // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
-    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
-    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
-    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
-    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
-    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
-    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
-    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
-    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
-    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
-    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
-    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
-
-    /* Interop Constraints */
-    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
-    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
-    // "isolatedDeclarations": true,                     /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
-    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
-     "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
-
-    /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
-    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
-    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
-    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
-    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
-    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
-    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
-    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
-    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
-    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
-    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
-    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
-    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
-
-    /* Completeness */
-    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
-  },
-  "include": [
-    "src",
-    "stories",
-    "react-confetti.d.ts"
-  ]
-}