Refactor form handling library, update package version to 1.0.11, and…

… improve error handling and validation mechanisms
Thavarshan · Oct 18, 2024 · a02a2c3 · a02a2c3
1 parent b3a7218
commit a02a2c3
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 91 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,106 +10,106 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
-* Complete code refactor and restructure
-* Added support for file upload progress tracking.
-* Added handling of Laravel validation error responses within the form.
+- Complete code refactor and restructure
+- Added support for file upload progress tracking.
+- Added handling of Laravel validation error responses within the form.
 
 ### Changed
 
-* Updated API to support all common HTTP methods (`GET`, `POST`, `PUT`, `PATCH`, `DELETE`).
-* Improved error handling and validation mechanisms to integrate seamlessly with Laravel.
-* Updted dependencies
+- Updated API to support all common HTTP methods (`GET`, `POST`, `PUT`, `PATCH`, `DELETE`).
+- Improved error handling and validation mechanisms to integrate seamlessly with Laravel.
+- Updted dependencies
 
 ### Fixed
 
-* Fixed CSRF token management for automatic inclusion in form requests.
-* Fixed issues where form errors were not being properly cleared or reset upon new submissions.
+- Fixed CSRF token management for automatic inclusion in form requests.
+- Fixed issues where form errors were not being properly cleared or reset upon new submissions.
 
 ## [v0.0.11](https://github.com/Thavarshan/formlink/compare/v0.0.10...v0.0.11) - 17-10-2023
 
 ### Added
 
-* Add `getInitial` method to Form
+- Add `getInitial` method to Form
 
 ### Changed
 
-* Update dependencies
-* Update docblocks to option types and update `package.json`
-* Update proxy instance to use lodash when checking for reserved field names
+- Update dependencies
+- Update docblocks to option types and update `package.json`
+- Update proxy instance to use lodash when checking for reserved field names
 
 ### Fixed
 
-* Fix props being set directly on form client
-* Fix all props being set inside data and initial data props of form client
+- Fix props being set directly on form client
+- Fix all props being set inside data and initial data props of form client
 
 ## [v0.0.10](https://github.com/Thavarshan/formlink/compare/v0.0.9...v0.0.10) - 11-10-2023
 
 ### Changed
 
-* Update import statements to use proper relative paths
-* Export response types and error types from `index.ts`
+- Update import statements to use proper relative paths
+- Export response types and error types from `index.ts`
 
 ## [v0.0.9](https://github.com/Thavarshan/formlink/compare/v0.0.6...v0.0.9) - 10-10-2023
 
 ### Added
 
-* Add `extractError` private method to Form
-* Add `getFirstInputFieldName` private method to Form
-* Add `exception` enum
-* Add `initialise` private method to Form
+- Add `extractError` private method to Form
+- Add `getFirstInputFieldName` private method to Form
+- Add `exception` enum
+- Add `initialise` private method to Form
 
 ### Changed
 
-* Update type hints on `Form` class
-* Update http initialise method call priority
-* Update README.md with CI badges
-* Update error handler to extract error from response
+- Update type hints on `Form` class
+- Update http initialise method call priority
+- Update README.md with CI badges
+- Update error handler to extract error from response
 
 ### Fixed
 
-* Fix typo on ErrorResponse interface name
+- Fix typo on ErrorResponse interface name
 
 ## [v0.0.6](https://github.com/fornlinkjs/fornlink/compare/v0.0.5...v0.0.6) - 09-10-2023
 
 ### Changed
 
-* Update set data method and error handler
-* Update README.md with more information about how to use with Vue 3 Composition API
+- Update set data method and error handler
+- Update README.md with more information about how to use with Vue 3 Composition API
 
 ## [v0.0.5](https://github.com/fornlinkjs/fornlink/compare/v0.0.4...v0.0.5) - 09-10-2023
 
 ### Added
 
-* Add `getIsDirty` method to Form
-* Add `setIsDirty` method to Form
-* Add `isDirty` property to Form
+- Add `getIsDirty` method to Form
+- Add `setIsDirty` method to Form
+- Add `isDirty` property to Form
 
 ### Changed
 
-* Update initials data setting mechanism
-* Update `allErrors` method to `errors`
-* Integrate Axios types into Formlink types
+- Update initials data setting mechanism
+- Update `allErrors` method to `errors`
+- Integrate Axios types into Formlink types
 
 ## [v0.0.4](https://github.com/fornlinkjs/fornlink/compare/v0.0.3...v0.0.4) - 08-10-2023
 
 ### Changed
 
-* Create proxy instance when Form is instantiated
-* Minor method refactors
+- Create proxy instance when Form is instantiated
+- Minor method refactors
 
 ## [v0.0.3](https://github.com/fornlinkjs/fornlink/compare/v0.0.2...v0.0.3) - 08-10-2023
 
 ### Changed
 
-* Update `package.json` with more information about the project
-* Update `package.json` with proper export details
+- Update `package.json` with more information about the project
+- Update `package.json` with proper export details
 
 ## [v0.0.2](https://github.com/fornlinkjs/fornlink/compare/v0.0.1...v0.0.2) - 08-10-2023
 
 ### Changed
 
-* Update `README.md` with more information about the project
-* Update package description
+- Update `README.md` with more information about the project
+- Update package description
 
 ## v0.0.1 - 08-10-2023
 

