@codeleap/form 4.3.9 → 5.0.0

package/src/types.ts

@@ -1,268 +0,0 @@
-import { ReactNode } from 'react'
-import { Join, Paths, Prev } from '@codeleap/types'
-import * as yup from 'yup'
-import { WebInputFile, MobileInputFile, DeepPartial, RNMaskedTextTypes } from '../../types'
-import { AnyObject } from 'yup/lib/object'
-
-type ValidationReturn = { message?: Label; valid?: boolean }
-
-export type ValidatorFunction<T = any, F = any> = (
-  value: T,
-  formValues: F
-) => ValidationReturn
-export type ValidatorFunctionWithoutForm<T = any> = (
-  value: T
-) => ValidationReturn
-
-export type WithTransformer<T> = {
-  transformer: (value: T) => any
-}
-export type Validator<T> = T extends boolean
-  ?
-      | ValidatorFunction<true>
-      | ValidatorFunction<false>
-      | yup.BooleanSchema<boolean, AnyObject, true>
-      | yup.BooleanSchema<boolean, AnyObject, false>
-  : ValidatorFunction<T> | yup.SchemaOf<T>
-
-export type ValidatorWithoutForm<T> = T extends boolean
-  ?
-      | ValidatorFunction<true>
-      | ValidatorFunction<false>
-      | yup.BooleanSchema<boolean, AnyObject, true>
-      | yup.BooleanSchema<boolean, AnyObject, false>
-  : ValidatorFunctionWithoutForm<T> | yup.SchemaOf<T>
-
-export type Options<T> = { label: Label; value: T }[]
-export type Option<T> = Options<T>[number]
-type FormValidateOn = 'change'
-
-export type FormOutput = 'json'
-
-export type CommonSliderTypes = {
-  min?: number
-  max?: number
-  trackMarks?: number[] | Record<string|number, string>
-}
-
-type Mask = Partial<RNMaskedTextTypes.TextInputMaskProps> &{
-  saveFormatted?: boolean
-}
-
-export type InputValueTypes = {
-  checkbox: boolean
-  switch: boolean
-  text: string
-  select: any
-  radio: any
-  file: AnyFile
-  multipleFile: AnyFile[]
-  'range-slider': number[]
-  slider: number[]
-  list: any[]
-  date: Date
-  number: number
-}
-export type Label = string | ReactNode
-
-export type CheckboxField = {
-  type: 'checkbox'
-  defaultValue: boolean
-  validate?: Validator<boolean>
-  required?: boolean
-} & WithTransformer<boolean>
-
-export type SwitchField = {
-  type: 'switch'
-  defaultValue: boolean
-  validate?: Validator<boolean>
-  required?: boolean
-} & WithTransformer<boolean>
-
-export type ListField<T = any> = {
-  type: 'list'
-  defaultValue: T[]
-  validate?: Validator<T[]>
-  required?: boolean
-  options?: Options<T>
-  placeholder?: string
-} & WithTransformer<T[]>
-
-export type SliderField = {
-  type: 'slider'
-  defaultValue: number
-  validate?: Validator<number>
-  required?: boolean
-
-} & CommonSliderTypes & WithTransformer<number>
-
-export type RangeSliderField = {
-  type: 'range-slider'
-  defaultValue: number[]
-  validate?: Validator<number[]>
-  required?: boolean
-} & CommonSliderTypes & WithTransformer<number[]>
-
-export type TextField = {
-  type: 'text'
-  password?: boolean
-  defaultValue: string
-  placeholder?: string
-  validate?: Validator<string>
-  required?: boolean
-  masking?: Mask
-  multiline?: boolean
-} & WithTransformer<string>
-export type NumberField = {
-  type: 'number'
-
-  defaultValue: number
-  placeholder?: string
-  validate?: Validator<number>
-  required?: boolean
-  precision?: number
-  masking?: Mask
-  min?: number
-  max?: number
-
-} & WithTransformer<number>
-export type SelectField<T = any> = {
-  type: 'select'
-  options: Options<T>
-  defaultValue: T
-  native?: boolean
-  placeholder?: string
-  validate?: Validator<T>
-  required?: boolean
-} & WithTransformer<T>
-
-export type RadioField<T = any> = {
-  type: 'radio'
-  options: Options<T>
-  defaultValue: T
-  validate?: Validator<T>
-  required?: boolean
-} & WithTransformer<T>
-
-export type AnyFile = WebInputFile | MobileInputFile|string|number
-export type FileField = {
-  type: 'file'
-  allow?: string[]
-  defaultValue: AnyFile
-  imageToBase64?: boolean
-  multiple?: boolean
-  validate?: Validator<AnyFile>
-  required?: boolean
-} & WithTransformer<AnyFile>
-
-export type MultipleFileField = {
-  type: 'multipleFile'
-  allow?: string[]
-  defaultValue: AnyFile[]
-  imageToBase64?: boolean
-  multiple?: boolean
-  validate?: Validator<AnyFile[]>
-  required?: boolean
-} & WithTransformer<AnyFile[]>
-
-export type DateField = {
-  type: 'date'
-  defaultValue: Date
-  validate?: Validator<Date>
-  required?: boolean
-  minimumDate?: Date
-  maximumDate?: Date
-} & WithTransformer<Date>
-
-export type AllFields =
-  | CheckboxField
-  | SwitchField
-  | TextField
-  | SelectField
-  | RadioField
-  | FileField
-  | SliderField
-  | RangeSliderField
-  | ListField
-  | NumberField
-  | MultipleFileField
-  | DateField
-
-export type FormField = {
-  disabled?: boolean
-  label?: Label
-  autoCapitalize?: boolean | string
-  keyboardType?: string
-  returnKeyType?: string
-  textContentType?: string
-  autoComplete?: string
-  description?: Label
-  debugName?: string
-  required?: boolean
-  debounce?: number
-  componentProps?: any
-
-} & AllFields
-
-export type FieldsMap = Record<string, Partial<FormField>>
-
-export type ResolveOptionsFieldValidation<
-  T extends RadioField<any> | SelectField<any>
-> = T extends RadioField<any>
-  ? RadioField<T['options'][number]['value']>
-  : SelectField<T['options'][number]['value']>
-
-export type ValidateFieldsMap<T extends FieldsMap> = {
-  [Property in keyof T]: T[Property] extends RadioField<any> | SelectField<any>
-    ? ResolveOptionsFieldValidation<T[Property]>
-    : T[Property];
-}
-
-export type FormConfig<T extends FieldsMap> = ValidateFieldsMap<T>
-
-export type FlattenFields<T extends FieldsMap> = {
-  [Property in keyof T]: T[Property] extends RadioField<any> | SelectField
-    ? T[Property]['options'][number]['value']
-    : InputValueTypes[T[Property]['type']];
-}
-
-export type MapValues<T extends FieldsMap> = {
-  [Property in keyof T]: T[Property] extends RadioField<any> | SelectField
-    ? T[Property]['options'][number]['value']
-    : InputValueTypes[T[Property]['type']];
-}
-
-export type CreateFormReturn<T extends FieldsMap> = {
-  config: T
-  defaultValue: MapValues<ValidateFieldsMap<T>>
-  staticFieldProps: Record<string, any>
-  name: string
-  numberOfTextFields: number
-}
-
-export type FormStep<Keys extends string = string> = 'setValue' | 'validate' | `validate.${Keys}` | `setValue.${Keys}`
-export type UseFormConfig<T extends Record<string, any>> = {
-  log?: FormStep<Exclude<keyof T, symbol|number>>[]
-  initialState?: DeepPartial<T>
-  validateOn?: 'change' | 'none'
-}
-
-export type PathsWithValues<T, D extends number = 2> = [D] extends [never]
-  ? never
-  : T extends Record<string, any>
-    ? {
-        [K in keyof T]-?: K extends string | number
-          ?
-              | [`${K}`, T[K]]
-              | [
-                Join<K, Paths<T[K], Prev[D]>>,
-                T[K] extends FlattenFields<any> ? T[K][keyof T[K]] : T[K]
-              ]
-          : never;
-      }[keyof T]
-    : ''
-
-export type FormShape<Form extends CreateFormReturn<any>> = MapValues<Form['config']>
-export type FormSetters<Values> = {
-  [Property in keyof Values]: (value: Values[Property]) => void
-}

