@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1593888345 → 16.0.0-alpha.1701179921

package/Components/ModalComponent/AudioPlayer/utils/__tests__/mergeStyles.test.ts

@@ -1,7 +1,12 @@
 import {
   mergeItemConfiguration,
   mergeButtonConfiguration,
+  mergeHeaderConfiguration,
 } from "../mergeStyles";
+import {
+  VARIANT_SECTION_HEADER,
+  VARIANT_SINGLE_LINE_HEADER,
+} from "../../Components/Header";
 
 const base = {
   background: {
@@ -57,7 +62,7 @@ describe("mergeItemConfiguration background", () => {
     expect(merged.textLabel1.lineHeight).toBe(40);
   });
 
-  it("merges background padding from Studio keys", () => {
+  it("does not merge Studio item background padding (white spec field)", () => {
     const merged = mergeItemConfiguration(base as any, {
       background: {
         default: {
@@ -70,11 +75,11 @@ describe("mergeItemConfiguration background", () => {
       },
     });
 
-    expect(merged.background.paddingTop).toBe(32);
-    expect(merged.background.paddingBottom).toBe(32);
-    expect(merged.background.paddingLeft).toBe(40);
-    expect(merged.background.paddingRight).toBe(40);
-    // Default-only override must not steal the base focused highlight color.
+    expect(merged.background.defaultColor).toBe("#2E7D32");
+    expect(merged.background.paddingTop).toBeUndefined();
+    expect(merged.background.paddingBottom).toBeUndefined();
+    expect(merged.background.paddingLeft).toBeUndefined();
+    expect(merged.background.paddingRight).toBeUndefined();
     expect(merged.background.focusedColor).toBe("rgba(62, 62, 62, 1)");
   });
 
@@ -227,4 +232,125 @@ describe("mergeButtonConfiguration background", () => {
       "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN"
     );
   });
+
+  it("applies Studio button title typography (fontFamily, letterSpacing, textTransform)", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      title: {
+        default: {
+          fontFamily: "CustomFont",
+          letterSpacing: -0.5,
+          textTransform: "uppercase",
+        },
+      },
+    });
+
+    expect(merged.title.iosFontFamily).toBe("CustomFont");
+    expect(merged.title.androidFontFamily).toBe("CustomFont");
+    expect(merged.title.iosLetterSpacing).toBe(-0.5);
+    expect(merged.title.androidLetterSpacing).toBe(-0.5);
+    expect(merged.title.textTransform).toBe("uppercase");
+  });
+});
+
+describe("mergeHeaderConfiguration section header (Variant 3)", () => {
+  it("merges section title + Clear action button styles", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: {
+        default: {
+          fontColor: "#ABCDEF",
+          fontSize: 15,
+          lineHeight: 36,
+          fontFamily: "CustomSection",
+          letterSpacing: -0.2,
+          textTransform: "uppercase",
+          alignment: "left",
+        },
+      },
+      actionButtons: {
+        default: {
+          backgroundColor: "rgba(10, 10, 10, 1)",
+          fontColor: "#EEEEEE",
+          fontSize: 12,
+          borderRadius: 20,
+          paddingTop: 8,
+          paddingRight: 12,
+          paddingBottom: 8,
+          paddingLeft: 12,
+        },
+        focused: {
+          backgroundColor: "rgba(20, 20, 20, 1)",
+          fontColor: "#FFDD00",
+        },
+      },
+    });
+
+    expect(merged.title.fontColor).toBe("#ABCDEF");
+    expect(merged.title.fontSize).toBe(15);
+    expect(merged.title.lineHeight).toBe(36);
+    expect(merged.title.iosFontFamily).toBe("CustomSection");
+    expect(merged.title.androidFontFamily).toBe("CustomSection");
+    expect(merged.title.iosLetterSpacing).toBe(-0.2);
+    expect(merged.title.textTransform).toBe("uppercase");
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe(
+      "rgba(10, 10, 10, 1)"
+    );
+
+    expect(merged.actionButtons.focusedBackgroundColor).toBe(
+      "rgba(20, 20, 20, 1)"
+    );
+
+    expect(merged.actionButtons.fontColor).toBe("#EEEEEE");
+    expect(merged.actionButtons.focusedFontColor).toBe("#FFDD00");
+    expect(merged.actionButtons.fontSize).toBe(12);
+    expect(merged.actionButtons.cornerRadius).toBe(20);
+    expect(merged.actionButtons.paddingTop).toBe(8);
+    expect(merged.actionButtons.paddingLeft).toBe(12);
+  });
+
+  it("uses title.default when only platform font and letter spacing are set", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: {
+        default: {
+          iosFontFamily: "SFProText-Semibold",
+          androidFontFamily: "Roboto-Medium",
+          iosLetterSpacing: -0.4,
+          androidLetterSpacing: 0,
+        },
+      },
+    });
+
+    expect(merged.title.iosFontFamily).toBe("SFProText-Semibold");
+    expect(merged.title.androidFontFamily).toBe("Roboto-Medium");
+    expect(merged.title.iosLetterSpacing).toBe(-0.4);
+    expect(merged.title.androidLetterSpacing).toBe(0);
+    expect(merged.title.fontSize).toBe(VARIANT_SECTION_HEADER.title.fontSize);
+  });
+
+  it("does not change section defaults when block is empty", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: { default: {} },
+      actionButtons: { default: {} },
+    });
+
+    expect(merged.title.fontSize).toBe(VARIANT_SECTION_HEADER.title.fontSize);
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe(
+      VARIANT_SECTION_HEADER.actionButtons.defaultBackgroundColor
+    );
+  });
+
+  it("leaves single-line header title size untouched when only actionButtons set", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SINGLE_LINE_HEADER, {
+      actionButtons: {
+        default: { backgroundColor: "#123456" },
+      },
+    });
+
+    expect(merged.title.fontSize).toBe(
+      VARIANT_SINGLE_LINE_HEADER.title.fontSize
+    );
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe("#123456");
+  });
 });

