@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1453660071 → 16.0.0-alpha.1454930193

package/Components/ModalComponent/presets/__tests__/getCell.test.ts

@@ -0,0 +1,90 @@
+import React from "react";
+import { Pressable } from "react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { getCell } from "../index";
+import { standardCell } from "../standardCell";
+import { selectableCell } from "../selectableCell";
+import { dynamicCollectionCell } from "../dynamicCollectionCell";
+import { mapMenuItemToPlaylistData } from "../../AudioPlayer/Components/Item";
+
+describe("getCell", () => {
+  it("returns selectable cell for collection_selector", () => {
+    expect(getCell("collection_selector")).toBe(selectableCell);
+  });
+
+  it("returns selectable cell for preference_editor", () => {
+    expect(getCell("preference_editor")).toBe(selectableCell);
+  });
+
+  it("returns standard cell when role is undefined", () => {
+    expect(getCell(undefined)).toBe(standardCell);
+  });
+
+  it("returns standard cell for unknown roles", () => {
+    expect(getCell("unknown_role")).toBe(standardCell);
+  });
+
+  it("returns the dynamic collection cell for dynamic_collection", () => {
+    expect(getCell("dynamic_collection")).toBe(dynamicCollectionCell);
+  });
+
+  it("does not use behavior to select the cell family", () => {
+    expect(getCell(undefined, { selectMode: "multi" })).toBe(standardCell);
+
+    expect(getCell("collection_selector", { selectMode: "single" })).toBe(
+      selectableCell
+    );
+  });
+});
+
+describe("mapMenuItemToPlaylistData", () => {
+  const item = {
+    title: "Playlist 1",
+    summary: "5 items",
+    icon: "https://example.com/icon.png",
+  };
+
+  it("defaults to multiSelect trailing button when selectMode is multi or undefined", () => {
+    const data1 = mapMenuItemToPlaylistData(item, { selectMode: "multi" });
+    expect(data1.trailingButton).toBe("multiSelect");
+
+    const data2 = mapMenuItemToPlaylistData(item);
+    expect(data2.trailingButton).toBe("multiSelect");
+  });
+
+  it("omits trailing button when behavior selectMode is none", () => {
+    const data = mapMenuItemToPlaylistData(item, { selectMode: "none" });
+    expect(data.trailingButton).toBeUndefined();
+  });
+
+  it("omits trailing button when item trailingButton is explicitly none", () => {
+    const itemWithNone = { ...item, trailingButton: "none" };
+
+    const data = mapMenuItemToPlaylistData(itemWithNone, {
+      selectMode: "multi",
+    });
+
+    expect(data.trailingButton).toBeUndefined();
+  });
+});
+
+describe("selectableCell checkbox press", () => {
+  it("invokes onPress with the playlist item when the checkbox is pressed", () => {
+    const onPress = jest.fn();
+    const item = { id: "queue", title: "Queue" };
+
+    render(
+      selectableCell.renderItem({
+        item,
+        index: 0,
+        onPress,
+        context: { behavior: { selectMode: "multi" } } as any,
+      }) as React.ReactElement
+    );
+
+    const pressables = screen.UNSAFE_getAllByType(Pressable);
+    fireEvent.press(pressables[pressables.length - 1]);
+
+    expect(onPress).toHaveBeenCalledWith(item);
+  });
+});

package/Components/ModalComponent/presets/dynamicCollectionCell.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import {
+  AudioPlayerTrackItem,
+  VARIANT_QUEUED_ITEM,
+  ItemData,
+} from "../AudioPlayer/Components/Item";
+import type { CellRenderer, RenderItemArgs } from "./types";
+import {
+  MenuItem,
+  OPERATIONS,
+  hasOperation,
+} from "@applicaster/zapp-react-native-utils/modalState";
+
+function mapMenuItemToDynamicData(
+  item: MenuItem,
+  operations: string[]
+): ItemData {
+  const hasRemove = hasOperation(operations, OPERATIONS.REMOVE);
+  const hasReorder = hasOperation(operations, OPERATIONS.REORDER);
+
+  const title =
+    typeof item?.title === "string"
+      ? item.title
+      : item?.title != null
+        ? String(item.title)
+        : "";
+
+  const summary =
+    typeof item?.summary === "string"
+      ? item.summary.trim()
+      : item?.summary != null
+        ? String(item.summary)
+        : "";
+
+  return {
+    imageUri: item?.icon,
+    textLabel1: title,
+    textLabel2: summary,
+    leadingButton: hasRemove ? "remove" : undefined,
+    trailingButton: hasReorder ? "drag" : undefined,
+    isSelected: item?.isSelected,
+  };
+}
+
+export const dynamicCollectionCell: CellRenderer = {
+  renderItem: ({
+    item,
+    index,
+    onPress,
+    context,
+    renderHandle,
+  }: RenderItemArgs) => {
+    const { editableCollection } = context;
+    const operations = editableCollection?.operations || [];
+
+    const handleRemove = () => {
+      if (editableCollection?.remove) {
+        editableCollection.remove(index);
+      }
+    };
+
+    const handleDrag = () => {
+      // Drag is managed by SortableList drag handle context
+    };
+
+    return (
+      <AudioPlayerTrackItem
+        key={item.id}
+        configuration={VARIANT_QUEUED_ITEM}
+        data={mapMenuItemToDynamicData(item, operations)}
+        onPress={() => onPress(item)}
+        onLeadingButtonPress={handleRemove}
+        onTrailingButtonPress={handleDrag}
+        renderHandle={renderHandle}
+      />
+    );
+  },
+};

