@applicaster/zapp-react-native-utils 16.0.0-alpha.2295427024 → 16.0.0-alpha.2480030155

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

@@ -631,6 +631,14 @@ const MOBILE_ACTION_BUTTON_FIELDS = [
     type: ZAPPIFEST_FIELDS.number_input,
     suffix: "margin left",
   },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "horizontal gutter",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "vertical gutter",
+  },
 ];
 
 const TV_MENU_LABEL_FIELDS = [

package/manifestUtils/mobileAction/button/index.js

@@ -129,6 +129,22 @@ function mobileActionButton({ label, description, defaults, isFirstButton }) {
       conditions.push(createConditionalField(labelEnabledKey, true));
     }
 
+    const assetAlignmentKey = keyPrefixGenerator("asset_alignment");
+
+    // horizontal_gutter fields depends on [asset_alignment: left or asset_alignment: right]
+    if (isKeyHasSuffix("horizontal_gutter", key)) {
+      conditions.push(
+        createConditionalField(assetAlignmentKey, ["left", "right"])
+      );
+    }
+
+    // vertical_gutter fields depends on [asset_alignment: above or asset_alignment: below]
+    if (isKeyHasSuffix("vertical_gutter", key)) {
+      conditions.push(
+        createConditionalField(assetAlignmentKey, ["above", "below"])
+      );
+    }
+
     return withConditional(conditions)(field);
   });
 

package/manifestUtils/mobileAction/container/index.js

@@ -49,7 +49,9 @@ function mobileActionButtonsContainer({ label, description, defaults }) {
 
     // over_image_position depends on [positionKey: over_image]
     if (isKeyHasSuffix("over_image_position", key)) {
-      conditions.push(createConditionalField(positionKey, "over_image"));
+      conditions.push(
+        createConditionalField(positionKey, defaults.position[0])
+      );
     }
 
     // horizontal_gutter depends on [stackingKey: horizontal]

package/manifestUtils/mobileAction/groups/defaults.js

@@ -33,7 +33,7 @@ const DEFAULT_MOBILE_ACTION_BUTTON_SHARED_DEFAULTS = {
   assetHeight: 24,
   assetWidth: 24,
   assetMarginTop: 0,
-  assetMarginRight: 6,
+  assetMarginRight: 0,
   assetMarginBottom: 0,
   assetMarginLeft: 0,
   labelEnabled: true,
@@ -50,6 +50,8 @@ const DEFAULT_MOBILE_ACTION_BUTTON_SHARED_DEFAULTS = {
   marginRight: 0,
   marginBottom: 0,
   marginLeft: 0,
+  horizontalGutter: 8,
+  verticalGutter: 8,
 };
 
 const DEFAULT_MOBILE_ACTION_BUTTON_PRESETS = {

package/numberUtils/__tests__/isMinusZero.test.ts

@@ -0,0 +1,20 @@
+import { isMinusZero } from "..";
+
+describe("isMinusZero", () => {
+  it("return true for minus zero", () => {
+    expect(isMinusZero(-0)).toBe(true);
+  });
+
+  it("return false for positive zero", () => {
+    expect(isMinusZero(0)).toBe(false);
+  });
+
+  it("return false for non-zero numbers", () => {
+    const inputs = [-1, 1, 100, 0.1, -0.1, Infinity, -Infinity];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      expect(isMinusZero(input)).toBe(false);
+    });
+  });
+});

package/numberUtils/__tests__/isZero.test.ts

@@ -0,0 +1,27 @@
+import { isZero } from "..";
+
+describe("isZero", () => {
+  it("return true for zero and minus zero", () => {
+    expect(isZero(0)).toBe(true);
+    expect(isZero(-0)).toBe(true);
+  });
+
+  it("return false for non-zero numbers", () => {
+    const inputs = [-1, 1, 100, 0.1, -0.1, Infinity, -Infinity, NaN];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      expect(isZero(input)).toBe(false);
+    });
+  });
+
+  it("return false for non-number values", () => {
+    const inputs = ["0", "-0", null, undefined, "", {}, [], false, true];
+
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      expect(isZero(input)).toBe(false);
+    });
+  });
+});

