@applicaster/zapp-react-native-ui-components 16.0.0-rc.90 → 16.0.0-rc.92

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/__tests__/factory.test.ts

@@ -0,0 +1,32 @@
+import { CollapsibleTextContainer } from "../index";
+
+const getValue = (key: string) => {
+  const values: Record<string, unknown> = {
+    text_alignment: "left",
+    margin_top: 0,
+    margin_right: 0,
+    margin_bottom: 0,
+    margin_left: 0,
+    padding_top: 0,
+    padding_right: 0,
+    padding_bottom: 0,
+    padding_left: 0,
+    corner_radius: 0,
+    data_key: "title",
+    custom_data_key: undefined,
+  };
+
+  return values[key];
+};
+
+describe("CollapsibleTextContainer view tree", () => {
+  it("stretches to the parent width so labels wrap using the cell width", () => {
+    const result = CollapsibleTextContainer({
+      getValue,
+      elements: [],
+      additionalStyles: { backgroundColor: "transparent" },
+    });
+
+    expect(result.style.alignSelf).toBe("stretch");
+  });
+});

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/index.ts

@@ -3,7 +3,6 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 import {
   getColorFromData,
   getKeyForLabel,
-  mapSelfAlignment,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
@@ -23,7 +22,7 @@ export const CollapsibleTextContainer = ({
   return {
     type: "CollapsibleTextContainer", // Collapsible Text Container,
     style: {
-      alignSelf: mapSelfAlignment(getValue("text_alignment")),
+      alignSelf: "stretch",
       marginTop: toNumberWithDefaultZero(getValue("margin_top")),
       marginRight: toNumberWithDefaultZero(getValue("margin_right")),
       marginBottom: toNumberWithDefaultZero(getValue("margin_bottom")),

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

@@ -17,6 +17,9 @@ import {
   Text,
   View,
 } from "react-native";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+
+const logger = createLogger({ category: "ModalComponent:AudioPlayerButton" });
 
 const styles = StyleSheet.create({
   container: {
@@ -130,6 +133,28 @@ export const DEFAULT_ICONS_CONFIGURATION: IconsConfiguration = {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Variant configurations
+// ---------------------------------------------------------------------------
+
+export const VARIANT_TEXT_ONLY: ButtonConfiguration = {
+  background: DEFAULT_BACKGROUND_CONFIGURATION,
+  title: DEFAULT_TITLE_CONFIGURATION,
+  icons: DEFAULT_ICONS_CONFIGURATION,
+};
+
+export const VARIANT_WITH_ICON: ButtonConfiguration = {
+  background: DEFAULT_BACKGROUND_CONFIGURATION,
+  title: DEFAULT_TITLE_CONFIGURATION,
+  icons: {
+    ...DEFAULT_ICONS_CONFIGURATION,
+    leadingIcon: {
+      enabled: true,
+      actionType: "addToPlaylist",
+    },
+  },
+};
+
 // ---------------------------------------------------------------------------
 // Data (runtime / localization — not styling config)
 // ---------------------------------------------------------------------------
@@ -140,30 +165,15 @@ export type ButtonData = {
 };
 
 export type AudioPlayerButtonProps = {
-  configuration: ButtonConfiguration;
-  data: ButtonData;
+  configuration?: ButtonConfiguration;
+  data?: ButtonData;
   disabled?: boolean;
   focused?: boolean;
   onPress?: () => void;
 };
 
-// ---------------------------------------------------------------------------
-// Hardcoded spec values (black fields)
-// ---------------------------------------------------------------------------
-
-// Hardcoded: action type → icon asset mapping (base64 PNG)
-const ACTION_ICON_ASSETS: Record<ButtonActionType, string> = {
-  addToQueue:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKUlEQVR42mNgGAVDCfxHw6MWjFpAvEGk4lELKLdgNJmOWkA7C0YBbQAAwiZvkR9eFgQAAAAASUVORK5CYII=",
-  addToPlaylist:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJklEQVR42mNgGAUjFvzHgmluATF4cFswGsmjkTwayaORPAqGLwAA6Jpxj9Ms9QMAAAAASUVORK5CYII=",
-  goToPlaylist:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALklEQVR42mNgGAWjYNiD/7Q2/D8tLflPiSX/ycQ0t+D/yLGAEkeMWjAKRgG9AQB4zlSshwSzWwAAAABJRU5ErkJggg==",
-  confirm:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJElEQVR42mNgGAWjYBSQCv4TwKMWDHELho/hNE/3o2AUDDcAAPv0QMAyy1CtAAAAAElFTkSuQmCC",
-  cancel:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAASElEQVR42mNgGAWjGvynkVoUTf+pqA6nxv8UqiHbEooNx2cQ1QzHZiDVDcdlCcOQsoCmQUTTSKZpMqV5RqNLUUHTwm4UDBMAALBLQ73LTvoyAAAAAElFTkSuQmCC",
-};
+const PLACEHOLDER_RED_BOX =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJ0lEQVR4nO3NMQEAAAjDsIF/z2ACvlRAU5NMHuvPOQAAAAAAAMBdC/07Ai5sNw+CAAAAAElFTkSuQmCC";
 
 function getTextTransformStyle(
   textTransform: TextTransform
@@ -276,13 +286,19 @@ type ButtonLeadingIconProps = {
   configuration: IconsConfiguration;
 };
 
-function ButtonLeadingIcon({
-  actionType,
-  configuration,
-}: ButtonLeadingIconProps) {
-  const asset =
-    configuration.leadingIcon.asset ||
-    (actionType ? ACTION_ICON_ASSETS[actionType] : undefined);
+function ButtonLeadingIcon({ configuration }: ButtonLeadingIconProps) {
+  const asset = configuration.leadingIcon.asset || PLACEHOLDER_RED_BOX;
+
+  React.useEffect(() => {
+    if (!configuration.leadingIcon.asset) {
+      logger.log_warning(
+        "AudioPlayerButton has leadingIcon enabled but no asset was provided. Falling back to placeholder red box. Ensure the relevant plugin (e.g. playlist-experience) provides leadingIcon.asset in styleOverrides.",
+        {
+          leadingIcon: configuration.leadingIcon,
+        }
+      );
+    }
+  }, [configuration.leadingIcon.asset]);
 
   if (!asset) {
     return null;
@@ -308,13 +324,14 @@ import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
 import { mergeButtonConfiguration } from "../utils/mergeStyles";
 
 export function AudioPlayerButton({
-  configuration,
-  data,
+  configuration = VARIANT_WITH_ICON,
+  data = { title: undefined },
   disabled,
   focused = false,
   onPress,
 }: AudioPlayerButtonProps) {
   const modalBlocksStyle = useModalBlocksStyle();
+
   const buttonBlock = modalBlocksStyle?.button;
   const actionBlock = modalBlocksStyle?.action;
 
@@ -328,9 +345,21 @@ export function AudioPlayerButton({
     icons: iconsConfiguration,
   } = effectiveConfig;
 
-  const { title } = data;
+  const title = data?.title || buttonBlock?.title.default;
   const isDisabled = disabled ?? data.disabled ?? false;
 
+  React.useEffect(() => {
+    if (!title) {
+      logger.log_warning(
+        "Create New Playlist button rendering with empty title. Ensure data.title is set for AudioPlayerButton or styleOverrides providing button title.",
+        {
+          leadingIcon: iconsConfiguration.leadingIcon,
+          modalBlocksStyle: modalBlocksStyle,
+        }
+      );
+    }
+  }, [title]);
+
   const { leadingIcon } = iconsConfiguration;
   const showIcon = shouldShowLeadingIcon(leadingIcon);
 
@@ -361,25 +390,3 @@ export function AudioPlayerButton({
     </ButtonContainer>
   );
 }
-
-// ---------------------------------------------------------------------------
-// Variant configurations
-// ---------------------------------------------------------------------------
-
-export const VARIANT_TEXT_ONLY: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  icons: DEFAULT_ICONS_CONFIGURATION,
-};
-
-export const VARIANT_WITH_ICON: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  icons: {
-    ...DEFAULT_ICONS_CONFIGURATION,
-    leadingIcon: {
-      enabled: true,
-      actionType: "addToPlaylist",
-    },
-  },
-};

package/Components/ModalComponent/AudioPlayer/Components/Item.tsx

@@ -54,6 +54,8 @@ export type BackgroundConfiguration = {
   paddingRight?: number;
   paddingBottom?: number;
   paddingLeft?: number;
+  highlightInsetLeft?: number;
+  highlightInsetRight?: number;
 };
 
 export type ImageConfiguration = {
@@ -203,9 +205,9 @@ const CONTAINER_SPEC_LARGE_IMAGE: ContainerSpec = {
 
 const CONTAINER_SPEC_DEFAULT: ContainerSpec = {
   paddingTop: 8,
-  paddingRight: 20,
+  paddingRight: 10,
   paddingBottom: 8,
-  paddingLeft: 20,
+  paddingLeft: 10,
   horizontalGutter: 12,
   verticalGutter: 2,
 };
@@ -350,21 +352,30 @@ function ItemContainer({
   onPress,
 }: ItemContainerProps) {
   const container = resolveContainerSpec(image);
-  const bg = focused ? background.focusedColor : background.defaultColor;
+  const insetLeft = background.highlightInsetLeft ?? 0;
+  const insetRight = background.highlightInsetRight ?? 0;
 
   return (
-    <Pressable
-      onPress={onPress}
-      style={({ pressed }) => ({
-        backgroundColor: pressed ? background.focusedColor : bg,
-        borderRadius: background.cornerRadius,
-        paddingTop: background.paddingTop ?? container.paddingTop,
-        paddingRight: background.paddingRight ?? container.paddingRight,
-        paddingBottom: background.paddingBottom ?? container.paddingBottom,
-        paddingLeft: background.paddingLeft ?? container.paddingLeft,
-      })}
-    >
-      {children}
+    <Pressable onPress={onPress}>
+      {({ pressed }) => (
+        <View
+          style={{
+            marginLeft: insetLeft,
+            marginRight: insetRight,
+            backgroundColor:
+              pressed || focused
+                ? background.focusedColor
+                : background.defaultColor,
+            borderRadius: background.cornerRadius,
+            paddingTop: background.paddingTop ?? container.paddingTop,
+            paddingRight: background.paddingRight ?? container.paddingRight,
+            paddingBottom: background.paddingBottom ?? container.paddingBottom,
+            paddingLeft: background.paddingLeft ?? container.paddingLeft,
+          }}
+        >
+          {children}
+        </View>
+      )}
     </Pressable>
   );
 }
@@ -927,6 +938,10 @@ export const VARIANT_NOW_PLAYING: ItemConfiguration = {
     defaultColor: "transparent",
     focusedColor: "transparent",
     cornerRadius: 0,
+    paddingTop: 8,
+    paddingRight: 20,
+    paddingBottom: 8,
+    paddingLeft: 20,
   },
   image: {
     width: 72,
@@ -947,6 +962,12 @@ export const VARIANT_QUEUED_ITEM: ItemConfiguration = {
     defaultColor: "transparent",
     focusedColor: "rgba(62, 62, 62, 1)",
     cornerRadius: 12,
+    paddingTop: 8,
+    paddingRight: 10,
+    paddingBottom: 8,
+    paddingLeft: 10,
+    highlightInsetLeft: 10,
+    highlightInsetRight: 10,
   },
   image: {
     width: 48,
@@ -967,6 +988,10 @@ export const VARIANT_PLAYLIST_ITEM: ItemConfiguration = {
     defaultColor: "transparent",
     focusedColor: "rgba(62, 62, 62, 1)",
     cornerRadius: 12,
+    paddingTop: 8,
+    paddingRight: 10,
+    paddingBottom: 8,
+    paddingLeft: 10,
   },
   image: {
     width: 48,

package/Components/ModalComponent/AudioPlayer/Components/NowPlayingHeaderSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { View } from "react-native";
 import {
   AudioPlayerTrackItem,
   VARIANT_NOW_PLAYING,
@@ -10,15 +10,6 @@ import type { MenuItem } from "@applicaster/zapp-react-native-utils/modalState/t
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
 
-const styles = StyleSheet.create({
-  divider: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: "rgba(255, 255, 255, 0.1)",
-    marginHorizontal: 20,
-    marginVertical: 8,
-  },
-});
-
 type NowPlayingHeaderSectionProps = {
   onClear?: () => void;
   nextUpTitle?: string;
@@ -70,14 +61,11 @@ export function NowPlayingHeaderSection({
     };
 
     return (
-      <View>
-        <AudioPlayerTrackItem
-          configuration={VARIANT_NOW_PLAYING}
-          data={data}
-          onTrailingButtonPress={handlePlayPause}
-        />
-        <View style={styles.divider} />
-      </View>
+      <AudioPlayerTrackItem
+        configuration={VARIANT_NOW_PLAYING}
+        data={data}
+        onTrailingButtonPress={handlePlayPause}
+      />
     );
   };
 

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

@@ -57,7 +57,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 +70,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)");
   });
 

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

@@ -45,18 +45,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 }
-      : {}),
   };
 }
 

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -33,7 +33,6 @@ import { SortableList } from "./SortableList";
 import {
   AudioPlayerButton,
   NowPlayingHeaderSection,
-  VARIANT_WITH_ICON,
 } from "./AudioPlayer/Components";
 import { BottomSheetDragArea } from "./BottomSheetDragArea";
 import { ModalBlocksStyleContext } from "./ModalBlocksStyleContext";
@@ -176,9 +175,6 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     ? pluginLocalizations?.[`${normalizedPluginId}_header_title`]
     : undefined;
 
-  const createPlaylistTitle =
-    pluginLocalizations?.create_new_playlist_title || "Create New Playlist";
-
   const nextUpTitle =
     pluginLocalizations?.next_up_title ||
     (normalizedPluginId
@@ -324,9 +320,9 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
   const handleCreatePlaylist = useCallback(() => {
     editableCollection?.add?.({
       id: "create_new_playlist",
-      title: createPlaylistTitle,
+      title: "unknown title",
     });
-  }, [editableCollection, createPlaylistTitle]);
+  }, [editableCollection]);
 
   const headers = useMemo(() => {
     const list: Array<{ index: number; component: () => React.ReactElement }> =
@@ -352,11 +348,7 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
           <View
             style={{ paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12 }}
           >
-            <AudioPlayerButton
-              configuration={VARIANT_WITH_ICON}
-              data={{ title: createPlaylistTitle }}
-              onPress={handleCreatePlaylist}
-            />
+            <AudioPlayerButton onPress={handleCreatePlaylist} />
           </View>
         ),
       });
@@ -371,7 +363,6 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     nowPlayingTitle,
     hasAdd,
     handleCreatePlaylist,
-    createPlaylistTitle,
   ]);
 
   const _items = useMemo(() => {
@@ -483,11 +474,7 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
         ) : null}
         {hasAdd ? (
           <View style={styles.someStyles}>
-            <AudioPlayerButton
-              configuration={VARIANT_WITH_ICON}
-              data={{ title: createPlaylistTitle }}
-              onPress={handleCreatePlaylist}
-            />
+            <AudioPlayerButton onPress={handleCreatePlaylist} />
           </View>
         ) : null}
         {_items}

package/Components/ModalComponent/__tests__/BottomSheetModalContent.test.tsx

@@ -82,18 +82,21 @@ jest.mock("../AudioPlayer/Components/Item", () => ({
   VARIANT_PLAYLIST_ITEM: {},
 }));
 
+const mockAudioPlayerButtonProps: Array<any> = [];
+
 jest.mock("../AudioPlayer/Components", () => ({
   NowPlayingHeaderSection: () => null,
-  AudioPlayerButton: ({ data, onPress }: any) => {
+  AudioPlayerButton: (props: any) => {
     const { Text } = require("react-native");
 
+    mockAudioPlayerButtonProps.push(props);
+
     return (
-      <Text testID="create-playlist-button" onPress={onPress}>
-        {data.title}
+      <Text testID="create-playlist-button" onPress={props.onPress}>
+        {props.data?.title}
       </Text>
     );
   },
-  VARIANT_WITH_ICON: {},
 }));
 
 const baseProps = {
@@ -171,6 +174,8 @@ describe("BottomSheetModalContent role/behavior cells", () => {
   });
 
   it("renders create playlist button when operations include add and calls editableCollection.add on press", () => {
+    mockAudioPlayerButtonProps.length = 0;
+
     const addMock = jest.fn();
     const { BehaviorSubject } = require("rxjs");
 
@@ -192,12 +197,22 @@ describe("BottomSheetModalContent role/behavior cells", () => {
     const createBtn = screen.getByTestId("create-playlist-button");
     expect(createBtn).toBeTruthy();
 
+    // The button is rendered bare: styling comes from the modal blocks theme
+    // and the title from the button block, so no configuration/data is passed.
+    expect(mockAudioPlayerButtonProps.length).toBeGreaterThan(0);
+
+    for (const props of mockAudioPlayerButtonProps) {
+      expect(props.configuration).toBeUndefined();
+      expect(props.data).toBeUndefined();
+      expect(typeof props.onPress).toBe("function");
+    }
+
     const { fireEvent } = require("@testing-library/react-native");
     fireEvent.press(createBtn);
 
     expect(addMock).toHaveBeenCalledWith({
       id: "create_new_playlist",
-      title: "Create New Playlist",
+      title: "unknown title",
     });
   });
 

package/package.json

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