@xylabs/sdk-react 2.7.4 → 2.7.5

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/README.md CHANGED
@@ -4,11 +4,11 @@
4
4
 
5
5
  [![main-build][]][main-build-link]
6
6
  [![beta-build][]][beta-build-link]
7
- [![npm-badge]][npm-link]
8
- [![bch-badge]][bch-link]
9
- [![codacy-badge]][codacy-link]
10
- [![codeclimate-badge]][codeclimate-link]
11
- [![snyk-badge]][snyk-link]
7
+ [![npm-badge][]][npm-link]
8
+ [![bch-badge][]][bch-link]
9
+ [![codacy-badge][]][codacy-link]
10
+ [![codeclimate-badge][]][codeclimate-link]
11
+ [![snyk-badge][]][snyk-link]
12
12
 
13
13
  > XY Labs generalized React library
14
14
 
@@ -28,19 +28,39 @@ Common React code that is used throughtout XYO projects that use React.
28
28
 
29
29
  Using npm:
30
30
 
31
- ```
32
- $ npm i --save @xylabs/sdk-react
31
+ ```sh
32
+ npm i --save @xylabs/sdk-react
33
33
  ```
34
34
 
35
35
  Using yarn:
36
36
 
37
+ ```sh
38
+ yarn add @xylabs/sdk-react
39
+ ```
40
+
41
+ ## Scripts
42
+
43
+ See [ts-scripts](https://github.com/xylabs/ts-scripts/blob/main/README.md) for list of shared scripts. The below scripts are custom scripts for this repo.
44
+
45
+ ### Build (Storybook)
46
+
47
+ Build the static Storkbook site
48
+
49
+ ```sh
50
+ yarn build-storybook
37
51
  ```
38
- $ yarn add @xylabs/sdk-react
52
+
53
+ ### Start
54
+
55
+ Starts the project in the browser for testing, with auto reload using Storybook
56
+
57
+ ```sh
58
+ yarn start
39
59
  ```
40
60
 
41
61
  ## Maintainers
42
62
 
43
- - [Arie Trouw](https://github.com/arietrouw) (https://arietrouw.com)
63
+ - [Arie Trouw](https://github.com/arietrouw) [arietrouw.com](https://arietrouw.com)
44
64
 
45
65
  ## License
46
66
 
@@ -1 +1 @@
1
- {"version":3,"file":"InvertableThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/components/InvertableThemeProvider/InvertableThemeProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAE7E,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAgCnE,CAAA;AAED,OAAO,EAAE,uBAAuB,EAAE,CAAA"}
1
+ {"version":3,"file":"InvertableThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/components/InvertableThemeProvider/InvertableThemeProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAE7E,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAsCnE,CAAA;AAED,OAAO,EAAE,uBAAuB,EAAE,CAAA"}
@@ -4,23 +4,22 @@ import { createTheme } from '@mui/material/styles';
4
4
  import clone from 'lodash/clone';
5
5
  import { useContext } from 'react';
6
6
  import { InvertableThemeContext } from './InvertableThemeContext';
7
- const InvertableThemeProvider = (props) => {
8
- var _a;
7
+ const InvertableThemeProvider = ({ options, children, dark, scoped = false, invert = false, noResponsiveFonts, }) => {
8
+ var _a, _b;
9
9
  const contextInvertableTheme = useContext(InvertableThemeContext);
10
- const { children, dark, scoped = false, invert = false, noResponsiveFonts } = props;
11
- const { options = clone(contextInvertableTheme.options) } = props;
12
- options.palette = (_a = options.palette) !== null && _a !== void 0 ? _a : {};
10
+ const clonedOptions = clone((_a = options !== null && options !== void 0 ? options : contextInvertableTheme.options) !== null && _a !== void 0 ? _a : {});
11
+ clonedOptions.palette = (_b = clonedOptions.palette) !== null && _b !== void 0 ? _b : {};
13
12
  if (invert) {
14
- options.palette.mode = options.palette.mode === 'dark' ? 'light' : 'dark';
13
+ clonedOptions.palette.mode = clonedOptions.palette.mode === 'dark' ? 'light' : 'dark';
15
14
  }
16
15
  if (dark !== undefined) {
17
- options.palette.mode = dark ? 'dark' : 'light';
16
+ clonedOptions.palette.mode = dark ? 'dark' : 'light';
18
17
  }
19
- let theme = createTheme(options);
18
+ let theme = createTheme(clonedOptions);
20
19
  if (!noResponsiveFonts) {
21
20
  theme = responsiveFontSizes(theme);
22
21
  }
23
- return scoped ? (_jsx(ScopedCssBaseline, { children: _jsx(InvertableThemeContext.Provider, Object.assign({ value: { options } }, { children: _jsx(ThemeProvider, Object.assign({ theme: theme }, { children: children }), void 0) }), void 0) }, void 0)) : (_jsx(InvertableThemeContext.Provider, Object.assign({ value: { options } }, { children: _jsx(ThemeProvider, Object.assign({ theme: theme }, { children: children }), void 0) }), void 0));
22
+ return scoped ? (_jsx(ScopedCssBaseline, { children: _jsx(InvertableThemeContext.Provider, Object.assign({ value: { options: clonedOptions } }, { children: _jsx(ThemeProvider, Object.assign({ theme: theme }, { children: children }), void 0) }), void 0) }, void 0)) : (_jsx(InvertableThemeContext.Provider, Object.assign({ value: { options: clonedOptions } }, { children: _jsx(ThemeProvider, Object.assign({ theme: theme }, { children: children }), void 0) }), void 0));
24
23
  };
25
24
  export { InvertableThemeProvider };
26
25
  //# sourceMappingURL=InvertableThemeProvider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"InvertableThemeProvider.js","sourceRoot":"","sources":["../../../src/components/InvertableThemeProvider/InvertableThemeProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,OAAO,KAAK,MAAM,cAAc,CAAA;AAChC,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAGjE,MAAM,uBAAuB,GAA2C,CAAC,KAAK,EAAE,EAAE;;IAChF,MAAM,sBAAsB,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAA;IACjE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAA;IACnF,MAAM,EAAE,OAAO,GAAG,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE,GAAG,KAAK,CAAA;IAEjE,OAAO,CAAC,OAAO,GAAG,MAAA,OAAO,CAAC,OAAO,mCAAI,EAAE,CAAA;IAEvC,IAAI,MAAM,EAAE;QACV,OAAO,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAA;KAC1E;IAED,IAAI,IAAI,KAAK,SAAS,EAAE;QACtB,OAAO,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;KAC/C;IAED,IAAI,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,CAAA;IAEhC,IAAI,CAAC,iBAAiB,EAAE;QACtB,KAAK,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAA;KACnC;IAED,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,KAAC,iBAAiB,cAChB,KAAC,sBAAsB,CAAC,QAAQ,kBAAC,KAAK,EAAE,EAAE,OAAO,EAAE,gBACjD,KAAC,aAAa,kBAAC,KAAK,EAAE,KAAK,gBAAG,QAAQ,YAAiB,YACvB,WAChB,CACrB,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,CAAC,QAAQ,kBAAC,KAAK,EAAE,EAAE,OAAO,EAAE,gBACjD,KAAC,aAAa,kBAAC,KAAK,EAAE,KAAK,gBAAG,QAAQ,YAAiB,YACvB,CACnC,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,uBAAuB,EAAE,CAAA"}
1
+ {"version":3,"file":"InvertableThemeProvider.js","sourceRoot":"","sources":["../../../src/components/InvertableThemeProvider/InvertableThemeProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,OAAO,KAAK,MAAM,cAAc,CAAA;AAChC,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAGjE,MAAM,uBAAuB,GAA2C,CAAC,EACvE,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,MAAM,GAAG,KAAK,EACd,MAAM,GAAG,KAAK,EACd,iBAAiB,GAClB,EAAE,EAAE;;IACH,MAAM,sBAAsB,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAA;IACjE,MAAM,aAAa,GAAG,KAAK,CAAC,MAAA,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,sBAAsB,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAA;IAE5E,aAAa,CAAC,OAAO,GAAG,MAAA,aAAa,CAAC,OAAO,mCAAI,EAAE,CAAA;IAEnD,IAAI,MAAM,EAAE;QACV,aAAa,CAAC,OAAO,CAAC,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAA;KACtF;IAED,IAAI,IAAI,KAAK,SAAS,EAAE;QACtB,aAAa,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;KACrD;IAED,IAAI,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC,CAAA;IAEtC,IAAI,CAAC,iBAAiB,EAAE;QACtB,KAAK,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAA;KACnC;IAED,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,KAAC,iBAAiB,cAChB,KAAC,sBAAsB,CAAC,QAAQ,kBAAC,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,gBAChE,KAAC,aAAa,kBAAC,KAAK,EAAE,KAAK,gBAAG,QAAQ,YAAiB,YACvB,WAChB,CACrB,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,CAAC,QAAQ,kBAAC,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,gBAChE,KAAC,aAAa,kBAAC,KAAK,EAAE,KAAK,gBAAG,QAAQ,YAAiB,YACvB,CACnC,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,uBAAuB,EAAE,CAAA"}
package/package.json CHANGED
@@ -1,46 +1,12 @@
1
1
  {
2
- "name": "@xylabs/sdk-react",
3
- "homepage": "https://xylabs.com",
4
- "bugs": {
5
- "url": "https://github.com/xylabs/sdk-react/issues",
6
- "email": "support@xylabs.com"
7
- },
8
- "description": "Common React library for all XY Labs projects that use React",
9
2
  "author": {
3
+ "email": "support@xylabs.com",
10
4
  "name": "XY Labs Development Team",
11
- "url": "https://xylabs.com",
12
- "email": "support@xylabs.com"
13
- },
14
- "keywords": [
15
- "utility",
16
- "typescript",
17
- "react"
18
- ],
19
- "license": "LGPL-3.0",
20
- "private": false,
21
- "version": "2.7.4",
22
- "type": "module",
23
- "repository": {
24
- "type": "git",
25
- "url": "https://github.com/xylabs/sdk-react.git"
26
- },
27
- "main": "dist/index.js",
28
- "module": "dist/index.js",
29
- "types": "dist/index.d.ts",
30
- "sideEffects": false,
31
- "publishConfig": {
32
- "access": "public"
5
+ "url": "https://xylabs.com"
33
6
  },
34
- "scripts": {
35
- "compile": "rm -r -f dist && tsc -p tsconfig.build.json && yarn copy-svg && yarn copy-png && yarn copy-jpg && yarn copy-gif",
36
- "copy-svg": "yarn copyfiles -u 1 \"./src/**/*.svg\" dist",
37
- "copy-png": "yarn copyfiles -u 1 \"./src/**/*.png\" dist",
38
- "copy-jpg": "yarn copyfiles -u 1 \"./src/**/*.jpg\" dist",
39
- "copy-gif": "yarn copyfiles -u 1 \"./src/**/*.gif\" dist",
40
- "lint-pkg": "npmPkgJsonLint .",
41
- "test": "env TS_NODE_PROJECT=\"tsconfig.test.json\" mocha -r ts-node/register 'src/**/*.spec.ts'",
42
- "start": "start-storybook -p 6006",
43
- "build-storybook": "build-storybook"
7
+ "bugs": {
8
+ "email": "support@xylabs.com",
9
+ "url": "https://github.com/xylabs/sdk-react/issues"
44
10
  },
45
11
  "dependencies": {
46
12
  "@types/numeral": "^2.0.2",
@@ -53,48 +19,34 @@
53
19
  "react-helmet": "^6.1.0",
54
20
  "react-icons": "^4.3.1"
55
21
  },
56
- "peerDependencies": {
57
- "@emotion/react": "^11",
58
- "@emotion/styled": "^11",
59
- "@ethersproject/abstract-signer": "^5",
60
- "@ethersproject/providers": "^5",
61
- "@mui/icons-material": "^5",
62
- "@mui/material": "^5",
63
- "@mui/styles": "^5",
64
- "@xylabs/pixel": "^1",
65
- "@xylabs/sdk-js": "^2",
66
- "bn.js": "^5",
67
- "react": "^17",
68
- "react-dom": "^17",
69
- "react-router-dom": "^6"
70
- },
22
+ "description": "Common React library for all XY Labs projects that use React",
71
23
  "devDependencies": {
72
24
  "@babel/core": "^7",
73
- "@emotion/react": "^11.6.0",
25
+ "@emotion/react": "^11.7.0",
74
26
  "@emotion/styled": "^11.6.0",
75
27
  "@ethersproject/abstract-signer": "^5.5.0",
76
28
  "@ethersproject/providers": "^5.5.0",
77
29
  "@mui/icons-material": "^5.2.0",
78
- "@mui/material": "^5.2.0",
79
- "@mui/styles": "^5.2.0",
80
- "@storybook/addon-actions": "^6.3.12",
81
- "@storybook/addon-docs": "^6.3.12",
82
- "@storybook/addon-essentials": "^6.3.12",
83
- "@storybook/addon-links": "^6.3.12",
84
- "@storybook/addons": "^6.3.12",
85
- "@storybook/components": "^6.3.12",
86
- "@storybook/core-events": "^6.3.12",
87
- "@storybook/react": "^6.3.12",
88
- "@storybook/theming": "^6.3.12",
30
+ "@mui/material": "^5.2.2",
31
+ "@mui/styles": "^5.2.2",
32
+ "@storybook/addon-actions": "^6.4.1",
33
+ "@storybook/addon-docs": "^6.4.1",
34
+ "@storybook/addon-essentials": "^6.4.1",
35
+ "@storybook/addon-links": "^6.4.1",
36
+ "@storybook/addons": "^6.4.1",
37
+ "@storybook/components": "^6.4.1",
38
+ "@storybook/core-events": "^6.4.1",
39
+ "@storybook/react": "^6.4.1",
40
+ "@storybook/theming": "^6.4.1",
89
41
  "@types/bn.js": "^5.1.0",
90
42
  "@types/lodash": "^4.14.177",
91
43
  "@types/md5": "^2.3.1",
92
- "@types/node": "^16.11.9",
44
+ "@types/node": "^16.11.11",
93
45
  "@types/react": "^17",
94
46
  "@xylabs/eslint-config-react": "^2",
95
- "@xylabs/pixel": "^1.1.5",
96
- "@xylabs/sdk-js": "^2.3.6",
97
- "@xylabs/ts-scripts": "^1.0.18",
47
+ "@xylabs/pixel": "^1.1.6",
48
+ "@xylabs/sdk-js": "^2.3.9",
49
+ "@xylabs/ts-scripts": "^1.0.23",
98
50
  "babel-loader": "^8.2.3",
99
51
  "bn.js": "^5.2.0",
100
52
  "copyfiles": "^2.4.1",
@@ -102,7 +54,7 @@
102
54
  "eslint-plugin-prettier": "^4.0.0",
103
55
  "eslint-plugin-react": "^7.27.1",
104
56
  "eslint-plugin-react-hooks": "^4.3.0",
105
- "prettier": "^2.4.1",
57
+ "prettier": "^2.5.0",
106
58
  "react": "^17.0.2",
107
59
  "react-dom": "^17.0.2",
108
60
  "react-router-dom": "^6",
@@ -110,5 +62,53 @@
110
62
  "ts-node": "^10.4.0",
111
63
  "typescript": "^4.5.2",
112
64
  "webpack": "^5"
113
- }
65
+ },
66
+ "homepage": "https://xylabs.com",
67
+ "keywords": [
68
+ "utility",
69
+ "typescript",
70
+ "react"
71
+ ],
72
+ "license": "LGPL-3.0",
73
+ "main": "dist/index.js",
74
+ "module": "dist/index.js",
75
+ "name": "@xylabs/sdk-react",
76
+ "peerDependencies": {
77
+ "@emotion/react": "^11",
78
+ "@emotion/styled": "^11",
79
+ "@ethersproject/abstract-signer": "^5",
80
+ "@ethersproject/providers": "^5",
81
+ "@mui/icons-material": "^5",
82
+ "@mui/material": "^5",
83
+ "@mui/styles": "^5",
84
+ "@xylabs/pixel": "^1",
85
+ "@xylabs/sdk-js": "^2",
86
+ "bn.js": "^5",
87
+ "react": "^17",
88
+ "react-dom": "^17",
89
+ "react-router-dom": "^6"
90
+ },
91
+ "private": false,
92
+ "publishConfig": {
93
+ "access": "public"
94
+ },
95
+ "repository": {
96
+ "type": "git",
97
+ "url": "https://github.com/xylabs/sdk-react.git"
98
+ },
99
+ "scripts": {
100
+ "build-storybook": "build-storybook",
101
+ "compile": "rm -r -f dist && tsc -p tsconfig.build.json && yarn copy-svg && yarn copy-png && yarn copy-jpg && yarn copy-gif",
102
+ "copy-gif": "yarn copyfiles -u 1 \"./src/**/*.gif\" dist",
103
+ "copy-jpg": "yarn copyfiles -u 1 \"./src/**/*.jpg\" dist",
104
+ "copy-png": "yarn copyfiles -u 1 \"./src/**/*.png\" dist",
105
+ "copy-svg": "yarn copyfiles -u 1 \"./src/**/*.svg\" dist",
106
+ "lint-pkg": "npmPkgJsonLint .",
107
+ "start": "start-storybook -p 6006",
108
+ "test": "env TS_NODE_PROJECT=\"tsconfig.test.json\" mocha -r ts-node/register 'src/**/*.spec.ts'"
109
+ },
110
+ "sideEffects": false,
111
+ "type": "module",
112
+ "types": "dist/index.d.ts",
113
+ "version": "2.7.5"
114
114
  }
@@ -6,22 +6,28 @@ import React, { useContext } from 'react'
6
6
  import { InvertableThemeContext } from './InvertableThemeContext'
7
7
  import { InvertableThemeProviderProps } from './InvertableThemeProviderProps'
8
8
 
9
- const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = (props) => {
9
+ const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = ({
10
+ options,
11
+ children,
12
+ dark,
13
+ scoped = false,
14
+ invert = false,
15
+ noResponsiveFonts,
16
+ }) => {
10
17
  const contextInvertableTheme = useContext(InvertableThemeContext)
11
- const { children, dark, scoped = false, invert = false, noResponsiveFonts } = props
12
- const { options = clone(contextInvertableTheme.options) } = props
18
+ const clonedOptions = clone(options ?? contextInvertableTheme.options ?? {})
13
19
 
14
- options.palette = options.palette ?? {}
20
+ clonedOptions.palette = clonedOptions.palette ?? {}
15
21
 
16
22
  if (invert) {
17
- options.palette.mode = options.palette.mode === 'dark' ? 'light' : 'dark'
23
+ clonedOptions.palette.mode = clonedOptions.palette.mode === 'dark' ? 'light' : 'dark'
18
24
  }
19
25
 
20
26
  if (dark !== undefined) {
21
- options.palette.mode = dark ? 'dark' : 'light'
27
+ clonedOptions.palette.mode = dark ? 'dark' : 'light'
22
28
  }
23
29
 
24
- let theme = createTheme(options)
30
+ let theme = createTheme(clonedOptions)
25
31
 
26
32
  if (!noResponsiveFonts) {
27
33
  theme = responsiveFontSizes(theme)
@@ -29,12 +35,12 @@ const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = (props)
29
35
 
30
36
  return scoped ? (
31
37
  <ScopedCssBaseline>
32
- <InvertableThemeContext.Provider value={{ options }}>
38
+ <InvertableThemeContext.Provider value={{ options: clonedOptions }}>
33
39
  <ThemeProvider theme={theme}>{children}</ThemeProvider>
34
40
  </InvertableThemeContext.Provider>
35
41
  </ScopedCssBaseline>
36
42
  ) : (
37
- <InvertableThemeContext.Provider value={{ options }}>
43
+ <InvertableThemeContext.Provider value={{ options: clonedOptions }}>
38
44
  <ThemeProvider theme={theme}>{children}</ThemeProvider>
39
45
  </InvertableThemeContext.Provider>
40
46
  )