@codeleap/form 4.3.9 → 5.0.1

package/src/lib/Form.ts

@@ -0,0 +1,172 @@
+import { createStateSlice, GlobalState, globalState } from "@codeleap/store"
+ 
+import { TypeGuards } from "@codeleap/types"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { FieldPaths, FieldPropertyTuples, FieldTuples, FormDef, FormValues, PropertyForKeys, ValidationResult } from "../types"
+
+
+
+
+function buildState<T extends FormDef>(def: T) {
+  const stateArg = {}
+
+  for(const [name, field] of Object.entries(def)) {
+    stateArg[name] = field.value
+  }
+
+  return stateArg as FormValues<T>
+}
+
+
+type FormSelector<T extends FormDef, S> = (form: Form<T>) =>  S
+
+
+
+class Form<T extends FormDef> {
+  id: string
+  fields: T
+  state: GlobalState<FormValues<T>>
+
+  
+  constructor(id: string, shape: T) {
+    this.id = id
+    this.fields = shape    
+
+    this.state = globalState(
+      buildState(this.fields)
+    )
+
+    this.attachState()
+  
+  }
+
+  get values(){
+    return this.state.get()
+  }
+
+  get isValid(){
+    const res = this.validate()
+
+    return Object.values(res).every((result: ValidationResult<any, any>) => result.isValid)
+  }
+
+  slice<K extends FieldPaths<T>>(field: K) {
+    
+    const fieldSlice = createStateSlice(
+      this.state, 
+      (v) => v[field], 
+      (value) => {
+        return {
+          [field]: value
+        } as FormValues<T>
+      }
+      
+    )
+
+    return fieldSlice
+  }
+
+  iterFields<V>(cb: (field: FieldTuples<T>, index: number) => V){
+    const results:V[] = []
+    let index = 0
+
+    for(const [name, field] of Object.entries(this.fields)) {
+      const result = cb([ name, field ] as FieldTuples<T>, index)
+
+      results.push(result)
+
+      index++
+    }
+
+    return results
+  }
+
+  attachState(){
+    this.iterFields(([name, field]) => {
+      field.options.name = name
+    
+      field.attach(
+        this.slice(name)
+      )
+    })
+  }
+
+  firstInvalid() {
+    for(const [fieldName, field] of Object.entries(this.fields)){
+      const validation = field.validate()
+
+      if(!validation.isValid) return {
+        field,
+        validation,
+      }
+    }
+  }
+
+  validate<Fields extends FieldPaths<T>[] = FieldPaths<T>[]>(fields?: Fields): PropertyForKeys<T, Fields[number], '__validationRes'> {
+
+    const validateFields = fields ?? Object.keys(this.fields)
+
+    const results = this.iterFields(([name, field]) => {
+      if(!validateFields.includes(name)) return null
+
+      return [name, field.validate()] as FieldPropertyTuples<T, '__validationRes'>
+    })
+
+    const resultMap = Object.fromEntries(
+      results.filter(v => !TypeGuards.isNil(v))
+    )
+
+    return resultMap as unknown as PropertyForKeys<T, Fields[number], '__validationRes'>
+  }
+
+  
+
+  register(field: FieldPaths<T>) {
+    if(!this.fields[field]){
+      throw new Error(`Field "${field}" not found in "${this.id}" form`)
+    } 
+    return this.fields[field].props()
+  }
+ 
+
+  use<Selected>(selector: FormSelector<T, Selected>): Selected {
+
+   
+    const [selected, setSelected] = useState(() => selector(this))
+
+    
+    const reselect = useCallback(() => {
+      setSelected(selector(this))
+    }, [selector])
+
+    useEffect(() => {
+      return this.state.listen((value, previous) => {
+        if(value != previous){
+          reselect()
+        }
+      })      
+    }, [reselect])
+
+    
+
+    return selected
+  }
+
+
+ 
+
+}
+
+
+export function useForm<T extends FormDef>(name: string, def: T) {
+  const form = useMemo(() => {
+    return new Form(name, def)
+  }, [name])
+
+  
+  return form
+}
+
+export function form<Def extends FormDef>(...args: ConstructorParameters<typeof Form<Def>>) {
+  return new Form(...args)
+}

package/src/lib/factories.tsx

@@ -0,0 +1,19 @@
+ 
+import { FormDef, Validator } from "../types"
+import { Field } from "./Field"
+
+type FieldBuilder<T, Validate extends Validator<any,any,any>> = typeof Field<T, Validate>
+
+export function fieldFactory<
+  T extends FieldBuilder<any,any>, 
+  Value = T extends FieldBuilder<infer V, any> ? V : never, 
+  Validator = T extends FieldBuilder<infer VL, any> ? VL : never,
+>(cls: T) {
+  return <A extends ConstructorParameters<T>[0]>(options?: A): Field<Value, A['validate']>  => {
+    
+    // @ts-expect-error
+    return new cls(options ?? {})
+  }
+}
+
+ 

package/src/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './Form'
+export {Field} from './Field'

package/src/lib/useFieldBinding.ts

