@wise/components-theming 0.1.2-next-07dfb657b6.17 → 0.1.2-next-c069b2c9bc.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +14 -25
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/index.js +16 -27
- package/dist/es/index.js.map +1 -1
- package/package.json +2 -2
- package/src/ThemeProvider.spec.tsx +0 -2
- package/src/ThemeProvider.tsx +19 -10
- package/src/__snapshots__/ThemeProvider.spec.tsx.snap +11 -10
- package/src/ThemeScript.tsx +0 -18
package/dist/cjs/index.js
CHANGED
|
@@ -31,24 +31,6 @@ var useTheme = function useTheme() {
|
|
|
31
31
|
}, [theme]);
|
|
32
32
|
};
|
|
33
33
|
|
|
34
|
-
var ThemeScript = /*#__PURE__*/react.memo(function () {
|
|
35
|
-
var _useTheme = useTheme(),
|
|
36
|
-
className = _useTheme.className;
|
|
37
|
-
|
|
38
|
-
var scriptSource = react.useMemo(function () {
|
|
39
|
-
return "!(function () {try {document.documentElement.classList.add('".concat(className, "');} catch (e) {}})();");
|
|
40
|
-
}, [className]); // eslint-disable-next-line react/no-danger
|
|
41
|
-
|
|
42
|
-
return jsxRuntime.jsx("script", {
|
|
43
|
-
dangerouslySetInnerHTML: {
|
|
44
|
-
__html: scriptSource
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
}, // Never re-render this component
|
|
48
|
-
function () {
|
|
49
|
-
return true;
|
|
50
|
-
});
|
|
51
|
-
|
|
52
34
|
var ThemedChildren = function ThemedChildren(_ref) {
|
|
53
35
|
var children = _ref.children;
|
|
54
36
|
|
|
@@ -66,15 +48,22 @@ var ThemeProvider = function ThemeProvider(_ref) {
|
|
|
66
48
|
var _ref$theme = _ref.theme,
|
|
67
49
|
theme = _ref$theme === void 0 ? DEFAULT_COMPONENT_THEME : _ref$theme,
|
|
68
50
|
children = _ref.children;
|
|
69
|
-
var isRootProvider = react.useContext(ThemeContext) === undefined;
|
|
51
|
+
var isRootProvider = react.useContext(ThemeContext) === undefined; // RegEx to check for `np-theme-` class name
|
|
52
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
53
|
+
|
|
54
|
+
var themeClass = new RegExp(/\bnp-theme-.+?\b/, 'g'); // useEffect hook used to apply the theme class to the HTML element
|
|
70
55
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
56
|
+
react.useEffect(function () {
|
|
57
|
+
if (isRootProvider) {
|
|
58
|
+
// Remove all the theme classes from the documentElement
|
|
59
|
+
if (document.documentElement.className.match(themeClass)) {
|
|
60
|
+
document.documentElement.className = document.documentElement.className.replace(themeClass, '');
|
|
61
|
+
} // Add the new theme class to the documentElement
|
|
77
62
|
|
|
63
|
+
|
|
64
|
+
document.documentElement.classList.add("np-theme-".concat(theme));
|
|
65
|
+
}
|
|
66
|
+
}, [isRootProvider, theme, themeClass]);
|
|
78
67
|
return jsxRuntime.jsx(ThemeContext.Provider, {
|
|
79
68
|
value: theme,
|
|
80
69
|
children: jsxRuntime.jsx(ThemedChildren, {
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/useTheme.ts","../../src/
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/useTheme.ts","../../src/ThemedChildren.tsx","../../src/ThemeProvider.tsx"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\nexport const modernThemes = ['personal'] as const;\nexport const darkThemes = [] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n\nexport type Theming = {\n theme?: ComponentTheme;\n};\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n theme: ComponentTheme;\n isModern: boolean;\n isDark: boolean;\n className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n return useMemo(\n () => ({\n theme,\n isModern: isThemeModern(theme),\n isDark: isThemeDark(theme),\n className: getThemeClassName(theme),\n }),\n [theme],\n );\n};\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { children: ReactNode };\n\nexport const ThemedChildren = ({ children }: ThemedChildrenProps) => {\n const { className } = useTheme();\n\n return <div className={className}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';\n\nexport const ThemeContext = createContext<ComponentTheme | undefined>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n theme = DEFAULT_COMPONENT_THEME,\n children,\n}: ThemeProviderProps) => {\n const isRootProvider = useContext(ThemeContext) === undefined;\n\n // RegEx to check for `np-theme-` class name\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const themeClass = new RegExp(/\\bnp-theme-.+?\\b/, 'g');\n\n // useEffect hook used to apply the theme class to the HTML element\n useEffect(() => {\n if (isRootProvider) {\n // Remove all the theme classes from the documentElement\n if (document.documentElement.className.match(themeClass)) {\n document.documentElement.className = document.documentElement.className.replace(\n themeClass,\n '',\n );\n }\n // Add the new theme class to the documentElement\n document.documentElement.classList.add(`np-theme-${theme}`);\n }\n }, [isRootProvider, theme, themeClass]);\n\n return (\n <ThemeContext.Provider value={theme}>\n <ThemedChildren>{children}</ThemedChildren>\n </ThemeContext.Provider>\n );\n};\n"],"names":["modernThemes","darkThemes","DEFAULT_COMPONENT_THEME","isThemeModern","theme","includes","isThemeDark","getThemeClassName","useTheme","useContext","ThemeContext","useMemo","isModern","isDark","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isRootProvider","themeClass","RegExp","useEffect","document","documentElement","match","replace","classList","add","Provider","value"],"mappings":"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"}
|
package/dist/es/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx
|
|
2
|
-
import { useContext, useMemo,
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useContext, useMemo, createContext, useEffect } from 'react';
|
|
3
3
|
|
|
4
4
|
var modernThemes = ['personal'];
|
|
5
5
|
var darkThemes = [];
|
|
@@ -29,24 +29,6 @@ var useTheme = function useTheme() {
|
|
|
29
29
|
}, [theme]);
|
|
30
30
|
};
|
|
31
31
|
|
|
32
|
-
var ThemeScript = /*#__PURE__*/memo(function () {
|
|
33
|
-
var _useTheme = useTheme(),
|
|
34
|
-
className = _useTheme.className;
|
|
35
|
-
|
|
36
|
-
var scriptSource = useMemo(function () {
|
|
37
|
-
return "!(function () {try {document.documentElement.classList.add('".concat(className, "');} catch (e) {}})();");
|
|
38
|
-
}, [className]); // eslint-disable-next-line react/no-danger
|
|
39
|
-
|
|
40
|
-
return jsx("script", {
|
|
41
|
-
dangerouslySetInnerHTML: {
|
|
42
|
-
__html: scriptSource
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
}, // Never re-render this component
|
|
46
|
-
function () {
|
|
47
|
-
return true;
|
|
48
|
-
});
|
|
49
|
-
|
|
50
32
|
var ThemedChildren = function ThemedChildren(_ref) {
|
|
51
33
|
var children = _ref.children;
|
|
52
34
|
|
|
@@ -64,15 +46,22 @@ var ThemeProvider = function ThemeProvider(_ref) {
|
|
|
64
46
|
var _ref$theme = _ref.theme,
|
|
65
47
|
theme = _ref$theme === void 0 ? DEFAULT_COMPONENT_THEME : _ref$theme,
|
|
66
48
|
children = _ref.children;
|
|
67
|
-
var isRootProvider = useContext(ThemeContext) === undefined;
|
|
49
|
+
var isRootProvider = useContext(ThemeContext) === undefined; // RegEx to check for `np-theme-` class name
|
|
50
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
51
|
+
|
|
52
|
+
var themeClass = new RegExp(/\bnp-theme-.+?\b/, 'g'); // useEffect hook used to apply the theme class to the HTML element
|
|
68
53
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
54
|
+
useEffect(function () {
|
|
55
|
+
if (isRootProvider) {
|
|
56
|
+
// Remove all the theme classes from the documentElement
|
|
57
|
+
if (document.documentElement.className.match(themeClass)) {
|
|
58
|
+
document.documentElement.className = document.documentElement.className.replace(themeClass, '');
|
|
59
|
+
} // Add the new theme class to the documentElement
|
|
75
60
|
|
|
61
|
+
|
|
62
|
+
document.documentElement.classList.add("np-theme-".concat(theme));
|
|
63
|
+
}
|
|
64
|
+
}, [isRootProvider, theme, themeClass]);
|
|
76
65
|
return jsx(ThemeContext.Provider, {
|
|
77
66
|
value: theme,
|
|
78
67
|
children: jsx(ThemedChildren, {
|
package/dist/es/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/useTheme.ts","../../src/
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/useTheme.ts","../../src/ThemedChildren.tsx","../../src/ThemeProvider.tsx"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\nexport const modernThemes = ['personal'] as const;\nexport const darkThemes = [] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n\nexport type Theming = {\n theme?: ComponentTheme;\n};\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n theme: ComponentTheme;\n isModern: boolean;\n isDark: boolean;\n className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n return useMemo(\n () => ({\n theme,\n isModern: isThemeModern(theme),\n isDark: isThemeDark(theme),\n className: getThemeClassName(theme),\n }),\n [theme],\n );\n};\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { children: ReactNode };\n\nexport const ThemedChildren = ({ children }: ThemedChildrenProps) => {\n const { className } = useTheme();\n\n return <div className={className}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';\n\nexport const ThemeContext = createContext<ComponentTheme | undefined>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n theme = DEFAULT_COMPONENT_THEME,\n children,\n}: ThemeProviderProps) => {\n const isRootProvider = useContext(ThemeContext) === undefined;\n\n // RegEx to check for `np-theme-` class name\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const themeClass = new RegExp(/\\bnp-theme-.+?\\b/, 'g');\n\n // useEffect hook used to apply the theme class to the HTML element\n useEffect(() => {\n if (isRootProvider) {\n // Remove all the theme classes from the documentElement\n if (document.documentElement.className.match(themeClass)) {\n document.documentElement.className = document.documentElement.className.replace(\n themeClass,\n '',\n );\n }\n // Add the new theme class to the documentElement\n document.documentElement.classList.add(`np-theme-${theme}`);\n }\n }, [isRootProvider, theme, themeClass]);\n\n return (\n <ThemeContext.Provider value={theme}>\n <ThemedChildren>{children}</ThemedChildren>\n </ThemeContext.Provider>\n );\n};\n"],"names":["modernThemes","darkThemes","DEFAULT_COMPONENT_THEME","isThemeModern","theme","includes","isThemeDark","getThemeClassName","useTheme","useContext","ThemeContext","useMemo","isModern","isDark","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isRootProvider","themeClass","RegExp","useEffect","document","documentElement","match","replace","classList","add","Provider","value"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wise/components-theming",
|
|
3
|
-
"version": "0.1.2-next-
|
|
3
|
+
"version": "0.1.2-next-c069b2c9bc.24+c069b2c9bc",
|
|
4
4
|
"description": "Provides theming support for the Wise Design system components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"keywords": [
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"dist/",
|
|
44
44
|
"src/"
|
|
45
45
|
],
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "c069b2c9bc3b9c88f2440a7d77dc1a49980a70c3"
|
|
47
47
|
}
|
|
@@ -31,8 +31,6 @@ describe('ThemeProvider', () => {
|
|
|
31
31
|
// The first provider will not have a className attached to it
|
|
32
32
|
expect(screen.getAllByText('light')[0]).not.toHaveClass('np-theme-light');
|
|
33
33
|
// eslint-disable-next-line testing-library/no-node-access
|
|
34
|
-
expect(screen.getAllByText('light')[0].parentElement).not.toHaveClass('np-theme-light');
|
|
35
|
-
// eslint-disable-next-line testing-library/no-node-access
|
|
36
34
|
expect(screen.getByText('personal').parentElement).toHaveClass('np-theme-personal');
|
|
37
35
|
// eslint-disable-next-line testing-library/no-node-access
|
|
38
36
|
expect(screen.getAllByText('light')[1].parentElement).toHaveClass('np-theme-light');
|
package/src/ThemeProvider.tsx
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { createContext, PropsWithChildren, useContext } from 'react';
|
|
1
|
+
import { createContext, PropsWithChildren, useContext, useEffect } from 'react';
|
|
2
2
|
|
|
3
|
-
import { ThemeScript } from './ThemeScript';
|
|
4
3
|
import { ThemedChildren } from './ThemedChildren';
|
|
5
4
|
import { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';
|
|
6
5
|
|
|
@@ -14,14 +13,24 @@ export const ThemeProvider = ({
|
|
|
14
13
|
}: ThemeProviderProps) => {
|
|
15
14
|
const isRootProvider = useContext(ThemeContext) === undefined;
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
)
|
|
24
|
-
|
|
16
|
+
// RegEx to check for `np-theme-` class name
|
|
17
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
18
|
+
const themeClass = new RegExp(/\bnp-theme-.+?\b/, 'g');
|
|
19
|
+
|
|
20
|
+
// useEffect hook used to apply the theme class to the HTML element
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
if (isRootProvider) {
|
|
23
|
+
// Remove all the theme classes from the documentElement
|
|
24
|
+
if (document.documentElement.className.match(themeClass)) {
|
|
25
|
+
document.documentElement.className = document.documentElement.className.replace(
|
|
26
|
+
themeClass,
|
|
27
|
+
'',
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
// Add the new theme class to the documentElement
|
|
31
|
+
document.documentElement.classList.add(`np-theme-${theme}`);
|
|
32
|
+
}
|
|
33
|
+
}, [isRootProvider, theme, themeClass]);
|
|
25
34
|
|
|
26
35
|
return (
|
|
27
36
|
<ThemeContext.Provider value={theme}>
|
|
@@ -2,23 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
exports[`ThemeProvider matches snapshot 1`] = `
|
|
4
4
|
<DocumentFragment>
|
|
5
|
-
<script>
|
|
6
|
-
!(function () {try {document.documentElement.classList.add('np-theme-light');} catch (e) {}})();
|
|
7
|
-
</script>
|
|
8
|
-
<div>
|
|
9
|
-
light
|
|
10
|
-
</div>
|
|
11
5
|
<div
|
|
12
|
-
class="np-theme-
|
|
6
|
+
class="np-theme-light"
|
|
13
7
|
>
|
|
14
8
|
<div>
|
|
15
|
-
|
|
9
|
+
light
|
|
16
10
|
</div>
|
|
17
11
|
<div
|
|
18
|
-
class="np-theme-
|
|
12
|
+
class="np-theme-personal"
|
|
19
13
|
>
|
|
20
14
|
<div>
|
|
21
|
-
|
|
15
|
+
personal
|
|
16
|
+
</div>
|
|
17
|
+
<div
|
|
18
|
+
class="np-theme-light"
|
|
19
|
+
>
|
|
20
|
+
<div>
|
|
21
|
+
light
|
|
22
|
+
</div>
|
|
22
23
|
</div>
|
|
23
24
|
</div>
|
|
24
25
|
</div>
|
package/src/ThemeScript.tsx
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { memo, useMemo } from 'react';
|
|
2
|
-
|
|
3
|
-
import { useTheme } from './useTheme';
|
|
4
|
-
|
|
5
|
-
export const ThemeScript = memo(
|
|
6
|
-
() => {
|
|
7
|
-
const { className } = useTheme();
|
|
8
|
-
|
|
9
|
-
const scriptSource = useMemo(() => {
|
|
10
|
-
return `!(function () {try {document.documentElement.classList.add('${className}');} catch (e) {}})();`;
|
|
11
|
-
}, [className]);
|
|
12
|
-
|
|
13
|
-
// eslint-disable-next-line react/no-danger
|
|
14
|
-
return <script dangerouslySetInnerHTML={{ __html: scriptSource }} />;
|
|
15
|
-
},
|
|
16
|
-
// Never re-render this component
|
|
17
|
-
() => true,
|
|
18
|
-
);
|