@applicaster/zapp-react-native-utils 13.0.0-alpha.1045252438 → 13.0.0-alpha.1108246333

package/manifestUtils/sharedConfiguration/screenPicker/utils.js

@@ -0,0 +1,130 @@
+const defaultPlatforms = {
+  tvos: "tvOS",
+  android_tv: "Android TV",
+  lg_tv: "LG TV",
+  samsung_tv: "Samsung TV",
+};
+
+const global_defaults = {
+  fontSize: 20,
+  lineHeight: 40,
+  letterSpacing: 0.4,
+};
+
+const generateFontConfiguration = (platforms = defaultPlatforms) => {
+  const platformEntries = Object.entries(platforms);
+  const defaultsEntries = Object.entries(global_defaults);
+  const splitCamelCase = (str) => str.replace(/([a-z](?=[A-Z]))/g, "$1_");
+
+  return platformEntries.reduce((acc, [platformKey, platformValue]) => {
+    acc.push(
+      ...defaultsEntries.reduce((acc2, [valueKey, defaultValue]) => {
+        acc2.push({
+          type: "number_input",
+          label: `${platformValue} ${splitCamelCase(valueKey).replace(
+            "_",
+            " "
+          )}`,
+          key: `${platformKey}_${splitCamelCase(valueKey)}`.toLowerCase(),
+          initial_value: defaultValue,
+        });
+
+        return acc2;
+      }, [])
+    );
+
+    return acc;
+  }, []);
+};
+
+const conditional_rule = (key, condition_value) => ({
+  key,
+  condition_value,
+});
+
+const createConditionalConfig = (rules, matchAll = false) => ({
+  rules: matchAll ? "all_conditions" : "conditional",
+  conditional_fields: rules.map((field) => conditional_rule(...field)),
+});
+
+const conditional_horizontal_type = createConditionalConfig([
+  ["styles/screen_picker_type", "horizontal"],
+]);
+
+const conditional_vertical_type = createConditionalConfig([
+  ["styles/screen_picker_type", "vertical"],
+]);
+
+const conditional_horizontal_type_item_fixed = createConditionalConfig(
+  [
+    ["styles/screen_picker_type", "horizontal"],
+    ["styles/screen_picker_item_size", "fixed"],
+  ],
+  true
+);
+
+const conditional_horizontal_type_item_dynamic = createConditionalConfig(
+  [
+    ["styles/screen_picker_type", "horizontal"],
+    ["screen_picker_horizontal_display_type", "dynamic"],
+  ],
+  true
+);
+
+const conditional_horizontal_display_type_fixed = createConditionalConfig(
+  [
+    ["styles/screen_picker_type", "horizontal"],
+    ["styles/screen_picker_horizontal_display_type", "fixed"],
+  ],
+  true
+);
+
+const conditional_horizontal_asset_on = createConditionalConfig(
+  [
+    ["styles/screen_picker_type", "horizontal"],
+    ["styles/screen_picker_asset_switch", true],
+  ],
+  true
+);
+
+const createVariationFields = ({
+  prefix = "screen_picker",
+  key,
+  type = "number_input",
+  label = "",
+  variants: [a, b],
+}) => {
+  return [
+    {
+      type,
+      key: `${prefix}${prefix.length > 0 ? "_" : ""}${
+        a?.key ?? "vertical"
+      }_${key}`,
+      label: a?.label ?? label,
+      initial_value: a.initial_value,
+      ...conditional_vertical_type,
+    },
+    {
+      type,
+      key: `${prefix}${prefix.length > 0 ? "_" : ""}${
+        b.key ?? "horizontal"
+      }_${key}`,
+      label: b?.label ?? label,
+      initial_value: b.initial_value,
+      ...conditional_horizontal_type,
+    },
+  ];
+};
+
+module.exports = {
+  generateFontConfiguration,
+  createVariationFields,
+  createConditionalConfig,
+  conditional_rule,
+  conditional_horizontal_type,
+  conditional_vertical_type,
+  conditional_horizontal_type_item_fixed,
+  conditional_horizontal_type_item_dynamic,
+  conditional_horizontal_display_type_fixed,
+  conditional_horizontal_asset_on,
+};

package/navigationUtils/index.ts

@@ -644,8 +644,8 @@ export const getScreenId = (
   fallbackRiver: ZappRiver
 ) => {
   return screenData?.targetScreen
-    ? screenData?.targetScreen?.id ?? fallbackRiver.id
+    ? (screenData?.targetScreen?.id ?? fallbackRiver.id)
     : "screen_id" in screenData
-    ? screenData.screen_id
-    : fallbackRiver.id;
+      ? screenData.screen_id
+      : fallbackRiver.id;
 };

