@applicaster/zapp-react-native-utils 16.0.0-alpha.9183418480 → 16.0.0-alpha.9530606740

package/modalState/components/PrimaryButton.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Text, StyleSheet, Pressable } from "react-native";
+
+const styles = StyleSheet.create({
+  primaryButton: {
+    flexDirection: "row",
+    backgroundColor: "#FFFFFF",
+    borderRadius: 12,
+    padding: 12,
+    marginHorizontal: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 16,
+    marginBottom: 8,
+  },
+  primaryButtonText: {
+    color: "#000000",
+    fontSize: 15,
+    fontWeight: "bold",
+  },
+  primaryButtonIcon: {
+    color: "#000000",
+    fontSize: 18,
+    marginRight: 8,
+  },
+  pressedState: {
+    opacity: 0.8,
+  },
+});
+
+export interface PrimaryButtonProps {
+  title: string;
+  icon?: string;
+  onPress?: () => void;
+}
+
+export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
+  title,
+  icon,
+  onPress,
+}) => {
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        styles.primaryButton,
+        pressed && styles.pressedState,
+      ]}
+      onPress={onPress}
+    >
+      {icon ? <Text style={styles.primaryButtonIcon}>{icon}</Text> : null}
+      <Text style={styles.primaryButtonText}>{title}</Text>
+    </Pressable>
+  );
+};

package/modalState/components/TrackItem.tsx