package/src/useForm.ts

@@ -1,269 +0,0 @@
-import * as FormTypes from './types'
-import { TypeGuards } from '@codeleap/types'
-import { deepGet, deepSet, deepMerge } from '@codeleap/utils'
-import { usePartialState, useMemo } from '@codeleap/hooks'
-import { FunctionType } from '../../types'
-import { createRef, useCallback, useRef } from 'react'
-import { useI18N } from '@codeleap/i18n'
-
-export * as FormTypes from './types'
-
-function testBrowser() {
-  try {
-    // @ts-ignore
-    return typeof localStorage !== 'undefined'
-  } catch {
-    return false
-  }
-}
-
-const isBrowser = testBrowser()
-
-const SCOPE = 'useForm'
-
-const shouldLog = (
-  x: FormTypes.FormStep,
-  config: FormTypes.UseFormConfig<any>,
-) => {
-  return (config.log || []).includes(x)
-}
-
-export function useForm<
-  Form extends FormTypes.CreateFormReturn<any>,
-  FieldPaths extends FormTypes.PathsWithValues<
-    FormTypes.FlattenFields<Form['config']>
-  >,
-  Values extends FormTypes.MapValues<Form['config']> = FormTypes.MapValues<
-    Form['config']
-  >
->(formParam: (() => Form) | Form, formConfig: FormTypes.UseFormConfig<Values> = {}) {
-
-  const i18n = useI18N()
-
-  const form = useMemo(() => {
-    return TypeGuards.isFunction(formParam) ? formParam() : formParam
-  }, [formParam, i18n?.locale])
-
-  const config:FormTypes.UseFormConfig<Values> = {
-    validateOn: 'change',
-    ...formConfig,
-  }
-
-  const getInitialState = useCallback(() => {
-    return deepMerge(form.defaultValue, config.initialState || {}) as Values
-  }, [form.defaultValue, config.initialState])
-
-  const getInitialErrors = useCallback(() => {
-    const errors = Object.keys(form.staticFieldProps).map((key) => [key, ''])
-
-    return Object.fromEntries(errors)
-  }, [form.staticFieldProps])
-
-  const [formValues, setFormValues] = usePartialState<Values>(getInitialState)
-  const [fieldErrors, setFieldErrors] = usePartialState(getInitialErrors)
-  // @ts-ignore
-  function setFieldValue(...args: FieldPaths) {
-    // @ts-ignore
-    const transform = form?.staticFieldProps[args[0]]?.transformer || (x => x)
-    // @ts-ignore
-    const val = deepSet([args[0], transform(args[1])])
-
-    if (shouldLog('setValue', config) || shouldLog(`setValue.${args[0]}`, config)) {
-      // @ts-ignore
-      logger.log(
-        // @ts-ignore
-        `Set ${form.name}/${args[0]} to ${String(args[1])}`,
-        '',
-        SCOPE,
-      )
-    }
-    setFormValues(val)
-  }
-
-  function validateField(field: FieldPaths[0], set = false, val?: any) {
-    // @ts-ignore
-    const { validate } = form.staticFieldProps[field as string]
-
-    if (validate) {
-      const value = val !== undefined ? val : deepGet(field, formValues)
-      // @ts-ignore
-      const result = validate(
-        value,
-        formValues,
-      )
-      if (set) {
-        setFieldErrors(() => ({
-          [field]: result.valid ? '' : result.message,
-        }))
-      }
-
-      return result
-    }
-
-    return {
-      valid: true,
-      message: '',
-    }
-  }
-
-  function validateMultiple<T extends readonly FieldPaths[0][]>(fields: T, set = false) {
-    // @ts-ignore
-    const results = fields.map((field) => [field, validateField(field, set)])
-
-    const overallValid = results.every(([, result]) => result.valid)
-
-    const fieldResults = Object.fromEntries(results) as Record<T[number], ReturnType<FormTypes.ValidatorFunction>>
-
-    return {
-      valid: overallValid,
-      results: fieldResults,
-    }
-  }
-
-  function validateAll(set = false) {
-    const errors = { ...fieldErrors }
-    for (const [path] of Object.entries(form.staticFieldProps)) {
-      const result = validateField(path)
-      errors[path] = result.valid ? '' : result?.message
-    }
-
-    if (set) {
-      setFieldErrors(errors)
-    }
-    return Object.values(errors).join('').length === 0
-  }
-
-  const inputRefs = useRef([])
-
-  function focus(idx:number) {
-    // if (!(idx < inputRefs.current.length)) return
-    const nextRef = inputRefs?.current?.[idx]?.current
-    if (nextRef?.focus && nextRef?.isTextInput) {
-      nextRef.focus?.()
-    }
-  }
-
-  const registeredFields = useRef([])
-  let registeredTextRefsOnThisRender = 0
-  function register(field: FieldPaths[0], transformProps = (p) => p) {
-    const nFields = registeredFields.current.length
-
-    const { changeEventName, validate, type, componentProps, ...staticProps } =
-    // @ts-ignore
-    form.staticFieldProps[field as string]
-
-    const dynamicProps: any = {
-      value: deepGet(field, formValues),
-    }
-
-    if (type === 'number') {
-      dynamicProps.value = Number.isNaN(dynamicProps.value) ? '' : String(dynamicProps.value)
-      if (isBrowser) {
-        dynamicProps.type = 'number'
-      } else {
-        dynamicProps.keyboardType = 'numeric'
-      }
-    }
-
-    if (changeEventName) {
-      dynamicProps[changeEventName] = (value) => {
-        if (type === 'number') {
-          value = Number(value)
-          if (typeof staticProps.precision !== 'undefined') {
-            value = Number(value.toFixed(staticProps.precision))
-          }
-        } else if (type === 'file') {
-          value = TypeGuards.isArray(value) && !!value.length ? value[0] : null
-        }
-
-        // @ts-ignore
-        setFieldValue(field, value)
-      }
-    }
-
-    if (type === 'text' || type === 'number') {
-      if (!isBrowser && !staticProps.multiline) {
-        dynamicProps.returnKeyType = 'next'
-      }
-
-      const thisRefIdx = registeredTextRefsOnThisRender
-
-      if (thisRefIdx >= inputRefs.current.length) {
-        inputRefs.current.push(createRef())
-      }
-      dynamicProps.ref = inputRefs.current[thisRefIdx]
-      registeredTextRefsOnThisRender++
-      if (!isBrowser && !staticProps.multiline) {
-        dynamicProps.onSubmitEditing = () => {
-          const nextRef = thisRefIdx + 1
-          if (inputRefs.current.length <= nextRef) return
-          focus(nextRef)
-        }
-      }
-
-    }
-
-    registeredFields.current.push(type)
-
-    const resolvedProps = {
-      ...staticProps,
-      ...dynamicProps,
-      validate: (v) => {
-        return validateField(field, true, v)
-      },
-    }
-
-    const componentPropsConfig = TypeGuards.isFunction(componentProps) ? componentProps(resolvedProps) : (componentProps || {})
-
-    const t = transformProps({
-      ...resolvedProps,
-      ...componentProps,
-      ...componentPropsConfig,
-    })
-
-    return t
-  }
-
-  function getTransformedValue(): Values {
-    return formValues as Values
-  }
-
-  async function onSubmit(cb: FunctionType<[Values], any>, e?: any) {
-    if (e?.preventDefault) e.preventDefault()
-
-    await cb(getTransformedValue())
-  }
-
-  function reset(states?: ('values'|'errors')[]) {
-    const resetStates = states || ['values', 'errors']
-    if (resetStates.includes('values')) {
-      setFormValues(getInitialState())
-    }
-    if (resetStates.includes('errors')) {
-      setFieldErrors(getInitialErrors())
-    }
-  }
-
-  const setters = {} as FormTypes.FormSetters<Values>
-
-  for (const fieldName in formValues) {
-    // @ts-ignore
-    setters[fieldName] = (value) => setFieldValue(fieldName, value)
-  }
-
-  return {
-    setFieldValue,
-    values: formValues as Values,
-    register,
-    validateAll,
-    validateField,
-    onSubmit,
-    fieldErrors,
-    getTransformedValue,
-    setFormValues,
-    reset,
-    validateMultiple,
-    isValid: validateAll(),
-    setters,
-  }
-}

