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

Patreon Studio Design System

'use client';
import React, { useEffect, useMemo } from 'react';
import { ThemeProvider } from 'styled-components';
import { FeatureFlagProvider } from '~/components/FeatureFlagProvider';
import { IncrementLoggerProvider } from '~/components/IncrementLogger';
import { OverlayStackProvider } from '~/components/OverlayStackProvider';
import { TokenModeProvider } from '~/components/TokenModeProvider';
import { TokenValueCache } from '~/components/TokenValueCache';
import { tokenDefinitionsClassName } from '~/styles/token-definitions';
import { tokenColorModeClassName, tokenScreenModeClassName, tokenSharedModeClassName } from '~/styles/token-modes';
export const StudioProvider = ({ children, tokenSet, tokenColorMode = 'auto', incrementLogger, featureFlags = {}, }) => {
    // TODO: remove this once migrated to `TokenColorMode`
    const calculatedTokenColorMode = tokenColorMode ?? tokenSet;
    const calculatedTheme = useMemo(() => ({ tokenColorMode: calculatedTokenColorMode }), [calculatedTokenColorMode]);
    useEffect(() => {
        document.documentElement.classList.add(tokenDefinitionsClassName());
        document.documentElement.classList.add(tokenSharedModeClassName());
    }, []);
    useEffect(() => {
        document.documentElement.classList.toggle(tokenColorModeClassName('auto'), calculatedTokenColorMode === 'auto');
        document.documentElement.classList.toggle(tokenColorModeClassName('light'), calculatedTokenColorMode === 'light');
        document.documentElement.classList.toggle(tokenColorModeClassName('dark'), calculatedTokenColorMode === 'dark');
    }, [calculatedTokenColorMode]);
    const disableResponsiveTypescale = featureFlags.disable_responsive_typescale ?? false;
    useEffect(() => {
        document.documentElement.classList.toggle(tokenScreenModeClassName('auto'), !disableResponsiveTypescale);
        document.documentElement.classList.toggle(tokenScreenModeClassName('mobile'), disableResponsiveTypescale);
    }, [disableResponsiveTypescale]);
    return (<ThemeProvider theme={calculatedTheme}>
      <FeatureFlagProvider featureFlags={featureFlags}>
        <IncrementLoggerProvider incrementLogger={incrementLogger}>
          <TokenModeProvider rootColorMode={calculatedTokenColorMode} rootScreenMode={disableResponsiveTypescale ? 'mobile' : 'auto'} currentColorMode={calculatedTokenColorMode} currentScreenMode={disableResponsiveTypescale ? 'mobile' : 'auto'}>
            <TokenValueCache>
              <OverlayStackProvider>{children}</OverlayStackProvider>
            </TokenValueCache>
          </TokenModeProvider>
        </IncrementLoggerProvider>
      </FeatureFlagProvider>
    </ThemeProvider>);
};
//# sourceMappingURL=index.jsx.map