@patreon/studio/module/docs/components/DocsContainer/index.jsx

Patreon Studio Design System

import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks';
import { DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
import { isHappoRun } from 'happo/storybook/register';
import React, { useEffect, useMemo } from 'react';
import { addons } from 'storybook/preview-api';
import { themes } from 'storybook/theming';
import { ColorSystemContainer } from '~/components/ColorSystemContainer';
import { StudioProvider } from '~/components/StudioProvider';
import { StorybookGlobalContainer } from '../GlobalContainer';
const channel = addons.getChannel();
function useDarkMode(defaultValue = false) {
    const [isDark, setDark] = React.useState(defaultValue);
    useEffect(() => {
        channel.on(DARK_MODE_EVENT_NAME, setDark);
        return () => channel.off(DARK_MODE_EVENT_NAME, setDark);
    }, [setDark]);
    return isDark;
}
export const DocsContainer = (props) => {
    // we can't use storybook global data in the docs container, so we need to reach
    // into the context and get the globals from there. This is a bit of a hack, but it works.
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const globals = props.context.store.userGlobals.globals;
    const featureFlags = useMemo(() => ({
        disable_responsive_typescale: globals.disable_responsive_typescale,
    }), [globals]);
    const isParentDark = parent.document.body.classList.contains('dark');
    const isParentLight = parent.document.body.classList.contains('light');
    const hasParentColorScheme = isParentDark || isParentLight;
    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const isHappo = isHappoRun();
    const isDarkMode = useDarkMode(hasParentColorScheme ? isParentDark : darkModeMediaQuery);
    const tokenColorMode = isDarkMode ? 'dark' : 'light';
    const theme = isDarkMode ? themes.dark : themes.light;
    const globalData = useMemo(() => ({
        ...globals,
        isDarkMode,
        isHappo,
        featureFlags,
    }), [isDarkMode, isHappo, featureFlags, globals]);
    return (<StudioProvider tokenColorMode={tokenColorMode} featureFlags={featureFlags}>
      <ColorSystemContainer color={undefined}>
        <StorybookGlobalContainer globalData={globalData}>
          <BaseContainer {...props} theme={theme}/>
        </StorybookGlobalContainer>
      </ColorSystemContainer>
    </StudioProvider>);
};
//# sourceMappingURL=index.jsx.map