@xyo-network/react-app-settings 2.26.37 → 2.26.38

package/dist/docs.json

@@ -10,7 +10,7 @@
 			"fileName": "index.ts",
 			"line": 1,
 			"character": 0,
-			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eeec410/packages/appsettings/src/index.ts#L1"
+			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/c31a96d/packages/appsettings/src/index.ts#L1"
 		}
 	]
 }

package/package.json

@@ -16,7 +16,7 @@
     "@mui/material": "^5.9.2",
     "@xylabs/react-shared": "^2.14.10",
     "@xylabs/sdk-js": "^2.6.2",
-    "@xyo-network/react-shared": "^2.26.37",
+    "@xyo-network/react-shared": "^2.26.38",
     "react": "^18.2.0",
     "tslib": "^2.4.0"
   },
@@ -75,5 +75,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.37"
+  "version": "2.26.38"
 }

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'