package/numberUtils/__tests__/requireNumber.test.ts

@@ -0,0 +1,50 @@
+import { requireNumber } from "..";
+
+describe("requireNumber", () => {
+  it("return number if object key holds a number", () => {
+    const inputs = [-1, 1, 100, 0.2];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = requireNumber({ value: input }, "value");
+      expect(output).toBe(input);
+    });
+  });
+
+  it("return number if object key holds a string as number", () => {
+    const inputs = ["-1", "1", "100", "0.2"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = requireNumber({ value: input }, "value");
+      expect(output).toBe(Number(input));
+    });
+  });
+
+  it("return null if object key holds zero", () => {
+    expect(requireNumber({ value: 0 }, "value")).toBeNull();
+    expect(requireNumber({ value: "0" }, "value")).toBeNull();
+  });
+
+  it("return null if object key is missing or not a number", () => {
+    const cases = [
+      [{}, "value"],
+      [{ value: null }, "value"],
+      [{ value: undefined }, "value"],
+      [{ value: NaN }, "value"],
+      [{ value: "" }, "value"],
+      [{ value: "vfdvf" }, "value"],
+      [{ value: {} }, "value"],
+      [{ value: [] }, "value"],
+      [null, "value"],
+      [undefined, "value"],
+    ] as const;
+
+    expect.assertions(cases.length);
+
+    cases.forEach(([obj, key]) => {
+      const output = requireNumber(obj, key);
+      expect(output).toBeNull();
+    });
+  });
+});

package/numberUtils/__tests__/toNumber.test.ts

@@ -21,6 +21,33 @@ describe("toNumber", () => {
     });
   });
 
