@applicaster/zapp-react-native-ui-components 16.0.0-alpha.2529997432 → 16.0.0-alpha.2663208063

package/Components/MasterCell/DefaultComponents/Image/hoc/utils/index.ts

@@ -1,15 +1,85 @@
-import {
-  toFiniteNumberWithDefault,
-  toNumber,
-} from "@applicaster/zapp-react-native-utils/numberUtils";
+import { toFiniteNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { isNil } from "ramda";
+import { coreLogger } from "@applicaster/zapp-react-native-utils/logger";
 
-const dimensionRegex = /\b(width|height)=(\d+)\b/gi;
+const imageResizingLogger = coreLogger
+  ?.addSubsystem("components")
+  ?.addSubsystem("ImageResizing");
 
+const TEMPLATE_REGEX = /{{(width|height)}}/gi;
+const UNRESOLVED_PLACEHOLDER_REGEX = /{{[^}]*}}?/;
+const INVALID_PLACEHOLDER_EXTRACT_REGEX = /{{([^}]*)}}?/g;
+const ALLOWED_PLACEHOLDERS = ["width", "height"];
+
+/**
+ * Merges query-param string `paramsString` into `baseUrl`.
+ * Params from `paramsString` override any existing params with the same key.
+ */
+export const mergeQueryParams = (
+  baseUrl: string,
+  paramsString: string
+): string => {
+  try {
+    const urlObj = new URL(baseUrl);
+    const newParams = new URLSearchParams(paramsString);
+
+    newParams.forEach((value, key) => {
+      urlObj.searchParams.set(key, value);
+    });
+
+    return urlObj.toString();
+  } catch {
+    // If URL parsing fails, return original
+    return baseUrl;
+  }
+};
+
+/**
+ * Extracts unresolved placeholder names from a param pair and logs a warning.
+ */
+const logInvalidPlaceholders = (pair: string): void => {
+  const invalidNames: string[] = [];
+  let match: RegExpExecArray | null;
+
+  // Reset lastIndex before using the global regex
+  INVALID_PLACEHOLDER_EXTRACT_REGEX.lastIndex = 0;
+
+  while ((match = INVALID_PLACEHOLDER_EXTRACT_REGEX.exec(pair)) !== null) {
+    const name = match[1];
+
+    if (!ALLOWED_PLACEHOLDERS.includes(name?.toLowerCase())) {
+      invalidNames.push(name);
+    }
+  }
+
+  if (invalidNames.length > 0) {
+    imageResizingLogger?.warning({
+      message: `Image resizing: invalid placeholder(s) found: ${invalidNames.map((n) => `{{${n}}}`).join(", ")}. Allowed placeholders are: {{width}}, {{height}}. The param "${pair}" was ignored.`,
+      data: { pair, invalidNames, allowedPlaceholders: ALLOWED_PLACEHOLDERS },
+    });
+  }
+};
+
+/**
+ * Parses a dimension mapping template string (query param format) and injects
+ * the resolved width/height values into the given URL.
+ *
+ * The template uses `{{width}}` and `{{height}}` placeholders.
+ * It is treated as query-param key=value pairs (e.g. "w={{width}}&h={{height}}"
+ * or "size={{width}}x{{height}}").
+ *
+ * Resolved params are **merged** into the original URL – existing params with
+ * the same key are replaced; new ones are appended.
+ *
+ * Invalid mappings (containing unresolved placeholders like `{{heit}}` or
+ * malformed `{{heit}`) are silently dropped and logged as warnings.
+ * A leading `?` in the template is stripped.
+ */
 export const withDimensions = (
   url: Option<string>,
   width: Option<number | string>,
-  height: Option<number | string>
+  height: Option<number | string>,
+  dimensionMappingTemplate?: Option<string>
 ) => {
   if (isNil(url)) {
     return url;
@@ -22,23 +92,48 @@ export const withDimensions = (
   const newWidth = Math.trunc(toFiniteNumberWithDefault(0, width));
   const newHeight = Math.trunc(toFiniteNumberWithDefault(0, height));
 
-  return url.replace(dimensionRegex, (match, name, originalValue) => {
-    if (name.toLocaleLowerCase() === "width" && newWidth > 0) {
-      const originalWidth = toNumber(originalValue);
+  if (newWidth <= 0 && newHeight <= 0) {
+    return url;
+  }
+
+  // Strip leading `?` and whitespace from the template
+  const template = dimensionMappingTemplate?.trim()?.replace(/^\?/, "");
 
-      if (originalWidth > 0 && originalWidth > newWidth) {
-        return `${name}=${newWidth}`;
-      }
-    }
+  if (!template) {
+    return url;
+  }
 
-    if (name.toLocaleLowerCase() === "height" && newHeight > 0) {
-      const originalHeight = toNumber(originalValue);
+  // Replace {{width}} / {{height}} placeholders in the template
+  const resolvedTemplate = template.replace(TEMPLATE_REGEX, (_match, name) => {
+    if (name.toLowerCase() === "width") {
+      return newWidth > 0 ? String(newWidth) : _match;
+    }
 
-      if (originalHeight > 0 && originalHeight > newHeight) {
-        return `${name}=${newHeight}`;
-      }
+    if (name.toLowerCase() === "height") {
+      return newHeight > 0 ? String(newHeight) : _match;
     }
 
-    return match;
+    return _match;
   });
+
+  // Filter out param pairs that still contain unresolved / malformed placeholders
+  const cleanedParams = resolvedTemplate
+    .split("&")
+    .filter((pair) => {
+      if (UNRESOLVED_PLACEHOLDER_REGEX.test(pair)) {
+        logInvalidPlaceholders(pair);
+
+        return false;
+      }
+
+      return true;
+    })
+    .join("&");
+
+  if (!cleanedParams) {
+    return url;
+  }
+
+  // Parse the resolved template as query params and merge into URL
+  return mergeQueryParams(url, cleanedParams);
 };

package/Components/MasterCell/DefaultComponents/Image/hoc/withDimensions.tsx

@@ -14,25 +14,36 @@ type Style = {
   height: Option<number | string>;
 };
 
-const withAppliedDimensions = (style: Style) => (source: Source) => ({
-  ...source,
-  uri: withDimensions(source?.uri, style?.width, style?.height),
-});
+const withAppliedDimensions =
+  (style: Style, dimensionMappingTemplate: string) => (source: Source) => ({
+    ...source,
+    uri: withDimensions(
+      source?.uri,
+      style?.width,
+      style?.height,
+      dimensionMappingTemplate
+    ),
+  });
 
 export const withDimensionsHOC = (Component) => {
   return function WithDimensions(props: Record<string, unknown>) {
     const theme = useTheme<BaseThemePropertiesMobile>();
 
-    const useDownScalingImages = toBooleanWithDefaultFalse(
-      theme.use_downscaling_images
+    const useImageResizing = toBooleanWithDefaultFalse(
+      theme.use_image_resizing ?? theme.use_downscaling_images
     );
 
+    const dimensionMappingTemplate = theme.image_resizing_template;
+
     return (
       <Component
         {...props}
         withDimensions={
-          useDownScalingImages
-            ? withAppliedDimensions((props?.style || {}) as Style)
+          useImageResizing
+            ? withAppliedDimensions(
+                (props?.style || {}) as Style,
+                dimensionMappingTemplate
+              )
             : identity
         }
       />

package/Components/ModalComponent/AudioPlayer/Components/Action.tsx

@@ -25,24 +25,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 16,
-    gap: 12,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    marginTop: 8,
-  },
 });
 
 // ---------------------------------------------------------------------------

package/Components/ModalComponent/AudioPlayer/Components/Button.tsx

@@ -32,24 +32,6 @@ const styles = StyleSheet.create({
   title: {
     textAlign: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 24,
-    gap: 12,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    marginTop: 8,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -310,6 +292,9 @@ function ButtonLeadingIcon({
 // AudioPlayerButton — single building block driven by configuration + data
 // ---------------------------------------------------------------------------
 
+import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
+import { mergeButtonConfiguration } from "../utils/mergeStyles";
+
 export function AudioPlayerButton({
   configuration,
   data,
@@ -317,11 +302,19 @@ export function AudioPlayerButton({
   focused = false,
   onPress,
 }: AudioPlayerButtonProps) {
+  const modalBlocksStyle = useModalBlocksStyle();
+  const buttonBlock = modalBlocksStyle?.button;
+  const actionBlock = modalBlocksStyle?.action;
+
+  const effectiveConfig = React.useMemo(() => {
+    return mergeButtonConfiguration(configuration, buttonBlock, actionBlock);
+  }, [configuration, buttonBlock, actionBlock]);
+
   const {
-    background: backgroundConfiguration,
-    title: titleConfiguration,
+    background: effectiveBgConfig,
+    title: effectiveTitleConfig,
     icons: iconsConfiguration,
-  } = configuration;
+  } = effectiveConfig;
 
   const { title } = data;
   const isDisabled = disabled ?? data.disabled ?? false;
@@ -333,7 +326,7 @@ export function AudioPlayerButton({
     <ButtonContainer
       focused={focused}
       disabled={isDisabled}
-      configuration={backgroundConfiguration}
+      configuration={effectiveBgConfig}
       onPress={onPress}
     >
       <View style={styles.contentRow}>
@@ -343,14 +336,14 @@ export function AudioPlayerButton({
               actionType={leadingIcon.actionType}
               configuration={iconsConfiguration}
             />
-            <View style={{ width: backgroundConfiguration.horizontalGutter }} />
+            <View style={{ width: effectiveBgConfig.horizontalGutter }} />
           </>
         ) : null}
         <ButtonTitle
           title={title}
           focused={focused}
           disabled={isDisabled}
-          configuration={titleConfiguration}
+          configuration={effectiveTitleConfig}
         />
       </View>
     </ButtonContainer>

package/Components/ModalComponent/AudioPlayer/Components/Header.tsx

@@ -10,6 +10,7 @@
 
 import React, { useCallback, useState } from "react";
 import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 const styles = StyleSheet.create({
   row: {
@@ -45,29 +46,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 0,
-    gap: 24,
-  },
-  demoBlock: {
-    gap: 8,
-    paddingHorizontal: 0,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-    paddingHorizontal: 24,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    paddingHorizontal: 24,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -123,7 +101,7 @@ export type ActionButtonsStyleConfiguration = {
 };
 
 export type HeaderConfiguration = {
-  paddingTop: undefined;
+  paddingTop?: number;
   variant: HeaderVariant;
   title: TitleConfiguration;
   closeButton: CloseButtonConfiguration;
@@ -305,6 +283,8 @@ type HeaderContainerProps = {
   children: React.ReactNode;
 };
 
+const TRANSPARENT = "transparent";
+
 function HeaderContainer({
   variant,
   configuration,
@@ -317,6 +297,8 @@ function HeaderContainer({
       ? configuration.paddingTop
       : container.paddingTop;
 
+  const backgroundColor = (configuration as any).backgroundColor || TRANSPARENT;
+
   return (
     <View
       style={{
@@ -324,6 +306,7 @@ function HeaderContainer({
         paddingRight: container.paddingRight,
         paddingBottom: container.paddingBottom,
         paddingLeft: container.paddingLeft,
+        backgroundColor: backgroundColor,
       }}
     >
       {children}
@@ -338,17 +321,18 @@ type HeaderTitleProps = {
 };
 
 function HeaderTitle({ title, configuration, centered }: HeaderTitleProps) {
-  const letterSpacing =
-    Platform.OS === "ios"
-      ? configuration.iosLetterSpacing
-      : configuration.androidLetterSpacing;
+  const { fontColor, fontSize } = configuration;
+
+  const letterSpacing = isApplePlatform()
+    ? configuration.iosLetterSpacing
+    : configuration.androidLetterSpacing;
 
   return (
     <Text
       style={{
         flex: centered ? undefined : 1,
-        color: configuration.fontColor,
-        fontSize: configuration.fontSize,
+        color: fontColor,
+        fontSize: fontSize,
         lineHeight: configuration.lineHeight,
         letterSpacing,
         fontFamily: Platform.select({
@@ -610,6 +594,9 @@ function CenterAlignedHeaderLayout({
 // AudioPlayerHeader
 // ---------------------------------------------------------------------------
 
+import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
+import { mergeHeaderConfiguration } from "../utils/mergeStyles";
+
 export function AudioPlayerHeader({
   configuration,
   data,
@@ -622,7 +609,14 @@ export function AudioPlayerHeader({
   onDone,
   onClear,
 }: AudioPlayerHeaderProps) {
-  const { variant, title, closeButton, actionButtons } = configuration;
+  const modalBlocksStyle = useModalBlocksStyle();
+  const headerBlock = modalBlocksStyle?.header;
+
+  const effectiveConfig = React.useMemo(() => {
+    return mergeHeaderConfiguration(configuration, headerBlock);
+  }, [configuration, headerBlock]);
+
+  const { variant, title, closeButton, actionButtons } = effectiveConfig;
   const { title: titleText } = data;
 
   const container = CONTAINER_SPEC[variant];
@@ -767,45 +761,3 @@ export const VARIANT_SECTION_HEADER: HeaderConfiguration = {
   closeButton: { enabled: false },
   actionButtons: DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION,
 };
-
-export default function App() {
-  return (
-    <View style={styles.demoScreen}>
-      <Text style={styles.demoHeading}>Modal Header Building Block</Text>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>Single Line Header</Text>
-        <AudioPlayerHeader
-          configuration={VARIANT_SINGLE_LINE_HEADER}
-          data={{ title: "Playback Speed" }}
-        />
-      </View>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>Header With Actions</Text>
-        <AudioPlayerHeader
-          configuration={VARIANT_HEADER_WITH_ACTIONS}
-          data={{ title: "Playback Speed" }}
-        />
-      </View>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>
-          Header With Actions — single side action
-        </Text>
-        <AudioPlayerHeader
-          configuration={VARIANT_HEADER_WITH_CANCEL_ONLY}
-          data={{ title: "Playback Speed" }}
-        />
-      </View>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>Section Header</Text>
-        <AudioPlayerHeader
-          configuration={VARIANT_SECTION_HEADER}
-          data={{ title: "Next in Queue" }}
-        />
-      </View>
-    </View>
-  );
-}

package/Components/ModalComponent/AudioPlayer/Components/Input.tsx

@@ -37,24 +37,6 @@ const styles = StyleSheet.create({
   underline: {
     alignSelf: "stretch",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 16,
-    gap: 24,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    marginTop: 8,
-  },
 });
 
 // ---------------------------------------------------------------------------