@jsonui/core 0.0.11

package/src/stock/Stock.ts

@@ -0,0 +1,75 @@
+import React from 'react'
+import { JsonUIFunctions, JsonUIFunctionType } from './appRootFunctions'
+
+interface JsonUIComponentsType {
+  [key: string]: React.ReactNode
+}
+
+interface NewStockType {
+  components: JsonUIComponentsType
+  functions: JsonUIFunctions
+}
+
+type InitType = (prop: NewStockType) => void
+type RegisterFunctionType = (key: string, value: JsonUIFunctionType) => void
+type RegisterComponentType = (key: string, value: React.ReactNode) => void
+type CallFunctionType = (name: string, attr?: any, props?: any, callerArgs?: any) => void
+type GetComponentType = (componentName: string) => React.ReactNode
+
+export default class Stock {
+  stock: NewStockType
+
+  Wrapper: React.ReactNode
+
+  reduxStore: any
+
+  validations: any
+
+  constructor(newStock: NewStockType, Wrapper: React.ReactNode, reduxStore: any) {
+    this.stock = {
+      components: {} as JsonUIComponentsType,
+      functions: {} as JsonUIFunctions,
+    }
+    this.Wrapper = Wrapper
+    this.validations = []
+    this.reduxStore = reduxStore
+    this.init(newStock)
+  }
+
+  init: InitType = ({ components, functions }) => {
+    this.stock.components = {
+      ...this.stock.components,
+      ...components,
+    }
+    this.stock.functions = {
+      ...this.stock.functions,
+      ...functions,
+    }
+  }
+
+  registerComponent: RegisterComponentType = (key, value) => {
+    if (!!key && typeof key === 'string' && key.length > 0 && !(key in this.stock.components)) {
+      this.stock.components[key] = value
+    }
+  }
+
+  registerFunction: RegisterFunctionType = (key, value) => {
+    if (!!key && typeof key === 'string' && key.length > 0 && !(key in this.stock.functions)) {
+      this.stock.functions[key] = value
+    }
+  }
+
+  callFunction: CallFunctionType = (name, attr, props, callerArgs) => {
+    if (!!attr && !!name && name in this.stock.functions) {
+      const result = this.stock.functions[name](attr, props, callerArgs, this)
+      return result
+    }
+    return null
+  }
+
+  getComponent: GetComponentType = (componentName) =>
+    !!componentName && componentName in this.stock.components
+      ? this.stock.components[componentName]
+      : // eslint-disable-next-line no-underscore-dangle
+        this.stock.components._Undefined
+}

package/src/stock/appRootFunctions.ts

@@ -0,0 +1,15 @@
+import { purge } from '../store/root/actions'
+
+export type JsonUIFunctionType = (attr: any, props: any, callerArgs: any, stock: any) => Promise<void> | void | any
+
+export interface JsonUIFunctions {
+  [key: string]: JsonUIFunctionType
+}
+export const deletePersistDataStore: JsonUIFunctionType = async (attr, props, callerArgs, stock) => {
+  stock.reduxStore.dispatch(purge(null))
+  await stock.callFunction('reloadApp', {})
+}
+
+const appRootFunctions: JsonUIFunctions = { deletePersistDataStore }
+
+export default appRootFunctions

package/src/stock/functions.ts

@@ -0,0 +1,25 @@
+import { getStateValue as getStateValueSelector } from '../store/root/selectors'
+import { set as setAction } from '../store/root/actions'
+import { JsonUIFunctionType } from './appRootFunctions'
+import { PathModifiersType } from '../utils/types'
+
+const getStateValue: JsonUIFunctionType = (attr, { currentPaths } = {}, callerArgs, stock) => {
+  const { store, path } = attr
+  const state = stock.reduxStore.getState()
+  return getStateValueSelector(state, { store, path }, currentPaths as PathModifiersType)
+}
+const get: JsonUIFunctionType = (attr, { currentPaths } = {}, callerArgs, stock) => {
+  const { store, path } = attr
+  const state = stock.reduxStore.getState()
+  return getStateValueSelector(state, { store, path }, currentPaths as PathModifiersType)
+}
+const set: JsonUIFunctionType = (attr, props, callerArgs, stock) => {
+  stock.reduxStore.dispatch(
+    setAction({ ...attr, value: attr && attr.value !== undefined ? attr.value : callerArgs[0], currentPaths: props.currentPaths, stock })
+  )
+}
+export default {
+  getStateValue,
+  get,
+  set,
+}