package/Components/ModalComponent/presets/index.ts

@@ -0,0 +1,27 @@
+import type { SelectionBehavior } from "@applicaster/zapp-react-native-utils/modalState";
+import { selectableCell } from "./selectableCell";
+import { standardCell } from "./standardCell";
+import type { CellRenderer } from "./types";
+
+export type { CellRenderer, RenderItemArgs, SheetRenderContext } from "./types";
+
+export { standardCell } from "./standardCell";
+
+export { selectableCell } from "./selectableCell";
+
+import { dynamicCollectionCell } from "./dynamicCollectionCell";
+
+const SELECTION_ROLES = new Set(["collection_selector", "preference_editor"]);
+
+/**
+ * Resolve the row cell from feed role (+ behavior for future config only).
+ * Unknown / none -> standard Button cell.
+ */
+export const getCell = (
+  role?: string,
+  _behavior?: SelectionBehavior
+): CellRenderer => {
+  if (role === "dynamic_collection") return dynamicCollectionCell;
+
+  return role && SELECTION_ROLES.has(role) ? selectableCell : standardCell;
+};

package/Components/ModalComponent/presets/selectableCell.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import {
+  AudioPlayerTrackItem,
+  mapMenuItemToPlaylistData,
+  VARIANT_PLAYLIST_ITEM,
+} from "../AudioPlayer/Components/Item";
+import type { CellRenderer } from "./types";
+
+export const selectableCell: CellRenderer = {
+  renderItem: ({ item, onPress, context }) => (
+    <AudioPlayerTrackItem
+      key={item.id}
+      configuration={VARIANT_PLAYLIST_ITEM}
+      data={mapMenuItemToPlaylistData(item, context?.behavior)}
+      onPress={() => onPress(item)}
+      onTrailingButtonPress={
+        item.secondaryAction?.action
+          ? () =>
+              onPress({
+                id: `${item.id}_secondary`,
+                title: item.title,
+                action: item.secondaryAction!.action,
+              })
+          : () => onPress(item)
+      }
+    />
+  ),
+};

package/Components/ModalComponent/presets/standardCell.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import type { CellRenderer } from "./types";
+
+export const standardCell: CellRenderer = {
+  renderItem: ({ item, onPress, context }) => {
+    if (!item) {
+      return null;
+    }
+
+    const {
+      theme,
+      ButtonComponent,
+      current_selection,
+      iconBaseProps,
+      itemBaseProps,
+      labelBaseProps,
+      getSelectedItemIcon,
+      getDefaultItemIcon,
+      iconPlacement,
+    } = context;
+
+    return (
+      <ButtonComponent
+        key={item.id}
+        configuration={theme}
+        selectedItem={current_selection}
+        item={item}
+        onPress={onPress}
+        label={
+          theme[(item as any)?.label] ?? ((item as any)?.label || item?.title)
+        }
+        iconBaseProps={iconBaseProps}
+        itemBaseProps={itemBaseProps}
+        labelBaseProps={labelBaseProps}
+        selectedItemIcon={getSelectedItemIcon(theme)}
+        defaultItemIcon={getDefaultItemIcon(theme)}
+        iconPlacement={iconPlacement}
+      />
+    );
+  },
+};

package/Components/ModalComponent/presets/types.ts

@@ -0,0 +1,35 @@
+import type React from "react";
+import type {
+  MenuItem,
+  SelectionBehavior,
+} from "@applicaster/zapp-react-native-utils/modalState";
+import type { EditableCollection } from "@applicaster/zapp-react-native-utils/modalState/EditableCollection";
+
+/**
+ * Extra props row renderers need.
+ */
+export type SheetRenderContext = {
+  theme: any;
+  ButtonComponent: React.ComponentType<any>;
+  current_selection?: any;
+  iconBaseProps: any;
+  itemBaseProps: any;
+  labelBaseProps: any;
+  getSelectedItemIcon: (theme: any) => any;
+  getDefaultItemIcon: (theme: any) => any;
+  iconPlacement?: "left" | "right";
+  editableCollection?: EditableCollection | null;
+  behavior?: SelectionBehavior;
+};
+
+export type RenderItemArgs = {
+  item: MenuItem;
+  index: number;
+  onPress: (item: MenuItem) => void;
+  context: SheetRenderContext;
+  renderHandle?: (children: React.ReactElement) => React.ReactElement;
+};
+
+export type CellRenderer = {
+  renderItem: (args: RenderItemArgs) => React.ReactNode;
+};

