gform-react 1.5.1 → 1.9.2

package/native/dist/index.d.ts

@@ -0,0 +1,77 @@
+import type { Dispatch, MutableRefObject, ReactNode, SetStateAction, FC } from "react";
+import type {TextInputProps, View, ViewProps} from 'react-native';
+import type {BaseGenericFieldProps, GInputState, GInputStateMutable, GValidators, IForm, PartialForm, RawData, ToRawDataOptions, ToURLSearchParamsOptions} from '../../dist';
+
+type RNGInputElementHandler<T> = (input: GInputStateMutable<T>, props: TextInputProps) => JSX.Element;
+
+export type RNGInputProps = BaseGenericFieldProps & TextInputProps & {
+    defaultValue?: string | number;
+    /**a function that gets called once the input has initialized and may have deps (see `fetchDeps`) */
+    fetch?: (state: GInputStateMutable, fields: IForm & { [key: string]: GInputStateMutable }) => void | Partial<GInputStateMutable> | Promise<void | Partial<GInputStateMutable>>;
+    /**an array of input keys that once one the values have changed `fetch` will re-run */
+    fetchDeps?: string[];
+    /**
+     * specify the debounce amount for validations in milliseconds
+     * @default 300
+     * */
+    debounce?: number;
+} & ({
+    type?: 'text' | 'email' | 'tel' | 'url' | 'search';
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    value?: string;
+    defaultValue?: string;
+    /**a handler fer rendering the input
+     * @param input the current state of the input
+     * @param props the props of the input should be spread to the dom element 
+     * @example <input {...props} /> //native
+     * <InputText {...props} /> //Prime React
+     * <TextField inputProps={props} /> //MUI
+     */
+    element?: RNGInputElementHandler<string>;
+});
+
+export declare const RNGInput: FC<RNGInputProps & {ref?: MutableRefObject<any | null>}>;
+
+export type RNGFormState<T> = IForm<T>
+    &
+    {
+        /**indicates whether the form is valid */
+        isValid: boolean;
+        /**indicates whether the form is invalid */
+        isInvalid: boolean;
+        /**returns the loading state */
+        loading: boolean;
+        /**returns an object with key value pairs represents the form*/
+        toRawData(options?: ToRawDataOptions<T>): RawData<T>;
+        /**returns `URLSearchParams` instance represents the form*/
+        toURLSearchParams(options?: ToURLSearchParamsOptions<T>): URLSearchParams;
+        /**update the loading state */
+        setLoading: Dispatch<SetStateAction<boolean>>;
+        /**update the validity state (invokes all defined validators) */
+        checkValidity(): boolean;
+        /**manually dispatch any changes to input(s) */
+        dispatchChanges: (changes: PartialForm<T> & { [key: string]: Partial<GInputState<any>> }) => void;
+    };
+
+export type RNGFormProps<T> = Omit<ViewProps, 'children'> & {
+    children?: ReactNode | ReactNode[] | ((state: RNGFormState<T>) => ReactNode | ReactNode[]);
+    /** @param loader - a component to display while loading (optional). */
+    loader?: ReactNode;
+    /** @param stateRef - pass a ref which will points to the current state of the form (optional). */
+    stateRef?: MutableRefObject<RNGFormState<T> | undefined>;
+    /** @param validators - an object for handling validations (optional). */
+    validators?: GValidators<T>;
+    /** @param onInit - execute a handler once the form has initialized (optional). */
+    onInit?: (state: RNGFormState<T>) => void | PartialForm<T> | Promise<void | PartialForm<T>>;
+    el: FC<ViewProps>;
+    ref?: MutableRefObject<View | null>;
+};
+
+/**
+ * build dynamic forms with validations.
+ * @link Docs - https://gform-react.onrender.com
+ * @link Npm - https://www.npmjs.com/package/gform-react
+ */
+export const RNGForm: <T extends any>({loader,stateRef,children,validators,onInit,...rest}: RNGFormProps<T>) => JSX.Element;

package/native/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "gform-react/native",
+    "private": true,
+    "types": "./dist/index.d.ts",
+    "main": "./dist/cjs/index.js",
+    "module": "./dist/esm/index.js",
+    "exports": {
+      "require": "./dist/cjs/index.js",
+      "import": {
+        "production": "./dist/esm/index.js",
+        "development": "./dist/esm/index.development.js"
+      },
+      "default": "./dist/esm/index.js"
+    }
+  }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "gform-react",
-  "version": "1.5.1",
+  "version": "1.9.2",
   "description": "build generic forms with validations for react-based applications",
   "author": "Tal Maman, Arkady Birko",
   "license": "MIT",
   "scripts": {
-    "clean": "rimraf ./dist",
+    "clean": "rimraf ./dist && rimraf ./native",
     "build:prod": "rollup -c --environment build:production",
     "build:dev": "rollup -c --environment build:development",
     "build": "npm run tscheck && npm run lint && npm run security:check && npm run clean && npm run build:dev && npm run build:prod",
@@ -19,46 +19,57 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
-    "require": "./dist/cjs/index.js",
-    "import": {
-      "production": "./dist/esm/index.js",
-      "development": "./dist/esm/index.development.js"
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "import": {
+        "production": "./dist/esm/index.js",
+        "development": "./dist/esm/index.development.js"
+      },
+      "default": "./dist/esm/index.js"
+    },
+    "./native": {
+      "require": "./native/dist/cjs/index.js",
+      "import": {
+        "production": "./native/dist/esm/index.js",
+        "development": "./native/dist/esm/index.development.js"
+      },
+      "default": "./native/dist/esm/index.js"
     }
   },
   "sideEffects": false,
   "files": [
-    "dist/"
+    "dist",
+    "native"
   ],
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/plugin-transform-runtime": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/core": "^7.23.9",
+    "@babel/plugin-transform-runtime": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/material": "^5.10.2",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.0",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@types/react": "18.2.55",
+    "@types/react-dom": "18.2.19",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
     "eslint": "^8.12.0",
     "primeicons": "^6.0.1",
     "primereact": "^8.7.3",
+    "react-native": "0.73.4",
     "rimraf": "^5.0.1",
-    "rollup": "^3.23.0",
+    "rollup": "^3.29.4",
     "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-dts": "^5.3.0",
-    "rollup-plugin-typescript2": "^0.34.1",
     "typescript": "^5.0.4"
   },
   "keywords": [