@codeleap/form 4.3.8 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/form",
-  "version": "4.3.8",
+  "version": "5.0.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,23 +9,22 @@
     "directory": "packages/form"
   },
   "devDependencies": {
-    "@codeleap/config": "4.3.8",
-    "@codeleap/types": "4.3.8",
-    "@codeleap/utils": "4.3.8",
-    "@codeleap/hooks": "4.3.8",
-    "@codeleap/i18n": "4.3.8",
+    "@codeleap/config": "5.0.0",
+    "@codeleap/types": "5.0.0",
+    "@codeleap/store": "5.0.0",
+    "zod": "3.23.8",
     "ts-node-dev": "1.1.8"
   },
   "scripts": {
-    "build": "echo 'No build needed'"
+    "build": "echo 'No build needed'",
+    "playground": "bun src/test.ts"
   },
   "peerDependencies": {
-    "@codeleap/types": "4.3.8",
-    "@codeleap/utils": "4.3.8",
-    "@codeleap/hooks": "4.3.8",
-    "@codeleap/i18n": "4.3.8",
-    "react": "18.1.0",
-    "typescript": "5.0.4",
-    "yup": "^0.32.11"
+    "@codeleap/types": "5.0.0",
+    "@codeleap/store": "5.0.0",
+    "zod": "*",
+    "react": "18.2.0",
+    "typescript": "5.5.2",
+    "yup": "1.6.1"
   }
 }

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/form",
-  "version": "4.3.8",
+  "version": "5.0.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -11,21 +11,20 @@
   "devDependencies": {
     "@codeleap/config": "workspace:*",
     "@codeleap/types": "workspace:*",
-    "@codeleap/utils": "workspace:*",
-    "@codeleap/hooks": "workspace:*",
-    "@codeleap/i18n": "workspace:*",
+    "@codeleap/store": "workspace:*",
+    "zod": "3.23.8",
     "ts-node-dev": "1.1.8"
   },
   "scripts": {
-    "build": "echo 'No build needed'"
+    "build": "echo 'No build needed'",
+    "playground": "bun src/test.ts"
   },
   "peerDependencies": {
     "@codeleap/types": "workspace:*",
-    "@codeleap/utils": "workspace:*",
-    "@codeleap/hooks": "workspace:*",
-    "@codeleap/i18n": "workspace:*",
-    "react": "18.1.0",
-    "typescript": "5.0.4",
-    "yup": "^0.32.11"
+    "@codeleap/store": "workspace:*",
+    "zod": "*",
+    "react": "18.2.0",
+    "typescript": "5.5.2",
+    "yup": "1.6.1"
   }
 }

package/src/fields/bool.ts

@@ -0,0 +1,21 @@
+import { Field } from "../lib/Field"
+import { z } from 'zod'
+import { FieldOptions, Validator } from "../types"
+import { zodValidator } from "../validators"
+
+type VALUE = boolean
+
+export type BooleanValidator<R = any, Err = any> = Validator<VALUE, R, Err>
+
+type BooleanFieldOptions<Validate extends BooleanValidator> = FieldOptions<VALUE, Validate>
+
+export class BooleanField<Validate extends BooleanValidator> extends Field<boolean, Validate> {
+  _type = "BOOLEAN"
+
+  constructor(options: BooleanFieldOptions<Validate>) {
+    super({
+      validate: zodValidator(z.boolean()) as unknown as Validate,
+      ...options
+    })
+  }
+}

package/src/fields/date.ts

@@ -0,0 +1,22 @@
+import { Field } from "../lib/Field"
+import { z } from 'zod'
+import { FieldOptions, Validator } from "../types"
+import { zodValidator } from "../validators"
+
+export type DateValidator<R = any, Err = any> = Validator<Date, R, Err>
+
+type DateFieldOptions<Validate extends DateValidator> = FieldOptions<Date, Validate> & {
+  minimumDate?: Date
+  maximumDate?: Date
+}
+
+export class DateField<Validate extends DateValidator> extends Field<Date, Validate> {
+  _type = "DATE"
+
+  constructor(options: DateFieldOptions<Validate>) {
+    super({
+      validate: zodValidator(z.date()) as unknown as Validate,
+      ...options
+    })
+  }
+}