package/src/stock/validation.ts

@@ -0,0 +1,30 @@
+import Ajv, { ErrorObject, JSONSchemaType } from 'ajv'
+import jsonpointer from 'jsonpointer'
+import * as c from '../utils/constants'
+
+const pathConverter = (path: string) => path.replace(/\./g, c.SEPARATOR)
+
+export const errorConverter = (errors: ErrorObject<string, Record<string, any>, unknown>[] | null | undefined) => {
+  const res = {}
+  if (errors) {
+    errors.forEach((i) => {
+      if (i.keyword === 'required') {
+        jsonpointer.set(res, `${pathConverter(`${i.instancePath}.${i.params.missingProperty}`)}/-`, i.message)
+      } else {
+        jsonpointer.set(res, `${pathConverter(i.instancePath)}/-`, i.message)
+      }
+    })
+  }
+  return res
+}
+
+export const validateJSON = (schema: any, store: string, data: any) => {
+  const ajv = new Ajv({ allErrors: true })
+  const validate = ajv.compile(schema as JSONSchemaType<any>)
+  const valid = validate(data)
+  return {
+    store: `${store}${c.STORE_ERROR_POSTFIX}`,
+    valid,
+    value: valid ? null : errorConverter(validate.errors),
+  }
+}

package/src/store/persistConfig.ts

@@ -0,0 +1,20 @@
+import { createTransform } from 'redux-persist'
+import pick from 'lodash/pick'
+import * as c from '../utils/constants'
+
+const SetTransform = createTransform(
+  (inboundState, key) => {
+    if (key !== 'root') return inboundState
+    return pick(inboundState, c.PERSIST_STORAGE_NAMES)
+  },
+  (outboundState, key) => {
+    if (key !== 'root') return outboundState
+    return pick(outboundState, c.PERSIST_STORAGE_NAMES)
+  }
+)
+
+export default {
+  key: 'main',
+  whitelist: ['root'],
+  transforms: [SetTransform],
+}

package/src/store/reducers.ts

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux'
+import root from './root/reducer'
+
+const rootReducer = combineReducers({ root })
+
+export default rootReducer

package/src/store/root/actions.ts

@@ -0,0 +1,12 @@
+export const DATA_UPDATE = 'DATA_UPDATE'
+export const PURGE = 'PURGE'
+
+export const set = (payload: any) => ({
+  type: DATA_UPDATE,
+  payload,
+})
+
+export const purge = (payload: any) => ({
+  type: PURGE,
+  payload,
+})

package/src/store/root/reducer.ts

@@ -0,0 +1,71 @@
+import produce from 'immer'
+import { AnyAction } from 'redux'
+import { ValidationType } from '../../utils/types'
+import * as c from '../../utils/constants'
+import * as util from '../../utils/util'
+import { validateJSON } from '../../stock/validation'
+import { DATA_UPDATE, PURGE } from './actions'
+import Stock from '../../stock/Stock'
+
+export type RootStateType = any
+
+const initialState: RootStateType = {
+  data: {},
+}
+const validateNewState = (stock: InstanceType<typeof Stock>, newState: RootStateType, actionStore: string, actionPath: string) => {
+  if (stock?.validations) {
+    stock.validations.forEach((validateItem: ValidationType) => {
+      if (validateItem.store === actionStore && `${actionPath}`.startsWith(validateItem.path)) {
+        if (validateItem.schema) {
+          const stateToBeValidated = util.jsonPointerGet(newState, `${c.SEPARATOR}${actionStore}${validateItem.path}`)
+          const errors = validateJSON(validateItem.schema, actionStore, stateToBeValidated)
+          // console.log('matched validator', `${c.SEPARATOR}${errors.store}${validateItem.path}`, errors)
+          util.jsonPointerSet(newState, `${c.SEPARATOR}${errors.store}${validateItem.path}`, errors.value)
+        }
+      }
+    })
+  }
+}
+const reducer = (state = initialState, action: AnyAction) => {
+  switch (action.type) {
+    case DATA_UPDATE: {
+      const { store, path, value, jsonataDef, currentPaths, stock } = action.payload
+      if (store && path) {
+        const storekey = `${store}`
+        const convertedPath =
+          currentPaths && currentPaths[storekey] && currentPaths[storekey].path
+            ? util.changeRelativePath(`${currentPaths[storekey].path}${c.SEPARATOR}${path}`)
+            : util.changeRelativePath(path)
+        const absolutePathWithStoreKey = `${c.SEPARATOR}${storekey}${convertedPath}`
+        const newState = produce(state, (draft: RootStateType) => {
+          if (jsonataDef) {
+            try {
+              // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+              const jsonata = require('jsonata')
+              const expression = jsonata(jsonataDef)
+              const newValue = expression.evaluate(value)
+              util.jsonPointerSet(draft, absolutePathWithStoreKey, newValue)
+            } catch (error) {
+              // eslint-disable-next-line no-console
+              console.error('jsonata error', error, jsonataDef)
+              util.jsonPointerSet(draft, absolutePathWithStoreKey, value)
+            }
+          } else {
+            util.jsonPointerSet(draft, absolutePathWithStoreKey, value)
+          }
+          // if validatior has match, need to validate it synchronously
+          validateNewState(stock, draft, store, convertedPath)
+        })
+        return newState
+      }
+      return state
+    }
+    case PURGE: {
+      return initialState
+    }
+    default:
+      return state
+  }
+}
+
+export default reducer