package/src/utils.ts

@@ -1,55 +0,0 @@
-import { ReactNode, useMemo, useRef, useState } from 'react'
-import { onUpdate } from '@codeleap/hooks'
-import { ValidatorFunctionWithoutForm } from './types'
-import { getValidator } from './createForm'
-
-import * as yup from 'yup'
-
-const emptyValues = ['', null, undefined]
-
-export function useValidate(value: any, validator: yup.SchemaOf<any> | ValidatorFunctionWithoutForm) {
-
-  const isEmpty = emptyValues.includes(value)
-
-  const [_message, setMessage] = useState<ReactNode>('')
-  const [isValid, setIsValid] = useState<boolean>(true)
-  const updateErrorOnChange = useRef(false)
-
-  const _validator = useMemo(() => getValidator(validator), [validator])
-
-  onUpdate(() => {
-    if (!updateErrorOnChange.current || !_validator) return
-
-    const { valid, message } = _validator(value, {})
-
-    setIsValid(valid)
-    setMessage(message)
-  }, [value])
-
-  return {
-    onInputBlurred: () => {
-
-      if (!_validator) return
-
-      updateErrorOnChange.current = false
-      const { valid, message } = _validator(value, {})
-
-      setIsValid(valid)
-      setMessage(message)
-
-    },
-    onInputFocused: () => {
-
-      if (isValid) return
-      updateErrorOnChange.current = true
-    },
-    message: _message,
-    isValid,
-    showError: !isValid && !isEmpty,
-    error: {
-      message: _message,
-    },
-  }
-
-}
-