package/Components/ModalComponent/showTextInput.ts

@@ -0,0 +1,52 @@
+import {
+  actionExecutor,
+  ActionResult,
+} from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
+import { TextInputContent } from "./TextInputContent";
+
+/**
+ * Opens a text-input bottom sheet driven by action.options.
+ * Uses openBottomSheet with content.component as body-only UI;
+ * standard ModalHeader (dismiss x) is provided by ModalComponent.
+ */
+export async function showTextInputAction(
+  action: ActionType,
+  context?: Record<string, any>
+): Promise<ActionResult> {
+  const {
+    headerTitle,
+    inputLabel,
+    defaultValue,
+    buttonLabel,
+    validationLabel,
+    actions,
+    maxLength,
+  } = action.options || {};
+
+  if (!headerTitle || !buttonLabel || !actions || !actions.length) {
+    return ActionResult.Error;
+  }
+
+  return actionExecutor.handleAction(
+    {
+      type: "openBottomSheet",
+      options: {
+        header: {
+          title: headerTitle,
+        },
+        content: {
+          component: TextInputContent,
+          props: {
+            maxLength,
+            inputLabel,
+            defaultValue: defaultValue ?? "",
+            buttonLabel,
+            actions,
+            validationLabel,
+          },
+        },
+      },
+    },
+    context
+  );
+}

package/Components/ModalComponent/utils.ts

@@ -1,4 +1,8 @@
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  toNumberWithDefault,
+  toNumberWithDefaultZero,
+} from "@applicaster/zapp-react-native-utils/numberUtils";
 import { PluginConfiguration } from "./";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemLabelProps } from "./Button/ItemLabel";
@@ -6,7 +10,8 @@ import { ItemProps } from "./Button/Item";
 
 export function defaultItemProps(
   config: PluginConfiguration,
-  maxWidth: number
+  maxWidth: number,
+  blockItemStyle?: Record<string, any>
 ): ItemProps {
   const {
     modal_bottom_sheet_item_background_color,
@@ -24,19 +29,36 @@ export function defaultItemProps(
     modal_bottom_sheet_item_padding_top,
   } = config;
 
+  const bgDefault = blockItemStyle?.background?.default;
+
+  const bgFocused =
+    blockItemStyle?.background?.focused || blockItemStyle?.background?.focus;
+
   return {
-    backgroundColor: modal_bottom_sheet_item_background_color,
-    focusedBackgroundColor: modal_bottom_sheet_item_focus_background_color,
+    backgroundColor:
+      bgDefault?.backgroundColor || modal_bottom_sheet_item_background_color,
+    focusedBackgroundColor:
+      bgFocused?.backgroundColor ||
+      modal_bottom_sheet_item_focus_background_color,
     selectedBackgroundColor: modal_bottom_sheet_item_selected_background_color,
     focusedSelectedBackgroundColor:
       modal_bottom_sheet_item_focused_selected_background_color,
-    borderRadius: modal_bottom_sheet_item_corner_radius,
+    borderRadius: toNumberWithDefault(
+      modal_bottom_sheet_item_corner_radius,
+      bgDefault?.borderRadius
+    ),
     marginBottom: modal_bottom_sheet_item_margin_bottom,
     marginTop: modal_bottom_sheet_item_margin_top,
     marginLeft: modal_bottom_sheet_item_margin_left,
     marginRight: modal_bottom_sheet_item_margin_right,
-    paddingTop: modal_bottom_sheet_item_padding_top,
-    paddingBottom: modal_bottom_sheet_item_padding_bottom,
+    paddingTop: toNumberWithDefault(
+      modal_bottom_sheet_item_padding_top,
+      bgDefault?.paddingTop
+    ),
+    paddingBottom: toNumberWithDefault(
+      modal_bottom_sheet_item_padding_bottom,
+      bgDefault?.paddingBottom
+    ),
     paddingRight: modal_bottom_sheet_item_padding_right,
     paddingLeft: modal_bottom_sheet_item_padding_left,
     maxWidth,
@@ -45,7 +67,8 @@ export function defaultItemProps(
 
 export function defaultItemLabelProps(
   config: PluginConfiguration,
-  sheetWidth: number
+  sheetWidth: number,
+  blockItemStyle?: Record<string, any>
 ): ItemLabelProps {
   const {
     modal_bottom_sheet_item_label_android_letter_spacing,
@@ -72,15 +95,48 @@ export function defaultItemLabelProps(
     modal_bottom_sheet_item_padding_right,
   } = config;
 
-  const maxWidth =
+  const iconWidth = toNumberWithDefaultZero(modal_bottom_sheet_item_icon_width);
+
+  const iconMarginLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_icon_margin_left
+  );
+
+  const iconMarginRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_icon_margin_right
+  );
+
+  const itemMarginLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_margin_left
+  );
+
+  const itemMarginRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_margin_right
+  );
+
+  const itemPaddingLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_padding_left
+  );
+
+  const itemPaddingRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_padding_right
+  );
+
+  const calculatedMaxWidth =
     sheetWidth -
