@applicaster/zapp-react-native-ui-components 16.0.0-rc.57 → 16.0.0-rc.58

package/Components/ModalComponent/SortableList.tsx

@@ -0,0 +1,142 @@
+import React, { useCallback, useEffect, useState } from "react";
+import Sortable from "react-native-sortables";
+import { Text, View, ViewStyle } from "react-native";
+import Animated, { useAnimatedRef } from "react-native-reanimated";
+
+const DEFAULT_HEADERS: any[] = [];
+const DEFAULT_SORTABLE_DATA: any[] = [];
+
+const renderHeaderComponent = (component: any) => {
+  if (!component) return null;
+  if (React.isValidElement(component)) return component;
+
+  if (typeof component === "function") {
+    const HeaderComponent = component;
+
+    return <HeaderComponent />;
+  }
+
+  return null;
+};
+
+const SortableListHeader = ({
+  title,
+  style,
+}: {
+  title?: string;
+  style?: ViewStyle;
+}) => {
+  const displayTitle = typeof title === "string" ? title : String(title ?? "");
+
+  return (
+    <View style={style}>
+      {displayTitle ? <Text>{displayTitle}</Text> : null}
+    </View>
+  );
+};
+
+export type SortableListProps = {
+  scrollViewStyle?: ViewStyle;
+  contentContainerStyle?: ViewStyle;
+  itemStyle?: ViewStyle;
+  headerStyle?: ViewStyle;
+  columns?: number;
+  rowGap?: number;
+  columnGap?: number;
+  spacing?: number;
+  keyExtractor?: (item: any, index?: number) => string;
+  renderItem: ({
+    item,
+    index,
+    renderHandle,
+  }: {
+    item: any;
+    index: number;
+    renderHandle: (children: React.ReactElement) => React.ReactElement;
+  }) => React.ReactNode;
+  sortableData?: any[];
+  headers?: { index: number; title?: string; component: any }[];
+  onDragEnd?: (params: {
+    fromIndex?: number;
+    toIndex?: number;
+    from?: number;
+    to?: number;
+    data: any[];
+  }) => void;
+};
+
+export const SortableList = ({
+  scrollViewStyle,
+  contentContainerStyle,
+  itemStyle,
+  headerStyle,
+  columns = 1,
+  rowGap = 0,
+  columnGap = 0,
+  keyExtractor = (item, index) =>
+    `sortable-item-${item?.id ?? item?.title ?? index}`,
+  renderItem,
+  sortableData = DEFAULT_SORTABLE_DATA,
+  headers = DEFAULT_HEADERS,
+  onDragEnd,
+}: SortableListProps) => {
+  const scrollableRef = useAnimatedRef<Animated.ScrollView>();
+
+  const [localData, setLocalData] = useState(sortableData);
+
+  useEffect(() => {
+    setLocalData(sortableData);
+  }, [sortableData]);
+
+  const handleDragEnd = useCallback(
+    (params: any) => {
+      if (params?.data) {
+        setLocalData(params.data);
+      }
+
+      if (onDragEnd) {
+        onDragEnd(params);
+      }
+    },
+    [onDragEnd]
+  );
+
+  return (
+    <Animated.ScrollView
+      ref={scrollableRef}
+      style={scrollViewStyle}
+      contentContainerStyle={contentContainerStyle}
+    >
+      {(headers || []).map((header, idx) => (
+        <View key={`static-header-${idx}`} style={headerStyle}>
+          {header.title ? (
+            <SortableListHeader title={header.title} />
+          ) : (
+            renderHeaderComponent(header.component)
+          )}
+        </View>
+      ))}
+      <Sortable.Grid
+        scrollableRef={scrollableRef}
+        customHandle
+        columns={columns}
+        rowGap={rowGap}
+        columnGap={columnGap}
+        data={localData}
+        keyExtractor={keyExtractor}
+        onDragEnd={handleDragEnd}
+        renderItem={({ item, index }) => (
+          <View key={keyExtractor(item, index)} style={itemStyle}>
+            {renderItem({
+              item,
+              index,
+              renderHandle: (children) => (
+                <Sortable.Handle>{children}</Sortable.Handle>
+              ),
+            })}
+          </View>
+        )}
+      />
+    </Animated.ScrollView>
+  );
+};

