@umituz/react-native-ai-generation-content 1.17.85 → 1.17.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.85",
+  "version": "1.17.87",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -84,9 +84,9 @@
     "expo-haptics": "^15.0.8",
     "expo-image": "^3.0.11",
     "expo-linear-gradient": "~15.0.7",
-    "expo-video": "^2.0.0",
     "expo-localization": "^17.0.8",
     "expo-sharing": "^14.0.8",
+    "expo-video": "^2.0.0",
     "firebase": "^12.6.0",
     "i18next": "^25.7.3",
     "react": "19.1.0",

package/src/domains/creations/index.ts

@@ -149,10 +149,13 @@ export {
 // Gallery Components
 export { CreationsHomeCard } from "./presentation/components/CreationsHomeCard";
 export { EmptyState } from "./presentation/components/EmptyState";
+
+// Utilities
 export {
-  CreationsProvider,
-  useCreationsProvider,
-} from "./presentation/components/CreationsProvider";
+  getLocalizedTitle,
+  getFilterCategoriesFromConfig,
+  getTranslatedTypes,
+} from "./presentation/utils/filterUtils";
 
 // =============================================================================
 // PRESENTATION LAYER - Screens

package/src/domains/creations/presentation/components/CreationActions.tsx

@@ -8,11 +8,11 @@ import {
   View,
   StyleSheet,
   TouchableOpacity,
-  ActivityIndicator,
 } from "react-native";
 import {
   useAppDesignTokens,
   AtomicIcon,
+  AtomicSpinner,
 } from "@umituz/react-native-design-system";
 
 export interface CreationAction {
@@ -102,8 +102,8 @@ export function CreationActions({
           activeOpacity={0.7}
         >
           {action.loading ? (
-            <ActivityIndicator
-              size="small"
+            <AtomicSpinner
+              size="sm"
               color={action.filled ? tokens.colors.textInverse : tokens.colors.primary}
             />
           ) : (

package/src/domains/creations/presentation/components/CreationBadges.tsx

@@ -78,17 +78,17 @@ export function CreationBadges({
           paddingHorizontal: 8,
           paddingVertical: 4,
           borderRadius: 12,
-          backgroundColor: "rgba(0,0,0,0.6)",
+          backgroundColor: tokens.colors.modalOverlay,
           gap: 4,
         },
         typeText: {
           fontSize: 10,
           fontWeight: "600",
-          color: "white",
+          color: tokens.colors.textInverse,
           textTransform: "capitalize",
         },
       }),
-    [statusColor]
+    [statusColor, tokens]
   );
 
   return (

package/src/domains/creations/presentation/components/CreationDetail/DetailStory.tsx

@@ -2,7 +2,6 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { AtomicText, useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
-import { LinearGradient } from 'expo-linear-gradient';
 
 interface DetailStoryProps {
     readonly story: string;
@@ -16,16 +15,13 @@ export const DetailStory: React.FC<DetailStoryProps> = ({ story }) => {
 
     return (
         <View style={styles.container}>
-            <LinearGradient
-                colors={[tokens.colors.primary + '15', tokens.colors.primary + '05']}
-                style={styles.gradient}
-            >
+            <View style={styles.storyContainer}>
                 <AtomicText style={styles.quoteMark}>&quot;</AtomicText>
                 <AtomicText style={styles.text}>{story}</AtomicText>
                 <View style={styles.quoteEndRow}>
                     <AtomicText style={[styles.quoteMark, styles.quoteEnd]}>&quot;</AtomicText>
                 </View>
-            </LinearGradient>
+            </View>
         </View>
     );
 };
@@ -35,11 +31,12 @@ const useStyles = (tokens: DesignTokens) => StyleSheet.create({
         paddingHorizontal: tokens.spacing.lg,
         marginBottom: tokens.spacing.lg,
     },
-    gradient: {
+    storyContainer: {
         padding: tokens.spacing.lg,
         borderRadius: 20,
         borderWidth: 1,
-        borderColor: tokens.colors.primary + '20',
+        borderColor: tokens.colors.border,
+        backgroundColor: tokens.colors.surface,
     },
     quoteMark: {
         fontSize: 48,

package/src/domains/creations/presentation/components/CreationPreview.tsx

@@ -4,10 +4,11 @@
  */
 
 import React, { useMemo } from "react";
-import { View, StyleSheet, Image, ActivityIndicator } from "react-native";
+import { View, StyleSheet, Image } from "react-native";
 import {
   useAppDesignTokens,
   AtomicIcon,
+  AtomicSpinner,
 } from "@umituz/react-native-design-system";
 import type { CreationStatus, CreationTypeId } from "../../domain/types";
 import { isInProgress } from "../../domain/utils";
@@ -86,7 +87,7 @@ export function CreationPreview({
       <View style={styles.container}>
         <View style={styles.loadingContainer}>
           <View style={styles.loadingIcon}>
-            <ActivityIndicator size="large" color={tokens.colors.primary} />
+            <AtomicSpinner size="lg" color="primary" />
           </View>
         </View>
       </View>

package/src/domains/creations/presentation/components/CreationThumbnail.tsx

@@ -35,7 +35,7 @@ export function CreationThumbnail({
         },
         overlay: {
           ...StyleSheet.absoluteFillObject,
-          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          backgroundColor: tokens.colors.modalOverlay,
           borderRadius: tokens.spacing.sm,
           justifyContent: "center",
           alignItems: "center",

package/src/domains/creations/presentation/components/index.ts

@@ -31,9 +31,6 @@ export { CreationsHomeCard } from "./CreationsHomeCard";
 export { CreationImageViewer } from "./CreationImageViewer";
 export { CreationsGrid } from "./CreationsGrid";
 
-// Provider
-export { CreationsProvider, useCreationsProvider } from "./CreationsProvider";
-
 // Detail Components
 export { DetailHeader } from "./CreationDetail/DetailHeader";
 export { DetailImage } from "./CreationDetail/DetailImage";

package/src/domains/creations/presentation/screens/CreationDetailScreen.tsx

@@ -3,20 +3,21 @@ import { View, ScrollView, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { Creation } from '../../domain/entities/Creation';
+import type { CreationsConfig } from '../../domain/value-objects/CreationsConfig';
 import { hasVideoContent, getPreviewUrl } from '../../domain/utils';
 import { DetailHeader } from '../components/CreationDetail/DetailHeader';
 import { DetailImage } from '../components/CreationDetail/DetailImage';
 import { DetailVideo } from '../components/CreationDetail/DetailVideo';
 import { DetailStory } from '../components/CreationDetail/DetailStory';
 import { DetailActions } from '../components/CreationDetail/DetailActions';
-
-import { useCreationsProvider } from '../components/CreationsProvider';
+import { getLocalizedTitle } from '../utils/filterUtils';
 
 /** Video creation types */
 const VIDEO_TYPES = ['text-to-video', 'image-to-video'] as const;
 
 interface CreationDetailScreenProps {
     readonly creation: Creation;
+    readonly config: CreationsConfig;
     readonly onClose: () => void;
     readonly onShare: (creation: Creation) => void;
     readonly onDelete: (creation: Creation) => void;
@@ -32,6 +33,7 @@ interface CreationMetadata {
 
 export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
     creation,
+    config,
     onClose,
     onShare,
     onDelete,
@@ -39,7 +41,6 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
 }) => {
     const tokens = useAppDesignTokens();
     const insets = useSafeAreaInsets();
-    const { getLocalizedTitle } = useCreationsProvider();
 
     // Extract data safely
     const metadata = (creation.metadata || {}) as CreationMetadata;
@@ -48,7 +49,7 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
     // 1. Manually set names in metadata
     // 2. Localized title from config types mapping
     // 3. Fallback to raw creation type (formatted)
-    const title = metadata.names || getLocalizedTitle(creation.type);
+    const title = metadata.names || getLocalizedTitle(config, t, creation.type);
     const story = metadata.story || metadata.description || "";
     const date = metadata.date || new Date(creation.createdAt).toLocaleDateString();
 

package/src/domains/creations/presentation/screens/CreationsGalleryScreen.tsx

@@ -19,7 +19,6 @@ import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
 import { CreationDetailScreen } from "./CreationDetailScreen";
-import { CreationsProvider } from "../components/CreationsProvider";
 
 interface CreationsGalleryScreenProps {
   readonly userId: string | null;
@@ -34,15 +33,7 @@ interface CreationsGalleryScreenProps {
   readonly showFilter?: boolean;
 }
 
-export function CreationsGalleryScreen(props: CreationsGalleryScreenProps) {
-  return (
-    <CreationsProvider config={props.config} t={props.t}>
-      <CreationsGalleryScreenContent {...props} />
-    </CreationsProvider>
-  );
-}
-
-function CreationsGalleryScreenContent({
+export function CreationsGalleryScreen({
   userId,
   repository,
   config,
@@ -164,7 +155,7 @@ function CreationsGalleryScreenContent({
   ), [isLoading, creations, filters.isFiltered, tokens, t, config, emptyActionLabel, onEmptyAction, filters.clearAllFilters]);
 
   if (selectedCreation) {
-    return <CreationDetailScreen creation={selectedCreation} onClose={() => setSelectedCreation(null)} onShare={handleShare} onDelete={handleDelete} t={t} />;
+    return <CreationDetailScreen creation={selectedCreation} config={config} onClose={() => setSelectedCreation(null)} onShare={handleShare} onDelete={handleDelete} t={t} />;
   }
 
   return (

package/src/domains/creations/presentation/utils/filterUtils.ts

@@ -36,7 +36,7 @@ export const getFilterCategoriesFromConfig = (
 
 /**
  * Translates the creation types for display.
- * 
+ *
  * @param config The creations configuration object
  * @param t Translation function
  * @returns Array of types with translated labels
@@ -50,3 +50,20 @@ export const getTranslatedTypes = (
         labelKey: t(type.labelKey)
     }));
 };
+
+/**
+ * Gets the localized title for a creation type.
+ *
+ * @param config The creations configuration object
+ * @param t Translation function
+ * @param typeId The creation type ID
+ * @returns Localized title string
+ */
+export const getLocalizedTitle = (
+    config: CreationsConfig,
+    t: (key: string) => string,
+    typeId: string
+): string => {
+    const typeConfig = config.types.find(type => type.id === typeId);
+    return typeConfig ? t(typeConfig.labelKey) : typeId;
+};

package/src/domains/face-detection/presentation/components/FaceValidationStatus.tsx

@@ -6,10 +6,11 @@
  */
 
 import * as React from "react";
-import { View, StyleSheet, ActivityIndicator } from "react-native";
+import { View, StyleSheet } from "react-native";
 import {
   AtomicText,
   AtomicIcon,
+  AtomicSpinner,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 import type { FaceValidationState } from "../../domain/entities/FaceDetection";
@@ -38,7 +39,7 @@ export const FaceValidationStatus: React.FC<FaceValidationStatusProps> = ({
       <View
         style={[styles.container, { backgroundColor: tokens.colors.surface }]}
       >
-        <ActivityIndicator size="small" color={tokens.colors.primary} />
+        <AtomicSpinner size="sm" color="primary" />
         <AtomicText
           style={[styles.text, { color: tokens.colors.textSecondary }]}
         >