@exodus/ui-config 1.0.0 → 3.0.0

package/README.md

@@ -16,15 +16,21 @@ import uiConfig from '@exodus/ui-config'
 // exodus is created via `@exodus/headless`
 exodus.use(
   uiConfig({
-    atoms: [
-      // these are emitted to the `port` as events 'delightUserAtom' and 'terrifyUserAtom'
-      { id: 'delightUserAtom' },
-      { id: 'terrifyUserAtom' },
+    config: [
+      // Note: these are NOT atom definitions, they're only metadata about atoms: `id` and later `type` (so we can
+      // internally instantiate different types of atoms)
+      //
+      // these are emitted to the `port` as events 'delightUser' and 'terrifyUser'
+      { id: 'delightUser' },
+      { id: 'terrifyUser' },
     ],
   })
 )
 
 // API usage
-exodus.uiConfig.setDelightUser(true)
-exodus.uiConfig.setTerrifyUser(false)
+exodus.uiConfig.delightUser(true)
+exodus.uiConfig.terrifyUser(false)
 ```
+
+// Port events
+feature emit data from atoms in with following format: `port.emit('delightUserAtom', value)`

package/api/index.js

@@ -1,27 +1,27 @@
 import { mapValues } from '@exodus/basic-utils'
 import { merge } from 'lodash'
-import { stripAtom, toFirstUpper } from '../utils'
 
-const getGetterName = (name) => `get${toFirstUpper(stripAtom(name))}`
-
-const getSetterName = (name) => `set${toFirstUpper(stripAtom(name))}`
-
-const createUiConfigApiDefinition = ({ atomIds }) => {
+const createUiConfigApiDefinition = ({ atomIds, atomConfigMap }) => {
   return {
     definition: {
       type: 'api',
       id: 'uiConfig',
-      factory: ({ ...atoms }) => ({
-        uiConfig: merge(
+      factory: ({ ...atoms }) => {
+        const uiConfig = merge(
           ...Object.values(
-            mapValues(atoms, (atom, name) => ({
+            mapValues(atoms, (atom, atomId) => ({
               // assetsShowPriceMapAtom -> getAssetsShowPriceMap, setAssetsShowPriceMap
-              [getGetterName(name)]: atom.get,
-              [getSetterName(name)]: atom.set,
+              [atomConfigMap[atomId]]: {
+                set: atom.set,
+                get: atom.get,
+              },
             }))
           )
-        ),
-      }),
+        )
+        return {
+          uiConfig,
+        }
+      },
       dependencies: atomIds,
     },
     writesAtoms: atomIds,

package/index.js

@@ -1,16 +1,24 @@
 import { createStorageAtomFactory } from '@exodus/atoms'
+
 import createUiConfigApiDefinition from './api'
 import createUiConfigPluginDefinition from './plugin'
-import { stripAtom } from './utils'
+import { getAtomId } from './utils'
+
+export { getConfigReduxEvents, getEventReduxMap } from './utils'
 
-const createUiConfigFeatureDefinition = ({ atoms: uiConfigAtoms }) => {
-  const atoms = uiConfigAtoms.map(({ id }) => ({
+const createUiConfigFeatureDefinition = ({ config }) => {
+  const configValues = Object.values(config)
+  const configAtomMap = Object.fromEntries(configValues.map(({ id }) => [id, getAtomId(id)]))
+  const atomConfigMap = Object.fromEntries(
+    Object.keys(configAtomMap).map((configId) => [configAtomMap[configId], configId])
+  )
+  const atoms = configValues.map(({ id }) => ({
     definition: {
-      id,
+      id: configAtomMap[id],
       type: 'atom',
       factory: ({ storage, config }) =>
         createStorageAtomFactory({ storage })({
-          key: stripAtom(id),
+          key: id,
           isSoleWriter: true,
         }),
       dependencies: ['storage'],
@@ -18,14 +26,14 @@ const createUiConfigFeatureDefinition = ({ atoms: uiConfigAtoms }) => {
     storage: { namespace: 'uiConfig' },
   }))
 
-  const atomIds = uiConfigAtoms.map(({ id }) => id)
+  const atomIds = Object.keys(atomConfigMap)
 
   return {
     id: 'uiConfigFeatureDefinition',
     definitions: [
       ...atoms,
-      createUiConfigApiDefinition({ atomIds }),
-      createUiConfigPluginDefinition({ atomIds }),
+      createUiConfigApiDefinition({ atomIds, atomConfigMap }),
+      createUiConfigPluginDefinition({ atomIds, atomConfigMap }),
     ],
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exodus/ui-config",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "description": "Helper for storing various UI-specific settings/config.",
   "author": "Exodus Movement Inc.",
   "license": "UNLICENSED",
@@ -17,19 +17,23 @@
     "README.md",
     "utils.js",
     "plugin",
-    "api"
+    "api",
+    "utils"
   ],
   "scripts": {
     "lint": "eslint . --ignore-path ../../.gitignore",
-    "lint:fix": "yarn lint --fix"
+    "lint:fix": "yarn lint --fix",
+    "test": "jest"
   },
   "dependencies": {
-    "@exodus/atoms": "^5.4.0",
+    "@exodus/atoms": "^5.6.0",
     "@exodus/basic-utils": "^2.1.0",
+    "@exodus/formatting": "^1.1.1",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "eslint": "^8.44.0"
+    "eslint": "^8.44.0",
+    "jest": "^29.1.2"
   },
-  "gitHead": "14fc30509aaa011e0e214aa6b7e0d6608ad3f7c2"
+  "gitHead": "0840a06d2b117adb4895d978418394cdf5a1a128"
 }

package/plugin/index.js

@@ -4,9 +4,9 @@ const createUiConfigPluginDefinition = ({ atomIds }) => ({
     id: 'uiConfigPlugin',
     factory: ({ port, ...atoms }) => {
       const watch = () =>
-        Object.entries(atoms).forEach(([name, atom]) =>
-          atom.observe((value) => port.emit(name, value))
-        )
+        Object.entries(atoms).forEach(([atomId, atom]) => {
+          return atom.observe((value) => port.emit(atomId, value))
+        })
 
       const clear = () =>
         Promise.all(Object.entries(atoms).map(([name, atom]) => atom.set(undefined)))

package/utils.js

@@ -1,3 +1,14 @@
-export const toFirstUpper = (name) => name.slice(0, 1).toUpperCase() + name.slice(1)
+import { toUpperSnakeCase } from '@exodus/formatting'
 
-export const stripAtom = (name) => name.replace(/Atom$/, '')
+export const getAtomId = (id) => `${id}ConfigAtom`
+
+const toReduxEvent = (type) => `EVENT_${toUpperSnakeCase(type.replace(/configatom$/i, ''))}_CONFIG`
+const getConfigReduxEventName = (id) => toReduxEvent(getAtomId(id))
+
+export const getEventReduxMap = (config) =>
+  Object.fromEntries(
+    Object.values(config).map(({ id }) => [getAtomId(id), getConfigReduxEventName(id)])
+  )
+
+export const getConfigReduxEvents = (config) =>
+  new Map(Object.values(config).map(({ id }) => [getConfigReduxEventName(id), id]))