@umituz/react-native-ai-generation-content 1.17.271 → 1.17.272

package/package.json

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

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

@@ -42,7 +42,7 @@ export const CreationRating: React.FC<CreationRatingProps> = ({
         })}
       </View>
       {!readonly && rating > 0 && (
-        <AtomicText variant="bodySmall" color="textSecondary" style={styles.valueText}>
+        <AtomicText type="bodySmall" color="textSecondary" style={styles.valueText}>
           {rating} / {max}
         </AtomicText>
       )}

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

@@ -32,9 +32,3 @@ export { GalleryEmptyStates } from "./GalleryEmptyStates";
 export { CreationsHomeCard } from "./CreationsHomeCard";
 export { CreationRating } from "./CreationRating";
 export { CreationsGrid } from "./CreationsGrid";
-
-// Detail Components
-export { DetailHeader } from "./CreationDetail/DetailHeader";
-export { DetailImage } from "./CreationDetail/DetailImage";
-export { DetailStory } from "./CreationDetail/DetailStory";
-export { DetailActions } from "./CreationDetail/DetailActions";

package/src/domains/creations/presentation/hooks/useCreationRating.ts

@@ -3,7 +3,7 @@
  * Handles rating of creations with optimistic update
  */
 
-import { useOptimisticUpdate } from "@umituz/react-native-design-system";
+import { useMutation, useQueryClient } from "@umituz/react-native-design-system";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
 import type { Creation } from "../../domain/entities/Creation";
 
@@ -12,19 +12,44 @@ interface UseCreationRatingProps {
   readonly repository: ICreationsRepository;
 }
 
