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

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.3081324238",
+  "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.3081324238",
+    "@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/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/usePluginConfiguration.ts

@@ -1,4 +1,3 @@
-import * as R from "ramda";
 import { useMemo } from "react";
 
 import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
@@ -6,7 +5,8 @@ import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 // importing this way prevents typescript packages importing from this
 // file to go crazy reporting errors on JS
 import { populateConfigurationValues } from "@applicaster/zapp-react-native-utils/configurationUtils";
-import { useLocalizedStrings } from "../localizationUtils";
+import { getLocalizedStrings, useLocalizedStrings } from "../localizationUtils";
+import { isNil, pathOr } from "../utils";
 
 const populateFields = (
   data,
@@ -14,16 +14,72 @@ const populateFields = (
   pathToValues: string | string[] = "configuration",
   skipDefaults = false
 ) =>
-  R.compose(
-    (config) =>
-      populateConfigurationValues(manifestFields, config, skipDefaults),
-    R.pathOr({}, R.unless(Array.isArray, Array)(pathToValues))
-  )(data);
+  populateConfigurationValues(
+    manifestFields,
+    pathOr({}, pathToValues, data),
+    skipDefaults
+  );
 
 export function parsePluginConfiguration(plugin, manifest) {
   return populateFields(plugin, manifest.custom_configuration_fields);
 }
 
+const getDefaultLocalizations = (manifest) =>
+  manifest?.localizations?.fields?.reduce(
+    (defaults, { key, initial_value }) => ({
+      en: { ...defaults.en, [key]: initial_value },
+    }),
+    { en: {} }
+  ) || {};
+
+const isPlainObject = (value) =>
+  Object.prototype.toString.call(value) === "[object Object]";
+
+// Deep merge where configured values win, except nil ones (defaults fill the gaps)
+export const mergeLocalizations = (configured, defaults) => {
+  if (!isPlainObject(configured)) return { ...defaults };
+  if (!isPlainObject(defaults)) return { ...configured };
+
+  // Configured keys first, as R.mergeDeepWith: the first language is the fallback
+  return Object.keys({ ...configured, ...defaults }).reduce((merged, key) => {
+    const left = configured[key];
+    const right = defaults[key];
+
+    if (!(key in defaults)) {
+      merged[key] = left;
+    } else if (!(key in configured)) {
+      merged[key] = right;
+    } else if (isPlainObject(left) && isPlainObject(right)) {
+      merged[key] = mergeLocalizations(left, right);
+    } else {
+      merged[key] = isNil(left) ? right : left;
+    }
+
+    return merged;
+  }, {});
+};
+
+/**
+ * usePluginConfiguration outside React: the same result, read once instead of subscribed.
+ */
+export function getPluginConfiguration<T = any, S = Record<string, any>>(
+  plugin,
+  manifest?: any
+): { configurationFields: T; localizations: S } {
+  return {
+    configurationFields: populateFields(
+      plugin,
+      manifest?.custom_configuration_fields
+    ),
+    localizations: getLocalizedStrings(
+      mergeLocalizations(
+        plugin?.configuration?.localizations,
+        getDefaultLocalizations(manifest)
+      )
+    ),
+  };
+}
+
 export function usePluginConfiguration<T = any, S = Record<string, any>>(
   identifier: string,
   manifest?: any
@@ -31,7 +87,7 @@ export function usePluginConfiguration<T = any, S = Record<string, any>>(
   const plugins = usePlugins();
 
   const plugin = useMemo(
-    () => R.find(R.propEq("identifier", identifier), plugins),
+    () => plugins?.find((item) => item?.identifier === identifier),
     [plugins, identifier]
   );
 
@@ -40,29 +96,20 @@ export function usePluginConfiguration<T = any, S = Record<string, any>>(
     [plugin, manifest]
   );
 
-  const defaultLocalizations = useMemo(() => {
-    return (
-      manifest?.localizations?.fields?.reduce(
-        (defaults, { key, initial_value }) =>
-          R.assocPath(["en", key], initial_value, defaults),
-        { en: {} }
-      ) || {}
-    );
-  }, [manifest]);
-
-  const localizationsParams = useMemo(() => {
-    return {
-      localizations: R.mergeDeepWith(
-        (left, right) => {
-          if (R.isNil(left)) return right;
+  const defaultLocalizations = useMemo(
+    () => getDefaultLocalizations(manifest),
+    [manifest]
+  );
 
-          return left;
-        },
+  const localizationsParams = useMemo(
+    () => ({
+      localizations: mergeLocalizations(
         plugin?.configuration?.localizations,
         defaultLocalizations
       ),
-    };
-  }, [plugin?.configuration?.localizations, defaultLocalizations]);
+    }),
+    [plugin?.configuration?.localizations, defaultLocalizations]
+  );
 
   const localizations: S = useLocalizedStrings(localizationsParams);
 
@@ -105,29 +152,20 @@ export function useLayoutConfiguration<
     "localizations",
   ];
 
-  const defaultLocalizations = useMemo(() => {
-    return (
-      manifest?.localizations?.fields?.reduce(
-        (defaults, { key, initial_value }) =>
-          R.assocPath(["en", key], initial_value, defaults),
-        { en: {} }
-      ) || {}
-    );
-  }, [manifest]);
-
-  const localizationsParams = useMemo(() => {
-    return {
-      localizations: R.mergeDeepWith(
-        (left, right) => {
-          if (R.isNil(left)) return right;
+  const defaultLocalizations = useMemo(
+    () => getDefaultLocalizations(manifest),
+    [manifest]
+  );
 
-          return left;
-        },
+  const localizationsParams = useMemo(
+    () => ({
+      localizations: mergeLocalizations(
         layoutData?.localizations,
         defaultLocalizations
       ),
-    };
-  }, [layoutData?.localizations, defaultLocalizations]);
+    }),
+    [layoutData?.localizations, defaultLocalizations]
+  );
 
   // Always call useLocalizedStrings regardless of whether localizations is in the keys
   const localizations: L = useLocalizedStrings(localizationsParams);

package/riverComponetsMeasurementProvider/index.tsx

@@ -34,6 +34,7 @@ type Props = {
 type ItemProps = {
   children: React.ReactNode;
   index: number;
+  testID?: string;
 };
 
 type MeasurementContext = {
@@ -153,11 +154,12 @@ export const ScreenLoadingMeasurements = ({
 export const ScreenLoadingMeasurementsListItemWrapper = ({
   children,
   index,
+  testID,
 }: ItemProps) => {
   const { onLayout } = React.useContext(MeasurementsSettersContext);
 
   return (
-    <View style={styles.container} onLayout={onLayout?.(index)}>
+    <View style={styles.container} onLayout={onLayout?.(index)} testID={testID}>
       {children}
     </View>
   );