package/Components/ModalComponent/AudioPlayer/utils/mergeStyles.ts

@@ -9,6 +9,7 @@ import {
 } from "../Components/Item";
 import {
   TitleConfiguration as HeaderTitleConfiguration,
+  ActionButtonsStyleConfiguration as HeaderActionButtonsStyleConfiguration,
   HeaderConfiguration,
 } from "../Components/Header";
 import {
@@ -45,18 +46,6 @@ function mergeItemBackground(
     ...(defaultOverride?.borderRadius !== undefined
       ? { cornerRadius: defaultOverride.borderRadius }
       : {}),
-    ...(defaultOverride?.paddingTop !== undefined
-      ? { paddingTop: defaultOverride.paddingTop }
-      : {}),
-    ...(defaultOverride?.paddingRight !== undefined
-      ? { paddingRight: defaultOverride.paddingRight }
-      : {}),
-    ...(defaultOverride?.paddingBottom !== undefined
-      ? { paddingBottom: defaultOverride.paddingBottom }
-      : {}),
-    ...(defaultOverride?.paddingLeft !== undefined
-      ? { paddingLeft: defaultOverride.paddingLeft }
-      : {}),
   };
 }
 
@@ -93,6 +82,33 @@ function mergeItemLabel(
     ...(override.lineHeight !== undefined
       ? { lineHeight: override.lineHeight }
       : {}),
+    ...(override.fontFamily
+      ? {
+          iosFontFamily: override.fontFamily,
+          androidFontFamily: override.fontFamily,
+        }
+      : {}),
+    ...(override.iosFontFamily
+      ? { iosFontFamily: override.iosFontFamily }
+      : {}),
+    ...(override.androidFontFamily
+      ? { androidFontFamily: override.androidFontFamily }
+      : {}),
+    ...(override.letterSpacing !== undefined
+      ? {
+          iosLetterSpacing: override.letterSpacing,
+          androidLetterSpacing: override.letterSpacing,
+        }
+      : {}),
+    ...(override.iosLetterSpacing !== undefined
+      ? { iosLetterSpacing: override.iosLetterSpacing }
+      : {}),
+    ...(override.androidLetterSpacing !== undefined
+      ? { androidLetterSpacing: override.androidLetterSpacing }
+      : {}),
+    ...(override.textTransform
+      ? { textTransform: override.textTransform }
+      : {}),
   };
 }
 