package/src/fields/file.ts

@@ -0,0 +1,19 @@
+import { Field } from "../lib/Field"
+import { z } from 'zod'
+import { FieldOptions, Validator } from "../types"
+import { zodValidator } from "../validators"
+
+export type FileValidator<R = any, Err = any> = Validator<any, R, Err>
+
+type FileFieldOptions<Validate extends FileValidator> = FieldOptions<any, Validate>
+
+export class FileField<Validate extends FileValidator> extends Field<any, Validate> {
+  _type = "FILE"
+
+  constructor(options: FileFieldOptions<Validate>) {
+    super({
+      validate: zodValidator(z.any()) as unknown as Validate,
+      ...options
+    })
+  }
+}

package/src/fields/group.ts

@@ -0,0 +1,21 @@
+import { Field } from "../lib/Field"
+import { z } from 'zod'
+import { FieldOptions, Validator } from "../types"
+import { zodValidator } from "../validators"
+
+type VALUE = string
+
+type GroupValidator<R = any, Err = any> = Validator<VALUE, R, Err>
+
+type GroupFieldOptions<Validate extends GroupValidator> = FieldOptions<VALUE, Validate>
+
+export class GroupField<Validate extends GroupValidator> extends Field<string, Validate> {
+  _type = "group"
+
+  constructor(options: GroupFieldOptions<Validate>) {
+    super({
+      validate: zodValidator(z.string()) as unknown as Validate,
+      ...options
+    })
+  }
+}

package/src/fields/index.ts

@@ -0,0 +1,28 @@
+import { fieldFactory } from "../lib/factories"
+import { TextField } from "./text"
+import { ListField } from "./list"
+import { NumberField } from "./number"
+import { BooleanField } from "./bool"
+import { SelectableField } from "./selectable"
+import { DateField } from "./date"
+import { FileField } from "./file"
+
+export const fields = {
+  text: fieldFactory(TextField),
+  list: fieldFactory(ListField),
+  number: fieldFactory(NumberField),
+  boolean: fieldFactory(BooleanField),
+  selectable: fieldFactory(SelectableField),
+  date: fieldFactory(DateField),
+  file: fieldFactory(FileField),
+}
+
+export {
+  TextField,
+  ListField,
+  NumberField,
+  BooleanField,
+  SelectableField,
+  DateField,
+  FileField,
+}

package/src/fields/list.ts

@@ -0,0 +1,36 @@
+import { Field } from "../lib/Field"
+import { FieldOptions, Validator } from "../types"
+
+export type ListValidator<Val, R = any, Err = any> = Validator<Val[] | Val, R, Err>
+
+type ListFieldOptions<T, Validate extends Validator<T | T[], any, any>> = FieldOptions<T, Validate> & {
+  item: Field<T, Validate>
+}
+
+export class ListField<T, Validate extends ListValidator<T>> extends Field<T | T[], Validate> {
+  _type = "LIST"
+
+  constructor(options: ListFieldOptions<T[] | T, Validate>) {
+    super({
+      // @ts-ignore fix this
+      validate: (v) => {
+        if (!options.validate) return {
+          isValid: true
+        }
+
+        for (const value of v as T[]) {
+          const validation = options.validate?.(value, null)
+
+          if (!validation.isValid) {
+            return validation
+          }
+        }
+
+        return {
+          isValid: true
+        }
+      },
+      ...options
+    })
+  }
+}

package/src/fields/number.ts

