gform-react 2.7.0 → 2.7.5

package/README.md

@@ -1,42 +1,119 @@
-# GForm
-
-![gform-react](https://gform-react.onrender.com/gform-logo.png)
-
-![npm bundle size](https://img.shields.io/bundlephobia/min/gform-react?label=minified%20size&color=darkergreen)
-![npm bundle size](https://img.shields.io/bundlephobia/minzip/gform-react?label=gzip%20size&color=darkergreen)
-![npm peer dependency version](https://img.shields.io/npm/dependency-version/gform-react/peer/react)
-![npm peer dependency version](https://img.shields.io/npm/dependency-version/gform-react/peer/react-dom)
-[![NPM](https://img.shields.io/npm/l/gform-react)](https://unpkg.com/gform-react@latest/LICENSE.md)
-
-#### build generic forms with validations for react-based applications.
-it doesn't matter which UI library you're using,
-it only cares about the form and the inputs inside.
-
-## Pros
-* Lightweight
-* Based on native form and constraint validations (can also add custom and async validations)
-* Can be used with any UI library that preserves native form controls (input, button, etc. can also be adjusted to non-native controls)
-* Tree shakeable
-* Accessibility semi-automatic (required inputs and invalid inputs automatically sets aria-required and aria-invalid)
-* React Native support
-* Supports React 19, Next.js 15
-
-## Docs
-https://gform-react.onrender.com
+<div align="center">
+    <a href="https://gform-react.onrender.com" title="GForm React – A lightweight React form library built for performance, validation, and clean form logic">
+        <img src="https://gform-react.onrender.com/gform-logo.png" alt="gform-react logo" />
+    </a>
+    <h1>gform-react</h1>
+    <p>A lightweight React form library built for <b>performance</b>, <b>validation</b>, and clean <b>form logic</b></p>
+</div>
+
+## Features
+
+- **Lightweight**
+- **Tree‑shakeable**
+- **Minimal re-renders** — only updates fields that change
+- **Native HTML Constraint Validations**
+- **Custom Validations**
+- **Custom Async Validations**
+- **Supports Yup, Zod, and more**
+- **Dynamic forms** — add/remove fields on the fly
+- **Accessibility‑friendly**  
+  Automatically sets `aria-required` and `aria-invalid`
+- **React Native support**
+
+<br/>
+<div align="center">
+  <a href="https://bundlephobia.com/package/gform-react">
+    <img src="https://img.shields.io/bundlephobia/min/gform-react?label=minified%20size&color=darkergreen" alt="Minified size">
+  </a>
+  
+  <a href="https://bundlephobia.com/package/gform-react">
+    <img src="https://img.shields.io/bundlephobia/minzip/gform-react?label=gzip%20size&color=darkergreen" alt="Gzip size">
+  </a>
+  
+  <img src="https://img.shields.io/npm/dm/gform-react" alt="npm downloads">
+  
+  <img src="https://img.shields.io/npm/dependency-version/gform-react/peer/react" alt="React peer dependency">
+  
+  <img src="https://img.shields.io/npm/dependency-version/gform-react/peer/react-dom" alt="React DOM peer dependency">
+  
+  <a href="https://unpkg.com/gform-react@latest/LICENSE.md">
+    <img src="https://img.shields.io/npm/l/gform-react" alt="MIT License">
+  </a>
+</div>
+<br/>
+
+## QuickStart
+```tsx
+import {GForm, GInput, GValidator, type GValidators} from "gform-react";
 
-## Demo:
-https://codesandbox.io/p/sandbox/gifted-elbakyan-fs5g2c
+interface SignInForm {
+  username: string;
+  password: string;
+}
+
+const baseValidator = new GValidator().withRequiredMessage('this field is required');
+
+const validators: GValidators<SignInForm> = {
+  '*': baseValidator, // a default validator for all other fields in the form
+
+  password: new GValidator(baseValidator)
+          .withMinLengthMessage((input) => `${input.formKey} must contain atleast ${input.minLength} chars`),
+};
+
+const App: FC = () => {
+    return (
+            <GForm<SignInForm> className='some-class'
+                               validators={validators}
+                               onSubmit={(formState, e) => { //can be used with native `action` or with Next.js `server actions`
+                                    e.preventDefault();
+                                    console.log(formState);
+                               }}>
+                <GInput formKey='username'
+                        required
+                        element={(input, props) => <div>
+                            <input {...props} placeholder='username'/>
+                            {input.error && <small className="p-error">{input.errorText}</small>}
+                        </div>}
+                />
+                <GInput formKey='password' 
+                        type='password'
+                        required
+                        minLength={5}
+                        element={(input, props) => <div>
+                            <input {...props} placeholder='password'/>
+                            {input.error && <small className="p-error">{input.errorText}</small>}
+                        </div>}
+                />
+                <button>Submit</button>
+            </GForm>
+    );
+};
+```
+
+## Documentation
+
+Full documentation, examples, and API reference:
+
+https://gform-react.onrender.com
 
 ## Installation
+
 npm:
-```shell
+
+```sh
 npm install gform-react
 ```
 
 yarn:
-```shell
+
+```sh
 yarn add gform-react
 ```
 
-#### NOTE:
-react >=16.8.0, react-dom >=16.8.0 are peer dependencies
+## Peer dependencies
+react >=16.8.0, react-dom >=16.8.0 are peer dependencies
+
+## License
+
+MIT © Tal  
+https://www.npmjs.com/package/gform-react

package/dist/cjs/gform-react.development.js

@@ -2,7 +2,6 @@
 
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 
 const isObject = o => o && typeof o === 'object' && !Array.isArray(o);
 const defaultFieldProps = {
@@ -108,8 +107,7 @@ const _findValidityKey = (validity, exclude = []) => {
   }
 };
 const _checkTypeMismatch = input => {
-  var _input$value;
-  const value = (_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.toString().trim();
+  const value = input.value?.toString().trim();
   if (!value) return false;
   switch (input.type) {
     case 'email':
@@ -150,19 +148,15 @@ const _toRawData = (fields, options = {}) => {
     transform
   } = options;
   if (include) {
-    include.forEach(key => {
-      var _fields$key;
-      return data[key] = (_fields$key = fields[key]) === null || _fields$key === void 0 ? void 0 : _fields$key.value;
-    });
+    include.forEach(key => data[key] = fields[key]?.value);
   } else for (const f in fields) {
     data[f] = fields[f].value;
   }
-  exclude === null || exclude === void 0 || exclude.forEach(key => delete data[key]);
+  exclude?.forEach(key => delete data[key]);
   if (transform) {
     for (const key in transform) {
-      var _fields$key2;
       const set = transform[key];
-      data[key] = set(((_fields$key2 = fields[key]) === null || _fields$key2 === void 0 ? void 0 : _fields$key2.value) || fields[key]);
+      data[key] = set(fields[key]?.value || fields[key]);
     }
   }
   return data;
@@ -181,19 +175,15 @@ function _toURLSearchParams(options) {
     } = options;
     if (include) {
       data = {};
-      include.forEach(key => {
-        var _this$key;
-        return data[key] = (_this$key = this[key]) === null || _this$key === void 0 ? void 0 : _this$key.value;
-      });
+      include.forEach(key => data[key] = this[key]?.value);
     } else {
       data = this.toRawData();
-      exclude === null || exclude === void 0 || exclude.forEach(key => delete data[key]);
+      exclude?.forEach(key => delete data[key]);
     }
     if (transform) {
       for (const key in transform) {
-        var _this$key2;
         const set = transform[key];
-        data[key] = set((_this$key2 = this[key]) === null || _this$key2 === void 0 ? void 0 : _this$key2.value);
+        data[key] = set(this[key]?.value);
       }
     }
   } else data = this.toRawData();
@@ -201,8 +191,7 @@ function _toURLSearchParams(options) {
 }
 function __debounce(timeout, id) {
   return new Promise(resolve => {
-    var _this$id;
-    if ((_this$id = this[id]) !== null && _this$id !== void 0 && _this$id.timerId) clearTimeout(this[id].timerId);
+    if (this[id]?.timerId) clearTimeout(this[id].timerId);
     const timerId = setTimeout(() => resolve(), timeout);
     if (this[id]) {
       this[id].timerId = timerId;
@@ -213,11 +202,11 @@ function __debounce(timeout, id) {
 }
 const _debounce = __debounce.bind({});
 const _extractValue = (e, unknown) => {
-  if (e !== null && e !== void 0 && e.target) {
+  if (e?.target) {
     if (Object.hasOwn(typeValueDict, e.target.type)) return e.target[typeValueDict[e.target.type]];
     return e.target.value;
   }
-  return (e === null || e === void 0 ? void 0 : e.value) || (isObject(unknown) ? unknown.value : unknown);
+  return e?.value || (isObject(unknown) ? unknown.value : unknown);
 };
 const _checkResult = (handlerResult, value) => typeof handlerResult === 'boolean' ? handlerResult : typeof value === 'string' ? typeof handlerResult === 'string' ? !new RegExp(handlerResult).test(value) : !handlerResult.test(value) : false;
 const _merge = (target = {}, ...nodes) => {
@@ -303,26 +292,21 @@ class GValidator {
     return this._asyncHandlers;
   }
   constructor(baseValidator) {
-    _defineProperty(this, "_handlers", void 0);
-    _defineProperty(this, "_constraintHandlers", void 0);
-    _defineProperty(this, "_asyncHandlers", void 0);
-    _defineProperty(this, "track", void 0);
-    const baseHandlers = (baseValidator === null || baseValidator === void 0 ? void 0 : baseValidator.handlers) || [];
-    const baseConstraintHandlers = (baseValidator === null || baseValidator === void 0 ? void 0 : baseValidator.constraintHandlers) || [];
-    const baseHandlersAsync = (baseValidator === null || baseValidator === void 0 ? void 0 : baseValidator.asyncHandlers) || [];
+    const baseHandlers = baseValidator?.handlers || [];
+    const baseConstraintHandlers = baseValidator?.constraintHandlers || [];
+    const baseHandlersAsync = baseValidator?.asyncHandlers || [];
     this._handlers = [].concat(baseHandlers);
     this._constraintHandlers = [].concat(baseConstraintHandlers);
     this._asyncHandlers = [].concat(baseHandlersAsync);
     {
       this.track = [];
-      if (baseValidator !== null && baseValidator !== void 0 && baseValidator.track) {
+      if (baseValidator?.track) {
         this.track = this.track.concat(baseValidator.track);
       }
     }
   }
   hasConstraint(constraint) {
-    var _this$track;
-    return ((_this$track = this.track) === null || _this$track === void 0 ? void 0 : _this$track.includes(constraint)) || false;
+    return this.track?.includes(constraint) || false;
   }
   withRequiredMessage(message) {
     return this.__addConstraintValidationHandler('valueMissing', message);
@@ -432,7 +416,7 @@ const useFormHandlers = (getState, setState, validators = {}, optimized = false)
   const _validateInput = (input, validityKey, setValidity) => {
     const inputValidator = validators[input.validatorKey || input.formKey] || validators['*'];
     {
-      if (validityKey && !(inputValidator !== null && inputValidator !== void 0 && inputValidator.hasConstraint(validityKey))) {
+      if (validityKey && !inputValidator?.hasConstraint(validityKey)) {
         if (validityKey === 'typeMismatch') console.warn(`DEV ONLY - [Missing Validator] - the input '${input.formKey}' has described the constraint '${validityMap[validityKey]}' however, a correspond validator/custom validation/pattern validator is missing.\nadd '${handlersMap[validityMap[validityKey]]}' or 'withCustomValidation' or '${handlersMap[validityMap.patternMismatch]}' to the input validator.\nexample:\nconst validators: GValidators = {\n\temail: new GValidator().withPatternMismatchMessage('pattern mismatch'),\n\t...\n}\n\nor either remove the constraint '${validityMap[validityKey]}' from the input props`);else console.warn(`DEV ONLY - [Missing Validator] - the input '${input.formKey}' has described the constraint '${validityMap[validityKey]}' however, a correspond validator is missing.\nadd '${handlersMap[validityMap[validityKey]]}' to the input validator.\nexample:\nconst validators: GValidators = {\n\temail: new GValidator().withPatternMismatchMessage('pattern mismatch'),\n\t...\n}\n\nor either remove the constraint '${validityMap[validityKey]}' from the input props`);
       }
     }