@kadconsulting/dry/dist/src/internal/components/Storybook/ThemeAwareStory.js

KAD Reusable Component Library

import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect } from 'react';
import { useTheme, ThemeTypes } from '~components/ThemeProvider';
/**
 * INTERNAL USE ONLY
 *
 * Allows for a configurable background color in Storybook, based on the theme.
 */
export const ThemeAwareStory = ({ children, id }) => {
    const { themeType } = useTheme();
    useEffect(() => {
        /** Assign the appropriate theme class to the parent */
        const { LIGHT: light, DARK: dark } = ThemeTypes;
        const oppositeThemeType = themeType === light ? dark : light;
        /** Update the class for canvas view */
        document.documentElement.classList.replace(oppositeThemeType, themeType);
        const parent = document.querySelector(`#anchor--${id} .sbdocs.sbdocs-preview`);
        if (!parent)
            return /** Update the class for docs view */;
        parent.classList.replace(oppositeThemeType, themeType);
    }, [themeType, id]);
    return _jsx("main", { children: children });
};
//# sourceMappingURL=ThemeAwareStory.js.map