@@ -0,0 +1,40 @@
+import { useImperativeHandle } from "react"
+import { IFieldRef } from "../types"
+
+export function useFieldBinding<T>(ref: React.Ref<IFieldRef<T>>, impl: Partial<IFieldRef<T>>, deps = []){
+
+  const notImplemented = (method: string) => {
+    throw new Error(`ref.${method} not implemented for ${this._type} field`)
+  }
+ 
+
+  useImperativeHandle(ref, ( ) => ({
+    blur: () => {
+      notImplemented('blur')
+    },
+    emit: () => {
+      notImplemented('emit')
+    },
+    focus: () => {
+      notImplemented('focus')
+    },
+    // @ts-expect-error
+    getValue: () => {
+      notImplemented('getValue')
+    },
+    scrollIntoView: async () => {
+      notImplemented('scrollIntoView')
+    },
+    hideValue() {
+      notImplemented('hideValue')
+    },
+    revealValue(){
+      notImplemented('revealValue')
+    },
+    toggleValueVisibility(){
+      notImplemented('toggleValueVisibility')
+    },
+    ...impl
+  }), deps)
+
+}

package/src/types/field.ts

@@ -0,0 +1,38 @@
+import {  WritableStore } from 'nanostores'
+import { Validator } from './validation'
+ 
+
+
+export type FieldState<T> = WritableStore<T>
+
+export interface ExtraFieldOptions {
+
+}
+
+export type FieldOptions<
+  T, 
+  Validate extends Validator<T, any, any>
+> = {
+  name?: string
+  defaultValue?: T | null
+  state?: FieldState<T>
+  
+  validate?: Validate
+  
+  loader?: (form: any) => Partial<
+    Omit<FieldOptions<T, Validate >, 'loader'>
+  >
+
+  onValueChange?: (newValue: T) => void
+
+} & ExtraFieldOptions
+
+
+export type FieldMeasureResult = {
+  x?: number
+  y?: number
+  width?: number
+  height?: number
+  pageX?: number
+  pageY?: number 
+}

package/src/types/form.ts

@@ -0,0 +1,36 @@
+import { Field } from "../lib/Field"
+import { ValidationResult } from "./validation"
+
+export type FormDef = Record<string,  Field<any,any>>
+
+export type NarrowKeyof<T> = Extract<keyof T, string>
+
+export type FormValues<T extends FormDef> = {
+  [K in NarrowKeyof<T>]:  T[K]['value']
+}
+
+export type FormErrors<T extends FormDef> = {
+  [K in NarrowKeyof<T>]:  ReturnType<T[K]['validate']> extends ValidationResult<any, infer E> ? E : never 
+}
+
+export type FormResults<T extends FormDef> = {
+  [K in NarrowKeyof<T>]:  ReturnType<T[K]['validate']> extends ValidationResult<infer R, any> ? R : never 
+}
+
+export type FieldTuples<T extends FormDef> = {
+  [K in NarrowKeyof<T>]: [K, T[K]]
+}[NarrowKeyof<T>]
+
+export type PropertyForKeys<T extends FormDef, Keys extends FieldPaths<T>,  Property extends keyof Field<any,any>> = {
+  [K in Keys]: T[K][Property]
+}
+
+export type FieldPropertyTuples<T extends FormDef, Property extends keyof Field<any,any>> = {
+  [K in NarrowKeyof<T>]: [K, T[K][Property]]
+}[NarrowKeyof<T>]
+
+
+
+export type FieldPaths<T extends FormDef> = ({
+  [K in NarrowKeyof<T>]: K
+})[NarrowKeyof<T>]

package/src/types/globals.ts

@@ -0,0 +1,15 @@
+export interface IFieldRef<T> {
+  getValue(): T
+  scrollIntoView(): Promise<void>
+  focus(): void
+  blur(): void
+  revealValue(): void
+  toggleValueVisibility(): void
+  hideValue(): void
+  emit(event: string, ...args: any[]): void
+}
+
+
+export interface IFieldProps {
+  
+}

package/src/types/index.ts

@@ -0,0 +1,4 @@
+export type * from './field'
+export type * from './form'
+export type * from './validation'
+export type * from './globals'

package/src/types/validation.ts

@@ -0,0 +1,10 @@
+export type ValidationResult<Result, Err> = {
+  isValid: boolean
+  result?: Result
+  error?: Err
+  readableError?: string
+} 
+
+export type ValidatorFunction<Value, Result, Err> = (value: Value, form: any) => ValidationResult<Result, Err> 
+
+export type Validator<Value, Result, Err> = ValidatorFunction<Value, Result, Err>

package/src/validators/index.ts

@@ -0,0 +1 @@
+export * from './zod'

package/src/validators/zod.ts

