@applicaster/zapp-react-native-ui-components 16.0.0-rc.3 → 16.0.0-rc.30

package/Components/MasterCell/index.tsx

@@ -2,7 +2,10 @@ import * as R from "ramda";
 import * as React from "react";
 import { v4 as uuid } from "uuid";
 
+import { isHorizontalList } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { isVideoPreviewEnabled } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/utils";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useScreenState } from "@applicaster/zapp-react-native-utils/screenState";
 import { defaultComponents } from "./DefaultComponents";
 import { defaultDataAdapter } from "./dataAdapter";
@@ -34,8 +37,8 @@ type MasterCellBuilderOptions = {
   containerStyle: any;
   cellOptions?: {
     isRTL?: boolean;
-    generateId?: () => string;
     skipButtons?: boolean;
+    component?: ZappComponent;
   };
 };
 
@@ -46,7 +49,7 @@ export function masterCellBuilder({
   containerStyle = defaultContainerStyle,
   cellOptions = {},
 }: MasterCellBuilderOptions) {
-  const { generateId = uuid, skipButtons = false } = cellOptions;
+  const { skipButtons = false, component } = cellOptions;
 
   const componentsMap = R.merge(defaultComponents, components);
   const { View } = componentsMap;
@@ -65,6 +68,7 @@ export function masterCellBuilder({
    */
   function MasterCell({ item, state, ...otherProps }: Props) {
     const { screenData } = useRoute();
+    const theme = useTheme();
 
     const screenId =
       screenData && "targetScreen" in screenData
@@ -85,14 +89,35 @@ export function masterCellBuilder({
         elementsBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
+          allowDynamicColorsOutsideExtensions:
+            theme?.allow_dynamic_colors_outside_extensions,
         }),
-      [state, item, entryIsSelected] // Assuming that item won't mutate
+      [
+        state,
+        item,
+        entryIsSelected,
+        theme?.allow_dynamic_colors_outside_extensions,
+      ] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);
 
-    const cellUUID = React.useMemo<string>(generateId, [
-      generateId,
+    const cellUUID = React.useMemo<string>(() => {
+      const isLiveImage = isVideoPreviewEnabled({
+        enable_video_preview: component?.rules?.enable_video_preview,
+        player_screen_id: component?.rules?.player_screen_id,
+      });
+
+      const isHL = isHorizontalList(component);
+
+      return isHL && isLiveImage
+        ? `${component?.id}-${component?.styles?.cell_plugin_configuration_id}`
+        : uuid();
+    }, [
+      component?.id,
+      component?.styles?.cell_plugin_configuration_id,
+      component?.rules?.enable_video_preview,
+      component?.rules?.player_screen_id,
       screenId,
       item?.id,
     ]);

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

@@ -1,194 +1,231 @@
 import { resolveColor } from "..";
-import { masterCellLogger } from "../../logger";
-
-const loggerSpy = jest
-  .spyOn(masterCellLogger, "warn")
-  .mockImplementation(() => {});
 
 describe("resolveColor", () => {
   const entry = {
     extensions: {
       color: "red",
       green_color: "green",
+      float_alpha_color: "rgba(239,239,239,1.0)",
+      invalid_color: "not_a_color",
     },
+    background_color: "#123456",
   };
 
-  beforeEach(() => {
-    loggerSpy.mockClear();
-  });
-
-  it("resolve color with path", () => {
-    const style = {
-      color: "extensions.color",
-    };
+  describe("default behavior (resolves extensions paths via pathOr, passes through literals)", () => {
+    it("resolves color from extensions data mapping path", () => {
+      const style = {
+        color: "extensions.color",
+      };
 
-    expect(resolveColor(entry, style)).toEqual({
-      color: entry.extensions.color,
+      expect(resolveColor(entry, style)).toEqual({
+        color: entry.extensions.color,
+      });
     });
-  });
 
-  it("logs a warning when path is undefined", () => {
-    const style = {
-      color: "invalid_path",
-    };
+    it("passes through non-extensions values as raw color strings", () => {
+      const style = {
+        color: "invalid_path",
+      };
 
-    expect(resolveColor(entry, style)).toEqual({
-      color: undefined,
+      expect(resolveColor(entry, style)).toEqual({
+        color: "invalid_path",
+      });
     });
 
-    expect(loggerSpy).toHaveBeenCalledWith(
-      expect.objectContaining({
-        message: "Cannot resolve property invalid_path from the entry.",
-        data: {
-          colorFromProp: "invalid_path",
-          configurationValue: "invalid_path",
-        },
-      })
-    );
-  });
-
-  it("resolves any style prop with containing color", () => {
-    const style = {
-      backgroundColor: "extensions.color",
-      width: "100%",
-      borderColor: "extensions.green_color",
-    };
+    it("passes through entry path keys outside extensions prefix as raw color strings", () => {
+      const style = {
+        color: "background_color",
+      };
 
-    expect(resolveColor(entry, style)).toEqual({
-      backgroundColor: "red",
-      borderColor: "green",
-      width: "100%",
+      expect(resolveColor(entry, style)).toEqual({
+        color: "background_color",
+      });
     });
-  });
 
-  it("not replace color with in hex format", () => {
-    const style = {
-      color: "#000000",
-    };
+    it("resolves all color-related style props from extensions paths", () => {
+      const style = {
+        backgroundColor: "extensions.color",
+        width: "100%",
+        borderColor: "extensions.green_color",
+      };
 
-    expect(resolveColor(entry, style)).toEqual(style);
-  });
+      expect(resolveColor(entry, style)).toEqual({
+        backgroundColor: "red",
+        borderColor: "green",
+        width: "100%",
+      });
+    });
 
-  it("not replace color with in rgda format", () => {
-    const style = {
-      color: "rgba(0,0,0,0)",
-    };
+    it("passes through literal hex color values unchanged", () => {
+      const style = {
+        color: "#000000",
+      };
 
-    expect(resolveColor(entry, style)).toEqual(style);
-  });
+      expect(resolveColor(entry, style)).toEqual(style);
+    });
 
-  it("doesn't replace transparent as a color", () => {
-    const style = {
-      color: "transparent",
-    };
+    it("passes through literal rgba color values unchanged", () => {
+      const style = {
+        color: "rgba(0,0,0,0)",
+      };
 
-    expect(resolveColor(entry, style)).toEqual(style);
-  });
+      expect(resolveColor(entry, style)).toEqual(style);
+    });
 
-  it("return nil if style is nil", () => {
-    const style = undefined;
+    it("passes through literal rgba values with float alpha unchanged", () => {
+      const style = {
+        color: "rgba(239,239,239,1.0)",
+      };
 
-    expect(resolveColor(entry, style)).toBeUndefined();
-  });
+      expect(resolveColor(entry, style)).toEqual(style);
+    });
+
+    it("passes through transparent as a literal color value", () => {
+      const style = {
+        color: "transparent",
+      };
 
-  it("not modify style without color prop", () => {
-    const style = {
-      test: 1,
-    };
+      expect(resolveColor(entry, style)).toEqual(style);
+    });
 
-    expect(resolveColor(entry, style)).toEqual(style);
-  });
+    it("passes through named color values as literal colors", () => {
+      const style = {
+        color: "black",
+      };
 
-  it("not modify style with not existing path", () => {
-    const style = {
-      color: "not.exist.path",
-    };
+      expect(resolveColor(entry, style)).toEqual(style);
+    });
 
-    expect(resolveColor(entry, style)).toEqual({
-      color: undefined,
+    it("returns style unchanged when style is undefined", () => {
+      expect(resolveColor(entry, undefined)).toBeUndefined();
     });
-  });
 
-  it("not modify style with empty path", () => {
-    const style = {
-      color: "",
-    };
+    it("returns style unchanged when style is null", () => {
+      expect(resolveColor(entry, null)).toBeNull();
+    });
 
-    expect(resolveColor(entry, style)).toEqual(style);
-  });
+    it("returns style unchanged when it has no color-related props", () => {
+      const style = {
+        test: 1,
+      };
 
-  describe("memoization", () => {
-    beforeEach(() => {
-      // Clear memoization cache before each test
-      resolveColor.clear && resolveColor.clear();
+      expect(resolveColor(entry, style)).toEqual(style);
     });
 
-    it("hits cache with same entry and style references", () => {
-      const style = { color: "extensions.color" };
+    it("returns null when extensions path is missing from entry", () => {
+      const style = {
+        color: "extensions.missing.path",
+      };
 
-      const result1 = resolveColor(entry, style);
-      const result2 = resolveColor(entry, style);
+      expect(resolveColor(entry, style)).toEqual({
+        color: null,
+      });
+    });
+
+    it("returns resolved extensions path value without validating color", () => {
+      const style = {
+        color: "extensions.invalid_color",
+      };
 
-      expect(result1).toBe(result2); // Same object reference
+      expect(resolveColor(entry, style)).toEqual({
+        color: "not_a_color",
+      });
     });
 
-    it("hits cache with new references but equal entry/style values", () => {
-      const entryClone = {
-        extensions: {
-          color: "red",
-          green_color: "green",
-        },
+    it("passes through empty string color values unchanged", () => {
+      const style = {
+        color: "",
       };
 
-      const style = { color: "extensions.color" };
-      const styleClone = { color: "extensions.color" };
+      expect(resolveColor(entry, style)).toEqual({
+        color: "",
+      });
+    });
 
-      const result1 = resolveColor(entry, style);
-      const result2 = resolveColor(entryClone, styleClone);
+    it("resolves rgba color values with float alpha from extensions path", () => {
+      const style = {
+        color: "extensions.float_alpha_color",
+      };
 
-      expect(result1).toBe(result2);
+      expect(resolveColor(entry, style)).toEqual({
+        color: "rgba(239,239,239,1.0)",
+      });
     });
+  });
 
-    it("misses cache when entry is new object", () => {
-      const entry2 = { extensions: { color: "blue" } }; // Same values, different object
-      const style = { color: "extensions.color" };
+  describe("when allowDynamicColorsOutsideExtensions is enabled (resolves via resolveColorForProp with validation)", () => {
+    it("resolves entry paths outside the extensions prefix", () => {
+      const style = {
+        color: "background_color",
+      };
+
+      expect(resolveColor(entry, style, true)).toEqual({
+        color: "#123456",
+      });
+    });
 
-      const result1 = resolveColor(entry, style);
-      const result2 = resolveColor(entry2, style);
+    it("resolves extensions paths through resolveColorForProp", () => {
+      const style = {
+        color: "extensions.color",
+      };
 
-      expect(result1).not.toBe(result2); // Different object references
+      expect(resolveColor(entry, style, true)).toEqual({
+        color: "red",
+      });
     });
 
-    it("misses cache when entry property changes", () => {
-      const myEntry = {
-        extensions: {
-          color: "red",
-          green_color: "green",
-        },
+    it("returns null for invalid entry paths that cannot be resolved", () => {
+      const style = {
+        color: "invalid_path",
       };
 
-      const style = { color: "extensions.color" };
+      expect(resolveColor(entry, style, true)).toEqual({
+        color: null,
+      });
+    });
 
-      const result1 = resolveColor(myEntry, style);
+    it("returns null when extensions path cannot be resolved to a valid color", () => {
+      const style = {
+        color: "extensions.missing.path",
+      };
 
-      myEntry.extensions.color = "blue"; // Change property
-      const result2 = resolveColor(myEntry, style);
+      expect(resolveColor(entry, style, true)).toEqual({
+        color: null,
+      });
+    });
 
-      expect(result1).toEqual({ color: "red" });
-      expect(result2).toEqual({ color: "blue" });
-      expect(result1).not.toBe(result2);
+    it("passes through literal color values unchanged", () => {
+      const style = {
+        color: "#000000",
+        backgroundColor: "rgba(239,239,239,1.0)",
+        borderColor: "transparent",
+      };
+
+      expect(resolveColor(entry, style, true)).toEqual(style);
     });
 
-    it("misses cache when style changes", () => {
-      const style1 = { color: "extensions.color" };
-      const style2 = { backgroundColor: "extensions.color" };
+    it("passes through empty string color values unchanged", () => {
+      const style = {
+        color: "",
+      };
+
+      expect(resolveColor(entry, style, true)).toEqual({
+        color: "",
+      });
+    });
 
-      const result1 = resolveColor(entry, style1);
-      const result2 = resolveColor(entry, style2);
+    it("resolves multiple color-related style props from entry paths", () => {
+      const style = {
+        backgroundColor: "background_color",
+        borderColor: "extensions.green_color",
+        width: "100%",
+      };
 
-      expect(result1).toEqual({ color: "red" });
-      expect(result2).toEqual({ backgroundColor: "red" });
-      expect(result1).not.toBe(result2);
+      expect(resolveColor(entry, style, true)).toEqual({
+        backgroundColor: "#123456",
+        borderColor: "green",
+        width: "100%",
+      });
     });
   });
 });

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

@@ -0,0 +1,92 @@
+import { resolveColorForProp } from "..";
+
+jest.mock("../../logger", () => ({
+  masterCellLogger: {
+    warn: jest.fn(),
+  },
+}));
+
+import { masterCellLogger } from "../../logger";
+
+describe("resolveColorForProp", () => {
+  const entry = {
+    extensions: {
+      color: "red",
+      green_color: "green",
+      float_alpha_color: "rgba(239,239,239,1.0)",
+    },
+    background_color: "#123456",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns undefined when colorFromProp is undefined", () => {
+    expect(resolveColorForProp(entry, undefined)).toBeUndefined();
+  });
+
+  it("returns undefined when colorFromProp is empty string", () => {
+    expect(resolveColorForProp(entry, "")).toBeUndefined();
+  });
+
+  it("resolves color from extensions data mapping path", () => {
+    expect(resolveColorForProp(entry, "extensions.color")).toBe("red");
+  });
+
+  it("resolves color from nested entry path", () => {
+    expect(resolveColorForProp(entry, "background_color")).toBe("#123456");
+  });
+
+  it("returns valid hex color values", () => {
+    expect(resolveColorForProp(entry, "#000000")).toBe("#000000");
+  });
+
+  it("returns valid rgba color values", () => {
+    expect(resolveColorForProp(entry, "rgba(0,0,0,0)")).toBe("rgba(0,0,0,0)");
+  });
+
+  it("returns valid named color values", () => {
+    expect(resolveColorForProp(entry, "transparent")).toBe("transparent");
+    expect(resolveColorForProp(entry, "black")).toBe("black");
+  });
+
+  it("returns undefined for invalid non-entry color values", () => {
+    expect(resolveColorForProp(entry, "invalid_path")).toBeUndefined();
+
+    expect(masterCellLogger.warn).toHaveBeenCalledWith({
+      message: "Cannot resolve property invalid_path from the entry.",
+      data: {
+        configurationValue: "invalid_path",
+        colorFromProp: "invalid_path",
+      },
+    });
+  });
+
+  it("returns undefined when extensions path is missing", () => {
+    expect(
+      resolveColorForProp(entry, "extensions.missing.path")
+    ).toBeUndefined();
+
+    expect(masterCellLogger.warn).toHaveBeenCalledWith({
+      message:
+        "Cannot resolve property extensions.missing.path from the entry.",
+      data: {
+        configurationValue: "extensions.missing.path",
+        colorFromProp: "extensions.missing.path",
+      },
+    });
+  });
+
+  it("resolves rgba color values with float alpha from entry path", () => {
+    expect(resolveColorForProp(entry, "extensions.float_alpha_color")).toBe(
+      "rgba(239,239,239,1.0)"
+    );
+  });
+
+  it("returns valid rgba color values with float alpha", () => {
+    expect(resolveColorForProp(entry, "rgba(239,239,239,1.0)")).toBe(
+      "rgba(239,239,239,1.0)"
+    );
+  });
+});