@prototyp/skeletor 1.0.2

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC"}

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

@@ -0,0 +1,16 @@
+interface DefaultProps {
+    /** Whether the custom handler is enabled or disabled. */
+    enabled: boolean;
+}
+interface WithCallback extends DefaultProps {
+    /** Callback function to execute on back button press. Will disable default behavior. */
+    handlePress: () => void;
+}
+interface WithDisable extends DefaultProps {
+    /** Whether or not the default android back button behavior will be blocked */
+    disableDefault: boolean;
+}
+export declare type AndroidBackHandlerConfig = WithCallback | WithDisable;
+export declare function useAndroidBackHandler(props: AndroidBackHandlerConfig): void;
+export {};
+//# sourceMappingURL=useAndroidBackHandler.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAndroidBackHandler.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useAndroidBackHandler.ts"],"names":[],"mappings":"AAGA,UAAU,YAAY;IACpB,yDAAyD;IACzD,OAAO,EAAE,OAAO,CAAC;CAClB;AACD,UAAU,YAAa,SAAQ,YAAY;IACzC,wFAAwF;IACxF,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,UAAU,WAAY,SAAQ,YAAY;IACxC,8EAA8E;IAC9E,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,oBAAY,wBAAwB,GAAG,YAAY,GAAG,WAAW,CAAC;AAQlE,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,wBAAwB,QAmBpE"}

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

@@ -0,0 +1,20 @@
+import { Animated, ViewStyle } from "react-native";
+/** Any is a hotfix, requires more investigation */
+declare type Animation<Keys extends keyof Partial<ViewStyle>> = Record<Keys, Animated.AnimatedInterpolation<string | number> | any>;
+declare type Definition<Keys extends keyof Partial<ViewStyle>> = Record<Keys, number[] | string[]>;
+interface Configuration {
+    /** In miliseconds */
+    duration: number;
+    /** Loop will disable native driver because it breaks the loop animation (at least it did last time I tested in 2020.) */
+    loop?: boolean;
+    useNativeDriver?: boolean;
+}
+export interface AnimationSet<Keys extends keyof Partial<ViewStyle>> {
+    values: Animated.Value[];
+    definitions: Definition<Keys>;
+    animations: Animation<Keys>;
+    configuration: Configuration;
+}
+export declare function useAnimation<Keys extends keyof Partial<ViewStyle>>(styles: Definition<Keys>, configuration?: Configuration): AnimationSet<Keys>;
+export {};
+//# sourceMappingURL=useAnimation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimation.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useAnimation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEnD,mDAAmD;AACnD,aAAK,SAAS,CAAC,IAAI,SAAS,MAAM,OAAO,CAAC,SAAS,CAAC,IAAI,MAAM,CAC5D,IAAI,EACJ,QAAQ,CAAC,qBAAqB,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,GAAG,CACtD,CAAC;AACF,aAAK,UAAU,CAAC,IAAI,SAAS,MAAM,OAAO,CAAC,SAAS,CAAC,IAAI,MAAM,CAC7D,IAAI,EACJ,MAAM,EAAE,GAAG,MAAM,EAAE,CACpB,CAAC;AAEF,UAAU,aAAa;IACrB,qBAAqB;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,yHAAyH;IACzH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY,CAAC,IAAI,SAAS,MAAM,OAAO,CAAC,SAAS,CAAC;IACjE,MAAM,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC;IACzB,WAAW,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC9B,UAAU,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IAC5B,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,IAAI,SAAS,MAAM,OAAO,CAAC,SAAS,CAAC,EAChE,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,EACxB,aAAa,CAAC,EAAE,aAAa,GAC5B,YAAY,CAAC,IAAI,CAAC,CA8BpB"}

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

@@ -0,0 +1,30 @@
+import { AnimationSet } from "./useAnimation";
+interface BaseTimelineType {
+    elements: AnimationSet<any>[];
+    start: boolean;
+    onFinished?: () => void;
+    onStarted?: () => void;
+}
+declare type DelayTimeline = BaseTimelineType & {
+    delay: number;
+};
+declare type StaggerTimeline = BaseTimelineType & {
+    stagger: number;
+};
+interface TimelineConfiguration {
+    delay?: DelayTimeline;
+    parallel?: BaseTimelineType;
+    sequence?: BaseTimelineType;
+    stagger?: StaggerTimeline;
+}
+/** Used to layout animated values on a timeline and handle starting/reversing the animations.
+ * Supports all Animated types (delay, stagger, parallel, sequence).
+ * @example
+ * useAnimationTimeline({
+    stagger: { elements: [ring1, ring2, ring3], stagger: 900, start: show },
+    sequence: { elements: [button], start: Boolean(show && !disabled) },
+  });
+*/
+export declare function useAnimationTimeline(config: TimelineConfiguration): void;
+export {};
+//# sourceMappingURL=useAnimationTimeline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimationTimeline.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useAnimationTimeline.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,UAAU,gBAAgB;IACxB,QAAQ,EAAE,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IAC9B,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,aAAK,aAAa,GAAG,gBAAgB,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AACF,aAAK,eAAe,GAAG,gBAAgB,GAAG;IACxC,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED;;;;;;;EAOE;AACF,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,qBAAqB,GAAG,IAAI,CAyGxE"}

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

