@umituz/react-native-ai-generation-content 1.17.268 → 1.17.270

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.268",
+  "version": "1.17.270",
   "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/domain/repositories/ICreationsRepository.ts

@@ -25,4 +25,9 @@ export interface ICreationsRepository {
     creationId: string,
     isFavorite: boolean,
   ): Promise<boolean>;
+  rate(
+    userId: string,
+    creationId: string,
+    rating: number,
+  ): Promise<boolean>;
 }

package/src/domains/creations/infrastructure/repositories/CreationsRepository.ts

@@ -97,4 +97,12 @@ export class CreationsRepository
   ): Promise<boolean> {
     return this.writer.updateFavorite(userId, creationId, isFavorite);
   }
+
+  async rate(
+    userId: string,
+    creationId: string,
+    rating: number,
+  ): Promise<boolean> {
+    return this.writer.rate(userId, creationId, rating);
+  }
 }

package/src/domains/creations/infrastructure/repositories/CreationsWriter.ts

@@ -148,4 +148,23 @@ export class CreationsWriter {
             return false;
         }
     }
+
+    async rate(
+        userId: string,
+        creationId: string,
+        rating: number,
+    ): Promise<boolean> {
+        const docRef = this.pathResolver.getDocRef(userId, creationId);
+        if (!docRef) return false;
+
+        try {
+            await updateDoc(docRef, {
+                rating,
+                ratedAt: new Date(),
+            });
+            return true;
+        } catch {
+            return false;
+        }
+    }
 }

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

