@applicaster/zapp-react-native-utils 16.0.0-alpha.9534912292 → 16.0.0-alpha.9739533780

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

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

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-alpha.9534912292",
+  "version": "16.0.0-alpha.9739533780",
   "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.9534912292",
+    "@applicaster/applicaster-types": "16.0.0-alpha.9739533780",
     "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/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
+);

package/reactHooks/navigation/__tests__/useIsScreenActive.test.ts

@@ -0,0 +1,42 @@
+import { isScreenActiveForRoute } from "../useIsScreenActive";
+
+describe("isScreenActiveForRoute", () => {
+  const route = "/river/home/river/tabs";
+  const currentRoute = "/river/home/river/tabs";
+
+  it("returns false when route does not match", () => {
+    expect(
+      isScreenActiveForRoute(route, "/river/home", { visible: false })
+    ).toBe(false);
+  });
+
+  it("keeps underlying screen active when video modal is docked", () => {
+    expect(
+      isScreenActiveForRoute(route, currentRoute, {
+        visible: true,
+        mode: "MINIMIZED",
+      })
+    ).toBe(true);
+  });
+
+  it.each(["FULLSCREEN", "MAXIMIZED", "PIP"])(
+    "deactivates underlying screen when video modal is visible",
+    (mode) => {
+      expect(
+        isScreenActiveForRoute(route, currentRoute, {
+          visible: true,
+          mode,
+        })
+      ).toBe(false);
+    }
+  );
+
+  it("keeps video-modal route active when video modal is open", () => {
+    expect(
+      isScreenActiveForRoute("video-modal/123", currentRoute, {
+        visible: true,
+        mode: "FULLSCREEN",
+      })
+    ).toBe(true);
+  });
+});

package/reactHooks/navigation/index.ts

@@ -32,7 +32,7 @@ export { useNavigationType } from "./useNavigationType";
 
 export { useGetBottomTabBarHeight } from "./useGetBottomTabBarHeight";
 
-export { useIsScreenActive } from "./useIsScreenActive";
+export { useIsScreenActive, isScreenActiveForRoute } from "./useIsScreenActive";
 
 export { useProfilerLogging } from "./useProfilerLogging";
 

package/reactHooks/navigation/useIsScreenActive.ts

@@ -2,20 +2,41 @@ import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtil
 import { useNavigation } from "./useNavigation";
 import { usePathname } from "./usePathname";
 
-// If current screen is active/focused (visible to the user)
-export const useIsScreenActive = () => {
-  const pathname = usePathname();
-  const { currentRoute, videoModalState } = useNavigation();
+type VideoModalState = {
+  visible?: boolean;
+  mode?: string;
+} | null;
 
-  if (videoModalState.visible) {
-    if (pathname.includes(ROUTE_TYPES.VIDEO_MODAL)) {
+/**
+ * Whether a navigation route should be treated as the active/focused screen.
+ * Docked (MINIMIZED) video modal does not deactivate the underlying screen —
+ * only FULLSCREEN / MAXIMIZED / PIP do.
+ */
+export function isScreenActiveForRoute(
+  route: string,
+  currentRoute: string,
+  videoModalState: VideoModalState
+) {
+  if (videoModalState?.visible) {
+    if (route.includes(ROUTE_TYPES.VIDEO_MODAL)) {
       return true;
     }
 
-    if (["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)) {
+    if (
+      ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode ?? "")
+    ) {
       return false;
     }
+    // MINIMIZED (docked): fall through — underlying screen stays active
   }
 
-  return pathname === currentRoute;
+  return route === currentRoute;
+}
+
+// If current screen is active/focused (visible to the user)
+export const useIsScreenActive = () => {
+  const pathname = usePathname();
+  const { currentRoute, videoModalState } = useNavigation();
+
+  return isScreenActiveForRoute(pathname, currentRoute, videoModalState);
 };

package/reactHooks/state/useComponentScreenState.ts

@@ -41,5 +41,5 @@ export const useComponentScreenState = <T = unknown>(
     [componentId, store]
   );
 
-  return [value, setValue] as const;
+  return [value, setValue];
 };

package/riverComponetsMeasurementProvider/index.tsx

@@ -156,5 +156,9 @@ export const ScreenLoadingMeasurementsListItemWrapper = ({
 }: ItemProps) => {
   const { onLayout } = React.useContext(MeasurementsSettersContext);
 
-  return <View onLayout={onLayout?.(index)}>{children}</View>;
+  return (
+    <View style={styles.container} onLayout={onLayout?.(index)}>
+      {children}
+    </View>
+  );
 };