@@ -0,0 +1,33 @@
+import { Field } from "../lib/Field"
+import { z } from 'zod'
+import { FieldOptions, Validator } from "../types"
+import { zodValidator } from "../validators"
+
+export type NumberValidator<R = any, Err = any> = Validator<number | number[], R, Err>
+
+type Props = {
+  min?: number
+  max?: number
+}
+
+type NumberFieldOptions<Validate extends NumberValidator> = FieldOptions<number | number[], Validate> & Props
+
+export class NumberField<Validate extends NumberValidator> extends Field<number | number[], Validate> {
+  _type = "NUMBER"
+
+  constructor(options: NumberFieldOptions<Validate>) {
+    const { min = 0, max = 100000, defaultValue, ...others } = options
+
+    const isMultiple = Array.isArray(defaultValue)
+
+    const zScheme = z.number().min(min).max(max)
+
+    super({
+      validate: zodValidator(isMultiple ? z.array(zScheme) : zScheme) as unknown as Validate,
+      min,
+      max,
+      defaultValue,
+      ...others
+    } as NumberFieldOptions<Validate>)
+  }
+}

package/src/fields/selectable.ts

@@ -0,0 +1,32 @@
+import { Field } from "../lib/Field"
+import { z } from 'zod'
+import { FieldOptions, Validator } from "../types"
+import { zodValidator } from "../validators"
+import { Options } from '@codeleap/types'
+
+type VALUE = string | number
+
+export type SelectableValidator<V extends VALUE, R = any, Err = any> = Validator<V, R, Err>
+
+type SelectableFieldOptions<V extends VALUE, Validate extends SelectableValidator<V>> = FieldOptions<V, Validate> & {
+  options: Options<V>
+  minItems?: number
+  maxItems?: number
+}
+
+export class SelectableField<V extends VALUE, Validate extends SelectableValidator<V>> extends Field<V, Validate> {
+  _type = "SELECTABLE"
+
+  constructor(options: SelectableFieldOptions<V, Validate>) {
+    const { minItems = 1, maxItems = options?.options?.length } = options
+    
+    const zScheme = z.string().or(z.number())
+
+    super({
+      validate: zodValidator(z.array(zScheme).min(minItems).max(maxItems).or(zScheme)) as unknown as Validate,
+      minItems,
+      maxItems,
+      ...options,
+    })
+  }
+}

package/src/fields/text.ts

@@ -0,0 +1,24 @@
+import { Field } from "../lib/Field"
+import { z } from 'zod'
+import { FieldOptions, Validator } from "../types"
+import { zodValidator } from "../validators"
+
+type VALUE = string
+
+export type TextValidator<R = any, Err = any> = Validator<VALUE, R, Err>
+
+type TextFieldOptions<Validate extends TextValidator> = FieldOptions<VALUE, Validate> & {
+  secure?: boolean
+  multiline?: boolean
+}
+
+export class TextField<Validate extends TextValidator> extends Field<string, Validate> {
+  _type = "TEXT"
+
+  constructor(options: TextFieldOptions<Validate>) {
+    super({
+      validate: zodValidator(z.string()) as unknown as Validate,
+      ...options
+    })
+  }
+}

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useField } from './useField'

package/src/hooks/useField.ts

@@ -0,0 +1,14 @@
+import { useMemo } from "react"
+import type { Field } from "../lib"
+
+export function useField<V, T extends Field<V, any, any>>(field: T, params: Parameters<T['use']>, defaultField: () => T): ReturnType<T['use']> {
+  if (field) {
+    return field.use(params?.[0], params?.[1]) as ReturnType<T['use']>
+  }
+
+  const tempField = useMemo(() => {
+    return defaultField()
+  }, [])
+
+  return tempField.use(params[0], params?.[1]) as ReturnType<T['use']>
+}

package/src/index.ts

@@ -1,6 +1,5 @@
-export * from './useForm'
-export * from './constants'
-export * from './createForm'
-export * from './utils'
-export * as Form from './types'
-export * as yup from 'yup'
+export * from './fields'
+export * from './types'
+export * from './lib'
+export * from './validators'
+export * from './hooks'

package/src/lib/Field.ts

