@xylabs/sdk-react 2.9.19 → 2.9.23

package/package.json

@@ -9,27 +9,27 @@
     "url": "https://github.com/xylabs/sdk-react/issues"
   },
   "dependencies": {
-    "@types/react-helmet": "^6",
-    "@xylabs/sdk-js": "^2",
-    "axios": "^0",
-    "bn.js": "^5",
-    "lodash": "^4",
-    "md5": "^2",
-    "numeral": "^2",
-    "query-string": "^7",
-    "react-helmet": "^6",
-    "react-icons": "^4"
+    "@types/react-helmet": "^6.1.5",
+    "@xylabs/sdk-js": "^2.4.1",
+    "axios": "^0.25.0",
+    "bn.js": "^5.2.0",
+    "lodash": "^4.17.21",
+    "md5": "^2.3.0",
+    "numeral": "^2.0.6",
+    "query-string": "^7.1.1",
+    "react-helmet": "^6.1.0",
+    "react-icons": "^4.3.1"
   },
   "description": "Common React library for all XY Labs projects that use React",
   "devDependencies": {
-    "@babel/core": "^7.17.0",
+    "@babel/core": "^7.17.2",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@ethersproject/abstract-signer": "^5.5.0",
     "@ethersproject/providers": "^5.5.3",
-    "@mui/icons-material": "^5.3.1",
-    "@mui/material": "^5.4.0",
-    "@mui/styles": "^5.3.0",
+    "@mui/icons-material": "^5.4.1",
+    "@mui/material": "^5.4.1",
+    "@mui/styles": "^5.4.1",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^3.0.1",
@@ -44,33 +44,34 @@
     "@storybook/react": "^6.4.18",
     "@types/bn.js": "^5.1.0",
     "@types/lodash": "^4.14.178",
-    "@types/md5": "^2.3.1",
-    "@types/node": "^17",
-    "@types/numeral": "^2",
-    "@types/react": "^17",
-    "@types/react-dom": "^17",
-    "@xylabs/eslint-config-react": "^2",
+    "@types/md5": "^2.3.2",
+    "@types/node": "^17.0.16",
+    "@types/numeral": "^2.0.2",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "@xylabs/eslint-config-react": "^2.1.2",
     "@xylabs/pixel": "^1.3.6",
-    "@xylabs/rollup-config": "^1.1.5",
-    "@xylabs/ts-scripts": "^1.0.39",
-    "@xylabs/tsconfig": "^1.0.11",
+    "@xylabs/rollup-config": "^1.1.7",
+    "@xylabs/ts-scripts": "^1.0.43",
+    "@xylabs/tsconfig": "^1.0.12",
     "babel-loader": "^8.2.3",
     "copyfiles": "^2.4.1",
-    "eslint": "^8",
+    "eslint": "^8.8.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^6",
-    "rollbar": "^2",
-    "rollup": "^2",
+    "react-router-dom": "^6.2.1",
+    "rimraf": "^3.0.2",
+    "rollbar": "^2.24.0",
+    "rollup": "^2.67.1",
     "rollup-plugin-svg": "^2.0.0",
-    "ts-node": "^10.4.0",
+    "ts-node": "^10.5.0",
     "tslib": "^2.3.1",
     "typescript": "^4.5.5",
-    "webpack": "^5"
+    "webpack": "^5.68.0"
   },
   "esm5": "dist/esm5/index.js",
   "exports": {
@@ -108,7 +109,6 @@
     "react-dom": "^17",
     "react-router-dom": "^6"
   },
-  "private": false,
   "publishConfig": {
     "access": "public"
   },
@@ -118,11 +118,13 @@
   },
   "scripts": {
     "build-storybook": "build-storybook",
+    "deploy": "yarn version patch -i && yarn npm publish",
     "lint-pkg": "npmPkgJsonLint .",
     "start": "start-storybook -p 6006",
     "test": "env TS_NODE_PROJECT=\"tsconfig.test.json\" mocha -r ts-node/register 'src/**/*.spec.ts'"
   },
   "sideEffects": false,
   "types": "dist/index.d.ts",
-  "version": "2.9.19"
-}
+  "version": "2.9.23",
+  "packageManager": "yarn@3.1.1"
+}

package/src/components/InvertableThemeProvider/InvertableThemeProvider.stories.tsx

