@applicaster/zapp-react-native-utils 16.0.0-alpha.3112220329 → 16.0.0-alpha.3202041045

package/modalState/__tests__/useModalStoreState.test.ts

@@ -0,0 +1,142 @@
+import { act, renderHook } from "@testing-library/react-native";
+
+import { modalStore, useModalStoreState } from "../";
+
+const item = { id: "river-general", name: "Test Modal" };
+const props = { entry: { id: "modal-entry-1" } };
+
+const openModal = () =>
+  act(() => {
+    modalStore.getState().openModal({ item, props } as any);
+  });
+
+// Counts every render of the hook so the tests can assert on subscription
+// behaviour, not just on the returned value.
+const renderModalStoreState = (skipSubscription?: boolean) => {
+  const renders = { count: 0 };
+
+  const view = renderHook(() => {
+    renders.count += 1;
+
+    return skipSubscription === undefined
+      ? useModalStoreState()
+      : useModalStoreState(skipSubscription);
+  });
+
+  return { ...view, renders };
+};
+
+describe("useModalStoreState", () => {
+  afterEach(() => {
+    act(() => {
+      modalStore.getState().dismissModal();
+    });
+  });
+
+  describe("when subscribed (default)", () => {
+    it("returns the live modal state when called without arguments", () => {
+      const { result } = renderModalStoreState();
+
+      expect(result.current.visible).toBe(false);
+
+      openModal();
+
+      expect(result.current.visible).toBe(true);
+      expect(result.current.screen).toBe(item);
+      expect(result.current.props).toBe(props);
+    });
+
+    it("re-renders the consumer when the modal state changes", () => {
+      const { renders } = renderModalStoreState(false);
+
+      const rendersBeforeOpen = renders.count;
+
+      openModal();
+
+      expect(renders.count).toBeGreaterThan(rendersBeforeOpen);
+    });
+
+    // Counterpart to "returns a stable reference across store updates": an open
+    // modal is the one point where a live subscription and a skipped one hold
+    // different references, which is what makes that assertion meaningful.
+    it("returns a new reference while the modal is open", () => {
+      const { result } = renderModalStoreState(false);
+
+      const firstValue = result.current;
+
+      openModal();
+
+      expect(result.current).not.toBe(firstValue);
+    });
+  });
+
+  describe("when subscription is skipped", () => {
+    it("reports an empty modal state even while a modal is open", () => {
+      openModal();
+
+      expect(modalStore.getState().modalState.visible).toBe(true);
+
+      const { result } = renderModalStoreState(true);
+
+      expect(result.current).toMatchObject({
+        visible: false,
+        screen: null,
+        options: {},
+        props: {},
+      });
+    });
+
+    it("does not re-render the consumer when the modal state changes", () => {
+      const { renders } = renderModalStoreState(true);
+
+      const rendersBeforeOpen = renders.count;
+
+      openModal();
+
+      expect(renders.count).toBe(rendersBeforeOpen);
+    });
+
+    // The skipped branch has to hand back a module-level constant. Returning a
+    // fresh object would fail zustand's Object.is check and re-render on every
+    // store notification - the opposite of what skipping is for.
+    it("returns a stable reference across store updates", () => {
+      const { result } = renderModalStoreState(true);
+
+      const firstValue = result.current;
+
+      openModal();
+
+      // Asserted while the modal is open: dismissing resets the store to the
+      // very same initialModalState object, so an end-to-end round trip would
+      // hold this identity even for a live subscription.
+      expect(result.current).toBe(firstValue);
+
+      act(() => {
+        modalStore.getState().dismissModal();
+      });
+
+      expect(result.current).toBe(firstValue);
+    });
+  });
+
+  it("picks up the current modal state when it starts subscribing", () => {
+    let skipSubscription = true;
+
+    const { result, rerender } = renderHook(() =>
+      useModalStoreState(skipSubscription)
+    );
+
+    openModal();
+
+    expect(result.current.visible).toBe(false);
+
+    skipSubscription = false;
+
+    act(() => {
+      rerender(undefined);
+    });
+
+    expect(result.current.visible).toBe(true);
+    expect(result.current.screen).toBe(item);
+  });
+});

package/modalState/store.ts

@@ -98,5 +98,12 @@ export const openBottomSheetModal = ({
   });
 };
 
