@applicaster/zapp-react-native-utils 16.0.0-alpha.3234316524 → 16.0.0-alpha.3345515557

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -308,6 +308,41 @@ const generalContent = () => ({
         key: "pull_to_refresh_enabled",
         initial_value: false,
       },
+      {
+        type: "switch",
+        label: "Allow using this screen as a hook",
+        label_tooltip:
+          "Make sure that screen uses 'finishHook' action or performs navigation action to exit the screen after performing the hook action, or user will be stuck on the screen", // eslint-disable-line max-len
+        key: "available_as_hook",
+        initial_value: false,
+      },
+      {
+        type: "data_source_selector",
+        label: "Skip hook endpoint",
+        key: "skip_hook_endpoint",
+        label_tooltip:
+          "If set, this endpoint will check with the server whether the hook should be skipped",
+        conditional_fields: [
+          {
+            key: "rules/available_as_hook",
+            condition_value: true,
+          },
+        ],
+      },
+      {
+        key: "skip_hook_storage_key",
+        type: "text_input",
+        label: "Hook will be skipped if storage key is set",
+        initial_value: "",
+        label_tooltip:
+          "Comma-separated keys in namespace.key format (key without a dot uses the default namespace)", // eslint-disable-line max-len
+        conditional_fields: [
+          {
+            key: "rules/available_as_hook",
+            condition_value: true,
+          },
+        ],
+      },
     ],
   },
 });

package/manifestUtils/fieldUtils/__tests__/fieldUtils.test.js

@@ -1,9 +1,93 @@
 const {
+  parseShorthand,
+  margin,
+  padding,
   withConditional,
   getConditionalKey,
   createConditionalField,
 } = require("..");
 
