@umituz/react-native-ai-generation-content 1.17.27 → 1.17.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.27",
+  "version": "1.17.29",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domain/interfaces/app-services.interface.ts

@@ -0,0 +1,122 @@
+/**
+ * App Services Interface
+ * Defines contracts for app-specific services that package uses
+ * Apps implement these interfaces to provide their specific logic
+ */
+
+/**
+ * Network service interface
+ * Handles network availability checks
+ */
+export interface INetworkService {
+  /**
+   * Check if device is online
+   */
+  isOnline: () => boolean;
+
+  /**
+   * Require network connection - throws if offline
+   */
+  requireNetwork: () => void;
+}
+
+/**
+ * Credit service interface
+ * Handles credit operations (check, deduct, refund)
+ */
+export interface ICreditService {
+  /**
+   * Check if user has enough credits
+   * @param cost - Required credit amount
+   * @returns true if has enough credits
+   */
+  checkCredits: (cost: number) => Promise<boolean>;
+
+  /**
+   * Deduct credits from user balance
+   * @param cost - Amount to deduct
+   */
+  deductCredits: (cost: number) => Promise<void>;
+
+  /**
+   * Refund credits on failure (non-user caused errors)
+   * @param amount - Amount to refund
+   * @param error - Original error (used to determine if refund is applicable)
+   */
+  refundCredits: (amount: number, error?: unknown) => Promise<void>;
+
+  /**
+   * Calculate credit cost for operation
+   * @param capability - Generation capability type
+   * @param metadata - Additional metadata for cost calculation
+   */
+  calculateCost: (
+    capability: string,
+    metadata?: Record<string, unknown>,
+  ) => number;
+}
+
+/**
+ * Paywall service interface
+ * Shows paywall UI when credits insufficient
+ */
+export interface IPaywallService {
+  /**
+   * Show paywall to user
+   * @param requiredCredits - Credits needed for operation
+   */
+  showPaywall: (requiredCredits: number) => void;
+}
+
+/**
+ * Auth service interface
+ * Handles user authentication
+ */
+export interface IAuthService {
+  /**
+   * Get current user ID
+   * @returns User ID or null if not authenticated
+   */
+  getUserId: () => string | null;
+
+  /**
+   * Check if user is authenticated
+   */
+  isAuthenticated: () => boolean;
+
+  /**
+   * Require authenticated user - throws if not authenticated
+   * @returns User ID
+   */
+  requireAuth: () => string;
+}
+
+/**
+ * Analytics service interface (optional)
+ * Tracks events for analytics
+ */
+export interface IAnalyticsService {
+  /**
+   * Track an event
+   * @param event - Event name
+   * @param data - Event data
+   */
+  track: (event: string, data: Record<string, unknown>) => void;
+}
+
+/**
+ * Combined app services interface
+ * Apps implement this to provide all required services
+ */
+export interface IAppServices {
+  readonly network: INetworkService;
+  readonly credits: ICreditService;
+  readonly paywall: IPaywallService;
+  readonly auth: IAuthService;
+  readonly analytics?: IAnalyticsService;
+}
+
+/**
+ * Partial app services for optional configuration
+ */
+export type PartialAppServices = Partial<IAppServices>;

package/src/domain/interfaces/index.ts

@@ -4,3 +4,4 @@
  */
 
 export * from "./ai-provider.interface";
+export * from "./app-services.interface";

package/src/index.ts

