EXAMPLES

import React, { createContext, useContext, useState } from 'react';
import type { BooleanValue, NumberType, Text } from '@wix/editor-react-types';

export interface ClickGoalContextType {
  count: NumberType;
  isCongratsBannerHidden: BooleanValue;
  isProgressHintHidden: BooleanValue;
  statusMessage: Text;
  increment: () => void;
}

export interface ClickGoalProviderProps {
  children?: React.ReactNode;
  goal: NumberType;
}

const ClickGoalContext = createContext<ClickGoalContextType | null>(null);
ClickGoalContext.displayName = 'ClickGoalContext';

export function useClickGoalContext(): ClickGoalContextType {
  const context = useContext(ClickGoalContext);
  if (!context) {
    throw new Error('useClickGoalContext must be used within a ClickGoalContextProvider');
  }
  return context;
}

export function ClickGoalContextProvider({
  children,
  goal,
}: ClickGoalProviderProps): React.ReactNode {
  const [count, setCount] = useState<NumberType>(0);
  const target = goal ?? 10;

  const increment = (): void => {
    setCount((current) => current + 1);
  };

  // Derived at render time from the state — never stored in a second state value.
  const hasReachedGoal = count >= target;
  const remaining = target - count;
  const statusMessage = hasReachedGoal
    ? 'Goal reached'
    : `${remaining} more ${remaining === 1 ? 'click' : 'clicks'} to go`;

  const api: ClickGoalContextType = {
    count,
    isCongratsBannerHidden: !hasReachedGoal, // hidden until goal is reached
    isProgressHintHidden: hasReachedGoal, // the complement, precomputed
    statusMessage,
    increment,
  };

  return (
    <ClickGoalContext.Provider value={api}>{children}</ClickGoalContext.Provider>
  );
}

ClickGoalContextProvider.displayName = 'ClickGoalContextProvider';
export default ClickGoalContextProvider;

context: {
  items: {
    count: {
      dataType: 'number',
      displayName: 'Click count',
      description: 'How many times the button has been clicked so far. Bind to a text element content.',
    },
    isCongratsBannerHidden: {
      dataType: 'booleanValue',
      displayName: 'Congratulations banner is hidden',
      description: 'True while the click count is below the goal. Bind to the congratulations banner hidden property.',
    },
    isProgressHintHidden: {
      dataType: 'booleanValue',
      displayName: 'Progress hint is hidden',
      description: 'True once the click count reaches the goal. Bind to the progress hint hidden property.',
    },
    statusMessage: {
      dataType: 'text',
      displayName: 'Status message',
      description: 'Reads how many clicks remain, or confirms the goal was reached. Bind to the progress hint content.',
    },
    increment: {
      dataType: 'function',
      displayName: 'Count one click',
      description: 'Adds one to the click count. Bind to the button click handler.',
      function: {
        parameters: [],
        async: false,
      },
    },
  },
},
data: {
  goal: {
    dataType: 'number',
    defaultValue: 10,
    deprecated: false,
    displayName: 'Goal',
  },
},
resources: {
  contextSpecifier: {
    hook: 'useClickGoalContext',
    moduleSpecifier: '<moduleSpecifierPrefix>click-goal-context',
  },
},