@prototyp/skeletor 1.0.5 → 1.0.7

package/README.md

@@ -242,102 +242,7 @@ height?: "full" | "auto";
 
 ### useForm & useFormUtils
 
----
-
-Handle form value updates and validation with `useForm`. Full TypeScript support, ability to configure optional parameters, custom validation rules.
-
-Flexible in its function, supports multiple validation approaches through callbacks:
-
-1. For on-change validation, use `update("prop", value, true)`
-2. To trigger standalone validation, use `validate("prop")`
-3. Validate entire form with `validateForm()`
-
-#### Example 1: Simple use case with standalone validation on blur:
-
-```javascript
-const {state, validation, update, validate} = useForm({email: "", password: "");
-
-...
-<Input
-	keyboardType="email-address"
-	returnKeyType="next"
-	label="E-mail Address"
-	errorMessage="Email is not valid."
-	emptyMessage="Email is a required field."
-	placeholder="What's your email address?"
-	value={state.email}
-	textContentType="emailAddress"
-	valid={validation.email}
-	onChangeText={(text) =>  update("email", text)}
-	onBlur={() => validate("email")}
-/>
-...
-```
-
-#### Example 2: Simple use case with on-change validation:
-
-```javascript
-// See example 1
-...
-onChangeText={(text) =>  update("email", text, true)}
-...
-```
-
-#### Example 3: Simple use case with on-submit validation:
-
-```javascript
-// See example 1
-
-function submit() {
-	if(!validateForm()) {
-		// Throw invalid error
-		// validation object will be populated
-	}
-}
-
-...
-<Input
-	keyboardType="email-address"
-	returnKeyType="next"
-	label="E-mail Address"
-	errorMessage="Email is not valid."
-	emptyMessage="Email is a required field."
-	placeholder="What's your email address?"
-	value={state.email}
-	textContentType="emailAddress"
-	valid={validation.email}
-	onChangeText={(text) =>  update("email", text)}
-/>
-<Button onPress={submit}>Submit</Button>
-```
-
-#### Example 4: Form configuration
-
-```javascript
-const { state, validation, update, validate } = useForm(
-{ firstName: "", middleName: "", lastName: ""},
-{
-	// If left empty, validation.middleName will be true
-	optional: ["middleName"],
-	// validation.lastName is invalid if lastName is <3 characters long
-	// state can be used to compare with other values (ie repeat password)
-	rules: { lastName: (value, state) => value.length >= 3,
-}
-```
-
-#### Example 5: useFormUtils
-
-Utility functions to help with standalone state validation, such as when re-validating a list of form values in a parent components.
-
-```javascript
-const { stateValidation } =  useFormUtils<Person>();
-
-function validatePeople() {
-	return people.every(person => stateValidation(person).valid);
-}
-```
-
-Other utilities: `doesValueExist`, `validateByRule`, `isOptional`, `fieldValidation`, `stateValidation`. Some are meant for internal `useForm` usage, such as `fieldValidation` and `validateByRule`, but are not unusable.
+Read documentation about useForm here: https://github.com/prototypdigital/skeleform
 
 ### useAnimation & useAnimationTimeline
 

package/lib/module/hooks/index.js

@@ -1,7 +1,7 @@
-export * from "./useForm";
 export * from "./useAnimation";
 export * from "./useAnimationTimeline";
 export * from "./useAppState";
 export * from "./useSkeletor";
 export * from "./useAndroidBackHandler";
+export * from "./skeleform/src/index";
 //# sourceMappingURL=index.js.map

package/lib/module/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,gBAAgB;AAC9B,cAAc,wBAAwB;AACtC,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,yBAAyB"}
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,wBAAwB;AACtC,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,yBAAyB;AACvC,cAAc,uBAAuB"}

package/lib/module/hooks/skeleform/README.md