package/Components/ModalComponent/TextInputContent.tsx

@@ -0,0 +1,100 @@
+import React, { useCallback, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { actionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
+import {
+  AudioPlayerInput,
+  VARIANT_NAME_PLAYLIST_INPUT,
+} from "./AudioPlayer/Components/Input";
+import {
+  AudioPlayerButton,
+  VARIANT_TEXT_ONLY,
+} from "./AudioPlayer/Components/Button";
+
+export type TextInputContentProps = {
+  /** Injected by the sheet host; unused for layout (header is owned by ModalComponent). */
+  dismiss?: () => void;
+  width?: number;
+  maxHeight?: number;
+  currentRoute?: boolean;
+  inputLabel?: string;
+  defaultValue?: string;
+  buttonLabel: string;
+  actions: ActionType[];
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 20,
+    paddingBottom: 8,
+  },
+  inputWrap: {
+    marginTop: 8,
+    marginBottom: 24,
+  },
+});
+
+/**
+ * Modal body only — input + submit.
+ * Standard dismiss header comes from BottomSheetModalContent / ModalHeader.
+ */
+export function TextInputContent(props: TextInputContentProps) {
+  const { inputLabel, defaultValue = "", buttonLabel, actions } = props;
+
+  const [textValue, setTextValue] = useState(defaultValue);
+  const [submitting, setSubmitting] = useState(false);
+
+  const onSubmit = useCallback(async () => {
+    if (submitting) {
+      return;
+    }
+
+    setSubmitting(true);
+
+    try {
+      const updatedActions = (actions || []).map((item) => {
+        if (item.type === "sendCloudEvent" || item.options?.data) {
+          return {
+            ...item,
+            options: {
+              ...item.options,
+              data: {
+                ...(item.options?.data || {}),
+                name: textValue,
+              },
+            },
+          };
+        }
+
+        return item;
+      });
+
+      await actionExecutor.handleActions(updatedActions);
+      await actionExecutor.handleAction({ type: "dismissBottomSheet" });
+    } finally {
+      setSubmitting(false);
+    }
+  }, [submitting, actions, textValue]);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.inputWrap}>
+        <AudioPlayerInput
+          configuration={VARIANT_NAME_PLAYLIST_INPUT}
+          data={{
+            placeholder: inputLabel || "",
+            label: inputLabel,
+          }}
+          value={textValue}
+          onChangeText={setTextValue}
+          onClearPress={() => setTextValue("")}
+        />
+      </View>
+      <AudioPlayerButton
+        configuration={VARIANT_TEXT_ONLY}
+        data={{ title: buttonLabel }}
+        onPress={onSubmit}
+        disabled={submitting}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,238 @@
+import React from "react";
+import { render, screen } from "@testing-library/react-native";
+import { BottomSheetModalContent } from "../BottomSheetModalContent";
+import { ContentViewModel } from "@applicaster/zapp-react-native-utils/modalState";
+
+jest.mock("react-native-sortables", () => {
+  const { View } = require("react-native");
+
+  const Grid = ({ data, renderItem }: any) => (
+    <View testID="sortable-grid">
+      {(data || []).map((item: any, index: number) =>
+        renderItem({
+          item,
+          index,
+          renderHandle: (children: any) => (
+            <View testID={`sortable-handle-${index}`}>{children}</View>
+          ),
+        })
+      )}
+    </View>
+  );
+
+  const Handle = ({ children }: any) => (
+    <View testID="sortable-handle-wrapper">{children}</View>
+  );
+
+  return {
+    __esModule: true,
+    default: {
+      Grid,
+      Handle,
+    },
+    Grid,
+    Handle,
+  };
+});
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: () => ({
+    modal_bottom_sheet_padding_top: 0,
+    modal_bottom_sheet_padding_bottom: 0,
+    modal_bottom_sheet_background_color: "#000",
+    modal_bottom_sheet_item_selected_icon: null,
+  }),
+}));
+
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  usePlugins: () => [],
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useLocalizedStrings: () => ({}),
+}));
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+}));
+
+jest.mock("../Header", () => ({
+  ModalHeader: ({ title }: any) => {
+    const { Text } = require("react-native");
+
+    return <Text testID="default-header">{title}</Text>;
+  },
+}));
+
+jest.mock("../Button", () => ({
+  Button: ({ label }: any) => {
+    const { Text } = require("react-native");
+
+    return <Text testID="generic-button">{label}</Text>;
+  },
+}));
+
+jest.mock("../AudioPlayer/Components/Item", () => ({
+  AudioPlayerTrackItem: ({ data }: any) => {
+    const { Text } = require("react-native");
+
+    return <Text testID="selectable-row">{data.textLabel1}</Text>;
+  },
+  mapMenuItemToPlaylistData: (item: any) => ({ textLabel1: item.title }),
+  VARIANT_PLAYLIST_ITEM: {},
+}));
+
+jest.mock("../AudioPlayer/Components", () => ({
+  NowPlayingHeaderSection: () => null,
+  AudioPlayerButton: ({ data, onPress }: any) => {
+    const { Text } = require("react-native");
+
+    return (
+      <Text testID="create-playlist-button" onPress={onPress}>
+        {data.title}
+      </Text>
+    );
+  },
+  VARIANT_WITH_ICON: {},
+}));
+
+const baseProps = {
+  items: [{ id: "track-a", title: "Track A", label: "Track A" }],
+  onPress: jest.fn(),
+  width: 320,
+  currentRoute: true,
+  dismiss: jest.fn(),
+  title: "Sheet Title",
+  maxHeight: 400,
+};
+
+describe("BottomSheetModalContent role/behavior cells", () => {
+  it("renders standard Button rows and default header when no viewModel/role", () => {
+    render(<BottomSheetModalContent {...baseProps} />);
+
+    expect(screen.getByTestId("default-header")).toBeTruthy();
+    expect(screen.getByTestId("generic-button")).toBeTruthy();
+    expect(screen.queryByTestId("selectable-row")).toBeNull();
+  });
+
+  it("renders selectable rows when viewModel has collection_selector role", () => {
+    const viewModel = new ContentViewModel({
+      title: "Playlists",
+      items: [{ id: "fav-1", title: "Favorites" }],
+      role: "collection_selector",
+      behavior: { selectMode: "multi", currentSelection: [] },
+    });
+
+    render(<BottomSheetModalContent {...baseProps} viewModel={viewModel} />);
+
+    expect(screen.getByTestId("default-header")).toBeTruthy();
+    expect(screen.getByTestId("selectable-row")).toBeTruthy();
+    expect(screen.queryByTestId("generic-button")).toBeNull();
+  });
+
+  it("does not accept styleVariant as a rendering input", () => {
+    render(
+      <BottomSheetModalContent
+        {...baseProps}
+        {...({ styleVariant: "audio_player" } as any)}
+      />
+    );
+
+    expect(screen.getByTestId("generic-button")).toBeTruthy();
+    expect(screen.queryByTestId("selectable-row")).toBeNull();
+  });
+
+  it("renders SortableList when viewModel has dynamic_collection role with reorder operation", () => {
+    const moveMock = jest.fn();
+    const { BehaviorSubject } = require("rxjs");
+
+    const viewModel = new ContentViewModel({
+      title: "Queue",
+      items: [
+        { id: "t1", title: "Track 1" },
+        { id: "t2", title: "Track 2" },
+      ],
+      role: "dynamic_collection",
+      dynamicCollection: { operations: ["remove", "reorder"] },
+    });
+
+    viewModel.editableCollection = {
+      items$: new BehaviorSubject([
+        { id: "t1", title: "Track 1" },
+        { id: "t2", title: "Track 2" },
+      ]),
+      operations: ["remove", "reorder"],
+      move: moveMock,
+    };
+
+    render(<BottomSheetModalContent {...baseProps} viewModel={viewModel} />);
+
+    expect(screen.getByTestId("sortable-grid")).toBeTruthy();
+  });
+
+  it("renders create playlist button when operations include add and calls editableCollection.add on press", () => {
+    const addMock = jest.fn();
+    const { BehaviorSubject } = require("rxjs");
+
+    const viewModel = new ContentViewModel({
+      title: "Playlists",
+      items: [{ id: "p1", title: "Playlist 1" }],
+      role: "collection_selector",
+      dynamicCollection: { operations: ["add"] },
+    });
+
+    viewModel.editableCollection = {
+      items$: new BehaviorSubject([{ id: "p1", title: "Playlist 1" }]),
+      operations: ["add"],
+      add: addMock,
+    };
+
+    render(<BottomSheetModalContent {...baseProps} viewModel={viewModel} />);
+
+    const createBtn = screen.getByTestId("create-playlist-button");
+    expect(createBtn).toBeTruthy();
+
+    const { fireEvent } = require("@testing-library/react-native");
+    fireEvent.press(createBtn);
+
+    expect(addMock).toHaveBeenCalledWith({
+      id: "create_new_playlist",
+      title: "Create New Playlist",
+    });
+  });
+
+  it("honors disableScrollViewWrap in contentComponentProps to bypass ScrollView wrapping", () => {
+    const CustomComponent = () => (
+      <React.Fragment>Custom Content</React.Fragment>
+    );
+
+    const { UNSAFE_getByType } = render(
+      <BottomSheetModalContent
+        {...baseProps}
+        contentComponent={CustomComponent}
+        contentComponentProps={{ disableScrollViewWrap: true }}
+      />
+    );
+
+    const { ScrollView } = require("react-native");
+    expect(() => UNSAFE_getByType(ScrollView)).toThrow();
+  });
+
+  it("honors static disableScrollViewWrap property on ContentComponent", () => {
+    const CustomSelfScrollingComponent: any = () => (
+      <React.Fragment>Self Scrolling</React.Fragment>
+    );
+
+    CustomSelfScrollingComponent.disableScrollViewWrap = true;
+
+    const { UNSAFE_getByType } = render(
+      <BottomSheetModalContent
+        {...baseProps}
+        contentComponent={CustomSelfScrollingComponent}
+      />
+    );
+
+    const { ScrollView } = require("react-native");
+    expect(() => UNSAFE_getByType(ScrollView)).toThrow();
+  });
+});

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