@@ -29,6 +29,14 @@ export type {
   VideoFeatureType,
   ImageFeatureInputData,
   VideoFeatureInputData,
+  // App Services Interfaces
+  INetworkService,
+  ICreditService,
+  IPaywallService,
+  IAuthService,
+  IAnalyticsService,
+  IAppServices,
+  PartialAppServices,
 } from "./domain/interfaces";
 
 export {
@@ -85,6 +93,23 @@ export {
   getPromptRequiredModes,
 } from "./domain/constants/processing-modes.constants";
 
+// =============================================================================
+// INFRASTRUCTURE LAYER - App Services Configuration
+// =============================================================================
+
+export {
+  configureAppServices,
+  updateAppServices,
+  getAppServices,
+  isAppServicesConfigured,
+  resetAppServices,
+  getNetworkService,
+  getCreditService,
+  getPaywallService,
+  getAuthService,
+  getAnalyticsService,
+} from "./infrastructure/config";
+
 // =============================================================================
 // INFRASTRUCTURE LAYER - Services
 // =============================================================================
@@ -250,6 +275,10 @@ export {
   FeatureHeader,
   // Photo Upload
   PhotoUploadCard,
+  // Selectors
+  StyleSelector,
+  AspectRatioSelector,
+  DurationSelector,
 } from "./presentation/components";
 
 export type {
@@ -289,6 +318,13 @@ export type {
   // Photo Upload
   PhotoUploadCardProps,
   PhotoUploadCardConfig,
+  // Selectors
+  StyleSelectorProps,
+  AspectRatioSelectorProps,
+  DurationSelectorProps,
+  StyleOption,
+  AspectRatioOption,
+  DurationValue,
 } from "./presentation/components";
 
 // =============================================================================

package/src/infrastructure/config/app-services.config.ts

@@ -0,0 +1,122 @@
+/**
+ * App Services Configuration
+ * Singleton for storing app-provided service implementations
+ */
+
+import type { IAppServices, PartialAppServices } from "../../domain/interfaces/app-services.interface";
+
+declare const __DEV__: boolean;
+
+let appServices: IAppServices | null = null;
+
+/**
+ * Default no-op implementations for optional services
+ */
+const defaultAnalytics = {
+  track: () => {
+    // No-op by default
+  },
+};
+
+/**
+ * Configure app services
+ * Must be called before using any generation features
+ * @param services - App-specific service implementations
+ */
+export function configureAppServices(services: IAppServices): void {
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    // eslint-disable-next-line no-console
+    console.log("[AppServices] Configuring app services");
+  }
+
+  appServices = {
+    ...services,
+    analytics: services.analytics || defaultAnalytics,
+  };
+}
+
+/**
+ * Update specific app services
+ * Useful for lazy initialization
+ * @param updates - Partial service updates
+ */
+export function updateAppServices(updates: PartialAppServices): void {
+  if (!appServices) {
+    throw new Error(
+      "[AppServices] Must call configureAppServices before updateAppServices",
+    );
+  }
+
+  appServices = {
+    ...appServices,
+    ...updates,
+  };
+}
+
+/**
+ * Get configured app services
+ * @throws Error if services not configured
+ */
+export function getAppServices(): IAppServices {
+  if (!appServices) {
+    throw new Error(
+      "[AppServices] App services not configured. Call configureAppServices first.",
+    );
+  }
+
+  return appServices;
+}
+
+/**
+ * Check if app services are configured
+ */
+export function isAppServicesConfigured(): boolean {
+  return appServices !== null;
+}
+
+/**
+ * Reset app services (useful for testing)
+ */
+export function resetAppServices(): void {
+  appServices = null;
+}
+
+/**
+ * Get network service
+ * @throws Error if not configured
+ */
+export function getNetworkService(): IAppServices["network"] {
+  return getAppServices().network;
+}
+
+/**
+ * Get credit service
+ * @throws Error if not configured
+ */
+export function getCreditService(): IAppServices["credits"] {
+  return getAppServices().credits;
+}
+
+/**
+ * Get paywall service
+ * @throws Error if not configured
+ */
+export function getPaywallService(): IAppServices["paywall"] {
+  return getAppServices().paywall;
+}
+
+/**
+ * Get auth service
+ * @throws Error if not configured
+ */
+export function getAuthService(): IAppServices["auth"] {
+  return getAppServices().auth;
+}
+
+/**
+ * Get analytics service
+ * @throws Error if not configured
+ */
+export function getAnalyticsService(): IAppServices["analytics"] {
+  return getAppServices().analytics;
+}

package/src/infrastructure/config/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Infrastructure Config Exports
+ */
+
+export {
+  configureAppServices,
+  updateAppServices,
+  getAppServices,
+  isAppServicesConfigured,
+  resetAppServices,
+  getNetworkService,
+  getCreditService,
+  getPaywallService,
+  getAuthService,
+  getAnalyticsService,
+} from "./app-services.config";

package/src/presentation/components/index.ts

@@ -28,3 +28,4 @@ export * from "./buttons";
 export * from "./display";
 export * from "./headers";
 export * from "./PhotoUploadCard";
+export * from "./selectors";

package/src/presentation/components/selectors/AspectRatioSelector.tsx

@@ -0,0 +1,105 @@
+/**
+ * Aspect Ratio Selector Component
+ * Generic, props-driven aspect ratio selection
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { AspectRatioOption } from "./types";
+
+export interface AspectRatioSelectorProps {
+  ratios: AspectRatioOption[];
+  selectedRatio: "16:9" | "9:16" | "1:1";
+  onRatioSelect: (ratio: "16:9" | "9:16" | "1:1") => void;
+  title: string;
+}
+
+export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
+  ratios,
+  selectedRatio,
+  onRatioSelect,
+  title,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={componentStyles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 12,
+        }}
+      >
+        {title}
+      </AtomicText>
+      <View style={componentStyles.aspectRatioGrid}>
+        {ratios.map((ratio) => (
+          <TouchableOpacity
+            key={ratio.id}
+            style={[
+              componentStyles.aspectRatioCard,
+              {
+                backgroundColor:
+                  selectedRatio === ratio.id
+                    ? tokens.colors.primary + "20"
+                    : tokens.colors.surface,
+                borderColor:
+                  selectedRatio === ratio.id
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onRatioSelect(ratio.id)}
+          >
+            <AtomicIcon
+              name={ratio.icon as never}
+              size="lg"
+              color={selectedRatio === ratio.id ? "primary" : "secondary"}
+            />
+            <AtomicText
+              type="bodySmall"
+              style={{
+                color: tokens.colors.textPrimary,
+                fontWeight: selectedRatio === ratio.id ? "600" : "400",
+                marginTop: 8,
+              }}
+            >
+              {ratio.name}
+            </AtomicText>
+            <AtomicText
+              type="labelSmall"
+              style={{ color: tokens.colors.textSecondary, marginTop: 2 }}
+            >
+              {ratio.description}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const componentStyles = StyleSheet.create({
+  section: {
+    padding: 16,
+    marginBottom: 8,
+  },
+  aspectRatioGrid: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  aspectRatioCard: {
+    flex: 1,
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 2,
+    alignItems: "center",
+  },
+});

package/src/presentation/components/selectors/DurationSelector.tsx

@@ -0,0 +1,98 @@
+/**
+ * Duration Selector Component
+ * Generic, props-driven duration selection for video/audio generation
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { DurationValue } from "./types";
+
+export interface DurationSelectorProps<T extends DurationValue> {
+  duration: T;
+  durationOptions: readonly T[];
+  onDurationSelect: (duration: T) => void;
+  title: string;
+  formatLabel?: (duration: T) => string;
+}
+
+export function DurationSelector<T extends DurationValue>({
+  duration,
+  durationOptions,
+  onDurationSelect,
+  title,
+  formatLabel = (d) => `${d}s`,
+}: DurationSelectorProps<T>): React.ReactElement {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={componentStyles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 12,
+        }}
+      >
+        {title}
+      </AtomicText>
+      <View style={componentStyles.durationGrid}>
+        {durationOptions.map((sec) => (
+          <TouchableOpacity
+            key={sec}
+            style={[
+              componentStyles.durationButton,
+              {
+                backgroundColor:
+                  duration === sec
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                borderColor:
+                  duration === sec
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onDurationSelect(sec)}
+          >
+            <AtomicText
+              type="bodyLarge"
+              style={{
+                color:
+                  duration === sec
+                    ? tokens.colors.textInverse
+                    : tokens.colors.textPrimary,
+                fontWeight: duration === sec ? "700" : "400",
+              }}
+            >
+              {formatLabel(sec)}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const componentStyles = StyleSheet.create({
+  section: {
+    padding: 16,
+    marginBottom: 8,
+  },
+  durationGrid: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  durationButton: {
+    flex: 1,
+    paddingVertical: 20,
+    borderRadius: 12,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/presentation/components/selectors/StyleSelector.tsx

@@ -0,0 +1,131 @@
+/**
+ * Style Selector Component
+ * Generic, props-driven style selection for AI generation
+ */
+
+import React from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { StyleOption } from "./types";
+
+export interface StyleSelectorProps {
+  styles: StyleOption[];
+  selectedStyle: string;
+  onStyleSelect: (styleId: string) => void;
+  title: string;
+}
+
+export const StyleSelector: React.FC<StyleSelectorProps> = ({
+  styles,
+  selectedStyle,
+  onStyleSelect,
+  title,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={componentStyles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 12,
+        }}
+      >
+        {title}
+      </AtomicText>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={componentStyles.stylesScroll}
+      >
+        {styles.map((style) => {
+          const isSelected = selectedStyle === style.id;
+
+          return (
+            <TouchableOpacity
+              key={style.id}
+              style={[
+                componentStyles.styleCard,
+                {
+                  backgroundColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                  borderColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+                },
+              ]}
+              onPress={() => onStyleSelect(style.id)}
+            >
+              {style.thumbnail ? (
+                <AtomicText type="headlineLarge" style={{ marginBottom: 8 }}>
+                  {style.thumbnail}
+                </AtomicText>
+              ) : style.icon ? (
+                <AtomicIcon
+                  name={style.icon as never}
+                  size="lg"
+                  color={isSelected ? "primary" : "secondary"}
+                />
+              ) : null}
+              <AtomicText
+                type="bodySmall"
+                style={{
+                  color: isSelected
+                    ? tokens.colors.textInverse
+                    : tokens.colors.textPrimary,
+                  fontWeight: isSelected ? "600" : "400",
+                  textAlign: "center",
+                }}
+              >
+                {style.name}
+              </AtomicText>
+              {style.description && (
+                <AtomicText
+                  type="labelSmall"
+                  style={{
+                    color: isSelected
+                      ? tokens.colors.textInverse
+                      : tokens.colors.textSecondary,
+                    opacity: isSelected ? 0.9 : 0.7,
+                    textAlign: "center",
+                    marginTop: 4,
+                  }}
+                  numberOfLines={2}
+                >
+                  {style.description}
+                </AtomicText>
+              )}
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+};
+
+const componentStyles = StyleSheet.create({
+  section: {
+    padding: 16,
+    marginBottom: 8,
+  },
+  stylesScroll: {
+    marginHorizontal: -16,
+    paddingHorizontal: 16,
+  },
+  styleCard: {
+    width: 120,
+    padding: 16,
+    borderRadius: 16,
+    borderWidth: 2,
+    marginRight: 12,
+    alignItems: "center",
+    minHeight: 140,
+  },
+});

package/src/presentation/components/selectors/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Selector Components
+ * Generic, props-driven selection UI components
+ */
+
+export { StyleSelector } from "./StyleSelector";
+export { AspectRatioSelector } from "./AspectRatioSelector";
+export { DurationSelector } from "./DurationSelector";
+
+export type { StyleSelectorProps } from "./StyleSelector";
+export type { AspectRatioSelectorProps } from "./AspectRatioSelector";
+export type { DurationSelectorProps } from "./DurationSelector";
+
+export type {
+  StyleOption,
+  AspectRatioOption,
+  DurationValue,
+} from "./types";

package/src/presentation/components/selectors/types.ts

@@ -0,0 +1,32 @@
+/**
+ * Selector Component Types
+ * Generic types for selector UI components
+ */
+
+/**
+ * Style option for StyleSelector
+ * All fields are required - app provides translated values
+ */
+export interface StyleOption {
+  id: string;
+  name: string;
+  description?: string;
+  thumbnail?: string;
+  icon?: string;
+}
+
+/**
+ * Aspect ratio option for AspectRatioSelector
+ * App provides translated name and description
+ */
+export interface AspectRatioOption {
+  id: "16:9" | "9:16" | "1:1";
+  name: string;
+  icon: string;
+  description: string;
+}
+
+/**
+ * Duration value type (seconds)
+ */
+export type DurationValue = number;