@applicaster/zapp-react-native-utils 16.0.0-rc.5 → 16.0.0-rc.50

package/arrayUtils/index.ts

@@ -3,17 +3,16 @@ import * as R from "ramda";
 import { invariant } from "@applicaster/zapp-react-native-utils/errorUtils";
 
 /**
- * shifts an array by the given offset. a negative offset will take items
- * from the end of the array and add them at the beginning, while a positive offset
- * will take an item at the beginning and shift it to the end
- * shiftArray(-1, [1,2,3,4]) => [4, 1, 2, 3]
- * shiftArray(1, [1,2,3,4]) => [2, 3, 4, 1]
- * an offset of 0 leaves the array unchanged
- * this function returns a new array and doesn't mutate the original one
- * curried function which can be invoked like offset => array => result
- * @param {Number} offset offset to shift the array
- * @param {Array<T>} array array to shift
- * @returns {Array<T>}
+ * Shifts an array by the given offset and returns a new array (does not mutate).
+ * A positive offset moves items from the head to the tail;
+ * a negative offset moves items from the tail to the head.
+ * An offset of `0` leaves the order unchanged.
+ *
+ * Curried (Ramda): `shiftArray(offset)(array)` or `shiftArray(offset, array)`.
+ *
+ * @example
+ * shiftArray(-1, [1, 2, 3, 4]) // => [4, 1, 2, 3]
+ * shiftArray(1, [1, 2, 3, 4])  // => [2, 3, 4, 1]
  */
 export const shiftArray = R.curry(
   <T extends unknown>(offset: number, array: T[]): T[] => {
@@ -25,10 +24,9 @@ export const shiftArray = R.curry(
 );
 
 /**
- * Tries to remove an item from an array, and returns the array if the item is not found
- * @param {any} item to remove
- * @param {Array<any>} list to remove the item from
- * @returns {Array<any>}
+ * Removes the first item equal to `item` from `list` (Ramda `equals` / deep equality).
+ * If the item is not found, returns the same list reference; otherwise returns a new
+ * array without that element.
  */
 export function removeItemFromList<T extends unknown>(item: T, list: T[]): T[] {
   return R.compose(
@@ -37,6 +35,12 @@ export function removeItemFromList<T extends unknown>(item: T, list: T[]): T[] {
   )(list);
 }
 
+/**
+ * Maps each value to a promise and resolves them all in parallel via `Promise.all`.
+ * The mapper receives `(value, index)`.
+ *
+ * Curried (Ramda): `mapPromises(fn)(values)` or `mapPromises(fn, values)`.
+ */
 export const mapPromises = R.curry(
   <T extends unknown, S extends unknown>(
     fn: (value: T, index?: number) => Promise<S>,
@@ -44,6 +48,10 @@ export const mapPromises = R.curry(
   ): Promise<S[]> => Promise.all(R.addIndex(R.map)(R.nAry(2, fn), values))
 );
 
+/**
+ * Awaits `previousPromise`, then runs `fn(currentValue, previousValue, index)`.
+ * Used internally by `reducePromises` as a Ramda-indexed reducer step.
+ */
 const waitForPromiseAndRun = R.curryN(
   3,
   async <T extends unknown, S extends unknown>(
@@ -58,6 +66,14 @@ const waitForPromiseAndRun = R.curryN(
   }
 );
 
+/**
+ * Reduces a list by applying an async function sequentially.
+ * Each step awaits the previous result, then calls `fn(current, previous, index)`.
+ * An empty list resolves to `initialValue` without calling `fn`.
+ *
+ * Curried (Ramda): `reducePromises(fn)(initialValue)(values)` or
+ * `reducePromises(fn, initialValue, values)`.
+ */
 export const reducePromises = R.curry(
   <T extends unknown, S extends unknown>(
     fn: (current: T, previous: S, index?: number) => Promise<S>,
@@ -71,18 +87,32 @@ export const reducePromises = R.curry(
     )
 );
 
+/**
+ * Returns a function that maps a list with `mapperFn`, then splits the result
+ * into chunks of size `chunks` (`R.splitEvery`).
+ *
+ * Curried (Ramda): `mapAndSplit(mapperFn, chunks)(values)`.
+ */
 export const mapAndSplit = R.curry(
   <T extends unknown, S extends unknown>(
-    mapperFn: (T) => S,
+    mapperFn: (value: T) => S,
     chunks: number
-  ): S[][] => R.compose(R.splitEvery(chunks), R.map(mapperFn))
+  ): ((values: T[]) => S[][]) =>
+    (values: T[]) =>
+      R.splitEvery(chunks, R.map(mapperFn, values))
 );
 
+/** Returns `true` when `index` is at or past the last position (`length - 1`). */
 export const isLast = (index: number, length: number): boolean =>
   index >= length - 1;
 
+/** Returns `true` when `index` is `0` or negative. */
 export const isFirst = (index: number): boolean => index <= 0;
 
+/**
+ * Returns `true` when `index` is a valid zero-based index for a list of the
+ * given `length`. Returns `false` for empty/negative lengths or negative indexes.
+ */
 export const isIndexInRange = (index: number, length: number): boolean => {
   if (length <= 0) return false;
   if (index < 0) return false;
@@ -90,24 +120,29 @@ export const isIndexInRange = (index: number, length: number): boolean => {
   return index + 1 <= length;
 };
 
+/** Builds `[0, 1, ..., size - 1]`. Negative or zero `size` yields `[]`. */
 export const makeListOfIndexes = (size: number): number[] =>
   Array.from({ length: size }, (_, index) => index);
 
+/** Builds an array of the given `size` filled with `value`. */
 export const makeListOf = <T>(value: T, size: number): T[] => {
   return Array(size).fill(value);
 };
 
-/** Checks if a value is a non-empty array */
+/** Checks if a value is a non-empty array. */
 export function isFilledArray(value: unknown): boolean {
   return Array.isArray(value) && value.length > 0;
 }
 
-/** Checks if a value is a empty array */
+/** Checks if a value is an empty array. */
 export function isEmptyArray(value: unknown): boolean {
   return Array.isArray(value) && value.length === 0;
 }
 
-// get random item from the list
+/**
+ * Returns a random item from a non-empty array.
+ * Throws (in development via `invariant`) if the input is not an array or is empty.
+ */
 export const sample = (xs: unknown[]): unknown => {
   invariant(Array.isArray(xs), `input value is not an array: ${xs}`);
   invariant(isFilledArray(xs), `input array is empty: ${xs}`);
@@ -117,7 +152,9 @@ export const sample = (xs: unknown[]): unknown => {
   return xs[index];
 };
 
+/** Returns `true` when `xs` is non-empty and every value is truthy. */
 export const allTruthy = (xs: boolean[]) =>
   isFilledArray(xs) && xs.every(Boolean);
 
+/** Returns `true` when at least one value in `xs` is truthy. */
 export const anyTruthy = (xs: boolean[]) => xs.some(Boolean);

package/bottomSheet/__tests__/scrollContext.test.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Text } from "react-native";
+import { render, screen } from "@testing-library/react-native";
+import { BottomSheetContext, useBottomSheet } from "../index";
+
+const Probe = () => {
+  const ctx = useBottomSheet();
+
+  return <Text testID="probe">{ctx ? "has-context" : "no-context"}</Text>;
+};
+
+describe("useBottomSheet", () => {
+  it("returns null when no provider is present", () => {
+    render(<Probe />);
+    expect(screen.getByTestId("probe")).toHaveTextContent("no-context");
+  });
+
+  it("returns the provided value inside a provider", () => {
+    const value = {
+      scrollRef: React.createRef<any>(),
+      masterDrawerRef: React.createRef<any>(),
+      setBodyDragEnabled: jest.fn(),
+      onDragGestureEvent: jest.fn(),
+      onDragStateChange: jest.fn(),
+    };
+
+    render(
+      <BottomSheetContext.Provider value={value}>
+        <Probe />
+      </BottomSheetContext.Provider>
+    );
+
+    expect(screen.getByTestId("probe")).toHaveTextContent("has-context");
+  });
+});

package/bottomSheet/index.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext, RefObject } from "react";
+
+export type BottomSheetContextValue = {
+  /** The sheet's master TapGestureHandler ref — the scrollable waits for it. */
+  masterDrawerRef: RefObject<any>;
+  /** Header drag-zone wiring: the sheet's pan gesture event handler. */
+  onDragGestureEvent: (...args: any[]) => void;
+  /** Header drag-zone wiring: the sheet's pan state-change handler. */
+  onDragStateChange: (event: { nativeEvent: any }) => void;
+};
+
+export const BottomSheetContext = createContext<BottomSheetContextValue | null>(
+  null
+);
+
+export const useBottomSheet = (): BottomSheetContextValue | null =>
+  useContext(BottomSheetContext);

package/cellUtils/index.ts

@@ -1,7 +1,7 @@
 import * as R from "ramda";
 import { dayjs } from "../dateUtils";
-import validateColor from "validate-color";
 
+import { isValidColor } from "@applicaster/zapp-react-native-utils/colorUtils";
 import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
 import {
   capitalize,
@@ -468,15 +468,13 @@ export const getColorFromData = ({
   data,
   valueFromLayout,
 }: GetColorFromData): string => {
-  // Temporary hack to fix color validation when alpha is floating point number
-  // https://github.com/dreamyguy/validate-color/issues/44
-  if (validateColor(valueFromLayout.replace(".00", ""))) {
+  if (isValidColor(valueFromLayout)) {
     return valueFromLayout;
   }
 
   const pathValue = R.path(valueFromLayout.split("."), data);
 
-  if (pathValue && validateColor(pathValue)) {
+  if (pathValue && isValidColor(pathValue)) {
     return pathValue;
   }
 

package/colorUtils/__tests__/isTransparentColor.test.ts

@@ -0,0 +1,76 @@
+import { isTransparentColor } from "..";
+
+describe("isTransparentColor", () => {
+  it("returns true for transparent keyword and rgba colors with zero alpha", () => {
+    const transparentColors = [
+      "transparent",
+      "rgba(0,0,0,0)",
+      "rgba(255, 255, 255, 0)",
+      "rgba(0,0,0,0.0)",
+      "rgba(0,0,0,0.00)",
+      "rgba(0,0,0, 0)",
+      "hsla(0,0%,0%,0)",
+    ];
+
+    expect.assertions(transparentColors.length);
+
+    transparentColors.forEach((color) => {
+      expect(isTransparentColor(color)).toBe(true);
+    });
+  });
+
+  it("returns false for valid colors that are not fully transparent", () => {
+    const nonTransparentColors = [
+      "red",
+      "#fff",
+      "#ffffff",
+      "rgb(0,0,0)",
+      "rgba(0,0,0)",
+      "rgba(0,0,0,0.5)",
+      "rgba(255, 255, 255, 0.3)",
+      "rgba(255, 255, 255, 1.0)",
+      "rgba(239,239,239,1.0)",
+      "currentColor",
+      "inherit",
+      "#00000000",
+      "#fff0",
+    ];
+
+    expect.assertions(nonTransparentColors.length);
+
+    nonTransparentColors.forEach((color) => {
+      expect(isTransparentColor(color)).toBe(false);
+    });
+  });
+
+  it("returns false for case variants of the transparent keyword", () => {
+    expect(isTransparentColor("Transparent")).toBe(false);
+    expect(isTransparentColor("TRANSPARENT")).toBe(false);
+  });
+
+  it("returns false for invalid color strings", () => {
+    const invalidColors = [
+      "invalid",
+      "",
+      "#gggggg",
+      "#fff.00",
+      "unset",
+      " rgba(0,0,0,0) ",
+      "transparent ",
+    ];
+
+    expect.assertions(invalidColors.length);
+
+    invalidColors.forEach((color) => {
+      expect(isTransparentColor(color)).toBe(false);
+    });
+  });
+
+  it("returns false for nullish and non-string values", () => {
+    expect(isTransparentColor(undefined)).toBe(false);
+    expect(isTransparentColor(null)).toBe(false);
+    expect(isTransparentColor(123)).toBe(false);
+    expect(isTransparentColor({})).toBe(false);
+    expect(isTransparentColor([])).toBe(false);
+  });
+});

package/colorUtils/__tests__/isValidColor.test.ts

@@ -0,0 +1,70 @@
+import { isValidColor } from "..";
+
+describe("isValidColor", () => {
+  it("returns true for valid hex colors", () => {
+    const validHexColors = ["#fff", "#ffffff", "#FF0000", "#000", "#abc123"];
+
+    expect.assertions(validHexColors.length);
+
+    validHexColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+
+  it("returns true for valid rgb and rgba colors", () => {
+    const validRgbColors = [
+      "rgb(255,0,0)",
+      "rgb(255, 0, 0)",
+      "rgba(255,0,0,0.5)",
+      "rgba(255, 0, 0, 0.5)",
+    ];
+
+    expect.assertions(validRgbColors.length);
+
+    validRgbColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+
+  it("returns true for valid named and special CSS colors", () => {
+    const validNamedColors = ["red", "transparent", "currentColor", "inherit"];
+
+    expect.assertions(validNamedColors.length);
+
+    validNamedColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+
+  it("returns true for valid hsl colors", () => {
+    expect(isValidColor("hsl(0, 100%, 50%)")).toBe(true);
+  });
+
+  it("returns false for invalid color strings", () => {
+    const invalidColors = [
+      "invalid",
+      "",
+      "#gggggg",
+      "#fff.00",
+      "unset",
+      undefined,
+      null,
+    ];
+
+    expect.assertions(invalidColors.length);
+
+    invalidColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(false);
+    });
+  });
+
+  it("returns true for valid rgb and rgba colors", () => {
+    const validRgbColors = ["rgba(239,239,239,1.0)"];
+
+    expect.assertions(validRgbColors.length);
+
+    validRgbColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+});

package/colorUtils/index.ts

@@ -0,0 +1,50 @@
+import validateColor from "validate-color";
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
+import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
+
+const normalizeRgbaAlpha = (color: string): string => {
+  return color.replace(
+    /^rgba\(([^)]+),\s*(\d+(?:\.\d+)?)\s*\)$/i,
+    (_, rgb, alpha) => {
+      const alphaValue = parseFloat(alpha);
+
+      if (!Number.isFinite(alphaValue) || !Number.isInteger(alphaValue)) {
+        return color;
+      }
+
+      return `rgba(${rgb},${alphaValue})`;
+    }
+  );
+};
+
+export const isValidColor = (color: string): boolean => {
+  if (isNil(color) || !isString(color)) {
+    return false;
+  }
+
+  if (validateColor(color)) {
+    return true;
+  }
+
+  // validate-color rejects integer alpha values written as floats (e.g. 1.0)
+  // https://github.com/dreamyguy/validate-color/issues/44
+  const normalizedColor = normalizeRgbaAlpha(color);
+
+  return normalizedColor !== color && validateColor(normalizedColor);
+};
+
+function isRgbaAlphaZero(color: string): boolean {
+  const layers = color
+    .replace("rgba(", "")
+    .replace(")", "")
+    .split(",")
+    .map((layer) => layer.trim());
+
+  return Number(layers[3]) === 0;
+}
+
+export const isTransparentColor = (color: string): boolean => {
+  return (
+    isValidColor(color) && (color === "transparent" || isRgbaAlphaZero(color))
+  );
+};

package/manifestUtils/_internals/index.js

@@ -157,6 +157,10 @@ function generateFieldsFromDefaultsWithoutPrefixedLabel(
 
         if (conditions) {
           generatedField.conditional_fields = conditions.map((condition) => {
+            if (condition.section === null) {
+              return { key: condition.key, condition_value: condition.value };
+            }
+
             const section = condition.section ? `${condition.section}/` : "";
 
             return {
@@ -164,6 +168,8 @@ function generateFieldsFromDefaultsWithoutPrefixedLabel(
               condition_value: condition.value,
             };
           });
+
+          generatedField.rules = "all_conditions";
         }
 
         return generatedField;

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/defaultManifestConfigurations/player.js

@@ -781,21 +781,6 @@ function getPlayerConfiguration({ platform, version }) {
       }
     );
 
-    if (
-      platform.includes("android") ||
-      platform.includes("amazon") ||
-      platform.includes("ios") ||
-      platform.includes("tvos")
-    ) {
-      general.fields.push({
-        key: "user_agent",
-        label: "User agent",
-        initial_value: "",
-        type: "text_input",
-        label_tooltip: "Override default user agent string",
-      });
-    }
-
     if (platform === "android_for_quickbrick") {
       general.fields.push({
         key: "stop_playback_on_task_removal",
@@ -2415,6 +2400,21 @@ function getPlayerConfiguration({ platform, version }) {
     );
   }
 
+  if (
+    platform.includes("android") ||
+    platform.includes("amazon") ||
+    platform.includes("ios") ||
+    platform.includes("tvos")
+  ) {
+    general.fields.push({
+      key: "user_agent",
+      label: "User agent",
+      initial_value: "",
+      type: "text_input",
+      label_tooltip: "Override default user agent string",
+    });
+  }
+
   compact([
     {
       key: "liveCatchUpEnabled",
@@ -3522,13 +3522,13 @@ function getPlayerConfiguration({ platform, version }) {
             label: "Advanced Player Styles",
             type: "text_input",
             multiline: true,
-            initial_value: `.vjs-text-track-cue { 
-            inset: unset !important;
-            top: 94% !important;
+            initial_value: `.vjs-text-track-cue {
+            top: auto !important;
             bottom: 0 !important;
             left: 0 !important;
-            right: 0 !important;
+            right: auto !important;
             width: 100% !important;
+            height: auto !important;
           }`,
             label_tooltip:
               "This field allows you to inject custom CSS styles to override default player styles. The styles will be injected into the document head and can be used to customize the appearance of the player. Leave empty to use only default styles.",

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 = {