@@ -0,0 +1,37 @@
+import { z, ZodIssue } from 'zod'
+import { ValidationResult } from '../types'
+import { TypeGuards } from '@codeleap/types'
+
+type ZodValidationResult<T extends z.ZodType> = ValidationResult<z.infer<T>, z.ZodError['issues']>
+
+export function zodValidator<T extends z.ZodType>(model: T) {
+  return (value): ZodValidationResult<T> => {
+    const result = model.safeParse(value)
+    
+    return {
+      isValid: result.success,
+      error: result.error?.issues,
+      result: result.data      
+    }
+  }
+}
+
+
+const isZodIssue = (val: any): val is ZodIssue => {
+  return ['code','expected','received','path','message'].every(x => x in val)
+}
+
+export function isZodValidationResult(val: any): val is ZodValidationResult<any> {
+  const isValidABoolean = TypeGuards.isBoolean(val.isValid)
+
+  if(isValidABoolean) {
+    if(!val.isValid) {
+      return TypeGuards.isArray(val.error) && val.error.every(isZodIssue)
+    } else {
+      return 'result' in val
+    }
+  }
+
+  return false
+ 
+}

package/src/constants.ts

@@ -1,33 +0,0 @@
-import * as Form from './types'
-
-export const defaultFieldValues: Partial<Record<Form.FormField['type'], any>> =
-  {
-    checkbox: false,
-    text: '',
-
-    file: null,
-    multipleFile: [],
-    'range-slider': [0, 100],
-    slider: 1,
-    number: '',
-    list: [],
-    switch: false,
-    date: null,
-  }
-
-export const changeEventNames: Partial<Record<Form.FormField['type'], string>> =
-  {
-    checkbox: 'onValueChange',
-    'range-slider': 'onValueChange',
-    slider: 'onValueChange',
-    select: 'onValueChange',
-    radio: 'onValueChange',
-    text: 'onChangeText',
-    file: 'onFileSelect',
-    multipleFile: 'onFileSelect',
-    number: 'onChangeText',
-    list: 'onValueChange',
-    switch: 'onValueChange',
-    date: 'onValueChange',
-  }
-

package/src/createForm.ts

@@ -1,105 +0,0 @@
-import { defaultFieldValues } from './constants'
-import * as Form from './types'
-import * as yup from 'yup'
-import { humanizeCamelCase } from '../../utils'
-import { changeEventNames } from './constants'
-
-function getDefaultValue(field: Partial<Form.FormField>) {
-  switch (field.type) {
-    case 'radio':
-    case 'select':
-      return field.options?.[0]?.value || ''
-    default:
-      return defaultFieldValues[field.type]
-  }
-}
-
-export function getValidator(validate: Form.Validator<any>): Form.ValidatorFunction {
-  if (!validate) return undefined
-
-  if (typeof validate === 'function') {
-    return validate
-  }
-
-  const yupModel = validate as yup.StringSchema
-
-  return (value) => {
-    try {
-      yupModel.validateSync(value)
-      return { valid: true, message: '' }
-    } catch (e) {
-      return { valid: false, message: e?.errors?.join(' ') || '' }
-    }
-  }
-}
-
-function buildInitialFormState<T extends Form.FieldsMap>(
-  name: string,
-  form: T,
-  inside = [],
-) {
-  const state = {} as Form.MapValues<T>
-  const props = {}
-  let numberOfTextFields = 0
-  for (const [k, value] of Object.entries(form)) {
-    const { defaultValue, label, validate, type, ...fieldConfig } = value
-
-    const key = k as keyof Form.MapValues<T>
-
-    const fieldPathParts = [...inside, key]
-    const fieldPath = fieldPathParts.join('.')
-
-    let fieldValue = null
-    if (type === 'text') numberOfTextFields += 1
-    if (false) {
-      // const { props: subFieldProps, state } = buildInitialFormState(
-      //   name,
-      //   value.fields,
-      //   fieldPathParts,
-      // )
-      // fieldValue = state
-
-      // props = {
-      //   ...props,
-      //   ...subFieldProps,
-      // }
-    } else {
-      fieldValue =
-        typeof defaultValue !== 'undefined'
-          ? defaultValue
-          : getDefaultValue(value)
-    }
-
-    const fieldProps: any = {
-      id: `form-${name}:${fieldPath}`,
-      label: label || humanizeCamelCase(k),
-      changeEventName: changeEventNames[type],
-      type,
-      ...fieldConfig,
-    }
-
-    delete fieldProps.fields
-
-    if (validate) fieldProps.validate = getValidator(validate)
-
-    props[fieldPath] = fieldProps
-    state[key] = fieldValue
-  }
-
-  return { state, props, numberOfTextFields }
-}
-
-export function createForm<T extends Form.FieldsMap>(
-  name: string,
-  formArgs: Form.FormConfig<T>,
-): Form.CreateFormReturn<T> {
-  const { state, props, numberOfTextFields } = buildInitialFormState(name, formArgs)
-
-  return {
-    config: formArgs as T,
-    defaultValue: state,
-    staticFieldProps: props,
-    name,
-    numberOfTextFields,
-  }
-}

package/src/presets.ts

@@ -1,14 +0,0 @@
-export const inputPresets = {
-  email: () => ({
-
-  }),
-  name: () => ({
-    autoCapialize: 'words',
-    autoComplete: 'name',
-
-  }),
-  chat: () => ({
-    returnKeyType: 'send',
-
-  }),
-}