@applicaster/zapp-react-native-ui-components 16.0.0-rc.6 → 16.0.0-rc.61

package/Components/MasterCell/utils/index.ts

@@ -1,22 +1,23 @@
 import React, { useMemo } from "react";
 import * as R from "ramda";
-import validateColor from "validate-color";
+import memoizee from "memoizee";
+
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-
-import { masterCellLogger } from "../logger";
-import { getCellState } from "../../Cell/utils";
+import { isValidColor } from "@applicaster/zapp-react-native-utils/colorUtils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { get } from "@applicaster/zapp-react-native-utils/utils";
-import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
+import { pathOr, get, isNil } from "@applicaster/zapp-react-native-utils/utils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 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";
+import { isNotEmptyString } from "@applicaster/zapp-react-native-utils/stringUtils";
+import { masterCellLogger } from "../logger";
+import { getCellState } from "../../Cell/utils";
+import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
 import { DataProvider } from "../DefaultComponents/DataProvider";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
-  if (R.isNil(element)) {
+  if (isNil(element)) {
     return false;
   }
 
@@ -28,12 +29,20 @@ const hasElementSpecificViewType = (viewType) => (element) => {
   return hasElementsSpecificViewType(viewType)(element.elements);
 };
 
+export const hasElementsSpecificViewType = (viewType) => (elements) => {
+  if (isNilOrEmpty(elements)) {
+    return false;
+  }
+
+  return R.any(hasElementSpecificViewType(viewType))(elements);
+};
+
 const logWarning = (
   colorValueFromCellStyle,
   colorFromProp,
   colorValueFromEntry
 ) => {
-  if (R.isNil(colorValueFromEntry)) {
+  if (isNil(colorValueFromEntry)) {
     masterCellLogger.warn({
       message: `Cannot resolve property ${colorValueFromCellStyle} from the entry.`,
       data: {
@@ -44,15 +53,10 @@ const logWarning = (
   }
 };
 
-export const hasElementsSpecificViewType = (viewType) => (elements) => {
-  if (R.isNil(elements) || R.isEmpty(elements)) {
-    return false;
-  }
-
-  return R.any(hasElementSpecificViewType(viewType))(elements);
-};
-
-function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
+export function resolveColorForProp(
+  entry: any,
+  colorFromProp: string | undefined
+) {
   if (!colorFromProp) {
     return undefined;
   }
@@ -62,9 +66,7 @@ function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
     colorFromProp.split(".")
   );
 
-  const color = colorFromProp.replace(".00", "").replace(".0", ""); // https://github.com/dreamyguy/validate-color/issues/44
-
-  if (nestedEntryValue === undefined && !validateColor(color)) {
+  if (nestedEntryValue === undefined && !isValidColor(colorFromProp)) {
     logWarning(colorFromProp, colorFromProp, nestedEntryValue);
 
     return undefined;
@@ -86,36 +88,73 @@ function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
 
 const getColorKeys = memoizee((style) => {
   const styleKeys = Object.keys(style);
-  const colorKeys = styleKeys.filter((key) => /color/i.test(key));
 
-  return colorKeys;
+  return styleKeys.filter((key) => /color/i.test(key));
 });
 
-export const resolveColor = memoizee(
-  (entry, style) => {
-    if (style === null || style === undefined) {
-      return style;
-    }
+/**
+ * A color style value is either a literal color (e.g. "#FFFFFF") or a
+ * data-mapping path into the entry. Data mappings always point at the entry
+ * `extensions` object (e.g. "extensions.brandColor"), so we only need to do a
+ * path lookup when the value starts with "extensions" — everything else is a
+ * literal color and can be returned as-is.
+ *
+ * This avoids the previous, very expensive approach that ran `validateColor`
+ * on every value and memoized on a full `fast-json-stable-stringify` of the
+ * entire entry.
+ */
+const EXTENSIONS_PREFIX = "extensions";
+
+const isDataMappingPath = (value: string): boolean =>
+  typeof value === "string" && value.startsWith(EXTENSIONS_PREFIX);
+
+export const resolveColor = (
+  entry,
+  style,
+  allowDynamicColorsOutsideExtensions
+) => {
+  if (style === null || style === undefined) {
+    return style;
+  }
+
+  const colorKeys = getColorKeys(style);
+
+  if (colorKeys.length === 0) {
+    return style;
+  }
+
+  return colorKeys.reduce(
+    (acc, key) => {
+      const value = acc[key];
 
-    return getColorKeys(style).reduce(
-      (acc, value) => {
-        if (acc[value] && typeof acc[value] === "string") {
-          const colorStyle = resolveColorForProp(entry, acc[value]);
+      // 1. The Expensive Edge-Case (Only for the app with root mappings)
+      if (allowDynamicColorsOutsideExtensions && isNotEmptyString(value)) {
+        const possibleColor = resolveColorForProp(entry, value);
 
-          acc[value] = colorStyle;
-        }
+        acc[key] = isValidColor(possibleColor) ? possibleColor : null;
 
         return acc;
-      },
-      { ...style }
-    );
-  },
-  {
-    normalizer: (args) => {
-      return [stringify(args[0]), stringify(args[1])].join("|");
+      }
+
+      // 2. The Fast Path (For 99% of apps)
+      if (isDataMappingPath(value)) {
+        // resolve the mapped color from the entry; fall back to null
+        // (RN ignores null style values) when the path is missing
+        const possibleColor = pathOr(null, value.split("."), entry);
+
+        acc[key] = possibleColor;
+
+        return acc;
+      }
+
+      // 3. Default Case: Treat as a raw color string
+      acc[key] = value;
+
+      return acc;
     },
-  }
-);
+    { ...style }
+  );
+};
 
 export function isVideoPreviewEnabled({
   enable_video_preview = false,
@@ -238,7 +277,7 @@ const recursiveCloneElement = (focused: boolean) => (element) => {
 };
 
 export const recursiveCloneElementsWithState = (focused: boolean, children) => {
-  if (R.isNil(children) || R.isEmpty(children)) {
+  if (isNilOrEmpty(children)) {
     return undefined;
   }
 
@@ -252,7 +291,7 @@ export const cloneChildrenWithIds = (
   ids: string[],
   children: React.ReactElement[]
 ) => {
-  if (R.isNil(children) || R.isEmpty(children)) {
+  if (isNilOrEmpty(children)) {
     return undefined;
   }
 

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

@@ -0,0 +1,314 @@
+/**
+ * Modal Building Block — Action
+ *
+ * Single-file Expo Snack demo for the Action list item building block spec.
+ * Three forms (text only / leading icon + text / leading + text + trailing)
+ * are driven by data — no separate variants.
+ *
+ * Green (configurable): background, title, trailingIcon.chevronAsset
+ * White (hardcoded): container padding/gutter, icon size, leading icon assets,
+ *   leading/trailing visibility logic from data
+ */
+
+import React from "react";
+import {
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Configuration (green / editable fields from spec)
+// ---------------------------------------------------------------------------
+
+export type TextTransform =
+  | "default"
+  | "lowercase"
+  | "uppercase"
+  | "capitalize";
+
+export type BackgroundConfiguration = {
+  defaultColor: string;
+  focusedColor: string;
+  cornerRadius: number;
+};
+
+export type TitleConfiguration = {
+  fontColor: string;
+  focusedFontColor: string;
+  iosFontFamily: string;
+  androidFontFamily: string;
+  fontSize: number;
+  lineHeight: number;
+  iosLetterSpacing: number;
+  androidLetterSpacing: number;
+  textTransform: TextTransform;
+};
+
+export type TrailingIconConfiguration = {
+  chevronAsset?: string;
+};
+
+export type ActionConfiguration = {
+  background: BackgroundConfiguration;
+  title: TitleConfiguration;
+  trailingIcon: TrailingIconConfiguration;
+};
+
+export const DEFAULT_BACKGROUND_CONFIGURATION: BackgroundConfiguration = {
+  defaultColor: "transparent",
+  focusedColor: "rgba(62, 62, 62, 1)",
+  cornerRadius: 12,
+};
+
+export const DEFAULT_TITLE_CONFIGURATION: TitleConfiguration = {
+  fontColor: "#FFFFFF",
+  focusedFontColor: "#FFFFFF",
+  iosFontFamily: "SFProText-Semibold",
+  androidFontFamily: "Roboto-Medium",
+  fontSize: 15,
+  lineHeight: 24,
+  iosLetterSpacing: -0.2,
+  androidLetterSpacing: 0,
+  textTransform: "default",
+};
+
+export const DEFAULT_TRAILING_ICON_CONFIGURATION: TrailingIconConfiguration =
+  {};
+
+export const DEFAULT_ACTION_CONFIGURATION: ActionConfiguration = {
+  background: DEFAULT_BACKGROUND_CONFIGURATION,
+  title: DEFAULT_TITLE_CONFIGURATION,
+  trailingIcon: DEFAULT_TRAILING_ICON_CONFIGURATION,
+};
+
+// ---------------------------------------------------------------------------
+// Data (runtime — controls which elements are shown)
+// ---------------------------------------------------------------------------
+
+export type LeadingActionType =
+  | "addToQueue"
+  | "addToPlaylist"
+  | "favorite"
+  | "share"
+  | "sleepTimer"
+  | "playbackSpeed";
+
+export type ActionData = {
+  title: string;
+  /** When set, leading icon is shown (Enable: On). */
+  leadingActionType?: LeadingActionType;
+  /** When true, trailing chevron is shown (Enable: On). */
+  showTrailingChevron?: boolean;
+};
+
+export type AudioPlayerActionProps = {
+  configuration: ActionConfiguration;
+  data: ActionData;
+  focused?: boolean;
+  onPress?: () => void;
+};
+
+// ---------------------------------------------------------------------------
+// Hardcoded spec values (white fields)
+// ---------------------------------------------------------------------------
+
+const CONTAINER_SPEC = {
+  paddingTop: 13,
+  paddingRight: 10,
+  paddingBottom: 13,
+  paddingLeft: 10,
+  horizontalGutter: 12,
+};
+
+const ICON_SPEC = {
+  width: 24,
+  height: 24,
+};
+
+const DEFAULT_CHEVRON_ASSET =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALElEQVR42mNgGAXUBlu2bPmPjIeWBeiGDy0Lhrbrh1/qGXqZaxSMglEw0gEA4c+IpUrpYX4AAAAASUVORK5CYII=";
+
+/** Hardcoded: action type → leading icon asset (base64 PNG). */
+const LEADING_ICON_ASSETS: Record<LeadingActionType, string> = {
+  addToQueue:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALElEQVR42mNgGAUjE/xHAzS3gFgweC0Y+nEwGslkBRFFwTj8LBjNyaNgmAMAJTf+EEEZcS0AAAAASUVORK5CYII=",
+  addToPlaylist:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKUlEQVR42mNgGAVDBvxHA6MWjFpAvEGkglELKLdgNJmOWkA7C0YBzQAAivu+UKRR1ZIAAAAASUVORK5CYII=",
+  favorite:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKklEQVR42mNgGAWjYBTgBP+xAGLkRi0YQhbgM4wqBo9aMHgsGAWjgCAAALyAZqh4yyZZAAAAAElFTkSuQmCC",
+  share:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAK0lEQVR42mNgGAVDDvxHAqMWjFowUiz4TwQYgRYQYxBFlo1aMPAWjAK6AgD2g7pUUT7VeAAAAABJRU5ErkJggg==",
+  sleepTimer:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAYUlEQVR42tWUSQ4AIAgD+f+n8eJRliIQ6MmEZTSxJZokvipdXgZpAbzOO17AglIXI7XULxmCoEMwRGuWam6AdRsN4IJYTRH4PIDkhxTA92zUPNBcFDDHaOVR0RJ2LXG9QgemFVK8tpo4PwAAAABJRU5ErkJggg==",
+  playbackSpeed:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAK0lEQVR42mNgGAVDDvxHAqMWjFowUiz4TwQYgRYQYxBFlo1aMPAWjAK6AgD2g7pUUT7VeAAAAABJRU5ErkJggg==",
+};
+
+function getTextTransformStyle(
+  textTransform: TextTransform
+): "none" | "lowercase" | "uppercase" | "capitalize" {
+  return textTransform === "default" ? "none" : textTransform;
+}
+
+function shouldShowLeadingIcon(leadingActionType?: LeadingActionType) {
+  return !!leadingActionType;
+}
+
+function shouldShowTrailingIcon(showTrailingChevron?: boolean) {
+  return !!showTrailingChevron;
+}
+
+// ---------------------------------------------------------------------------
+// Inner components
+// ---------------------------------------------------------------------------
+
+type ActionContainerProps = {
+  configuration: BackgroundConfiguration;
+  focused: boolean;
+  children: React.ReactNode;
+  onPress?: () => void;
+};
+
+function ActionContainer({
+  configuration,
+  focused,
+  children,
+  onPress,
+}: ActionContainerProps) {
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({
+        backgroundColor:
+          pressed || focused
+            ? configuration.focusedColor
+            : configuration.defaultColor,
+        borderRadius: configuration.cornerRadius,
+        paddingTop: CONTAINER_SPEC.paddingTop,
+        paddingRight: CONTAINER_SPEC.paddingRight,
+        paddingBottom: CONTAINER_SPEC.paddingBottom,
+        paddingLeft: CONTAINER_SPEC.paddingLeft,
+      })}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+type ActionTitleProps = {
+  title: string;
+  configuration: TitleConfiguration;
+  focused: boolean;
+};
+
+function ActionTitle({ title, configuration, focused }: ActionTitleProps) {
+  const letterSpacing =
+    Platform.OS === "ios"
+      ? configuration.iosLetterSpacing
+      : configuration.androidLetterSpacing;
+
+  return (
+    <Text
+      style={{
+        flex: 1,
+        color: focused
+          ? configuration.focusedFontColor
+          : configuration.fontColor,
+        fontSize: configuration.fontSize,
+        lineHeight: configuration.lineHeight,
+        letterSpacing,
+        fontFamily: Platform.select({
+          ios: configuration.iosFontFamily,
+          android: configuration.androidFontFamily,
+          default: configuration.androidFontFamily,
+        }),
+        textTransform: getTextTransformStyle(configuration.textTransform),
+      }}
+      numberOfLines={1}
+    >
+      {title}
+    </Text>
+  );
+}
+
+type ActionLeadingIconProps = {
+  actionType: LeadingActionType;
+};
+
+function ActionLeadingIcon({ actionType }: ActionLeadingIconProps) {
+  return (
+    <Image
+      source={{ uri: LEADING_ICON_ASSETS[actionType] }}
+      style={{ width: ICON_SPEC.width, height: ICON_SPEC.height }}
+      resizeMode="contain"
+    />
+  );
+}
+
+type ActionTrailingIconProps = {
+  configuration: TrailingIconConfiguration;
+};
+
+function ActionTrailingIcon({ configuration }: ActionTrailingIconProps) {
+  const asset = configuration.chevronAsset ?? DEFAULT_CHEVRON_ASSET;
+
+  return (
+    <Image
+      source={{ uri: asset }}
+      style={{ width: ICON_SPEC.width, height: ICON_SPEC.height }}
+      resizeMode="contain"
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AudioPlayerAction
+// ---------------------------------------------------------------------------
+
+export function AudioPlayerAction({
+  configuration,
+  data,
+  focused = false,
+  onPress,
+}: AudioPlayerActionProps) {
+  const { background, title, trailingIcon } = configuration;
+  const { title: label, leadingActionType, showTrailingChevron } = data;
+
+  const showLeading = shouldShowLeadingIcon(leadingActionType);
+  const showTrailing = shouldShowTrailingIcon(showTrailingChevron);
+
+  return (
+    <ActionContainer
+      configuration={background}
+      focused={focused}
+      onPress={onPress}
+    >
+      <View style={styles.row}>
+        {showLeading ? (
+          <>
+            <ActionLeadingIcon actionType={leadingActionType} />
+            <View style={{ width: CONTAINER_SPEC.horizontalGutter }} />
+          </>
+        ) : null}
+        <ActionTitle title={label} configuration={title} focused={focused} />
+        {showTrailing ? (
+          <>
+            <View style={{ width: CONTAINER_SPEC.horizontalGutter }} />
+            <ActionTrailingIcon configuration={trailingIcon} />
+          </>
+        ) : null}
+      </View>
+    </ActionContainer>
+  );
+}