@@ -24,13 +24,15 @@ const ThemeEnabledComponent = () => {
     <>
       <CssBaseline />
       <Box sx={{ backgroundColor: theme.palette.background.default }}>
-        <Typography variant="h3">marginBottom of {theme.spacing(4)}</Typography>
-        <Typography variant="h4" color={theme.palette.primary.main}>
-          Color: {theme.palette.primary.main}
-        </Typography>
-        <Typography variant="h4" color={theme.palette.secondary.main}>
-          Color: {theme.palette.secondary.main}
-        </Typography>
+        <Box padding={3} border={`1px dotted ${theme.palette.divider}`}>
+          <Typography variant="h3">marginBottom of {theme.spacing(4)}</Typography>
+          <Typography variant="h4" color={theme.palette.primary.main}>
+            Color: {theme.palette.primary.main}
+          </Typography>
+          <Typography variant="h4" color={theme.palette.secondary.main}>
+            Color: {theme.palette.secondary.main}
+          </Typography>
+        </Box>
       </Box>
     </>
   )

package/src/components/InvertableThemeProvider/InvertableThemeProvider.tsx

@@ -1,20 +1,35 @@
 import { responsiveFontSizes, ScopedCssBaseline, ThemeProvider } from '@mui/material'
-import { createTheme } from '@mui/material/styles'
+import { createTheme, Theme, ThemeOptions } from '@mui/material/styles'
 import clone from 'lodash/clone'
+import merge from 'lodash/merge'
 import React, { useContext } from 'react'
 
 import { InvertableThemeContext } from './InvertableThemeContext'
 import { InvertableThemeProviderProps } from './InvertableThemeProviderProps'
 
-const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = ({
+export const resolveThemeColors = (theme: Theme, options: ThemeOptions) => {
+  const newTheme = createTheme(options, {
+    palette: {
+      text: {
+        primary: theme.palette?.getContrastText(theme.palette.primary.main),
+        secondary: theme.palette?.getContrastText(theme.palette.secondary.main),
+      },
+    },
+  })
+  return newTheme
+}
+
+export const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = ({
   options,
   children,
   dark,
+  resolve = false,
   scoped = false,
   invert = false,
   noResponsiveFonts,
   darkTheme,
 }) => {
+  let internalDarkTheme = {}
   const contextInvertableTheme = useContext(InvertableThemeContext)
   const clonedOptions = clone(options ?? contextInvertableTheme.options ?? {})
 
@@ -29,10 +44,14 @@ const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = ({
   }
 
   if (clonedOptions.palette.mode === 'dark' && darkTheme?.palette) {
-    clonedOptions.palette = darkTheme.palette
+    internalDarkTheme = darkTheme
   }
 
-  let theme = createTheme(clonedOptions)
+  let theme = createTheme(clonedOptions, internalDarkTheme)
+
+  if (resolve) {
+    theme = resolveThemeColors(theme, merge({}, clonedOptions, internalDarkTheme))
+  }
 
   if (!noResponsiveFonts) {
     theme = responsiveFontSizes(theme)
@@ -50,5 +69,3 @@ const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = ({
     </InvertableThemeContext.Provider>
   )
 }
-
-export { InvertableThemeProvider }

package/src/components/InvertableThemeProvider/InvertableThemeProviderProps.ts

@@ -7,6 +7,7 @@ interface InvertableThemeProviderProps {
   noResponsiveFonts?: boolean
   options?: ThemeOptions
   darkTheme?: ThemeOptions
+  resolve?: boolean
 }
 
 export type { InvertableThemeProviderProps }

package/src/components/InvertableThemeProvider/index.ts

@@ -1,5 +1,2 @@
-import { InvertableThemeProvider } from './InvertableThemeProvider'
-import { InvertableThemeProviderProps } from './InvertableThemeProviderProps'
-
-export { InvertableThemeProvider }
-export type { InvertableThemeProviderProps }
+export * from './InvertableThemeProvider'
+export * from './InvertableThemeProviderProps'

package/src/hooks/useLocalStorage.ts

@@ -6,7 +6,19 @@ export const useLocalStorage = <T>(key: string, defaultValue: T): [T, (value: T)
   const [storedValue, setStoredValue] = useState<T>(() => {
     try {
       const item = getLocalStorageObject<T>(key)
-      return item || defaultValue
+      if (typeof defaultValue === 'boolean') {
+        if (typeof item === 'boolean') {
+          return item
+        } else {
+          return defaultValue
+        }
+      } else if (Array.isArray(item)) {
+        return item
+      } else if (Object.keys(item).length) {
+        return item
+      } else {
+        return defaultValue
+      }
     } catch (ex) {
       //Error is already logged
       return defaultValue