Merge pull request #35 from toggle-corp/fix/add-condition-typings

Fix/add condition typings

Author: samshara

README.md

@@ -2,7 +2,6 @@
 
 A simple form library using react hooks
 
-
 ## Features
 
 - Reasonably typesafe
@@ -12,13 +11,13 @@ A simple form library using react hooks
 - Supports automatic dependency tracking
 - Supports restore point
 
-## Introduction
+## API
 
 The library exposes three react hooks to define a form.
 
 1. useForm
-2. useArrayField
-3. useObjectField
+2. useFormArray
+3. useFormObject
 
 ### useForm
 
@@ -104,7 +103,7 @@ The array schema is an object with these properties:
 |property|description|
 |----|----|
 |validation|Function to validate the array|
-|members|Function that defines the schema for each item of the array|
+|member|Function that defines the schema for each item of the array|
 |keySelector|Function that defines the unique key for each item of the array|
 
 ### Literal Schema
@@ -114,7 +113,7 @@ The literal schema is an object with these properties:
 |property|description|
 |----|----|
 |required|If defined, the literal will be required|
-|requiredCondition|If defined, this function will be used to check required condition|
+|requiredValidation|If defined, this function will be used to check required condition|
 |defaultValue|If defined, the literal value will fallback to this value|
 |forceValue|If defined, the literal value will always be this value|
 |validations|Array of functions to validate the literal|
@@ -138,21 +137,79 @@ The library provides these validation function:
 - emailCondition
 - urlCondition
 
-#### Symbols
+## Helper Functions
+
+### getErrorObject
+
+Function to convert leaf error to object error
+
+### getErrorString
+
+Function to convert object error or array error to string error
+
+### removeNull
+
+Function to recursively remove `null` values from an object
+
+### createSubmitHandler
+
+Predefined function to define submit handler for html form
+
+|argument|description|
+|----|----|
+|validator|Function to trigger form validation|
+|setError|Function to set form error|
+|successCallback|Callback for validation success|
+|failureCallback|Callback for validation failure|
+
+The return value is the function that can be passed to form `onSubmit` prop
+
+### addCondition
+
+Predefined function to add conditions on schema fields
+
+|argument|description|
+|----|----|
+|schema|Fields of the object schema|
+|value|Value of the object|
+|dependentKeys|Keys of the object that are used to define the condition|
+|valueKeys|Keys of the object that are affected by the condition|
+
+The return value is the updated fields of the object schema
+
+## Core Functions
+
+### accumulateValues
+
+Function to get validated value from form value and form schema
+
+### accumulateErrors
+
+Function to get form error from form value and form schema
+
+### accumulateDifferentialErrors
+
+Function to get differential form error from form value and form schema
+
+### analyzeErrors
+
+Function to identify if form has errored from the form error
+
+## Symbols
 
-##### nonFieldError
+### nonFieldError
 
 Symbol to access non field error on errors returned by `useForm`
 
-##### fieldDependencies
+### fieldDependencies
 
 Symbol to define field dependencies on object schema
 
-##### undefinedValue
+### undefinedValue
 
 Symbol to define `undefined` on `forceValue` and `defaultValue` on literal schema
 
-##### nullValue
+### nullValue
 
 Symbol to define `null` on `forceValue` and `defaultValue` on literal schema
 

lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@togglecorp/toggle-form",
-    "version": "2.0.2",
+    "version": "2.0.3",
     "description": "React form library by Togglecorp",
     "files": [
         "/build"
@@ -51,8 +51,8 @@
         "@types/node": "^18.7.22",
         "@types/react": "^18.0.21",
         "@types/react-dom": "^18.0.6",
-        "@typescript-eslint/eslint-plugin": "^5.38.0",
-        "@typescript-eslint/parser": "^5.38.0",
+        "@typescript-eslint/eslint-plugin": "^5.59.8",
+        "@typescript-eslint/parser": "^5.59.8",
         "babel-jest": "^29.0.3",
         "babel-plugin-polyfill-corejs3": "^0.6.0",
         "eslint": "^8.24.0",
@@ -66,7 +66,7 @@
         "rollup": "^2.79.1",
         "rollup-plugin-copy": "^3.4.0",
         "rollup-plugin-filesize": "^9.1.2",
-        "typescript": "^4.8.3",
+        "typescript": "^5.0.4",
         "unimported": "^1.22.0"
     }
 }

lib/src/form.ts