@@ -0,0 +1,100 @@
+# skeleform
+
+Form management and validation toolkit originally a part of https://github.com/prototypdigital/skeletor
+
+### Usage
+
+Handle form value updates and validation with `useForm`. Full TypeScript support, ability to configure optional parameters, custom validation rules.
+
+Flexible in its function, supports multiple validation approaches through callbacks:
+
+1. For on-change validation, use `update("prop", value, true)`
+2. To trigger standalone validation, use `validate("prop")`
+3. Validate entire form with `validateForm()`
+
+The order of importance when it comes to validating fields is:
+
+1. Custom validation rule - will get the value as-is for your rule to validate it fully. The configuration rule receives the current value, state and optional flag values for you to validate against.
+2. If there is no custom validation rule and the primitive value check returns false (there is no value), check if the field is optional. If optional, the validation result is `true`, otherwise it is `false`;
+3. If all previous checks have not been triggered, return the primitive "has value" check result. This will return `false` for values such as: `null | undefined | NaN | "" | Invalid Date`. This will return `true` if you have a complex value type such as `object | Array`, <b>so in case you have a complex value type use a custom validation rule to get what you need</b>.
+
+#### Example 1: Simple use case with standalone validation on blur:
+
+```javascript
+const {state, validation, update, validate} = useForm({email: "", password: "");
+
+...
+<input
+  ...
+  value={state.email}
+	onChange={(e) =>  update("email", e.currentTarget.value)}
+	onBlur={() => validate("email")}
+/>
+...
+```
+
+#### Example 2: Simple use case with on-change validation:
+
+```javascript
+// See example 1
+...
+onChange={(e) =>  update("email", e.currentTarget.value, true)}
+...
+```
+
+#### Example 3: Simple use case with on-submit validation:
+
+```javascript
+// See example 1
+
+function submit() {
+	if(!validateForm()) {
+		// Throw invalid error
+		// validation object will be populated
+	}
+}
+
+...
+<input
+  ...
+	value={state.email}
+	onUpdate={(e) =>  update("email", e.currentTarget.value)}
+/>
+<button onPress={submit}>Submit</button>
+```
+
+Validation has three possible values:
+
+1. `undefined` = validation of the field value has not been done yet.
+2. `false` = validation has failed, the state value is not considered valid.
+3. `true` = validation has succeeded, the state value is considered valid.
+
+What does that mean? Well, it means that when you have `validation.email === false`, you should show an error message on the field. `undefined | true` are not relevant for rendering, only functionally to block form submit events.
+
+#### Example 4: Form configuration
+
+```javascript
+const { state, validation, update, validate } = useForm(
+{ firstName: "", middleName: "", lastName: ""},
+{
+	// If left empty, validation.middleName will be true
+	optional: ["middleName"],
+	// validation.lastName is invalid if lastName is <3 characters long
+	// state can be used to compare with other values (ie repeat password)
+	rules: { lastName: (value, state, optional) => value.length >= 3,
+}
+```
+
+#### Example 5: useFormUtils
+
+Utility functions to help with standalone state validation, such as when re-validating a list of form values in a parent components.
+
+```javascript
+const { stateValidation } =  useFormUtils<Person>();
+
+function validatePeople() {
+	return people.every(person => stateValidation(person).valid);
+}
+```
+
+Other utilities: `doesValueExist`, `validateByRule`, `isOptional`, `fieldValidation`, `stateValidation`. Some are meant for internal `useForm` usage, such as `fieldValidation` and `validateByRule`, but are not unusable.

package/lib/module/hooks/skeleform/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@prototyp/skeleform",
+  "description": "React/React-Native form management utility",
+  "author": "Luka Buljan <luka@prototyp.digital>",
+  "version": "1.0.1",
+  "license": "MIT",
+  "homepage": "https://github.com/prototypdigital/skeleform",
+  "repository": {
+    "type": "git",
+    "directory": "https://github.com/prototypdigital/skeleform"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "prepack": "tsc"
+  },
+  "devDependencies": {
+    "@types/jest": "29.4.0",
+    "@types/react": "^18.0.24",
+    "jest": "29.4.2",
+    "react": "^18.2.0",
+    "typescript": "4.8.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "react-native",
+    "typescript",
+    "form",
+    "input",
+    "state",
+    "validation",
+    "helpers",
+    "utilities",
+    "utils"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "eslintIgnore": [
+    "node_modules/"
+  ]
+}

package/lib/module/hooks/{useForm.js → skeleform/src/index.js}