@@ -195,6 +211,122 @@ function mergeHeaderTitle(
     ...base,
     ...(override.fontColor ? { fontColor: override.fontColor } : {}),
     ...(override.fontSize !== undefined ? { fontSize: override.fontSize } : {}),
+    ...(override.lineHeight !== undefined
+      ? { lineHeight: override.lineHeight }
+      : {}),
+    ...(typeof override.fontFamily === "string"
+      ? {
+          iosFontFamily: override.fontFamily,
+          androidFontFamily: override.fontFamily,
+        }
+      : {}),
+    ...(override.iosFontFamily
+      ? { iosFontFamily: override.iosFontFamily }
+      : {}),
+    ...(override.androidFontFamily
+      ? { androidFontFamily: override.androidFontFamily }
+      : {}),
+    ...(override.letterSpacing !== undefined
+      ? {
+          iosLetterSpacing: override.letterSpacing,
+          androidLetterSpacing: override.letterSpacing,
+        }
+      : {}),
+    ...(override.iosLetterSpacing !== undefined
+      ? { iosLetterSpacing: override.iosLetterSpacing }
+      : {}),
+    ...(override.androidLetterSpacing !== undefined
+      ? { androidLetterSpacing: override.androidLetterSpacing }
+      : {}),
+    ...(override.textTransform
+      ? { textTransform: override.textTransform }
+      : {}),
+    ...(override.alignment ? { alignment: override.alignment } : {}),
+  };
+}
+
+function mergeHeaderActionButtons(
+  base: HeaderActionButtonsStyleConfiguration,
+  defaultOverride?: Record<string, any>,
+  focusedOverride?: Record<string, any>
+): HeaderActionButtonsStyleConfiguration {
+  if (!defaultOverride && !focusedOverride) return base;
+
+  const focusedBackgroundColor =
+    focusedOverride?.backgroundColor ??
+    defaultOverride?.focusBackgroundColor ??
+    defaultOverride?.focusedBackgroundColor;
+
+  const focusedFontColor =
+    focusedOverride?.fontColor ??
+    defaultOverride?.focusFontColor ??
+    defaultOverride?.focusedFontColor;
+
+  return {
+    ...base,
+    ...(defaultOverride?.backgroundColor
+      ? { defaultBackgroundColor: defaultOverride.backgroundColor }
+      : {}),
+    ...(focusedBackgroundColor != null && focusedBackgroundColor !== ""
+      ? { focusedBackgroundColor }
+      : {}),
+    ...(defaultOverride?.fontColor
+      ? { fontColor: defaultOverride.fontColor }
+      : {}),
+    ...(focusedFontColor != null && focusedFontColor !== ""
+      ? { focusedFontColor }
+      : {}),
+    ...(defaultOverride?.fontSize !== undefined
+      ? { fontSize: defaultOverride.fontSize }
+      : {}),
+    ...(defaultOverride?.lineHeight !== undefined
+      ? { lineHeight: defaultOverride.lineHeight }
+      : {}),
+    ...(typeof defaultOverride?.fontFamily === "string"
+      ? {
+          iosFontFamily: defaultOverride.fontFamily,
+          androidFontFamily: defaultOverride.fontFamily,
+        }
+      : {}),
+    ...(defaultOverride?.iosFontFamily
+      ? { iosFontFamily: defaultOverride.iosFontFamily }
+      : {}),
+    ...(defaultOverride?.androidFontFamily
+      ? { androidFontFamily: defaultOverride.androidFontFamily }
+      : {}),
+    ...(defaultOverride?.letterSpacing !== undefined
+      ? {
+          iosLetterSpacing: defaultOverride.letterSpacing,
+          androidLetterSpacing: defaultOverride.letterSpacing,
+        }
+      : {}),
+    ...(defaultOverride?.iosLetterSpacing !== undefined
+      ? { iosLetterSpacing: defaultOverride.iosLetterSpacing }
+      : {}),
+    ...(defaultOverride?.androidLetterSpacing !== undefined
+      ? { androidLetterSpacing: defaultOverride.androidLetterSpacing }
+      : {}),
+    ...(defaultOverride?.textTransform
+      ? { textTransform: defaultOverride.textTransform }
+      : {}),
+    ...(defaultOverride?.borderRadius !== undefined
+      ? { cornerRadius: defaultOverride.borderRadius }
+      : {}),
+    ...(defaultOverride?.cornerRadius !== undefined
+      ? { cornerRadius: defaultOverride.cornerRadius }
+      : {}),
+    ...(defaultOverride?.paddingTop !== undefined
+      ? { paddingTop: defaultOverride.paddingTop }
+      : {}),
+    ...(defaultOverride?.paddingRight !== undefined
+      ? { paddingRight: defaultOverride.paddingRight }
+      : {}),
+    ...(defaultOverride?.paddingBottom !== undefined
+      ? { paddingBottom: defaultOverride.paddingBottom }
+      : {}),
+    ...(defaultOverride?.paddingLeft !== undefined
+      ? { paddingLeft: defaultOverride.paddingLeft }
+      : {}),
   };
 }
 
