@patreon/studio/module/components/ColorSystemContainer/index.jsx

Patreon Studio Design System

'use client';
import React, { useMemo } from 'react';
import { generateTokensDefinitionFromTokenMap } from '~/components/ColorSystem/lib/generateTokenMap';
import { defaultTokenMaps } from '~/components/ColorSystem/maps';
import { useIncrementLogger } from '~/components/IncrementLogger';
import { TokenValueCache } from '~/components/TokenValueCache';
import { isValidHex } from '~/utilities/color';
import { getCacheKey } from '~/utilities/color-system';
import { DefaultColorTokens } from './components/DefaultColorTokens';
import { ReplaceColorTokens } from './components/ReplaceColorTokens';
const ColorSystemContainerStateContext = React.createContext({
    inputColor: 'default',
    tokenMaps: defaultTokenMaps,
});
export const useColorSystemContainerState = () => React.useContext(ColorSystemContainerStateContext);
/**
 * ColorSystemContainer is a React component that changes token values within its context.
 */
export function ColorSystemContainer({ color, tokenMaps, children }) {
    const { incrementLogger } = useIncrementLogger();
    // if no color is provided, we don't need to do anything
    if (!color) {
        return <>{children}</>;
    }
    if (color === 'reset') {
        return <ColorSystemContainerDefault>{children}</ColorSystemContainerDefault>;
    }
    // if the color passed is not a hex string or `reset`, we don't need to wrap the children
    // we also want to warn the developer that the color is invalid
    if (!isValidHex(color)) {
        incrementLogger('patreon.studio.color_system_container.invalid_color');
        return <>{children}</>;
    }
    return (<ColorSystemContainerHex inputColor={color} tokenMaps={tokenMaps}>
      {children}
    </ColorSystemContainerHex>);
}
/**
 * ColorSystemContainerPassthrough is used to pass the current color system color to its children.
 * Useful for passing creator colors into a portalled component.
 */
export function ColorSystemContainerPassthrough({ children }) {
    const { inputColor, tokenMaps } = useColorSystemContainerState();
    if (inputColor === 'default') {
        return <ColorSystemContainerDefault>{children}</ColorSystemContainerDefault>;
    }
    return (<ColorSystemContainerHex inputColor={inputColor} tokenMaps={tokenMaps}>
      {children}
    </ColorSystemContainerHex>);
}
// container for the default color system
function ColorSystemContainerDefault({ children }) {
    const containerState = { inputColor: 'default', tokenMaps: defaultTokenMaps };
    return (<ColorSystemContainerStateContext.Provider value={containerState}>
      <DefaultColorTokens>{children}</DefaultColorTokens>
    </ColorSystemContainerStateContext.Provider>);
}
// container for color system driven by a color hex
function ColorSystemContainerHex({ inputColor, tokenMaps, children }) {
    const computedTokenMaps = tokenMaps ?? defaultTokenMaps;
    const cacheKey = getCacheKey({ inputColor, key: computedTokenMaps.key });
    const generatedTokensDefinition = generateTokensDefinitionFromTokenMap({ inputColor, tokenMaps: computedTokenMaps });
    const containerState = useMemo(() => ({ inputColor, tokenMaps: computedTokenMaps }), [inputColor, computedTokenMaps]);
    return (<ColorSystemContainerStateContext.Provider value={containerState}>
      <TokenValueCache cacheKey={cacheKey} value={generatedTokensDefinition}>
        <ReplaceColorTokens cacheKey={cacheKey} tokensDefinition={generatedTokensDefinition}>
          {children}
        </ReplaceColorTokens>
      </TokenValueCache>
    </ColorSystemContainerStateContext.Provider>);
}
//# sourceMappingURL=index.jsx.map