@@ -0,0 +1,69 @@
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicIcon, AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+
+export interface CreationRatingProps {
+  readonly rating: number;
+  readonly max?: number;
+  readonly size?: number;
+  readonly onRate?: (rating: number) => void;
+  readonly readonly?: boolean;
+}
+
+export const CreationRating: React.FC<CreationRatingProps> = ({
+  rating,
+  max = 5,
+  size = 32,
+  onRate,
+  readonly = false,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.stars}>
+        {Array.from({ length: max }).map((_, i) => {
+          const isFilled = i < rating;
+          return (
+            <TouchableOpacity
+              key={i}
+              onPress={() => onRate?.(i + 1)}
+              activeOpacity={0.7}
+              disabled={readonly}
+              style={styles.star}
+            >
+              <AtomicIcon
+                name={isFilled ? "star" : "star-outline"}
+                customSize={size}
+                customColor={isFilled ? tokens.colors.primary : tokens.colors.textTertiary}
+              />
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+      {!readonly && rating > 0 && (
+        <AtomicText variant="bodySmall" color="textSecondary" style={styles.valueText}>
+          {rating} / {max}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    paddingVertical: 12,
+  },
+  stars: {
+    flexDirection: "row",
+    gap: 8,
+  },
+  star: {
+    padding: 2,
+  },
+  valueText: {
+    marginTop: 8,
+    fontWeight: "600",
+  },
+});

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

@@ -30,6 +30,7 @@ export { GalleryHeader } from "./GalleryHeader";
 export { EmptyState } from "./EmptyState";
 export { GalleryEmptyStates } from "./GalleryEmptyStates";
 export { CreationsHomeCard } from "./CreationsHomeCard";
+export { CreationRating } from "./CreationRating";
 export { CreationsGrid } from "./CreationsGrid";
 
 // Detail Components

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

@@ -15,6 +15,7 @@ export { useFilter, useStatusFilter, useMediaFilter } from "./useFilter";
 export type { UseFilterProps, UseFilterReturn } from "./useFilter";
 export { useGalleryFilters } from "./useGalleryFilters";
 export { useCreationPersistence } from "./useCreationPersistence";
+export { useCreationRating } from "./useCreationRating";
 export type {
   UseCreationPersistenceConfig,
   UseCreationPersistenceReturn,

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

@@ -0,0 +1,30 @@
+/**
+ * useCreationRating Hook
+ * Handles rating of creations with optimistic update
+ */
+
+import { useOptimisticUpdate } from "@umituz/react-native-design-system";
+import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
+import type { Creation } from "../../domain/entities/Creation";
+
+interface UseCreationRatingProps {
+  readonly userId: string | null;
+  readonly repository: ICreationsRepository;
+}
+
+export function useCreationRating({
+  userId,
+  repository,
+}: UseCreationRatingProps) {
+  return useOptimisticUpdate<boolean, { id: string; rating: number }, Creation[]>({
+    mutationFn: async ({ id, rating }) => {
+      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
+      ) ?? [],
+  });
+}

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

@@ -3,7 +3,7 @@
  * Fetches user's creations from repository
  */
 
-import { useQuery } from "@tanstack/react-query";
+import { useAppQuery } 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 useQuery<Creation[]>({
+  return useAppQuery<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 { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useOptimisticUpdate } from "@umituz/react-native-design-system";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
 import type { Creation } from "../../domain/entities/Creation";
 
@@ -16,36 +16,12 @@ export function useDeleteCreation({
   userId,
   repository,
 }: UseDeleteCreationProps) {
-  const queryClient = useQueryClient();
-
-  return useMutation({
+  return useOptimisticUpdate<boolean, string, Creation[]>({
     mutationFn: async (creationId: string) => {
       if (!userId) return false;
       return repository.delete(userId, creationId);
     },
-    onMutate: async (creationId) => {
-      if (!userId) return;
-
-      await queryClient.cancelQueries({
-        queryKey: ["creations", userId],
-      });
-
-      const previous = queryClient.getQueryData<Creation[]>([
-        "creations",
-        userId,
-      ]);
-
-      queryClient.setQueryData<Creation[]>(
-        ["creations", userId],
-        (old) => old?.filter((c) => c.id !== creationId) ?? [],
-      );
-
-      return { previous };
-    },
-    onError: (_err, _id, rollback) => {
-      if (userId && rollback?.previous) {
-        queryClient.setQueryData(["creations", userId], rollback.previous);
-      }
-    },
+    queryKey: ["creations", userId ?? ""],
+    updateFn: (old, creationId) => old?.filter((c) => c.id !== creationId) ?? [],
   });
 }

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

@@ -1,22 +1,26 @@
 import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+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;
@@ -34,6 +38,8 @@ interface CreationMetadata {
 }
 
 export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
+    userId,
+    repository,
     creation,
     config,
     onClose,
@@ -43,7 +49,11 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
     t
 }) => {
     const tokens = useAppDesignTokens();
-    const insets = useSafeAreaInsets();
+    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;
@@ -68,48 +78,34 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
     const thumbnailUrl = getPreviewUrl(creation.output) || undefined;
 
     return (
-        <View style={[styles.container, { backgroundColor: tokens.colors.background }]}>
-            <View style={{ paddingTop: insets.top }}>
-                <DetailHeader onClose={onClose} />
-            </View>
-            <ScrollView
-                style={styles.scrollView}
-                contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 24 }]}
-                showsVerticalScrollIndicator={false}
-            >
-                {isVideo ? (
-                    <DetailVideo videoUrl={videoUrl} _thumbnailUrl={thumbnailUrl} />
-                ) : (
-                    <DetailImage uri={creation.uri} />
-                )}
+        <ScreenLayout
+            header={<DetailHeader onClose={onClose} />}
+        >
+            {isVideo ? (
+                <DetailVideo videoUrl={videoUrl} _thumbnailUrl={thumbnailUrl} />
+            ) : (
+                <DetailImage uri={creation.uri} />
+            )}
+
+            <DetailInfo title={title} date={date} />
 
-                <DetailInfo title={title} date={date} />
+            <CreationRating
+                rating={creation.rating || 0}
+                onRate={handleRate}
+            />
 
-                {story ? (
-                    <DetailStory story={story} />
-                ) : null}
+            {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}
-                />
-            </ScrollView>
-        </View>
+            <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>
     );
 };
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    scrollView: {
-        flex: 1,
-    },
-    scrollContent: {
-        paddingTop: 4,
-    },
-});

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

@@ -1,6 +1,5 @@
 import React, { useState, useMemo, useCallback } from "react";
 import { View, FlatList, RefreshControl, StyleSheet } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   useAppDesignTokens,
   useAlert,
@@ -8,6 +7,7 @@ import {
   AlertMode,
   useSharing,
   FilterSheet,
+  ScreenLayout,
 } from "@umituz/react-native-design-system";
 import { useFocusEffect } from "@react-navigation/native";
 import { useCreations } from "../hooks/useCreations";
@@ -42,7 +42,6 @@ export function CreationsGalleryScreen({
   showFilter = config.showFilter ?? true,
   onViewResult,
 }: CreationsGalleryScreenProps) {
-  const insets = useSafeAreaInsets();
   const tokens = useAppDesignTokens();
   const { share } = useSharing();
   const alert = useAlert();
@@ -123,7 +122,7 @@ export function CreationsGalleryScreen({
   const renderHeader = useMemo(() => {
     if ((!creations || creations.length === 0) && !isLoading) return null;
     return (
-      <View style={[styles.header, { paddingTop: insets.top + tokens.spacing.md, backgroundColor: tokens.colors.surface, borderBottomColor: tokens.colors.border }]}>
+      <View style={[styles.header, { backgroundColor: tokens.colors.surface, borderBottomColor: tokens.colors.border }]}>
         <GalleryHeader
           title={t(config.translations.title)}
           count={filters.filtered.length}
@@ -133,7 +132,7 @@ export function CreationsGalleryScreen({
         />
       </View>
     );
-  }, [creations, isLoading, filters.filtered.length, showFilter, filterButtons, t, config, insets.top, tokens]);
+  }, [creations, isLoading, filters.filtered.length, showFilter, filterButtons, t, config, tokens]);
 
   const renderEmpty = useMemo(() => (
     <GalleryEmptyStates
@@ -151,24 +150,39 @@ export function CreationsGalleryScreen({
   ), [isLoading, creations, filters.isFiltered, tokens, t, config, emptyActionLabel, onEmptyAction, filters.clearAllFilters]);
 
   if (selectedCreation) {
-    return <CreationDetailScreen creation={selectedCreation} config={config} onClose={() => setSelectedCreation(null)} onShare={handleShare} onDelete={handleDelete} onViewResult={onViewResult} t={t} />;
+    return (
+      <CreationDetailScreen
+        userId={userId}
+        repository={repository}
+        creation={selectedCreation}
+        config={config}
+        onClose={() => setSelectedCreation(null)}
+        onShare={handleShare}
+        onDelete={handleDelete}
+        onViewResult={onViewResult}
+        t={t}
+      />
+    );
   }
 
   return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.background }]}>
+    <ScreenLayout>
       <FlatList
         data={filters.filtered}
         renderItem={renderItem}
         keyExtractor={(item) => item.id}
         ListHeaderComponent={renderHeader}
         ListEmptyComponent={renderEmpty}
-        contentContainerStyle={[styles.listContent, { paddingBottom: insets.bottom + 100 }, (!filters.filtered || filters.filtered.length === 0) && styles.emptyContent]}
+        contentContainerStyle={[
+          styles.listContent, 
+          (!filters.filtered || filters.filtered.length === 0) && styles.emptyContent
+        ]}
         showsVerticalScrollIndicator={false}
         refreshControl={<RefreshControl refreshing={isLoading} onRefresh={() => void refetch()} tintColor={tokens.colors.primary} />}
       />
       <FilterSheet visible={filters.statusFilterVisible} onClose={filters.closeStatusFilter} options={filters.statusFilter.filterOptions} selectedIds={[filters.statusFilter.selectedId]} onFilterPress={filters.statusFilter.selectFilter} onClearFilters={filters.statusFilter.clearFilter} title={t(config.translations.statusFilterTitle ?? "creations.filter.status")} clearLabel={t(config.translations.clearFilter ?? "common.clear")} />
       <FilterSheet visible={filters.mediaFilterVisible} onClose={filters.closeMediaFilter} options={filters.mediaFilter.filterOptions} selectedIds={[filters.mediaFilter.selectedId]} onFilterPress={filters.mediaFilter.selectFilter} onClearFilters={filters.mediaFilter.clearFilter} title={t(config.translations.mediaFilterTitle ?? "creations.filter.media")} clearLabel={t(config.translations.clearFilter ?? "common.clear")} />
-    </View>
+    </ScreenLayout>
   );
 }
 

package/src/features/scenarios/domain/types.ts

@@ -0,0 +1,75 @@
+/**
+ * Scenario Domain Types
+ * Generic types for scenario selection feature
+ */
+
+export enum ScenarioCategory {
+  TIME_TRAVEL = "time_travel",
+  FAMILY = "family",
+  LIFESTYLE = "lifestyle",
+  FANTASY = "fantasy",
+  CAREER = "career",
+  TRAVEL = "travel",
+  CULTURAL = "cultural",
+}
+
+export interface ScenarioData {
+  readonly id: string;
+  readonly category?: ScenarioCategory;
+  readonly title: string;
+  readonly description: string;
+  readonly icon: string;
+  readonly imageUrl?: string;
+  readonly previewImageUrl?: string;
+  readonly aiPrompt: string;
+  readonly storyTemplate: string;
+  readonly requiresPhoto?: boolean;
+  readonly hidden?: boolean;
+}
+
+export interface ScenarioSelectorConfig {
+  readonly titleKey: string;
+  readonly subtitleKey: string;
+  readonly showCategoryFilter?: boolean;
+  readonly enableSearch?: boolean;
+  readonly pageSize?: number;
+}
+
+export interface ScenarioPreviewConfig {
+  readonly showTips?: boolean;
+  readonly showDetails?: boolean;
+  readonly enableCustomization?: boolean;
+}
+
+export interface MagicPromptConfig {
+  readonly maxLength: number;
+  readonly minLength: number;
+  readonly headerKey: string;
+  readonly headlinePart1Key: string;
+  readonly headlinePart2Key: string;
+  readonly subtitleKey: string;
+  readonly inputLabelKey: string;
+  readonly surpriseButtonKey: string;
+  readonly placeholderKey: string;
+  readonly styleTitleKey: string;
+  readonly inspirationTitleKey: string;
+  readonly continueKey: string;
+}
+
+export interface VisualStyleOption {
+  readonly id: string;
+  readonly icon: string;
+  readonly labelKey: string;
+}
+
+export interface InspirationChipData {
+  readonly id: string;
+  readonly labelKey: string;
+  readonly promptKey: string;
+}
+
+export const SCENARIO_DEFAULTS = {
+  pageSize: 10,
+  maxPromptLength: 500,
+  minPromptLength: 10,
+} as const;

package/src/features/scenarios/index.ts

@@ -0,0 +1,45 @@
+/**
+ * Scenarios Feature
+ * Config-driven scenario selection and preview screens
+ */
+
+// Domain types
+export type {
+  ScenarioData,
+  ScenarioCategory,
+  ScenarioSelectorConfig,
+  ScenarioPreviewConfig,
+  MagicPromptConfig,
+  VisualStyleOption,
+  InspirationChipData,
+} from "./domain/types";
+export { ScenarioCategory as ScenarioCategoryEnum, SCENARIO_DEFAULTS } from "./domain/types";
+
+// Components
+export {
+  ScenarioHeader,
+  ScenarioGrid,
+  MagicPromptHeadline,
+  InspirationChips,
+  StyleSelector,
+} from "./presentation/components";
+export type {
+  ScenarioHeaderProps,
+  ScenarioGridProps,
+  MagicPromptHeadlineProps,
+  InspirationChipsProps,
+  StyleSelectorProps,
+} from "./presentation/components";
+
+// Screens
+export { ScenarioSelectorScreen } from "./presentation/screens/ScenarioSelectorScreen";
+export type { ScenarioSelectorScreenProps } from "./presentation/screens/ScenarioSelectorScreen";
+
+export { ScenarioPreviewScreen } from "./presentation/screens/ScenarioPreviewScreen";
+export type {
+  ScenarioPreviewScreenProps,
+  ScenarioPreviewTranslations,
+} from "./presentation/screens/ScenarioPreviewScreen";
+
+export { MagicPromptScreen } from "./presentation/screens/MagicPromptScreen";
+export type { MagicPromptScreenProps } from "./presentation/screens/MagicPromptScreen";

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

@@ -0,0 +1,82 @@
+/**
+ * InspirationChips Component
+ * Horizontal scrollable suggestion chips for Magic Prompt
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { InspirationChipData } from "../../domain/types";
+
+export interface InspirationChipsProps {
+  readonly chips: readonly InspirationChipData[];
+  readonly title: string;
+  readonly onSelect: (promptKey: string) => void;
+  readonly t: (key: string) => string;
+}
+
+export const InspirationChips: React.FC<InspirationChipsProps> = ({
+  chips,
+  title,
+  onSelect,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          marginBottom: tokens.spacing.lg,
+        },
+        sectionTitle: {
+          fontWeight: "700",
+          marginBottom: tokens.spacing.sm,
+        },
+        chipsContainer: {
+          gap: tokens.spacing.sm,
+          paddingBottom: 4,
+        },
+        chip: {
+          paddingHorizontal: tokens.spacing.md,
+          paddingVertical: 10,
+          borderRadius: 999,
+          borderWidth: 1,
+          borderColor: tokens.colors.border,
+          backgroundColor: tokens.colors.surface,
+        },
+      }),
+    [tokens],
+  );
+
+  return (
+    <View style={styles.container}>
+      <AtomicText type="labelLarge" style={styles.sectionTitle}>
+        {title}
+      </AtomicText>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.chipsContainer}
+      >
+        {chips.map((chip) => (
+          <TouchableOpacity
+            key={chip.id}
+            style={styles.chip}
+            onPress={() => onSelect(chip.promptKey)}
+          >
+            <AtomicText
+              type="bodySmall"
+              style={{ color: tokens.colors.textPrimary }}
+            >
+              {t(chip.labelKey)}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};