@prototyp/skeletor 1.0.2

package/src/components/Screen/Screen.tsx

@@ -0,0 +1,91 @@
+import React, { PropsWithChildren } from "react";
+import {
+  SafeAreaView,
+  View,
+  ViewProps,
+  StyleSheet,
+  StatusBar,
+  Platform,
+  Dimensions,
+} from "react-native";
+import { useSkeletor } from "../../hooks";
+import { Block } from "../Block";
+
+type OwnProps = {
+  /** Pass a specific background view OR just a background color value. Custom components should be 100% height and width. */
+  background?: JSX.Element | string;
+  hideTopSafeArea?: boolean;
+  hideBottomSafeArea?: boolean;
+  bottomSafeAreaColor?: string;
+  topSafeAreaColor?: string;
+  statusBarType?: "default" | "light-content" | "dark-content";
+  isLandscape?: boolean;
+};
+
+export type ScreenProps = OwnProps & ViewProps;
+
+export const Screen: React.FC<PropsWithChildren<ScreenProps>> = ({
+  background,
+  children,
+  hideBottomSafeArea,
+  hideTopSafeArea,
+  bottomSafeAreaColor,
+  topSafeAreaColor,
+  style,
+  statusBarType,
+  isLandscape,
+  ...rest
+}) => {
+  const { defaultStatusBarType } = useSkeletor();
+
+  return (
+    <>
+      {background &&
+        (typeof background === "string" ? (
+          <View style={[styles.container, { backgroundColor: background }]} />
+        ) : (
+          <View style={styles.container}>{background}</View>
+        ))}
+
+      {!hideTopSafeArea && (
+        <SafeAreaView style={{ backgroundColor: topSafeAreaColor }} />
+      )}
+
+      <StatusBar
+        translucent
+        backgroundColor="transparent"
+        barStyle={statusBarType || defaultStatusBarType}
+      />
+
+      <Block
+        paddings={{
+          paddingTop:
+            Platform.OS === "android" && !isLandscape
+              ? StatusBar.currentHeight || 24
+              : 0,
+        }}
+        flex={1}
+        style={style}
+        {...rest}
+      >
+        {children}
+      </Block>
+
+      {!hideBottomSafeArea && (
+        <SafeAreaView
+          style={{
+            backgroundColor: bottomSafeAreaColor,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    height: Dimensions.get("screen").height,
+    width: Dimensions.get("screen").width,
+  },
+});

package/src/components/Screen/index.ts

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

package/src/components/SkeletorProvider/SkeletorContext.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { SkeletorConfig } from "../../models";
+
+export const SkeletorDefaults: SkeletorConfig = {
+  defaultFont: undefined,
+  defaultFontSize: [12, 16],
+  defaultStatusBarType: "dark-content",
+  defaultTextColor: "black",
+};
+
+export const SkeletorContext =
+  React.createContext<SkeletorConfig>(SkeletorDefaults);

package/src/components/SkeletorProvider/SkeletorProvider.tsx

@@ -0,0 +1,18 @@
+import React, { PropsWithChildren } from "react";
+import { SkeletorConfig } from "../../models";
+import { SkeletorContext, SkeletorDefaults } from "./SkeletorContext";
+
+type Props = Partial<SkeletorConfig>;
+
+/** Create a Font.d.ts type in your typescript types directory and define fonts as follows:
+ * @example type Font = "Helvetica" | "Montserrat" ...  */
+export const SkeletorProvider: React.FC<PropsWithChildren<Props>> = ({
+  children,
+  ...config
+}) => {
+  return (
+    <SkeletorContext.Provider value={{ ...SkeletorDefaults, ...config }}>
+      {children}
+    </SkeletorContext.Provider>
+  );
+};

package/src/components/SkeletorProvider/index.ts

@@ -0,0 +1,2 @@
+export * from "./SkeletorProvider";
+export * from "./SkeletorContext";

package/src/components/Text/Text.tsx

@@ -0,0 +1,99 @@
+import React, { PropsWithChildren, useMemo } from "react";
+import {
+  StyleSheet,
+  Text as RNText,
+  TextProps as RNTextProps,
+  TextStyle,
+} from "react-native";
+import { Size, Spacing } from "../../models";
+import { extractSizeProperties } from "../../utils";
+import { useSkeletor } from "../../hooks";
+
+interface OwnProps extends RNTextProps {
+  /** Create a Font.d.ts type in your typescript types directory and define fonts as follows:
+   * @example type Font = "Helvetica" | "Montserrat" ...  */
+  font?: Font;
+  /** Either define [fontSize, lineHeight] or just one size applied to both fontSize and lineHeight */
+  size?: [number, number] | number;
+  textTransform?: TextStyle["textTransform"];
+  letterSpacing?: TextStyle["letterSpacing"];
+  color?: string;
+  textAlign?: TextStyle["textAlign"];
+  opacity?: TextStyle["opacity"];
+}
+
+export type TextProps = OwnProps & Spacing & Size;
+
+/** Create a Font.d.ts type in your typescript types directory and define fonts as follows:
+ * @example type Font = "Helvetica" | "Montserrat" ...  */
+export const Text: React.FC<PropsWithChildren<TextProps>> = ({
+  font,
+  size,
+  textTransform,
+  letterSpacing,
+  color,
+  style,
+  children,
+  textAlign,
+  opacity,
+  margins,
+  paddings,
+  ...props
+}) => {
+  const { defaultFont, defaultFontSize, defaultTextColor } = useSkeletor();
+  const sizeProps = extractSizeProperties(props);
+
+  const textSize = useMemo(() => {
+    function mapper(value: [number, number] | number) {
+      if (Array.isArray(value)) {
+        const [fontSize, lineHeight] = value;
+        return { fontSize, lineHeight };
+      } else {
+        return { fontSize: value, lineHeight: value };
+      }
+    }
+
+    return mapper(size || defaultFontSize);
+  }, [size, defaultFontSize]);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.flatten([
+        {
+          color: color || defaultTextColor,
+          ...textSize,
+          fontFamily: font || defaultFont,
+          opacity,
+          textAlign,
+          textTransform,
+          letterSpacing,
+          ...margins,
+          ...paddings,
+          ...sizeProps,
+        },
+        style,
+      ]),
+    [
+      color,
+      font,
+      opacity,
+      textAlign,
+      textTransform,
+      textSize,
+      margins,
+      paddings,
+      style,
+    ]
+  );
+
+  return (
+    <RNText
+      style={styles}
+      allowFontScaling={false}
+      maxFontSizeMultiplier={1}
+      {...props}
+    >
+      {children}
+    </RNText>
+  );
+};

package/src/components/Text/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./Text";
+export * from "./Screen";
+export * from "./Block";
+export * from "./SkeletorProvider";
+export * from "./InputFocusScrollView";

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from "./useForm";
+export * from "./useAnimation";
+export * from "./useAnimationTimeline";
+export * from "./useAppState";
+export * from "./useSkeletor";
+export * from "./useAndroidBackHandler";

package/src/hooks/useAndroidBackHandler.ts

@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+import { BackHandler } from "react-native";
+
+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 type AndroidBackHandlerConfig = WithCallback | WithDisable;
+
+function isWithCallback(
+  props: AndroidBackHandlerConfig,
+): props is WithCallback {
+  return Object.keys(props).some((key) => key === "handlePress");
+}
+
+export function useAndroidBackHandler(props: AndroidBackHandlerConfig) {
+  const { enabled } = props;
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const handler = BackHandler.addEventListener("hardwareBackPress", () => {
+      if (isWithCallback(props)) {
+        props.handlePress();
+        return true;
+      }
+
+      return props.disableDefault;
+    });
+
+    return handler.remove;
+  }, [enabled]);
+}