package/src/store/root/selectors.ts

@@ -0,0 +1,61 @@
+import traverse from 'traverse'
+import omit from 'lodash/omit'
+import orderBy from 'lodash/orderBy'
+import * as c from '../../utils/constants'
+import * as util from '../../utils/util'
+import { PathModifiersType, PathType, PropsType } from '../../utils/types'
+import { RootStateType } from './reducer'
+
+export const getState = (state: any): RootStateType => state.root
+
+export const getValue = (state: any, store: string, path: string) => util.jsonPointerGet(state[store], path)
+
+export interface ReduxPathType {
+  store: string
+  path: string
+  isError?: boolean
+}
+
+export const getStateValue = (globalState: any, { store, path, isError = false }: ReduxPathType, currentPaths: PathModifiersType) => {
+  const state = getState(globalState)
+
+  if (store && path) {
+    const convertedPath =
+      currentPaths && currentPaths[store] && currentPaths[store].path ? util.changeRelativePath(`${currentPaths[store].path}${c.SEPARATOR}${path}`) : path
+
+    return getValue(state, `${store}${isError ? c.STORE_ERROR_POSTFIX : ''}`, convertedPath)
+  }
+  return null
+}
+
+export const genAllStateProps = (globalState: any, props: PropsType) => {
+  const { currentPaths } = props
+  const result: PropsType = {}
+  const paths: PathType[] = []
+  // eslint-disable-next-line func-names
+  traverse(omit(props, ['parentComp'])).forEach(function (x) {
+    if (!!x && !!x[c.MODIFIER_KEY] && x[c.MODIFIER_KEY] === 'get' && !(this.path.length > 1 && this.path.includes(c.V_CHILDREN_NAME))) {
+      paths.push({ path: this.path, level: this.level })
+    }
+  })
+  orderBy(paths, ['level'], ['desc']).forEach(async (i) => {
+    const { [c.MODIFIER_KEY]: functionName, ...functionParams } = traverse(props).get(i.path)
+    if (functionName === 'get' && functionParams.store && functionParams.path) {
+      let value = getStateValue(globalState, functionParams, currentPaths as PathModifiersType)
+      if (functionParams.jsonataDef) {
+        try {
+          // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+          const jsonata = require('jsonata')
+          const expression = jsonata(functionParams.jsonataDef)
+          value = expression.evaluate(value)
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('jsonata error', error, functionParams.jsonataDef)
+        }
+      }
+      // traverse(result).set(i.path, value)
+      result[util.pathArrayToJsonPointer(i.path)] = value
+    }
+  })
+  return result
+}

package/src/typings/key-value-replace.d.ts

@@ -0,0 +1,8 @@
+interface KeyValues {
+  [key: string]: string | number | null | undefined | boolean
+}
+
+declare module 'key-value-replace' {
+  function functionProps(str: string, obj: KeyValues, delimiter?: [prefix?: string, postfix?: string]): string
+  export default functionProps
+}

package/src/utils/I18n.ts

