@beinformed/ui 1.43.6 → 1.43.7
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/CHANGELOG.md +7 -0
- package/esm/react-theme/createTheme.js +9 -0
- package/esm/react-theme/createTheme.js.map +1 -1
- package/lib/react-theme/__tests__/ThemeProvider.spec.js.flow +17 -2
- package/lib/react-theme/createTheme.js +9 -0
- package/lib/react-theme/createTheme.js.flow +10 -0
- package/lib/react-theme/createTheme.js.map +1 -1
- package/package.json +1 -1
- package/src/react-theme/__tests__/ThemeProvider.spec.js +17 -2
- package/src/react-theme/createTheme.js +10 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [1.43.7](https://git.beinformed.com/public/nl.beinformed.bi.layout.lib.ui/compare/v1.43.6...v1.43.7) (2024-03-18)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **settings:** merge custom settings into default settings ([29fcc31](https://git.beinformed.com/public/nl.beinformed.bi.layout.lib.ui/commit/29fcc312b70559cdd8ec52044087839e4bff91ec))
|
|
11
|
+
|
|
5
12
|
## [1.43.6](https://git.beinformed.com/public/nl.beinformed.bi.layout.lib.ui/compare/v1.43.5...v1.43.6) (2024-03-13)
|
|
6
13
|
|
|
7
14
|
|
|
@@ -19,6 +19,7 @@ const replacePlaceholders = inputTheme => {
|
|
|
19
19
|
return inputTheme;
|
|
20
20
|
};
|
|
21
21
|
const generateTheme = function (storedTheme) {
|
|
22
|
+
const storedSettings = storedTheme?.settings ?? {};
|
|
22
23
|
let generatedTheme = {
|
|
23
24
|
settings: {}
|
|
24
25
|
};
|
|
@@ -29,12 +30,20 @@ const generateTheme = function (storedTheme) {
|
|
|
29
30
|
if (typeof element === "function") {
|
|
30
31
|
generatedTheme = element(replacePlaceholders(generatedTheme));
|
|
31
32
|
} else if (isPlainObject(element)) {
|
|
33
|
+
const generatedSettings = generatedTheme.settings;
|
|
32
34
|
// $FlowFixMe[cannot-spread-indexer]
|
|
33
35
|
generatedTheme = {
|
|
34
36
|
...generatedTheme,
|
|
35
37
|
...element,
|
|
36
38
|
...storedTheme
|
|
37
39
|
};
|
|
40
|
+
if ("settings" in element) {
|
|
41
|
+
generatedTheme.settings = {
|
|
42
|
+
...generatedSettings,
|
|
43
|
+
...element.settings,
|
|
44
|
+
...storedSettings
|
|
45
|
+
};
|
|
46
|
+
}
|
|
38
47
|
}
|
|
39
48
|
}
|
|
40
49
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.js","names":["flattenDeep","isPlainObject","setSettings","replacePlaceholders","inputTheme","_context","possibleKeys","_mapInstanceProperty","_Object$keys","call","key","join","re","RegExp","_Object$entries","forEach","_ref","value","replace","match","capture","generateTheme","storedTheme","
|
|
1
|
+
{"version":3,"file":"createTheme.js","names":["flattenDeep","isPlainObject","setSettings","replacePlaceholders","inputTheme","_context","possibleKeys","_mapInstanceProperty","_Object$keys","call","key","join","re","RegExp","_Object$entries","forEach","_ref","value","replace","match","capture","generateTheme","storedTheme","storedSettings","settings","generatedTheme","_len","arguments","length","themeElements","Array","_key","element","generatedSettings","createTheme","_len2","themeConfigs","_key2","customTheme"],"sources":["../../src/react-theme/createTheme.js"],"sourcesContent":["// @flow\nimport flattenDeep from \"lodash/flattenDeep\";\n\nimport { isPlainObject } from \"../utils/helpers/objects\";\n\nimport { setSettings } from \"../constants/Settings\";\n\nimport type { Theme } from \"./types\";\n\nconst replacePlaceholders = (inputTheme: Theme) => {\n const possibleKeys = Object.keys(inputTheme)\n .map((key) => `\\\\b${key}\\\\b`)\n .join(\"|\");\n\n const re = new RegExp(`\\\\$(${possibleKeys})`, \"g\");\n Object.entries(inputTheme).forEach(([key, value]) => {\n if (key !== \"settings\" && typeof value === \"string\") {\n inputTheme[key] = value.replace(\n re,\n // $FlowIssue[incompatible-call]\n (match, capture) => inputTheme[capture],\n );\n }\n });\n\n return inputTheme;\n};\n\nconst generateTheme = (storedTheme: Theme, ...themeElements: Array<Theme>) => {\n const storedSettings = storedTheme?.settings ?? {};\n\n let generatedTheme = { settings: {} };\n for (const element of themeElements) {\n if (typeof element === \"function\") {\n generatedTheme = element(replacePlaceholders(generatedTheme));\n } else if (isPlainObject(element)) {\n const generatedSettings = generatedTheme.settings;\n // $FlowFixMe[cannot-spread-indexer]\n generatedTheme = { ...generatedTheme, ...element, ...storedTheme };\n if (\"settings\" in element) {\n generatedTheme.settings = {\n ...generatedSettings,\n ...element.settings,\n ...storedSettings,\n };\n }\n }\n }\n\n // final - replace any assignments inside the theme\n return replacePlaceholders(generatedTheme);\n};\n\n/**\n * Create a theme from multiple theme configuration objects.\n * Properties are overwriten by iterating the configuration objects from left to right.\n *\n * The first argument represents a stored theme part, this is optional. The stored theme part will overwrite every part in the collection of theme parts.\n * Thus a stored configuration is leading as it can be configured by a modeller through the repository.\n *\n * Placeholders can be used, they are replaced before calling a function theme part or at the end of the theme creation.\n *\n * Both objects and function can be used, where a function receives the previous objects as input arguments.\n * For example using the method createTheme(ThemeObject, ThemeObject2, ThemeFunction, ThemeFunction2), will be handled as:\n *\n * ThemeFunction2(ThemeFunction1({ ...ThemeObject, ...ThemeObject2 }))\n *\n * @example\n * Example where the primary color of the default theme is overwritten with a primary color of the custom theme,\n * but the button bg still uses the yiq function of the default theme:\n *\n * const DefaultTheme = {\n * PRIMARY_COLOR: \"#0000ff\",\n * SECONDARY_COLOR: \"#00ff00\",\n * BUTTON_COLOR: \"$PRIMARY_COLOR\"\n * }\n *\n * const createDefaultTheme = (input) => ({\n * ...input,\n * BUTTON_BG: getContrastYIQ(input.BUTTON_COLOR)\n * })\n *\n * const CustomTheme = {\n * PRIMARY_COLOR: \"#ff0000\"\n * }\n *\n * createTheme(null, DefaultTheme, CustomTheme, createDefaultTheme);\n *\n * // Result:\n * {\n * PRIMARY_COLOR: \"#ff0000\",\n * BUTTON_COLOR: \"#ff0000\",\n * BUTTON_BG: \"#fff\",\n * SECONDARY_COLOR: \"#00ff00\",\n * }\n */\nconst createTheme = (\n storedTheme: Theme,\n ...themeConfigs: Array<Theme | Array<Theme> | void>\n):\n | any\n | {}\n | {\n INPUT_FOCUS_BORDER_COLOR?: string,\n LINK_HOVER_COLOR?: string,\n PAGING_HOVER_COLOR?: string,\n settings?: { [settingName: string]: string },\n } => {\n const customTheme = generateTheme(storedTheme, ...flattenDeep(themeConfigs));\n\n if (customTheme) {\n setSettings(customTheme.settings);\n }\n\n return customTheme;\n};\n\nexport default createTheme;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,6 +5,10 @@ import { getContrastYIQ } from "../utils/contrast";
|
|
|
5
5
|
describe("themeProvider", () => {
|
|
6
6
|
it("tests configuration as found in ThemeProvider.js, with stored theme", () => {
|
|
7
7
|
const DefaultTheme = {
|
|
8
|
+
settings: {
|
|
9
|
+
SettingA: "ValueA",
|
|
10
|
+
SettingOVerride: "DefaultValue",
|
|
11
|
+
},
|
|
8
12
|
PRIMARY_ACCENT_COLOR: "#0d3256",
|
|
9
13
|
APPLICATION_LABEL_COLOR: "$PRIMARY_ACCENT_COLOR",
|
|
10
14
|
PRIMARY_COLOR: "#0000ff",
|
|
@@ -18,6 +22,10 @@ describe("themeProvider", () => {
|
|
|
18
22
|
});
|
|
19
23
|
|
|
20
24
|
const CustomThemeFromRepo = {
|
|
25
|
+
settings: {
|
|
26
|
+
SettingB: "ValueB",
|
|
27
|
+
SettingOVerride: "CustomValue",
|
|
28
|
+
},
|
|
21
29
|
BRAND_COLOR: "green",
|
|
22
30
|
APPLICATION_LABEL_COLOR: "$BRAND_COLOR",
|
|
23
31
|
PRIMARY_COLOR: "red",
|
|
@@ -29,7 +37,11 @@ describe("themeProvider", () => {
|
|
|
29
37
|
]);
|
|
30
38
|
|
|
31
39
|
expect(theme).toStrictEqual({
|
|
32
|
-
settings: {
|
|
40
|
+
settings: {
|
|
41
|
+
SettingA: "ValueA",
|
|
42
|
+
SettingB: "ValueB",
|
|
43
|
+
SettingOVerride: "CustomValue",
|
|
44
|
+
},
|
|
33
45
|
APPLICATION_LABEL_COLOR: "green",
|
|
34
46
|
BRAND_COLOR: "green",
|
|
35
47
|
BUTTON_BG: "#fff",
|
|
@@ -42,6 +54,9 @@ describe("themeProvider", () => {
|
|
|
42
54
|
|
|
43
55
|
it("tests configuration as found in ThemeProvider.js, without stored theme", () => {
|
|
44
56
|
const DefaultTheme = {
|
|
57
|
+
settings: {
|
|
58
|
+
SettingA: "ValueA",
|
|
59
|
+
},
|
|
45
60
|
PRIMARY_ACCENT_COLOR: "#0d3256",
|
|
46
61
|
APPLICATION_LABEL_COLOR: "$PRIMARY_ACCENT_COLOR",
|
|
47
62
|
PRIMARY_COLOR: "#0000ff",
|
|
@@ -57,7 +72,7 @@ describe("themeProvider", () => {
|
|
|
57
72
|
const theme = createTheme(void 0, [DefaultTheme, createDefaultTheme]);
|
|
58
73
|
|
|
59
74
|
expect(theme).toStrictEqual({
|
|
60
|
-
settings: {},
|
|
75
|
+
settings: { SettingA: "ValueA" },
|
|
61
76
|
APPLICATION_LABEL_COLOR: "#0d3256",
|
|
62
77
|
BUTTON_BG: "#fff",
|
|
63
78
|
BUTTON_COLOR: "#0000ff",
|
|
@@ -26,6 +26,7 @@ const replacePlaceholders = inputTheme => {
|
|
|
26
26
|
return inputTheme;
|
|
27
27
|
};
|
|
28
28
|
const generateTheme = function (storedTheme) {
|
|
29
|
+
const storedSettings = storedTheme?.settings ?? {};
|
|
29
30
|
let generatedTheme = {
|
|
30
31
|
settings: {}
|
|
31
32
|
};
|
|
@@ -36,12 +37,20 @@ const generateTheme = function (storedTheme) {
|
|
|
36
37
|
if (typeof element === "function") {
|
|
37
38
|
generatedTheme = element(replacePlaceholders(generatedTheme));
|
|
38
39
|
} else if ((0, _objects.isPlainObject)(element)) {
|
|
40
|
+
const generatedSettings = generatedTheme.settings;
|
|
39
41
|
// $FlowFixMe[cannot-spread-indexer]
|
|
40
42
|
generatedTheme = {
|
|
41
43
|
...generatedTheme,
|
|
42
44
|
...element,
|
|
43
45
|
...storedTheme
|
|
44
46
|
};
|
|
47
|
+
if ("settings" in element) {
|
|
48
|
+
generatedTheme.settings = {
|
|
49
|
+
...generatedSettings,
|
|
50
|
+
...element.settings,
|
|
51
|
+
...storedSettings
|
|
52
|
+
};
|
|
53
|
+
}
|
|
45
54
|
}
|
|
46
55
|
}
|
|
47
56
|
|
|
@@ -27,13 +27,23 @@ const replacePlaceholders = (inputTheme: Theme) => {
|
|
|
27
27
|
};
|
|
28
28
|
|
|
29
29
|
const generateTheme = (storedTheme: Theme, ...themeElements: Array<Theme>) => {
|
|
30
|
+
const storedSettings = storedTheme?.settings ?? {};
|
|
31
|
+
|
|
30
32
|
let generatedTheme = { settings: {} };
|
|
31
33
|
for (const element of themeElements) {
|
|
32
34
|
if (typeof element === "function") {
|
|
33
35
|
generatedTheme = element(replacePlaceholders(generatedTheme));
|
|
34
36
|
} else if (isPlainObject(element)) {
|
|
37
|
+
const generatedSettings = generatedTheme.settings;
|
|
35
38
|
// $FlowFixMe[cannot-spread-indexer]
|
|
36
39
|
generatedTheme = { ...generatedTheme, ...element, ...storedTheme };
|
|
40
|
+
if ("settings" in element) {
|
|
41
|
+
generatedTheme.settings = {
|
|
42
|
+
...generatedSettings,
|
|
43
|
+
...element.settings,
|
|
44
|
+
...storedSettings,
|
|
45
|
+
};
|
|
46
|
+
}
|
|
37
47
|
}
|
|
38
48
|
}
|
|
39
49
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.js","names":["_flattenDeep","_interopRequireDefault","require","_objects","_Settings","replacePlaceholders","inputTheme","_context","possibleKeys","_map","default","_keys","call","key","join","re","RegExp","_entries","forEach","_ref","value","replace","match","capture","generateTheme","storedTheme","
|
|
1
|
+
{"version":3,"file":"createTheme.js","names":["_flattenDeep","_interopRequireDefault","require","_objects","_Settings","replacePlaceholders","inputTheme","_context","possibleKeys","_map","default","_keys","call","key","join","re","RegExp","_entries","forEach","_ref","value","replace","match","capture","generateTheme","storedTheme","storedSettings","settings","generatedTheme","_len","arguments","length","themeElements","Array","_key","element","isPlainObject","generatedSettings","createTheme","_len2","themeConfigs","_key2","customTheme","flattenDeep","setSettings","_default","exports"],"sources":["../../src/react-theme/createTheme.js"],"sourcesContent":["// @flow\nimport flattenDeep from \"lodash/flattenDeep\";\n\nimport { isPlainObject } from \"../utils/helpers/objects\";\n\nimport { setSettings } from \"../constants/Settings\";\n\nimport type { Theme } from \"./types\";\n\nconst replacePlaceholders = (inputTheme: Theme) => {\n const possibleKeys = Object.keys(inputTheme)\n .map((key) => `\\\\b${key}\\\\b`)\n .join(\"|\");\n\n const re = new RegExp(`\\\\$(${possibleKeys})`, \"g\");\n Object.entries(inputTheme).forEach(([key, value]) => {\n if (key !== \"settings\" && typeof value === \"string\") {\n inputTheme[key] = value.replace(\n re,\n // $FlowIssue[incompatible-call]\n (match, capture) => inputTheme[capture],\n );\n }\n });\n\n return inputTheme;\n};\n\nconst generateTheme = (storedTheme: Theme, ...themeElements: Array<Theme>) => {\n const storedSettings = storedTheme?.settings ?? {};\n\n let generatedTheme = { settings: {} };\n for (const element of themeElements) {\n if (typeof element === \"function\") {\n generatedTheme = element(replacePlaceholders(generatedTheme));\n } else if (isPlainObject(element)) {\n const generatedSettings = generatedTheme.settings;\n // $FlowFixMe[cannot-spread-indexer]\n generatedTheme = { ...generatedTheme, ...element, ...storedTheme };\n if (\"settings\" in element) {\n generatedTheme.settings = {\n ...generatedSettings,\n ...element.settings,\n ...storedSettings,\n };\n }\n }\n }\n\n // final - replace any assignments inside the theme\n return replacePlaceholders(generatedTheme);\n};\n\n/**\n * Create a theme from multiple theme configuration objects.\n * Properties are overwriten by iterating the configuration objects from left to right.\n *\n * The first argument represents a stored theme part, this is optional. The stored theme part will overwrite every part in the collection of theme parts.\n * Thus a stored configuration is leading as it can be configured by a modeller through the repository.\n *\n * Placeholders can be used, they are replaced before calling a function theme part or at the end of the theme creation.\n *\n * Both objects and function can be used, where a function receives the previous objects as input arguments.\n * For example using the method createTheme(ThemeObject, ThemeObject2, ThemeFunction, ThemeFunction2), will be handled as:\n *\n * ThemeFunction2(ThemeFunction1({ ...ThemeObject, ...ThemeObject2 }))\n *\n * @example\n * Example where the primary color of the default theme is overwritten with a primary color of the custom theme,\n * but the button bg still uses the yiq function of the default theme:\n *\n * const DefaultTheme = {\n * PRIMARY_COLOR: \"#0000ff\",\n * SECONDARY_COLOR: \"#00ff00\",\n * BUTTON_COLOR: \"$PRIMARY_COLOR\"\n * }\n *\n * const createDefaultTheme = (input) => ({\n * ...input,\n * BUTTON_BG: getContrastYIQ(input.BUTTON_COLOR)\n * })\n *\n * const CustomTheme = {\n * PRIMARY_COLOR: \"#ff0000\"\n * }\n *\n * createTheme(null, DefaultTheme, CustomTheme, createDefaultTheme);\n *\n * // Result:\n * {\n * PRIMARY_COLOR: \"#ff0000\",\n * BUTTON_COLOR: \"#ff0000\",\n * BUTTON_BG: \"#fff\",\n * SECONDARY_COLOR: \"#00ff00\",\n * }\n */\nconst createTheme = (\n storedTheme: Theme,\n ...themeConfigs: Array<Theme | Array<Theme> | void>\n):\n | any\n | {}\n | {\n INPUT_FOCUS_BORDER_COLOR?: string,\n LINK_HOVER_COLOR?: string,\n PAGING_HOVER_COLOR?: string,\n settings?: { [settingName: string]: string },\n } => {\n const customTheme = generateTheme(storedTheme, ...flattenDeep(themeConfigs));\n\n if (customTheme) {\n setSettings(customTheme.settings);\n }\n\n return customTheme;\n};\n\nexport default createTheme;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -5,6 +5,10 @@ import { getContrastYIQ } from "../utils/contrast";
|
|
|
5
5
|
describe("themeProvider", () => {
|
|
6
6
|
it("tests configuration as found in ThemeProvider.js, with stored theme", () => {
|
|
7
7
|
const DefaultTheme = {
|
|
8
|
+
settings: {
|
|
9
|
+
SettingA: "ValueA",
|
|
10
|
+
SettingOVerride: "DefaultValue",
|
|
11
|
+
},
|
|
8
12
|
PRIMARY_ACCENT_COLOR: "#0d3256",
|
|
9
13
|
APPLICATION_LABEL_COLOR: "$PRIMARY_ACCENT_COLOR",
|
|
10
14
|
PRIMARY_COLOR: "#0000ff",
|
|
@@ -18,6 +22,10 @@ describe("themeProvider", () => {
|
|
|
18
22
|
});
|
|
19
23
|
|
|
20
24
|
const CustomThemeFromRepo = {
|
|
25
|
+
settings: {
|
|
26
|
+
SettingB: "ValueB",
|
|
27
|
+
SettingOVerride: "CustomValue",
|
|
28
|
+
},
|
|
21
29
|
BRAND_COLOR: "green",
|
|
22
30
|
APPLICATION_LABEL_COLOR: "$BRAND_COLOR",
|
|
23
31
|
PRIMARY_COLOR: "red",
|
|
@@ -29,7 +37,11 @@ describe("themeProvider", () => {
|
|
|
29
37
|
]);
|
|
30
38
|
|
|
31
39
|
expect(theme).toStrictEqual({
|
|
32
|
-
settings: {
|
|
40
|
+
settings: {
|
|
41
|
+
SettingA: "ValueA",
|
|
42
|
+
SettingB: "ValueB",
|
|
43
|
+
SettingOVerride: "CustomValue",
|
|
44
|
+
},
|
|
33
45
|
APPLICATION_LABEL_COLOR: "green",
|
|
34
46
|
BRAND_COLOR: "green",
|
|
35
47
|
BUTTON_BG: "#fff",
|
|
@@ -42,6 +54,9 @@ describe("themeProvider", () => {
|
|
|
42
54
|
|
|
43
55
|
it("tests configuration as found in ThemeProvider.js, without stored theme", () => {
|
|
44
56
|
const DefaultTheme = {
|
|
57
|
+
settings: {
|
|
58
|
+
SettingA: "ValueA",
|
|
59
|
+
},
|
|
45
60
|
PRIMARY_ACCENT_COLOR: "#0d3256",
|
|
46
61
|
APPLICATION_LABEL_COLOR: "$PRIMARY_ACCENT_COLOR",
|
|
47
62
|
PRIMARY_COLOR: "#0000ff",
|
|
@@ -57,7 +72,7 @@ describe("themeProvider", () => {
|
|
|
57
72
|
const theme = createTheme(void 0, [DefaultTheme, createDefaultTheme]);
|
|
58
73
|
|
|
59
74
|
expect(theme).toStrictEqual({
|
|
60
|
-
settings: {},
|
|
75
|
+
settings: { SettingA: "ValueA" },
|
|
61
76
|
APPLICATION_LABEL_COLOR: "#0d3256",
|
|
62
77
|
BUTTON_BG: "#fff",
|
|
63
78
|
BUTTON_COLOR: "#0000ff",
|
|
@@ -27,13 +27,23 @@ const replacePlaceholders = (inputTheme: Theme) => {
|
|
|
27
27
|
};
|
|
28
28
|
|
|
29
29
|
const generateTheme = (storedTheme: Theme, ...themeElements: Array<Theme>) => {
|
|
30
|
+
const storedSettings = storedTheme?.settings ?? {};
|
|
31
|
+
|
|
30
32
|
let generatedTheme = { settings: {} };
|
|
31
33
|
for (const element of themeElements) {
|
|
32
34
|
if (typeof element === "function") {
|
|
33
35
|
generatedTheme = element(replacePlaceholders(generatedTheme));
|
|
34
36
|
} else if (isPlainObject(element)) {
|
|
37
|
+
const generatedSettings = generatedTheme.settings;
|
|
35
38
|
// $FlowFixMe[cannot-spread-indexer]
|
|
36
39
|
generatedTheme = { ...generatedTheme, ...element, ...storedTheme };
|
|
40
|
+
if ("settings" in element) {
|
|
41
|
+
generatedTheme.settings = {
|
|
42
|
+
...generatedSettings,
|
|
43
|
+
...element.settings,
|
|
44
|
+
...storedSettings,
|
|
45
|
+
};
|
|
46
|
+
}
|
|
37
47
|
}
|
|
38
48
|
}
|
|
39
49
|
|