package/src/hooks/useAnimation.ts

@@ -0,0 +1,62 @@
+import { useMemo, useRef } from "react";
+import { Animated, ViewStyle } from "react-native";
+
+/** Any is a hotfix, requires more investigation */
+type Animation<Keys extends keyof Partial<ViewStyle>> = Record<
+  Keys,
+  Animated.AnimatedInterpolation<string | number> | any
+>;
+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 function useAnimation<Keys extends keyof Partial<ViewStyle>>(
+  styles: Definition<Keys>,
+  configuration?: Configuration,
+): AnimationSet<Keys> {
+  const keys = Object.keys(styles).map((key) => key as Keys);
+  /** Values always start at 0. These are not output values, more like indexes to output values defined in the array. */
+  const values = useRef(keys.map(() => new Animated.Value(0))).current;
+
+  const animations = useMemo(() => {
+    const result: Partial<Animation<Keys>> = {};
+
+    keys.forEach((key, index) => {
+      const value = values[index];
+      // We know the definition exists, otherwise we wouldn't be here.
+      const definition = styles[key]!;
+
+      const interpolation = value.interpolate({
+        inputRange: definition.map((_, i) => i),
+        outputRange: definition,
+      });
+
+      result[key] = interpolation;
+    });
+
+    return result as Animation<Keys>;
+  }, [styles]);
+
+  return {
+    values,
+    animations,
+    configuration: configuration || { duration: 250 },
+    definitions: styles,
+  };
+}

package/src/hooks/useAnimationTimeline.ts