@@ -0,0 +1,99 @@
+import Ajv from 'ajv'
+import keyValueReplace from 'key-value-replace'
+
+interface I18nResources {
+  [key: string]: {
+    translation: {
+      [key: string]: string
+    }
+  }
+}
+
+interface I18nProps {
+  language?: string
+  resources?: I18nResources
+  keyPrefix?: string
+  keyPostfix?: string
+  nonExistsHandler?: (key: string) => void
+}
+const I18nSchema = {
+  $id: 'http://example.com/schemas/schema.json',
+  type: 'object',
+  additionalProperties: {
+    type: 'object',
+    properties: {
+      translation: {
+        type: 'object',
+        additionalProperties: {
+          type: 'string',
+        },
+        propertyNames: {
+          type: 'string',
+        },
+        minProperties: 1,
+      },
+      additionalProperties: false,
+    },
+  },
+  propertyNames: {
+    pattern: '^[A-Za-z0-9_-]*$',
+    type: 'string',
+  },
+  minProperties: 1,
+}
+
+export default class I18n {
+  language: string
+
+  languages: string[]
+
+  resources?: I18nResources
+
+  keyPrefix?: string
+
+  keyPostfix?: string
+
+  nonExistsHandler?: (key: string) => void
+
+  availableLanguageKey?: string
+
+  // eslint-disable-next-line consistent-this
+  constructor({ language = 'en', resources, nonExistsHandler, keyPrefix = '{{', keyPostfix = '}}' }: I18nProps) {
+    this.language = language
+    this.nonExistsHandler = nonExistsHandler
+    this.keyPrefix = keyPrefix
+    this.keyPostfix = keyPostfix
+
+    const ajv = new Ajv()
+    const validate = ajv.compile(I18nSchema)
+    const isValid = validate(resources)
+    if (isValid) {
+      this.resources = resources
+    }
+    this.languages = Object.keys(resources as any)
+    if (this.languages && this.languages.includes(this.language)) {
+      this.availableLanguageKey = this.language
+    } else if (this.languages && this.languages.includes(this.getLocales())) {
+      this.availableLanguageKey = this.getLocales()
+    }
+  }
+
+  getLocales = () => (this.language.includes('-') ? this.language.split('-') : this.language.split('_') || [])[0]
+
+  t = (key: string, options?: any, language?: string | null) => {
+    if (!this.resources || (!this.resources && !this.language && !language) || !this.resources[`${this.availableLanguageKey || language}`]) {
+      return key
+    }
+    const value = this.resources[`${this.availableLanguageKey || language}`].translation[key]
+    if (!value) {
+      if (this.nonExistsHandler && typeof this.nonExistsHandler === 'function') {
+        this.nonExistsHandler(key)
+      }
+      return key
+    }
+    if (options) {
+      return keyValueReplace(value, options, [this.keyPrefix, this.keyPostfix])
+    }
+    return value
+  }
+}

package/src/utils/constants.ts

@@ -0,0 +1,21 @@
+export const SEPARATOR = '/'
+export const STORE_ERROR_POSTFIX = '.error'
+
+export const PATH_MODIFIERS_KEY = '$pathModifiers'
+export const MODIFIER_KEY = '$modifier'
+export const ACTION_KEY = '$action'
+export const PERSIST_STORAGE_KEY = '$persistStores'
+export const PERSIST_STORAGE_NAMES = ['data']
+export const REF_ASSETS = '$assetsRef'
+export const REF_LOCALES = '$locales'
+export const REF_VALIDATES = '$validations'
+export const STYLE_WEB_NAME = 'styleWeb'
+export const STYLE_RN_NAME = 'styleRN'
+export const REDUX_FUNCTIONS = ['set', 'get']
+
+export const PATHNAME = 'path'
+export const SIMPLE_DATA_TYPES = ['string', 'number', 'boolean', 'null']
+export const V_CHILDREN_NAME = '$children'
+export const V_COMP_NAME = '$comp'
+export const ITEM_OF_ARRAY = 'item'
+export const PAGINATION_ITEM_PER_PAGE = 1

package/src/utils/contextHandler.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+import Stock from 'stock/Stock'
+
+export const StockContext = createContext<typeof Stock | null>(null)
+export const PathModifierContext = createContext({})

package/src/utils/jsonRefResolver.ts

