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

package/modalState/components/BottomSheetHeader.tsx

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

@@ -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";