react-achievements 1.3.7 → 2.0.3

package/demo/src/stories/page.css

@@ -1,69 +0,0 @@
-.storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 24px;
-  padding: 48px 20px;
-  margin: 0 auto;
-  max-width: 600px;
-  color: #333;
-}
-
-.storybook-page h2 {
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 1;
-  margin: 0 0 4px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-page p {
-  margin: 1em 0;
-}
-
-.storybook-page a {
-  text-decoration: none;
-  color: #1ea7fd;
-}
-
-.storybook-page ul {
-  padding-left: 30px;
-  margin: 1em 0;
-}
-
-.storybook-page li {
-  margin-bottom: 8px;
-}
-
-.storybook-page .tip {
-  display: inline-block;
-  border-radius: 1em;
-  font-size: 11px;
-  line-height: 12px;
-  font-weight: 700;
-  background: #e7fdd8;
-  color: #66bf3c;
-  padding: 4px 12px;
-  margin-right: 10px;
-  vertical-align: top;
-}
-
-.storybook-page .tip-wrapper {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-.storybook-page .tip-wrapper svg {
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  vertical-align: top;
-  margin-top: 3px;
-}
-
-.storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
-}

package/dist/stories/Button.d.ts

@@ -1,28 +0,0 @@
-import React from 'react';
-import './button.css';
-export interface ButtonProps {
-    /**
-     * Is this the principal call to action on the page?
-     */
-    primary?: boolean;
-    /**
-     * What background color to use
-     */
-    backgroundColor?: string;
-    /**
-     * How large should the button be?
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Button contents
-     */
-    label: string;
-    /**
-     * Optional click handler
-     */
-    onClick?: () => void;
-}
-/**
- * Primary UI component for user interaction
- */
-export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => React.JSX.Element;

package/dist/stories/Button.stories.d.ts

@@ -1,23 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: ({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => import("react").JSX.Element;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {
-        backgroundColor: {
-            control: "color";
-        };
-    };
-    args: {
-        onClick: import("@vitest/spy").Mock<[], void>;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
-export declare const Secondary: Story;
-export declare const Large: Story;
-export declare const Small: Story;

package/dist/stories/Header.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import './header.css';
-type User = {
-    name: string;
-};
-export interface HeaderProps {
-    user?: User;
-    onLogin?: () => void;
-    onLogout?: () => void;
-    onCreateAccount?: () => void;
-}
-export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => React.JSX.Element;
-export {};

package/dist/stories/Header.stories.d.ts

@@ -1,18 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: ({ user, onLogin, onLogout, onCreateAccount }: import("./Header").HeaderProps) => import("react").JSX.Element;
-    tags: string[];
-    parameters: {
-        layout: string;
-    };
-    args: {
-        onLogin: import("@vitest/spy").Mock<[], void>;
-        onLogout: import("@vitest/spy").Mock<[], void>;
-        onCreateAccount: import("@vitest/spy").Mock<[], void>;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const LoggedIn: Story;
-export declare const LoggedOut: Story;

package/dist/stories/Page.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import './page.css';
-export declare const Page: React.FC;

package/dist/stories/Page.stories.d.ts

@@ -1,12 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: import("react").FC<{}>;
-    parameters: {
-        layout: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const LoggedOut: Story;
-export declare const LoggedIn: Story;

package/src/context/AchievementContext.tsx

@@ -1,185 +0,0 @@
-import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
-import { Metrics, AchievementConfig, AchievementData, MetricValue } 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';
-
-interface AchievementContextProps {
-    metrics: Metrics;
-    setMetrics: (metrics: Metrics | ((prevMetrics: Metrics) => Metrics)) => void;
-    unlockedAchievements: string[];
-    checkAchievements: () => void;
-    showBadgesModal: () => void;
-}
-
-interface AchievementProviderProps {
-    children: ReactNode;
-    config: AchievementConfig;
-    initialState?: Record<string, MetricValue>;
-    storageKey?: string;
-    badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    styles?: Partial<Styles>;
-}
-
-const AchievementContext = createContext<AchievementContextProps | undefined>(undefined);
-
-export const AchievementProvider: React.FC<AchievementProviderProps> = ({
-                                                                            children,
-                                                                            config,
-                                                                            initialState = {},
-                                                                            storageKey = 'react-achievements',
-                                                                            badgesButtonPosition = 'top-right',
-                                                                            styles = {},
-                                                                        }) => {
-    const mergedStyles = React.useMemo(() => mergeDeep(defaultStyles, styles), [styles]);
-
-    const [metrics, setMetrics] = useState<Metrics>(() => {
-        const savedMetrics = localStorage.getItem(`${storageKey}-metrics`);
-        return savedMetrics ? JSON.parse(savedMetrics) : initialState;
-    });
-
-    const [unlockedAchievements, setUnlockedAchievements] = useState<string[]>(() => {
-        const saved = localStorage.getItem(`${storageKey}-unlocked-achievements`);
-        return saved ? JSON.parse(saved) : [];
-    });
-
-    const [newlyUnlockedAchievements, setNewlyUnlockedAchievements] = useState<string[]>(() => {
-        const saved = localStorage.getItem(`${storageKey}-newly-unlocked-achievements`);
-        return saved ? JSON.parse(saved) : [];
-    });
-
-    const [achievementQueue, setAchievementQueue] = useState<AchievementData[]>([]);
-    const [currentAchievement, setCurrentAchievement] = useState<AchievementData | null>(null);
-    const [showBadges, setShowBadges] = useState(false);
-    const [showConfetti, setShowConfetti] = useState(false);
-
-    const checkAchievements = useCallback(() => {
-        const newAchievements: AchievementData[] = [];
-
-        Object.entries(config).forEach(([metricKey, conditions]) => {
-            const metricValue = metrics[metricKey];
-            conditions.forEach(condition => {
-                if (condition.check(metricValue) && !unlockedAchievements.includes(condition.data.id)) {
-                    newAchievements.push(condition.data);
-                }
-            });
-        });
-
-        if (newAchievements.length > 0) {
-            const newlyUnlockedIds = newAchievements.map(a => a.id);
-            setUnlockedAchievements(prev => {
-                const updated = [...prev, ...newlyUnlockedIds];
-                localStorage.setItem(`${storageKey}-unlocked-achievements`, JSON.stringify(updated));
-                return updated;
-            });
-            setNewlyUnlockedAchievements(prev => {
-                const updated = [...prev, ...newlyUnlockedIds];
-                localStorage.setItem(`${storageKey}-newly-unlocked-achievements`, JSON.stringify(updated));
-                return updated;
-            });
-            setAchievementQueue(prevQueue => [...prevQueue, ...newAchievements]);
-            setShowConfetti(true);
-        }
-    }, [config, metrics, unlockedAchievements, storageKey]);
-
-    useEffect(() => {
-        checkAchievements();
-    }, [metrics, checkAchievements]);
-
-    useEffect(() => {
-        if (achievementQueue.length > 0 && !currentAchievement) {
-            const nextAchievement = achievementQueue[0];
-            setCurrentAchievement(nextAchievement);
-            setAchievementQueue(prevQueue => prevQueue.slice(1));
-
-            setNewlyUnlockedAchievements(prev => {
-                const updated = prev.filter(id => id !== nextAchievement.id);
-                localStorage.setItem(`${storageKey}-newly-unlocked-achievements`, JSON.stringify(updated));
-                return updated;
-            });
-        }
-    }, [achievementQueue, currentAchievement, storageKey]);
-
-    const showBadgesModal = () => setShowBadges(true);
-
-    const getAchievements = (achievedIds: string[]) => {
-        return Object.values(config).flatMap(conditions =>
-            conditions.filter(c => achievedIds.includes(c.data.id)).map(c => c.data)
-        );
-    };
-
-    const contextValue: AchievementContextProps = {
-        metrics,
-        setMetrics: (newMetrics) => {
-            setMetrics(prevMetrics => {
-                const updatedMetrics = typeof newMetrics === 'function' ? newMetrics(prevMetrics) : newMetrics;
-                localStorage.setItem(`${storageKey}-metrics`, JSON.stringify(updatedMetrics));
-                return updatedMetrics;
-            });
-        },
-        unlockedAchievements,
-        checkAchievements,
-        showBadgesModal
-    };
-
-    return (
-        <AchievementContext.Provider value={contextValue}>
-            {children}
-            <AchievementModal
-                isOpen={!!currentAchievement}
-                achievement={currentAchievement}
-                onClose={() => {
-                    setCurrentAchievement(null);
-                    if (achievementQueue.length === 0 && newlyUnlockedAchievements.length === 0) {
-                        setShowConfetti(false);
-                    }
-                }}
-                styles={mergedStyles.achievementModal}
-            />
-            <BadgesModal
-                isOpen={showBadges}
-                achievements={getAchievements(unlockedAchievements)}
-                onClose={() => setShowBadges(false)}
-                styles={mergedStyles.badgesModal}
-            />
-            <BadgesButton
-                onClick={showBadgesModal}
-                position={badgesButtonPosition}
-                styles={mergedStyles.badgesButton}
-            />
-            <ConfettiWrapper show={showConfetti || achievementQueue.length > 0} />
-        </AchievementContext.Provider>
-    );
-};
-
-export const useAchievement = () => {
-    const context = useContext(AchievementContext);
-    if (context === undefined) {
-        throw new Error('useAchievement must be used within an AchievementProvider');
-    }
-    return context;
-};
-
-// Helper function to deep merge objects
-function mergeDeep(target: any, source: any) {
-    const output = Object.assign({}, target);
-    if (isObject(target) && isObject(source)) {
-        Object.keys(source).forEach(key => {
-            if (isObject(source[key])) {
-                if (!(key in target))
-                    Object.assign(output, { [key]: source[key] });
-                else
-                    output[key] = mergeDeep(target[key], source[key]);
-            } else {
-                Object.assign(output, { [key]: source[key] });
-            }
-        });
-    }
-    return output;
-}
-
-function isObject(item: any) {
-    return (item && typeof item === 'object' && !Array.isArray(item));
-}

package/src/stories/Button.stories.ts

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-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
-const meta = {
-  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() },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};

package/src/stories/Button.tsx

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