@@ -0,0 +1,120 @@
+import React from "react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react-native";
+import { actionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor",
+  () => ({
+    actionExecutor: {
+      handleAction: jest.fn().mockResolvedValue(undefined),
+      handleActions: jest.fn().mockResolvedValue(undefined),
+    },
+    ActionResult: { Success: "success", Error: "error" },
+  })
+);
+
+jest.mock("../AudioPlayer/Components/Input", () => ({
+  AudioPlayerInput: ({ value, onChangeText, data }: any) => {
+    const { TextInput, Text } = require("react-native");
+
+    return (
+      <>
+        <Text testID="input-label">{data?.label}</Text>
+        <TextInput
+          testID="playlist-input"
+          value={value}
+          onChangeText={onChangeText}
+          placeholder={data?.placeholder}
+        />
+      </>
+    );
+  },
+  VARIANT_NAME_PLAYLIST_INPUT: {},
+}));
+
+jest.mock("../AudioPlayer/Components/Button", () => ({
+  AudioPlayerButton: ({ data, onPress }: any) => {
+    const { Pressable, Text } = require("react-native");
+
+    return (
+      <Pressable testID="submit-button" onPress={onPress}>
+        <Text>{data?.title}</Text>
+      </Pressable>
+    );
+  },
+  VARIANT_TEXT_ONLY: {},
+}));
+
+import { TextInputContent } from "../TextInputContent";
+
+const submitAction = {
+  type: "sendCloudEvent",
+  options: {
+    url: "https://server.com/cloud-events",
+    type: "com.applicaster.collection.create.v1",
+    subject: "edit_collection",
+    data: { collectionId: "playlist-123" },
+  },
+};
+
+const baseProps = {
+  inputLabel: "Name your playlist",
+  defaultValue: "Summer Hits",
+  buttonLabel: "Update",
+  actions: [submitAction],
+};
+
+describe("TextInputContent", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders default value and button label without a modal header", () => {
+    render(<TextInputContent {...baseProps} />);
+
+    expect(screen.queryByTestId("sheet-header")).toBeNull();
+
+    expect(screen.getByTestId("playlist-input").props.value).toBe(
+      "Summer Hits"
+    );
+
+    expect(screen.getByTestId("submit-button")).toBeTruthy();
+    expect(screen.getByText("Update")).toBeTruthy();
+  });
+
+  it("on submit merges name into sendCloudEvent data then dismisses", async () => {
+    render(<TextInputContent {...baseProps} />);
+
+    fireEvent.changeText(screen.getByTestId("playlist-input"), "New Name");
+    fireEvent.press(screen.getByTestId("submit-button"));
+
+    await waitFor(() => {
+      expect(actionExecutor.handleActions).toHaveBeenCalledTimes(1);
+      expect(actionExecutor.handleAction).toHaveBeenCalledTimes(1);
+    });
+
+    expect(actionExecutor.handleActions).toHaveBeenCalledWith([
+      {
+        type: "sendCloudEvent",
+        options: {
+          url: "https://server.com/cloud-events",
+          type: "com.applicaster.collection.create.v1",
+          subject: "edit_collection",
+          data: {
+            collectionId: "playlist-123",
+            name: "New Name",
+          },
+        },
+      },
+    ]);
+
+    expect(actionExecutor.handleAction).toHaveBeenCalledWith({
+      type: "dismissBottomSheet",
+    });
+  });
+});