@@ -0,0 +1,7 @@
+interface Config {
+    onForeground?: () => void;
+    onBackground?: () => void;
+}
+export declare function useAppState({ onForeground, onBackground }: Config): void;
+export {};
+//# sourceMappingURL=useAppState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAppState.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useAppState.ts"],"names":[],"mappings":"AAGA,UAAU,MAAM;IACd,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,MAAM,QAiBjE"}

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

@@ -0,0 +1,52 @@
+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;
+};
+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)) */
+    rules?: Rules<R>;
+    /** Will compare key/value pairs instead of just top level JSON.stringify on complex objects/arrays */
+    deepCompare?: boolean;
+    logging?: boolean;
+};
+/** One-fits-all solution to manage state changes, field validation and optional entries within a form.
+ * @example <caption>Simple use case:</caption>
+ *  const { state, validation, update } = useForm({ email: '', password: '', });
+ *
+ *
+ * @example <caption>For more complex form states (ie one field can be of multiple types), you should pass the form's type:</caption>
+ * const { state, validation, update } = useForm<{ numericOrUndefined: number | undefined }>({ numericOrUndefined: undefined }, { rules: { numericOrUndefined: (value: number | undefined): boolean | undefined => ... }});
+ *
+ */
+export declare function useForm<T>(values: Values<T>, config?: FormConfig<T>): {
+    state: Values<T>;
+    validation: Validation<T>;
+    update: <K extends keyof T>(key: K, value: Values<T>[K], shouldValidate?: boolean) => void;
+    validate: <K_1 extends keyof T>(key: K_1) => void;
+    validateForm: () => boolean;
+    isFormValid: () => boolean;
+    clearForm: () => void;
+    resetState: () => void;
+    resetValidation: () => void;
+    resetInitialValues: () => void;
+};
+/** 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];
+    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;
+    stateValidation: (state: Values<T>) => {
+        valid: boolean;
+        validation: Validation<T>;
+    };
+};
+export {};
+//# sourceMappingURL=useForm.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,3 @@
+import { SkeletorConfig } from "../models";
+export declare function useSkeletor(): SkeletorConfig;
+//# sourceMappingURL=useSkeletor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSkeletor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useSkeletor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAG3C,wBAAgB,WAAW,IAAI,cAAc,CAE5C"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./components";
+export * from "./hooks";
+export * from "./models";
+export * from "./utils";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,9 @@
+import { ViewStyle } from "react-native";
+export interface Alignment {
+    align?: ViewStyle["alignItems"];
+    alignSelf?: ViewStyle["alignSelf"];
+    justify?: ViewStyle["justifyContent"];
+    flexDirection?: ViewStyle["flexDirection"];
+    flexWrap?: ViewStyle["flexWrap"];
+}
+//# sourceMappingURL=Alignment.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alignment.d.ts","sourceRoot":"","sources":["../../../../src/models/Alignment.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACtC,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;CAClC"}

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

@@ -0,0 +1,16 @@
+export interface Border {
+    border?: {
+        borderWidth?: number;
+        borderTopWidth?: number;
+        borderBottomWidth?: number;
+        borderLeftWidth?: number;
+        borderRightWidth?: number;
+        borderColor?: string;
+        borderRadius?: number;
+        borderTopLeftRadius?: number;
+        borderTopRightRadius?: number;
+        borderBottomLeftRadius?: number;
+        borderBottomRightRadius?: number;
+    };
+}
+//# sourceMappingURL=Border.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,10 @@
+export interface Size {
+    width?: number | string;
+    height?: number | string;
+    minHeight?: number | string;
+    minWidth?: number | string;
+    maxHeight?: number | string;
+    maxWidth?: number | string;
+    flex?: number;
+}
+//# sourceMappingURL=Size.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,7 @@
+export interface SkeletorConfig {
+    defaultFont: Font | undefined;
+    defaultFontSize: [number, number] | number;
+    defaultStatusBarType: "dark-content" | "light-content" | "default";
+    defaultTextColor: string;
+}
+//# sourceMappingURL=SkeletorConfig.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletorConfig.d.ts","sourceRoot":"","sources":["../../../../src/models/SkeletorConfig.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,IAAI,GAAG,SAAS,CAAC;IAC9B,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC;IAC3C,oBAAoB,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS,CAAC;IACnE,gBAAgB,EAAE,MAAM,CAAC;CAC1B"}

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

@@ -0,0 +1,21 @@
+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;
+    };
+    paddings?: {
+        paddingTop?: number | string;
+        paddingBottom?: number | string;
+        paddingLeft?: number | string;
+        paddingRight?: number | string;
+        paddingHorizontal?: number | string;
+        paddingVertical?: number | string;
+        padding?: number | string;
+    };
+}
+//# sourceMappingURL=Spacing.d.ts.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/models/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC"}

package/lib/typescript/src/utils/extractAlignmentProperties.d.ts

@@ -0,0 +1,3 @@
+import { Alignment } from "../models";
+export declare function extractAlignmentProperties<Props extends Alignment>(props: Props): Alignment;
+//# sourceMappingURL=extractAlignmentProperties.d.ts.map

package/lib/typescript/src/utils/extractAlignmentProperties.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractAlignmentProperties.d.ts","sourceRoot":"","sources":["../../../../src/utils/extractAlignmentProperties.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,wBAAgB,0BAA0B,CAAC,KAAK,SAAS,SAAS,EAChE,KAAK,EAAE,KAAK,GACX,SAAS,CAQX"}

package/lib/typescript/src/utils/extractSizeProperties.d.ts

@@ -0,0 +1,3 @@
+import { Size } from "../models";
+export declare function extractSizeProperties<Props extends Size>(props: Props): Size;
+//# sourceMappingURL=extractSizeProperties.d.ts.map

package/lib/typescript/src/utils/extractSizeProperties.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractSizeProperties.d.ts","sourceRoot":"","sources":["../../../../src/utils/extractSizeProperties.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI,CAU5E"}

package/lib/typescript/src/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./extractAlignmentProperties";
+export * from "./extractSizeProperties";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC"}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@prototyp/skeletor",
+  "description": "React-Native UI and functional toolkit",
+  "author": "Luka Buljan <luka@prototyp.digital>",
+  "version": "1.0.2",
+  "types": "lib/typescript/src/index.d.ts",
+  "main": "lib/module/index.js",
+  "react-native": "src/index.ts",
+  "module": "lib/module/index.js",
+  "repository": {
+    "type": "git",
+    "directory": "git+https://github.com/prototypdigital/skeletor.git"
+  },
+  "scripts": {
+    "prepack": "bob build"
+  },
+  "devDependencies": {
+    "@tsconfig/react-native": "2.0.3",
+    "@types/jest": "29.4.0",
+    "@types/react-native": "0.70.6",
+    "jest": "29.4.2",
+    "react": "18.1.0",
+    "react-native": "0.70.5",
+    "react-native-builder-bob": "0.20.3",
+    "typescript": "4.8.3"
+  },
+  "peerDependencies": {
+    "react": ">=16",
+    "react-native": ">=0.70.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react-native",
+    "ui",
+    "kit",
+    "validation",
+    "animation",
+    "helpers",
+    "utilities",
+    "utils"
+  ],
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "module",
+      "typescript"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ]
+}

package/src/components/Block/Block.tsx

@@ -0,0 +1,106 @@
+import React, { PropsWithChildren, useMemo } from "react";
+import {
+  ScrollView,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewProps,
+  ViewStyle,
+} from "react-native";
+import { Alignment, Border, Size, Spacing } from "../../models";
+import { extractAlignmentProperties, extractSizeProperties } from "../../utils";
+
+interface SharedProps extends ViewProps {
+  background?: string;
+  overflow?: ViewStyle["overflow"];
+}
+
+interface BlockScrollViewProps extends SharedProps {
+  scrollable: true;
+  horizontal?: boolean;
+  showsVerticalScrollIndicator?: boolean;
+  showsHorizontalScrollIndicator?: boolean;
+  bounces?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface BlockViewProps extends SharedProps {
+  scrollable?: false | undefined;
+}
+
+type BlockElementProps = SharedProps & Alignment & Spacing & Size & Border;
+
+const BlockElement: React.FC<PropsWithChildren<BlockElementProps>> = ({
+  children,
+  ...props
+}) => {
+  const { border, paddings, margins, background, style, overflow, ...view } =
+    props;
+
+  const size = extractSizeProperties(props);
+  const {
+    align: alignItems,
+    justify: justifyContent,
+    ...alignment
+  } = extractAlignmentProperties(props);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.flatten([
+        {
+          ...margins,
+          ...paddings,
+          ...alignment,
+          ...size,
+          ...border,
+          alignItems,
+          justifyContent,
+          backgroundColor: background,
+          overflow,
+        },
+        style,
+      ]),
+    [alignment, size, background, style, overflow, margins, paddings]
+  );
+
+  return (
+    <View {...view} style={styles}>
+      {children}
+    </View>
+  );
+};
+
+type BaseProps = Alignment & Spacing & Size & Border;
+export type BlockProps = (BlockViewProps | BlockScrollViewProps) & BaseProps;
+
+export const Block: React.FC<PropsWithChildren<BlockProps>> = ({
+  children,
+  ...props
+}) => {
+  const { scrollable, ...rest } = props;
+  const element = () => <BlockElement {...rest}>{children}</BlockElement>;
+
+  if (!scrollable) {
+    return element();
+  }
+
+  const {
+    horizontal,
+    showsHorizontalScrollIndicator,
+    showsVerticalScrollIndicator,
+    bounces,
+  } = props;
+
+  return (
+    <ScrollView
+      horizontal={horizontal}
+      keyboardShouldPersistTaps="handled"
+      showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      contentContainerStyle={{ flexGrow: 1, backgroundColor: rest.background }}
+      bounces={bounces}
+    >
+      {element()}
+    </ScrollView>
+  );
+};

package/src/components/Block/index.ts

@@ -0,0 +1 @@
+export * from "./Block";

package/src/components/InputFocusScrollView/InputFocusScrollView.tsx

@@ -0,0 +1,120 @@
+import React, { PropsWithChildren, useRef, useState } from "react";
+import {
+  Platform,
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  ScrollViewProps,
+  StyleSheet,
+  TextInputFocusEventData,
+  Dimensions,
+} from "react-native";
+import { Spacing } from "../../models";
+
+export interface InputFocusScrollViewProps
+  extends Omit<ScrollViewProps, "children">,
+    Spacing {
+  /** Percentage of screen to add to element position. Values between 0 and 1. Use this if you want to position the input focus somewhere other than the top of the screen. Defaults to 0.3 */
+  focusPositionOffset?: number;
+  height?: "full" | "auto";
+  children: (
+    onInputFocus: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void
+  ) => React.ReactNode;
+}
+
+/**
+ * This scroll view will automatically scroll to an active input field rendered within it, provided you attach the onInputFocus callback to the input onFocus prop.
+ *
+ * The return value is a lambda component, returning a callback which you attach to input fields rendered within it.
+ * @example <InputFocusScrollView>{(onInputFocus) => <TextInput onFocus={onInputFocus} ... />}</InputFocusScrollView>
+ * NOTE: This works on iOS only, Android does this by default with @param android:windowSoftInputMode
+ */
+export const InputFocusScrollView: React.FC<
+  PropsWithChildren<InputFocusScrollViewProps>
+> = ({
+  children,
+  style,
+  contentContainerStyle,
+  height = "full",
+  focusPositionOffset = 0.3,
+  margins,
+  paddings,
+  ...rest
+}) => {
+  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>();
+
+  function onInputFocus(e: NativeSyntheticEvent<TextInputFocusEventData>) {
+    if (Platform.OS !== "ios" || !scrollTarget) {
+      return;
+    }
+    e.currentTarget.measureLayout(
+      scrollTarget,
+      (nope, top, nuuh, elementHeight) => {
+        let scrollY = top - elementHeight;
+        if (focusPositionOffset !== undefined) {
+          scrollY = scrollY - screenHeight * focusPositionOffset;
+        }
+
+        // Cache scroll position for layout shift cases
+        setScrollPosition(scrollY);
+        // Scroll to input position
+        ref.current?.scrollTo({ y: scrollY });
+      },
+      () => console.error("failed to measure layout")
+    );
+  }
+
+  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);
+  }
+
+  const containerStyles = StyleSheet.flatten([styles[height], margins, style]);
+
+  const contentStyles = StyleSheet.flatten([
+    styles.content,
+    { ...paddings },
+    contentContainerStyle,
+  ]);
+
+  return (
+    <ScrollView
+      ref={ref}
+      scrollToOverflowEnabled
+      scrollEventThrottle={16}
+      onLayout={onScrollViewLayout}
+      onContentSizeChange={onContentSizeChange}
+      showsVerticalScrollIndicator={false}
+      showsHorizontalScrollIndicator={false}
+      style={containerStyles}
+      contentContainerStyle={contentStyles}
+      {...rest}
+    >
+      {children(onInputFocus)}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  full: { height: "100%" },
+  auto: { height: "auto" },
+  content: {
+    flexGrow: 1,
+    paddingBottom: 30,
+  },
+});

package/src/components/InputFocusScrollView/index.ts

@@ -0,0 +1 @@
+export * from "./InputFocusScrollView";