package/numberUtils/index.ts

@@ -3,7 +3,7 @@ import { logger } from "@applicaster/zapp-react-native-utils/logger";
 
 const numberUtilsLogger = logger?.addSubsystem("NumberUtils");
 
-export const toNumber = (value: any): number | undefined => {
+export const toNumber = (value: unknown): number | undefined => {
   if (R.isNil(value) || R.isEmpty(value)) {
     return undefined;
   }
@@ -17,10 +17,12 @@ export const toNumber = (value: any): number | undefined => {
   return undefined;
 };
 
-export const toNumberWithDefault = (defaultValue: number, value: any): number =>
-  toNumber(value) ?? defaultValue;
+export const toNumberWithDefault = (
+  defaultValue: number,
+  value: unknown
+): number => toNumber(value) ?? defaultValue;
 
-export const toNumberWithDefaultZero = (value: any): number =>
+export const toNumberWithDefaultZero = (value: unknown): number =>
   toNumberWithDefault(0, value);
 
 export const requireNumber = (obj, key: string) => {
@@ -39,7 +41,7 @@ export const requireNumber = (obj, key: string) => {
 
 export const toFiniteNumberWithDefault = (
   defaultValue: number,
-  value: any
+  value: unknown
 ): number => {
   const possibleNumber = toNumberWithDefault(defaultValue, value);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.1045252438",
+  "version": "13.0.0-alpha.1108246333",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,11 +28,9 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.1045252438",
+    "@applicaster/applicaster-types": "13.0.0-alpha.1108246333",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
-    "create-react-context": "^0.2.3",
-    "create-react-ref": "^0.1.0",
     "dayjs": "^1.11.10",
     "memoizee": "0.4.15",
     "prop-types": "^15.0.0",
@@ -42,13 +40,10 @@
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
     "immer": "*",
-    "react": "17.0.2",
-    "react-native": "0.68.6",
+    "react": "*",
+    "react-native": "*",
     "uglify-js": "*",
     "validate-color": "*",
     "zustand": "*"
-  },
-  "devDependencies": {
-    "@types/react-native": "0.69.6"
   }
 }

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -35,25 +35,23 @@ const Wrapper = ({ children }: { children: React.ReactChild }) => (
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {
-  it("should update position for selected component", async () => {
+  it("should update position for selected component - onViewportEnter", () => {
     const { result } = renderHook(() => useTrackedView("123"), {
       wrapper: Wrapper,
     });
 
-    // Fast-forward until all timers have been executed
-    jest.advanceTimersByTime(3000);
-
     expect(result.current.inViewPort).toBe(false);
 
     const mockRect = {
       rect: { left: 1, right: 1, top: 1, bottom: 1 },
     };
 
-    act(() => {
-      result.current.onPositionUpdated(mockRect);
+    act(async () => {
+      await result.current.onPositionUpdated(mockRect);
     });
 
-    jest.advanceTimersByTime(3000);
+    // Fast-forward until all timers have been executed
+    jest.runAllTimers();
 
     expect(result.current.inViewPort).toBe(true);
 

package/reactHooks/autoscrolling/useTrackedView.ts

@@ -2,6 +2,10 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { findTrackedView } from "./utils/findTrackedView";
+import { isNil } from "ramda";
+import { withTimeout } from "@applicaster/zapp-react-native-utils/idleUtils";
+
+const TIMEOUT_FOR_DELAY_ON_VIEWPORT_ENTER_EVENT = 500; // ms
 
 const getNormalizedRect = (rect, componentId, screenWidth, screenHeight) => {
   if (!rect) {
@@ -37,9 +41,16 @@ export const useTrackedView = (componentId: string) => {
   );
 
   const onPositionUpdated = useCallback(
-    ({ rect }) => {
+    async ({ rect }) => {
       const currentPosition = normalizedRect(componentId, rect);
 
+      // There is an issue on the native side where they are unable to guarantee
+      // that the order of onViewportLeave and onViewportEnter events is always correct.
+      // This workaround/hack delays the onViewportEnter event to ensure it is received last.
+      if (!isNil(currentPosition)) {
+        await withTimeout(TIMEOUT_FOR_DELAY_ON_VIEWPORT_ENTER_EVENT);
+      }
+
       updateComponentsPositions(componentId, currentPosition as any);
 
       setInViewPort(!!currentPosition);

package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.test.js

@@ -5,7 +5,7 @@ const mockDimensionsGet = jest.fn(
     ({
       window: { width: 1, height: 1 },
       screen: { width: 360, height: 540 },
-    }[type])
+    })[type]
 );
 
 ReactNative.Dimensions.get = mockDimensionsGet;

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -52,6 +52,14 @@ export const useDimensions: UseDimensions = (
       ? { fullDimensions }
       : { ...fullDimensions };
 
+  if (options.updateForInactiveScreens === undefined) {
+    options.updateForInactiveScreens = true;
+  }
+
+  if (options.fullDimensions === undefined) {
+    options.fullDimensions = false;
+  }
+
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
   const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 

package/reactHooks/navigation/__mocks__/useNavigation.ts

@@ -3,5 +3,8 @@ export const useNavigation = jest.fn(() => ({
   screenData: {
     name: "someName",
   },
+  videoModalState: {
+    visible: false,
+  },
   currentRoute: "someRoute",
 }));

package/reactHooks/navigation/index.ts

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo } from "react";
-import { BackHandler, InteractionManager, NativeModules } from "react-native";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { BackHandler } from "react-native";
 
 import {
   useContentTypes,
@@ -31,6 +31,8 @@ export { useGetBottomTabBarHeight } from "./useGetBottomTabBarHeight";
 
 export { useIsScreenActive } from "./useIsScreenActive";
 
+export { useProfilerLogging } from "./useProfilerLogging";
+
 export {
   useUniqueRouteSuffix,
   useNavbarId,
@@ -121,10 +123,8 @@ export function isNavBarVisible(
   return true;
 }
 
-const { ProfilerBridge } = NativeModules;
-
 export const useBackHandler = (cb: () => boolean) => {
-  React.useEffect(() => {
+  useEffect(() => {
     BackHandler.addEventListener("hardwareBackPress", cb);
 
     return () => {
@@ -158,7 +158,7 @@ export const useZappHooksForEntry = (
     setIsHooksExecutionInProgress,
     setIsPresentingFullScreen,
     setIsRunningInBackground,
-  }: HookModalContextT = React.useContext(ZappHookModalContext.ReactContext);
+  }: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
 
   const {
     appData: { layoutVersion },
@@ -256,22 +256,10 @@ export const useZappHooksForEntry = (
   }, [entry.id]);
 };
 
-export const useProfilerLogging = () => {
-  const logTimestamp = (data: string) =>
-    InteractionManager.runAfterInteractions(() => {
-      if (ProfilerBridge && data) {
-        ProfilerBridge.updateTimer("navigation", data, Date.now());
-      }
-    });
-
-  return logTimestamp;
-};
-
 export const useRunIfLongPress = (
   options = { timeout: LONG_KEY_PRESS_TIMEOUT }
 ) => {
-  const pressTimeout =
-    React.useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
+  const pressTimeout = useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
 
   const resetTimeout = () => {
     clearTimeout(pressTimeout.current as ReturnType<typeof setTimeout>);

package/reactHooks/navigation/useGetTabBarHeight.ts

@@ -1,5 +1,3 @@
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
 import { platformSelect } from "../../reactUtils";
 
 const TAB_BAR_HEIGHT_IOS = 49;
@@ -7,6 +5,6 @@ const TAB_BAR_HEIGHT_ANDROID = 56;
 
 export const useGetTabBarHeight = () =>
   platformSelect({
-    ios: TAB_BAR_HEIGHT_IOS + (useSafeAreaInsets().bottom ?? 0),
+    ios: TAB_BAR_HEIGHT_IOS,
     android: TAB_BAR_HEIGHT_ANDROID,
   }) as number;

package/reactHooks/navigation/useProfilerLogging.ts

@@ -0,0 +1,15 @@
+import { useCallback } from "react";
+import { InteractionManager, NativeModules } from "react-native";
+
+const { ProfilerBridge } = NativeModules;
+
+export const useProfilerLogging = () =>
+  useCallback(
+    (data: string) =>
+      InteractionManager.runAfterInteractions(() => {
+        if (ProfilerBridge && data) {
+          ProfilerBridge.updateTimer("navigation", data, Date.now());
+        }
+      }),
+    []
+  );

package/reactHooks/state/useRefWithInitialValue.ts

@@ -0,0 +1,14 @@
+import React from "react";
+
+/**
+ * returns a ref with an initial value that is lazily evaluated once
+ * */
+export const useRefWithInitialValue = <T>(initialValueGetter: () => T) => {
+  const ref = React.useRef<T>(null);
+
+  if (ref.current === null) {
+    ref.current = initialValueGetter();
+  }
+
+  return ref;
+};

package/reactHooks/state/useStateFromSubscribe.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import type { Subject } from "rxjs";
+
+export const useStateFromSubscribe = <T, U>(
+  subject: Subject<T>,
+  onUpdate: (
+    observerValue: T,
+    next: React.Dispatch<React.SetStateAction<U>>
+  ) => void,
+  initialValue: U
+) => {
+  const [state, setState] = useState<U>(initialValue);
+
+  useEffect(() => {
+    const subscription = subject.subscribe((observer) =>
+      onUpdate(observer, setState)
+    );
+
+    return () => subscription.unsubscribe();
+  }, [subject]);
+
+  return state;
+};

package/reactHooks/usePluginConfiguration.ts

@@ -91,7 +91,7 @@ export function useLayoutConfiguration<
   S extends unknown,
   G extends unknown,
   R extends unknown,
-  L extends unknown
+  L extends unknown,
 >(layoutData, manifest, options: Options = {}) {
   const keys = options.keys || [
     "assets",

package/reactHooks/useSubscriberFor.ts

@@ -4,9 +4,10 @@ import { subscriber } from "@applicaster/zapp-react-native-utils/functionUtils";
 const subscriberObjects = Object.create({});
 
 interface UseSubscriberFor {
-  (eventName: string, handler?: (...args: unknown[]) => void): (
-    ...args: unknown[]
-  ) => ReturnType<typeof subscriber>;
+  (
+    eventName: string,
+    handler?: (...args: unknown[]) => void
+  ): (...args: unknown[]) => ReturnType<typeof subscriber>;
 }
 
 /**

package/reactUtils/__tests__/__snapshots__/reactUtilsHelpers.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`addLifeCycleMethods attaches the lifecycle method to the component 1`] = `
+exports[`reactUtils helpers addLifeCycleMethods attaches the lifecycle method to the component 1`] = `
 <View>
   <Text>
     I'm a class component
@@ -8,7 +8,7 @@ exports[`addLifeCycleMethods attaches the lifecycle method to the component 1`]
 </View>
 `;
 
-exports[`attachMethodToPrototype attaches a lifecycle method to the component's prototype 1`] = `
+exports[`reactUtils helpers attachMethodToPrototype attaches a lifecycle method to the component's prototype 1`] = `
 <View>
   <Text>
     I'm a class component
@@ -16,6 +16,18 @@ exports[`attachMethodToPrototype attaches a lifecycle method to the component's
 </View>
 `;
 
-exports[`attachMethodToPrototype preserves any existing lifecycle method 1`] = `<StatelessComponent />`;
+exports[`reactUtils helpers attachMethodToPrototype preserves any existing lifecycle method 1`] = `
+<View>
+  <Text>
+    I'm a stateless component
+  </Text>
+</View>
+`;
 
-exports[`wrapInClass wraps the stateless component in a class 1`] = `<StatelessComponent />`;
+exports[`reactUtils helpers wrapInClass wraps the stateless component in a class 1`] = `
+<View>
+  <Text>
+    I'm a stateless component
+  </Text>
+</View>
+`;

package/reactUtils/__tests__/reactUtils.test.js

@@ -7,7 +7,7 @@ import {
   componentDidMount,
 } from "./fixtures";
 
-import { attachLifeCycleMethods, createReactRef, mergeChildrenProps } from "..";
+import { attachLifeCycleMethods, mergeChildrenProps } from "..";
 
 describe("attachLifeCycleMethods", () => {
   let addLifeCycleMethodsSpy;
@@ -41,24 +41,6 @@ describe("attachLifeCycleMethods", () => {
   });
 });
 
-describe("createReactRef", () => {
-  it("calls the React.createRef function if it exists", () => {
-    jest.clearAllMocks();
-
-    const ref = createReactRef();
-    expect(ref).toHaveProperty("current");
-  });
-
-  it("calls the polyfill if React.createRef doesn't exist", () => {
-    jest.clearAllMocks();
-    const originalCreateRef = React.createRef;
-    React.createRef = undefined;
-    const ref = createReactRef();
-    expect(ref).toHaveProperty("current");
-    React.createRef = originalCreateRef;
-  });
-});
-
 describe("mergeChildrenProps", () => {
   it("returns the cloned children with the merged props", () => {
     const Egg = () => React.createElement("Egg");