diff --git a/README.md b/README.md
@@ -64,44 +64,28 @@ await form.post('/api/contact');
   <form @submit.prevent="submit">
     <!-- Name field -->
     <div>
-      <input
-        v-model="form.name"
-        type="text"
-        :class="{ 'error': form.errors.name }"
-      />
+      <input v-model="form.name" type="text" :class="{ error: form.errors.name }" />
       <span v-if="form.errors.name" class="error">
         {{ form.errors.name }}
       </span>
     </div>
 
     <!-- Email field -->
     <div>
-      <input
-        v-model="form.email"
-        type="email"
-        :class="{ 'error': form.errors.email }"
-      />
+      <input v-model="form.email" type="email" :class="{ error: form.errors.email }" />
       <span v-if="form.errors.email" class="error">
         {{ form.errors.email }}
       </span>
     </div>
 
     <!-- File upload with progress -->
     <div>
-      <input
-        type="file"
-        @change="handleFile"
-      />
-      <div v-if="form.progress" class="progress">
-        {{ form.progress.percentage }}% uploaded
-      </div>
+      <input type="file" @change="handleFile" />
+      <div v-if="form.progress" class="progress">{{ form.progress.percentage }}% uploaded</div>
     </div>
 
     <!-- Submit button -->
-    <button
-      type="submit"
-      :disabled="form.processing"
-    >
+    <button type="submit" :disabled="form.processing">
       {{ form.processing ? 'Sending...' : 'Send Message' }}
     </button>
   </form>
@@ -159,22 +143,22 @@ const submit = async () => {
 Monitor form state using reactive properties:
 
 ```typescript
-form.processing  // Is the form being submitted?
-form.progress    // Upload progress data
-form.errors      // Validation errors
-form.isDirty    // Has the form been modified?
+form.processing; // Is the form being submitted?
+form.progress; // Upload progress data
+form.errors; // Validation errors
+form.isDirty; // Has the form been modified?
 ```
 
 ### HTTP Methods
 
 Support for all common HTTP methods:
 
 ```typescript
-form.get(url)     // GET request
-form.post(url)    // POST request
-form.put(url)     // PUT request
-form.patch(url)   // PATCH request
-form.delete(url)  // DELETE request
+form.get(url); // GET request
+form.post(url); // POST request
+form.put(url); // PUT request
+form.patch(url); // PATCH request
+form.delete(url); // DELETE request
 ```
 
 ### Form Transformation
@@ -227,18 +211,21 @@ const form = useForm(data, customAxios);
 ### Default Options
 
 ```typescript
-const form = useForm<FormData>({
-  // Initial data
-}, {
-  // Axios instance (optional)
-  axios: customAxios,
-
-  // Form options (optional)
-  options: {
-    resetOnSuccess: true,
-    preserveScroll: true
+const form = useForm<FormData>(
+  {
+    // Initial data
+  },
+  {
+    // Axios instance (optional)
+    axios: customAxios,
+
+    // Form options (optional)
+    options: {
+      resetOnSuccess: true,
+      preserveScroll: true
+    }
   }
-});
+);
 ```
 
 ## TypeScript Support

diff --git a/src/form.ts b/src/form.ts
@@ -11,7 +11,6 @@ import { hasFiles } from './utils/file';
 import { reservedFieldNames, guardAgainstReservedFieldName } from './utils/field-name-validator';
 import { ValidationRules } from './types/validation';
 import { ApiValidationError } from './types/error';
-import { prototype } from 'events';
 
 /**
  * The Form class provides a simple way to manage form state and submission.
@@ -39,7 +38,7 @@ export class Form<TForm extends NestedFormData<TForm>> implements IForm<TForm> {
    * @param {TForm} initialData - The initial form data.
    * @param {AxiosInstance} [axiosInstance=axios] - The Axios instance to use for requests.
    */
-  constructor (initialData: TForm, axiosInstance: AxiosInstance = axios) {
+  constructor(initialData: TForm, axiosInstance: AxiosInstance = axios) {
     this.data = initialData;
     this.defaults = { ...initialData };
     this.axiosInstance = axiosInstance;

diff --git a/src/types/form-data.ts b/src/types/form-data.ts
@@ -4,8 +4,8 @@ export type FormDataType = Record<string, FormDataConvertible>;
 
 export type NestedFormData<T> = {
   [K in keyof T]: T[K] extends object
-  ? NestedFormData<T[K]>
-  : T[K] extends File | File[] | null
-  ? T[K]
-  : FormDataConvertible;
+    ? NestedFormData<T[K]>
+    : T[K] extends File | File[] | null
+      ? T[K]
+      : FormDataConvertible;
 };
diff --git a/src/types/progress.ts b/src/types/progress.ts
@@ -1,6 +1,6 @@
 import { AxiosProgressEvent } from 'axios';
 
-export type Progress = { percentage: number; } & AxiosProgressEvent;
+export type Progress = { percentage: number } & AxiosProgressEvent;
 
 export interface FormProgress {
   upload?: Progress;

diff --git a/tests/form.test.ts b/tests/form.test.ts
@@ -288,10 +288,12 @@ describe('Form', () => {
   describe('Form Validation', () => {
     it('should validate form data before submission', async () => {
       form.rules = {
-        email: [{
-          validate: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
-          message: 'Invalid email format'
-        }]
+        email: [
+          {
+            validate: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
+            message: 'Invalid email format'
+          }
+        ]
       };
 
       form.email = 'invalid-email';