+interface RatingVariables {
+  readonly id: string;
+  readonly rating: number;
+}
+
 export function useCreationRating({
   userId,
   repository,
 }: UseCreationRatingProps) {
-  return useOptimisticUpdate<boolean, { id: string; rating: number }, Creation[]>({
-    mutationFn: async ({ id, rating }) => {
+  const queryClient = useQueryClient();
+  const queryKey = ["creations", userId ?? ""];
+
+  return useMutation({
+    mutationFn: async ({ id, rating }: RatingVariables) => {
       if (!userId) return false;
       return repository.rate(userId, id, rating);
     },
-    queryKey: ["creations", userId ?? ""],
-    updateFn: (old, { id, rating }) => 
-      old?.map((c) => 
-        c.id === id ? { ...c, rating, ratedAt: new Date() } : c
-      ) ?? [],
+    onMutate: async ({ id, rating }: RatingVariables) => {
+      await queryClient.cancelQueries({ queryKey });
+      const previousData = queryClient.getQueryData<Creation[]>(queryKey);
+
+      if (previousData) {
+        queryClient.setQueryData<Creation[]>(queryKey, (old) =>
+          old?.map((c) =>
+            c.id === id ? { ...c, rating, ratedAt: new Date() } : c
+          ) ?? []
+        );
+      }
+
+      return { previousData };
+    },
+    onError: (_error, _variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData(queryKey, context.previousData);
+      }
+    },
+    onSettled: () => {
+      void queryClient.invalidateQueries({ queryKey });
+    },
   });
 }

package/src/domains/creations/presentation/hooks/useCreations.ts

@@ -3,7 +3,7 @@
  * Fetches user's creations from repository
  */
 
-import { useAppQuery } from "@umituz/react-native-design-system";
+import { useQuery } from "@umituz/react-native-design-system";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
 import type { Creation } from "../../domain/entities/Creation";
 
@@ -23,7 +23,7 @@ export function useCreations({
   repository,
   enabled = true,
 }: UseCreationsProps) {
-  return useAppQuery<Creation[]>({
+  return useQuery<Creation[]>({
     queryKey: ["creations", userId ?? ""],
     queryFn: async () => {
       if (!userId) {

package/src/domains/creations/presentation/hooks/useDeleteCreation.ts

@@ -3,7 +3,7 @@
  * Handles deletion of user creations with optimistic update
  */
 
-import { useOptimisticUpdate } from "@umituz/react-native-design-system";
+import { useMutation, useQueryClient } from "@umituz/react-native-design-system";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
 import type { Creation } from "../../domain/entities/Creation";
 
@@ -16,12 +16,33 @@ export function useDeleteCreation({
   userId,
   repository,
 }: UseDeleteCreationProps) {
-  return useOptimisticUpdate<boolean, string, Creation[]>({
+  const queryClient = useQueryClient();
+  const queryKey = ["creations", userId ?? ""];
+
+  return useMutation({
     mutationFn: async (creationId: string) => {
       if (!userId) return false;
       return repository.delete(userId, creationId);
     },
-    queryKey: ["creations", userId ?? ""],
-    updateFn: (old, creationId) => old?.filter((c) => c.id !== creationId) ?? [],
+    onMutate: async (creationId: string) => {
+      await queryClient.cancelQueries({ queryKey });
+      const previousData = queryClient.getQueryData<Creation[]>(queryKey);
+
+      if (previousData) {
+        queryClient.setQueryData<Creation[]>(queryKey, (old) =>
+          old?.filter((c) => c.id !== creationId) ?? []
+        );
+      }
+
+      return { previousData };
+    },
+    onError: (_error, _variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData(queryKey, context.previousData);
+      }
+    },
+    onSettled: () => {
+      void queryClient.invalidateQueries({ queryKey });
+    },
   });
 }

package/src/features/scenarios/presentation/components/ScenarioGrid.tsx

@@ -5,9 +5,10 @@
 
 import React, { useMemo, useCallback, useState } from "react";
 import {
-  View as RNView,
-  FlatList as RNFlatList,
+  View,
+  FlatList,
   StyleSheet,
+  type ListRenderItemInfo,
 } from "react-native";
 import {
   useAppDesignTokens,
@@ -22,9 +23,6 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { ScenarioData, ScenarioCategory } from "../../domain/types";
 import { SCENARIO_DEFAULTS } from "../../domain/types";
 
-const View = RNView as any;
-const FlatList = RNFlatList as any;
-
 export interface ScenarioGridProps {
   readonly scenarios: readonly ScenarioData[];
   readonly selectedScenarioId: string | null;
@@ -148,7 +146,7 @@ export const ScenarioGrid: React.FC<ScenarioGridProps> = ({
   );
 
   const renderItem = useCallback(
-    ({ item }: { item: ScenarioData }) => {
+    ({ item }: ListRenderItemInfo<ScenarioData>) => {
       const title = t(`scenario.${item.id}.title`);
       const description = t(`scenario.${item.id}.description`);
 

package/src/features/scenarios/presentation/components/StyleSelector.tsx

@@ -91,7 +91,7 @@ export const StyleSelector: React.FC<StyleSelectorProps> = ({
               ]}
             >
               <AtomicIcon
-                name={style.icon as any}
+                name={style.icon}
                 size="md"
                 color={selectedStyle === style.id ? "primary" : "textSecondary"}
               />

package/src/features/scenarios/presentation/screens/ScenarioSelectorScreen.tsx

@@ -57,7 +57,7 @@ export const ScenarioSelectorScreen: React.FC<ScenarioSelectorScreenProps> = ({
   );
 };
 
-const createStyles = (tokens: DesignTokens) =>
+const createStyles = (_tokens: DesignTokens) =>
   StyleSheet.create({
     container: {
       flex: 1,

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

@@ -1,95 +0,0 @@
-
-import React from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon, useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
-
-interface DetailActionsProps {
-    readonly onShare: () => void;
-    readonly onDelete: () => void;
-    readonly onViewResult?: () => void;
-    readonly shareLabel: string;
-    readonly deleteLabel: string;
-    readonly viewResultLabel?: string;
-}
-
-export const DetailActions: React.FC<DetailActionsProps> = ({
-    onShare,
-    onDelete,
-    onViewResult,
-    shareLabel,
-    deleteLabel,
-    viewResultLabel
-}) => {
-    const tokens = useAppDesignTokens();
-    const styles = useStyles(tokens);
-
-    return (
-        <View style={styles.container}>
-            {onViewResult && viewResultLabel && (
-                <TouchableOpacity
-                    style={[styles.button, styles.viewResultButton]}
-                    onPress={onViewResult}
-                    activeOpacity={0.7}
-                >
-                    <AtomicIcon name="eye-outline" size="sm" color="onPrimary" />
-                    <AtomicText style={styles.buttonText}>{viewResultLabel}</AtomicText>
-                </TouchableOpacity>
-            )}
-
-            <TouchableOpacity
-                style={[styles.button, styles.shareButton]}
-                onPress={onShare}
-                activeOpacity={0.7}
-            >
-                <AtomicIcon name="share-social-outline" size="sm" color="onPrimary" />
-                <AtomicText style={styles.buttonText}>{shareLabel}</AtomicText>
-            </TouchableOpacity>
-
-            <TouchableOpacity
-                style={[styles.button, styles.deleteButton]}
-                onPress={onDelete}
-                activeOpacity={0.7}
-            >
-                <AtomicIcon name="trash-outline" size="sm" color="error" />
-                <AtomicText style={[styles.buttonText, { color: tokens.colors.error }]}>
-                    {deleteLabel}
-                </AtomicText>
-            </TouchableOpacity>
-        </View>
-    );
-};
-
-const useStyles = (tokens: DesignTokens) => StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        flexWrap: 'wrap',
-        gap: tokens.spacing.md,
-        paddingHorizontal: tokens.spacing.lg,
-        marginBottom: tokens.spacing.xxl,
-    },
-    button: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 12,
-        paddingHorizontal: 20,
-        borderRadius: 16,
-        gap: 8,
-        minWidth: 110,
-    },
-    viewResultButton: {
-        backgroundColor: tokens.colors.primary,
-    },
-    shareButton: {
-        backgroundColor: tokens.colors.primary,
-    },
-    deleteButton: {
-        backgroundColor: tokens.colors.error + '10',
-    },
-    buttonText: {
-        fontWeight: '700',
-        color: tokens.colors.textInverse,
-        fontSize: 15,
-    },
-});

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { AtomicIcon, useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
-
-interface DetailHeaderProps {
-    readonly onClose: () => void;
-}
-
-export const DetailHeader: React.FC<DetailHeaderProps> = ({ onClose }) => {
-    const tokens = useAppDesignTokens();
-    const styles = useStyles(tokens);
-
-    return (
-        <View style={styles.headerContainer}>
-            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
-                <AtomicIcon name="arrow-back" size="md" color="onSurface" />
-            </TouchableOpacity>
-        </View>
-    );
-};
-
-const useStyles = (tokens: DesignTokens) => StyleSheet.create({
-    headerContainer: {
-        paddingVertical: tokens.spacing.xs,
-        paddingHorizontal: tokens.spacing.sm,
-        backgroundColor: tokens.colors.background,
-    },
-    closeButton: {
-        padding: tokens.spacing.xs,
-        width: 40,
-        height: 40,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-});

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

@@ -1,53 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, useWindowDimensions, TouchableOpacity } from 'react-native';
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import { Image } from 'expo-image';
-
-interface DetailImageProps {
-    readonly uri: string;
-    readonly onPress?: () => void;
-}
-
-const HORIZONTAL_PADDING = 16;
-const ASPECT_RATIO = 16 / 9;
-
-export const DetailImage: React.FC<DetailImageProps> = ({ uri, onPress }) => {
-    const tokens = useAppDesignTokens();
-    const { width } = useWindowDimensions();
-    const imageWidth = width - (HORIZONTAL_PADDING * 2);
-    const imageHeight = imageWidth / ASPECT_RATIO;
-
-    const content = (
-        <View style={[styles.frame, { width: imageWidth, height: imageHeight, backgroundColor: tokens.colors.surface }]}>
-            <Image source={{ uri }} style={styles.image} contentFit="cover" />
-        </View>
-    );
-
-    return (
-        <View style={styles.container}>
-            {onPress ? (
-                <TouchableOpacity activeOpacity={0.9} onPress={onPress}>
-                    {content}
-                </TouchableOpacity>
-            ) : (
-                content
-            )}
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        paddingHorizontal: HORIZONTAL_PADDING,
-        marginTop: 8,
-        marginBottom: 12,
-    },
-    frame: {
-        borderRadius: 16,
-        overflow: 'hidden',
-    },
-    image: {
-        width: '100%',
-        height: '100%',
-    },
-});

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

@@ -1,51 +0,0 @@
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { AtomicText, AtomicIcon, useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
-
-interface DetailInfoProps {
-    readonly title: string;
-    readonly date: string;
-}
-
-export const DetailInfo: React.FC<DetailInfoProps> = ({ title, date }) => {
-    const tokens = useAppDesignTokens();
-    const styles = useStyles(tokens);
-
-    return (
-        <View style={styles.container}>
-            <AtomicText style={styles.title}>{title}</AtomicText>
-            <View style={styles.dateBadge}>
-                <AtomicIcon name="calendar-outline" size="sm" color="primary" />
-                <AtomicText style={styles.dateText}>{date}</AtomicText>
-            </View>
-        </View>
-    );
-};
-
-const useStyles = (tokens: DesignTokens) => StyleSheet.create({
-    container: {
-        paddingHorizontal: tokens.spacing.md,
-        paddingVertical: tokens.spacing.sm,
-        gap: tokens.spacing.xs,
-    },
-    title: {
-        fontSize: 18,
-        fontWeight: '700',
-        color: tokens.colors.textPrimary,
-    },
-    dateBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        alignSelf: 'flex-start',
-        paddingHorizontal: 12,
-        paddingVertical: 6,
-        borderRadius: 12,
-        backgroundColor: tokens.colors.primary + '15',
-    },
-    dateText: {
-        fontSize: 13,
-        fontWeight: '600',
-        color: tokens.colors.primary,
-    },
-});

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

@@ -1,64 +0,0 @@
-
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { AtomicText, useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
-
-interface DetailStoryProps {
-    readonly story: string;
-}
-
-export const DetailStory: React.FC<DetailStoryProps> = ({ story }) => {
-    const tokens = useAppDesignTokens();
-    const styles = useStyles(tokens);
-
-    if (!story) return null;
-
-    return (
-        <View style={styles.container}>
-            <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>
-            </View>
-        </View>
-    );
-};
-
-const useStyles = (tokens: DesignTokens) => StyleSheet.create({
-    container: {
-        paddingHorizontal: tokens.spacing.lg,
-        marginBottom: tokens.spacing.lg,
-    },
-    storyContainer: {
-        padding: tokens.spacing.lg,
-        borderRadius: 20,
-        borderWidth: 1,
-        borderColor: tokens.colors.border,
-        backgroundColor: tokens.colors.surface,
-    },
-    quoteMark: {
-        fontSize: 48,
-        lineHeight: 48,
-        color: tokens.colors.primary,
-        opacity: 0.4,
-        marginBottom: -16,
-    },
-    quoteEndRow: {
-        alignItems: 'flex-end',
-        marginTop: -16,
-    },
-    quoteEnd: {
-        marginBottom: 0,
-    },
-    text: {
-        fontSize: 16,
-        lineHeight: 26,
-        textAlign: 'center',
-        fontStyle: 'italic',
-        fontWeight: '500',
-        color: tokens.colors.textPrimary,
-        paddingBottom: 4,
-    },
-});

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

@@ -1,48 +0,0 @@
-/**
- * DetailVideo Component
- * Video player with thumbnail and play controls for creation detail view
- */
-
-import React, { useMemo } from "react";
-import { View } from "react-native";
-import { VideoView, useVideoPlayer } from "expo-video";
-import { useResponsive } from "@umituz/react-native-design-system";
-
-interface DetailVideoProps {
-  readonly videoUrl: string;
-  readonly _thumbnailUrl?: string;
-}
-
-export const DetailVideo: React.FC<DetailVideoProps> = ({
-  videoUrl,
-  _thumbnailUrl,
-}) => {
-  const { width, horizontalPadding, spacingMultiplier } = useResponsive();
-  const videoWidth = width - (horizontalPadding * 2);
-
-  const player = useVideoPlayer(videoUrl, (player) => {
-    player.loop = true;
-  });
-
-  const containerStyle = useMemo(() => ({
-    paddingHorizontal: horizontalPadding,
-    marginVertical: 16 * spacingMultiplier,
-  }), [horizontalPadding, spacingMultiplier]);
-
-  const videoStyle = useMemo(() => ({
-    width: videoWidth,
-    height: (videoWidth * 9) / 16, // 16:9 aspect ratio
-  }), [videoWidth]);
-
-  return (
-    <View style={containerStyle}>
-      <VideoView
-        style={videoStyle}
-        player={player}
-        allowsFullscreen
-        allowsPictureInPicture
-        nativeControls
-      />
-    </View>
-  );
-};

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

@@ -1,5 +0,0 @@
-export * from './DetailHeader';
-export * from './DetailImage';
-export * from './DetailVideo';
-export * from './DetailStory';
-export * from './DetailActions';

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

@@ -1,111 +0,0 @@
-import React, { useMemo } from 'react';
-import { } from 'react-native';
-import { useAppDesignTokens, ScreenLayout } from "@umituz/react-native-design-system";
-import type { Creation } from '../../domain/entities/Creation';
-import type { CreationsConfig } from '../../domain/value-objects/CreationsConfig';
-import type { ICreationsRepository } from '../../domain/repositories/ICreationsRepository';
-import { hasVideoContent, getPreviewUrl } from '../../domain/utils';
-import { useCreationRating } from '../hooks/useCreationRating';
-import { DetailHeader } from '../components/CreationDetail/DetailHeader';
-import { DetailInfo } from '../components/CreationDetail/DetailInfo';
-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 { CreationRating } from '../components/CreationRating';
-import { getLocalizedTitle } from '../utils/filterUtils';
-
-/** Video creation types */
-const VIDEO_TYPES = ['text-to-video', 'image-to-video'] as const;
-
-interface CreationDetailScreenProps {
-    readonly userId: string | null;
-    readonly repository: ICreationsRepository;
-    readonly creation: Creation;
-    readonly config: CreationsConfig;
-    readonly onClose: () => void;
-    readonly onShare: (creation: Creation) => void;
-    readonly onDelete: (creation: Creation) => void;
-    readonly onViewResult?: (creation: Creation) => void;
-    readonly t: (key: string) => string;
-}
-
-interface CreationMetadata {
-    readonly names?: string;
-    readonly story?: string;
-    readonly description?: string;
-    readonly date?: string;
-}
-
-export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
-    userId,
-    repository,
-    creation,
-    config,
-    onClose,
-    onShare,
-    onDelete,
-    onViewResult,
-    t
-}) => {
-    const tokens = useAppDesignTokens();
-    const rateMutation = useCreationRating({ userId, repository });
-
-    const handleRate = async (rating: number) => {
-        await rateMutation.mutateAsync({ id: creation.id, rating });
-    };
-
-    // Extract data safely
-    const metadata = (creation.metadata || {}) as CreationMetadata;
-
-    // Resolve title:
-    // 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(config, t, creation.type);
-    const story = metadata.story || metadata.description || "";
-    const date = metadata.date || new Date(creation.createdAt).toLocaleDateString();
-
-    // Detect if this is a video creation
-    const isVideo = useMemo(() => {
-        if (VIDEO_TYPES.includes(creation.type as typeof VIDEO_TYPES[number])) return true;
-        if (hasVideoContent(creation.output)) return true;
-        return false;
-    }, [creation.type, creation.output]);
-
-    // Get video URL and thumbnail for video content
-    const videoUrl = creation.output?.videoUrl || creation.uri;
-    const thumbnailUrl = getPreviewUrl(creation.output) || undefined;
-
-    return (
-        <ScreenLayout
-            header={<DetailHeader onClose={onClose} />}
-        >
-            {isVideo ? (
-                <DetailVideo videoUrl={videoUrl} _thumbnailUrl={thumbnailUrl} />
-            ) : (
-                <DetailImage uri={creation.uri} />
-            )}
-
-            <DetailInfo title={title} date={date} />
-
-            <CreationRating
-                rating={creation.rating || 0}
-                onRate={handleRate}
-            />
-
-            {story ? (
-                <DetailStory story={story} />
-            ) : null}
-
-            <DetailActions
-                onShare={() => onShare(creation)}
-                onDelete={() => onDelete(creation)}
-                onViewResult={onViewResult ? () => onViewResult(creation) : undefined}
-                shareLabel={t("result.shareButton")}
-                deleteLabel={t("common.delete")}
-                viewResultLabel={onViewResult ? t("result.viewResult") : undefined}
-            />
-        </ScreenLayout>
-    );
-};