@@ -0,0 +1,310 @@
+import { FieldState, FieldOptions, FieldMeasureResult } from '../types/field';
+import { ValidationResult, Validator } from '../types/validation';
+import { IFieldRef,  IFieldProps } from '../types/globals';
+import { atom }  from 'nanostores'
+import { AnyRecord, SecondToLastArguments, TypeGuards } from '@codeleap/types';
+ 
+import { useStore } from '@nanostores/react'
+import { useFieldBinding } from './useFieldBinding';
+import { createRef, useRef, useState } from 'react';
+
+class ValidationError extends Error {
+  data: any
+
+  constructor(data: any) {
+    super()
+    this.data = data
+  }
+}
+
+
+
+export class Field<
+  T, 
+  Validate extends Validator<T,any,any>,
+  Result  = Validate extends Validator<T, infer R, any> ? R : never,
+  Err  = Validate extends Validator<T, any, infer E> ? E : never
+> {
+  _type: string
+
+  deep: boolean
+
+  state: FieldState<T>
+
+  properties: AnyRecord = {}
+
+  options: FieldOptions<T, Validate>
+
+  ref?: React.RefObject<IFieldRef<T>>
+
+  __validationRes: ValidationResult<Result, Err>
+
+  private initialValue: T
+
+  static enableLogs = false
+
+  static getProps = (field: Field<any,any>) => {
+    throw new Error('Field.getProps not implemented')
+  }
+  
+  static methodMeasurePosition = (field: Field<any,any>, wrapperRef: any): Promise<FieldMeasureResult> => {
+    throw new Error('Field.measurePosition not implemented')
+  }
+
+  static methodScrollTo = (field: Field<any,any>, scrollRef: any, measure: FieldMeasureResult): Promise<void> => {
+    throw new Error('Field.scrollTo not implemented')
+  }
+
+  static methodGetPadding = (field: Field<any,any>): number => {
+    throw new Error('Field.getPadding not implemented')
+  }
+
+  constructor(options: FieldOptions<T, Validate>) {
+    this.options = options
+    this.ref = createRef()
+    this.loadState()
+
+    this.setValue = this.setValue.bind(this)
+    this.use = this.use.bind(this)
+    this.useBinding = this.useBinding.bind(this)
+
+    this.properties = this.toInternalProperties(options)
+  }
+
+  get name(){
+    return this.options.name
+  }
+
+  get value(){
+    return this.state.get()
+  }
+
+  get isValid(){
+    const res = this.validate()
+
+    return res.isValid
+  }
+
+  private toInternalProperties(options: FieldOptions<T, Validate>) {
+    const internalKeys = new Set(['name', 'defaultValue', 'state', 'validate', 'loader', 'onValueChange'])
+
+    return Object.assign(
+      { field: this },
+      Object.fromEntries(Object.entries(options).filter(([key]) => !internalKeys.has(key)))
+    )
+  }
+
+  attach(to: FieldState<T>) {
+    const val = this.value
+
+    this.state = to
+
+    this.setValue(val)
+  }
+
+  setValue(to: T) {
+    if (this.options.onValueChange) this.options.onValueChange(to)
+    return this.state.set(to)
+  }
+
+  useValue(){
+    const value = useStore(this.state)
+
+    return value
+  }
+
+  use(impl?: Partial<IFieldRef<T>>, deps?: any[]){
+    const value = this.useValue()    
+
+    const validation = this.useValidation()
+    
+    // Yes, this is dangerous and doesn't follow the rules, but not passing an implementation to imperative handle after passing it once would break the app anyway
+    if(impl) { 
+      this.useBinding(impl, deps)
+    }
+    
+    const changed = value != this.initialValue
+
+    return {
+      validation,
+      value,
+      setValue: this.setValue,
+      changed,
+      representation: this.toRepresentation(value),
+      options: this.options,
+    }
+  }
+
+  useBinding(...args: SecondToLastArguments<typeof useFieldBinding<T>>){
+    useFieldBinding(this.ref, ...args)
+
+  }
+
+  changed() {
+    return this.state.get() != this.initialValue
+  }
+
+  // If we make this async, the js engine will not delay further execution while the funcion is not done. This way we wait until we know wheter there's a promise or not
+  loadState(){
+    let defaultValuePromise: Promise<T> = undefined
+    let defaultValue:T = undefined
+
+    if(TypeGuards.isFunction(this.options.defaultValue)) {
+      const v = this.options.defaultValue()
+
+      if(TypeGuards.isPromise(v)) {
+        defaultValuePromise = v
+      } else {
+        defaultValue = v    
+      }
+    } else {
+      const v = this.options?.defaultValue
+
+      if(TypeGuards.isPromise(v)) {
+        defaultValuePromise = v
+      } else {
+        defaultValue = v    
+      }
+    }
+
+    this.state = this?.options?.state ?? atom(defaultValue)
+
+    if(!defaultValuePromise) {
+      this.initialValue = defaultValue
+    }
+
+    if(!!defaultValuePromise) {
+      this.log('debug', 'Waiting for initial value')
+
+      return defaultValuePromise
+        .then((v) => {
+          this.state.set(v)
+          this.initialValue = v
+          this.log('debug', `Got initial value`, v)
+        })
+        .catch(e => {
+          this.log('error', `Failed to resolve default value`, e)
+        })
+    } else {
+      return Promise.resolve()
+    }
+  }
+
+  formatLog(...args: any[]) {
+    const [firstArgument, ...otherArgs] = args
+
+    let PREFIX = `[FIELD: ${this.name}]`
+    
+    if(TypeGuards.isString(firstArgument)) {
+      PREFIX += ` ${firstArgument}`
+    } else {
+      otherArgs.unshift(firstArgument)
+    }
+
+    const logArgs = [
+      PREFIX,
+      ...otherArgs
+    ]
+
+    return logArgs
+  }
+
+  validate(value?: any): ValidationResult<Result, Err> {
+    
+    const validate = this.options.validate
+    
+    const valueToCheck = TypeGuards.isUndefined(value) ? this.state.get() : this.toInternalValue(value)
+  
+    try {
+      const result = validate(valueToCheck, {})
+            
+      return result
+
+    } catch(e) {
+      
+      if(e instanceof ValidationError) {
+        return {
+          isValid: false,
+          error: e.data
+        }
+      }
+
+      throw e
+    }
+    
+  }
+
+  useValidation() {
+    const value = this.useValue()
+    
+    const isUnset = typeof value === 'undefined'
+
+    const startedUnset = useRef(isUnset).current
+
+    const isSet = !isUnset
+
+    const validation = this.validate(value)
+
+    const isValid = validation.isValid
+
+    const isInvalid = !isValid
+
+    const hasChanged = this.initialValue != value
+    
+    const message = validation.readableError ?? validation.error?.[0]?.message
+
+    const errorDisplayRequiresBlur = startedUnset
+
+    
+    const [hasBlurred, setHasBlurred] = useState(false)
+
+    const showError = isInvalid && (errorDisplayRequiresBlur ? hasBlurred : true)
+
+    
+
+    return {
+      onInputBlurred(){
+        setHasBlurred(true)
+      },
+      hasBlurred,
+      hasChanged,
+      startedUnset,
+      isSet,
+      isInvalid,
+      isValid,
+      message,
+      showError,
+      isUnset,
+      validation,
+      value
+    }
+  }
+
+  log(level = 'log', ...args: any[]){
+    if (Field.enableLogs) console[level](...this.formatLog(...args))
+  }
+  
+  toInternalValue(v: any) {
+    return v as T
+  }
+
+  toRepresentation(v: T) {
+    return v as any
+  }
+
+  props(): IFieldProps {
+    return this.properties
+  }
+
+  measurePosition<T>(wrapperRef: T): Promise<FieldMeasureResult> {
+    return Field.methodMeasurePosition(this, wrapperRef)
+  }
+
+  scrollTo<T>(scrollRef: T, measure: FieldMeasureResult): Promise<void>{
+    return Field.methodScrollTo(this, scrollRef, measure)
+  }
+
+  getPadding(): number {
+    return Field.methodGetPadding(this)
+  }
+}