@xyo-network/react-app-settings 2.25.62

package/dist/esm/contexts/AppSettings/StorageBase.js

@@ -0,0 +1,73 @@
+import { assertEx } from '@xylabs/sdk-js';
+import { assertDefinedEx } from '@xyo-network/react-shared';
+export class AppSettingsStorageBase {
+    constructor(prefix = 'AppSettings', defaults) {
+        this.prefix = prefix;
+        this.defaults = defaults ?? {};
+    }
+    getBoolean(name) {
+        const storedValue = localStorage.getItem(`${this.prefix}|${name}`);
+        if (!storedValue) {
+            assertEx(typeof this.defaults[name] === 'boolean', 'Default value is not boolean');
+            const defaultValue = this.defaults[name];
+            assertEx(defaultValue !== undefined, `Missing Default for ${name}`);
+            return defaultValue;
+        }
+        return storedValue !== 'false';
+    }
+    setBoolean(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, JSON.stringify(value));
+    }
+    setNumber(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, JSON.stringify(value));
+    }
+    getNumber(name) {
+        const storedValue = localStorage.getItem(`${this.prefix}|${name}`);
+        if (!storedValue) {
+            assertEx(typeof this.defaults[name] === 'boolean', 'Default value is not boolean');
+            const defaultValue = this.defaults[name];
+            assertEx(defaultValue !== undefined, `Missing Default for ${name}`);
+            return defaultValue;
+        }
+        return parseFloat(storedValue);
+    }
+    getString(name) {
+        const storedValue = localStorage.getItem(`${this.prefix}|${name}`);
+        if (!storedValue) {
+            assertDefinedEx(typeof this.defaults[name] === 'string', 'Default value is not string');
+            const defaultValue = this.defaults[name];
+            assertEx(defaultValue !== undefined, `Missing Default for ${name}`);
+            return defaultValue;
+        }
+        return storedValue;
+    }
+    setString(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, value);
+    }
+    getStringArray(name) {
+        const storedValue = localStorage.getItem(`${this.prefix}|${name}`)?.split(',');
+        if (!storedValue) {
+            assertDefinedEx(Array.isArray(this.defaults[name]), 'Default value is not array');
+            const defaultValue = this.defaults[name];
+            assertEx(defaultValue !== undefined, `Missing Default for ${name}`);
+            return defaultValue;
+        }
+        return storedValue;
+    }
+    setStringArray(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, value.join(','));
+    }
+    getObject(name) {
+        const storedValue = localStorage.getItem(`${this.prefix}|${name}`);
+        const parsedStoredValue = storedValue ? JSON.parse(storedValue) : null;
+        if (!parsedStoredValue) {
+            assertEx(typeof this.defaults[name] === 'object', 'Default value is not object');
+            return assertEx(this.defaults[name], `Missing Default for ${name}`);
+        }
+        return parsedStoredValue;
+    }
+    setObject(name, value) {
+        localStorage.setItem(`${this.prefix}|${name}`, JSON.stringify(value));
+    }
+}
+//# sourceMappingURL=StorageBase.js.map

package/dist/esm/contexts/AppSettings/StorageBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageBase.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/StorageBase.ts"],"names":[],"mappings":"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"}

package/dist/esm/contexts/AppSettings/appSettingDefault.d.ts

@@ -0,0 +1 @@
+export declare const appSettingDefault: () => Record<string, unknown>;

package/dist/esm/contexts/AppSettings/appSettingDefault.js

@@ -0,0 +1,9 @@
+import { AppSettingSlug } from './Slug';
+export const appSettingDefault = () => {
+    return {
+        [AppSettingSlug.DarkMode]: false,
+        [AppSettingSlug.Developer]: false,
+        [AppSettingSlug.NavigationType]: 'menu',
+    };
+};
+//# sourceMappingURL=appSettingDefault.js.map

package/dist/esm/contexts/AppSettings/appSettingDefault.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appSettingDefault.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/appSettingDefault.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAA;AAEvC,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAA4B,EAAE;IAC7D,OAAO;QACL,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,KAAK;QAChC,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,KAAK;QACjC,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM;KACxC,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/contexts/AppSettings/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Context';
+export * from './Provider';
+export * from './Slug';
+export * from './Storage';
+export * from './StorageBase';
+export * from './useAppSettings';