-export const useModalStoreState = (): ModalState =>
-  useModalStore<ModalState>((state) => state.modalState);
+/**
+ * Pass `skipSubscription` from callers that render outside of a modal: the
+ * selector then returns the stable `initialModalState` reference, so the
+ * component is never re-rendered by modal state it does not read.
+ */
+export const useModalStoreState = (skipSubscription = false): ModalState =>
+  useModalStore<ModalState>((state) =>
+    skipSubscription ? initialModalState : state.modalState
+  );

package/modalState/types.ts

@@ -118,6 +118,9 @@ export interface Content {
   dynamicCollection?: DynamicCollectionOptions;
   themePluginId?: string;
   styleOverrides?: Record<string, any>;
+  /** Shown under Next Up when the queue sheet has no upcoming items. */
+  emptyMessage?: string;
+  context?: Record<string, any>;
 }
 
 export interface Menu {

package/modalState/useBottomSheetContent.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 import { MenuItem, modalOrchestrator } from "./ModalOrchestrator";
@@ -45,7 +45,9 @@ export const useBottomSheetContent = (props: Props): Return => {
   // Subscribe to the viewModel state changes
   useEffect(() => {
     return viewModel?.subscribe((nextState) => {
-      setState(nextState);
+      setState((state) => {
+        return state === nextState ? state : nextState;
+      });
     });
   }, [viewModel]);
 
@@ -65,16 +67,19 @@ export const useBottomSheetContent = (props: Props): Return => {
    * - If the item was a leaf action (not a submenu), triggers viewModel.refetch()
    *   so that checkmarks (isSelected) reflect the updated server state.
    */
-  const handleItemPress = async (item: MenuItem) => {
-    const actions = getMenuItemActions(item);
-    const isSubMenu = actions.some(isPresentSubMenuAction);
+  const handleItemPress = useCallback(
+    async (item: MenuItem) => {
+      const actions = getMenuItemActions(item);
+      const isSubMenu = actions.some(isPresentSubMenuAction);
 
-    await onPress(item);
+      await onPress(item);
 
-    if (!isSubMenu) {
-      await viewModel?.refetch();
-    }
-  };
+      if (!isSubMenu) {
+        await viewModel?.refetch();
+      }
+    },
+    [onPress, viewModel]
+  );
 
   const goBackOrClose = React.useCallback(() => {
     if (modalOrchestrator.canGoBack) {
@@ -82,7 +87,7 @@ export const useBottomSheetContent = (props: Props): Return => {
     } else {
       modalOrchestrator.close();
     }
-  }, [modalOrchestrator.canGoBack]);
+  }, []);
 
   return {
     items: viewModel?.editableCollection ? editableItems : state?.items,
@@ -94,7 +99,7 @@ export const useBottomSheetContent = (props: Props): Return => {
     canGoBack: modalOrchestrator.canGoBack,
     handleItemPress,
     goBackOrClose,
-    close: () => modalOrchestrator.close(),
+    close: useCallback(() => modalOrchestrator.close(), []),
     role: state?.role,
     behavior: state?.behavior,
     dynamicCollection: state?.dynamicCollection,

package/navigationUtils/xrayNavigator.ts

@@ -0,0 +1,12 @@
+/**
+ * The app navigator for the X-Ray toolboxes (nav, screen), which run outside React. The
+ * NavigationProvider sets it after each commit; it is a plain module variable, so updating it
+ * never renders anything.
+ */
+let navigator: QuickBrickAppNavigator | undefined;
+
+export const setXrayNavigator = (value: QuickBrickAppNavigator | undefined) => {
+  navigator = value;
+};
+
+export const getXrayNavigator = () => navigator;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-alpha.3112220329",
+  "version": "16.0.0-alpha.3202041045",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-alpha.3112220329",
+    "@applicaster/applicaster-types": "16.0.0-alpha.3202041045",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",
@@ -36,6 +36,7 @@
     "prop-types": "^15.0.0"
   },
   "peerDependencies": {
+    "@applicaster/quick-brick-assets": "*",
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
     "react": "*",

package/pluginUtils/__tests__/pluginUtils.test.js

@@ -1,3 +1,9 @@
+const mockAppStoreGet = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: { get: (key) => mockAppStoreGet(key) },
+}));
+
 import * as R from "ramda";
 import * as pluginUtils from "../index";
 
@@ -148,6 +154,32 @@ describe("findPluginByIdentifier", () => {
   });
 });
 