@@ -0,0 +1,241 @@
+import React, { useState } from "react";
+import { View, Text, StyleSheet, Pressable, Image } from "react-native";
+
+const styles = StyleSheet.create({
+  trackItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "#2a2a2a",
+    backgroundColor: "#1e1e1e",
+  },
+  trackItemFocused: {
+    backgroundColor: "#2d2d2d",
+  },
+  trackImage: {
+    width: 48,
+    height: 48,
+    borderRadius: 6,
+    marginRight: 12,
+    backgroundColor: "#2a2a2a",
+  },
+  trackImagePlaceholder: {
+    width: 48,
+    height: 48,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    backgroundColor: "#333",
+    marginRight: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  trackImageText: {
+    color: "#fff",
+    fontSize: 20,
+  },
+  trackTextContainer: {
+    flex: 1,
+    justifyContent: "center",
+  },
+  nowPlayingLabel: {
+    color: "#30d158",
+    fontSize: 11,
+    fontWeight: "600",
+    marginBottom: 2,
+    textTransform: "uppercase",
+  },
+  trackTitle: {
+    color: "#FFFFFF",
+    fontSize: 15,
+    fontWeight: "600",
+  },
+  trackSubtitle: {
+    color: "#999999",
+    fontSize: 13,
+    fontWeight: "500",
+    marginTop: 2,
+  },
+  trackActions: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  queuedActionsContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  trackActionButton: {
+    padding: 10,
+    marginLeft: 4,
+  },
+  trackActionIcon: {
+    color: "#FFFFFF",
+    fontSize: 18,
+  },
+  playPauseButton: {
+    width: 36,
+    height: 36,
+    backgroundColor: "#FFFFFF",
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: 8,
+  },
+  playPauseText: {
+    color: "#000000",
+    fontWeight: "bold",
+    fontSize: 12,
+  },
+  radioContainer: {
+    padding: 10,
+  },
+  radioUnselected: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#999",
+  },
+  radioSelected: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: "#FFFFFF",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  radioCheck: {
+    color: "#000000",
+    fontSize: 14,
+    fontWeight: "bold",
+  },
+  pressedState: {
+    opacity: 0.7,
+  },
+});
+
+export interface TrackItemProps {
+  variant: "nowPlaying" | "queued" | "playlist";
+  title: string;
+  subtitle?: string;
+  icon?: string;
+  isSelected?: boolean;
+  isPlaying?: boolean;
+  onPress?: () => void;
+  onSecondaryPress?: () => void;
+  onRemovePress?: () => void;
+  onPlayPausePress?: () => void;
+}
+
+export const TrackItem: React.FC<TrackItemProps> = ({
+  variant,
+  title,
+  subtitle,
+  icon,
+  isSelected = false,
+  isPlaying = false,
+  onPress,
+  onSecondaryPress,
+  onRemovePress,
+  onPlayPausePress,
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const isIconUri =
+    icon &&
+    (icon.startsWith("http") ||
+      icon.startsWith("file") ||
+      icon.includes("/") ||
+      icon.includes("."));
+
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        styles.trackItem,
+        (pressed || isFocused) && styles.trackItemFocused,
+      ]}
+      onPress={onPress}
+      onPressIn={() => setIsFocused(true)}
+      onPressOut={() => setIsFocused(false)}
+    >
+      {icon ? (
+        isIconUri ? (
+          <Image source={{ uri: icon }} style={styles.trackImage} />
+        ) : (
+          <View style={styles.trackImagePlaceholder}>
+            <Text style={styles.trackImageText}>{icon}</Text>
+          </View>
+        )
+      ) : (
+        <View style={styles.trackImagePlaceholder} />
+      )}
+
+      <View style={styles.trackTextContainer}>
+        {variant === "nowPlaying" ? (
+          <Text style={styles.nowPlayingLabel}>♪ Now Playing</Text>
+        ) : null}
+        <Text numberOfLines={1} style={styles.trackTitle}>
+          {title}
+        </Text>
+        {subtitle ? (
+          <Text numberOfLines={1} style={styles.trackSubtitle}>
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+
+      <View style={styles.trackActions}>
+        {variant === "nowPlaying" ? (
+          <Pressable
+            style={({ pressed }) => [
+              styles.playPauseButton,
+              pressed && styles.pressedState,
+            ]}
+            onPress={onPlayPausePress || onPress}
+          >
+            <Text style={styles.playPauseText}>{isPlaying ? "II" : "▶"}</Text>
+          </Pressable>
+        ) : null}
+
+        {variant === "queued" ? (
+          <View style={styles.queuedActionsContainer}>
+            {onRemovePress ? (
+              <Pressable
+                style={({ pressed }) => [
+                  styles.trackActionButton,
+                  pressed && styles.pressedState,
+                ]}
+                onPress={onRemovePress}
+              >
+                <Text style={styles.trackActionIcon}>⊖</Text>
+              </Pressable>
+            ) : null}
+            <Pressable
+              style={({ pressed }) => [
+                styles.trackActionButton,
+                pressed && styles.pressedState,
+              ]}
+              onPress={onSecondaryPress || onPress}
+            >
+              <Text style={styles.trackActionIcon}>≡</Text>
+            </Pressable>
+          </View>
+        ) : null}
+
+        {variant === "playlist" ? (
+          <View style={styles.radioContainer}>
+            {isSelected ? (
+              <View style={styles.radioSelected}>
+                <Text style={styles.radioCheck}>✓</Text>
+              </View>
+            ) : (
+              <View style={styles.radioUnselected} />
+            )}
+          </View>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+};

package/modalState/index.ts

@@ -1,83 +1,34 @@
-import { useStore, createStore } from "zustand";
+export {
+  modalStore,
+  useModalStore,
+  openModal,
+  dismissModal,
+  openBottomSheetModal,
+  useModalStoreState,
+} from "./store";
 
-interface ModalState {
-  visible: boolean;
-  screen: any;
-  options: Record<string, unknown>;
-  props: Record<string, unknown>;
-}
+export type { ModalState, ModalStore } from "./store";
 
-interface ModalStore {
-  modalState: ModalState;
-  setModalState: (newState: Partial<ModalState>) => void;
-  openModal: (
-    item: any,
-    options?: Record<string, unknown>,
-    props?: Record<string, unknown>
-  ) => void;
-  dismissModal: () => void;
-}
+export { modalOrchestrator } from "./ModalOrchestrator";
 
-const initialModalState: ModalState = {
-  visible: false,
-  screen: null,
-  options: {},
-  props: {},
-};
+export { ContentViewModel } from "./ContentViewModel";
 
-export const modalStore = createStore<ModalStore>((set) => ({
-  modalState: initialModalState,
-  setModalState: (newState) =>
-    set((state) => ({
-      modalState: { ...state.modalState, ...newState },
-    })),
-  openModal: ({ item, options = {}, props }: OpenModalArg) =>
-    set({
-      modalState: {
-        visible: true,
-        screen: item,
-        options: {
-          animated: true,
-          animationType: "slide",
-          onShow: () => {},
-          presentationStyle: "overFullScreen",
-          transparent: true,
-          ...options,
-          onDismiss: () => set({ modalState: initialModalState }),
-          onRequestClose: () => set({ modalState: initialModalState }),
-        },
-        props,
-      },
-    }),
-  dismissModal: () => set(() => ({ modalState: initialModalState })),
-}));
+export { BottomSheetHeader } from "./components/BottomSheetHeader";
 
-export const useModalStore = <T>(selector: (state: ModalStore) => T) =>
-  useStore(modalStore, selector);
+export { ActionItem } from "./components/ActionItem";
 
-export const openModal = modalStore.getInitialState().openModal;
+export { TrackItem } from "./components/TrackItem";
 
-export const dismissModal = modalStore.getInitialState().dismissModal;
+export { PrimaryButton } from "./components/PrimaryButton";
 
-export const openBottomSheetModal = ({
-  ModalBottomSheetContent,
-  modalBottomSheetContentProps,
-  props = {},
-  options = {},
-}: OpenModalBottomSheetArgs) => {
-  openModal({
-    item: {
-      ModalBottomSheetContent,
-      modalBottomSheetContentProps,
-    },
-    props,
-    options: {
-      animationType: "none",
-      animated: false,
-      ...options,
-    },
-  });
-};
+export type {
+  Menu,
+  MenuItem,
+  Header,
+  Content,
+  Action,
+  PresentSubMenuAction,
+  SecondaryAction,
+} from "./types";
 
-export const useModalStoreState = (): ModalState =>
-  useModalStore<ModalState>((state) => state.modalState);
+export { isPresentSubMenuAction } from "./types";

package/modalState/store.ts

@@ -0,0 +1,102 @@
+import { createStore, useStore } from "zustand";
+
+export interface ModalState {
+  visible: boolean;
+  screen: any;
+  options: Record<string, unknown>;
+  props: Record<string, unknown>;
+}
+
+export interface ModalStore {
+  modalState: ModalState;
+  setModalState: (newState: Partial<ModalState>) => void;
+  openModal: (
+    item: any,
+    options?: Record<string, unknown>,
+    props?: Record<string, unknown>
+  ) => void;
+  dismissModal: () => void;
+}
+
+const initialModalState: ModalState = {
+  visible: false,
+  screen: null,
+  options: {},
+  props: {},
+};
+
+export const modalStore = createStore<ModalStore>((set, get) => ({
+  modalState: initialModalState,
+  setModalState: (newState) =>
+    set((state) => ({
+      modalState: { ...state.modalState, ...newState },
+    })),
+  openModal: ({ item, options = {}, props }: OpenModalArg) => {
+    const resetStore = () => set({ modalState: initialModalState });
+    const { onDismiss, onRequestClose, ...restOptions } = options as any;
+
+    set({
+      modalState: {
+        visible: true,
+        screen: item,
+        options: {
+          animated: true,
+          animationType: "slide",
+          onShow: () => {},
+          presentationStyle: "overFullScreen",
+          transparent: true,
+          ...restOptions,
+          // Compose caller-provided callbacks with the store reset so both run
+          onDismiss: () => {
+            resetStore();
+            onDismiss?.();
+          },
+          onRequestClose: () => {
+            resetStore();
+            onRequestClose?.();
+          },
+        },
+        props,
+      },
+    });
+  },
+  dismissModal: () => {
+    const onDismiss = (get().modalState?.options as any)?.onDismiss;
+
+    if (typeof onDismiss === "function") {
+      onDismiss();
+    } else {
+      set({ modalState: initialModalState });
+    }
+  },
+}));
+
+export const useModalStore = <T>(selector: (state: ModalStore) => T) =>
+  useStore(modalStore, selector);
+
+export const openModal = modalStore.getInitialState().openModal;
+
+export const dismissModal = modalStore.getInitialState().dismissModal;
+
+export const openBottomSheetModal = ({
+  ModalBottomSheetContent,
+  modalBottomSheetContentProps,
+  props = {},
+  options = {},
+}: OpenModalBottomSheetArgs) => {
+  openModal({
+    item: {
+      ModalBottomSheetContent,
+      modalBottomSheetContentProps,
+    },
+    props,
+    options: {
+      animationType: "none",
+      animated: false,
+      ...options,
+    },
+  });
+};
+
+export const useModalStoreState = (): ModalState =>
+  useModalStore<ModalState>((state) => state.modalState);

package/modalState/types.ts

@@ -0,0 +1,55 @@
+export interface Header {
+  title: string;
+  subtitle?: string;
+  icon?: string;
+}
+
+export interface Action {
+  type: string;
+  payload?: any;
+  options?: any;
+}
+
+// Represented as 3 dots icon on top menu (opens new second level menu on desktop
+// or a new bottom sheet on mobile)
+export interface PresentSubMenuAction extends Action {
+  menu: Menu;
+}
+
+export interface SecondaryAction {
+  action: Action | PresentSubMenuAction;
+  icon?: string;
+}
+
+export interface MenuItem {
+  title: string;
+  summary?: string;
+  icon?: string;
+  isSelected?: boolean;
+  // When item represents an audio item, clicking on it will start playback
+  // and secondary action will allow to add it to queue or playlist
+  action?: Action | PresentSubMenuAction;
+  secondaryAction?: SecondaryAction;
+  submenu?: MenuItem[]; // todo: not needed. Must be replaced with PresentSubMenuAction
+  trailingButton?: any;
+}
+
+export interface Content {
+  title: string;
+  stickyTitle?: boolean;
+  items: MenuItem[];
+  itemsUrl?: string;
+  action?: Action;
+}
+
+export interface Menu {
+  header?: Header;
+  content: Content;
+  closeButton?: boolean;
+}
+
+export function isPresentSubMenuAction(
+  action: any
+): action is PresentSubMenuAction {
+  return !!action && typeof action === "object" && "menu" in action;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-alpha.9183418480",
+  "version": "16.0.0-alpha.9530606740",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-alpha.9183418480",
+    "@applicaster/applicaster-types": "16.0.0-alpha.9530606740",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/pipesUtils/__tests__/buildUrlWithQuery.test.ts

@@ -0,0 +1,33 @@
+import { buildUrlWithQuery } from "../withPipesEndpoint";
+
+describe("buildUrlWithQuery", () => {
+  it("returns the url unchanged when requestParams is null", () => {
+    expect(buildUrlWithQuery("https://foo.com/path", null)).toBe(
+      "https://foo.com/path"
+    );
+  });
+
+  it("returns the url unchanged when requestParams has no params", () => {
+    expect(buildUrlWithQuery("https://foo.com/path", { headers: {} })).toBe(
+      "https://foo.com/path"
+    );
+  });
+
+  it("returns the url unchanged when url is empty", () => {
+    expect(buildUrlWithQuery("", { params: { a: "1" } })).toBe("");
+  });
+
+  it("appends params to a url with no existing query", () => {
+    expect(
+      buildUrlWithQuery("https://foo.com/path", { params: { token: "abc" } })
+    ).toBe("https://foo.com/path?token=abc");
+  });
+
+  it("merges params with an existing query string", () => {
+    expect(
+      buildUrlWithQuery("https://foo.com/path?existing=1", {
+        params: { token: "abc" },
+      })
+    ).toBe("https://foo.com/path?existing=1&token=abc");
+  });
+});

package/pipesUtils/__tests__/withPipesEndpoint.test.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { render } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+const mockedUseBuildPipesUrl = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/feed", () => ({
+  useBuildPipesUrl: (args) => mockedUseBuildPipesUrl(args),
+}));
+
+const { withPipesEndpoint } = require("../withPipesEndpoint");
+
+// eslint-disable-next-line react/display-name
+const Wrapped = React.forwardRef((props: any, _ref) => (
+  <Text testID="wrapped">{`${props.uri}|${JSON.stringify(props.headers)}`}</Text>
+));
+
+describe("withPipesEndpoint", () => {
+  afterEach(() => jest.clearAllMocks());
+
+  it("renders nothing while the endpoint context is resolving", () => {
+    mockedUseBuildPipesUrl.mockReturnValue({ requestParams: null });
+
+    const Decorated = withPipesEndpoint(Wrapped);
+    const { queryByTestId } = render(<Decorated uri="https://foo.com" />);
+
+    expect(queryByTestId("wrapped")).toBeNull();
+  });
+
+  it("passes the uri through unchanged when there are no params", () => {
+    mockedUseBuildPipesUrl.mockReturnValue({ requestParams: {} });
+
+    const Decorated = withPipesEndpoint(Wrapped);
+    const { getByTestId } = render(<Decorated uri="https://foo.com/path" />);
+
+    expect(getByTestId("wrapped").props.children).toBe(
+      "https://foo.com/path|{}"
+    );
+  });
+
+  it("merges resolved params into the uri and forwards headers", () => {
+    mockedUseBuildPipesUrl.mockReturnValue({
+      requestParams: {
+        params: { token: "abc" },
+        headers: { Authorization: "Bearer xyz" },
+      },
+    });
+
+    const Decorated = withPipesEndpoint(Wrapped);
+    const { getByTestId } = render(<Decorated uri="https://foo.com/path" />);
+
+    expect(getByTestId("wrapped").props.children).toBe(
+      'https://foo.com/path?token=abc|{"Authorization":"Bearer xyz"}'
+    );
+  });
+});

package/pipesUtils/index.ts

@@ -0,0 +1 @@
+export { withPipesEndpoint, buildUrlWithQuery } from "./withPipesEndpoint";