@@ -108,32 +108,47 @@ export function useForm(values, config) {
 /** Helper hook to validate form state outside of the scope of useForm. */
 export function useFormUtils(config) {
   function doesValueExist(value) {
-    if (value === null || value === undefined || value === "" || value < 0) {
+    if (value === undefined || value === null) {
       return false;
     }
-    return true;
-  }
-  function validateByRule(key, value, state) {
-    // If rule exists, validate with rule
-    if (config !== null && config !== void 0 && config.rules && config.rules[key]) {
-      var _config$rules$key, _config$rules;
-      return (_config$rules$key = (_config$rules = config.rules)[key]) === null || _config$rules$key === void 0 ? void 0 : _config$rules$key.call(_config$rules, value, state);
+    if (typeof value === "string") {
+      return value !== "";
+    }
+    if (typeof value === "number") {
+      return value >= 0 || value < 0 || !isNaN(value);
+    }
+    if (value instanceof Date) {
+      return !isNaN(value.valueOf());
     }
-    // else return true because we know the value exists already.
     return true;
   }
   function isOptional(key) {
     var _config$optional;
-    return config === null || config === void 0 ? void 0 : (_config$optional = config.optional) === null || _config$optional === void 0 ? void 0 : _config$optional.includes(key);
+    return (config === null || config === void 0 ? void 0 : (_config$optional = config.optional) === null || _config$optional === void 0 ? void 0 : _config$optional.includes(key)) || false;
   }
+
+  /** Validate by custom validation rule. If the rule does not exist, returns undefined. */
+  function validateByRule(key, value, state) {
+    var _config$rules, _config$rules$key;
+    return config === null || config === void 0 ? void 0 : (_config$rules = config.rules) === null || _config$rules === void 0 ? void 0 : (_config$rules$key = _config$rules[key]) === null || _config$rules$key === void 0 ? void 0 : _config$rules$key.call(_config$rules, value, state, isOptional(key));
+  }
+
+  /** Handles validation for a specific form field.
+   * Order of priority:
+   * 1. If there is a custom validation rule, always use that to preserve all possible type values
+   * 2. If there is no value (is a falsy value), check if the field is optional
+   * 3. Fallback to simple truthy value check if all other checks are not triggered. */
   function fieldValidation(key, value, state) {
+    var _config$rules2;
     const hasValue = doesValueExist(value);
     const optional = isOptional(key);
-    if (!hasValue) {
-      return !!optional;
-    } else {
-      return validateByRule(key, value, state);
-    }
+
+    // If form has custom validation rule, always trigger only that.
+    if (!!(config !== null && config !== void 0 && (_config$rules2 = config.rules) !== null && _config$rules2 !== void 0 && _config$rules2[key])) return validateByRule(key, value, state);
+    // If value does not exist (is null, undefined or other falsy value), check if field is optional.
+    if (!hasValue) return !!optional;
+    // Fallback, simple check if value exists
+    return hasValue;
   }
   function stateValidation(state) {
     const keys = Object.keys(state).map(key => key);
@@ -156,4 +171,4 @@ export function useFormUtils(config) {
     stateValidation
   };
 }
-//# sourceMappingURL=useForm.js.map
+//# sourceMappingURL=index.js.map

package/lib/module/hooks/skeleform/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","useForm","values","config","keys","Object","validation","setValidation","initialState","setInitialState","state","setState","fieldValidation","stateValidation","isOptional","useFormUtils","changed","filter","key","length","updatedState","forEach","update","value","shouldValidate","s","undefined","validate","validateForm","formValidationState","valid","isFormValid","some","resetState","resetInitialValues","resetValidation","clearForm","doesValueExist","isNaN","Date","valueOf","optional","includes","validateByRule","rules","hasValue","map"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"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"}

package/lib/module/hooks/skeleform/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "include": ["src"] /* Include only the src directory */,
+  "compilerOptions": {
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "module": "ES6" /* Specify what module code is generated. */,
+    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
+    "outDir": "dist",
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+    "strict": true /* Enable all strict type-checking options. */,
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
+    "moduleResolution": "Node"
+  }
+}