+describe("getPluginByIdentifier", () => {
+  const { getPluginByIdentifier } = pluginUtils;
+
+  const plugins = {
+    foo: pluginMock("foo", "foo", "some_plugin_type"),
+    bar: pluginMock("foo", "bar", "some_plugin_type"),
+  };
+
+  beforeEach(() => {
+    mockAppStoreGet.mockReset();
+  });
+
+  it("reads plugins from appStore and returns the matching plugin", () => {
+    mockAppStoreGet.mockReturnValue(plugins);
+
+    expect(getPluginByIdentifier("foo")).toEqual(plugins.foo);
+    expect(mockAppStoreGet).toHaveBeenCalledWith("plugins");
+  });
+
+  it("returns undefined when the plugin is not found", () => {
+    mockAppStoreGet.mockReturnValue(plugins);
+
+    expect(getPluginByIdentifier("do_not_exist")).toBeUndefined();
+  });
+});
+
 describe("findPluginByType", () => {
   const { findPluginByType } = pluginUtils;
 

package/pluginUtils/index.ts

@@ -1,4 +1,5 @@
 import * as R from "ramda";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { toCamelCase, toPascalCase } from "../stringUtils";
 
 import { getNavigationType } from "../navigationUtils";
@@ -97,6 +98,34 @@ export function findPluginByIdentifier(
   return plugin;
 }
 
+/**
+ * Like findPluginByIdentifier, but reads the current plugins list from appStore.
+ * Convenience for non-render / hook code that doesn't already have `plugins` in hand.
+ * @param identifier of the plugin to look for
+ * @param doNotWarn if set to true, will not log a warning if plugin is not found
+ * @return whole plugin if found, undefined otherwise
+ */
+export function getPluginByIdentifier(
+  identifier: string,
+  doNotWarn: boolean = false
+): (QuickBrickPlugin | ZappPlugin | Plugin) | undefined {
+  try {
+    const plugins = appStore.get("plugins") ?? {};
+
+    return findPluginByIdentifier(identifier, plugins, doNotWarn);
+  } catch (error) {
+    if (!doNotWarn) {
+      pluginUtilsLogger.warning({
+        message:
+          "Could not read plugins from appStore while resolving plugin by identifier",
+        data: { identifier, error },
+      });
+    }
+
+    return undefined;
+  }
+}
+
 const pluginTypeForItemTypeMap = {
   playable: "player",
 };

package/quickBrickAssets/__tests__/index.test.ts

@@ -0,0 +1,18 @@
+// The Jest stand-in for @applicaster/quick-brick-assets maps each existing key to itself
+import { getQuickBrickAsset } from "..";
+
+describe("getQuickBrickAsset", () => {
+  it("returns the asset for a plugin identifier and path", () => {
+    expect(
+      getQuickBrickAsset("mute_unmute_action", "action/flavour_1/mute.png")
+    ).toBe("mute_unmute_action/action/flavour_1/mute.png");
+  });
+
+  it("rejects unknown paths and plugin identifiers at compile time", () => {
+    // @ts-expect-error - no such file in mute_unmute_action
+    getQuickBrickAsset("mute_unmute_action", "action/flavour_9/mute.png");
+
+    // @ts-expect-error - no assets folder for this plugin
+    getQuickBrickAsset("unknown_plugin", "action/flavour_1/mute.png");
+  });
+});

package/quickBrickAssets/index.ts

@@ -0,0 +1,35 @@
+import assets from "@applicaster/quick-brick-assets";
+import type {
+  QuickBrickAssetKey,
+  QuickBrickAssetSource,
+} from "@applicaster/quick-brick-assets";
+
+export type { QuickBrickAssetKey, QuickBrickAssetSource };
+
+type PluginOf<K> = K extends `${infer Plugin}/${string}` ? Plugin : never;
+
+type PathOf<K, Plugin extends string> = K extends `${Plugin}/${infer Path}`
+  ? Path
+  : never;
+
+/** Plugin identifiers that have a folder in `@applicaster/quick-brick-assets`. */
+export type QuickBrickAssetPlugin = PluginOf<QuickBrickAssetKey>;
+
+/** Asset paths inside the given plugin's folder. */
+export type QuickBrickAssetPath<Plugin extends QuickBrickAssetPlugin> = PathOf<
+  QuickBrickAssetKey,
+  Plugin
+>;
+
+/**
+ * Looks up an asset of `@applicaster/quick-brick-assets` by plugin identifier
+ * and path relative to the plugin folder, e.g.
+ * `getQuickBrickAsset("mute_unmute_action", "action/flavour_1/mute.png")`.
+ * Both arguments are checked against the package's files at compile time.
+ * Density variants (`@2x` / `@3x`) are not supported.
+ */
+export const getQuickBrickAsset = <Plugin extends QuickBrickAssetPlugin>(
+  pluginIdentifier: Plugin,
+  assetPath: QuickBrickAssetPath<Plugin>
+): QuickBrickAssetSource =>
+  assets[`${pluginIdentifier}/${assetPath}` as QuickBrickAssetKey];

package/reactHooks/__tests__/getPluginConfiguration.test.ts

@@ -0,0 +1,82 @@
+import { renderHook } from "@testing-library/react-native";
+
+const plugin = {
+  identifier: "cast",
+  configuration: {
+    title: "Configured",
+    localizations: { fr: { close: "Fermer" } },
+  },
+};
+
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  usePlugins: () => [plugin],
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper",
+  () => ({ getUILanguage: () => "fr" })
+);
+
+import {
+  getPluginConfiguration,
+  mergeLocalizations,
+  usePluginConfiguration,
+} from "../usePluginConfiguration";
+
+const manifest = {
+  custom_configuration_fields: [
+    { key: "title", initial_value: "Default" },
+    { key: "color", initial_value: "red" },
+  ],
+  localizations: {
+    fields: [
+      { key: "close", initial_value: "Close" },
+      { key: "cancel", initial_value: "Cancel" },
+    ],
+  },
+};
+
+it("matches usePluginConfiguration outside React", () => {
+  const { result } = renderHook(() => usePluginConfiguration("cast", manifest));
+
+  expect(getPluginConfiguration(plugin, manifest)).toEqual(result.current);
+});
+
+// Expected values are what R.mergeDeepWith((l, r) => (isNil(l) ? r : l)) returned before ramda was removed
+describe("mergeLocalizations", () => {
+  const defaults = { en: { close: "Close", cancel: "Cancel" } };
+
+  it("returns the defaults when nothing is configured", () => {
+    expect(mergeLocalizations(undefined, defaults)).toEqual(defaults);
+  });
+
+  it("keeps configured values, fills nil ones and missing keys from defaults", () => {
+    expect(
+      mergeLocalizations(
+        { en: { close: null, extra: "X" }, fr: { close: "Fermer" } },
+        defaults
+      )
+    ).toEqual({
+      en: { close: "Close", extra: "X", cancel: "Cancel" },
+      fr: { close: "Fermer" },
+    });
+  });
+
+  it("does not merge arrays", () => {
+    expect(
+      mergeLocalizations(
+        { en: { close: ["a"] } },
+        { en: { close: ["b"], cancel: "C" } }
+      )
+    ).toEqual({ en: { close: ["a"], cancel: "C" } });
+  });
+});
+
+it("keeps configured languages first, so the fallback language stays the configured one", () => {
+  const merged = mergeLocalizations(
+    { he: { close: "סגור" }, en: { close: "Close it" } },
+    { en: { close: "Close" } }
+  );
+
+  expect(Object.keys(merged)).toEqual(["he", "en"]);
+});

package/reactHooks/actions/index.ts

@@ -21,17 +21,45 @@ type ActionContexts<T = unknown> = {
 };
 
 /**
- * React Hook to subscribe to the custom action context
+ * A value that changes whenever a provider is added to or removed from
+ * `uiActionsRegistry`.
+ *
+ * Providers can register after the UI that wants them has rendered - the audio
+ * player registers playback speed only once its controller has state, and
+ * plugin-backed actions are bridged in from an effect. Put this in the
+ * dependency list of anything that resolves actions, so the list is re-read
+ * instead of being frozen at first paint.
+ */
+export function useRegistryRevision(): number {
+  const [revision, setRevision] = useState(0);
+
+  useEffect(
+    () =>
+      uiActionsRegistry.subscribe(() => setRevision((current) => current + 1)),
+    []
+  );
+
+  return revision;
+}
+
+/**
+ * Resolves a legacy action context or falls back to the UI action registry.
  * @param {*} plugId - subscribes to the context of that action plugin
  * @return {*} - global action provider context or context for specific action plugin
  */
 export function useActions<T = unknown>(plugId: string): any {
   const [logged, setLogged] = useState(false);
   const context = useContext<ActionContexts<T>>(ActionsContext);
+  useRegistryRevision();
+
   const actionContext = context?.actions?.[plugId]?.module?.context;
 
   if (plugId) {
     if (!actionContext) {
+      const registeredAction = uiActionsRegistry.getAction(plugId);
+
+      if (registeredAction) return registeredAction;
+
       if (!logged) {
         logger.warning({
           message: `useActions: Couldn't find an action for ${plugId} plugin`,
@@ -139,25 +167,3 @@ export function useEntryActionState(
 
   return { state, invokeAction };
 }
-
-/**
- * A value that changes whenever a provider is added to or removed from
- * `uiActionsRegistry`.
- *
- * Providers can register after the UI that wants them has rendered - the audio
- * player registers playback speed only once its controller has state, and
- * plugin-backed actions are bridged in from an effect. Put this in the
- * dependency list of anything that resolves actions, so the list is re-read
- * instead of being frozen at first paint.
- */
-export function useRegistryRevision(): number {
-  const [revision, setRevision] = useState(0);
-
-  useEffect(
-    () =>
-      uiActionsRegistry.subscribe(() => setRevision((current) => current + 1)),
-    []
-  );
-
-  return revision;
-}

package/reactHooks/cell-click/__tests__/index.test.js

@@ -5,6 +5,7 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 
 const mockNavigator = {
   getPathname: () => "pathnameMock",
+  currentRoute: "pathnameMock",
   push: jest.fn(),
   data: {},
 };
@@ -29,6 +30,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
   ),
   useTargetScreenData: jest.fn(() => ({})),
   useCurrentScreenData: jest.fn(() => ({})),
+  useScreenContext: jest.fn(() => ({})),
 }));
 
 jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
@@ -66,6 +68,12 @@ const wrapper = ({ children }) => (
   </CellTapContext.Provider>
 );
 
+const actionExecutorWrapper = ({ children }) => (
+  <ActionExecutorContext.Provider value={actionExecutor}>
+    {children}
+  </ActionExecutorContext.Provider>
+);
+
 describe("useCellClick", () => {
   it("returns a function", () => {
     const { result } = renderHook(() => useCellClick(mockProps));
@@ -95,4 +103,60 @@ describe("useCellClick", () => {
 
     cleanup();
   });
+
+  it("does not push when the cell finishes a hook", async () => {
+    mockNavigator.push.mockClear();
+
+    const item = {
+      id: "profile-1",
+      type: { value: "feed" },
+      extensions: {
+        tap_actions: {
+          actions: [
+            { type: "sessionStorageSet" },
+            { type: "finishHook", options: { success: true } },
+          ],
+        },
+      },
+    };
+
+    const { result } = renderHook(() => useCellClick({ item }), {
+      wrapper: actionExecutorWrapper,
+    });
+
+    await result.current();
+
+    await waitFor(() => {
+      expect(actionExecutor.handleEntryActions).toHaveBeenCalled();
+    });
+
+    expect(mockNavigator.push).not.toHaveBeenCalled();
+    cleanup();
+  });
+
+  it("pushes after tap actions that do not finish a hook", async () => {
+    mockNavigator.push.mockClear();
+
+    const item = {
+      id: "episode-1",
+      type: { value: "feed" },
+      extensions: {
+        tap_actions: {
+          actions: [{ type: "sessionStorageSet" }],
+        },
+      },
+    };
+
+    const { result } = renderHook(() => useCellClick({ item }), {
+      wrapper: actionExecutorWrapper,
+    });
+
+    await result.current();
+
+    await waitFor(() => {
+      expect(mockNavigator.push).toHaveBeenCalled();
+    });
+
+    cleanup();
+  });
 });