@applicaster/zapp-react-native-ui-components 15.1.13-alpha.1034774223 → 15.1.13

package/Components/ModalComponent/SortableList.tsx

@@ -1,142 +0,0 @@
-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/SortableList.web.tsx

@@ -1,102 +0,0 @@
-import React from "react";
-import { Text, View, ViewStyle, ScrollView } from "react-native";
-
-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,
-  keyExtractor = (item, index) =>
-    `sortable-item-${item?.id ?? item?.title ?? index}`,
-  renderItem,
-  sortableData = DEFAULT_SORTABLE_DATA,
-  headers = DEFAULT_HEADERS,
-}: SortableListProps) => {
-  return (
-    <ScrollView
-      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>
-      ))}
-      {(sortableData || []).map((item, index) => (
-        <View key={keyExtractor(item, index)} style={itemStyle}>
-          {renderItem({
-            item,
-            index,
-            renderHandle: (children) => children,
-          })}
-        </View>
-      ))}
-    </ScrollView>
-  );
-};

package/Components/ModalComponent/TextInputContent.tsx

@@ -1,100 +0,0 @@
-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

@@ -1,238 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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",
-    });
-  });
-});