@@ -0,0 +1,88 @@
+import traverse from 'traverse'
+import uniq from 'lodash/uniq'
+import compact from 'lodash/compact'
+import unset from 'lodash/unset'
+import findIndex from 'lodash/findIndex'
+import pull from 'lodash/pull'
+import defaultsDeep from 'lodash/defaultsDeep'
+import * as c from './constants'
+
+export const collectJsonKeys = (refConst: string, json: any) => {
+  const refs: any[] = []
+  // eslint-disable-next-line func-names
+  traverse(json).forEach(function (x) {
+    if (x && x[refConst] && !!this && !this.circular) {
+      refs.push(x[refConst])
+    }
+  })
+  const res = {}
+  uniq(compact(refs)).forEach((i) => defaultsDeep(res, i))
+  return res
+}
+
+const isFullPath = (path?: string) => {
+  if (!!path && typeof path === 'string') {
+    const regex = /^[A-Za-z]*:\/\//
+    return regex.test(path)
+  }
+  return false
+}
+
+const isRelativePath = (path?: string) => !!path && typeof path === 'string' && !isFullPath(path) && !path.startsWith(c.SEPARATOR) // if not full and not start with /
+
+const isRootPath = (path?: string) => !!path && typeof path === 'string' && !isFullPath(path) && path.startsWith(c.SEPARATOR) // if not full and start with /
+
+const changeRelativePath = (path: string) => {
+  let pathArray = path.split(c.SEPARATOR)
+  pathArray = pull(pathArray, '.') // remove all ./
+  let count = 0
+  let relativepathIndex = -1
+  do {
+    count += 1
+    relativepathIndex = findIndex(pathArray, (i) => i === '..')
+    if (relativepathIndex !== -1) {
+      unset(pathArray, `[${relativepathIndex}]`)
+      unset(pathArray, `[${relativepathIndex - 1}]`)
+      pathArray = compact(pathArray)
+    }
+  } while (relativepathIndex !== -1 && count < 100)
+  return pathArray.join(c.SEPARATOR)
+}
+
+// TODO: just workaround, not works with http://localhost for example
+const getRoot = (url3?: string) => {
+  if (!!url3 && typeof url3 === 'string') {
+    const regex = /^([A-Za-z]*:\/\/[^/]*)(\/|)/
+    const found = url3.match(regex)
+    if (found) {
+      return `${found[1]}/`
+    }
+  }
+  return null
+}
+
+// console.error('test',isFullPath('asdasd://'))
+export const getRefs = (refConst: string, json: any, projectPath = '') => {
+  const refs: any[] = []
+  // eslint-disable-next-line func-names
+  traverse(json).forEach(function (x) {
+    if (x && x[refConst] && !!this && !this.circular) {
+      const ref = x[refConst]
+      let absolutePath
+      // TODO: If the projectPath is absolute, will be wrong
+      if (isRootPath(ref)) {
+        const root = getRoot(projectPath)
+        absolutePath = changeRelativePath(`${root}${ref}`)
+      } else if (isRelativePath(ref)) {
+        absolutePath = changeRelativePath(`${projectPath}${ref}`)
+      } else {
+        absolutePath = ref
+      }
+      // eslint-disable-next-line no-param-reassign
+      x[refConst] = absolutePath
+      refs.push(absolutePath)
+    }
+  })
+  // console.warn(refs);
+  return uniq(compact(refs))
+}

package/src/utils/types.ts

@@ -0,0 +1,35 @@
+import React from 'react'
+import * as c from 'utils/constants'
+
+export type UIDefinition = any
+export type Path = string
+export type ArraysType = any[]
+export type WrapperType = React.ElementType
+
+// eslint-disable-next-line no-use-before-define
+export type PropValue = PropsType | ArraysType | string | null | boolean | number | undefined | PathModifiersType
+
+export interface PathModifierType {
+  path: string
+}
+export interface PathModifiersType {
+  [key: string]: PathModifierType
+}
+
+export interface PropsType {
+  [key: string]: PropValue
+  [c.PATH_MODIFIERS_KEY]?: PathModifiersType
+}
+
+export interface PathType {
+  path: string[]
+  level: number
+}
+
+export type PathsType = PathType[]
+
+export interface ValidationType {
+  store: string
+  path: string
+  schema: any
+}