@startupjs-ui/form 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/form
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Bug Fixes
+
+* **form:** move useFormFields and useFormFileds$ from core into form package ([949493e](https://github.com/startupjs/startupjs-ui/commit/949493e89316e73b5cabb97480184ef30648e55a))
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **form:** refactor Form component ([8c54f9b](https://github.com/startupjs/startupjs-ui/commit/8c54f9bcbd01ec6474bcb9e082951ddc6306fae7))

package/README.mdx

@@ -0,0 +1,243 @@
+import { useMemo } from 'react'
+import Form, { _PropsJsonSchema as FormPropsJsonSchema } from './index'
+import { $ } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Form
+
+Wrapper around ObjectInput which provides a way to add extra input types and saves its props into the context.
+
+```jsx
+import { Form } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const $value = $({})
+
+return (
+  <Form
+    $value={$value}
+    fields={{
+      name: {
+        type: 'string',
+        label: 'Your name',
+        required: true,
+        placeholder: 'John Smith'
+      },
+      gender: {
+        type: 'string',
+        enum: ['male', 'female', 'other']
+      },
+      age: {
+        type: 'number',
+        description: 'Your age (18+)',
+        min: 18,
+        max: 100,
+        step: 1
+      }
+    }}
+  />
+)
+```
+
+## Custom inputs
+
+Pass custom inputs to the `Form` using the `customInputs` prop.
+
+Inside custom inputs you can access Form's props using the `useFormProps` hook.
+
+```jsx
+import { observer } from 'startupjs'
+import { Form, useFormProps, NumberInput } from 'startupjs-ui'
+
+function App () {
+  const minAge = 18
+  const $value = $({})
+  return (
+    <Form
+      minAge={minAge}
+      $value={$value}
+      customInputs={{
+        age: CustomAgeInput
+      }}
+      fields={{
+        age: {
+          type: 'number',
+          input: 'age',
+          description: 'Your age (18+)'
+        }
+      }}
+    />
+  )
+}
+
+const CustomAgeInput = observer(({ $value, ...props }) => {
+  const { minAge } = useFormProps()
+  function setAge (age) {
+    if (age < minAge) return minAge
+    $value.set(age)
+  }
+  return <NumberInput value={$value.get()} onChangeNumber={setAge} {...props} />
+})
+```
+
+### Adding custom inputs globally
+
+You can add custom inputs globally by creating a plugin which uses the client's `customFormInputs` hook.
+
+You should return an object with the custom inputs in this hook.
+
+```jsx
+// startupjs.config.js
+import { observer } from 'startupjs'
+import { NumberInput } from 'startupjs-ui'
+import { createPlugin } from 'startupjs/registry'
+
+export default {
+  plugins: {
+    // if there are no plugin options, just specify `true` to enable the plugin.
+    myCustomInputs: {
+      minAge: 18
+    }
+  }
+}
+
+createPlugin({
+  name: 'myCustomInputs',
+  client: ({ minAge }) => ({
+    customFormInputs: () => ({
+      age: observer(({ $value }) => {
+        function setAge (age) {
+          if (age < minAge) age = minAge
+          $value.set(age)
+        }
+        return <NumberInput value={$value.get()} onChangeNumber={setAge} />
+      })
+    })
+  })
+})
+```
+
+Jxs will look like this:
+
+```jsx
+import { observer } from 'startupjs'
+import { Form } from 'startupjs-ui'
+
+function App () {
+  const $value = $({})
+
+  return (
+    <Form
+      $value={$value}
+      fields={{
+        age: {
+          type: 'number',
+          input: 'age'
+          description: 'Your age (18+)'
+        }
+      }}
+    />
+  )
+}
+```
+
+We pass all necessary constants as options to the plugin (in our case, it's minAge).
+In the form we define the type according to its actual type (in our case, it will be number),
+and we also add an input property, which will have a custom type derived from the plugin (in our case, it's 'age').
+
+## JSON-Schema compatilibily
+
+`fields` prop is json-schema compatible.
+
+If you want to specify both the json-schema type and the input type, you can use `input` prop in addition to the `type` prop.
+
+## Validation
+
+By default `Form` does not run any validation.
+
+By passing `validate={true}` it will use the `fields` (which is json-schema compatible) to always validate your form and reactively show any errors.
+
+```jsx
+<Form validate={true} />
+```
+
+### `useValidate()`
+
+To trigger validation manually, use `useValidate()` hook.
+
+It will return the `validate` function which you can call manually to run the validation. It will return `true` if validation has passed (there are NO errors).
+
+If there are errors, they will be available in `validate.hasErrors` (`true` or `false`) and `validate.errors` (errors themselves as an object of field names and an array of errors: `{ name: ['This field is required'], age: ['must be above 18'] }`)
+
+### `useValidate({ always: true })`
+
+By default, only after the first manual `validate()` call the `Form` will start showing errors and update them reactively (on each change to the form).
+
+If you want the `Form` to start showing errors right away and update them reactively as soon as it renders, pass an `always: true` option to the hook.
+
+This will effectively make the `Form` behave as if `validate={true}` was passed but also give you access to the `validate` function to manually call it when needed.
+
+### Example with errors validation
+
+```jsx
+import { $ } from 'startupjs'
+import { useValidate, Form, Button } from 'startupjs-ui'
+
+const fields = {
+  name: { type: 'string', required: true },
+  age: { type: 'number' }
+}
+const { $newUser } = $.session
+
+export default function App () {
+  const validate = useValidate()
+
+  function submit () {
+    if (!validate()) return
+    console.log('Create new user', $newUser.get())
+  }
+
+  return [
+    <Form fields={fields} $value={$newUser} validate={validate} />,
+    <Button disabled={validate.hasErrors} onPress={submit}>Submit</Button>
+  ]
+}
+```
+
+## Sandbox
+
+export function SandboxWrapper () {
+  const $value = $()
+  const fields = useMemo(() => ({
+    name: {
+      type: 'string',
+      label: 'Your name',
+      required: true,
+      placeholder: 'John Smith'
+    },
+    age: {
+      type: 'number',
+      description: 'Your age (18+)',
+      min: 18,
+      max: 100,
+      step: 1
+    }
+  }), [])
+
+  return (
+    <Sandbox
+      Component={Form}
+      propsJsonSchema={FormPropsJsonSchema}
+      props={{
+        $value,
+        fields
+      }}
+      block
+    />
+  )
+}
+
+<SandboxWrapper />

package/index.d.ts

@@ -0,0 +1,48 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export declare const _PropsJsonSchema: {};
+export interface FormProps {
+    /** Schema describing form fields (json-schema compatible) */
+    fields?: Record<string, any>;
+    /** Reactive schema (overrides `fields`) */
+    $fields?: any;
+    /** Reactive errors model (managed by validation) */
+    $errors?: any;
+    /** Styles for the wrapper */
+    style?: StyleProp<ViewStyle>;
+    /** Styles for the inner input container */
+    inputStyle?: StyleProp<ViewStyle>;
+    /** Order of rendered fields */
+    order?: string[];
+    /** Render inputs in a row */
+    row?: boolean;
+    /** Explicit errors object (overrides `$errors`) */
+    errors?: Record<string, any>;
+    /** Custom inputs by type key */
+    customInputs?: Record<string, any>;
+    /** Custom wrapper renderer for inputs */
+    _renderWrapper?: (params: {
+        style: StyleProp<ViewStyle> | undefined;
+    }, children: ReactNode) => ReactNode;
+    /** Enable validation or pass validate hook from useValidate */
+    validate?: boolean | any;
+    /** Disable interactions */
+    disabled?: boolean;
+    /** Render as read-only */
+    readonly?: boolean;
+    /** Model binding for form values */
+    $value: any;
+    /** Do not use; pass `fields` instead (will throw if set) */
+    properties?: Record<string, any>;
+    /** Additional props passed to custom inputs via `useFormProps` */
+    [key: string]: any;
+}
+declare const _default: import("react").ComponentType<FormProps>;
+export default _default;
+export { default as useFormProps } from './useFormProps';
+export { default as useValidate } from './useValidate';
+export { default as useFormFields } from './useFormFields';
+export { default as useFormFields$ } from './useFormFields$';

package/index.tsx

@@ -0,0 +1,164 @@
+import { useMemo, useCallback, useState, useId, useRef, type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer, $ } from 'startupjs'
+import ObjectInput from '@startupjs-ui/object-input'
+import { CustomInputsContext } from '@startupjs-ui/input'
+import _debounce from 'lodash/debounce'
+import { FormPropsContext } from './useFormProps'
+import { Validator } from './useValidate'
+
+export const _PropsJsonSchema = {/* FormProps */}
+
+export interface FormProps {
+  /** Schema describing form fields (json-schema compatible) */
+  fields?: Record<string, any>
+  /** Reactive schema (overrides `fields`) */
+  $fields?: any
+  /** Reactive errors model (managed by validation) */
+  $errors?: any
+  /** Styles for the wrapper */
+  style?: StyleProp<ViewStyle>
+  /** Styles for the inner input container */
+  inputStyle?: StyleProp<ViewStyle>
+  /** Order of rendered fields */
+  order?: string[]
+  /** Render inputs in a row */
+  row?: boolean
+  /** Explicit errors object (overrides `$errors`) */
+  errors?: Record<string, any>
+  /** Custom inputs by type key */
+  customInputs?: Record<string, any>
+  /** Custom wrapper renderer for inputs */
+  _renderWrapper?: (params: { style: StyleProp<ViewStyle> | undefined }, children: ReactNode) => ReactNode
+  /** Enable validation or pass validate hook from useValidate */
+  validate?: boolean | any
+  /** Disable interactions */
+  disabled?: boolean
+  /** Render as read-only */
+  readonly?: boolean
+  /** Model binding for form values */
+  $value: any
+  /** Do not use; pass `fields` instead (will throw if set) */
+  properties?: Record<string, any>
+  /** Additional props passed to custom inputs via `useFormProps` */
+  [key: string]: any
+}
+
+function Form ({
+  fields = {},
+  $fields,
+  $errors,
+  properties,
+  order,
+  row,
+  errors,
+  _renderWrapper,
+  validate,
+  style,
+  inputStyle,
+  customInputs = {},
+  ...props
+}: FormProps): ReactNode {
+  if (properties) throw Error(ERROR_PROPERTIES)
+  const { disabled, readonly, $value } = props
+  if (!$value) throw Error('<Form />: $value prop is required')
+
+  const formId = useId()
+  const forceUpdate = useForceUpdate()
+
+  const memoizedFields = useMemo(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    () => fields, [JSON.stringify(fields)]
+  )
+
+  if (!$errors) $errors = $() // eslint-disable-line react-hooks/rules-of-hooks
+  const validator = useMemo(() => new Validator(), [])
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useMemo(() => {
+    validator.init({
+      fields: $fields?.get() || memoizedFields,
+      getValue: () => $value.get(),
+      $errors,
+      forceUpdate,
+      formId
+    })
+  }, [JSON.stringify(memoizedFields), $fields, $value, $errors, forceUpdate, formId]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const memoizedProps = useMemo(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    () => props, [...Object.keys(props), ...Object.values(props)]
+  )
+
+  const memoizedCustomInputs = useMemo(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    () => customInputs, [...Object.keys(customInputs), ...Object.values(customInputs)]
+  )
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedValidate = useCallback(
+    _debounce(() => validator.run(), 30, { leading: false, trailing: true }),
+    [validator]
+  )
+
+  // TODO: $(fn, triggerFn)
+  // $(() => JSON.stringify($value.get()), debouncedValidate)
+  useRef<any>($(() => {
+    JSON.stringify($value.get())
+    debouncedValidate()
+  }))
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useMemo(() => {
+    // if validate prop is set, trigger validation right away on mount.
+    if (validate === true) {
+      validator.activate()
+      validator.run()
+    } else if (typeof validate === 'function') {
+      validate.reset()
+      validate.init({ validator, formId })
+      if (validate.always) {
+        validator.activate()
+        validator.run()
+      }
+      // when Form is unmounted, reset the parent's validate
+      return () => validate.reset({ formId })
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return pug`
+    FormPropsContext.Provider(value=memoizedProps)
+      CustomInputsContext.Provider(value=memoizedCustomInputs)
+        ObjectInput(
+          properties=$fields?.get() || memoizedFields
+          $value=$value
+          order=order
+          row=row
+          errors=errors || $errors.get()
+          style=style
+          inputStyle=inputStyle
+          _renderWrapper=_renderWrapper
+          disabled=disabled
+          readonly=readonly
+        )
+  `
+}
+
+export default observer(Form)
+
+export { default as useFormProps } from './useFormProps'
+export { default as useValidate } from './useValidate'
+export { default as useFormFields } from './useFormFields'
+export { default as useFormFields$ } from './useFormFields$'
+
+function useForceUpdate (): () => void {
+  const [, setState] = useState(Math.random())
+  return useCallback(() => {
+    setState(Math.random())
+  }, [])
+}
+
+const ERROR_PROPERTIES = `
+  Form: 'properties' prop can only be used directly in ObjectInput.
+        Use 'fields' instead
+`

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@startupjs-ui/form",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/input": "^0.1.3",
+    "@startupjs-ui/object-input": "^0.1.3",
+    "lodash": "^4.17.20"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}

package/useFormFields$.ts

@@ -0,0 +1,24 @@
+import { useRef, useMemo } from 'react'
+import { $ } from 'startupjs'
+import useFormFields from './useFormFields'
+
+export default function useFormFields$ (schema: any, options?: Record<string, any>): any {
+  const firstRenderRef = useRef(true)
+  const prevFieldsRef = useRef<any>(undefined)
+  const fields = useFormFields(schema, options ?? {})
+  const $fields = $(fields)
+
+  const [firstRender, prevFields] = useMemo(() => {
+    const firstRender = firstRenderRef.current
+    firstRenderRef.current = false
+    const prevFields = prevFieldsRef.current
+    prevFieldsRef.current = fields
+    return [firstRender, prevFields]
+  }, [JSON.stringify(fields)]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!firstRender && prevFields !== fields) {
+    $fields.set(fields)
+  }
+
+  return $fields
+}

package/useFormFields.ts

@@ -0,0 +1,12 @@
+import { useMemo } from 'react'
+import { pickFormFields } from 'startupjs'
+
+export default function useFormFields (
+  schema: any,
+  options: Record<string, any> = {}
+): Record<string, any> {
+  return useMemo(() => {
+    const fields = pickFormFields(schema, options)
+    return JSON.parse(JSON.stringify(fields))
+  }, [schema, JSON.stringify(options)]) // eslint-disable-line react-hooks/exhaustive-deps
+}

package/useFormProps.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext, useState } from 'react'
+
+export const FormPropsContext = createContext<Record<string, any> | undefined>(undefined)
+
+export default function useFormProps (): Record<string, any> {
+  // useState is used to avoid re-creating the object on every render
+  const [empty] = useState<Record<string, any>>({})
+  return useContext(FormPropsContext) ?? empty
+}

package/useValidate.ts

@@ -0,0 +1,258 @@
+import { useMemo, useState, useCallback } from 'react'
+import { transformSchema, ajv } from 'startupjs/schema'
+import _set from 'lodash/set'
+import _get from 'lodash/get'
+
+export default function useValidate (
+  { always = false }: { always?: boolean } = {}
+): any {
+  const forceUpdate = useForceUpdate()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(() => createValidateWrapper({ always, forceUpdate }), [])
+}
+
+function createValidateWrapper (
+  { always, forceUpdate }: { always: boolean, forceUpdate: () => void }
+): any {
+  const _validate = new Validate({ always, forceUpdate })
+  function validate (): boolean | undefined {
+    if (!_validate.hasValidator()) throw Error(ERRORS.notInitialized)
+    _validate.activate()
+    return _validate.run()
+  }
+  // wrap 'validate' function into Proxy to make it behave like an instance of Validate class
+  // while still being callable directly
+  const methods = new WeakMap<(...args: any[]) => any, (...args: any[]) => any>()
+  return new Proxy(validate, {
+    get (target, prop: string | symbol) {
+      // This is a hack to force update the component the parent component when the errors change
+      // if the parent component is using the errors prop to render something
+      // (like disabling a Submit button when there are errors)
+      // TODO: _shouldForceUpdate should correctly reset back to false if Form unmounts
+      if (prop === 'errors') {
+        _validate.makeReactive()
+        return _validate.getErrors()
+      } else if (prop === 'hasErrors') {
+        _validate.makeReactive()
+        return _validate.getHasErrors()
+      }
+      let res = Reflect.get(_validate as unknown as object, prop)
+      // bind methods called on validate (which is a function) to the _validate object
+      if (typeof res === 'function') {
+        if (!methods.has(res)) methods.set(res, res.bind(_validate))
+        res = methods.get(res)
+      }
+      return res
+    }
+  })
+}
+
+function useForceUpdate (): () => void {
+  const [, setState] = useState(Math.random())
+  // parent component's forceUpdate might be called from a child component
+  // so we need to use setTimeout to make sure it runs asynchronously
+  return useCallback(() => {
+    setTimeout(() => {
+      setState(Math.random())
+    }, 0)
+  }, [])
+}
+
+const ERRORS = {
+  notInitialized: `
+    useValidate():
+    'validate' is not initialized with the Form component.
+
+    You must pass 'validate' from useValidate()
+    to the 'validate' prop of the Form component:
+
+    const validate = useValidate()
+    <Form validate={validate} ... />
+  `
+}
+
+class Validate {
+  always: boolean
+
+  private _isReactive?: boolean
+  private _lastHasErrors?: boolean
+  private readonly _forceUpdate: () => void
+  private _validator?: Validator
+  private _formId?: string
+
+  constructor ({ forceUpdate, always }: { forceUpdate: () => void, always: boolean }) {
+    this._forceUpdate = forceUpdate
+    this.always = always
+  }
+
+  init ({ validator, formId }: { validator: Validator, formId: string }): void {
+    this._validator = validator
+    this._formId = formId
+    this._validator.onHasErrorsChange = ({ formId }: { formId?: string } = {}) => {
+      // only the Form which is currently associated with this 'validate' can force an update
+      if (formId && formId !== this._formId) return
+      if (this._isReactive) this._forceUpdate()
+    }
+  }
+
+  activate (): void {
+    this._validator?.activate()
+  }
+
+  deactivate (): void {
+    this._validator?.deactivate()
+  }
+
+  makeReactive (): void {
+    this._isReactive = true
+  }
+
+  hasValidator (): boolean {
+    return !!this._validator
+  }
+
+  run (): boolean | undefined {
+    if (!this._validator) throw Error('Validator is not set')
+    return this._validator.run()
+  }
+
+  getErrors (): any {
+    return this._validator?.getErrors()
+  }
+
+  getHasErrors (): boolean | undefined {
+    const hasErrors = this._validator?.getHasErrors()
+    this._lastHasErrors = hasErrors
+    return hasErrors
+  }
+
+  reset ({ formId }: { formId?: string } = {}): void {
+    // if formId is set, reset only if it matches the formId currently associated with this 'validate'.
+    // This prevents race conditions when a Form is unmounted and another Form is mounted right away
+    // which uses the same 'validate' prop.
+    // Only one Form can be associated with one 'validate' at a time.
+    // TODO: add check to init() to prevent multiple Forms from using the same 'validate'.
+    if (formId && formId !== this._formId) return
+    this._validator = undefined
+    this._formId = undefined
+    if (this._lastHasErrors) {
+      this._lastHasErrors = undefined
+      if (this._isReactive) this._forceUpdate()
+    }
+  }
+}
+
+export class Validator {
+  onHasErrorsChange?: (args?: { formId?: string }) => void
+
+  private _active?: boolean
+  private _validate?: any
+  private _getValue?: () => any
+  private _hasErrors?: boolean
+  private _$errors?: any
+  private _initialized?: boolean
+  private _forceUpdate?: () => void
+  private _formId?: string
+
+  init ({
+    fields, // either simplified schema or full schema
+    getValue, // obtain current value to validate (usually it will be from a closure of Form component)
+    $errors, // reactive object to store errors, this is basically a hack to use model's .setDiffDeep()
+    forceUpdate, // force update Form itself
+    formId
+  }: {
+    fields: Record<string, any> | any
+    getValue: () => any
+    $errors: any
+    forceUpdate: () => void
+    formId: string
+  }): void {
+    let schema = fields
+    // we allow extra properties in Form to let people just pass the full document
+    // instead of forcing them to pick only the fields used in schema
+    schema = transformSchema(schema, { additionalProperties: true })
+    this._validate = ajv.compile(schema)
+    this._getValue = getValue
+    this._$errors = $errors
+    this._forceUpdate = forceUpdate
+    this._formId = formId
+    this._initialized = true
+  }
+
+  activate (): void {
+    this._active = true
+  }
+
+  deactivate (): void {
+    this._active = false
+  }
+
+  getErrors (): any {
+    return this._$errors?.get()
+  }
+
+  getHasErrors (): boolean | undefined {
+    return this._hasErrors
+  }
+
+  run (): boolean | undefined {
+    if (!this._active) return
+    if (!this._initialized) throw Error('Validator is not initialized')
+    const valid = this._validate(this._getValue?.())
+    if (valid) {
+      if (this._hasErrors) {
+        this._hasErrors = undefined
+        this._$errors?.del()
+        this._forceUpdate?.()
+        this.onHasErrorsChange?.({ formId: this._formId })
+      }
+      return true
+    } else {
+      const newErrors = transformAjvErrors(this._validate.errors)
+      const hadErrors = this._hasErrors
+      this._hasErrors = true
+      this._$errors?.set(newErrors)
+      if (!hadErrors) {
+        this._forceUpdate?.()
+        this.onHasErrorsChange?.({ formId: this._formId })
+      }
+      return false
+    }
+  }
+}
+
+// transform errors from ajv to our format
+function transformAjvErrors (errors?: any[]): Record<string, any> {
+  const res: Record<string, any> = {}
+
+  for (const error of errors ?? []) {
+    let path: any
+    let message: any
+
+    // Handling errors related to required fields
+    // since required errors are declared at the root of the schema,
+    // the instancePath for them is ''
+    if (error.instancePath === '') {
+      if (error.keyword === 'required') {
+        path = error.params.missingProperty
+        message = 'This field is required'
+      } else if (
+        error.keyword === 'errorMessage' &&
+        error.params.errors[0].keyword === 'required'
+      ) {
+        // Handling ajv-errors errors
+        // ajv-errors generates the 'errorMessage' keyword with params.errors
+        path = error.params.errors[0].params.missingProperty
+        message = error.message
+      }
+    } else {
+      // Handling other types of errors
+      path = error.instancePath.replace(/^\//, '').split('/')
+      message = error.message
+    }
+    if (!_get(res, path)) _set(res, path, [])
+    _get(res, path).push(message)
+  }
+
+  return res
+}