package/dist/esm/contexts/AppSettings/index.js

@@ -0,0 +1,7 @@
+export * from './Context';
+export * from './Provider';
+export * from './Slug';
+export * from './Storage';
+export * from './StorageBase';
+export * from './useAppSettings';
+//# sourceMappingURL=index.js.map

package/dist/esm/contexts/AppSettings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA"}

package/dist/esm/contexts/AppSettings/useAppSettings.d.ts

@@ -0,0 +1 @@
+export declare const useAppSettings: () => import("./Context").AppSettingsContextProps;

package/dist/esm/contexts/AppSettings/useAppSettings.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { AppSettingsContext } from './Context';
+export const useAppSettings = () => {
+    return useContext(AppSettingsContext);
+};
+//# sourceMappingURL=useAppSettings.js.map

package/dist/esm/contexts/AppSettings/useAppSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppSettings.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/useAppSettings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAE9C,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,OAAO,UAAU,CAAC,kBAAkB,CAAC,CAAA;AACvC,CAAC,CAAA"}

package/dist/esm/contexts/index.d.ts

@@ -0,0 +1 @@
+export * from './AppSettings';

package/dist/esm/contexts/index.js

@@ -0,0 +1,2 @@
+export * from './AppSettings';
+//# sourceMappingURL=index.js.map

package/dist/esm/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './contexts';
+export * from './WebAppNavigationType';

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './contexts';
+export * from './WebAppNavigationType';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,wBAAwB,CAAA"}

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@xyo-network/react-app-settings",
+  "author": {
+    "email": "support@xyo.network",
+    "name": "XYO Development Team",
+    "url": "https://xyo.network"
+  },
+  "bugs": {
+    "email": "support@xyo.network",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/material": "^5.8.4",
+    "@xylabs/react-button": "^2.12.25",
+    "@xylabs/react-flexbox": "^2.12.25",
+    "@xylabs/react-pixel": "^2.12.25",
+    "@xylabs/react-shared": "^2.12.25",
+    "@xyo-network/react-shared": "^2.25.63",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-router-dom": "^6.3.0",
+    "tslib": "^2.4.0"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "devDependencies": {
+    "@babel/core": "^7.18.5",
+    "@babel/preset-env": "^7.18.2",
+    "@storybook/react": "^6.5.9",
+    "@types/react-helmet": "^6.1.5",
+    "@xylabs/react-common": "^2.12.25",
+    "@xylabs/tsconfig": "^1.0.13"
+  },
+  "browser": "dist/esm/index.js",
+  "docs": "dist/docs.json",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "browser": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/esm/index.js"
+    },
+    "./dist/docs.json": {
+      "default": "./dist/docs.json"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "homepage": "https://xyo.network",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "license": "LGPL-3.0",
+  "resolutions": {
+    "@storybook/react/webpack": "^5",
+    "bn.js": "^5.2.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "webpack": "^5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "lint-pkg": "npmPkgJsonLint .",
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  },
+  "sideEffects": false,
+  "types": "dist/esm/index.d.ts",
+  "version": "2.25.62",
+  "packageManager": "yarn@3.1.1"
+}

package/src/WebAppNavigationType.ts

@@ -0,0 +1 @@
+export type WebAppNavigationType = 'menu' | 'sidebar'

package/src/components/DarkModeIconButton.tsx