-    (modal_bottom_sheet_item_icon_width +
-      modal_bottom_sheet_item_icon_margin_left +
-      modal_bottom_sheet_item_icon_margin_right +
-      modal_bottom_sheet_item_margin_left +
-      modal_bottom_sheet_item_margin_right +
-      modal_bottom_sheet_item_padding_left +
-      modal_bottom_sheet_item_padding_right);
+    (iconWidth +
+      iconMarginLeft +
+      iconMarginRight +
+      itemMarginLeft +
+      itemMarginRight +
+      itemPaddingLeft +
+      itemPaddingRight);
+
+  const maxWidth =
+    Number.isNaN(calculatedMaxWidth) || calculatedMaxWidth <= 0
+      ? sheetWidth
+      : calculatedMaxWidth;
+
+  const label1Default = blockItemStyle?.textLabel1?.default;
 
   return {
     fontFamily: platformSelect({
@@ -91,8 +147,11 @@ export function defaultItemLabelProps(
       ios: modal_bottom_sheet_item_label_ios_letter_spacing,
       android: modal_bottom_sheet_item_label_android_letter_spacing,
     }),
-    fontSize: modal_bottom_sheet_item_label_font_size,
-    color: modal_bottom_sheet_item_label_font_color,
+    fontSize: toNumberWithDefault(
+      modal_bottom_sheet_item_label_font_size,
+      label1Default?.fontSize
+    ),
+    color: label1Default?.fontColor || modal_bottom_sheet_item_label_font_color,
     focusColor: modal_bottom_sheet_item_label_focus_font_color,
     hoverSelectedColor: modal_bottom_sheet_item_label_hover_selected_font_color,
     selectedColor: modal_bottom_sheet_item_label_selected_font_color,
@@ -146,7 +205,8 @@ export function getItemLabelProps(
   width: number,
   labelProps?:
     | ((theme: PluginConfiguration, width: number) => ItemLabelProps)
-    | ItemLabelProps
+    | ItemLabelProps,
+  blockItemStyle?: Record<string, any>
 ) {
   if (labelProps) {
     return typeof labelProps === "function"
@@ -154,7 +214,7 @@ export function getItemLabelProps(
       : labelProps;
   }
 
-  return defaultItemLabelProps(theme, width);
+  return defaultItemLabelProps(theme, width, blockItemStyle);
 }
 
 export function getItemProps(
@@ -162,7 +222,8 @@ export function getItemProps(
   width: number,
   itemProps?:
     | ((theme: PluginConfiguration, width: number) => ItemProps)
-    | ItemProps
+    | ItemProps,
+  blockItemStyle?: Record<string, any>
 ) {
   if (itemProps) {
     return typeof itemProps === "function"
@@ -170,5 +231,5 @@ export function getItemProps(
       : itemProps;
   }
 
-  return defaultItemProps(theme, width);
+  return defaultItemProps(theme, width, blockItemStyle);
 }

package/Components/OfflineHandler/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,88 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OfflineHandler renders 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-      "position": "relative",
-    }
-  }
->
-  <View
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        {
-          "alignItems": "center",
-          "backgroundColor": undefined,
-          "flex": 1,
-          "height": 88,
-          "justifyContent": "center",
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-          "transform": [
-            {
-              "translateY": -88,
-            },
-          ],
-          "width": "100%",
-        }
-      }
-    >
-      <View
-        style={
-          {
-            "backgroundColor": undefined,
-            "height": 44,
-          }
-        }
-      />
-      <Text
-        style={
-          {
-            "color": undefined,
-            "fontFamily": undefined,
-            "fontSize": undefined,
-            "letterSpacing": undefined,
-            "lineHeight": undefined,
-          }
-        }
-      >
-        You are back online
-      </Text>
-    </View>
-  </View>
-</View>
+exports[`OfflineHandler renders its children without wrapping them in a notification view 1`] = `
+<Text>
+  child content
+</Text>
 `;