@applicaster/zapp-react-native-ui-components 15.0.0-rc.45 → 15.0.0-rc.47

package/Components/Cell/TvOSCellComponent.tsx

@@ -40,6 +40,7 @@ type Props = {
     component_type: string;
     styles?: {
       component_margin_top?: number;
+      component_padding_top?: number;
     };
   };
   selected: boolean;
@@ -205,19 +206,25 @@ class TvOSCell extends React.Component<Props, State> {
     ) {
       const { headerOffset } = getHeaderOffset();
 
-      const extraAnchorPointYOffset =
-        screenLayout?.extraAnchorPointYOffset || 0;
+      const extraAnchorPointYOffset = toNumberWithDefaultZero(
+        screenLayout?.extraAnchorPointYOffset
+      );
 
       const componentMarginTop = toNumberWithDefaultZero(
         component?.styles?.component_margin_top
       );
 
+      const componentPaddingTop = toNumberWithDefaultZero(
+        component?.styles?.component_padding_top
+      );
+
       const totalOffset =
         headerOffset +
-        (componentAnchorPointY || 0) +
+        toNumberWithDefaultZero(componentAnchorPointY) +
         extraAnchorPointYOffset -
-        (componentsMapOffset || 0) +
-        componentMarginTop;
+        toNumberWithDefaultZero(componentsMapOffset) +
+        componentMarginTop +
+        componentPaddingTop;
 
       mainOffsetUpdater?.(
         { tag: this.target },

package/Components/MasterCell/utils/__tests__/resolveColor.test.js

@@ -32,14 +32,16 @@ describe("resolveColor", () => {
       color: "invalid_path",
     };
 
-    expect(resolveColor(entry, style)).toEqual(style);
+    expect(resolveColor(entry, style)).toEqual({
+      color: undefined,
+    });
 
     expect(loggerSpy).toHaveBeenCalledWith(
       expect.objectContaining({
         message: "Cannot resolve property invalid_path from the entry.",
         data: {
+          colorFromProp: "invalid_path",
           configurationValue: "invalid_path",
-          entry,
         },
       })
     );
@@ -102,7 +104,9 @@ describe("resolveColor", () => {
       color: "not.exist.path",
     };
 
-    expect(resolveColor(entry, style)).toEqual(style);
+    expect(resolveColor(entry, style)).toEqual({
+      color: undefined,
+    });
   });
 
   it("not modify style with empty path", () => {
@@ -112,4 +116,79 @@ describe("resolveColor", () => {
 
     expect(resolveColor(entry, style)).toEqual(style);
   });
+
+  describe("memoization", () => {
+    beforeEach(() => {
+      // Clear memoization cache before each test
+      resolveColor.clear && resolveColor.clear();
+    });
+
+    it("hits cache with same entry and style references", () => {
+      const style = { color: "extensions.color" };
+
+      const result1 = resolveColor(entry, style);
+      const result2 = resolveColor(entry, style);
+
+      expect(result1).toBe(result2); // Same object reference
+    });
+
+    it("hits cache with new references but equal entry/style values", () => {
+      const entryClone = {
+        extensions: {
+          color: "red",
+          green_color: "green",
+        },
+      };
+
+      const style = { color: "extensions.color" };
+      const styleClone = { color: "extensions.color" };
+
+      const result1 = resolveColor(entry, style);
+      const result2 = resolveColor(entryClone, styleClone);
+
+      expect(result1).toBe(result2);
+    });
+
+    it("misses cache when entry is new object", () => {
+      const entry2 = { extensions: { color: "blue" } }; // Same values, different object
+      const style = { color: "extensions.color" };
+
+      const result1 = resolveColor(entry, style);
+      const result2 = resolveColor(entry2, style);
+
+      expect(result1).not.toBe(result2); // Different object references
+    });
+
+    it("misses cache when entry property changes", () => {
+      const myEntry = {
+        extensions: {
+          color: "red",
+          green_color: "green",
+        },
+      };
+
+      const style = { color: "extensions.color" };
+
+      const result1 = resolveColor(myEntry, style);
+
+      myEntry.extensions.color = "blue"; // Change property
+      const result2 = resolveColor(myEntry, style);
+
+      expect(result1).toEqual({ color: "red" });
+      expect(result2).toEqual({ color: "blue" });
+      expect(result1).not.toBe(result2);
+    });
+
+    it("misses cache when style changes", () => {
+      const style1 = { color: "extensions.color" };
+      const style2 = { backgroundColor: "extensions.color" };
+
+      const result1 = resolveColor(entry, style1);
+      const result2 = resolveColor(entry, style2);
+
+      expect(result1).toEqual({ color: "red" });
+      expect(result2).toEqual({ backgroundColor: "red" });
+      expect(result1).not.toBe(result2);
+    });
+  });
 });

package/Components/MasterCell/utils/index.ts

@@ -7,9 +7,12 @@ import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/acti
 import { masterCellLogger } from "../logger";
 import { getCellState } from "../../Cell/utils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { get } from "@applicaster/zapp-react-native-utils/utils";
 import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+import memoizee from "memoizee";
+import stringify from "fast-json-stable-stringify";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -24,21 +27,21 @@ const hasElementSpecificViewType = (viewType) => (element) => {
   return hasElementsSpecificViewType(viewType)(element.elements);
 };
 
-const logWarning = R.curry(
-  (colorValueFromCellStyle, style, entry, colorValueFromEntry) => {
-    if (R.isNil(colorValueFromEntry)) {
-      masterCellLogger.warn({
-        message: `Cannot resolve property ${colorValueFromCellStyle} from the entry.`,
-        data: {
-          configurationValue: colorValueFromCellStyle,
-          entry,
-        },
-      });
-    }
-
-    return style;
+const logWarning = (
+  colorValueFromCellStyle,
+  colorFromProp,
+  colorValueFromEntry
+) => {
+  if (R.isNil(colorValueFromEntry)) {
+    masterCellLogger.warn({
+      message: `Cannot resolve property ${colorValueFromCellStyle} from the entry.`,
+      data: {
+        configurationValue: colorValueFromCellStyle,
+        colorFromProp,
+      },
+    });
   }
-);
+};
 
 export const hasElementsSpecificViewType = (viewType) => (elements) => {
   if (R.isNil(elements) || R.isEmpty(elements)) {
@@ -48,14 +51,22 @@ export const hasElementsSpecificViewType = (viewType) => (elements) => {
   return R.any(hasElementSpecificViewType(viewType))(elements);
 };
 
-function resolveColorForProp(entry, style, colorProp) {
-  const colorFromProp = style[colorProp];
-  const nestedEntryValue = R.path(colorFromProp.split("."), entry);
+function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
+  if (!colorFromProp) {
+    return undefined;
+  }
+
+  const nestedEntryValue: string | undefined = get(
+    entry,
+    colorFromProp.split(".")
+  );
 
   const color = colorFromProp.replace(".00", "").replace(".0", ""); // https://github.com/dreamyguy/validate-color/issues/44
 
   if (nestedEntryValue === undefined && !validateColor(color)) {
-    logWarning(colorFromProp, style, entry, nestedEntryValue);
+    logWarning(colorFromProp, colorFromProp, nestedEntryValue);
+
+    return undefined;
   }
 
   const colorValue = getColorFromData({
@@ -64,27 +75,46 @@ function resolveColorForProp(entry, style, colorProp) {
   });
 
   if (!colorValue) {
-    logWarning(colorProp, style, entry, colorValue);
+    logWarning(colorFromProp, colorFromProp, nestedEntryValue);
 
-    return style;
+    return undefined;
   }
 
-  return { ...style, [colorProp]: colorValue };
+  return colorValue;
 }
 
-export function resolveColor(entry, style) {
-  if (style === null || style === undefined) {
-    return style;
-  }
-
-  // TODO can be optimized to remove 3 O(n) loops
+const getColorKeys = memoizee((style) => {
   const styleKeys = Object.keys(style);
   const colorKeys = styleKeys.filter((key) => /color/i.test(key));
 
-  return colorKeys.reduce((acc, value) => {
-    return { ...style, ...resolveColorForProp(entry, acc, value) };
-  }, style);
-}
+  return colorKeys;
+});
+
+export const resolveColor = memoizee(
+  (entry, style) => {
+    if (style === null || style === undefined) {
+      return style;
+    }
+
+    return getColorKeys(style).reduce(
+      (acc, value) => {
+        if (acc[value] && typeof acc[value] === "string") {
+          const colorStyle = resolveColorForProp(entry, acc[value]);
+
+          acc[value] = colorStyle;
+        }
+
+        return acc;
+      },
+      { ...style }
+    );
+  },
+  {
+    normalizer: (args) => {
+      return [stringify(args[0]), stringify(args[1])].join("|");
+    },
+  }
+);
 
 export function isVideoPreviewEnabled({
   enable_video_preview = false,

package/Components/MeasurmentsPortal/MeasurementsPortal.tsx

@@ -1,8 +1,12 @@
-/* eslint react/prop-types: off */
-
-import React from "react";
+import React, {
+  memo,
+  PropsWithChildren,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { View, StyleSheet } from "react-native";
-import * as R from "ramda";
 import { v4 } from "uuid";
 
 type Props = {
@@ -46,93 +50,104 @@ type MeasurementPortalContextType = {
 const MeasurementPortalContext =
   React.createContext<null | MeasurementPortalContextType>(null);
 
-const MeasurementsPortalContextProvider = ({ children }) => {
-  const Component = React.useRef(View);
-  const [measuringInProgress, setMeasuringInProgress] = React.useState(false);
-
-  const measureComponentCallback = React.useRef(null);
-  const componentProps = React.useRef(null);
-  const onLoadFinishedIsCalled = React.useRef(null);
-
-  const setComponent = (comp) => {
-    Component.current = comp;
-  };
-
-  const setMeasureComponentCallback = (cb) => {
-    measureComponentCallback.current = cb;
-  };
-
-  const finalize = ({ width, height }) => {
-    measureComponentCallback?.current?.({
-      width,
-      height,
-      index: componentProps.current.index,
-    });
-
-    setMeasureComponentCallback(null);
-    setMeasuringInProgress(false);
-    onLoadFinishedIsCalled.current = false;
-  };
-
-  const setComponentProps = (props) => {
-    const handleOnLoadFinish = (...args) => {
-      const error = R.path([0, "error"], args);
-
-      if (isError(error)) {
-        finalize({ width: 0, height: 0 });
-      } else {
-        onLoadFinishedIsCalled.current = true;
-        props.onLoadFinished(...args);
-      }
-    };
-
-    componentProps.current = {
-      ...props,
-      onLoadFinished: handleOnLoadFinish,
-    };
-  };
-
-  const measureComponent = React.useCallback(async (comp, props) => {
-    return new Promise((resolve) => {
-      setMeasureComponentCallback(resolve);
-      setMeasuringInProgress(true);
-
-      setComponentProps(props);
-      setComponent(comp);
-    });
-  }, []);
-
-  const onLayout = ({
-    nativeEvent: {
-      layout: { width, height },
-    },
-  }) => {
-    if (measureComponentCallback.current && onLoadFinishedIsCalled.current) {
-      finalize({
+const MeasurementsPortalContextProvider = memo(
+  ({ children }: PropsWithChildren) => {
+    const Component = useRef(View);
+    const [measuringInProgress, setMeasuringInProgress] = useState(false);
+
+    const measureComponentCallback = useRef(null);
+    const componentProps = useRef(null);
+    const onLoadFinishedIsCalled = useRef(null);
+
+    const setComponent = useCallback((comp) => {
+      Component.current = comp;
+    }, []);
+
+    const setMeasureComponentCallback = useCallback((cb) => {
+      measureComponentCallback.current = cb;
+    }, []);
+
+    const finalize = useCallback(({ width, height }) => {
+      measureComponentCallback?.current?.({
         width,
         height,
+        index: componentProps.current.index,
       });
-    }
-  };
 
-  return (
-    <>
-      <MeasurementsPortal
-        Component={Component.current}
-        componentProps={componentProps.current}
-        onLayout={onLayout}
-      />
-      <MeasurementPortalContext.Provider
-        value={{
-          measureComponent,
-          measuringInProgress,
-        }}
-      >
-        {children}
-      </MeasurementPortalContext.Provider>
-    </>
-  );
-};
+      setMeasureComponentCallback(null);
+      setMeasuringInProgress(false);
+      onLoadFinishedIsCalled.current = false;
+    }, []);
+
+    const setComponentProps = useCallback((props) => {
+      const handleOnLoadFinish = (...args) => {
+        const error = args[0]?.error;
+
+        if (isError(error)) {
+          finalize({ width: 0, height: 0 });
+        } else {
+          onLoadFinishedIsCalled.current = true;
+          props.onLoadFinished(...args);
+        }
+      };
+
+      componentProps.current = {
+        ...props,
+        onLoadFinished: handleOnLoadFinish,
+      };
+    }, []);
+
+    const measureComponent = useCallback(async (comp, props) => {
+      return new Promise((resolve) => {
+        setMeasureComponentCallback(resolve);
+        setMeasuringInProgress(true);
+
+        setComponentProps(props);
+        setComponent(comp);
+      });
+    }, []);
+
+    const onLayout = useCallback(
+      ({
+        nativeEvent: {
+          layout: { width, height },
+        },
+      }) => {
+        if (
+          measureComponentCallback.current &&
+          onLoadFinishedIsCalled.current
+        ) {
+          finalize({
+            width,
+            height,
+          });
+        }
+      },
+      []
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        measureComponent,
+        measuringInProgress,
+      }),
+      [measuringInProgress]
+    );
+
+    return (
+      <>
+        <MeasurementsPortal
+          Component={Component.current}
+          componentProps={componentProps.current}
+          onLayout={onLayout}
+        />
+        <MeasurementPortalContext.Provider value={contextValue}>
+          {children}
+        </MeasurementPortalContext.Provider>
+      </>
+    );
+  }
+);
 
 export {
   MeasurementsPortal,

package/Components/MeasurmentsPortal/__tests__/MeasurementsPortal.test.tsx

@@ -0,0 +1,355 @@
+import React, { useContext } from "react";
+import { View, Text } from "react-native";
+import { render, fireEvent, waitFor, act } from "@testing-library/react-native";
+
+import {
+  MeasurementsPortal,
+  MeasurementsPortalContextProvider,
+  MeasurementPortalContext,
+} from "../MeasurementsPortal";
+
+// Mock uuid
+jest.mock("uuid", () => ({
+  v4: jest.fn(() => "mock-uuid-key"),
+}));
+
+describe("MeasurementsPortal", () => {
+  const mockOnLayout = jest.fn();
+  const MockComponent = jest.fn(() => <View testID="mock-component" />);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders with correct testID", () => {
+    const { getByTestId } = render(
+      <MeasurementsPortal Component={MockComponent} onLayout={mockOnLayout} />
+    );
+
+    expect(getByTestId("MeasurementsPortal")).toBeTruthy();
+  });
+
+  it("renders the passed Component", () => {
+    const { getByTestId } = render(
+      <MeasurementsPortal Component={MockComponent} onLayout={mockOnLayout} />
+    );
+
+    expect(getByTestId("mock-component")).toBeTruthy();
+    expect(MockComponent).toHaveBeenCalled();
+  });
+
+  it("passes componentProps to the Component", () => {
+    const componentProps = {
+      testProp: "test-value",
+      anotherProp: 123,
+    };
+
+    render(
+      <MeasurementsPortal
+        Component={MockComponent}
+        onLayout={mockOnLayout}
+        componentProps={componentProps}
+      />
+    );
+
+    expect(MockComponent).toHaveBeenCalledWith(componentProps, {});
+  });
+
+  it("calls onLayout when layout changes", () => {
+    const { getByTestId } = render(
+      <MeasurementsPortal Component={MockComponent} onLayout={mockOnLayout} />
+    );
+
+    const container = getByTestId("MeasurementsPortal");
+    const wrapper = container.children[0] as any;
+
+    const layoutEvent = {
+      nativeEvent: {
+        layout: { width: 100, height: 200 },
+      },
+    };
+
+    fireEvent(wrapper, "layout", layoutEvent);
+
+    expect(mockOnLayout).toHaveBeenCalledWith(layoutEvent);
+  });
+
+  it("applies correct container styles", () => {
+    const { getByTestId } = render(
+      <MeasurementsPortal Component={MockComponent} onLayout={mockOnLayout} />
+    );
+
+    const container = getByTestId("MeasurementsPortal");
+
+    expect(container.props.style).toEqual({
+      position: "absolute",
+      opacity: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    });
+  });
+
+  it("renders wrapper with onLayout", () => {
+    const { getByTestId } = render(
+      <MeasurementsPortal Component={MockComponent} onLayout={mockOnLayout} />
+    );
+
+    const container = getByTestId("MeasurementsPortal");
+    const wrapper = container.children[0] as any;
+
+    expect(wrapper.props.onLayout).toBe(mockOnLayout);
+  });
+
+  it("works with different Component types", () => {
+    const CustomComponent = ({ title }: { title: string }) => (
+      <Text testID="custom-text">{title}</Text>
+    );
+
+    const props = { title: "Test Title" };
+
+    const { getByTestId, getByText } = render(
+      <MeasurementsPortal
+        Component={CustomComponent}
+        onLayout={mockOnLayout}
+        componentProps={props}
+      />
+    );
+
+    expect(getByTestId("custom-text")).toBeTruthy();
+    expect(getByText("Test Title")).toBeTruthy();
+  });
+
+  it("handles component without componentProps", () => {
+    render(
+      <MeasurementsPortal Component={MockComponent} onLayout={mockOnLayout} />
+    );
+
+    expect(MockComponent).toHaveBeenCalledWith({}, {});
+  });
+});
+
+describe("MeasurementsPortalContextProvider", () => {
+  const TestConsumer = () => {
+    const context = useContext(MeasurementPortalContext);
+
+    return (
+      <View testID="test-consumer">
+        <Text testID="measuring-status">
+          {context?.measuringInProgress ? "measuring" : "idle"}
+        </Text>
+      </View>
+    );
+  };
+
+  it("provides context to children", () => {
+    const { getByTestId } = render(
+      <MeasurementsPortalContextProvider>
+        <TestConsumer />
+      </MeasurementsPortalContextProvider>
+    );
+
+    expect(getByTestId("test-consumer")).toBeTruthy();
+    expect(getByTestId("measuring-status")).toBeTruthy();
+  });
+
+  it("initially sets measuringInProgress to false", () => {
+    const { getByText } = render(
+      <MeasurementsPortalContextProvider>
+        <TestConsumer />
+      </MeasurementsPortalContextProvider>
+    );
+
+    expect(getByText("idle")).toBeTruthy();
+  });
+
+  it("renders MeasurementsPortal with default View component", () => {
+    const { getByTestId } = render(
+      <MeasurementsPortalContextProvider>
+        <View />
+      </MeasurementsPortalContextProvider>
+    );
+
+    expect(getByTestId("MeasurementsPortal")).toBeTruthy();
+  });
+
+  describe("measureComponent function", () => {
+    const TestMeasureComponent = () => {
+      const context = useContext(MeasurementPortalContext);
+      const [result, setResult] = React.useState<any>(null);
+
+      const handleMeasure = async () => {
+        if (context?.measureComponent) {
+          const measurement = await context.measureComponent(View, {
+            index: 0,
+            onLoadFinished: () => {},
+          });
+
+          setResult(measurement);
+        }
+      };
+
+      return (
+        <View testID="measure-component">
+          <Text testID="measuring-status">
+            {context?.measuringInProgress ? "measuring" : "idle"}
+          </Text>
+          <Text testID="measure-button" onPress={handleMeasure}>
+            Measure
+          </Text>
+          {result ? (
+            <Text testID="result">
+              {result.width}x{result.height}
+            </Text>
+          ) : null}
+        </View>
+      );
+    };
+
+    it("sets measuringInProgress to true when measureComponent is called", async () => {
+      const { getByTestId, getByText } = render(
+        <MeasurementsPortalContextProvider>
+          <TestMeasureComponent />
+        </MeasurementsPortalContextProvider>
+      );
+
+      expect(getByText("idle")).toBeTruthy();
+
+      await act(async () => {
+        fireEvent.press(getByTestId("measure-button"));
+      });
+
+      expect(getByText("measuring")).toBeTruthy();
+    });
+
+    it("can measure a component through the context", async () => {
+      const TestMeasureComponent = () => {
+        const context = useContext(MeasurementPortalContext);
+        const [measured, setMeasured] = React.useState(false);
+
+        React.useEffect(() => {
+          if (context?.measureComponent) {
+            context
+              .measureComponent(View, {
+                index: 5,
+                onLoadFinished: () => {},
+              })
+              .then(() => {
+                setMeasured(true);
+              });
+          }
+        }, [context]);
+
+        return (
+          <View testID="measure-component">
+            <Text testID="measure-status">
+              {measured ? "measured" : "not-measured"}
+            </Text>
+          </View>
+        );
+      };
+
+      const { getByText } = render(
+        <MeasurementsPortalContextProvider>
+          <TestMeasureComponent />
+        </MeasurementsPortalContextProvider>
+      );
+
+      // Initially should be not measured
+      expect(getByText("not-measured")).toBeTruthy();
+    });
+
+    it("handles error in onLoadFinished", async () => {
+      const ErrorComponent = ({ onLoadFinished }: any) => {
+        React.useEffect(() => {
+          // Simulate error
+          setTimeout(
+            () => onLoadFinished({ error: new Error("Test error") }),
+            10
+          );
+        }, [onLoadFinished]);
+
+        return <View testID="error-component" />;
+      };
+
+      const TestErrorFlow = () => {
+        const context = useContext(MeasurementPortalContext);
+        const [result, setResult] = React.useState<any>(null);
+
+        const handleMeasure = React.useCallback(async () => {
+          if (context?.measureComponent) {
+            const measurement = await context.measureComponent(ErrorComponent, {
+              index: 1,
+              onLoadFinished: () => {},
+            });
+
+            setResult(measurement);
+          }
+        }, [context]);
+
+        React.useEffect(() => {
+          handleMeasure();
+        }, [handleMeasure]);
+
+        return (
+          <View testID="error-flow">
+            {result ? (
+              <Text testID="error-result">
+                {result.width}x{result.height}
+              </Text>
+            ) : null}
+          </View>
+        );
+      };
+
+      const { queryByText } = render(
+        <MeasurementsPortalContextProvider>
+          <TestErrorFlow />
+        </MeasurementsPortalContextProvider>
+      );
+
+      // Wait for error handling
+      await waitFor(() => {
+        expect(queryByText("0x0")).toBeTruthy();
+      });
+    });
+  });
+});
+
+describe("MeasurementPortalContext", () => {
+  it("returns null when used outside of provider", () => {
+    const TestComponent = () => {
+      const context = useContext(MeasurementPortalContext);
+
+      return (
+        <Text testID="context-value">
+          {context ? "has-context" : "no-context"}
+        </Text>
+      );
+    };
+
+    const { getByText } = render(<TestComponent />);
+    expect(getByText("no-context")).toBeTruthy();
+  });
+
+  it("returns context value when used inside provider", () => {
+    const TestComponent = () => {
+      const context = useContext(MeasurementPortalContext);
+
+      return (
+        <Text testID="context-value">
+          {context ? "has-context" : "no-context"}
+        </Text>
+      );
+    };
+
+    const { getByText } = render(
+      <MeasurementsPortalContextProvider>
+        <TestComponent />
+      </MeasurementsPortalContextProvider>
+    );
+
+    expect(getByText("has-context")).toBeTruthy();
+  });
+});

package/Helpers/DataSourceHelper/__tests__/itemLimitForData.test.ts

@@ -0,0 +1,80 @@
+import { itemLimitForData } from "..";
+
+describe("itemLimitForData (no mocks)", () => {
+  test("returns full array when item_limit is undefined (default Infinity)", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: undefined },
+    });
+
+    expect(result).toEqual([1, 2, 3]);
+  });
+
+  test("enforces positive numeric item_limit", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3, 4], {
+      rules: { item_limit: 2 },
+    });
+
+    expect(result).toEqual([1, 2]);
+  });
+
+  test("returns empty array when entry is empty", () => {
+    const result = itemLimitForData([], {
+      rules: { item_limit: 3 },
+    });
+
+    expect(result).toEqual([]);
+  });
+
+  test("defaults entry to empty array when it is undefined", () => {
+    const result = itemLimitForData(undefined, {
+      rules: { item_limit: 5 },
+    });
+
+    expect(result).toEqual([]);
+  });
+
+  test("handles missing component", () => {
+    // @ts-ignore
+    const result = itemLimitForData([10, 20, 30], undefined);
+    // missing component → item_limit = undefined → fallback to Infinity
+    expect(result).toEqual([10, 20, 30]);
+  });
+
+  test("handles missing rules object", () => {
+    // @ts-ignore
+    const result = itemLimitForData([10, 20, 30], {});
+
+    expect(result).toEqual([10, 20, 30]);
+  });
+
+  test("non-positive item_limit should fall back to Infinity", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: -10 },
+    });
+
+    // -10 → invalid → fallback to Infinity → no limit
+    expect(result).toEqual([1, 2, 3]);
+  });
+
+  test("zero item_limit should fall back to Infinity", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: 0 },
+    });
+
+    // 0 → invalid → fallback to Infinity
+    expect(result).toEqual([1, 2, 3]);
+  });
+
+  test("NaN item_limit should fall back to Infinity", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: NaN },
+    });
+
+    expect(result).toEqual([1, 2, 3]);
+  });
+});