@@ -0,0 +1,19 @@
+import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded'
+import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded'
+import { IconButton, IconButtonProps } from '@mui/material'
+
+import { useAppSettings } from '../contexts'
+
+export const DarkModeIconButton: React.FC<IconButtonProps> = (props) => {
+  const { darkMode, enableDarkMode } = useAppSettings()
+
+  const handleDarkModeChange = () => {
+    enableDarkMode?.(!darkMode)
+  }
+
+  return (
+    <IconButton onClick={handleDarkModeChange} {...props}>
+      {darkMode ? <DarkModeRoundedIcon /> : <LightModeRoundedIcon />}
+    </IconButton>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './DarkModeIconButton'

package/src/contexts/AppSettings/Context.ts

@@ -0,0 +1,15 @@
+import { createContext } from 'react'
+
+import { WebAppNavigationType } from '../../WebAppNavigationType'
+import { appSettingDefault } from './appSettingDefault'
+
+export interface AppSettingsContextProps {
+  darkMode?: boolean
+  developerMode?: boolean
+  enableDarkMode?: (value: boolean) => void
+  enableDeveloperMode?: (value: boolean) => void
+  changeNavigationType?: (value: WebAppNavigationType) => void
+  navigationType?: WebAppNavigationType
+}
+
+export const AppSettingsContext = createContext<AppSettingsContextProps>(appSettingDefault())

package/src/contexts/AppSettings/Provider.tsx

@@ -0,0 +1,49 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { ProviderProps, useState } from 'react'
+
+import { WebAppNavigationType } from '../../WebAppNavigationType'
+import { AppSettingsContext, AppSettingsContextProps } from './Context'
+import { AppSettingsStorage } from './Storage'
+
+export interface AppSettingsProviderProps<T extends AppSettingsContextProps = AppSettingsContextProps> extends ProviderProps<T> {
+  storage?: AppSettingsStorage
+}
+
+export const AppSettingsProvider: React.FC<WithChildren<AppSettingsProviderProps>> = ({ storage = new AppSettingsStorage(), value, children, ...props }) => {
+  const [developerMode, setDeveloperMode] = useState(storage.developerMode)
+  const [darkMode, setDarkMode] = useState(storage.darkMode)
+  const [navigationType, setNaviagtionType] = useState(storage.navigationType)
+
+  const enableDeveloperMode = (value: boolean) => {
+    storage.developerMode = value
+    setDeveloperMode(storage.developerMode)
+  }
+
+  const enableDarkMode = (value: boolean) => {
+    storage.darkMode = value
+    setDarkMode(storage.darkMode)
+  }
+
+  const changeNavigationType = (value: WebAppNavigationType) => {
+    storage.navigationType = value
+    setNaviagtionType(value)
+  }
+
+  return (
+    <AppSettingsContext.Provider
+      value={{
+        changeNavigationType,
+        darkMode,
+        developerMode,
+        enableDarkMode,
+        enableDeveloperMode,
+        navigationType,
+
+        ...value,
+      }}
+      {...props}
+    >
+      {children}
+    </AppSettingsContext.Provider>
+  )
+}

package/src/contexts/AppSettings/Slug.ts

@@ -0,0 +1,5 @@
+export enum AppSettingSlug {
+  DarkMode = 'darkmode',
+  Developer = 'developer',
+  NavigationType = 'navgiationType',
+}

package/src/contexts/AppSettings/Storage.ts

@@ -0,0 +1,34 @@
+import { WebAppNavigationType } from '../../WebAppNavigationType'
+import { appSettingDefault } from './appSettingDefault'
+import { AppSettingSlug } from './Slug'
+import { AppSettingsStorageBase } from './StorageBase'
+
+export class AppSettingsStorage extends AppSettingsStorageBase {
+  constructor(prefix = 'AppSettings', defaults?: Record<string, unknown>) {
+    super(prefix, { ...appSettingDefault(), ...defaults })
+  }
+
+  get darkMode() {
+    return this.getBoolean(AppSettingSlug.DarkMode)
+  }
+
+  set darkMode(value: boolean) {
+    this.setBoolean(AppSettingSlug.DarkMode, value)
+  }
+
+  get developerMode() {
+    return this.getBoolean(AppSettingSlug.Developer)
+  }
+
+  set developerMode(value: boolean) {
+    this.setBoolean(AppSettingSlug.Developer, value)
+  }
+
+  get navigationType() {
+    return this.getString(AppSettingSlug.NavigationType) as WebAppNavigationType
+  }
+
+  set navigationType(value: WebAppNavigationType) {
+    this.setString(AppSettingSlug.NavigationType, value)
+  }
+}

package/src/contexts/AppSettings/StorageBase.ts

@@ -0,0 +1,85 @@
+import { assertEx } from '@xylabs/sdk-js'
+import { assertDefinedEx } from '@xyo-network/react-shared'
+
+export class AppSettingsStorageBase {
+  private prefix: string
+  private defaults: Record<string, unknown>
+  constructor(prefix = 'AppSettings', defaults?: Record<string, unknown>) {
+    this.prefix = prefix
+    this.defaults = defaults ?? {}
+  }
+
+  public getBoolean(name: string): boolean {
+    const storedValue = localStorage.getItem(`${this.prefix}|${name}`)
+    if (!storedValue) {
+      assertEx(typeof this.defaults[name] === 'boolean', 'Default value is not boolean')
+      const defaultValue = this.defaults[name] as boolean
+      assertEx(defaultValue !== undefined, `Missing Default for ${name}`)
+      return defaultValue
+    }
+    return storedValue !== 'false'
+  }
+
+  public setBoolean(name: string, value: boolean) {
+    localStorage.setItem(`${this.prefix}|${name}`, JSON.stringify(value))
+  }
+
+  public setNumber(name: string, value: number) {
+    localStorage.setItem(`${this.prefix}|${name}`, JSON.stringify(value))
+  }
+
+  public getNumber(name: string): number {
+    const storedValue = localStorage.getItem(`${this.prefix}|${name}`)
+    if (!storedValue) {
+      assertEx(typeof this.defaults[name] === 'boolean', 'Default value is not boolean')
+      const defaultValue = this.defaults[name] as number
+      assertEx(defaultValue !== undefined, `Missing Default for ${name}`)
+      return defaultValue
+    }
+    return parseFloat(storedValue)
+  }
+
+  public getString(name: string) {
+    const storedValue = localStorage.getItem(`${this.prefix}|${name}`)
+    if (!storedValue) {
+      assertDefinedEx(typeof this.defaults[name] === 'string', 'Default value is not string')
+      const defaultValue = this.defaults[name] as string
+      assertEx(defaultValue !== undefined, `Missing Default for ${name}`)
+      return defaultValue
+    }
+    return storedValue
+  }
+
+  public setString(name: string, value: string) {
+    localStorage.setItem(`${this.prefix}|${name}`, value)
+  }
+
+  public getStringArray(name: string) {
+    const storedValue = localStorage.getItem(`${this.prefix}|${name}`)?.split(',')
+    if (!storedValue) {
+      assertDefinedEx(Array.isArray(this.defaults[name]), 'Default value is not array')
+      const defaultValue = this.defaults[name] as string[]
+      assertEx(defaultValue !== undefined, `Missing Default for ${name}`)
+      return defaultValue
+    }
+    return storedValue
+  }
+
+  public setStringArray(name: string, value: string[]) {
+    localStorage.setItem(`${this.prefix}|${name}`, value.join(','))
+  }
+
+  public getObject<T>(name: string): T {
+    const storedValue = localStorage.getItem(`${this.prefix}|${name}`)
+    const parsedStoredValue = storedValue ? JSON.parse(storedValue) : null
+    if (!parsedStoredValue) {
+      assertEx(typeof this.defaults[name] === 'object', 'Default value is not object')
+      return assertEx(this.defaults[name] as T, `Missing Default for ${name}`)
+    }
+    return parsedStoredValue as T
+  }
+
+  public setObject<T>(name: string, value: T) {
+    localStorage.setItem(`${this.prefix}|${name}`, JSON.stringify(value))
+  }
+}

package/src/contexts/AppSettings/appSettingDefault.ts

@@ -0,0 +1,9 @@
+import { AppSettingSlug } from './Slug'
+
+export const appSettingDefault = (): Record<string, unknown> => {
+  return {
+    [AppSettingSlug.DarkMode]: false,
+    [AppSettingSlug.Developer]: false,
+    [AppSettingSlug.NavigationType]: 'menu',
+  }
+}

package/src/contexts/AppSettings/index.ts

@@ -0,0 +1,6 @@
+export * from './Context'
+export * from './Provider'
+export * from './Slug'
+export * from './Storage'
+export * from './StorageBase'
+export * from './useAppSettings'

package/src/contexts/AppSettings/useAppSettings.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react'
+
+import { AppSettingsContext } from './Context'
+
+export const useAppSettings = () => {
+  return useContext(AppSettingsContext)
+}

package/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './AppSettings'

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components'
+export * from './contexts'
+export * from './WebAppNavigationType'

package/typedoc.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": [
+    "./src/index.ts"
+  ],
+  "excludeExternals": true,
+  "excludeInternal": true,
+  "excludePrivate": true,
+  "excludeProtected": true,
+  "intentionallyNotExported": [
+    "AuthDispatch",
+    "AuthServiceId",
+    "AuthState",
+    "LoginForm"
+  ],
+  "json": "./dist/docs.json",
+  "tsconfig": "./tsconfig.json"
+}