+describe("parseShorthand", () => {
+  it("1 value → all four sides equal", () => {
+    expect(parseShorthand("8")).toEqual([8, 8, 8, 8]);
+  });
+
+  it("2 values → top/bottom, right/left", () => {
+    expect(parseShorthand("0 20")).toEqual([0, 20, 0, 20]);
+  });
+
+  it("3 values → top, right/left, bottom", () => {
+    expect(parseShorthand("0 0 20")).toEqual([0, 0, 20, 0]);
+  });
+
+  it("4 values → top right bottom left", () => {
+    expect(parseShorthand("1 2 3 4")).toEqual([1, 2, 3, 4]);
+  });
+
+  it("throws on invalid count", () => {
+    expect(() => parseShorthand("1 2 3 4 5")).toThrow();
+  });
+});
+
+describe("margin", () => {
+  it("returns 4 field descriptors with correct suffixes", () => {
+    const fields = margin("margin", { mobile: "0" });
+
+    expect(fields.map((f) => f.suffix)).toEqual([
+      "margin top",
+      "margin right",
+      "margin bottom",
+      "margin left",
+    ]);
+  });
+
+  it("sets type to number_input", () => {
+    margin("margin", { mobile: "0" }).forEach((f) => {
+      expect(f.type).toBe("number_input");
+    });
+  });
+
+  it("expands shorthand per platform", () => {
+    const fields = margin("margin", { mobile: "0 0 20", tv: "0 0 90" });
+    const byKey = Object.fromEntries(fields.map((f) => [f.suffix, f]));
+    expect(byKey["margin top"].initialValue).toEqual({ mobile: 0, tv: 0 });
+    expect(byKey["margin bottom"].initialValue).toEqual({ mobile: 20, tv: 90 });
+    expect(byKey["margin left"].initialValue).toEqual({ mobile: 0, tv: 0 });
+  });
+
+  it("supports a custom suffix prefix", () => {
+    const fields = margin("input margin", { mobile: "4" });
+    expect(fields[0].suffix).toBe("input margin top");
+  });
+});
+
+describe("padding", () => {
+  it("returns 4 field descriptors with correct suffixes", () => {
+    const fields = padding("padding", { mobile: "0" });
+
+    expect(fields.map((f) => f.suffix)).toEqual([
+      "padding top",
+      "padding right",
+      "padding bottom",
+      "padding left",
+    ]);
+  });
+
+  it("expands 2-value shorthand symmetrically", () => {
+    const fields = padding("padding", { mobile: "0 20", tv: "0 124" });
+    const byKey = Object.fromEntries(fields.map((f) => [f.suffix, f]));
+
+    expect(byKey["padding right"].initialValue).toEqual({
+      mobile: 20,
+      tv: 124,
+    });
+
+    expect(byKey["padding left"].initialValue).toEqual({ mobile: 20, tv: 124 });
+    expect(byKey["padding top"].initialValue).toEqual({ mobile: 0, tv: 0 });
+    expect(byKey["padding bottom"].initialValue).toEqual({ mobile: 0, tv: 0 });
+  });
+});
+
 describe("manifestUtils/fieldUtils", () => {
   it("appends conditions and adds all_conditions when there is more than one condition", () => {
     const config = {

package/manifestUtils/fieldUtils/index.js

@@ -1,3 +1,121 @@
+const { ZAPPIFEST_FIELDS } = require("../keys");
+const { toCamelCase } = require("../_internals");
+
+const SIDES = ["top", "right", "bottom", "left"];
+
+/**
+ * Parses a CSS margin/padding shorthand string into [top, right, bottom, left].
+ *
+ * 1 value  → all four sides
+ * 2 values → top/bottom, right/left
+ * 3 values → top, right/left, bottom
+ * 4 values → top, right, bottom, left
+ *
+ * @param {string} str
+ * @returns {[number, number, number, number]}
+ */
+function parseShorthand(str) {
+  const parts = String(str).trim().split(/\s+/).map(Number);
+
+  switch (parts.length) {
+    case 1:
+      return [parts[0], parts[0], parts[0], parts[0]];
+    case 2:
+      return [parts[0], parts[1], parts[0], parts[1]];
+    case 3:
+      return [parts[0], parts[1], parts[2], parts[1]];
+    case 4:
+      return parts;
+    default:
+      throw new Error(
+        `Shorthand expects 1–4 space-separated values, got ${parts.length}: "${str}"`
+      );
+  }
+}
+
+function spacingFields(prefix, initialValues) {
+  const platforms = Object.keys(initialValues);
+
+  const parsed = Object.fromEntries(
+    platforms.map((p) => [p, parseShorthand(initialValues[p])])
+  );
+
+  return SIDES.map((side, i) => ({
+    suffix: `${prefix} ${side}`,
+    type: ZAPPIFEST_FIELDS.number_input,
+    initialValue: Object.fromEntries(platforms.map((p) => [p, parsed[p][i]])),
+  }));
+}
+
+/**
+ * Generates four margin field descriptors (top/right/bottom/left) from a
+ * per-platform CSS shorthand string.
+ *
+ * @param {string} suffix - prefix word for generated field names, e.g. "margin"
+ * @param {Record<string, string>} initialValues - e.g. { mobile: "0 0 20", tv: "0 0 90" }
+ * @returns {object[]}
+ */
+function margin(suffix, initialValues) {
+  return spacingFields(suffix, initialValues);
+}
+
+/**
+ * Generates four padding field descriptors (top/right/bottom/left) from a
+ * per-platform CSS shorthand string.
+ *
+ * @param {string} suffix - prefix word for generated field names, e.g. "padding"
+ * @param {Record<string, string>} initialValues - e.g. { mobile: "0 20", tv: "0 124" }
+ * @returns {object[]}
+ */
+function padding(suffix, initialValues) {
+  return spacingFields(suffix, initialValues);
+}
+
+/**
+ * Returns a flat camelCase defaults object for a spacing shorthand.
+ * e.g. marginDefaults("margin", "0 0 20") → { marginTop: 0, marginRight: 0, marginBottom: 20, marginLeft: 0 }
+ *
+ * @param {string} suffix - e.g. "margin" or "padding"
+ * @param {string} shorthand - CSS-like shorthand string
+ * @returns {Record<string, number>}
+ */
+function spacingDefaults(suffix, shorthand) {
+  const values = parseShorthand(shorthand);
+
+  return Object.fromEntries(
+    SIDES.map((side, i) => [toCamelCase(`${suffix} ${side}`), values[i]])
+  );
+}
+
+function marginDefaults(suffix, shorthand) {
+  return spacingDefaults(suffix, shorthand);
+}
+
+function paddingDefaults(suffix, shorthand) {
+  return spacingDefaults(suffix, shorthand);
+}
+
+/**
+ * Returns four field descriptors (top/right/bottom/left) with only suffix and type — no initialValue.
+ * Used when defaults are stored separately in the subgroup spec.
+ *
+ * @param {string} prefix - e.g. "margin" or "padding"
+ * @returns {object[]}
+ */
+function marginFields(prefix) {
+  return SIDES.map((side) => ({
+    suffix: `${prefix} ${side}`,
+    type: ZAPPIFEST_FIELDS.number_input,
+  }));
+}
+
+function paddingFields(prefix) {
+  return SIDES.map((side) => ({
+    suffix: `${prefix} ${side}`,
+    type: ZAPPIFEST_FIELDS.number_input,
+  }));
+}
+
 /**
  * Appends new conditional_fields from conditions array
  * to config.conditional_fields
@@ -48,6 +166,13 @@ function createConditionalField(key, condition_value, category = "styles") {
 }
 
 module.exports = {
+  parseShorthand,
+  margin,
+  padding,
+  marginDefaults,
+  paddingDefaults,
+  marginFields,
+  paddingFields,
   withConditional,
   getConditionalKey,
   createConditionalField,

package/manifestUtils/keys.js

@@ -43,6 +43,7 @@ const TV_PLATFORMS = [
   "tvos_for_quickbrick",
   "samsung_tv",
   "lg_tv",
+  "vidaa",
   "vizio",
 ];
 

package/manifestUtils/platformIsTV.js

@@ -4,6 +4,7 @@ function platformIsTV(platform) {
     "android_tv_for_quickbrick",
     "amazon_fire_tv_for_quickbrick",
     "lg_tv",
+    "vidaa",
     "samsung_tv",
     "web",
     "vizio",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-alpha.3234316524",
+  "version": "16.0.0-alpha.3345515557",
   "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.3234316524",
+    "@applicaster/applicaster-types": "16.0.0-alpha.3345515557",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/pipesUtils/__tests__/buildUrlWithQuery.test.ts

@@ -0,0 +1,33 @@
+import { buildUrlWithQuery } from "../withPipesEndpoint";
+
+describe("buildUrlWithQuery", () => {
+  it("returns the url unchanged when requestParams is null", () => {
+    expect(buildUrlWithQuery("https://foo.com/path", null)).toBe(
+      "https://foo.com/path"
+    );
+  });
+
+  it("returns the url unchanged when requestParams has no params", () => {
+    expect(buildUrlWithQuery("https://foo.com/path", { headers: {} })).toBe(
+      "https://foo.com/path"
+    );
+  });
+
+  it("returns the url unchanged when url is empty", () => {
+    expect(buildUrlWithQuery("", { params: { a: "1" } })).toBe("");
+  });
+
+  it("appends params to a url with no existing query", () => {
+    expect(
+      buildUrlWithQuery("https://foo.com/path", { params: { token: "abc" } })
+    ).toBe("https://foo.com/path?token=abc");
+  });
+
+  it("merges params with an existing query string", () => {
+    expect(
+      buildUrlWithQuery("https://foo.com/path?existing=1", {
+        params: { token: "abc" },
+      })
+    ).toBe("https://foo.com/path?existing=1&token=abc");
+  });
+});

package/pipesUtils/__tests__/withPipesEndpoint.test.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { render } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+const mockedUseBuildPipesUrl = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/feed", () => ({
+  useBuildPipesUrl: (args) => mockedUseBuildPipesUrl(args),
+}));
+
+const { withPipesEndpoint } = require("../withPipesEndpoint");
+
+// eslint-disable-next-line react/display-name
+const Wrapped = React.forwardRef((props: any, _ref) => (
+  <Text testID="wrapped">{`${props.uri}|${JSON.stringify(props.headers)}`}</Text>
+));
+
+describe("withPipesEndpoint", () => {
+  afterEach(() => jest.clearAllMocks());
+
+  it("renders nothing while the endpoint context is resolving", () => {
+    mockedUseBuildPipesUrl.mockReturnValue({ requestParams: null });
+
+    const Decorated = withPipesEndpoint(Wrapped);
+    const { queryByTestId } = render(<Decorated uri="https://foo.com" />);
+
+    expect(queryByTestId("wrapped")).toBeNull();
+  });
+
+  it("passes the uri through unchanged when there are no params", () => {
+    mockedUseBuildPipesUrl.mockReturnValue({ requestParams: {} });
+
+    const Decorated = withPipesEndpoint(Wrapped);
+    const { getByTestId } = render(<Decorated uri="https://foo.com/path" />);
+
+    expect(getByTestId("wrapped").props.children).toBe(
+      "https://foo.com/path|{}"
+    );
+  });
+
+  it("merges resolved params into the uri and forwards headers", () => {
+    mockedUseBuildPipesUrl.mockReturnValue({
+      requestParams: {
+        params: { token: "abc" },
+        headers: { Authorization: "Bearer xyz" },
+      },
+    });
+
+    const Decorated = withPipesEndpoint(Wrapped);
+    const { getByTestId } = render(<Decorated uri="https://foo.com/path" />);
+
+    expect(getByTestId("wrapped").props.children).toBe(
+      'https://foo.com/path?token=abc|{"Authorization":"Bearer xyz"}'
+    );
+  });
+});

package/pipesUtils/index.ts

@@ -0,0 +1 @@
+export { withPipesEndpoint, buildUrlWithQuery } from "./withPipesEndpoint";

package/pipesUtils/withPipesEndpoint.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef, RefObject } from "react";
+import URL from "url";
+
+import { useBuildPipesUrl } from "@applicaster/zapp-react-native-utils/reactHooks/feed";
+
+/**
+ * Merges the query params resolved from a pipes endpoint context into the url.
+ * Returns the url unchanged when there is nothing to merge.
+ */
+export function buildUrlWithQuery(url: string, requestParams): string {
+  if (!url || !requestParams?.params) {
+    return url;
+  }
+
+  const parsedURL = URL.parse(url, true);
+
+  parsedURL.query = { ...parsedURL.query, ...requestParams.params };
+  parsedURL.search = null;
+
+  return URL.format(parsedURL);
+}
+
+type Props = {
+  uri: string;
+} & Record<string, unknown>;
+
+/**
+ * HOC that resolves the wrapped component's `uri` against its matching Zapp
+ * Pipes endpoint. Endpoint context keys are added as query params (merged into
+ * the uri) and as request `headers`. Rendering is deferred until the context
+ * has been resolved so the component never loads without its required headers.
+ */
+export function withPipesEndpoint(Component) {
+  function WithPipesEndpoint(props: Props, ref: RefObject<unknown>) {
+    const { requestParams } = useBuildPipesUrl({ url: props.uri });
+
+    if (requestParams !== null) {
+      const urlWithQuery = buildUrlWithQuery(props.uri, requestParams);
+
+      return (
+        <Component
+          ref={ref}
+          {...props}
+          uri={urlWithQuery}
+          headers={requestParams.headers || {}}
+        />
+      );
+    }
+
+    return null;
+  }
+
+  return forwardRef(WithPipesEndpoint);
+}

package/reactHooks/cell-click/index.ts

@@ -49,12 +49,13 @@ export const useCellClick = ({
   const actionExecutor = React.useContext(ActionExecutorContext);
   const screenData = useCurrentScreenData();
   const screenState = useScreenContext()?.options;
+  const entry = useScreenContext()?.entry;
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
   );
 
-  const [entryContext, setEntryContext] =
+  const [_entryContext, setEntryContext] =
     ZappPipesEntryContext.useZappPipesContext(pathname);
 
   const logTimestamp = useProfilerLogging();
@@ -89,7 +90,8 @@ export const useCellClick = ({
           screenState,
           screenRoute: pathname,
           screenStateStore,
-          entryContext,
+          entryContext: selectedItem,
+          screenEntry: entry,
         });
       }
 
@@ -117,14 +119,20 @@ export const useCellClick = ({
       }
     },
     [
-      onCellTap,
-      currentRoute,
+      item,
       setEntryContext,
-      pathname,
-      push,
       sendAnalyticsOnPress,
+      logTimestamp,
+      pathname,
+      component,
+      onCellTap,
+      entry,
+      actionExecutor,
       screenData,
       screenState,
+      screenStateStore,
+      currentRoute,
+      push,
     ]
   );
 
@@ -138,5 +146,5 @@ export const useCellClick = ({
     onPressRef.current = onPress;
   }
 
-  return React.useCallback(onPressRef.current, []);
+  return React.useCallback(onPressRef.current, [item]);
 };

package/reactHooks/feed/__mocks__/useMarkPipesDataStale.ts

@@ -0,0 +1,4 @@
+export const useMarkPipesDataStale = jest.fn();
+
+/** @deprecated alias of useMarkPipesDataStale */
+export const usePipesCacheReset = useMarkPipesDataStale;

package/reactHooks/feed/index.ts

@@ -6,7 +6,11 @@ export { useEntryScreenId } from "./useEntryScreenId";
 
 export { useBuildPipesUrl } from "./useBuildPipesUrl";
 
-export { usePipesCacheReset } from "./usePipesCacheReset";
+export {
+  useMarkPipesDataStale,
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  usePipesCacheReset,
+} from "./useMarkPipesDataStale";
 
 export { useBatchLoading } from "./useBatchLoading";
 

package/reactHooks/feed/useBatchLoading.ts

@@ -159,9 +159,17 @@ export const useBatchLoading = (
     options.riverId,
   ]);
 
+  // Initial preload only. Batch loading warms the first batch of component
+  // feeds and signals readiness; the feed set is frozen at mount on purpose.
+  // Per-component loads and reloads (including stale revalidation) are owned by
+  // useFeedLoader in ZappPipesDataConnector. Re-running on `feeds`/input changes
+  // would re-fire on every store update and cause redundant dispatch storms, so
+  // this intentionally runs once on mount.
+  /* eslint-disable @wogns3623/better-exhaustive-deps/exhaustive-deps */
   React.useEffect(() => {
     runBatchLoading();
-  }, [runBatchLoading]); // Adding runBatchLoading as a dependency to ensure that it reloads feeds when clearPipesData is called
+  }, []);
+  /* eslint-enable @wogns3623/better-exhaustive-deps/exhaustive-deps */
 
   React.useEffect(() => {
     // check if all feeds are ready and set hasEverBeenReady to true

package/reactHooks/feed/useInflatedUrl.ts

@@ -78,12 +78,12 @@ export const getInflatedDataSourceUrl: GetInflatedDataSourceUrl = ({
 
   if (!isNilOrEmpty(mapping)) {
     if (!source) {
-      if (__DEV__) {
-        // eslint-disable-next-line no-console
-        throw new Error(
-          "getInflatedDataSourceUrl: source is empty while mapping is provided"
-        );
-      }
+      // if (__DEV__) {
+      //   // eslint-disable-next-line no-console
+      //   throw new Error(
+      //     "getInflatedDataSourceUrl: source is empty while mapping is provided"
+      //   );
+      // }
 
       return null;
     }

package/reactHooks/feed/{usePipesCacheReset.ts → useMarkPipesDataStale.ts}

@@ -2,17 +2,19 @@ import React from "react";
 
 import { getDatasourceUrl } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/getDatasourceUrl";
 import { usePipesContexts } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/usePipesContexts";
-import { clearPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+import { markPipesDataStale } from "@applicaster/zapp-react-native-redux/ZappPipes";
 
 import { useRoute } from "../navigation";
 import { useAppDispatch } from "@applicaster/zapp-react-native-redux";
 
 /**
- * reset river components cache when screen is unmounted
+ * Mark a river's `clear_cache_on_reload` feeds as stale when the screen is
+ * unmounted. The cached data is kept (so a screen sharing the same feed does
+ * not lose it mid-mount) and revalidated on next access.
  * @param {string} riverId screen id
  * @param {Array} riverComponents list of UI components
  */
-export const usePipesCacheReset = (riverId, riverComponents) => {
+export const useMarkPipesDataStale = (riverId, riverComponents) => {
   const dispatch = useAppDispatch();
   const { screenData, pathname } = useRoute();
   const pipesContexts = usePipesContexts(riverId, pathname);
@@ -35,10 +37,16 @@ export const usePipesCacheReset = (riverId, riverComponents) => {
           );
 
           if (url) {
-            dispatch(clearPipesData(url, { riverId }));
+            dispatch(markPipesDataStale(url, { riverId }));
           }
         }
       });
     };
   }, []);
 };
+
+/**
+ * @deprecated Renamed to `useMarkPipesDataStale`. Kept as an alias for backward
+ * compatibility with external consumers.
+ */
+export const usePipesCacheReset = useMarkPipesDataStale;

package/reactHooks/utils/index.ts

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 /**
  * This hook returns a previous value that was passed to it.
@@ -40,6 +40,7 @@ export const shouldDispatchData = (
 ) => {
   const currentFeedHasData = feed?.data;
   const isLocalFeed = checkIsLocalFeed(url);
+  const isFeedStale = feed?.stale;
 
-  return !currentFeedHasData || clearCache || isLocalFeed;
+  return !currentFeedHasData || clearCache || isFeedStale || isLocalFeed;
 };

package/riverComponetsMeasurementProvider/index.tsx

@@ -1,10 +1,20 @@
 import * as React from "react";
-import { NativeModules, StyleSheet, View } from "react-native";
+import { NativeModules, View, StyleSheet } from "react-native";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 
-import { isApplePlatform, isWeb } from "../reactUtils";
+import { isApplePlatform, isWeb, isTV } from "../reactUtils";
 import { useRivers } from "../reactHooks";
 
+const isTVPlatform = isTV();
+
+const styles = StyleSheet.create({
+  container: isTVPlatform
+    ? {
+        flex: 1,
+      }
+    : {},
+});
+
 const layoutReducer = (state, { payload }) => {
   return state.map((item, index, _state) => ({
     height: index === payload.index ? payload.height : item.height,
@@ -30,12 +40,6 @@ type MeasurementContext = {
   onLayout: (index: number) => (event) => void;
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
 const { Logger } = getXray();
 
 const logger = new Logger("general", "ui");

package/reactHooks/feed/__mocks__/usePipesCacheReset.ts

@@ -1 +0,0 @@
-export const usePipesCacheReset = jest.fn();