@os-design/theming-tools 1.0.1 → 1.0.4
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 +1 -1
- package/dist/cjs/utils/color.js +1 -1
- package/dist/cjs/utils/createThemeOverrider.js +10 -6
- package/dist/cjs/utils/createThemeOverrider.js.map +1 -1
- package/dist/cjs/utils/createThemeProvider.js +8 -4
- package/dist/cjs/utils/createThemeProvider.js.map +1 -1
- package/dist/cjs/utils/createUseTheme.js +2 -2
- package/dist/esm/utils/createThemeOverrider.js +10 -8
- package/dist/esm/utils/createThemeOverrider.js.map +1 -1
- package/dist/esm/utils/createThemeProvider.js +14 -12
- package/dist/esm/utils/createThemeProvider.js.map +1 -1
- package/dist/types/utils/createThemeOverrider.d.ts +1 -0
- package/dist/types/utils/createThemeOverrider.d.ts.map +1 -1
- package/dist/types/utils/createThemeProvider.d.ts +1 -0
- package/dist/types/utils/createThemeProvider.d.ts.map +1 -1
- package/package.json +4 -4
package/dist/cjs/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
package/dist/cjs/utils/color.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
7
|
|
|
8
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
8
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* Converts a color to string.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -19,13 +19,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
19
19
|
|
|
20
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
21
|
|
|
22
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
22
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
23
23
|
|
|
24
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
24
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
25
|
|
|
26
26
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
27
27
|
|
|
28
28
|
function createThemeOverrider(TC, useTheme) {
|
|
29
|
+
// eslint-disable-next-line func-names
|
|
29
30
|
return function (_ref) {
|
|
30
31
|
var activeTheme = _ref.activeTheme,
|
|
31
32
|
_ref$overrides = _ref.overrides,
|
|
@@ -48,13 +49,16 @@ function createThemeOverrider(TC, useTheme) {
|
|
|
48
49
|
var localTheme = (0, _react.useMemo)(function () {
|
|
49
50
|
return (0, _overrideTheme["default"])(themes[localActiveTheme], localOverrides);
|
|
50
51
|
}, [themes, localActiveTheme, localOverrides]);
|
|
51
|
-
|
|
52
|
-
|
|
52
|
+
var contextValue = (0, _react.useMemo)(function () {
|
|
53
|
+
return {
|
|
53
54
|
themes: themes,
|
|
54
55
|
overrides: localOverrides,
|
|
55
56
|
activeTheme: localActiveTheme,
|
|
56
57
|
setActiveTheme: setActiveTheme
|
|
57
|
-
}
|
|
58
|
+
};
|
|
59
|
+
}, [localActiveTheme, localOverrides, setActiveTheme, themes]);
|
|
60
|
+
return /*#__PURE__*/_react["default"].createElement(TC.Provider, {
|
|
61
|
+
value: contextValue
|
|
58
62
|
}, /*#__PURE__*/_react["default"].createElement(_react2.ThemeProvider, {
|
|
59
63
|
theme: localTheme
|
|
60
64
|
}, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/createThemeOverrider.tsx"],"names":["createThemeOverrider","TC","useTheme","activeTheme","overrides","children","themes","parentTheme","theme","parentOverrides","parentActiveTheme","setActiveTheme","localActiveTheme","localOverrides","localTheme"],"mappings":";;;;;;;;;AAAA;;AACA;;AAGA;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/createThemeOverrider.tsx"],"names":["createThemeOverrider","TC","useTheme","activeTheme","overrides","children","themes","parentTheme","theme","parentOverrides","parentActiveTheme","setActiveTheme","localActiveTheme","localOverrides","localTheme","contextValue"],"mappings":";;;;;;;;;AAAA;;AACA;;AAGA;;;;;;;;;;;;;;AAsBA,SAASA,oBAAT,CACEC,EADF,EAEEC,QAFF,EAGqB;AACnB;AACA,SAAO,gBAAqD;AAAA,QAAzCC,WAAyC,QAAzCA,WAAyC;AAAA,8BAA5BC,SAA4B;AAAA,QAA5BA,SAA4B,+BAAhB,EAAgB;AAAA,QAAZC,QAAY,QAAZA,QAAY;;AAC1D,oBAMIH,QAAQ,EANZ;AAAA,QACEI,MADF,aACEA,MADF;AAAA,QAESC,WAFT,aAEEC,KAFF;AAAA,QAGaC,eAHb,aAGEL,SAHF;AAAA,QAIeM,iBAJf,aAIEP,WAJF;AAAA,QAKEQ,cALF,aAKEA,cALF;;AAQA,QAAMC,gBAAgB,GAAGT,WAAW,IAAIO,iBAAxC,CAT0D,CAW1D;;AACA,QAAMG,cAAc,GAAG,oBACrB;AAAA,6CACMV,WAAW,GAAG,EAAH,GAAQM,eADzB,GAEM,OAAOL,SAAP,KAAqB,UAArB,GACCA,SAAD,CAAwBG,WAAxB,CADA,GAEAH,SAJN;AAAA,KADqB,EAOrB,CAACD,WAAD,EAAcM,eAAd,EAA+BL,SAA/B,EAA0CG,WAA1C,CAPqB,CAAvB,CAZ0D,CAsB1D;;AACA,QAAMO,UAAU,GAAG,oBACjB;AAAA,aAAM,+BAAcR,MAAM,CAACM,gBAAD,CAApB,EAAwCC,cAAxC,CAAN;AAAA,KADiB,EAEjB,CAACP,MAAD,EAASM,gBAAT,EAA2BC,cAA3B,CAFiB,CAAnB;AAKA,QAAME,YAAY,GAAG,oBACnB;AAAA,aAAO;AACLT,QAAAA,MAAM,EAANA,MADK;AAELF,QAAAA,SAAS,EAAES,cAFN;AAGLV,QAAAA,WAAW,EAAES,gBAHR;AAILD,QAAAA,cAAc,EAAdA;AAJK,OAAP;AAAA,KADmB,EAOnB,CAACC,gBAAD,EAAmBC,cAAnB,EAAmCF,cAAnC,EAAmDL,MAAnD,CAPmB,CAArB;AAUA,wBACE,gCAAC,EAAD,CAAI,QAAJ;AAAa,MAAA,KAAK,EAAES;AAApB,oBACE,gCAAC,qBAAD;AAAsB,MAAA,KAAK,EAAED;AAA7B,OACGT,QADH,CADF,CADF;AAOD,GA7CD;AA8CD;;eAEcL,oB","sourcesContent":["import React, { useMemo } from 'react';\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react';\nimport { ThemeContext, ThemeMap } from './createThemeContext';\nimport { UseTheme } from './createUseTheme';\nimport overrideTheme from './overrideTheme';\n\nexport interface ThemeOverriderProps<T> {\n /**\n * The active theme of children.\n * @default undefined\n */\n activeTheme?: keyof ThemeMap<T>;\n /**\n * Overrides the active theme parameters.\n * @default undefined\n */\n overrides?: Partial<T> | ((theme: T) => Partial<T>);\n /**\n * The children.\n * @default undefined\n */\n children?: React.ReactNode;\n}\n\nexport type ThemeOverrider<T> = React.FC<ThemeOverriderProps<T>>;\n\nfunction createThemeOverrider<T>(\n TC: ThemeContext<T>,\n useTheme: UseTheme<T>\n): ThemeOverrider<T> {\n // eslint-disable-next-line func-names\n return function ({ activeTheme, overrides = {}, children }) {\n const {\n themes,\n theme: parentTheme,\n overrides: parentOverrides,\n activeTheme: parentActiveTheme,\n setActiveTheme,\n } = useTheme();\n\n const localActiveTheme = activeTheme || parentActiveTheme;\n\n // Parents overrides are ignored if the active theme was specified\n const localOverrides = useMemo<Partial<T>>(\n () => ({\n ...(activeTheme ? {} : parentOverrides),\n ...(typeof overrides === 'function'\n ? (overrides as Function)(parentTheme)\n : overrides),\n }),\n [activeTheme, parentOverrides, overrides, parentTheme]\n );\n\n // Make the local theme\n const localTheme = useMemo<T>(\n () => overrideTheme(themes[localActiveTheme], localOverrides),\n [themes, localActiveTheme, localOverrides]\n );\n\n const contextValue = useMemo(\n () => ({\n themes,\n overrides: localOverrides,\n activeTheme: localActiveTheme,\n setActiveTheme,\n }),\n [localActiveTheme, localOverrides, setActiveTheme, themes]\n );\n\n return (\n <TC.Provider value={contextValue}>\n <EmotionThemeProvider theme={localTheme}>\n {children}\n </EmotionThemeProvider>\n </TC.Provider>\n );\n };\n}\n\nexport default createThemeOverrider;\n"],"file":"createThemeOverrider.js"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -38,6 +38,7 @@ function createThemeProvider(TC, defaultThemes) {
|
|
|
38
38
|
},
|
|
39
39
|
setItem: function setItem() {}
|
|
40
40
|
};
|
|
41
|
+
// eslint-disable-next-line func-names
|
|
41
42
|
return function (_ref) {
|
|
42
43
|
var _ref$themes = _ref.themes,
|
|
43
44
|
themes = _ref$themes === void 0 ? defaultThemes : _ref$themes,
|
|
@@ -82,8 +83,8 @@ function createThemeProvider(TC, defaultThemes) {
|
|
|
82
83
|
|
|
83
84
|
getSavedTheme();
|
|
84
85
|
}, [storageKey, themes]);
|
|
85
|
-
|
|
86
|
-
|
|
86
|
+
var contextValue = (0, _react.useMemo)(function () {
|
|
87
|
+
return {
|
|
87
88
|
themes: themes,
|
|
88
89
|
overrides: {},
|
|
89
90
|
activeTheme: activeTheme,
|
|
@@ -92,7 +93,10 @@ function createThemeProvider(TC, defaultThemes) {
|
|
|
92
93
|
|
|
93
94
|
localStorage.setItem(storageKey, name);
|
|
94
95
|
}
|
|
95
|
-
}
|
|
96
|
+
};
|
|
97
|
+
}, [activeTheme, storageKey, themes]);
|
|
98
|
+
return /*#__PURE__*/_react["default"].createElement(TC.Provider, {
|
|
99
|
+
value: contextValue
|
|
96
100
|
}, /*#__PURE__*/_react["default"].createElement(_react2.ThemeProvider, {
|
|
97
101
|
theme: themes[activeTheme]
|
|
98
102
|
}, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/createThemeProvider.tsx"],"names":["createThemeProvider","TC","defaultThemes","localStorage","getItem","setItem","themes","initialTheme","storageKey","children","activeTheme","setActiveTheme","getSavedTheme","saved","overrides","name"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/createThemeProvider.tsx"],"names":["createThemeProvider","TC","defaultThemes","localStorage","getItem","setItem","themes","initialTheme","storageKey","children","activeTheme","setActiveTheme","getSavedTheme","saved","contextValue","overrides","name"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAASA,mBAAT,CACEC,EADF,EAEEC,aAFF,EAOoB;AAAA,MAJlBC,YAIkB,uEAJW;AAC3BC,IAAAA,OAAO,EAAE;AAAA,aAAM,IAAN;AAAA,KADkB;AAE3BC,IAAAA,OAAO,EAAE,mBAAM,CAAE;AAFU,GAIX;AAClB;AACA,SAAO,gBAKJ;AAAA,2BAJDC,MAIC;AAAA,QAJDA,MAIC,4BAJQJ,aAIR;AAAA,iCAHDK,YAGC;AAAA,QAHDA,YAGC,kCAHc,OAGd;AAAA,+BAFDC,UAEC;AAAA,QAFDA,UAEC,gCAFY,OAEZ;AAAA,QADDC,QACC,QADDA,QACC;;AACD,oBAAsC,qBACpCH,MAAM,CAACC,YAAD,CAAN,GAAuBA,YAAvB,GAAsC,OADF,CAAtC;AAAA;AAAA,QAAOG,WAAP;AAAA,QAAoBC,eAApB;;AAIA,0BAAU,YAAM;AACd,UAAMC,aAAa;AAAA,4EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBACAT,YAAY,CAACC,OAAb,CAAqBI,UAArB,CADA;;AAAA;AACdK,kBAAAA,KADc;AAEpB,sBAAIA,KAAK,IAAIP,MAAM,CAACO,KAAD,CAAnB,EAA4BF,eAAc,CAACE,KAAD,CAAd;;AAFR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAH;;AAAA,wBAAbD,aAAa;AAAA;AAAA;AAAA,SAAnB;;AAIAA,MAAAA,aAAa;AACd,KAND,EAMG,CAACJ,UAAD,EAAaF,MAAb,CANH;AAQA,QAAMQ,YAAY,GAAG,oBACnB;AAAA,aAAO;AACLR,QAAAA,MAAM,EAANA,MADK;AAELS,QAAAA,SAAS,EAAE,EAFN;AAGLL,QAAAA,WAAW,EAAXA,WAHK;AAILC,QAAAA,cAAc,EAAE,wBAACK,IAAD,EAAU;AACxBL,UAAAA,eAAc,CAACK,IAAD,CAAd;;AACAb,UAAAA,YAAY,CAACE,OAAb,CAAqBG,UAArB,EAAiCQ,IAAjC;AACD;AAPI,OAAP;AAAA,KADmB,EAUnB,CAACN,WAAD,EAAcF,UAAd,EAA0BF,MAA1B,CAVmB,CAArB;AAaA,wBACE,gCAAC,EAAD,CAAI,QAAJ;AAAa,MAAA,KAAK,EAAEQ;AAApB,oBACE,gCAAC,qBAAD;AAAsB,MAAA,KAAK,EAAER,MAAM,CAACI,WAAD;AAAnC,OACGD,QADH,CADF,CADF;AAOD,GAtCD;AAuCD;;eAEcT,mB","sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react';\nimport { ThemeContext, ThemeMap } from './createThemeContext';\n\nexport interface ThemeProviderProps<T> {\n /**\n * Available themes.\n * @default undefined\n */\n themes?: ThemeMap<T>;\n /**\n * The theme used by default.\n * @default light\n */\n initialTheme?: 'light' | 'dark' | string;\n /**\n * The key in the local storage where the active theme is saved.\n * @default theme\n */\n storageKey?: string;\n /**\n * The children.\n * @default undefined\n */\n children?: React.ReactNode;\n}\n\nexport type ThemeProvider<T> = React.FC<ThemeProviderProps<T>>;\n\nexport interface LocalStorage {\n getItem: (key: string) => string | null | Promise<string | null>;\n setItem: (key: string, value: string) => void | Promise<void>;\n}\n\nfunction createThemeProvider<T>(\n TC: ThemeContext<T>,\n defaultThemes: ThemeMap<T>,\n localStorage: LocalStorage = {\n getItem: () => null,\n setItem: () => {},\n }\n): ThemeProvider<T> {\n // eslint-disable-next-line func-names\n return function ({\n themes = defaultThemes,\n initialTheme = 'light',\n storageKey = 'theme',\n children,\n }) {\n const [activeTheme, setActiveTheme] = useState(\n themes[initialTheme] ? initialTheme : 'light'\n );\n\n useEffect(() => {\n const getSavedTheme = async () => {\n const saved = await localStorage.getItem(storageKey);\n if (saved && themes[saved]) setActiveTheme(saved);\n };\n getSavedTheme();\n }, [storageKey, themes]);\n\n const contextValue = useMemo(\n () => ({\n themes,\n overrides: {},\n activeTheme,\n setActiveTheme: (name) => {\n setActiveTheme(name);\n localStorage.setItem(storageKey, name);\n },\n }),\n [activeTheme, storageKey, themes]\n );\n\n return (\n <TC.Provider value={contextValue}>\n <EmotionThemeProvider theme={themes[activeTheme]}>\n {children}\n </EmotionThemeProvider>\n </TC.Provider>\n );\n };\n}\n\nexport default createThemeProvider;\n"],"file":"createThemeProvider.js"}
|
|
@@ -11,9 +11,9 @@ var _overrideTheme = _interopRequireDefault(require("./overrideTheme"));
|
|
|
11
11
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
13
|
|
|
14
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
14
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
15
15
|
|
|
16
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
16
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
17
17
|
|
|
18
18
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
19
19
|
|
|
@@ -3,11 +3,12 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
|
|
|
3
3
|
import overrideTheme from './overrideTheme';
|
|
4
4
|
|
|
5
5
|
function createThemeOverrider(TC, useTheme) {
|
|
6
|
-
|
|
6
|
+
// eslint-disable-next-line func-names
|
|
7
|
+
return function ({
|
|
7
8
|
activeTheme,
|
|
8
9
|
overrides = {},
|
|
9
10
|
children
|
|
10
|
-
})
|
|
11
|
+
}) {
|
|
11
12
|
const {
|
|
12
13
|
themes,
|
|
13
14
|
theme: parentTheme,
|
|
@@ -22,13 +23,14 @@ function createThemeOverrider(TC, useTheme) {
|
|
|
22
23
|
}), [activeTheme, parentOverrides, overrides, parentTheme]); // Make the local theme
|
|
23
24
|
|
|
24
25
|
const localTheme = useMemo(() => overrideTheme(themes[localActiveTheme], localOverrides), [themes, localActiveTheme, localOverrides]);
|
|
26
|
+
const contextValue = useMemo(() => ({
|
|
27
|
+
themes,
|
|
28
|
+
overrides: localOverrides,
|
|
29
|
+
activeTheme: localActiveTheme,
|
|
30
|
+
setActiveTheme
|
|
31
|
+
}), [localActiveTheme, localOverrides, setActiveTheme, themes]);
|
|
25
32
|
return /*#__PURE__*/React.createElement(TC.Provider, {
|
|
26
|
-
value:
|
|
27
|
-
themes,
|
|
28
|
-
overrides: localOverrides,
|
|
29
|
-
activeTheme: localActiveTheme,
|
|
30
|
-
setActiveTheme
|
|
31
|
-
}
|
|
33
|
+
value: contextValue
|
|
32
34
|
}, /*#__PURE__*/React.createElement(EmotionThemeProvider, {
|
|
33
35
|
theme: localTheme
|
|
34
36
|
}, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/createThemeOverrider.tsx"],"names":["React","useMemo","ThemeProvider","EmotionThemeProvider","overrideTheme","createThemeOverrider","TC","useTheme","activeTheme","overrides","children","themes","theme","parentTheme","parentOverrides","parentActiveTheme","setActiveTheme","localActiveTheme","localOverrides","localTheme"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AACA,SAASC,aAAa,IAAIC,oBAA1B,QAAsD,gBAAtD;AAGA,OAAOC,aAAP,MAA0B,iBAA1B;;
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/createThemeOverrider.tsx"],"names":["React","useMemo","ThemeProvider","EmotionThemeProvider","overrideTheme","createThemeOverrider","TC","useTheme","activeTheme","overrides","children","themes","theme","parentTheme","parentOverrides","parentActiveTheme","setActiveTheme","localActiveTheme","localOverrides","localTheme","contextValue"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AACA,SAASC,aAAa,IAAIC,oBAA1B,QAAsD,gBAAtD;AAGA,OAAOC,aAAP,MAA0B,iBAA1B;;AAsBA,SAASC,oBAAT,CACEC,EADF,EAEEC,QAFF,EAGqB;AACnB;AACA,SAAO,UAAU;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,SAAS,GAAG,EAA3B;AAA+BC,IAAAA;AAA/B,GAAV,EAAqD;AAC1D,UAAM;AACJC,MAAAA,MADI;AAEJC,MAAAA,KAAK,EAAEC,WAFH;AAGJJ,MAAAA,SAAS,EAAEK,eAHP;AAIJN,MAAAA,WAAW,EAAEO,iBAJT;AAKJC,MAAAA;AALI,QAMFT,QAAQ,EANZ;AAQA,UAAMU,gBAAgB,GAAGT,WAAW,IAAIO,iBAAxC,CAT0D,CAW1D;;AACA,UAAMG,cAAc,GAAGjB,OAAO,CAC5B,OAAO,EACL,IAAIO,WAAW,GAAG,EAAH,GAAQM,eAAvB,CADK;AAEL,UAAI,OAAOL,SAAP,KAAqB,UAArB,GACCA,SAAD,CAAwBI,WAAxB,CADA,GAEAJ,SAFJ;AAFK,KAAP,CAD4B,EAO5B,CAACD,WAAD,EAAcM,eAAd,EAA+BL,SAA/B,EAA0CI,WAA1C,CAP4B,CAA9B,CAZ0D,CAsB1D;;AACA,UAAMM,UAAU,GAAGlB,OAAO,CACxB,MAAMG,aAAa,CAACO,MAAM,CAACM,gBAAD,CAAP,EAA2BC,cAA3B,CADK,EAExB,CAACP,MAAD,EAASM,gBAAT,EAA2BC,cAA3B,CAFwB,CAA1B;AAKA,UAAME,YAAY,GAAGnB,OAAO,CAC1B,OAAO;AACLU,MAAAA,MADK;AAELF,MAAAA,SAAS,EAAES,cAFN;AAGLV,MAAAA,WAAW,EAAES,gBAHR;AAILD,MAAAA;AAJK,KAAP,CAD0B,EAO1B,CAACC,gBAAD,EAAmBC,cAAnB,EAAmCF,cAAnC,EAAmDL,MAAnD,CAP0B,CAA5B;AAUA,wBACE,oBAAC,EAAD,CAAI,QAAJ;AAAa,MAAA,KAAK,EAAES;AAApB,oBACE,oBAAC,oBAAD;AAAsB,MAAA,KAAK,EAAED;AAA7B,OACGT,QADH,CADF,CADF;AAOD,GA7CD;AA8CD;;AAED,eAAeL,oBAAf","sourcesContent":["import React, { useMemo } from 'react';\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react';\nimport { ThemeContext, ThemeMap } from './createThemeContext';\nimport { UseTheme } from './createUseTheme';\nimport overrideTheme from './overrideTheme';\n\nexport interface ThemeOverriderProps<T> {\n /**\n * The active theme of children.\n * @default undefined\n */\n activeTheme?: keyof ThemeMap<T>;\n /**\n * Overrides the active theme parameters.\n * @default undefined\n */\n overrides?: Partial<T> | ((theme: T) => Partial<T>);\n /**\n * The children.\n * @default undefined\n */\n children?: React.ReactNode;\n}\n\nexport type ThemeOverrider<T> = React.FC<ThemeOverriderProps<T>>;\n\nfunction createThemeOverrider<T>(\n TC: ThemeContext<T>,\n useTheme: UseTheme<T>\n): ThemeOverrider<T> {\n // eslint-disable-next-line func-names\n return function ({ activeTheme, overrides = {}, children }) {\n const {\n themes,\n theme: parentTheme,\n overrides: parentOverrides,\n activeTheme: parentActiveTheme,\n setActiveTheme,\n } = useTheme();\n\n const localActiveTheme = activeTheme || parentActiveTheme;\n\n // Parents overrides are ignored if the active theme was specified\n const localOverrides = useMemo<Partial<T>>(\n () => ({\n ...(activeTheme ? {} : parentOverrides),\n ...(typeof overrides === 'function'\n ? (overrides as Function)(parentTheme)\n : overrides),\n }),\n [activeTheme, parentOverrides, overrides, parentTheme]\n );\n\n // Make the local theme\n const localTheme = useMemo<T>(\n () => overrideTheme(themes[localActiveTheme], localOverrides),\n [themes, localActiveTheme, localOverrides]\n );\n\n const contextValue = useMemo(\n () => ({\n themes,\n overrides: localOverrides,\n activeTheme: localActiveTheme,\n setActiveTheme,\n }),\n [localActiveTheme, localOverrides, setActiveTheme, themes]\n );\n\n return (\n <TC.Provider value={contextValue}>\n <EmotionThemeProvider theme={localTheme}>\n {children}\n </EmotionThemeProvider>\n </TC.Provider>\n );\n };\n}\n\nexport default createThemeOverrider;\n"],"file":"createThemeOverrider.js"}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
|
-
import React, { useEffect, useState } from 'react';
|
|
1
|
+
import React, { useEffect, useMemo, useState } from 'react';
|
|
2
2
|
import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
|
|
3
3
|
|
|
4
4
|
function createThemeProvider(TC, defaultThemes, localStorage = {
|
|
5
5
|
getItem: () => null,
|
|
6
6
|
setItem: () => {}
|
|
7
7
|
}) {
|
|
8
|
-
|
|
8
|
+
// eslint-disable-next-line func-names
|
|
9
|
+
return function ({
|
|
9
10
|
themes = defaultThemes,
|
|
10
11
|
initialTheme = 'light',
|
|
11
12
|
storageKey = 'theme',
|
|
12
13
|
children
|
|
13
|
-
})
|
|
14
|
+
}) {
|
|
14
15
|
const [activeTheme, setActiveTheme] = useState(themes[initialTheme] ? initialTheme : 'light');
|
|
15
16
|
useEffect(() => {
|
|
16
17
|
const getSavedTheme = async () => {
|
|
@@ -20,16 +21,17 @@ function createThemeProvider(TC, defaultThemes, localStorage = {
|
|
|
20
21
|
|
|
21
22
|
getSavedTheme();
|
|
22
23
|
}, [storageKey, themes]);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
setActiveTheme
|
|
29
|
-
|
|
30
|
-
localStorage.setItem(storageKey, name);
|
|
31
|
-
}
|
|
24
|
+
const contextValue = useMemo(() => ({
|
|
25
|
+
themes,
|
|
26
|
+
overrides: {},
|
|
27
|
+
activeTheme,
|
|
28
|
+
setActiveTheme: name => {
|
|
29
|
+
setActiveTheme(name);
|
|
30
|
+
localStorage.setItem(storageKey, name);
|
|
32
31
|
}
|
|
32
|
+
}), [activeTheme, storageKey, themes]);
|
|
33
|
+
return /*#__PURE__*/React.createElement(TC.Provider, {
|
|
34
|
+
value: contextValue
|
|
33
35
|
}, /*#__PURE__*/React.createElement(EmotionThemeProvider, {
|
|
34
36
|
theme: themes[activeTheme]
|
|
35
37
|
}, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/createThemeProvider.tsx"],"names":["React","useEffect","useState","ThemeProvider","EmotionThemeProvider","createThemeProvider","TC","defaultThemes","localStorage","getItem","setItem","themes","initialTheme","storageKey","children","activeTheme","setActiveTheme","getSavedTheme","saved","overrides","name"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/createThemeProvider.tsx"],"names":["React","useEffect","useMemo","useState","ThemeProvider","EmotionThemeProvider","createThemeProvider","TC","defaultThemes","localStorage","getItem","setItem","themes","initialTheme","storageKey","children","activeTheme","setActiveTheme","getSavedTheme","saved","contextValue","overrides","name"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,OAA3B,EAAoCC,QAApC,QAAoD,OAApD;AACA,SAASC,aAAa,IAAIC,oBAA1B,QAAsD,gBAAtD;;AAiCA,SAASC,mBAAT,CACEC,EADF,EAEEC,aAFF,EAGEC,YAA0B,GAAG;AAC3BC,EAAAA,OAAO,EAAE,MAAM,IADY;AAE3BC,EAAAA,OAAO,EAAE,MAAM,CAAE;AAFU,CAH/B,EAOoB;AAClB;AACA,SAAO,UAAU;AACfC,IAAAA,MAAM,GAAGJ,aADM;AAEfK,IAAAA,YAAY,GAAG,OAFA;AAGfC,IAAAA,UAAU,GAAG,OAHE;AAIfC,IAAAA;AAJe,GAAV,EAKJ;AACD,UAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCd,QAAQ,CAC5CS,MAAM,CAACC,YAAD,CAAN,GAAuBA,YAAvB,GAAsC,OADM,CAA9C;AAIAZ,IAAAA,SAAS,CAAC,MAAM;AACd,YAAMiB,aAAa,GAAG,YAAY;AAChC,cAAMC,KAAK,GAAG,MAAMV,YAAY,CAACC,OAAb,CAAqBI,UAArB,CAApB;AACA,YAAIK,KAAK,IAAIP,MAAM,CAACO,KAAD,CAAnB,EAA4BF,cAAc,CAACE,KAAD,CAAd;AAC7B,OAHD;;AAIAD,MAAAA,aAAa;AACd,KANQ,EAMN,CAACJ,UAAD,EAAaF,MAAb,CANM,CAAT;AAQA,UAAMQ,YAAY,GAAGlB,OAAO,CAC1B,OAAO;AACLU,MAAAA,MADK;AAELS,MAAAA,SAAS,EAAE,EAFN;AAGLL,MAAAA,WAHK;AAILC,MAAAA,cAAc,EAAGK,IAAD,IAAU;AACxBL,QAAAA,cAAc,CAACK,IAAD,CAAd;AACAb,QAAAA,YAAY,CAACE,OAAb,CAAqBG,UAArB,EAAiCQ,IAAjC;AACD;AAPI,KAAP,CAD0B,EAU1B,CAACN,WAAD,EAAcF,UAAd,EAA0BF,MAA1B,CAV0B,CAA5B;AAaA,wBACE,oBAAC,EAAD,CAAI,QAAJ;AAAa,MAAA,KAAK,EAAEQ;AAApB,oBACE,oBAAC,oBAAD;AAAsB,MAAA,KAAK,EAAER,MAAM,CAACI,WAAD;AAAnC,OACGD,QADH,CADF,CADF;AAOD,GAtCD;AAuCD;;AAED,eAAeT,mBAAf","sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react';\nimport { ThemeContext, ThemeMap } from './createThemeContext';\n\nexport interface ThemeProviderProps<T> {\n /**\n * Available themes.\n * @default undefined\n */\n themes?: ThemeMap<T>;\n /**\n * The theme used by default.\n * @default light\n */\n initialTheme?: 'light' | 'dark' | string;\n /**\n * The key in the local storage where the active theme is saved.\n * @default theme\n */\n storageKey?: string;\n /**\n * The children.\n * @default undefined\n */\n children?: React.ReactNode;\n}\n\nexport type ThemeProvider<T> = React.FC<ThemeProviderProps<T>>;\n\nexport interface LocalStorage {\n getItem: (key: string) => string | null | Promise<string | null>;\n setItem: (key: string, value: string) => void | Promise<void>;\n}\n\nfunction createThemeProvider<T>(\n TC: ThemeContext<T>,\n defaultThemes: ThemeMap<T>,\n localStorage: LocalStorage = {\n getItem: () => null,\n setItem: () => {},\n }\n): ThemeProvider<T> {\n // eslint-disable-next-line func-names\n return function ({\n themes = defaultThemes,\n initialTheme = 'light',\n storageKey = 'theme',\n children,\n }) {\n const [activeTheme, setActiveTheme] = useState(\n themes[initialTheme] ? initialTheme : 'light'\n );\n\n useEffect(() => {\n const getSavedTheme = async () => {\n const saved = await localStorage.getItem(storageKey);\n if (saved && themes[saved]) setActiveTheme(saved);\n };\n getSavedTheme();\n }, [storageKey, themes]);\n\n const contextValue = useMemo(\n () => ({\n themes,\n overrides: {},\n activeTheme,\n setActiveTheme: (name) => {\n setActiveTheme(name);\n localStorage.setItem(storageKey, name);\n },\n }),\n [activeTheme, storageKey, themes]\n );\n\n return (\n <TC.Provider value={contextValue}>\n <EmotionThemeProvider theme={themes[activeTheme]}>\n {children}\n </EmotionThemeProvider>\n </TC.Provider>\n );\n };\n}\n\nexport default createThemeProvider;\n"],"file":"createThemeProvider.js"}
|
|
@@ -4,6 +4,7 @@ import { UseTheme } from './createUseTheme';
|
|
|
4
4
|
export interface ThemeOverriderProps<T> {
|
|
5
5
|
activeTheme?: keyof ThemeMap<T>;
|
|
6
6
|
overrides?: Partial<T> | ((theme: T) => Partial<T>);
|
|
7
|
+
children?: React.ReactNode;
|
|
7
8
|
}
|
|
8
9
|
export declare type ThemeOverrider<T> = React.FC<ThemeOverriderProps<T>>;
|
|
9
10
|
declare function createThemeOverrider<T>(TC: ThemeContext<T>, useTheme: UseTheme<T>): ThemeOverrider<T>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createThemeOverrider.d.ts","sourceRoot":"","sources":["../../../src/utils/createThemeOverrider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,MAAM,WAAW,mBAAmB,CAAC,CAAC;IAKpC,WAAW,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC,CAAC;IAKhC,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"createThemeOverrider.d.ts","sourceRoot":"","sources":["../../../src/utils/createThemeOverrider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,MAAM,WAAW,mBAAmB,CAAC,CAAC;IAKpC,WAAW,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC,CAAC;IAKhC,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IAKpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,oBAAY,cAAc,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEjE,iBAAS,oBAAoB,CAAC,CAAC,EAC7B,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,EACnB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GACpB,cAAc,CAAC,CAAC,CAAC,CAgDnB;AAED,eAAe,oBAAoB,CAAC"}
|
|
@@ -4,6 +4,7 @@ export interface ThemeProviderProps<T> {
|
|
|
4
4
|
themes?: ThemeMap<T>;
|
|
5
5
|
initialTheme?: 'light' | 'dark' | string;
|
|
6
6
|
storageKey?: string;
|
|
7
|
+
children?: React.ReactNode;
|
|
7
8
|
}
|
|
8
9
|
export declare type ThemeProvider<T> = React.FC<ThemeProviderProps<T>>;
|
|
9
10
|
export interface LocalStorage {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/utils/createThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"createThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/utils/createThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,WAAW,kBAAkB,CAAC,CAAC;IAKnC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAKrB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAKzC,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,oBAAY,aAAa,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACjE,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/D;AAED,iBAAS,mBAAmB,CAAC,CAAC,EAC5B,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,EACnB,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,EAC1B,YAAY,GAAE,YAGb,GACA,aAAa,CAAC,CAAC,CAAC,CAyClB;AAED,eAAe,mBAAmB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/theming-tools",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/cjs --source-maps",
|
|
23
23
|
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
|
|
24
24
|
"build": "yarn clean && npm-run-all build:*",
|
|
25
|
-
"ncu": "
|
|
25
|
+
"ncu": "ncu -u"
|
|
26
26
|
},
|
|
27
27
|
"publishConfig": {
|
|
28
28
|
"access": "public"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"@emotion/react": ">=11",
|
|
35
|
-
"react": ">=
|
|
35
|
+
"react": ">=18"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "990fa0eb8e38bbb94ebea1ba0c825574ff11fe5e"
|
|
38
38
|
}
|