@applicaster/zapp-react-native-utils 13.0.0-alpha.5004843012 → 13.0.0-alpha.5112402674

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.5004843012",
+  "version": "13.0.0-alpha.5112402674",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.5004843012",
+    "@applicaster/applicaster-types": "13.0.0-alpha.5112402674",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

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/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,10 +4,9 @@ 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/screenState/index.ts

@@ -1,8 +1,6 @@
 import { create } from "zustand";
 import { produce } from "immer";
 import { path } from "ramda";
-import React from "react";
-import { useShallow } from "zustand/react/shallow";
 
 type ScreenState = {
   selectedEntry: {
@@ -20,8 +18,6 @@ type ScreenStore = {
   setSelectedEntry: (screenId: string, entryId: string) => void;
 };
 
-type SetSelectedEntry = (screenId: string, entryId: string) => void;
-
 const useScreenStore = create<ScreenStore>((set) => ({
   screens: screensInitialState,
   setSelectedEntry: (screenId, entryId) =>
@@ -39,27 +35,17 @@ const useScreenStore = create<ScreenStore>((set) => ({
 export function useScreenState(
   screenId: ScreenId
 ): null | { screen: ScreenState; setSelectedEntry: (entryId: string) => void } {
-  const screenState = useScreenStore<ScreenState>(
-    useShallow(path(["screens", screenId]))
-  );
+  // const state = useState(screenState);
+  const screenState = useScreenStore(
+    path(["screens", screenId])
+  ) as ScreenState;
 
-  const setSelectedEntry = useScreenStore<SetSelectedEntry>(
-    useShallow(path(["setSelectedEntry"]))
-  );
+  const setSelectedEntry = useScreenStore((state) => state.setSelectedEntry);
 
-  const memoizedSetSelectedEntry = React.useCallback(
-    (entryId) => setSelectedEntry(screenId, entryId),
-    [screenId, setSelectedEntry]
-  );
+  if (!screenId) return null;
 
-  return React.useMemo(
-    () =>
-      !screenId
-        ? null
-        : {
-            screen: screenState,
-            setSelectedEntry: memoizedSetSelectedEntry,
-          },
-    [screenId, screenState]
-  );
+  return {
+    screen: screenState,
+    setSelectedEntry: (entryId) => setSelectedEntry(screenId, entryId),
+  };
 }

package/theme/index.ts

@@ -14,7 +14,7 @@ export const ThemeContext = React.createContext({
 export function useTheme<
   T extends Record<string, any> =
     | BaseThemePropertiesTV
-    | BaseThemePropertiesMobile,
+    | BaseThemePropertiesMobile
 >(): T {
   const { themes, selectedThemeId } = React.useContext(ThemeContext);
 

package/time/Timer.ts

@@ -3,10 +3,7 @@ export class Timer {
   private remaining: number;
   private timeoutId: NodeJS.Timeout | null;
 
-  constructor(
-    private callback: () => void,
-    private duration: number
-  ) {
+  constructor(private callback: () => void, private duration: number) {
     this.remaining = this.duration;
     this.timeoutId = null;
   }

package/types.ts

@@ -8,5 +8,4 @@ export type ManifestField<T> = {
 
 export enum ENDPOINT_TAGS {
   allow_missing_keys = "allow_missing_keys",
-  observe_storage = "observe_storage",
 }

package/zappFrameworkUtils/presentPluginOneTime.ts

@@ -92,8 +92,9 @@ export const PresentHookPluginOneTime = (
       const presentOneTimeVersionName =
         await getLatestWatchedVersionNumberFromStorage(storageKey, namespace);
 
-      const applicationVersionName =
-        await sessionStorage.getItem(versionNameKey);
+      const applicationVersionName = await sessionStorage.getItem(
+        versionNameKey
+      );
 
       if (!presentOneTimeVersionName || !applicationVersionName) {
         log_info(

package/idleUtils/__tests__/withTimeout$.test.ts

@@ -1,37 +0,0 @@
-import { TestScheduler } from "rxjs/testing";
-
-import { withTimeout$ } from "..";
-
-describe("withTimeout$", () => {
-  let testScheduler: TestScheduler;
-
-  beforeEach(() => {
-    testScheduler = new TestScheduler((actual, expected) => {
-      expect(actual).toEqual(expected);
-    });
-  });
-
-  it("should emit undefined after the specified timeout", () => {
-    testScheduler.run(({ expectObservable }) => {
-      const timeout = 1000;
-      const expectedMarble = "1s (a|)";
-      const expectedValues = { a: undefined };
-
-      const result$ = withTimeout$(timeout);
-
-      expectObservable(result$).toBe(expectedMarble, expectedValues);
-    });
-  });
-
-  it("should complete after emitting undefined", () => {
-    testScheduler.run(({ expectObservable }) => {
-      const timeout = 500;
-      const expectedMarble = "500ms (a|)";
-      const expectedValues = { a: undefined };
-
-      const result$ = withTimeout$(timeout);
-
-      expectObservable(result$).toBe(expectedMarble, expectedValues);
-    });
-  });
-});

package/reactHooks/state/useRefWithInitialValue.ts

@@ -1,14 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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;
-};