Initial commit

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist

.npmignore

@@ -0,0 +1,2 @@
+.DS_Store
+src

README.md

@@ -1,2 +1,21 @@
 # nexapp-react-forms
 Form utilities in React
+
+## Hooks
+### useFormData
+Exposes a hook taking an `initialData` object. You can use it to receive the `formData` of the object as well as an `onChange` method. The `onChange` method will adapt it's parameters according to the type of the `initialData`. 
+
+For example you have an `initialData` like this: 
+```json
+{
+    "details": {
+        "name": "value"
+    },
+    "inventory": {
+        "quantity": 15
+    }
+}
+```
+When giving an object like this to the `useFormData` hook, the `onChange` method will be callable like this: `onChange("details")("name")("newValue)`. Which will change the `formData` from the hook with the updated value in the details.name field. For the moment this method can only go one level 2 level deep so any complex objects will have to be update entirely when calling this method.
+
+We use this hook to simplify our forms. We can then structure our form to represent each section of the data structure. Then each section will receive the underlying section. We can then give them `formData.details` as value and `onChange("details")` as onChange method. Giving us maximum flexibility to add/remove/change fields of the data structure without impacting the props we give to each components.

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@nexapp/nexapp-react-forms",
+  "version": "0.0.0",
+  "description": "Form utilities in react",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "prepublishOnly": "tsc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Nexapp/nexapp-react-forms.git"
+  },
+  "author": "Nexapp",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Nexapp/nexapp-react-forms/issues"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.0",
+    "react": "16.x",
+    "typescript": "4.x"
+  },
+  "peerDependencies": {
+    "react": "16.9.x",
+    "typescript": "4.x"
+  },
+  "homepage": "https://github.com/Nexapp/nexapp-react-forms#readme",
+  "dependencies": {
+    "@types/lodash.isequal": "^4.5.5",
+    "lodash.isequal": "^4.5.0"
+  }
+}

src/hooks/useFormData.ts

@@ -0,0 +1,34 @@
+import isEqual from "lodash.isequal";
+import { useState } from "react";
+
+export interface UseFormDataProps<T> {
+    initialData: T;
+}
+
+export interface UseFormDataResult<F> {
+    formData: F;
+    onChange: <T extends keyof F>(section: T) =>
+        (field: keyof F[typeof section]) =>
+            (value: F[typeof section][typeof field]) => void;
+    hasChanged: boolean;
+}
+
+const useFormData = <F>({ initialData }: UseFormDataProps<F>): UseFormDataResult<F> => {
+    const [formData, setFormData] = useState<F>(initialData);
+
+    const onChangeForm = <T extends keyof F>(section: T) =>
+        (field: keyof F[typeof section]) =>
+            (value: F[typeof section][typeof field]): void =>
+                setFormData((oldForm) => {
+                    const newSection = { ...oldForm[section], [field]: value };
+                    return { ...oldForm, [section]: newSection };
+                });
+
+    return {
+        formData,
+        onChange: onChangeForm,
+        hasChanged: !isEqual(initialData, formData),
+    };
+};
+
+export default useFormData;

src/index.ts

@@ -0,0 +1,5 @@
+import useFormData from "./hooks/useFormData";
+
+export {
+    useFormData
+}

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "lib": [
+      "es6"
+    ],
+    "moduleResolution": "node",
+    "target": "ES2019",
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "baseUrl": "src",
+    "jsx": "react",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}