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

package/modalState/components/BottomSheetHeader.tsx

@@ -1,245 +0,0 @@
-import React from "react";
-import {
-  View,
-  Text,
-  StyleSheet,
-  Pressable,
-  ActivityIndicator,
-} from "react-native";
-
-const styles = StyleSheet.create({
-  headerContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    backgroundColor: "#262626",
-    paddingVertical: 12,
-  },
-  navBarBorder: {
-    borderBottomWidth: 1,
-    borderBottomColor: "#333333",
-  },
-  headerGutter16: {
-    paddingHorizontal: 16,
-  },
-  headerGutter12: {
-    paddingHorizontal: 12,
-  },
-  headerTitle: {
-    color: "#FFFFFF",
-    fontWeight: "bold",
-    fontSize: 16,
-    textAlign: "center",
-  },
-  headerTitleCenter: {
-    fontSize: 17,
-    flex: 1,
-    textAlign: "center",
-  },
-  headerTitleSection: {
-    color: "#aaaaaa",
-    fontSize: 13,
-    fontWeight: "600",
-    textTransform: "uppercase",
-  },
-  titleWrapper: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  subtitle: {
-    color: "#aaaaaa",
-    fontSize: 11,
-    marginTop: 2,
-    textAlign: "center",
-  },
-  backButton: {
-    paddingVertical: 6,
-    paddingHorizontal: 12,
-    borderRadius: 6,
-    backgroundColor: "#333333",
-    width: 70,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  backButtonText: {
-    color: "#ffffff",
-    fontSize: 14,
-    fontWeight: "600",
-  },
-  closeButton: {
-    width: 44,
-    height: 44,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  closeButtonText: {
-    color: "#FFFFFF",
-    fontSize: 18,
-  },
-  headerActionButton: {
-    backgroundColor: "#3e3e3e",
-    paddingVertical: 6,
-    paddingHorizontal: 10,
-    borderRadius: 16,
-    minWidth: 70,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  headerActionText: {
-    color: "#FFFFFF",
-    fontWeight: "600",
-    fontSize: 14,
-  },
-  navSpacer: {
-    width: 70,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  pressedState: {
-    opacity: 0.7,
-  },
-});
-
-export interface BottomSheetHeaderProps {
-  variant?: "single" | "actions" | "section";
-  title: string;
-  subtitle?: string;
-  onClose?: () => void;
-  onBack?: () => void;
-  onCancel?: () => void;
-  onDone?: () => void;
-  onClear?: () => void;
-  isLoading?: boolean;
-}
-
-export const BottomSheetHeader: React.FC<BottomSheetHeaderProps> = ({
-  variant = "single",
-  title,
-  subtitle,
-  onClose,
-  onBack,
-  onCancel,
-  onDone,
-  onClear,
-  isLoading = false,
-}) => {
-  if (variant === "actions") {
-    return (
-      <View
-        style={[
-          styles.headerContainer,
-          styles.headerGutter12,
-          styles.navBarBorder,
-        ]}
-      >
-        <Pressable
-          style={({ pressed }) => [
-            styles.headerActionButton,
-            pressed && styles.pressedState,
-          ]}
-          onPress={onCancel}
-        >
-          <Text style={styles.headerActionText}>Cancel</Text>
-        </Pressable>
-        <View style={styles.titleWrapper}>
-          <Text
-            numberOfLines={1}
-            style={[styles.headerTitle, styles.headerTitleCenter]}
-          >
-            {title}
-          </Text>
-          {subtitle ? (
-            <Text numberOfLines={1} style={styles.subtitle}>
-              {subtitle}
-            </Text>
-          ) : null}
-        </View>
-        <Pressable
-          style={({ pressed }) => [
-            styles.headerActionButton,
-            pressed && styles.pressedState,
-          ]}
-          onPress={onDone}
-        >
-          <Text style={styles.headerActionText}>Done</Text>
-        </Pressable>
-      </View>
-    );
-  }
-
-  if (variant === "section") {
-    return (
-      <View style={[styles.headerContainer, styles.headerGutter12]}>
-        <Text style={[styles.headerTitle, styles.headerTitleSection]}>
-          {title}
-        </Text>
-        {onClear ? (
-          <Pressable
-            style={({ pressed }) => [
-              styles.headerActionButton,
-              pressed && styles.pressedState,
-            ]}
-            onPress={onClear}
-          >
-            <Text style={styles.headerActionText}>Clear</Text>
-          </Pressable>
-        ) : null}
-      </View>
-    );
-  }
-
-  // Default: Single Line with Back and Close button options
-  return (
-    <View
-      style={[
-        styles.headerContainer,
-        styles.headerGutter16,
-        styles.navBarBorder,
-      ]}
-    >
-      {onBack ? (
-        <Pressable
-          onPress={onBack}
-          style={({ pressed }) => [
-            styles.backButton,
-            pressed && styles.pressedState,
-          ]}
-        >
-          <Text style={styles.backButtonText}>‹ Back</Text>
-        </Pressable>
-      ) : (
-        <View style={styles.navSpacer} />
-      )}
-
-      <View style={styles.titleWrapper}>
-        <Text numberOfLines={1} style={styles.headerTitle}>
-          {title}
-        </Text>
-        {subtitle ? (
-          <Text numberOfLines={1} style={styles.subtitle}>
-            {subtitle}
-          </Text>
-        ) : null}
-      </View>
-
-      {isLoading ? (
-        <View style={styles.navSpacer}>
-          <ActivityIndicator size="small" color="#aaaaaa" />
-        </View>
-      ) : onClose ? (
-        <Pressable
-          style={({ pressed }) => [
-            styles.closeButton,
-            pressed && styles.pressedState,
-          ]}
-          onPress={onClose}
-        >
-          <Text style={styles.closeButtonText}>✕</Text>
-        </Pressable>
-      ) : (
-        <View style={styles.navSpacer} />
-      )}
-    </View>
-  );
-};

package/modalState/components/PrimaryButton.tsx

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

@@ -1,241 +0,0 @@
-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/store.ts

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

@@ -1,55 +0,0 @@
-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;
-}