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

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/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.91",
   "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.91",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.91",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.91",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.91",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",