@@ -30,11 +30,11 @@ interface RestoreRestorePointAction {
 interface ClearRestorePointAction {
     type: 'CLEAR_RESTORE_POINT';
 }
-interface ErrorAction<T extends object> {
+interface ErrorAction<T> {
     type: 'SET_ERROR';
     error: SetErrorArg<Error<T>> | undefined;
 }
-interface ValueAction<T extends object> {
+interface ValueAction<T> {
     type: 'SET_VALUE';
     value: SetBaseValueArg<T>;
     partialUpdate: boolean | undefined;
@@ -43,9 +43,9 @@ interface PristineAction {
     type: 'SET_PRISTINE';
     value: boolean;
 }
-type ValueFieldAction<T extends object> = EntriesAsKeyValue<T> & { type: 'SET_VALUE_FIELD' };
+type ValueFieldAction<T> = EntriesAsKeyValue<T> & { type: 'SET_VALUE_FIELD' };
 
-type Actions<T extends object> = ValueFieldAction<T>
+type Actions<T> = ValueFieldAction<T>
     | ErrorAction<T>
     | ValueAction<T>
     | PristineAction
@@ -71,7 +71,7 @@ type State<T> = {
     hasRestorePoint: false,
 });
 
-function useForm<T extends object>(
+function useForm<T>(
     schema: Schema<T, T, undefined>,
     initialState: {
         value: T,
@@ -99,7 +99,7 @@ function useForm<T extends object>(
     restore: () => void;
     clearRestorePoint: () => void;
 };
-function useForm<T extends object, C>(
+function useForm<T, C>(
     schema: Schema<T, T, C>,
     initialState: {
         value: T,
@@ -127,7 +127,7 @@ function useForm<T extends object, C>(
     restore: () => void;
     clearRestorePoint: () => void;
 };
-function useForm<T extends object, C>(
+function useForm<T, C>(
     schema: Schema<T, T, C>,
     initialState: {
         value: T,
@@ -447,7 +447,7 @@ function useForm<T extends object, C>(
     };
 }
 
-export function useFormObject<K extends string | number | undefined, T extends object | undefined>(
+export function useFormObject<K, T>(
     name: K,
     onChange: (value: SetValueArg<T>, name: K) => void,
     defaultValue: NonNullable<T> | (() => NonNullable<T>),
@@ -479,7 +479,7 @@ export function useFormObject<K extends string | number | undefined, T extends o
     return setFieldValue;
 }
 
-export function useFormArray<K extends string | number | undefined, T extends object>(
+export function useFormArray<K, T>(
     name: K,
     onChange: (
         newValue: SetValueArg<T[]>,

lib/src/schema.d.ts

@@ -118,14 +118,16 @@ export function addCondition<
     Value,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     SchemaType extends { [K in keyof Value ]: Schema<Value[K], any, any> },
-    DepKey extends NonNullable<Value>,
-    ValKey extends NonNullable<Value>,
+    const DepKey extends keyof NonNullable<Value>,
+    const ValKey extends keyof NonNullable<Value>,
 >(
     schema: SchemaType,
     value: Value,
     keys: readonly DepKey[],
     values: readonly ValKey[],
     updater: (
-        val: Value extends null | undefined ? null | undefined : Pick<Value, DepKey>,
+        val: Value extends null | undefined
+            ? null | undefined
+            : Pick<Value, DepKey>,
     ) => Pick<SchemaType, ValKey>,
 ): SchemaType;

lib/src/schemaAccumulateDifferentialErrors.test.ts

@@ -82,8 +82,8 @@ const errorFormTypeSchema: FormSchema = {
         fields = addCondition(
             fields,
             value,
-            ['startDate'] as const,
-            ['endDate'] as const,
+            ['startDate'],
+            ['endDate'],
             (v) => (v?.startDate ? {
                 endDate: {
                     required: true,
@@ -98,8 +98,8 @@ const errorFormTypeSchema: FormSchema = {
         fields = addCondition(
             fields,
             value,
-            ['name'] as const,
-            ['clients'] as const,
+            ['name'],
+            ['clients'],
             (v) => {
                 const clientsSchema: FormSchemaFields['clients'] = {
                     validation: (clients) => {
@@ -128,8 +128,8 @@ const errorFormTypeSchema: FormSchema = {
                             return addCondition(
                                 clientFields,
                                 clientValue,
-                                [] as const,
-                                ['name', 'strength'] as const,
+                                [],
+                                ['name', 'strength'],
                                 () => (v?.name === 'Admin' ? {
                                     name: {},
                                     strength: {},

lib/src/schemaAccumulateErrors.test.ts

@@ -111,8 +111,8 @@ const errorFormTypeSchema: FormSchema = {
         return addCondition(
             fields,
             value,
-            ['startDate'] as const,
-            ['endDate'] as const,
+            ['startDate'],
+            ['endDate'],
             (v) => (v?.startDate ? {
                 endDate: {
                     required: true,

lib/src/schemaAccumulateValues.test.ts

@@ -100,8 +100,8 @@ const errorFormTypeSchema: FormSchema = {
         return addCondition(
             fields,
             value,
-            ['startDate'] as const,
-            ['endDate'] as const,
+            ['startDate'],
+            ['endDate'],
             (v) => (v?.startDate ? {
                 endDate: {
                     required: true,

lib/src/types.ts

@@ -3,7 +3,7 @@ export const nonFieldError = Symbol('Non Field Error');
 export const fieldDependencies = Symbol('Field Dependencies');
 
 export const undefinedValue = Symbol('Undefined Value');
-export const nullValue = Symbol('Undefined Value');
+export const nullValue = Symbol('Null Value');
 
 // declare const undefindValue: unique symbol;
 // declare const nullValue: unique symbol;