package/Components/ModalComponent/__tests__/showTextInput.test.ts

@@ -0,0 +1,95 @@
+import {
+  actionExecutor,
+  ActionResult,
+} from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
+import { TextInputContent } from "../TextInputContent";
+import { showTextInputAction } from "../showTextInput";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor",
+  () => ({
+    actionExecutor: {
+      handleAction: jest.fn().mockResolvedValue("success"),
+    },
+    ActionResult: { Success: "success", Error: "error" },
+  })
+);
+
+jest.mock("../TextInputContent", () => ({
+  TextInputContent: function MockTextInputContent() {
+    return null;
+  },
+}));
+
+describe("showTextInputAction", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("delegates to openBottomSheet with TextInputContent as body-only component", async () => {
+    const action = {
+      type: "showTextInput",
+      options: {
+        headerTitle: "Create Playlist",
+        inputLabel: "Name your playlist",
+        defaultValue: "",
+        buttonLabel: "Create",
+        actions: [
+          {
+            type: "sendCloudEvent",
+            options: {
+              url: "https://example.com/events",
+              type: "com.applicaster.collection.create.v1",
+              data: {},
+            },
+          },
+          {
+            type: "showToast",
+            options: {
+              message: "Playlist created.",
+            },
+          },
+        ],
+      },
+    };
+
+    const result = await showTextInputAction(action as any);
+
+    expect(result).toBe(ActionResult.Success);
+    expect(actionExecutor.handleAction).toHaveBeenCalledTimes(1);
+
+    expect(actionExecutor.handleAction).toHaveBeenCalledWith(
+      {
+        type: "openBottomSheet",
+        options: {
+          header: {
+            title: "Create Playlist",
+          },
+          content: {
+            component: TextInputContent,
+            props: {
+              inputLabel: "Name your playlist",
+              defaultValue: "",
+              buttonLabel: "Create",
+              actions: action.options.actions,
+            },
+          },
+        },
+      },
+      undefined
+    );
+  });
+
+  it("returns Error when required options are missing", async () => {
+    const action = {
+      type: "showTextInput",
+      options: {
+        headerTitle: "Create Playlist",
+      },
+    };
+
+    const result = await showTextInputAction(action as any);
+    expect(result).toBe(ActionResult.Error);
+    expect(actionExecutor.handleAction).not.toHaveBeenCalled();
+  });
+});