@applicaster/zapp-react-native-ui-components 16.0.0-rc.85 → 16.0.0-rc.87

package/Components/GeneralContentScreen/GeneralContentScreenHookAdapter.tsx

@@ -11,6 +11,20 @@ type HookComponentProps = HookPluginProps & {
 function GeneralContentScreenHookComponent(props: HookComponentProps) {
   const { hookPlugin, focused, parentFocus } = props;
 
+  const componentsMapExtraPropsMemo = React.useMemo(
+    () => ({
+      safeArea: {
+        edges: {
+          top: "additive",
+          bottom: "additive",
+          left: "off",
+          right: "off",
+        },
+      },
+    }),
+    []
+  );
+
   if (!hookPlugin?.screen_id) {
     log_error(
       "GeneralContentScreenHookAdapter: This component should only be used as a hook, but no hookPlugin was provided."
@@ -26,6 +40,7 @@ function GeneralContentScreenHookComponent(props: HookComponentProps) {
         isScreenWrappedInContainer={false}
         focused={focused}
         parentFocus={parentFocus}
+        componentsMapExtraProps={componentsMapExtraPropsMemo}
       />
     </HookContentFocusGroup>
   );

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

@@ -363,7 +363,7 @@ export function AudioPlayerButton({
 }
 
 // ---------------------------------------------------------------------------
-// Snack demo — two Button variants from configuration only
+// Variant configurations
 // ---------------------------------------------------------------------------
 
 export const VARIANT_TEXT_ONLY: ButtonConfiguration = {
@@ -383,25 +383,3 @@ export const VARIANT_WITH_ICON: ButtonConfiguration = {
     },
   },
 };
-
-export const VARIANT_UPPERCASE_TITLE: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: {
-    ...DEFAULT_TITLE_CONFIGURATION,
-    textTransform: "uppercase",
-  },
-  icons: DEFAULT_ICONS_CONFIGURATION,
-};
-
-export const VARIANT_LARGE_ICON: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  icons: {
-    width: 32,
-    height: 32,
-    leadingIcon: {
-      enabled: true,
-      actionType: "addToQueue",
-    },
-  },
-};

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

@@ -63,11 +63,7 @@ export type TextTransform =
 export type TitleAlignment = "left" | "center";
 
 /** Selects hardcoded container + action layout (white fields). */
-export type HeaderVariant =
-  | "singleLine"
-  | "headerWithActions"
-  | "headerWithActionsCancelOnly"
-  | "section";
+export type HeaderVariant = "singleLine" | "headerWithActions" | "section";
 
 export type TitleConfiguration = {
   fontColor: string;
@@ -198,13 +194,6 @@ const CONTAINER_SPEC: Record<HeaderVariant, ContainerSpec> = {
     paddingBottom: 8,
     paddingLeft: 20,
   },
-  headerWithActionsCancelOnly: {
-    horizontalGutter: 12,
-    paddingTop: 0,
-    paddingRight: 20,
-    paddingBottom: 8,
-    paddingLeft: 20,
-  },
   section: {
     horizontalGutter: 12,
     paddingTop: 0,
@@ -228,11 +217,6 @@ const ACTION_BUTTONS_BEHAVIOR: Record<
     leading: { enabled: true, actionType: "cancel" },
     trailing: { enabled: true, actionType: "done" },
   },
-  headerWithActionsCancelOnly: {
-    sectionEnabled: true,
-    leading: { enabled: true, actionType: "cancel" },
-    trailing: { enabled: false },
-  },
   section: {
     sectionEnabled: true,
     leading: { enabled: false },
@@ -725,25 +709,6 @@ export const VARIANT_HEADER_WITH_ACTIONS: HeaderConfiguration = {
   paddingTop: 16,
 };
 
-/** Variant 2 — single side action (layout rule demo) */
-export const VARIANT_HEADER_WITH_CANCEL_ONLY: HeaderConfiguration = {
-  variant: "headerWithActionsCancelOnly",
-  title: {
-    fontColor: "#FFFFFF",
-    iosFontFamily: "SFProText-Bold",
-    androidFontFamily: "Roboto-Bold",
-    fontSize: 22,
-    lineHeight: 28,
-    iosLetterSpacing: -0.6,
-    androidLetterSpacing: 0,
-    textTransform: "default",
-    alignment: "center",
-  },
-  closeButton: { enabled: false },
-  actionButtons: DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION,
-  paddingTop: 16,
-};
-
 /** Variant 3 — Section Header */
 export const VARIANT_SECTION_HEADER: HeaderConfiguration = {
   variant: "section",

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

@@ -565,7 +565,7 @@ export function AudioPlayerInput({
 }
 
 // ---------------------------------------------------------------------------
-// Variant presets — collections of configuration keys (not a variant field)
+// Variant configurations
 // ---------------------------------------------------------------------------
 
 /** Search pill — leading icon + clear button */
@@ -626,28 +626,3 @@ export const VARIANT_NAME_PLAYLIST_INPUT: InputConfiguration = {
     },
   },
 };
-
-/** Text only search pill — no leading icon */
-export const VARIANT_TEXT_ONLY_INPUT: InputConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  label: DEFAULT_LABEL_CONFIGURATION,
-  text: DEFAULT_TEXT_CONFIGURATION,
-  icons: {
-    ...DEFAULT_ICONS_CONFIGURATION,
-    leadingIcon: { enabled: false },
-  },
-};
-
-/** Search without clear button */
-export const VARIANT_SEARCH_WITHOUT_CLEAR: InputConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  label: DEFAULT_LABEL_CONFIGURATION,
-  text: DEFAULT_TEXT_CONFIGURATION,
-  icons: {
-    ...DEFAULT_ICONS_CONFIGURATION,
-    trailingIcon: {
-      ...DEFAULT_ICONS_CONFIGURATION.trailingIcon,
-      enabled: false,
-    },
-  },
-};

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

@@ -12,14 +12,8 @@
  */
 
 import React from "react";
-import {
-  Image,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import {
   MenuItem,
   SelectionBehavior,
@@ -291,13 +285,14 @@ function resolveContainerSpec(image: ImageConfiguration): ContainerSpec {
 
 export function mapMenuItemToNowPlayingData(
   item: MenuItem,
-  isPaused?: boolean
+  isPaused?: boolean,
+  nowPlayingLabel = "Now Playing"
 ): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
-    nowPlayingLabel: "Now Playing",
+    nowPlayingLabel,
     trailingButton: "playPause",
     isSelected: isPaused !== undefined ? !isPaused : item.isSelected,
   };
@@ -402,6 +397,10 @@ type ItemLabelProps = {
 };
 
 function ItemLabel({ text, configuration, focused = false }: ItemLabelProps) {
+  if (!text) {
+    return null;
+  }
+
   const color =
     focused && configuration.focusedFontColor
       ? configuration.focusedFontColor
@@ -878,22 +877,28 @@ export function AudioPlayerTrackItem({
         <View style={{ width: container.horizontalGutter }} />
         <View style={styles.contentColumn}>
           {showNowPlaying ? (
-            <>
-              <NowPlayingRow
-                assetConfiguration={nowPlayingAsset}
-                labelConfiguration={nowPlayingLabel}
-                label={data.nowPlayingLabel}
-              />
-              <View style={{ height: container.verticalGutter }} />
-            </>
+            <NowPlayingRow
+              assetConfiguration={nowPlayingAsset}
+              labelConfiguration={nowPlayingLabel}
+              label={data.nowPlayingLabel}
+            />
+          ) : null}
+          {showNowPlaying && (data.textLabel1 || data.textLabel2) ? (
+            <View style={{ height: container.verticalGutter }} />
+          ) : null}
+          {data.textLabel1 ? (
+            <ItemLabel
+              text={data.textLabel1}
+              configuration={textLabel1}
+              focused={focused}
+            />
+          ) : null}
+          {data.textLabel1 && data.textLabel2 ? (
+            <View style={{ height: container.verticalGutter }} />
+          ) : null}
+          {data.textLabel2 ? (
+            <ItemLabel text={data.textLabel2} configuration={textLabel2} />
           ) : null}
-          <ItemLabel
-            text={data.textLabel1}
-            configuration={textLabel1}
-            focused={focused}
-          />
-          <View style={{ height: container.verticalGutter }} />
-          <ItemLabel text={data.textLabel2} configuration={textLabel2} />
         </View>
         <ItemButtons
           leadingButton={data.leadingButton}

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

@@ -21,10 +21,14 @@ const styles = StyleSheet.create({
 
 type NowPlayingHeaderSectionProps = {
   onClear?: () => void;
+  nextUpTitle?: string;
+  nowPlayingTitle?: string;
 };
 
 export function NowPlayingHeaderSection({
   onClear,
+  nextUpTitle = "Next Up",
+  nowPlayingTitle = "Now Playing",
 }: NowPlayingHeaderSectionProps) {
   const player = usePlayer();
   const playerState = usePlayerState("queue-now-playing-section");
@@ -53,7 +57,8 @@ export function NowPlayingHeaderSection({
 
     const data = mapMenuItemToNowPlayingData(
       nowPlayingItem,
-      playerState?.isPaused
+      playerState?.isPaused,
+      nowPlayingTitle
     );
 
     const handlePlayPause = () => {
@@ -81,7 +86,7 @@ export function NowPlayingHeaderSection({
       {renderNowPlayingTrack()}
       <AudioPlayerHeader
         configuration={VARIANT_SECTION_HEADER}
-        data={{ title: "Next Up" }}
+        data={{ title: nextUpTitle }}
         onClear={onClear}
       />
     </View>

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

@@ -1,7 +1,11 @@
 import React from "react";
 import { Pressable } from "react-native";
 import { fireEvent, render, screen } from "@testing-library/react-native";
-import { AudioPlayerTrackItem, VARIANT_PLAYLIST_ITEM } from "../Item";
+import {
+  AudioPlayerTrackItem,
+  VARIANT_PLAYLIST_ITEM,
+  mapMenuItemToNowPlayingData,
+} from "../Item";
 
 const playlistItemData = {
   textLabel1: "Queue",
@@ -63,4 +67,47 @@ describe("AudioPlayerTrackItem multiSelect checkbox", () => {
 
     expect(onPress).toHaveBeenCalledTimes(1);
   });
+
+  it("renders only textLabel1 Text element when textLabel2 is missing or empty", () => {
+    const { UNSAFE_getAllByType, queryByText } = render(
+      <AudioPlayerTrackItem
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={{
+          textLabel1: "Only Title",
+          textLabel2: "",
+        }}
+      />
+    );
+
+    const { Text } = require("react-native");
+    const textNodes = UNSAFE_getAllByType(Text);
+    expect(textNodes).toHaveLength(1);
+    expect(queryByText("Only Title")).toBeTruthy();
+  });
+});
+
+describe("mapMenuItemToNowPlayingData", () => {
+  const item = {
+    id: "item_1",
+    title: "Track Title",
+    summary: "Artist Name",
+    icon: "https://example.com/cover.png",
+  };
+
+  it("uses default 'Now Playing' label when omitted", () => {
+    const data = mapMenuItemToNowPlayingData(item as any);
+    expect(data.nowPlayingLabel).toBe("Now Playing");
+    expect(data.textLabel1).toBe("Track Title");
+    expect(data.textLabel2).toBe("Artist Name");
+  });
+
+  it("uses custom nowPlayingLabel when provided", () => {
+    const data = mapMenuItemToNowPlayingData(
+      item as any,
+      false,
+      "En cours de lecture"
+    );
+
+    expect(data.nowPlayingLabel).toBe("En cours de lecture");
+  });
 });

package/Components/ModalComponent/AudioPlayer/Components/index.ts

@@ -1,5 +1,3 @@
-export { AudioPlayerAction } from "./Action";
-
 export { AudioPlayerButton, VARIANT_WITH_ICON } from "./Button";
 
 export { AudioPlayerHeader } from "./Header";

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

@@ -227,4 +227,22 @@ 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");
+  });
 });

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

@@ -93,6 +93,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 }
+      : {}),
   };
 }
 
@@ -267,6 +294,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 }
+      : {}),
   };
 }