@prototyp/skeletor 1.0.4 → 1.0.6

package/README.md

@@ -252,6 +252,12 @@ Flexible in its function, supports multiple validation approaches through callba
 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
@@ -321,7 +327,7 @@ const { state, validation, update, validate } = useForm(
 	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,
+	rules: { lastName: (value, state, optional) => value.length >= 3,
 }
 ```
 

package/lib/module/components/InputFocusScrollView/InputFocusScrollView.js

@@ -21,13 +21,11 @@ export const InputFocusScrollView = _ref => {
   } = _ref;
   const screenHeight = useRef(Dimensions.get("screen").height).current;
   const ref = useRef(null);
-  const [scrollTarget, setScrollTarget] = useState();
   /** Cached scroll position to keep focus on input if layout shifts. */
-  const [scrollPosition, setScrollPosition] = useState();
+  const [scrollPosition, setScrollPosition] = useState(null);
+  const [scrollTarget, setScrollTarget] = useState(null);
   function onInputFocus(e) {
-    if (Platform.OS !== "ios" || !scrollTarget) {
-      return;
-    }
+    if (Platform.OS !== "ios" || !scrollTarget) return;
     e.currentTarget.measureLayout(scrollTarget, (nope, top, nuuh, elementHeight) => {
       var _ref$current;
       let scrollY = top - elementHeight;
@@ -43,12 +41,6 @@ export const InputFocusScrollView = _ref => {
       });
     }, () => console.error("failed to measure layout"));
   }
-  function onScrollViewLayout(e) {
-    if (Platform.OS !== "ios") {
-      return;
-    }
-    setScrollTarget(e.nativeEvent.target);
-  }
 
   /** Handle layout shifts by programmatically scrolling to the same input position without animation. */
   function onContentSizeChange() {
@@ -60,7 +52,7 @@ export const InputFocusScrollView = _ref => {
       y: scrollPosition,
       animated: false
     });
-    setScrollPosition(undefined);
+    setScrollPosition(null);
   }
   const containerStyles = StyleSheet.flatten([styles[height], margins, style]);
   const contentStyles = StyleSheet.flatten([styles.content, {
@@ -70,7 +62,7 @@ export const InputFocusScrollView = _ref => {
     ref: ref,
     scrollToOverflowEnabled: true,
     scrollEventThrottle: 16,
-    onLayout: onScrollViewLayout,
+    onLayout: e => setScrollTarget(e.currentTarget),
     onContentSizeChange: onContentSizeChange,
     showsVerticalScrollIndicator: false,
     showsHorizontalScrollIndicator: false,

package/lib/module/components/InputFocusScrollView/InputFocusScrollView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useRef","useState","Platform","ScrollView","StyleSheet","Dimensions","InputFocusScrollView","children","style","contentContainerStyle","height","focusPositionOffset","margins","paddings","rest","screenHeight","get","current","ref","scrollTarget","setScrollTarget","scrollPosition","setScrollPosition","onInputFocus","e","OS","currentTarget","measureLayout","nope","top","nuuh","elementHeight","scrollY","undefined","scrollTo","y","console","error","onScrollViewLayout","nativeEvent","target","onContentSizeChange","animated","containerStyles","flatten","styles","contentStyles","content","create","full","auto","flexGrow","paddingBottom"],"sourceRoot":"../../src","sources":["InputFocusScrollView.tsx"],"mappings":"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"}
+{"version":3,"names":["React","useRef","useState","Platform","ScrollView","StyleSheet","Dimensions","InputFocusScrollView","children","style","contentContainerStyle","height","focusPositionOffset","margins","paddings","rest","screenHeight","get","current","ref","scrollPosition","setScrollPosition","scrollTarget","setScrollTarget","onInputFocus","e","OS","currentTarget","measureLayout","nope","top","nuuh","elementHeight","scrollY","undefined","scrollTo","y","console","error","onContentSizeChange","animated","containerStyles","flatten","styles","contentStyles","content","create","full","auto","flexGrow","paddingBottom"],"sourceRoot":"../../src","sources":["InputFocusScrollView.tsx"],"mappings":"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"}

package/lib/module/hooks/useForm.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);

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

@@ -1 +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","validateByRule","rules","optional","includes","hasValue","map"],"sourceRoot":"../../src","sources":["useForm.ts"],"mappings":"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"}
+{"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":["useForm.ts"],"mappings":"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"}

package/lib/module/models/Border.js

@@ -1,2 +1,2 @@
-
+export {};
 //# sourceMappingURL=Border.js.map

package/lib/module/models/Size.js

@@ -1,2 +1,2 @@
-
+export {};
 //# sourceMappingURL=Size.js.map

package/lib/module/models/Spacing.js

@@ -1,2 +1,2 @@
-
+export {};
 //# sourceMappingURL=Spacing.js.map

package/lib/typescript/lib/module/components/Block/Block.d.ts

@@ -1,4 +1,4 @@
 export function Block(_ref2: any): React.FunctionComponentElement<any> | React.CElement<import("react-native").ScrollViewProps, ScrollView>;
 import React from "react";
-import { ScrollView } from "react-native";
+import { ScrollView } from "react-native/Libraries/Components/ScrollView/ScrollView";
 //# sourceMappingURL=Block.d.ts.map

package/lib/typescript/lib/module/components/InputFocusScrollView/InputFocusScrollView.d.ts

@@ -1,4 +1,4 @@
 export function InputFocusScrollView(_ref: any): React.CElement<import("react-native").ScrollViewProps, ScrollView>;
-import { ScrollView } from "react-native";
+import { ScrollView } from "react-native/Libraries/Components/ScrollView/ScrollView";
 import React from "react";
 //# sourceMappingURL=InputFocusScrollView.d.ts.map

package/lib/typescript/lib/module/components/InputFocusScrollView/InputFocusScrollView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputFocusScrollView.d.ts","sourceRoot":"","sources":["../../../../../module/components/InputFocusScrollView/InputFocusScrollView.js"],"names":[],"mappings":"AAUO,oHAqEN"}
+{"version":3,"file":"InputFocusScrollView.d.ts","sourceRoot":"","sources":["../../../../../module/components/InputFocusScrollView/InputFocusScrollView.js"],"names":[],"mappings":"AAUO,oHA6DN"}

package/lib/typescript/lib/module/components/Text/Text.d.ts

@@ -1,4 +1,4 @@
 export function Text(_ref: any): React.CElement<import("react-native").TextProps, RNText>;
-import { Text as RNText } from "react-native";
+import { Text as RNText } from "react-native/Libraries/Text/Text";
 import React from "react";
 //# sourceMappingURL=Text.d.ts.map

package/lib/typescript/lib/module/hooks/useAnimation.d.ts

@@ -5,5 +5,5 @@ export function useAnimation(styles: any, configuration: any): {
     configuration: any;
     definitions: any;
 };
-import { Animated } from "react-native";
+import { Animated } from "react-native/Libraries/Animated/Animated";
 //# sourceMappingURL=useAnimation.d.ts.map

package/lib/typescript/lib/module/hooks/useForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../module/hooks/useForm.js"],"names":[],"mappings":"AACA;;;;;;;;GAQG;AACH;;;;;;;;;;;EA+FC;AAED,0EAA0E;AAC1E;;;;;;;;;EAiDC"}
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../module/hooks/useForm.js"],"names":[],"mappings":"AACA;;;;;;;;GAQG;AACH;;;;;;;;;;;EA+FC;AAED,0EAA0E;AAC1E;;;;;;;;;EAgEC"}

package/lib/typescript/lib/module/models/Border.d.ts

@@ -1 +1,2 @@
+export {};
 //# sourceMappingURL=Border.d.ts.map

package/lib/typescript/lib/module/models/Size.d.ts

@@ -1 +1,2 @@
+export {};
 //# sourceMappingURL=Size.d.ts.map

package/lib/typescript/lib/module/models/Spacing.d.ts

@@ -1 +1,2 @@
+export {};
 //# sourceMappingURL=Spacing.d.ts.map

package/lib/typescript/lib/module/models/index.d.ts

@@ -1,2 +1,5 @@
 export * from "./Alignment";
+export * from "./Border";
+export * from "./Size";
+export * from "./Spacing";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/InputFocusScrollView/InputFocusScrollView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputFocusScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/components/InputFocusScrollView/InputFocusScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAGL,oBAAoB,EAEpB,eAAe,EAEf,uBAAuB,EAExB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,OAAO;IACT,4LAA4L;IAC5L,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,EAAE,CACR,YAAY,EAAE,CAAC,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,KAAK,IAAI,KACrE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA6EpE,CAAC"}
+{"version":3,"file":"InputFocusScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/components/InputFocusScrollView/InputFocusScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAGL,oBAAoB,EAEpB,eAAe,EAEf,uBAAuB,EAKxB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,OAAO;IACT,4LAA4L;IAC5L,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,EAAE,CACR,YAAY,EAAE,CAAC,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,KAAK,IAAI,KACrE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqEpE,CAAC"}

package/lib/typescript/src/hooks/useForm.d.ts

@@ -1,16 +1,16 @@
-declare type Validation<T> = {
+export declare type Validation<T> = {
     [K in keyof Partial<T>]?: boolean;
 };
 declare type Rules<T> = {
-    [K in keyof T]?: (value: T[K], state: T) => boolean | undefined;
+    [K in keyof T]?: (value: T[K], state: T, optional: boolean) => boolean | undefined;
 };
-declare type Values<T> = {
+export declare type Values<T> = {
     [K in keyof T]: T[K];
 };
 export declare type FormConfig<R> = {
     /** List of optional properties. Optional properties will be marked as valid if left empty. */
     optional?: Array<keyof R>;
-    /** Validation rules by specified property name. If you define a validation rule function here, the field will be validated against it. If no rule is set, a crude value check will be used instead (Boolean(value)) */
+    /** Validation rules by specified property name. If you define a validation rule function here, the field will be validated against it. If no rule is set, a crude value check will be used instead (optional || Boolean(value)). Note: For complex value types (objects, arrays, dates etc) it is best to use a custom validation rule. */
     rules?: Rules<R>;
     /** Will compare key/value pairs instead of just top level JSON.stringify on complex objects/arrays */
     deepCompare?: boolean;
@@ -39,10 +39,10 @@ export declare function useForm<T>(values: Values<T>, config?: FormConfig<T>): {
 };
 /** Helper hook to validate form state outside of the scope of useForm. */
 export declare function useFormUtils<T>(config?: FormConfig<T>): {
-    doesValueExist: (value: T[keyof T] | undefined) => value is T[keyof T];
+    doesValueExist: (value: T[keyof T]) => value is Exclude<T[keyof T], null | undefined>;
     validateByRule: <K extends keyof T>(key: K, value: T[K], state: Values<T>) => boolean | undefined;
-    isOptional: (key: keyof T) => boolean | undefined;
-    fieldValidation: (key: keyof T, value: T[keyof T] | undefined, state: Values<T>) => boolean | undefined;
+    isOptional: (key: keyof T) => boolean;
+    fieldValidation: (key: keyof T, value: T[keyof T], state: Values<T>) => boolean | undefined;
     stateValidation: (state: Values<T>) => {
         valid: boolean;
         validation: Validation<T>;

package/lib/typescript/src/hooks/useForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAEA,aAAK,UAAU,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO;CAAE,CAAC;AAC3D,aAAK,KAAK,CAAC,CAAC,IAAI;KACb,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,OAAO,GAAG,SAAS;CAChE,CAAC;AAEF,aAAK,MAAM,CAAC,CAAC,IAAI;KACd,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrB,CAAC;AAEF,oBAAY,UAAU,CAAC,CAAC,IAAI;IAC1B,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAC1B,uNAAuN;IACvN,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACjB,sGAAsG;IACtG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;;;8EA2B/C,OAAO;;wBAmBD,OAAO;;;;;;EAgDjC;AAED,0EAA0E;AAC1E,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;4BACrB,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,SAAS;oEAU5C,OAAO,CAAC,CAAC;sBAUO,MAAM,CAAC;2BAKzB,MAAM,CAAC,SACL,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,SAAS,SACtB,OAAO,CAAC,CAAC;6BAWc,OAAO,CAAC,CAAC;;;;EAuB1C"}
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAEA,oBAAY,UAAU,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO;CAAE,CAAC;AAClE,aAAK,KAAK,CAAC,CAAC,IAAI;KACb,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CACf,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EACX,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,OAAO,KACd,OAAO,GAAG,SAAS;CACzB,CAAC;AAEF,oBAAY,MAAM,CAAC,CAAC,IAAI;KACrB,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrB,CAAC;AAEF,oBAAY,UAAU,CAAC,CAAC,IAAI;IAC1B,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAC1B,2UAA2U;IAC3U,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACjB,sGAAsG;IACtG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;;;8EA2B/C,OAAO;;wBAmBD,OAAO;;;;;;EAgDjC;AAED,0EAA0E;AAC1E,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;4BAE3C,CAAC,CAAC,MAAM,CAAC,CAAC;oEA6BV,OAAO,CAAC,CAAC;sBARO,MAAM,CAAC;2BAkBF,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,OAAO,CAAC,CAAC;6BAY1C,OAAO,CAAC,CAAC;;;;EAuB1C"}

package/lib/typescript/src/models/Border.d.ts

@@ -1,3 +1,4 @@
+import { AnimatableNumericValue } from "react-native/types";
 export interface Border {
     border?: {
         borderWidth?: number;
@@ -6,11 +7,11 @@ export interface Border {
         borderLeftWidth?: number;
         borderRightWidth?: number;
         borderColor?: string;
-        borderRadius?: number;
-        borderTopLeftRadius?: number;
-        borderTopRightRadius?: number;
-        borderBottomLeftRadius?: number;
-        borderBottomRightRadius?: number;
+        borderRadius?: AnimatableNumericValue;
+        borderTopLeftRadius?: AnimatableNumericValue;
+        borderTopRightRadius?: AnimatableNumericValue;
+        borderBottomLeftRadius?: AnimatableNumericValue;
+        borderBottomRightRadius?: AnimatableNumericValue;
     };
 }
 //# sourceMappingURL=Border.d.ts.map

package/lib/typescript/src/models/Border.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Border.d.ts","sourceRoot":"","sources":["../../../../src/models/Border.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACrB,MAAM,CAAC,EAAE;QACP,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;QAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;KAClC,CAAC;CACH"}
+{"version":3,"file":"Border.d.ts","sourceRoot":"","sources":["../../../../src/models/Border.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,MAAM,WAAW,MAAM;IACrB,MAAM,CAAC,EAAE;QACP,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,sBAAsB,CAAC;QACtC,mBAAmB,CAAC,EAAE,sBAAsB,CAAC;QAC7C,oBAAoB,CAAC,EAAE,sBAAsB,CAAC;QAC9C,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;QAChD,uBAAuB,CAAC,EAAE,sBAAsB,CAAC;KAClD,CAAC;CACH"}

package/lib/typescript/src/models/Size.d.ts

@@ -1,10 +1,11 @@
+import { DimensionValue } from "react-native/types";
 export interface Size {
-    width?: number | string;
-    height?: number | string;
-    minHeight?: number | string;
-    minWidth?: number | string;
-    maxHeight?: number | string;
-    maxWidth?: number | string;
+    width?: DimensionValue;
+    height?: DimensionValue;
+    minHeight?: DimensionValue;
+    minWidth?: DimensionValue;
+    maxHeight?: DimensionValue;
+    maxWidth?: DimensionValue;
     flex?: number;
 }
 //# sourceMappingURL=Size.d.ts.map

package/lib/typescript/src/models/Size.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Size.d.ts","sourceRoot":"","sources":["../../../../src/models/Size.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,IAAI;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"Size.d.ts","sourceRoot":"","sources":["../../../../src/models/Size.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,WAAW,IAAI;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

package/lib/typescript/src/models/Spacing.d.ts

@@ -1,21 +1,22 @@
+import { DimensionValue } from "react-native/types";
 export interface Spacing {
     margins?: {
-        marginTop?: number | string;
-        marginBottom?: number | string;
-        marginLeft?: number | string;
-        marginRight?: number | string;
-        marginHorizontal?: number | string;
-        marginVertical?: number | string;
-        margin?: number | string;
+        marginTop?: DimensionValue;
+        marginBottom?: DimensionValue;
+        marginLeft?: DimensionValue;
+        marginRight?: DimensionValue;
+        marginHorizontal?: DimensionValue;
+        marginVertical?: DimensionValue;
+        margin?: DimensionValue;
     };
     paddings?: {
-        paddingTop?: number | string;
-        paddingBottom?: number | string;
-        paddingLeft?: number | string;
-        paddingRight?: number | string;
-        paddingHorizontal?: number | string;
-        paddingVertical?: number | string;
-        padding?: number | string;
+        paddingTop?: DimensionValue;
+        paddingBottom?: DimensionValue;
+        paddingLeft?: DimensionValue;
+        paddingRight?: DimensionValue;
+        paddingHorizontal?: DimensionValue;
+        paddingVertical?: DimensionValue;
+        padding?: DimensionValue;
     };
 }
 //# sourceMappingURL=Spacing.d.ts.map

package/lib/typescript/src/models/Spacing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../../src/models/Spacing.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC/B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC7B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC9B,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACnC,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACjC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAC1B,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC7B,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAChC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC/B,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACpC,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAClC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAC3B,CAAC;CACH"}
+{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../../src/models/Spacing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,WAAW,OAAO;IACtB,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,cAAc,CAAC;QAC3B,YAAY,CAAC,EAAE,cAAc,CAAC;QAC9B,UAAU,CAAC,EAAE,cAAc,CAAC;QAC5B,WAAW,CAAC,EAAE,cAAc,CAAC;QAC7B,gBAAgB,CAAC,EAAE,cAAc,CAAC;QAClC,cAAc,CAAC,EAAE,cAAc,CAAC;QAChC,MAAM,CAAC,EAAE,cAAc,CAAC;KACzB,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,UAAU,CAAC,EAAE,cAAc,CAAC;QAC5B,aAAa,CAAC,EAAE,cAAc,CAAC;QAC/B,WAAW,CAAC,EAAE,cAAc,CAAC;QAC7B,YAAY,CAAC,EAAE,cAAc,CAAC;QAC9B,iBAAiB,CAAC,EAAE,cAAc,CAAC;QACnC,eAAe,CAAC,EAAE,cAAc,CAAC;QACjC,OAAO,CAAC,EAAE,cAAc,CAAC;KAC1B,CAAC;CACH"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@prototyp/skeletor",
   "description": "React-Native UI and functional toolkit",
   "author": "Luka Buljan <luka@prototyp.digital>",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "types": "lib/typescript/src/index.d.ts",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -16,18 +16,21 @@
     "prepack": "bob build"
   },
   "devDependencies": {
-    "@tsconfig/react-native": "2.0.3",
+    "@tsconfig/react-native": "^3.0.0",
     "@types/jest": "29.4.0",
-    "@types/react-native": "0.70.6",
+    "@types/react": "^18.0.24",
+    "@react-native-community/eslint-config": "3.2.0",
+    "@react-native/eslint-config": "^0.72.2",
+    "@react-native/metro-config": "^0.72.9",
     "jest": "29.4.2",
-    "react": "18.1.0",
-    "react-native": "0.70.5",
+    "react": "^18.2.0",
+    "react-native": "^0.72.0",
     "react-native-builder-bob": "0.20.3",
-    "typescript": "4.8.3"
+    "typescript": "4.8.4"
   },
   "peerDependencies": {
     "react": ">=16",
-    "react-native": ">=0.70.5"
+    "react-native": ">=0.72.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/InputFocusScrollView/InputFocusScrollView.tsx

@@ -8,6 +8,9 @@ import {
   StyleSheet,
   TextInputFocusEventData,
   Dimensions,
+  UIManager,
+  findNodeHandle,
+  TextInput,
 } from "react-native";
 import { Spacing } from "../../models";
 
@@ -41,15 +44,14 @@ export const InputFocusScrollView: React.FC<InputFocusScrollViewProps> = ({
 }) => {
   const screenHeight = useRef(Dimensions.get("screen").height).current;
   const ref = useRef<ScrollView>(null);
-  const [scrollTarget, setScrollTarget] = useState<number | null>();
   /** Cached scroll position to keep focus on input if layout shifts. */
-  const [scrollPosition, setScrollPosition] = useState<number | null>();
+  const [scrollPosition, setScrollPosition] = useState<number | null>(null);
+  const [scrollTarget, setScrollTarget] = useState<number | null>(null);
 
   function onInputFocus(e: NativeSyntheticEvent<TextInputFocusEventData>) {
-    if (Platform.OS !== "ios" || !scrollTarget) {
-      return;
-    }
-    e.currentTarget.measureLayout(
+    if (Platform.OS !== "ios" || !scrollTarget) return;
+
+    (e.currentTarget as unknown as TextInput).measureLayout(
       scrollTarget,
       (nope, top, nuuh, elementHeight) => {
         let scrollY = top - elementHeight;
@@ -66,20 +68,13 @@ export const InputFocusScrollView: React.FC<InputFocusScrollViewProps> = ({
     );
   }
 
-  function onScrollViewLayout(e: LayoutChangeEvent) {
-    if (Platform.OS !== "ios") {
-      return;
-    }
-    setScrollTarget(e.nativeEvent.target);
-  }
-
   /** Handle layout shifts by programmatically scrolling to the same input position without animation. */
   function onContentSizeChange() {
     if (Platform.OS !== "ios" || !scrollPosition) {
       return;
     }
     ref.current?.scrollTo({ y: scrollPosition, animated: false });
-    setScrollPosition(undefined);
+    setScrollPosition(null);
   }
 
   const containerStyles = StyleSheet.flatten([styles[height], margins, style]);
@@ -95,7 +90,7 @@ export const InputFocusScrollView: React.FC<InputFocusScrollViewProps> = ({
       ref={ref}
       scrollToOverflowEnabled
       scrollEventThrottle={16}
-      onLayout={onScrollViewLayout}
+      onLayout={(e) => setScrollTarget(e.currentTarget)}
       onContentSizeChange={onContentSizeChange}
       showsVerticalScrollIndicator={false}
       showsHorizontalScrollIndicator={false}

package/src/hooks/useForm.ts

@@ -1,18 +1,22 @@
 import { useEffect, useState } from "react";
 
-type Validation<T> = { [K in keyof Partial<T>]?: boolean };
+export type Validation<T> = { [K in keyof Partial<T>]?: boolean };
 type Rules<T> = {
-  [K in keyof T]?: (value: T[K], state: T) => boolean | undefined;
+  [K in keyof T]?: (
+    value: T[K],
+    state: T,
+    optional: boolean
+  ) => boolean | undefined;
 };
 
-type Values<T> = {
+export type Values<T> = {
   [K in keyof T]: T[K];
 };
 
 export type FormConfig<R> = {
   /** List of optional properties. Optional properties will be marked as valid if left empty. */
   optional?: Array<keyof R>;
-  /** Validation rules by specified property name. If you define a validation rule function here, the field will be validated against it. If no rule is set, a crude value check will be used instead (Boolean(value)) */
+  /** Validation rules by specified property name. If you define a validation rule function here, the field will be validated against it. If no rule is set, a crude value check will be used instead (optional || Boolean(value)). Note: For complex value types (objects, arrays, dates etc) it is best to use a custom validation rule. */
   rules?: Rules<R>;
   /** Will compare key/value pairs instead of just top level JSON.stringify on complex objects/arrays */
   deepCompare?: boolean;
@@ -55,7 +59,7 @@ export function useForm<T>(values: Values<T>, config?: FormConfig<T>) {
   function update<K extends keyof T>(
     key: K,
     value: Values<T>[K],
-    shouldValidate?: boolean,
+    shouldValidate?: boolean
   ) {
     setState((s) => ({ ...s, [key]: value }));
     setValidation((s) => ({
@@ -84,7 +88,7 @@ export function useForm<T>(values: Values<T>, config?: FormConfig<T>) {
    * Only use when validating fields separately, has no value when valiating on form submit. */
   function isFormValid() {
     return !keys.some((key) =>
-      isOptional(key) ? validation[key] === false : !validation[key],
+      isOptional(key) ? validation[key] === false : !validation[key]
     );
   }
 
@@ -126,42 +130,56 @@ export function useForm<T>(values: Values<T>, config?: FormConfig<T>) {
 
 /** Helper hook to validate form state outside of the scope of useForm. */
 export function useFormUtils<T>(config?: FormConfig<T>) {
-  function doesValueExist(value: T[keyof T] | undefined): value is T[keyof T] {
-    if (value === null || value === undefined || value === "" || value < 0) {
+  function doesValueExist(
+    value: T[keyof T]
+  ): value is Exclude<T[keyof T], null | undefined> {
+    if (value === undefined || value === null) {
       return false;
     }
-    return true;
-  }
 
-  function validateByRule<K extends keyof T>(
-    key: K,
-    value: T[K],
-    state: Values<T>,
-  ) {
-    // If rule exists, validate with rule
-    if (config?.rules && config.rules[key]) {
-      return config.rules[key]?.(value, state);
+    if (typeof value === "string") {
+      return value !== "";
     }
-    // else return true because we know the value exists already.
+
+    if (typeof value === "number") {
+      return value >= 0 || value < 0 || !isNaN(value);
+    }
+
+    if (value instanceof Date) {
+      return !isNaN(value.valueOf());
+    }
+
     return true;
   }
 
   function isOptional(key: keyof T) {
-    return config?.optional?.includes(key);
+    return config?.optional?.includes(key) || false;
   }
 
-  function fieldValidation(
-    key: keyof T,
-    value: T[keyof T] | undefined,
-    state: Values<T>,
+  /** Validate by custom validation rule. If the rule does not exist, returns undefined. */
+  function validateByRule<K extends keyof T>(
+    key: K,
+    value: T[K],
+    state: Values<T>
   ) {
+    return config?.rules?.[key]?.(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: keyof T, value: T[keyof T], state: Values<T>) {
     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?.rules?.[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: Values<T>) {

package/src/models/Border.ts

@@ -1,3 +1,5 @@
+import { AnimatableNumericValue } from "react-native/types";
+
 export interface Border {
   border?: {
     borderWidth?: number;
@@ -6,10 +8,10 @@ export interface Border {
     borderLeftWidth?: number;
     borderRightWidth?: number;
     borderColor?: string;
-    borderRadius?: number;
-    borderTopLeftRadius?: number;
-    borderTopRightRadius?: number;
-    borderBottomLeftRadius?: number;
-    borderBottomRightRadius?: number;
+    borderRadius?: AnimatableNumericValue;
+    borderTopLeftRadius?: AnimatableNumericValue;
+    borderTopRightRadius?: AnimatableNumericValue;
+    borderBottomLeftRadius?: AnimatableNumericValue;
+    borderBottomRightRadius?: AnimatableNumericValue;
   };
 }

package/src/models/Size.ts

@@ -1,9 +1,11 @@
+import { DimensionValue } from "react-native/types";
+
 export interface Size {
-  width?: number | string;
-  height?: number | string;
-  minHeight?: number | string;
-  minWidth?: number | string;
-  maxHeight?: number | string;
-  maxWidth?: number | string;
+  width?: DimensionValue;
+  height?: DimensionValue;
+  minHeight?: DimensionValue;
+  minWidth?: DimensionValue;
+  maxHeight?: DimensionValue;
+  maxWidth?: DimensionValue;
   flex?: number;
 }

package/src/models/Spacing.ts

@@ -1,20 +1,22 @@
+import { DimensionValue } from "react-native/types";
+
 export interface Spacing {
   margins?: {
-    marginTop?: number | string;
-    marginBottom?: number | string;
-    marginLeft?: number | string;
-    marginRight?: number | string;
-    marginHorizontal?: number | string;
-    marginVertical?: number | string;
-    margin?: number | string;
+    marginTop?: DimensionValue;
+    marginBottom?: DimensionValue;
+    marginLeft?: DimensionValue;
+    marginRight?: DimensionValue;
+    marginHorizontal?: DimensionValue;
+    marginVertical?: DimensionValue;
+    margin?: DimensionValue;
   };
   paddings?: {
-    paddingTop?: number | string;
-    paddingBottom?: number | string;
-    paddingLeft?: number | string;
-    paddingRight?: number | string;
-    paddingHorizontal?: number | string;
-    paddingVertical?: number | string;
-    padding?: number | string;
+    paddingTop?: DimensionValue;
+    paddingBottom?: DimensionValue;
+    paddingLeft?: DimensionValue;
+    paddingRight?: DimensionValue;
+    paddingHorizontal?: DimensionValue;
+    paddingVertical?: DimensionValue;
+    padding?: DimensionValue;
   };
 }