From 0c19233b4d282c751474e3bf07b3026105c8b294 Mon Sep 17 00:00:00 2001
From: cupcakearmy <nicco.borgioli@gmail.com>
Date: Thu, 26 Sep 2019 21:13:27 +0200
Subject: [PATCH] initial commit

---
 .gitignore      | 11 +++++++
 .npmignore      |  2 ++
 lib/index.ts    | 84 +++++++++++++++++++++++++++++++++++++++++++++++++
 package.json    | 22 +++++++++++++
 test/index.html | 27 ++++++++++++++++
 test/test.tsx   | 68 +++++++++++++++++++++++++++++++++++++++
 tsconfig.json   | 25 +++++++++++++++
 7 files changed, 239 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .npmignore
 create mode 100644 lib/index.ts
 create mode 100644 package.json
 create mode 100644 test/index.html
 create mode 100644 test/test.tsx
 create mode 100644 tsconfig.json

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..9196583
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,11 @@
+# Node
+node_modules
+pnpm-lock.yaml
+package-lock.json
+
+# Parcel
+.cache
+public
+
+# Generated
+dist
\ No newline at end of file
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..6818979
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,2 @@
+*
+!lib/
\ No newline at end of file
diff --git a/lib/index.ts b/lib/index.ts
new file mode 100644
index 0000000..0014c57
--- /dev/null
+++ b/lib/index.ts
@@ -0,0 +1,84 @@
+import React, { useState } from 'react'
+
+
+
+export type useFormExtractor = (from: any) => any
+
+export type useFormAutoOptions = {
+	getter?: string,
+	setter?: string,
+	extractor?: useFormExtractor
+}
+
+export type useFormOptions = {
+	extractor?: useFormExtractor,
+}
+
+export type useFormValidatorFunction = ((s: any) => boolean | Promise<boolean>)
+export type useFormValidatorMethod = useFormValidatorFunction | RegExp
+
+export type useFormValidatorObject = {
+	validator: useFormValidatorMethod,
+	message?: string,
+}
+
+export type useFormValidator = useFormValidatorMethod | useFormValidatorObject
+
+export const HTMLInputExtractor: useFormExtractor = (e: React.FormEvent<HTMLInputElement>) => e.currentTarget.value
+export const HTMLCheckboxExtractor: useFormExtractor = (e: React.FormEvent<HTMLInputElement>) => e.currentTarget.checked
+
+export const useForm = <T, U extends { [key in keyof T]: useFormValidator }, E extends { [key in keyof U]?: string }>(init: T, validators: Partial<U> = {}, options: useFormOptions = {}) => {
+	const [form, setForm] = useState<T>(init)
+
+	const [errors, setErrors] = useState<Partial<E>>({})
+
+	const _set = (key: keyof T, value: any) => {
+		setForm({
+			...form,
+			[key]: value,
+		})
+	}
+
+	const _validateAll = async (value: any, validator: useFormValidatorMethod): Promise<boolean> => {
+		if (validator.constructor.name === 'Function' || validator.constructor.name === 'AsyncFunction')
+			return (validator as useFormValidatorFunction)(value)
+		else if (validator.constructor.name === 'RegExp')
+			return (validator as RegExp).test(value)
+		else return false
+	}
+
+	const _getValidatorMessage = (key: keyof T): string => {
+		// @ts-ignore
+		if (validators[key] && validators[key].message) return validators[key].message
+		else return `Error in: ${key}`
+	}
+
+	const _validate = (key: keyof T, value: any) => {
+		const validator: useFormValidator | undefined = validators[key]
+		if (!validator) return
+
+		// @ts-ignore
+		_validateAll(value, validator.constructor.name === 'Object' ? (validator as useFormValidatorObject).validator : validator)
+			.then((valid: boolean) => {
+				setErrors({
+					...errors,
+					[key]: valid
+						? undefined
+						: _getValidatorMessage(key),
+				})
+			})
+	}
+
+	const update = (key: keyof T, extractor = options.extractor) => (value: any) => {
+		const extracted = extractor ? extractor(value) : HTMLInputExtractor(value)
+		_set(key, extracted)
+		_validate(key, extracted)
+	}
+
+	const auto = (key: keyof T, opts: useFormAutoOptions = {}) => ({
+		[opts.getter || 'onChange']: update(key, opts.extractor),
+		[opts.setter || 'value']: form[key] as any,
+	})
+
+	return { form, update, auto, errors }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..9f5414a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+	"name": "formhero",
+	"version": "0.0.1",
+	"main": "dist/index.js",
+	"typings": "dist/index.d.ts",
+	"scripts": {
+		"test": "parcel -d public ./test/index.html",
+		"build": "tsc -w",
+		"dev": "pnpm run build & pnpm run test"
+	},
+	"browserslist": [
+		"last 1 year"
+	],
+	"devDependencies": {
+		"@types/react": "^16.9.3",
+		"@types/react-dom": "^16.9.1",
+		"parcel-bundler": "^1.12.3",
+		"react": "^16.9.0",
+		"react-dom": "^16.9.0",
+		"typescript": "^3.6.2"
+	}
+}
diff --git a/test/index.html b/test/index.html
new file mode 100644
index 0000000..00d7936
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,27 @@
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Form Hero</title>
+	<link rel="stylesheet" type="text/css"
+		href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" />
+	<style>
+		body {
+			padding: 1em
+		}
+
+		input,
+		select {
+			display: block;
+		}
+	</style>
+</head>
+
+<body>
+	<div id="root"></div>
+	<script src="./test.tsx"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/test/test.tsx b/test/test.tsx
new file mode 100644
index 0000000..71b5500
--- /dev/null
+++ b/test/test.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import ReactDOM from 'react-dom'
+
+import { useForm, HTMLInputExtractor } from '../'
+
+
+const TextError: React.FC<{ error?: string }> = ({ error }) => !error
+	? null
+	: <div className="has-text-danger">{error}</div>
+
+const Index: React.FC = () => {
+
+	const { auto, form, update, errors } = useForm({
+		username: '',
+		password: '',
+		type: 'formhero',
+		awesome: true,
+	}, {
+		username: /^test/,
+		password: {
+			validator: /^.{3,}$/,
+			message: 'To short',
+		},
+		awesome: (value) => !!value
+	}, { extractor: HTMLInputExtractor })
+
+	const _submit = (e: React.MouseEvent) => {
+		e.preventDefault()
+		console.log(form, errors)
+	}
+
+	return (
+		<div>
+			<form>
+				<div>Username</div>
+				<input {...auto('username')} />
+				<TextError error={errors.username} />
+				<br />
+
+				<div>Password</div>
+				<input {...auto('password')} />
+				<TextError error={errors.password} />
+				<br />
+
+				<div>Which one to choose?</div>
+				<select {...auto('type')}>
+					<option value="redux-form">Redux-Form</option>
+					<option value="react-hook-forms">React-Hook-Forms</option>
+					<option value="formik">Formik</option>
+					<option value="formhero">FormHero</option>
+				</select>
+				<br />
+
+				<div>Is it awesome?</div>
+				<input type="checkbox" name="vehicle" {...auto('awesome', { setter: 'checked', extractor: (e) => e.target.checked })} />
+				<TextError error={errors.awesome} />
+				<br />
+
+				<button onClick={_submit}>Test</button>
+			</form>
+		</div>
+	)
+}
+
+ReactDOM.render(<Index />, document.getElementById('root'))
+
+// @ts-ignore
+// if (module.hot) module.hot.accept()
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..348bde8
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,25 @@
+{
+	"compilerOptions": {
+		"target": "es5",
+		"module": "commonjs",
+		"jsx": "react",
+		"outDir": "./dist",
+		"declaration": true,
+		"strict": true,
+		"noImplicitAny": true,
+		"strictNullChecks": true,
+		"strictFunctionTypes": true,
+		"strictBindCallApply": true,
+		"strictPropertyInitialization": true,
+		"noImplicitThis": true,
+		"alwaysStrict": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true,
+		"esModuleInterop": true,
+		"experimentalDecorators": true,
+		"emitDecoratorMetadata": true
+	},
+	"include": [
+		"./lib"
+	]
+}
\ No newline at end of file