@chayns-components/core 5.0.0-beta.997 → 5.0.0-beta.998

package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js

@@ -27,13 +27,9 @@ const ColorSchemeContext = exports.ColorSchemeContext = /*#__PURE__*/(0, _react.
 const useColorScheme = () => (0, _react.useContext)(ColorSchemeContext);
 exports.useColorScheme = useColorScheme;
 let useStyleSettings = () => undefined;
-try {
-  useStyleSettings =
-  // eslint-disable-next-line global-require,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-var-requires
-  require('chayns-api').useStyleSettings ?? useStyleSettings;
-} catch {
-  // Do nothing
-}
+void Promise.resolve().then(() => _interopRequireWildcard(require('chayns-api'))).then(module => {
+  useStyleSettings = module.useStyleSettings ?? useStyleSettings;
+});
 const ColorSchemeProvider = ({
   children,
   color,

package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_reactHelmet","_styledComponents","_get","_font","_ColorSchemeProvider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","useStyleSettings","ColorSchemeProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","paragraphFormat","designSettings","theme","colors","internalTheme","setInternalTheme","useState","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","useSite","styleSettings","useEffect","getDesignSettings","then","result","paragraphFormats","getParagraphFormat","newTheme","availableColors","getAvailableColorList","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","ColorMode","Light","Dark","keys","key","convertIconStyle","iconStyle","themeResult","getHeadlineColorSelector","fontSize","getFontSize","contextValue","useMemo","createElement","ThemeProvider","Provider","value","Helmet","rel","href","StyledColorSchemeProvider","className","displayName","_default"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ColorMode, useSite } from 'chayns-api';\nimport React, {\n    createContext,\n    FC,\n    ReactNode,\n    useContext,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { Helmet } from 'react-helmet';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings, getParagraphFormat } from '../../api/theme/get';\nimport type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The colors of the components\n     */\n    colors?: Theme;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The design settings of a page.\n     */\n    designSettings?: DesignSettings;\n    /**\n     * The general format settings.\n     */\n    paragraphFormat?: ParagraphFormat[];\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * The theme for the components\n     */\n    theme?: Theme;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings: DesignSettings;\n    paragraphFormat: ParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nlet useStyleSettings: () =>\n    | {\n          paragraphFormats: ParagraphFormat[];\n          designSettings: DesignSettings;\n      }\n    | undefined = () => undefined;\n\ntry {\n    useStyleSettings =\n        // eslint-disable-next-line global-require,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-var-requires\n        (require('chayns-api').useStyleSettings as () => {\n            paragraphFormats: ParagraphFormat[];\n            designSettings: DesignSettings;\n        }) ?? useStyleSettings;\n} catch {\n    // Do nothing\n}\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    siteId,\n    style = {},\n    paragraphFormat,\n    designSettings,\n    theme,\n    colors,\n}) => {\n    const [internalTheme, setInternalTheme] = useState<Theme>(theme ?? {});\n    const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n    const [internalParagraphFormat, setInternalParagraphFormat] = useState<ParagraphFormat[]>();\n\n    // Empty object is used to prevent error if ColorSchemeProvider is rendered on server\n    const { color: internalColor, colorMode: internalColorMode } = useSite() ?? {};\n\n    // ToDo remove if this hook is no beta anymore\n    const styleSettings = useStyleSettings();\n\n    useEffect(() => {\n        if (designSettings) {\n            setInternalDesignSettings(designSettings);\n        } else if (styleSettings?.designSettings) {\n            setInternalDesignSettings(styleSettings.designSettings);\n        } else if (!internalDesignSettings) {\n            void getDesignSettings(siteId).then((result) => {\n                setInternalDesignSettings(result);\n            });\n        }\n    }, [designSettings, internalDesignSettings, siteId, styleSettings?.designSettings]);\n\n    useEffect(() => {\n        if (paragraphFormat) {\n            setInternalParagraphFormat(paragraphFormat);\n        } else if (styleSettings?.paragraphFormats) {\n            setInternalParagraphFormat(styleSettings.paragraphFormats);\n        } else if (!internalParagraphFormat) {\n            void getParagraphFormat(siteId).then((result) => {\n                setInternalParagraphFormat(result);\n            });\n        }\n    }, [internalParagraphFormat, paragraphFormat, siteId, styleSettings?.paragraphFormats]);\n\n    useEffect(() => {\n        let newTheme: Theme = {};\n\n        const availableColors = getAvailableColorList();\n\n        if (!colors || !theme) {\n            availableColors.forEach((colorName: string) => {\n                const hexColor = getColorFromPalette(colorName, {\n                    color: color ?? internalColor,\n                    colorMode: colorMode ?? internalColorMode,\n                    secondaryColor,\n                });\n\n                if (hexColor) {\n                    const rgbColor = hexToRgb255(hexColor);\n\n                    if (!theme) {\n                        newTheme[colorName] = hexColor;\n                    }\n\n                    if (rgbColor) {\n                        if (!theme) {\n                            newTheme[`${colorName}-rgb`] =\n                                `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                        }\n                    }\n                }\n            });\n        }\n\n        if (!theme) {\n            switch (colorMode ?? internalColorMode) {\n                case ColorMode.Light:\n                    newTheme.colorMode = 'light';\n                    break;\n                case ColorMode.Dark:\n                    newTheme.colorMode = 'dark';\n                    break;\n                default:\n                    newTheme.colorMode = 'classic';\n                    break;\n            }\n\n            if (internalDesignSettings) {\n                Object.keys(internalDesignSettings).forEach((key) => {\n                    if (key === 'iconStyle') {\n                        newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n                        return;\n                    }\n\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = internalDesignSettings[key];\n                });\n            }\n\n            if (internalParagraphFormat) {\n                const { themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n                // Update Theme\n                Object.keys(themeResult).forEach((key) => {\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = themeResult[key];\n                });\n            }\n\n            newTheme.fontSize = getFontSize();\n        } else {\n            newTheme = theme;\n        }\n\n        setInternalTheme(newTheme);\n    }, [\n        color,\n        colorMode,\n        colors,\n        internalColor,\n        internalColorMode,\n        internalDesignSettings,\n        internalParagraphFormat,\n        secondaryColor,\n        theme,\n    ]);\n\n    const contextValue: ColorSchemeContextProps | undefined = useMemo(() => {\n        if (internalDesignSettings && internalParagraphFormat) {\n            return {\n                paragraphFormat: internalParagraphFormat,\n                designSettings: internalDesignSettings,\n                theme: internalTheme,\n            };\n        }\n\n        return undefined;\n    }, [internalDesignSettings, internalParagraphFormat, internalTheme]);\n\n    return (\n        <ThemeProvider theme={internalTheme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <Helmet>\n                    <link\n                        rel=\"stylesheet\"\n                        href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n                    />\n                </Helmet>\n                <StyledColorSchemeProvider\n                    className=\"color-scheme-provider\"\n                    style={{\n                        ...cssVariables,\n                        ...style,\n                    }}\n                >\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_reactHelmet","_styledComponents","_get","_font","_ColorSchemeProvider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","useStyleSettings","Promise","resolve","then","module","ColorSchemeProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","paragraphFormat","designSettings","theme","colors","internalTheme","setInternalTheme","useState","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","useSite","styleSettings","useEffect","getDesignSettings","result","paragraphFormats","getParagraphFormat","newTheme","availableColors","getAvailableColorList","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","ColorMode","Light","Dark","keys","key","convertIconStyle","iconStyle","themeResult","getHeadlineColorSelector","fontSize","getFontSize","contextValue","useMemo","createElement","ThemeProvider","Provider","value","Helmet","rel","href","StyledColorSchemeProvider","className","displayName","_default"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ColorMode, useSite } from 'chayns-api';\nimport React, {\n    createContext,\n    FC,\n    ReactNode,\n    useContext,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { Helmet } from 'react-helmet';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings, getParagraphFormat } from '../../api/theme/get';\nimport type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The colors of the components\n     */\n    colors?: Theme;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The design settings of a page.\n     */\n    designSettings?: DesignSettings;\n    /**\n     * The general format settings.\n     */\n    paragraphFormat?: ParagraphFormat[];\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * The theme for the components\n     */\n    theme?: Theme;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings: DesignSettings;\n    paragraphFormat: ParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nlet useStyleSettings: () =>\n    | {\n          paragraphFormats: ParagraphFormat[];\n          designSettings: DesignSettings;\n      }\n    | undefined = () => undefined;\n\nvoid import('chayns-api').then((module) => {\n    useStyleSettings = module.useStyleSettings ?? useStyleSettings;\n});\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    siteId,\n    style = {},\n    paragraphFormat,\n    designSettings,\n    theme,\n    colors,\n}) => {\n    const [internalTheme, setInternalTheme] = useState<Theme>(theme ?? {});\n    const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n    const [internalParagraphFormat, setInternalParagraphFormat] = useState<ParagraphFormat[]>();\n\n    // Empty object is used to prevent error if ColorSchemeProvider is rendered on server\n    const { color: internalColor, colorMode: internalColorMode } = useSite() ?? {};\n\n    // ToDo remove if this hook is no beta anymore\n    const styleSettings = useStyleSettings();\n\n    useEffect(() => {\n        if (designSettings) {\n            setInternalDesignSettings(designSettings);\n        } else if (styleSettings?.designSettings) {\n            setInternalDesignSettings(styleSettings.designSettings);\n        } else if (!internalDesignSettings) {\n            void getDesignSettings(siteId).then((result) => {\n                setInternalDesignSettings(result);\n            });\n        }\n    }, [designSettings, internalDesignSettings, siteId, styleSettings?.designSettings]);\n\n    useEffect(() => {\n        if (paragraphFormat) {\n            setInternalParagraphFormat(paragraphFormat);\n        } else if (styleSettings?.paragraphFormats) {\n            setInternalParagraphFormat(styleSettings.paragraphFormats);\n        } else if (!internalParagraphFormat) {\n            void getParagraphFormat(siteId).then((result) => {\n                setInternalParagraphFormat(result);\n            });\n        }\n    }, [internalParagraphFormat, paragraphFormat, siteId, styleSettings?.paragraphFormats]);\n\n    useEffect(() => {\n        let newTheme: Theme = {};\n\n        const availableColors = getAvailableColorList();\n\n        if (!colors || !theme) {\n            availableColors.forEach((colorName: string) => {\n                const hexColor = getColorFromPalette(colorName, {\n                    color: color ?? internalColor,\n                    colorMode: colorMode ?? internalColorMode,\n                    secondaryColor,\n                });\n\n                if (hexColor) {\n                    const rgbColor = hexToRgb255(hexColor);\n\n                    if (!theme) {\n                        newTheme[colorName] = hexColor;\n                    }\n\n                    if (rgbColor) {\n                        if (!theme) {\n                            newTheme[`${colorName}-rgb`] =\n                                `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                        }\n                    }\n                }\n            });\n        }\n\n        if (!theme) {\n            switch (colorMode ?? internalColorMode) {\n                case ColorMode.Light:\n                    newTheme.colorMode = 'light';\n                    break;\n                case ColorMode.Dark:\n                    newTheme.colorMode = 'dark';\n                    break;\n                default:\n                    newTheme.colorMode = 'classic';\n                    break;\n            }\n\n            if (internalDesignSettings) {\n                Object.keys(internalDesignSettings).forEach((key) => {\n                    if (key === 'iconStyle') {\n                        newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n                        return;\n                    }\n\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = internalDesignSettings[key];\n                });\n            }\n\n            if (internalParagraphFormat) {\n                const { themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n                // Update Theme\n                Object.keys(themeResult).forEach((key) => {\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = themeResult[key];\n                });\n            }\n\n            newTheme.fontSize = getFontSize();\n        } else {\n            newTheme = theme;\n        }\n\n        setInternalTheme(newTheme);\n    }, [\n        color,\n        colorMode,\n        colors,\n        internalColor,\n        internalColorMode,\n        internalDesignSettings,\n        internalParagraphFormat,\n        secondaryColor,\n        theme,\n    ]);\n\n    const contextValue: ColorSchemeContextProps | undefined = useMemo(() => {\n        if (internalDesignSettings && internalParagraphFormat) {\n            return {\n                paragraphFormat: internalParagraphFormat,\n                designSettings: internalDesignSettings,\n                theme: internalTheme,\n            };\n        }\n\n        return undefined;\n    }, [internalDesignSettings, internalParagraphFormat, internalTheme]);\n\n    return (\n        <ThemeProvider theme={internalTheme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <Helmet>\n                    <link\n                        rel=\"stylesheet\"\n                        href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n                    />\n                </Helmet>\n                <StyledColorSchemeProvider\n                    className=\"color-scheme-provider\"\n                    style={{\n                        ...cssVariables,\n                        ...style,\n                    }}\n                >\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js

@@ -19,13 +19,9 @@ const GlobalStyle = createGlobalStyle`
 export const ColorSchemeContext = /*#__PURE__*/createContext(undefined);
 export const useColorScheme = () => useContext(ColorSchemeContext);
 let useStyleSettings = () => undefined;
-try {
-  useStyleSettings =
-  // eslint-disable-next-line global-require,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-var-requires
-  require('chayns-api').useStyleSettings ?? useStyleSettings;
-} catch {
-  // Do nothing
-}
+void import('chayns-api').then(module => {
+  useStyleSettings = module.useStyleSettings ?? useStyleSettings;
+});
 const ColorSchemeProvider = _ref => {
   let {
     children,

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useSite","React","createContext","useContext","useEffect","useMemo","useState","Helmet","createGlobalStyle","ThemeProvider","getDesignSettings","getParagraphFormat","convertIconStyle","getFontSize","getHeadlineColorSelector","StyledColorSchemeProvider","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","useStyleSettings","require","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","siteId","style","paragraphFormat","designSettings","theme","colors","internalTheme","setInternalTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","styleSettings","then","result","paragraphFormats","newTheme","availableColors","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","themeResult","fontSize","contextValue","createElement","Provider","value","rel","href","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ColorMode, useSite } from 'chayns-api';\nimport React, {\n    createContext,\n    FC,\n    ReactNode,\n    useContext,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { Helmet } from 'react-helmet';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings, getParagraphFormat } from '../../api/theme/get';\nimport type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The colors of the components\n     */\n    colors?: Theme;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The design settings of a page.\n     */\n    designSettings?: DesignSettings;\n    /**\n     * The general format settings.\n     */\n    paragraphFormat?: ParagraphFormat[];\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * The theme for the components\n     */\n    theme?: Theme;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings: DesignSettings;\n    paragraphFormat: ParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nlet useStyleSettings: () =>\n    | {\n          paragraphFormats: ParagraphFormat[];\n          designSettings: DesignSettings;\n      }\n    | undefined = () => undefined;\n\ntry {\n    useStyleSettings =\n        // eslint-disable-next-line global-require,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-var-requires\n        (require('chayns-api').useStyleSettings as () => {\n            paragraphFormats: ParagraphFormat[];\n            designSettings: DesignSettings;\n        }) ?? useStyleSettings;\n} catch {\n    // Do nothing\n}\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    siteId,\n    style = {},\n    paragraphFormat,\n    designSettings,\n    theme,\n    colors,\n}) => {\n    const [internalTheme, setInternalTheme] = useState<Theme>(theme ?? {});\n    const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n    const [internalParagraphFormat, setInternalParagraphFormat] = useState<ParagraphFormat[]>();\n\n    // Empty object is used to prevent error if ColorSchemeProvider is rendered on server\n    const { color: internalColor, colorMode: internalColorMode } = useSite() ?? {};\n\n    // ToDo remove if this hook is no beta anymore\n    const styleSettings = useStyleSettings();\n\n    useEffect(() => {\n        if (designSettings) {\n            setInternalDesignSettings(designSettings);\n        } else if (styleSettings?.designSettings) {\n            setInternalDesignSettings(styleSettings.designSettings);\n        } else if (!internalDesignSettings) {\n            void getDesignSettings(siteId).then((result) => {\n                setInternalDesignSettings(result);\n            });\n        }\n    }, [designSettings, internalDesignSettings, siteId, styleSettings?.designSettings]);\n\n    useEffect(() => {\n        if (paragraphFormat) {\n            setInternalParagraphFormat(paragraphFormat);\n        } else if (styleSettings?.paragraphFormats) {\n            setInternalParagraphFormat(styleSettings.paragraphFormats);\n        } else if (!internalParagraphFormat) {\n            void getParagraphFormat(siteId).then((result) => {\n                setInternalParagraphFormat(result);\n            });\n        }\n    }, [internalParagraphFormat, paragraphFormat, siteId, styleSettings?.paragraphFormats]);\n\n    useEffect(() => {\n        let newTheme: Theme = {};\n\n        const availableColors = getAvailableColorList();\n\n        if (!colors || !theme) {\n            availableColors.forEach((colorName: string) => {\n                const hexColor = getColorFromPalette(colorName, {\n                    color: color ?? internalColor,\n                    colorMode: colorMode ?? internalColorMode,\n                    secondaryColor,\n                });\n\n                if (hexColor) {\n                    const rgbColor = hexToRgb255(hexColor);\n\n                    if (!theme) {\n                        newTheme[colorName] = hexColor;\n                    }\n\n                    if (rgbColor) {\n                        if (!theme) {\n                            newTheme[`${colorName}-rgb`] =\n                                `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                        }\n                    }\n                }\n            });\n        }\n\n        if (!theme) {\n            switch (colorMode ?? internalColorMode) {\n                case ColorMode.Light:\n                    newTheme.colorMode = 'light';\n                    break;\n                case ColorMode.Dark:\n                    newTheme.colorMode = 'dark';\n                    break;\n                default:\n                    newTheme.colorMode = 'classic';\n                    break;\n            }\n\n            if (internalDesignSettings) {\n                Object.keys(internalDesignSettings).forEach((key) => {\n                    if (key === 'iconStyle') {\n                        newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n                        return;\n                    }\n\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = internalDesignSettings[key];\n                });\n            }\n\n            if (internalParagraphFormat) {\n                const { themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n                // Update Theme\n                Object.keys(themeResult).forEach((key) => {\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = themeResult[key];\n                });\n            }\n\n            newTheme.fontSize = getFontSize();\n        } else {\n            newTheme = theme;\n        }\n\n        setInternalTheme(newTheme);\n    }, [\n        color,\n        colorMode,\n        colors,\n        internalColor,\n        internalColorMode,\n        internalDesignSettings,\n        internalParagraphFormat,\n        secondaryColor,\n        theme,\n    ]);\n\n    const contextValue: ColorSchemeContextProps | undefined = useMemo(() => {\n        if (internalDesignSettings && internalParagraphFormat) {\n            return {\n                paragraphFormat: internalParagraphFormat,\n                designSettings: internalDesignSettings,\n                theme: internalTheme,\n            };\n        }\n\n        return undefined;\n    }, [internalDesignSettings, internalParagraphFormat, internalTheme]);\n\n    return (\n        <ThemeProvider theme={internalTheme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <Helmet>\n                    <link\n                        rel=\"stylesheet\"\n                        href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n                    />\n                </Helmet>\n                <StyledColorSchemeProvider\n                    className=\"color-scheme-provider\"\n                    style={{\n                        ...cssVariables,\n                        ...style,\n                    }}\n                >\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useSite","React","createContext","useContext","useEffect","useMemo","useState","Helmet","createGlobalStyle","ThemeProvider","getDesignSettings","getParagraphFormat","convertIconStyle","getFontSize","getHeadlineColorSelector","StyledColorSchemeProvider","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","useStyleSettings","then","module","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","siteId","style","paragraphFormat","designSettings","theme","colors","internalTheme","setInternalTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","styleSettings","result","paragraphFormats","newTheme","availableColors","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","themeResult","fontSize","contextValue","createElement","Provider","value","rel","href","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ColorMode, useSite } from 'chayns-api';\nimport React, {\n    createContext,\n    FC,\n    ReactNode,\n    useContext,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { Helmet } from 'react-helmet';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings, getParagraphFormat } from '../../api/theme/get';\nimport type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The colors of the components\n     */\n    colors?: Theme;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The design settings of a page.\n     */\n    designSettings?: DesignSettings;\n    /**\n     * The general format settings.\n     */\n    paragraphFormat?: ParagraphFormat[];\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * The theme for the components\n     */\n    theme?: Theme;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings: DesignSettings;\n    paragraphFormat: ParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nlet useStyleSettings: () =>\n    | {\n          paragraphFormats: ParagraphFormat[];\n          designSettings: DesignSettings;\n      }\n    | undefined = () => undefined;\n\nvoid import('chayns-api').then((module) => {\n    useStyleSettings = module.useStyleSettings ?? useStyleSettings;\n});\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    siteId,\n    style = {},\n    paragraphFormat,\n    designSettings,\n    theme,\n    colors,\n}) => {\n    const [internalTheme, setInternalTheme] = useState<Theme>(theme ?? {});\n    const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n    const [internalParagraphFormat, setInternalParagraphFormat] = useState<ParagraphFormat[]>();\n\n    // Empty object is used to prevent error if ColorSchemeProvider is rendered on server\n    const { color: internalColor, colorMode: internalColorMode } = useSite() ?? {};\n\n    // ToDo remove if this hook is no beta anymore\n    const styleSettings = useStyleSettings();\n\n    useEffect(() => {\n        if (designSettings) {\n            setInternalDesignSettings(designSettings);\n        } else if (styleSettings?.designSettings) {\n            setInternalDesignSettings(styleSettings.designSettings);\n        } else if (!internalDesignSettings) {\n            void getDesignSettings(siteId).then((result) => {\n                setInternalDesignSettings(result);\n            });\n        }\n    }, [designSettings, internalDesignSettings, siteId, styleSettings?.designSettings]);\n\n    useEffect(() => {\n        if (paragraphFormat) {\n            setInternalParagraphFormat(paragraphFormat);\n        } else if (styleSettings?.paragraphFormats) {\n            setInternalParagraphFormat(styleSettings.paragraphFormats);\n        } else if (!internalParagraphFormat) {\n            void getParagraphFormat(siteId).then((result) => {\n                setInternalParagraphFormat(result);\n            });\n        }\n    }, [internalParagraphFormat, paragraphFormat, siteId, styleSettings?.paragraphFormats]);\n\n    useEffect(() => {\n        let newTheme: Theme = {};\n\n        const availableColors = getAvailableColorList();\n\n        if (!colors || !theme) {\n            availableColors.forEach((colorName: string) => {\n                const hexColor = getColorFromPalette(colorName, {\n                    color: color ?? internalColor,\n                    colorMode: colorMode ?? internalColorMode,\n                    secondaryColor,\n                });\n\n                if (hexColor) {\n                    const rgbColor = hexToRgb255(hexColor);\n\n                    if (!theme) {\n                        newTheme[colorName] = hexColor;\n                    }\n\n                    if (rgbColor) {\n                        if (!theme) {\n                            newTheme[`${colorName}-rgb`] =\n                                `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                        }\n                    }\n                }\n            });\n        }\n\n        if (!theme) {\n            switch (colorMode ?? internalColorMode) {\n                case ColorMode.Light:\n                    newTheme.colorMode = 'light';\n                    break;\n                case ColorMode.Dark:\n                    newTheme.colorMode = 'dark';\n                    break;\n                default:\n                    newTheme.colorMode = 'classic';\n                    break;\n            }\n\n            if (internalDesignSettings) {\n                Object.keys(internalDesignSettings).forEach((key) => {\n                    if (key === 'iconStyle') {\n                        newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n                        return;\n                    }\n\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = internalDesignSettings[key];\n                });\n            }\n\n            if (internalParagraphFormat) {\n                const { themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n                // Update Theme\n                Object.keys(themeResult).forEach((key) => {\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = themeResult[key];\n                });\n            }\n\n            newTheme.fontSize = getFontSize();\n        } else {\n            newTheme = theme;\n        }\n\n        setInternalTheme(newTheme);\n    }, [\n        color,\n        colorMode,\n        colors,\n        internalColor,\n        internalColorMode,\n        internalDesignSettings,\n        internalParagraphFormat,\n        secondaryColor,\n        theme,\n    ]);\n\n    const contextValue: ColorSchemeContextProps | undefined = useMemo(() => {\n        if (internalDesignSettings && internalParagraphFormat) {\n            return {\n                paragraphFormat: internalParagraphFormat,\n                designSettings: internalDesignSettings,\n                theme: internalTheme,\n            };\n        }\n\n        return undefined;\n    }, [internalDesignSettings, internalParagraphFormat, internalTheme]);\n\n    return (\n        <ThemeProvider theme={internalTheme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <Helmet>\n                    <link\n                        rel=\"stylesheet\"\n                        href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n                    />\n                </Helmet>\n                <StyledColorSchemeProvider\n                    className=\"color-scheme-provider\"\n                    style={{\n                        ...cssVariables,\n                        ...style,\n                    }}\n                >\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.997",
+    "version": "5.0.0-beta.998",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -88,5 +88,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "88b9adc4186af824999d62f8a1a5e907fceebb06"
+    "gitHead": "6519935696c86ec6e87ba9c629d507ef0b1b4628"
 }