+  it("return number if input is boxed string as number", () => {
+    const inputs = [
+      new String("-1"),
+      new String("0"),
+      new String("1"),
+      Object("100"),
+      Object("0.2"),
+    ];
+
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toNumber(input);
+      expect(output).toBe(Number(input));
+    });
+  });
+
+  it("return undefined if input is invalid boxed string", () => {
+    const inputs = [new String("vfdvf"), new String("5n"), Object("")];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toNumber(input);
+      expect(output).toBeUndefined();
+    });
+  });
+
   it("return undefined if input is not a number", () => {
     const inputs = [
       "vfdvf",

package/numberUtils/__tests__/toNumberWithDefault.test.ts

@@ -0,0 +1,64 @@
+import { toNumberWithDefault } from "..";
+
+describe("toNumberWithDefault", () => {
+  const DEFAULT = 5;
+
+  it("return number if input is number", () => {
+    const inputs = [-1, 0, 1, 100, 0.2];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(input);
+    });
+  });
+
+  it("return number if input is string as number", () => {
+    const inputs = ["-1", "0", "1", "100", "0.2"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(Number(input));
+    });
+  });
+
+  it("return default if input is not a number", () => {
+    const inputs = [
+      "vfdvf",
+      "5n",
+      "-5n",
+      null,
+      undefined,
+      NaN,
+      "",
+      {},
+      { test: 1 },
+      [],
+      [1],
+    ];
+
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  describe("BigInt support", () => {
+    const isBigIntSupported = typeof BigInt !== "undefined";
+
+    if (isBigIntSupported) {
+      it("converts BigInt to number when BigInt is supported", () => {
+        expect(toNumberWithDefault(DEFAULT, BigInt(5))).toBe(5);
+        expect(toNumberWithDefault(DEFAULT, BigInt(0))).toBe(0);
+        expect(toNumberWithDefault(DEFAULT, BigInt(-10))).toBe(-10);
+      });
+    } else {
+      it("skips BigInt tests when BigInt is not supported", () => {
+        expect(typeof BigInt).toBe("undefined");
+      });
+    }
+  });
+});

package/numberUtils/__tests__/toNumberWithDefaultZero.test.ts

@@ -0,0 +1,48 @@
+import { toNumberWithDefaultZero } from "..";
+
+const DEFAULT = 0;
+
+describe("toNumberWithDefaultZero", () => {
+  it("return number if input is number", () => {
+    const inputs = [-1, 0, 1, 100, 0.2];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toNumberWithDefaultZero(input);
+      expect(output).toBe(input);
+    });
+  });
+
+  it("return number if input is string as number", () => {
+    const inputs = ["-1", "0", "1", "100", "0.2"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toNumberWithDefaultZero(input);
+      expect(output).toBe(Number(input));
+    });
+  });
+
+  it("return zero if input is not a number", () => {
+    const inputs = [
+      "vfdvf",
+      "5n",
+      "-5n",
+      null,
+      undefined,
+      NaN,
+      "",
+      {},
+      { test: 1 },
+      [],
+      [1],
+    ];
+
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toNumberWithDefaultZero(input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+});

package/numberUtils/index.ts

@@ -1,18 +1,37 @@
-import * as R from "ramda";
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
+
 import { logger } from "@applicaster/zapp-react-native-utils/logger";
 
 const numberUtilsLogger = logger?.addSubsystem("NumberUtils");
 
+/** Matches Ramda isEmpty: "" / [] / {} are empty; numbers and bigints are not. */
+const isEmpty = (value: unknown): boolean => {
+  if (typeof value === "string" || Array.isArray(value)) {
+    return value.length === 0;
+  }
+
+  if (typeof value === "object" && value !== null) {
+    return Object.keys(value).length === 0;
+  }
+
+  return false;
+};
+
 export const toNumber = (value: unknown): number | undefined => {
-  if (R.isNil(value) || R.isEmpty(value)) {
+  if (isNil(value) || isEmpty(value)) {
     return undefined;
   }
 
   // Feature-detect BigInt support to avoid ReferenceError on older runtimes
   const isBigIntSupported = typeof BigInt !== "undefined";
-  const isBigIntValue = isBigIntSupported && R.is(BigInt, value);
-
-  if (R.is(Number, value) || isBigIntValue || R.is(String, value)) {
+  const isBigIntValue = isBigIntSupported && typeof value === "bigint";
+
+  if (
+    typeof value === "number" ||
+    isBigIntValue ||
+    typeof value === "string" ||
+    value instanceof String
+  ) {
     const numberOrNan = Number(value);
 
     return Number.isNaN(numberOrNan) ? undefined : numberOrNan;
@@ -59,7 +78,7 @@ export const toFiniteNumberWithDefault = (
 export const isLikeNumber = (value: unknown): boolean => {
   const possibleNumber = toNumber(value);
 
-  if (R.isNil(possibleNumber)) {
+  if (isNil(possibleNumber)) {
     return false;
   }
 
@@ -76,7 +95,7 @@ export const isMinusZero = (value: number) => {
 export const toPositiveNumber = (value: unknown): number | undefined => {
   const possibleNumber = toNumber(value);
 
-  if (R.isNil(possibleNumber)) {
+  if (isNil(possibleNumber)) {
     return undefined;
   }
 
@@ -97,7 +116,7 @@ export const toPositiveNumberWithDefault = (
 ): number => {
   const possibleNumber = toNumber(value);
 
-  if (R.isNil(possibleNumber)) {
+  if (isNil(possibleNumber)) {
     return defaultValue;
   }
 

package/package.json

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

package/reactHooks/actions/index.ts

@@ -1,8 +1,12 @@
 /// <reference types="@applicaster/applicaster-types" />
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { Context, useContext, useState } from "react";
+import { Context, useCallback, useContext, useEffect, useState } from "react";
 import { ActionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ActionsContext";
 
+import {
+  observeEntryState,
+  RegisteredActionValue,
+} from "../../uiActionsRegistrator";
 import { reactHooksLogger } from "../logger";
 
 const logger = reactHooksLogger.addSubsystem("actions");
@@ -46,3 +50,49 @@ export function useActions<T = unknown>(plugId: string): any {
 
   return context;
 }
+
+export type UseEntryActionState = {
+  state: CellActionEntryState | undefined;
+  invokeAction: (options?: InvokeArgsOptions) => void;
+};
+
+/**
+ * Subscribes a component to a single action's state for a given `entry`.
+ *
+ * It observes state changes reactively via `observeEntryState` (which is backed
+ * by the action's `addListener`), seeds the initial value synchronously from
+ * `initialEntryState`, and returns a memoized `invokeAction` that forwards
+ * optimistic `updateState` updates back into local state.
+ *
+ * This is the single, unified way to drive an action button - it works the same
+ * for registry actions, legacy context-provider actions and entry actions.
+ */
+export function useEntryActionState(
+  action: RegisteredActionValue | undefined,
+  entry: ZappEntry | ZappFeed
+): UseEntryActionState {
+  const [state, setState] = useState<CellActionEntryState | undefined>(() =>
+    action?.initialEntryState?.(entry)
+  );
+
+  const entryId = (entry as ZappEntry)?.id;
+
+  useEffect(() => {
+    if (!action) return undefined;
+
+    const subscription = observeEntryState(action, entry).subscribe(setState);
+
+    return () => subscription.unsubscribe();
+    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+  }, [action, entryId]);
+
+  const invokeAction = useCallback(
+    (options: InvokeArgsOptions = {}) => {
+      action?.invokeAction?.(entry, { updateState: setState, ...options });
+    },
+    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+    [action, entryId]
+  );
+
+  return { state, invokeAction };
+}

package/reactHooks/cell-click/index.ts

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as R from "ramda";
 import { handleActionSchemeUrl } from "@applicaster/quick-brick-core/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/useUrlSchemeHandler";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import {
   useNavigation,
   useProfilerLogging,
@@ -28,7 +29,6 @@ import { useScreenStateStore } from "../navigation/useScreenStateStore";
 type Props = {
   item?: ZappEntry;
   index?: number;
-  component?: ZappUIComponent;
   zappPipesData?: ZappPipesData;
 };
 
@@ -37,16 +37,16 @@ type onPressReturnFn =
   | (() => void);
 
 export const useCellClick = ({
-  component,
   zappPipesData,
   item,
-}: Props): onPressReturnFn => {
+}: Props = {}): onPressReturnFn => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
   const screenStateStore = useScreenStateStore();
 
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
+  const component = useUIComponentContext();
   const screenData = useCurrentScreenData();
   const screenState = useScreenContext()?.options;
   const entry = useScreenContext()?.entry;

package/reactHooks/feed/__tests__/useInflatedUrl.test.tsx

@@ -242,4 +242,29 @@ describe("useGetUrlInflater", () => {
     const url = result.current(source, mapping);
     expect(url).toBe("https://foo.com/shows/A123?q=user%20query");
   });
+
+  it("handles search queries with apostrophes without HTML entity escaping or URL truncation", () => {
+    const source =
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/mobile/search?q={{q}}";
+
+    const mapping = {
+      q: { source: "search", property: "q" },
+    };
+
+    const searchContext = getSearchContext("L'aventure", mapping);
+
+    const result = getInflatedDataSourceUrl({
+      source,
+      contexts: {
+        search: searchContext,
+      },
+      mapping,
+    });
+
+    expect(result).toBe(
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/mobile/search?q=L'aventure"
+    );
+
+    expect(result).not.toContain("'");
+  });
 });

package/reactHooks/layout/index.ts

@@ -49,7 +49,7 @@ export function useStatusBarHeight() {
   });
 }
 
-const getNavbarHeight = () => {
+export const getNavbarHeight = () => {
   return isTV() ? 60 : platformSelect({ ios: 44, android: 56 });
 };
 

package/reactHooks/navigation/__mocks__/index.ts

@@ -38,3 +38,7 @@ export const useNavigationPluginData = jest.fn().mockReturnValue(mockMenu);
 export const useIsNavBarVisible = jest.fn().mockReturnValue(true);
 
 export const useIsScreenActive = jest.fn().mockReturnValue(true);
+
+export const isScreenActiveForRoute = jest.fn(
+  (route, currentRoute) => route === currentRoute
+);