package/Helpers/DataSourceHelper/index.ts

@@ -0,0 +1,10 @@
+import { toPositiveNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+export function itemLimitForData(entry, component) {
+  const itemLimit = toPositiveNumberWithDefault(
+    Infinity,
+    component?.rules?.item_limit
+  );
+
+  return (entry || []).slice(0, itemLimit);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-rc.45",
+  "version": "15.0.0-rc.47",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-rc.45",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.45",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.45",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.45",
+    "@applicaster/applicaster-types": "15.0.0-rc.47",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.47",
+    "@applicaster/zapp-react-native-redux": "15.0.0-rc.47",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.47",
+    "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"

package/Helpers/DataSourceHelper/index.js

@@ -1,19 +0,0 @@
-import * as R from "ramda";
-
-export function itemLimitForData(entry = [], component) {
-  const itemLimitValue = Number(R.path(["rules", "item_limit"], component));
-
-  const itemLimit =
-    itemLimitValue && itemLimitValue > 0
-      ? itemLimitValue
-      : Number.MAX_SAFE_INTEGER;
-
-  const isInRange = (min, max) => R.both(R.gte(R.__, min), R.lt(R.__, max));
-
-  const entryShouldBeSliced = (entry) =>
-    isInRange(0, R.length(entry))(itemLimit);
-
-  const sliceEntriesUpToItemLimit = R.slice(0, itemLimit);
-
-  return R.when(entryShouldBeSliced, sliceEntriesUpToItemLimit)(entry);
-}