2.0.0 - fields config types renaming

- `BaseHoneyFormFieldsConfigs` renamed to `BaseHoneyFormFieldsConfig` - `HoneyFormFieldsConfigs` renamed to `HoneyFormFieldsConfig` - `ChildHoneyFormFieldsConfigs` renamed to `ChildHoneyFormFieldsConfig`
React-Hive · Sep 18, 2024 · 469375e · 469375e
1 parent a8196f4
commit 469375e
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-hive/honey-form",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "The TS library to build the fully customized forms using React framework",
   "keywords": [
     "react",

diff --git a/src/components/__tests__/honey-form.nested-forms.spec.tsx b/src/components/__tests__/honey-form.nested-forms.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 
-import type { ChildHoneyFormFieldsConfigs, HoneyFormFieldsConfigs } from '../../types';
+import type { ChildHoneyFormFieldsConfig, HoneyFormFieldsConfig } from '../../types';
 
 import { HoneyForm } from '../honey-form';
 import { useHoneyFormProvider } from '../honey-form.provider';
@@ -41,7 +41,7 @@ describe('Component [HoneyForm]: Nested forms', () => {
       items: ItemForm[];
     };
 
-    const ITEM_FORM_FIELDS: ChildHoneyFormFieldsConfigs<ItemsForm, 'items'> = {
+    const ITEM_FORM_FIELDS: ChildHoneyFormFieldsConfig<ItemsForm, 'items'> = {
       id: {
         type: 'string',
         required: true,
@@ -84,7 +84,7 @@ describe('Component [HoneyForm]: Nested forms', () => {
       );
     };
 
-    const fields: HoneyFormFieldsConfigs<ItemsForm> = {
+    const fields: HoneyFormFieldsConfig<ItemsForm> = {
       items: {
         type: 'nestedForms',
         defaultValue: [
@@ -139,7 +139,7 @@ describe('Component [HoneyForm]: Nested forms', () => {
   });
 
   it('should submit form with correct item values after dynamic addition', async () => {
-    const ITEM_FORM_FIELDS: ChildHoneyFormFieldsConfigs<ItemsForm, 'items'> = {
+    const ITEM_FORM_FIELDS: ChildHoneyFormFieldsConfig<ItemsForm, 'items'> = {
       id: {
         type: 'string',
         required: true,
@@ -182,7 +182,7 @@ describe('Component [HoneyForm]: Nested forms', () => {
       );
     };
 
-    const fields: HoneyFormFieldsConfigs<ItemsForm> = {
+    const fields: HoneyFormFieldsConfig<ItemsForm> = {
       companyName: {
         type: 'string',
         defaultValue: 'test',
@@ -363,7 +363,7 @@ describe('Component [HoneyForm]: Nested forms', () => {
       );
     };
 
-    const fields: HoneyFormFieldsConfigs<ItemsForm> = {
+    const fields: HoneyFormFieldsConfig<ItemsForm> = {
       companyName: {
         type: 'string',
         defaultValue: 'test',
@@ -450,7 +450,7 @@ describe('Component [HoneyForm]: Nested forms', () => {
       );
     };
 
-    const fields: HoneyFormFieldsConfigs<ItemsForm> = {
+    const fields: HoneyFormFieldsConfig<ItemsForm> = {
       companyName: {
         type: 'string',
         defaultValue: 'test',

diff --git a/src/components/__tests__/honey-form.spec.tsx b/src/components/__tests__/honey-form.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 
-import type { HoneyFormFieldsConfigs } from '../../types';
+import type { HoneyFormFieldsConfig } from '../../types';
 
 import { HoneyForm } from '../honey-form';
 import { HoneyFormDynamicField } from '../honey-form-dynamic.field';
@@ -20,7 +20,7 @@ describe('Component [HoneyForm]: Basic usage', () => {
       name: string;
     };
 
-    const fields: HoneyFormFieldsConfigs<Form> = {
+    const fields: HoneyFormFieldsConfig<Form> = {
       name: {
         type: 'string',
       },
@@ -46,7 +46,7 @@ describe('Component [HoneyForm]: Basic usage', () => {
 
     const onSubmit = jest.fn<Promise<void>, [Form]>();
 
-    const fields: HoneyFormFieldsConfigs<Form> = {
+    const fields: HoneyFormFieldsConfig<Form> = {
       name: {
         type: 'string',
       },
@@ -76,7 +76,7 @@ describe('Component [HoneyForm]: Field mode usage', () => {
 
     const onSubmit = jest.fn<Promise<void>, [Form]>();
 
-    const fields: HoneyFormFieldsConfigs<Form> = {
+    const fields: HoneyFormFieldsConfig<Form> = {
       name: {
         type: 'string',
         mode: 'blur',
@@ -127,7 +127,7 @@ describe('Component [HoneyForm]: File field type', () => {
 
     const onSubmit = jest.fn<Promise<void>, [Form]>();
 
-    const fields: HoneyFormFieldsConfigs<Form> = {
+    const fields: HoneyFormFieldsConfig<Form> = {
       images: {
         required: true,
         type: 'file',

diff --git a/src/components/__tests__/multi-honey-forms.spec.tsx b/src/components/__tests__/multi-honey-forms.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 
-import type { HoneyFormApi, HoneyFormFieldsConfigs } from '../../types';
+import type { HoneyFormApi, HoneyFormFieldsConfig } from '../../types';
 
 import { MultiHoneyForms, useMultiHoneyFormsProvider } from '../multi-honey-forms';
 import { HoneyForm } from '../honey-form';
@@ -64,7 +64,7 @@ describe('Component [MultiHoneyForms]: Basic usage', () => {
     const onSubmit = jest.fn<Promise<void>, [Form[]]>();
 
     const FruitForm = ({ formIndex }: { formIndex: number }) => {
-      const fields: HoneyFormFieldsConfigs<Form> = {
+      const fields: HoneyFormFieldsConfig<Form> = {
         name: {
           type: 'string',
         },

diff --git a/src/field.ts b/src/field.ts
@@ -40,7 +40,7 @@ import {
   PASSIVE_FIELD_TYPE_VALIDATORS_MAP,
 } from './validators';
 import {
-  checkIfFieldIsInteractive,
+  checkIfHoneyFormFieldIsInteractive,
   checkIfFieldIsNestedForms,
   checkIfFieldIsObject,
   checkIfFieldIsPassive,
@@ -360,7 +360,7 @@ const getFieldProps = <
   fieldValue: FieldValue,
   { formFieldRef, fieldConfig, setFieldValue }: FieldPropsOptions<Form, FieldName, FormContext>,
 ): HoneyFormFieldProps<Form, FieldName, FieldValue> => {
-  const isFieldInteractive = checkIfFieldIsInteractive(fieldConfig);
+  const isFieldInteractive = checkIfHoneyFormFieldIsInteractive(fieldConfig);
   if (isFieldInteractive) {
     return {
       passiveProps: undefined,
@@ -458,7 +458,7 @@ export const createField = <
 ): HoneyFormField<Form, FieldName, FormContext> => {
   const config: HoneyFormFieldConfig<Form, FieldName, FormContext> = {
     required: false,
-    ...(checkIfFieldIsInteractive(fieldConfig) && {
+    ...(checkIfHoneyFormFieldIsInteractive(fieldConfig) && {
       // Set default config values
       mode: 'change',
       formatOnBlur: false,
@@ -472,7 +472,7 @@ export const createField = <
   // Set initial field value as the default value
   formDefaultsRef.current[fieldName] = config.defaultValue;
 
-  const isFieldInteractive = checkIfFieldIsInteractive(config);
+  const isFieldInteractive = checkIfHoneyFormFieldIsInteractive(config);
 
   const filteredValue =
     isFieldInteractive && config.filter
@@ -501,7 +501,6 @@ export const createField = <
     ...fieldProps,
     config,
     errors: [],
-    childFormsErrors: [],
     defaultValue: config.defaultValue,
     rawValue: filteredValue,
     cleanValue: filteredValue,
@@ -566,7 +565,7 @@ export const getNextErrorsFreeField = <
 >(
   formField: HoneyFormField<Form, FieldName, FormContext>,
 ): HoneyFormField<Form, FieldName, FormContext> => {
-  const isFieldInteractive = checkIfFieldIsInteractive(formField.config);
+  const isFieldInteractive = checkIfHoneyFormFieldIsInteractive(formField.config);
   const isFieldPassive = checkIfFieldIsPassive(formField.config);
   const isFieldObject = checkIfFieldIsObject(formField.config);
 
@@ -621,7 +620,7 @@ export const getNextErredField = <
   formField: HoneyFormField<Form, FieldName, FormContext>,
   fieldErrors: HoneyFormFieldError[],
 ): HoneyFormField<Form, FieldName, FormContext> => {
-  const isFieldInteractive = checkIfFieldIsInteractive(formField.config);
+  const isFieldInteractive = checkIfHoneyFormFieldIsInteractive(formField.config);
   const isFieldPassive = checkIfFieldIsPassive(formField.config);
   const isFieldObject = checkIfFieldIsObject(formField.config);
 
@@ -679,7 +678,7 @@ export const getNextResetField = <
   formField: HoneyFormField<Form, FieldName, FormContext>,
   isResetToDefault: boolean = true,
 ): HoneyFormField<Form, FieldName, FormContext> => {
-  const isFieldInteractive = checkIfFieldIsInteractive(formField.config);
+  const isFieldInteractive = checkIfHoneyFormFieldIsInteractive(formField.config);
   const isFieldPassive = checkIfFieldIsPassive(formField.config);
   const isFieldObject = checkIfFieldIsObject(formField.config);
 
@@ -888,7 +887,7 @@ const executeFieldTypeValidator = <
 
   const formValues = getFormValues(formFields);
 
-  if (checkIfFieldIsInteractive(formField.config)) {
+  if (checkIfHoneyFormFieldIsInteractive(formField.config)) {
     // Get the validator function associated with the field type
     const validator = INTERACTIVE_FIELD_TYPE_VALIDATORS_MAP[formField.config.type];
 
@@ -949,7 +948,7 @@ const executeInternalFieldValidators = <
     validator(fieldValue, fieldConfig, fieldErrors);
   });
 
-  if (checkIfFieldIsInteractive(fieldConfig)) {
+  if (checkIfHoneyFormFieldIsInteractive(fieldConfig)) {
     BUILT_IN_INTERACTIVE_FIELD_VALIDATORS.forEach(validator => {
       validator(fieldValue, fieldConfig, fieldErrors);
     });
@@ -1207,7 +1206,7 @@ export const executeFieldValidatorAsync = async <
 
   let filteredValue: Form[FieldName] = formField.rawValue;
 
-  if (checkIfFieldIsInteractive(formField.config)) {
+  if (checkIfHoneyFormFieldIsInteractive(formField.config)) {
     filteredValue =
       typeof filteredValue === 'string'
         ? ((filteredValue as string).trimStart() as Form[FieldName])
@@ -1503,7 +1502,10 @@ const triggerScheduledFieldsValidations = <
       if (!isSkipField) {
         let filteredValue: Form[keyof Form];
 
-        if (checkIfFieldIsInteractive(nextFormField.config) && nextFormField.config.filter) {
+        if (
+          checkIfHoneyFormFieldIsInteractive(nextFormField.config) &&
+          nextFormField.config.filter
+        ) {
           filteredValue = nextFormField.config.filter(nextFormField.rawValue, { formContext });
           //
         } else if (checkIfFieldIsNestedForms(nextFormField.config)) {
@@ -1562,7 +1564,7 @@ export const getNextSingleFieldState = <
   fieldValue: FieldValue,
   { formContext, isFormat }: NextSingleFieldStateOptions<FormContext>,
 ): HoneyFormField<Form, FieldName, FormContext> => {
-  const isFieldInteractive = checkIfFieldIsInteractive(formField.config);
+  const isFieldInteractive = checkIfHoneyFormFieldIsInteractive(formField.config);
   const isFieldPassive = checkIfFieldIsPassive(formField.config);
   const isFieldObject = checkIfFieldIsObject(formField.config);
 
@@ -1689,7 +1691,7 @@ export const getNextFieldsState = <
 
   let filteredValue: Form[FieldName] = fieldValue;
 
-  if (checkIfFieldIsInteractive(fieldConfig)) {
+  if (checkIfHoneyFormFieldIsInteractive(fieldConfig)) {
     filteredValue =
       typeof fieldValue === 'string'
         ? ((fieldValue as string).trimStart() as Form[FieldName])

diff --git a/src/helpers.ts b/src/helpers.ts
@@ -2,14 +2,14 @@ import React from 'react';
 import type {
   JSONValue,
   KeysWithArrayValues,
-  BaseHoneyFormFieldsConfigs,
+  BaseHoneyFormFieldsConfig,
   HoneyFormId,
   HoneyFormBaseForm,
   HoneyFormFields,
   HoneyFormField,
   HoneyFormChildFormContext,
   HoneyFormParentField,
-  HoneyFormFieldsConfigs,
+  HoneyFormFieldsConfig,
   HoneyFormFieldConfig,
   HoneyFormErrors,
   HoneyFormFieldError,
@@ -58,22 +58,22 @@ export const getHoneyFormUniqueId = () => {
  * @template Form - The type representing the structure of the entire form.
  * @template FormContext - The type representing the context associated with the form.
  *
- * @param {HoneyFormFieldsConfigs<Form, FormContext>} fieldsConfigs - Object containing field configurations.
+ * @param {HoneyFormFieldsConfig<Form, FormContext>} fieldsConfig - Object containing field configurations.
  * @param {(fieldName: keyof Form, fieldConfig: HoneyFormFieldConfig<Form, keyof Form, FormContext>) => HoneyFormField<Form, keyof Form, FormContext>} callback - Callback function
  *   invoked for each field configuration, providing the field name and the entire field configuration.
  *
  * @returns {HoneyFormFields<Form, FormContext>} - Object containing mapped form fields.
  */
-export const mapFieldsConfigs = <Form extends HoneyFormBaseForm, FormContext>(
-  fieldsConfigs: HoneyFormFieldsConfigs<Form, FormContext>,
+export const mapFieldsConfig = <Form extends HoneyFormBaseForm, FormContext>(
+  fieldsConfig: HoneyFormFieldsConfig<Form, FormContext>,
   callback: (
     fieldName: keyof Form,
     fieldConfig: HoneyFormFieldConfig<Form, keyof Form, FormContext>,
   ) => HoneyFormField<Form, keyof Form, FormContext>,
 ): HoneyFormFields<Form, FormContext> =>
-  Object.keys(fieldsConfigs).reduce(
+  Object.keys(fieldsConfig).reduce(
     (nextFormFields, fieldName: keyof Form) => {
-      nextFormFields[fieldName] = callback(fieldName, fieldsConfigs[fieldName]);
+      nextFormFields[fieldName] = callback(fieldName, fieldsConfig[fieldName]);
 
       return nextFormFields;
     },
@@ -202,7 +202,7 @@ export const getFormValues = <Form extends HoneyFormBaseForm, FormContext>(
  *
  * @returns {fieldConfig is HoneyFormInteractiveFieldConfig<Form, FieldName, FormContext>} - A boolean indicating whether the field is interactive.
  */
-export const checkIfFieldIsInteractive = <
+export const checkIfHoneyFormFieldIsInteractive = <
   Form extends HoneyFormBaseForm,
   FieldName extends keyof Form,
   FormContext,
@@ -401,7 +401,7 @@ export const getSubmitFormValues = <
         return childFormsCleanValues as Form[keyof Form];
       }
 
-      const isFieldInteractive = checkIfFieldIsInteractive(formField.config);
+      const isFieldInteractive = checkIfHoneyFormFieldIsInteractive(formField.config);
 
       return !isFieldInteractive || formField.config.submitFormattedValue
         ? formField.value
@@ -645,12 +645,12 @@ const deserializeForm = <Form extends HoneyFormBaseForm>(
  * @template Form - The type representing the structure of the entire form.
  * @template FormContext - The type representing the context associated with the form.
  *
- * @param {BaseHoneyFormFieldsConfigs<Form, FormContext>} fieldsConfigs - Configuration object for the form fields, including serializer functions.
+ * @param {BaseHoneyFormFieldsConfig<Form, FormContext>} fieldsConfig - Configuration object for the form fields, including serializer functions.
  * @param {string} formName - The name to use as the key in the query string.
  * @param {Form} formData - The form data to serialize and store in the query string.
  */
 export const serializeFormToQueryString = <Form extends HoneyFormBaseForm, FormContext = undefined>(
-  fieldsConfigs: BaseHoneyFormFieldsConfigs<Form, FormContext>,
+  fieldsConfig: BaseHoneyFormFieldsConfig<Form, FormContext>,
   formName: string,
   formData: Form,
 ) => {
@@ -661,7 +661,7 @@ export const serializeFormToQueryString = <Form extends HoneyFormBaseForm, FormC
     serializeForm(
       formData,
       (fieldName, fieldValue) =>
-        fieldsConfigs[fieldName].serializer?.(fieldValue) ?? (fieldValue as JSONValue),
+        fieldsConfig[fieldName].serializer?.(fieldValue) ?? (fieldValue as JSONValue),
     ),
   );
 
@@ -675,7 +675,7 @@ export const serializeFormToQueryString = <Form extends HoneyFormBaseForm, FormC
  * @template Form - The type representing the structure of the entire form.
  * @template FormContext - The type representing the context associated with the form.
  *
- * @param {BaseHoneyFormFieldsConfigs<Form, FormContext>} fieldsConfigs - Configuration object for the form fields, including deserializer functions.
+ * @param {BaseHoneyFormFieldsConfig<Form, FormContext>} fieldsConfig - Configuration object for the form fields, including deserializer functions.
  * @param {string} formName - The name of the form to deserialize.
  *
  * @returns {Form | undefined} - The deserialized form object, or undefined if the form data is not found in the query string.
@@ -684,15 +684,15 @@ export const deserializeFormFromQueryString = <
   Form extends HoneyFormBaseForm,
   FormContext = undefined,
 >(
-  fieldsConfigs: BaseHoneyFormFieldsConfigs<Form, FormContext>,
+  fieldsConfig: BaseHoneyFormFieldsConfig<Form, FormContext>,
   formName: string,
 ): Form | undefined => {
   const searchParams = new URLSearchParams(window.location.search);
   const rawFormData = searchParams.get(formName);
 
   return rawFormData
     ? deserializeForm(rawFormData, (fieldName, rawValue) => {
-        const fieldConfig = fieldsConfigs[fieldName];
+        const fieldConfig = fieldsConfig[fieldName];
 
         return fieldConfig.deserializer?.(rawValue) ?? (rawValue as Form[typeof fieldName]);
       })