@@ -206,9 +338,39 @@ export function mergeHeaderConfiguration(
 
   const bgOverride = headerBlock.container?.default?.backgroundColor;
 
+  const actionButtonsDefault =
+    headerBlock.actionButtons?.default || headerBlock.actionButtons;
+
+  const actionButtonsFocused =
+    headerBlock.actionButtons?.focused || headerBlock.actionButtons?.focus;
+
+  // Parser shape is title.default.*; hydrate() returns a flat title object.
+  const titleDefault = headerBlock.title?.default;
+
+  const titleOverride =
+    titleDefault &&
+    (titleDefault.fontColor !== undefined ||
+      titleDefault.fontSize !== undefined ||
+      titleDefault.lineHeight !== undefined ||
+      titleDefault.fontFamily ||
+      titleDefault.iosFontFamily ||
+      titleDefault.androidFontFamily ||
+      titleDefault.letterSpacing !== undefined ||
+      titleDefault.iosLetterSpacing !== undefined ||
+      titleDefault.androidLetterSpacing !== undefined ||
+      titleDefault.textTransform ||
+      titleDefault.alignment)
+      ? titleDefault
+      : headerBlock.title;
+
   return {
     ...base,
-    title: mergeHeaderTitle(base.title, headerBlock.title?.default),
+    title: mergeHeaderTitle(base.title, titleOverride),
+    actionButtons: mergeHeaderActionButtons(
+      base.actionButtons,
+      actionButtonsDefault,
+      actionButtonsFocused
+    ),
     ...(bgOverride ? { backgroundColor: bgOverride } : {}),
   };
 }
@@ -267,6 +429,33 @@ function mergeButtonTitle(
     ...(override.lineHeight !== undefined
       ? { lineHeight: override.lineHeight }
       : {}),
+    ...(override.fontFamily
+      ? {
+          iosFontFamily: override.fontFamily,
+          androidFontFamily: override.fontFamily,
+        }
+      : {}),
+    ...(override.iosFontFamily
+      ? { iosFontFamily: override.iosFontFamily }
+      : {}),
+    ...(override.androidFontFamily
+      ? { androidFontFamily: override.androidFontFamily }
+      : {}),
+    ...(override.letterSpacing !== undefined
+      ? {
+          iosLetterSpacing: override.letterSpacing,
+          androidLetterSpacing: override.letterSpacing,
+        }
+      : {}),
+    ...(override.iosLetterSpacing !== undefined
+      ? { iosLetterSpacing: override.iosLetterSpacing }
+      : {}),
+    ...(override.androidLetterSpacing !== undefined
+      ? { androidLetterSpacing: override.androidLetterSpacing }
+      : {}),
+    ...(override.textTransform
+      ? { textTransform: override.textTransform }
+      : {}),
   };
 }