@@ -0,0 +1,139 @@
+import { useEffect, useState } from "react";
+import { Animated, ViewStyle } from "react-native";
+import { AnimationSet } from "./useAnimation";
+
+interface BaseTimelineType {
+  elements: AnimationSet<any>[];
+  start: boolean;
+  onFinished?: () => void;
+  onStarted?: () => void;
+}
+
+type DelayTimeline = BaseTimelineType & {
+  delay: number;
+};
+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 function useAnimationTimeline(config: TimelineConfiguration): void {
+  const { delay, parallel, sequence, stagger } = config;
+  const staggerStart = Boolean(stagger?.start);
+  const delayStart = Boolean(delay?.start);
+  const sequenceStart = Boolean(sequence?.start);
+  const parallelStart = Boolean(parallel?.start);
+
+  const [previousDelayStart, setPreviousDelayStart] = useState(false);
+  const [previousStaggerStart, setPreviousStaggerStart] = useState(false);
+  const [previousSequenceStart, setPreviousSequenceStart] = useState(false);
+  const [previousParallelStart, setPreviousParallelStart] = useState(false);
+
+  function getBaseAnimations(
+    timeline: BaseTimelineType | StaggerTimeline | DelayTimeline,
+  ) {
+    const compositions: Animated.CompositeAnimation[] = [];
+    timeline.elements.forEach(
+      ({ values, animations, configuration, definitions }) => {
+        const keys = Object.keys(animations).map(
+          (key) => key as keyof Partial<ViewStyle>,
+        );
+
+        const elementCompositions = keys.map((key, index) => {
+          const value = values[index];
+          const lastValue = definitions[key]!.length - 1;
+          const nativeAnimation = configuration.loop
+            ? false
+            : configuration.useNativeDriver || false;
+
+          const base = Animated.timing(value, {
+            toValue: timeline.start ? lastValue : 0,
+            duration: configuration.duration,
+            useNativeDriver: nativeAnimation,
+          });
+
+          return configuration.loop ? Animated.loop(base) : base;
+        });
+
+        compositions.push(Animated.parallel(elementCompositions));
+      },
+    );
+
+    return compositions;
+  }
+
+  function setupParallelAnimations(timeline: BaseTimelineType) {
+    if (timeline.onStarted) {
+      timeline.onStarted();
+    }
+    Animated.parallel(getBaseAnimations(timeline)).start(timeline.onFinished);
+  }
+
+  function setupSequenceAnimations(timeline: BaseTimelineType) {
+    if (timeline.onStarted) {
+      timeline.onStarted();
+    }
+    Animated.sequence(getBaseAnimations(timeline)).start(timeline.onFinished);
+  }
+
+  function setupStaggerAnimations(timeline: StaggerTimeline) {
+    if (timeline.onStarted) {
+      timeline.onStarted();
+    }
+    Animated.stagger(timeline.stagger, getBaseAnimations(timeline)).start(
+      timeline.onFinished,
+    );
+  }
+
+  function setupDelayAnimations(timeline: DelayTimeline) {
+    Animated.delay(timeline.delay).start(() =>
+      setupParallelAnimations(timeline),
+    );
+  }
+
+  useEffect(() => {
+    if (stagger && previousStaggerStart !== staggerStart) {
+      setupStaggerAnimations(stagger);
+    }
+
+    setPreviousStaggerStart(staggerStart);
+  }, [previousStaggerStart, staggerStart, stagger]);
+
+  useEffect(() => {
+    if (parallel && previousParallelStart !== parallelStart) {
+      setupParallelAnimations(parallel);
+    }
+
+    setPreviousParallelStart(parallelStart);
+  }, [previousParallelStart, parallelStart, parallel]);
+
+  useEffect(() => {
+    if (sequence && previousSequenceStart !== sequenceStart) {
+      setupSequenceAnimations(sequence);
+    }
+
+    setPreviousSequenceStart(sequenceStart);
+  }, [previousSequenceStart, sequenceStart, sequence]);
+
+  useEffect(() => {
+    if (delay && previousDelayStart !== delayStart) {
+      setupDelayAnimations(delay);
+    }
+
+    setPreviousDelayStart(delayStart);
+  }, [previousDelayStart, delayStart, delay]);
+}

package/src/hooks/useAppState.ts

@@ -0,0 +1,26 @@
+import { useCallback, useEffect } from "react";
+import { AppState, AppStateStatus } from "react-native";
+
+interface Config {
+  onForeground?: () => void;
+  onBackground?: () => void;
+}
+
+export function useAppState({ onForeground, onBackground }: Config) {
+  const handleAppStateChange = useCallback(
+    (state: AppStateStatus) => {
+      if (state.match(/background|inactive/)) {
+        onBackground?.();
+      }
+      if (state === "active") {
+        onForeground?.();
+      }
+    },
+    [onBackground, onForeground],
+  );
+
+  useEffect(() => {
+    const event = AppState.addEventListener("change", handleAppStateChange);
+    return event.remove;
+  }, [handleAppStateChange]);
+}