@mirohq/design-system-theme-provider 0.2.21 → 0.3.0
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/main.js +23 -2
- package/dist/main.js.map +1 -1
- package/dist/module.js +24 -3
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +5 -1
- package/package.json +4 -4
package/dist/main.js
CHANGED
|
@@ -3,13 +3,15 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var react = require('react');
|
|
6
7
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
7
8
|
var designSystemUseTheme = require('@mirohq/design-system-use-theme');
|
|
8
9
|
|
|
9
10
|
const ThemeProvider = ({
|
|
10
11
|
defaultTheme,
|
|
11
12
|
themes,
|
|
12
|
-
children
|
|
13
|
+
children,
|
|
14
|
+
root = false
|
|
13
15
|
}) => {
|
|
14
16
|
let themeToUse = "";
|
|
15
17
|
const { theme } = designSystemUseTheme.useTheme();
|
|
@@ -27,11 +29,30 @@ const ThemeProvider = ({
|
|
|
27
29
|
if (currentThemeExists) {
|
|
28
30
|
themeToUse = theme;
|
|
29
31
|
}
|
|
30
|
-
const classNameTheme = (currentThemeExists || defaultThemeExists) && themeToUse !== "" ? designSystemStitches.createTheme(themes[themeToUse]) : "";
|
|
32
|
+
const classNameTheme = (currentThemeExists || defaultThemeExists) && themeToUse !== "" ? designSystemStitches.createTheme(themes[themeToUse]).className : "";
|
|
33
|
+
const classThemeRef = react.useRef(classNameTheme);
|
|
34
|
+
react.useEffect(() => {
|
|
35
|
+
if (classThemeRef.current !== classNameTheme) {
|
|
36
|
+
if (root && classThemeRef.current !== "") {
|
|
37
|
+
document.body.classList.remove(classThemeRef.current);
|
|
38
|
+
}
|
|
39
|
+
classThemeRef.current = classNameTheme;
|
|
40
|
+
}
|
|
41
|
+
if (root) {
|
|
42
|
+
if (classNameTheme !== "") {
|
|
43
|
+
document.body.classList.add(classNameTheme);
|
|
44
|
+
}
|
|
45
|
+
document.body.dataset.theme = themeToUse;
|
|
46
|
+
}
|
|
47
|
+
}, [classNameTheme, root, themeToUse]);
|
|
48
|
+
if (root) {
|
|
49
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
|
|
50
|
+
}
|
|
31
51
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
32
52
|
"div",
|
|
33
53
|
{
|
|
34
54
|
"data-theme-provider": true,
|
|
55
|
+
"data-theme": theme === "" ? void 0 : theme,
|
|
35
56
|
className: "".concat(designSystemStitches.stitchesCssRoot.className, " ").concat(classNameTheme),
|
|
36
57
|
children
|
|
37
58
|
}
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/theme-provider.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/theme-provider.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { createTheme, stitchesCssRoot } from '@mirohq/design-system-stitches'\nimport { useTheme } from '@mirohq/design-system-use-theme'\nimport type { Theme } from '@mirohq/design-system-themes'\n\ninterface ThemesProp {\n [Key: string]: Partial<Theme>\n}\n\nexport interface ThemeProviderProps<Themes extends ThemesProp = ThemesProp> {\n /**\n * The default theme to use if no theme is provided.\n */\n defaultTheme?: keyof Themes\n\n /**\n * Theme config for all available themes.\n */\n themes?: Themes\n\n /**\n * Applies theme className to the body.\n */\n root?: boolean\n}\n\nexport const ThemeProvider = <Themes extends ThemesProp = ThemesProp>({\n defaultTheme,\n themes,\n children,\n root = false,\n}: PropsWithChildren<ThemeProviderProps<Themes>>): JSX.Element => {\n let themeToUse = ''\n const { theme } = useTheme()\n\n const defaultThemeExists =\n defaultTheme !== undefined && themes?.[defaultTheme] !== undefined\n\n const currentThemeExists = theme != null && themes?.[theme] !== undefined\n\n if (!currentThemeExists && defaultThemeExists) {\n console.warn('Set theme not found, setting the default theme.')\n themeToUse = defaultTheme.toString()\n }\n\n if (!defaultThemeExists && theme == null) {\n console.warn(\n 'Default theme not found, falling back to the Miro Design System basics.'\n )\n }\n\n if (currentThemeExists) {\n themeToUse = theme\n }\n\n const classNameTheme =\n (currentThemeExists || defaultThemeExists) && themeToUse !== ''\n ? createTheme(themes[themeToUse]).className\n : ''\n\n const classThemeRef = useRef<string>(classNameTheme)\n\n useEffect(() => {\n if (classThemeRef.current !== classNameTheme) {\n if (root && classThemeRef.current !== '') {\n document.body.classList.remove(classThemeRef.current)\n }\n\n classThemeRef.current = classNameTheme\n }\n\n if (root) {\n if (classNameTheme !== '') {\n document.body.classList.add(classNameTheme)\n }\n\n document.body.dataset.theme = themeToUse\n }\n }, [classNameTheme, root, themeToUse])\n\n if (root) {\n return <>{children}</>\n }\n\n return (\n <div\n data-theme-provider\n data-theme={theme === '' ? undefined : theme}\n className={`${stitchesCssRoot.className} ${classNameTheme}`}\n >\n {children}\n </div>\n )\n}\n"],"names":["useTheme","createTheme","useRef","useEffect","jsx","stitchesCssRoot"],"mappings":";;;;;;;;;AA2BO,MAAM,gBAAgB,CAAyC;AAAA,EACpE,YAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAO,GAAA,KAAA;AACT,CAAkE,KAAA;AAChE,EAAA,IAAI,UAAa,GAAA,EAAA,CAAA;AACjB,EAAM,MAAA,EAAE,KAAM,EAAA,GAAIA,6BAAS,EAAA,CAAA;AAE3B,EAAA,MAAM,kBACJ,GAAA,YAAA,KAAiB,KAAa,CAAA,IAAA,CAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAS,YAAkB,CAAA,MAAA,KAAA,CAAA,CAAA;AAE3D,EAAA,MAAM,kBAAqB,GAAA,KAAA,IAAS,IAAQ,IAAA,CAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAS,KAAW,CAAA,MAAA,KAAA,CAAA,CAAA;AAEhE,EAAI,IAAA,CAAC,sBAAsB,kBAAoB,EAAA;AAC7C,IAAA,OAAA,CAAQ,KAAK,iDAAiD,CAAA,CAAA;AAC9D,IAAA,UAAA,GAAa,aAAa,QAAS,EAAA,CAAA;AAAA,GACrC;AAEA,EAAI,IAAA,CAAC,kBAAsB,IAAA,KAAA,IAAS,IAAM,EAAA;AACxC,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN,yEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAA,IAAI,kBAAoB,EAAA;AACtB,IAAa,UAAA,GAAA,KAAA,CAAA;AAAA,GACf;AAEA,EAAM,MAAA,cAAA,GAAA,CACH,kBAAsB,IAAA,kBAAA,KAAuB,UAAe,KAAA,EAAA,GACzDC,iCAAY,MAAO,CAAA,UAAU,CAAC,CAAA,CAAE,SAChC,GAAA,EAAA,CAAA;AAEN,EAAM,MAAA,aAAA,GAAgBC,aAAe,cAAc,CAAA,CAAA;AAEnD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,aAAA,CAAc,YAAY,cAAgB,EAAA;AAC5C,MAAI,IAAA,IAAA,IAAQ,aAAc,CAAA,OAAA,KAAY,EAAI,EAAA;AACxC,QAAA,QAAA,CAAS,IAAK,CAAA,SAAA,CAAU,MAAO,CAAA,aAAA,CAAc,OAAO,CAAA,CAAA;AAAA,OACtD;AAEA,MAAA,aAAA,CAAc,OAAU,GAAA,cAAA,CAAA;AAAA,KAC1B;AAEA,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,IAAI,mBAAmB,EAAI,EAAA;AACzB,QAAS,QAAA,CAAA,IAAA,CAAK,SAAU,CAAA,GAAA,CAAI,cAAc,CAAA,CAAA;AAAA,OAC5C;AAEA,MAAS,QAAA,CAAA,IAAA,CAAK,QAAQ,KAAQ,GAAA,UAAA,CAAA;AAAA,KAChC;AAAA,GACC,EAAA,CAAC,cAAgB,EAAA,IAAA,EAAM,UAAU,CAAC,CAAA,CAAA;AAErC,EAAA,IAAI,IAAM,EAAA;AACR,IAAA,6DAAU,QAAS,EAAA,CAAA,CAAA;AAAA,GACrB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,qBAAmB,EAAA,IAAA;AAAA,MACnB,YAAA,EAAY,KAAU,KAAA,EAAA,GAAK,KAAY,CAAA,GAAA,KAAA;AAAA,MACvC,SAAW,EAAA,EAAA,CAAG,MAAgB,CAAAC,oCAAA,CAAA,SAAA,EAAS,GAAI,CAAA,CAAA,MAAA,CAAA,cAAA,CAAA;AAAA,MAE1C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
1
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { useRef, useEffect } from 'react';
|
|
2
3
|
import { createTheme, stitchesCssRoot } from '@mirohq/design-system-stitches';
|
|
3
4
|
import { useTheme } from '@mirohq/design-system-use-theme';
|
|
4
5
|
|
|
5
6
|
const ThemeProvider = ({
|
|
6
7
|
defaultTheme,
|
|
7
8
|
themes,
|
|
8
|
-
children
|
|
9
|
+
children,
|
|
10
|
+
root = false
|
|
9
11
|
}) => {
|
|
10
12
|
let themeToUse = "";
|
|
11
13
|
const { theme } = useTheme();
|
|
@@ -23,11 +25,30 @@ const ThemeProvider = ({
|
|
|
23
25
|
if (currentThemeExists) {
|
|
24
26
|
themeToUse = theme;
|
|
25
27
|
}
|
|
26
|
-
const classNameTheme = (currentThemeExists || defaultThemeExists) && themeToUse !== "" ? createTheme(themes[themeToUse]) : "";
|
|
28
|
+
const classNameTheme = (currentThemeExists || defaultThemeExists) && themeToUse !== "" ? createTheme(themes[themeToUse]).className : "";
|
|
29
|
+
const classThemeRef = useRef(classNameTheme);
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (classThemeRef.current !== classNameTheme) {
|
|
32
|
+
if (root && classThemeRef.current !== "") {
|
|
33
|
+
document.body.classList.remove(classThemeRef.current);
|
|
34
|
+
}
|
|
35
|
+
classThemeRef.current = classNameTheme;
|
|
36
|
+
}
|
|
37
|
+
if (root) {
|
|
38
|
+
if (classNameTheme !== "") {
|
|
39
|
+
document.body.classList.add(classNameTheme);
|
|
40
|
+
}
|
|
41
|
+
document.body.dataset.theme = themeToUse;
|
|
42
|
+
}
|
|
43
|
+
}, [classNameTheme, root, themeToUse]);
|
|
44
|
+
if (root) {
|
|
45
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
46
|
+
}
|
|
27
47
|
return /* @__PURE__ */ jsx(
|
|
28
48
|
"div",
|
|
29
49
|
{
|
|
30
50
|
"data-theme-provider": true,
|
|
51
|
+
"data-theme": theme === "" ? void 0 : theme,
|
|
31
52
|
className: "".concat(stitchesCssRoot.className, " ").concat(classNameTheme),
|
|
32
53
|
children
|
|
33
54
|
}
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/theme-provider.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/theme-provider.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { createTheme, stitchesCssRoot } from '@mirohq/design-system-stitches'\nimport { useTheme } from '@mirohq/design-system-use-theme'\nimport type { Theme } from '@mirohq/design-system-themes'\n\ninterface ThemesProp {\n [Key: string]: Partial<Theme>\n}\n\nexport interface ThemeProviderProps<Themes extends ThemesProp = ThemesProp> {\n /**\n * The default theme to use if no theme is provided.\n */\n defaultTheme?: keyof Themes\n\n /**\n * Theme config for all available themes.\n */\n themes?: Themes\n\n /**\n * Applies theme className to the body.\n */\n root?: boolean\n}\n\nexport const ThemeProvider = <Themes extends ThemesProp = ThemesProp>({\n defaultTheme,\n themes,\n children,\n root = false,\n}: PropsWithChildren<ThemeProviderProps<Themes>>): JSX.Element => {\n let themeToUse = ''\n const { theme } = useTheme()\n\n const defaultThemeExists =\n defaultTheme !== undefined && themes?.[defaultTheme] !== undefined\n\n const currentThemeExists = theme != null && themes?.[theme] !== undefined\n\n if (!currentThemeExists && defaultThemeExists) {\n console.warn('Set theme not found, setting the default theme.')\n themeToUse = defaultTheme.toString()\n }\n\n if (!defaultThemeExists && theme == null) {\n console.warn(\n 'Default theme not found, falling back to the Miro Design System basics.'\n )\n }\n\n if (currentThemeExists) {\n themeToUse = theme\n }\n\n const classNameTheme =\n (currentThemeExists || defaultThemeExists) && themeToUse !== ''\n ? createTheme(themes[themeToUse]).className\n : ''\n\n const classThemeRef = useRef<string>(classNameTheme)\n\n useEffect(() => {\n if (classThemeRef.current !== classNameTheme) {\n if (root && classThemeRef.current !== '') {\n document.body.classList.remove(classThemeRef.current)\n }\n\n classThemeRef.current = classNameTheme\n }\n\n if (root) {\n if (classNameTheme !== '') {\n document.body.classList.add(classNameTheme)\n }\n\n document.body.dataset.theme = themeToUse\n }\n }, [classNameTheme, root, themeToUse])\n\n if (root) {\n return <>{children}</>\n }\n\n return (\n <div\n data-theme-provider\n data-theme={theme === '' ? undefined : theme}\n className={`${stitchesCssRoot.className} ${classNameTheme}`}\n >\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;AA2BO,MAAM,gBAAgB,CAAyC;AAAA,EACpE,YAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAO,GAAA,KAAA;AACT,CAAkE,KAAA;AAChE,EAAA,IAAI,UAAa,GAAA,EAAA,CAAA;AACjB,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,QAAS,EAAA,CAAA;AAE3B,EAAA,MAAM,kBACJ,GAAA,YAAA,KAAiB,KAAa,CAAA,IAAA,CAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAS,YAAkB,CAAA,MAAA,KAAA,CAAA,CAAA;AAE3D,EAAA,MAAM,kBAAqB,GAAA,KAAA,IAAS,IAAQ,IAAA,CAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAS,KAAW,CAAA,MAAA,KAAA,CAAA,CAAA;AAEhE,EAAI,IAAA,CAAC,sBAAsB,kBAAoB,EAAA;AAC7C,IAAA,OAAA,CAAQ,KAAK,iDAAiD,CAAA,CAAA;AAC9D,IAAA,UAAA,GAAa,aAAa,QAAS,EAAA,CAAA;AAAA,GACrC;AAEA,EAAI,IAAA,CAAC,kBAAsB,IAAA,KAAA,IAAS,IAAM,EAAA;AACxC,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN,yEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAA,IAAI,kBAAoB,EAAA;AACtB,IAAa,UAAA,GAAA,KAAA,CAAA;AAAA,GACf;AAEA,EAAM,MAAA,cAAA,GAAA,CACH,kBAAsB,IAAA,kBAAA,KAAuB,UAAe,KAAA,EAAA,GACzD,YAAY,MAAO,CAAA,UAAU,CAAC,CAAA,CAAE,SAChC,GAAA,EAAA,CAAA;AAEN,EAAM,MAAA,aAAA,GAAgB,OAAe,cAAc,CAAA,CAAA;AAEnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,aAAA,CAAc,YAAY,cAAgB,EAAA;AAC5C,MAAI,IAAA,IAAA,IAAQ,aAAc,CAAA,OAAA,KAAY,EAAI,EAAA;AACxC,QAAA,QAAA,CAAS,IAAK,CAAA,SAAA,CAAU,MAAO,CAAA,aAAA,CAAc,OAAO,CAAA,CAAA;AAAA,OACtD;AAEA,MAAA,aAAA,CAAc,OAAU,GAAA,cAAA,CAAA;AAAA,KAC1B;AAEA,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,IAAI,mBAAmB,EAAI,EAAA;AACzB,QAAS,QAAA,CAAA,IAAA,CAAK,SAAU,CAAA,GAAA,CAAI,cAAc,CAAA,CAAA;AAAA,OAC5C;AAEA,MAAS,QAAA,CAAA,IAAA,CAAK,QAAQ,KAAQ,GAAA,UAAA,CAAA;AAAA,KAChC;AAAA,GACC,EAAA,CAAC,cAAgB,EAAA,IAAA,EAAM,UAAU,CAAC,CAAA,CAAA;AAErC,EAAA,IAAI,IAAM,EAAA;AACR,IAAA,uCAAU,QAAS,EAAA,CAAA,CAAA;AAAA,GACrB;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,qBAAmB,EAAA,IAAA;AAAA,MACnB,YAAA,EAAY,KAAU,KAAA,EAAA,GAAK,KAAY,CAAA,GAAA,KAAA;AAAA,MACvC,SAAW,EAAA,EAAA,CAAG,MAAgB,CAAA,eAAA,CAAA,SAAA,EAAS,GAAI,CAAA,CAAA,MAAA,CAAA,cAAA,CAAA;AAAA,MAE1C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -13,7 +13,11 @@ interface ThemeProviderProps<Themes extends ThemesProp = ThemesProp> {
|
|
|
13
13
|
* Theme config for all available themes.
|
|
14
14
|
*/
|
|
15
15
|
themes?: Themes;
|
|
16
|
+
/**
|
|
17
|
+
* Applies theme className to the body.
|
|
18
|
+
*/
|
|
19
|
+
root?: boolean;
|
|
16
20
|
}
|
|
17
|
-
declare const ThemeProvider: <Themes extends ThemesProp = ThemesProp>({ defaultTheme, themes, children, }: PropsWithChildren<ThemeProviderProps<Themes>>) => JSX.Element;
|
|
21
|
+
declare const ThemeProvider: <Themes extends ThemesProp = ThemesProp>({ defaultTheme, themes, children, root, }: PropsWithChildren<ThemeProviderProps<Themes>>) => JSX.Element;
|
|
18
22
|
|
|
19
23
|
export { ThemeProvider, ThemeProviderProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-theme-provider",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"author": "Miro",
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
"react": "^16.14 || ^17 || ^18"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@mirohq/design-system-stitches": "^2.3.
|
|
29
|
-
"@mirohq/design-system-
|
|
28
|
+
"@mirohq/design-system-stitches": "^2.3.10",
|
|
29
|
+
"@mirohq/design-system-use-theme": "^0.2.10",
|
|
30
30
|
"@mirohq/design-system-types": "^0.6.2",
|
|
31
|
-
"@mirohq/design-system-
|
|
31
|
+
"@mirohq/design-system-themes": "^0.4.0"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
34
34
|
"build": "rollup -c ../../../rollup.config.js",
|