@umituz/react-native-ai-generation-content 1.17.282 → 1.17.284

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.282",
+  "version": "1.17.284",
   "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/screens/CreationsGalleryScreen.tsx

@@ -15,6 +15,7 @@ import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useGalleryFilters } from "../hooks/useGalleryFilters";
 import { GalleryHeader, CreationCard, GalleryEmptyStates } from "../components";
 import { ResultPreviewScreen } from "../../../result-preview/presentation/components/ResultPreviewScreen";
+import { StarRatingPicker } from "../../../result-preview/presentation/components/StarRatingPicker";
 import { useResultActions } from "../../../result-preview/presentation/hooks/useResultActions";
 import { MEDIA_FILTER_OPTIONS, STATUS_FILTER_OPTIONS } from "../../domain/types/creation-filter";
 import { getPreviewUrl } from "../../domain/utils";
@@ -45,6 +46,7 @@ export function CreationsGalleryScreen({
   const { share } = useSharing();
   const alert = useAlert();
   const [selectedCreation, setSelectedCreation] = useState<Creation | null>(null);
+  const [showRatingPicker, setShowRatingPicker] = useState(false);
 
   const { data: creations, isLoading, refetch } = useCreations({ userId, repository });
   const deleteMutation = useDeleteCreation({ userId, repository });
@@ -101,13 +103,17 @@ export function CreationsGalleryScreen({
     setSelectedCreation(null);
   }, []);
 
-  const handleRate = useCallback(() => {
+  const handleOpenRatingPicker = useCallback(() => {
+    setShowRatingPicker(true);
+  }, []);
+
+  const handleSubmitRating = useCallback((rating: number) => {
     if (!userId || !selectedCreation) return;
     void (async () => {
-      const success = await repository.rate(userId, selectedCreation.id, 5);
+      const success = await repository.rate(userId, selectedCreation.id, rating);
       if (success) {
-        setSelectedCreation({ ...selectedCreation, rating: 5, ratedAt: new Date() });
-        alert.show(AlertType.SUCCESS, AlertMode.TOAST, t("rating.thankYouTitle"), t("rating.thankYouMessage"));
+        setSelectedCreation({ ...selectedCreation, rating, ratedAt: new Date() });
+        alert.show(AlertType.SUCCESS, AlertMode.TOAST, t("result.rateSuccessTitle"), t("result.rateSuccessMessage"));
         void refetch();
       }
     })();
@@ -182,29 +188,39 @@ export function CreationsGalleryScreen({
   if (selectedCreation && selectedImageUrl) {
     const hasRating = selectedCreation.rating !== undefined && selectedCreation.rating !== null;
     return (
-      <ResultPreviewScreen
-        imageUrl={selectedImageUrl}
-        isSaving={isSaving}
-        isSharing={isSharing}
-        onDownload={handleDownload}
-        onShare={handleShare}
-        onTryAgain={handleTryAgain}
-        onNavigateBack={handleBack}
-        onRate={handleRate}
-        hideLabel
-        iconOnly
-        showTryAgain={false}
-        showRating={!hasRating}
-        translations={{
-          title: t(config.translations.title),
-          yourResult: "",
-          saveButton: t("result.saveButton"),
-          saving: t("result.saving"),
-          shareButton: t("result.shareButton"),
-          sharing: t("result.sharing"),
-          tryAnother: "",
-        }}
-      />
+      <>
+        <ResultPreviewScreen
+          imageUrl={selectedImageUrl}
+          isSaving={isSaving}
+          isSharing={isSharing}
+          onDownload={handleDownload}
+          onShare={handleShare}
+          onTryAgain={handleTryAgain}
+          onNavigateBack={handleBack}
+          onRate={handleOpenRatingPicker}
+          hideLabel
+          iconOnly
+          showTryAgain={false}
+          showRating={!hasRating}
+          translations={{
+            title: t(config.translations.title),
+            yourResult: "",
+            saveButton: t("result.saveButton"),
+            saving: t("result.saving"),
+            shareButton: t("result.shareButton"),
+            sharing: t("result.sharing"),
+            tryAnother: "",
+          }}
+        />
+        <StarRatingPicker
+          visible={showRatingPicker}
+          onClose={() => setShowRatingPicker(false)}
+          onRate={handleSubmitRating}
+          title={t("result.rateTitle")}
+          submitLabel={t("common.submit")}
+          cancelLabel={t("common.cancel")}
+        />
+      </>
     );
   }
 

package/src/domains/result-preview/presentation/components/ResultActionBar.tsx

@@ -82,7 +82,7 @@ export const ResultActionBar: React.FC<ResultActionBarProps> = ({
           {isSaving ? (
             <ActivityIndicator color={tokens.colors.textInverse} size="small" />
           ) : (
-            <AtomicIcon name="Download" customSize={24} color="onPrimary" />
+            <AtomicIcon name="download-outline" customSize={24} color="onPrimary" />
           )}
         </TouchableOpacity>
         <TouchableOpacity
@@ -94,7 +94,7 @@ export const ResultActionBar: React.FC<ResultActionBarProps> = ({
           {isSharing ? (
             <ActivityIndicator color={tokens.colors.textInverse} size="small" />
           ) : (
-            <AtomicIcon name="Share2" customSize={24} color="onPrimary" />
+            <AtomicIcon name="share-social-outline" customSize={24} color="onPrimary" />
           )}
         </TouchableOpacity>
         {showRating && onRate && (
@@ -103,7 +103,7 @@ export const ResultActionBar: React.FC<ResultActionBarProps> = ({
             onPress={onRate}
             activeOpacity={0.7}
           >
-            <AtomicIcon name="Star" customSize={24} color="onPrimary" />
+            <AtomicIcon name="star-outline" customSize={24} color="onPrimary" />
           </TouchableOpacity>
         )}
       </View>

package/src/domains/result-preview/presentation/components/StarRatingPicker.tsx

@@ -0,0 +1,149 @@
+/**
+ * StarRatingPicker Component
+ * Shows 5 stars for rating selection
+ */
+
+import React, { useState, useMemo } from "react";
+import { StyleSheet, View, TouchableOpacity, Modal } from "react-native";
+import {
+  AtomicIcon,
+  AtomicText,
+  AtomicButton,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface StarRatingPickerProps {
+  visible: boolean;
+  onClose: () => void;
+  onRate: (rating: number) => void;
+  title?: string;
+  submitLabel?: string;
+  cancelLabel?: string;
+}
+
+export const StarRatingPicker: React.FC<StarRatingPickerProps> = ({
+  visible,
+  onClose,
+  onRate,
+  title = "Rate this creation",
+  submitLabel = "Submit",
+  cancelLabel = "Cancel",
+}) => {
+  const tokens = useAppDesignTokens();
+  const [selectedRating, setSelectedRating] = useState(0);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        overlay: {
+          flex: 1,
+          backgroundColor: "rgba(0, 0, 0, 0.6)",
+          justifyContent: "center",
+          alignItems: "center",
+          padding: tokens.spacing.lg,
+        },
+        container: {
+          backgroundColor: tokens.colors.surface,
+          borderRadius: 20,
+          padding: tokens.spacing.xl,
+          width: "100%",
+          maxWidth: 320,
+          alignItems: "center",
+        },
+        title: {
+          fontSize: 18,
+          fontWeight: "700",
+          color: tokens.colors.textPrimary,
+          marginBottom: tokens.spacing.lg,
+          textAlign: "center",
+        },
+        starsContainer: {
+          flexDirection: "row",
+          justifyContent: "center",
+          gap: 8,
+          marginBottom: tokens.spacing.xl,
+        },
+        starButton: {
+          padding: 4,
+        },
+        buttonsContainer: {
+          flexDirection: "row",
+          gap: tokens.spacing.md,
+          width: "100%",
+        },
+        button: {
+          flex: 1,
+        },
+      }),
+    [tokens],
+  );
+
+  const handleSubmit = () => {
+    if (selectedRating > 0) {
+      onRate(selectedRating);
+      setSelectedRating(0);
+      onClose();
+    }
+  };
+
+  const handleClose = () => {
+    setSelectedRating(0);
+    onClose();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={handleClose}
+    >
+      <TouchableOpacity
+        style={styles.overlay}
+        activeOpacity={1}
+        onPress={handleClose}
+      >
+        <TouchableOpacity
+          style={styles.container}
+          activeOpacity={1}
+          onPress={() => {}}
+        >
+          <AtomicText style={styles.title}>{title}</AtomicText>
+          <View style={styles.starsContainer}>
+            {[1, 2, 3, 4, 5].map((star) => (
+              <TouchableOpacity
+                key={star}
+                style={styles.starButton}
+                onPress={() => setSelectedRating(star)}
+                activeOpacity={0.7}
+              >
+                <AtomicIcon
+                  name={star <= selectedRating ? "star" : "star-outline"}
+                  customSize={40}
+                  customColor={star <= selectedRating ? "#FFD700" : tokens.colors.textTertiary}
+                />
+              </TouchableOpacity>
+            ))}
+          </View>
+          <View style={styles.buttonsContainer}>
+            <View style={styles.button}>
+              <AtomicButton
+                title={cancelLabel}
+                variant="secondary"
+                onPress={handleClose}
+              />
+            </View>
+            <View style={styles.button}>
+              <AtomicButton
+                title={submitLabel}
+                variant="primary"
+                onPress={handleSubmit}
+                disabled={selectedRating === 0}
+              />
+            </View>
+          </View>
+        </TouchableOpacity>
+      </TouchableOpacity>
+    </Modal>
+  );
+};

package/src/domains/result-preview/presentation/components/index.ts

@@ -7,6 +7,8 @@ export { ResultImageCard } from "./ResultImageCard";
 export { ResultActionBar } from "./ResultActionBar";
 export { RecentCreationsSection } from "./RecentCreationsSection";
 export { GenerationErrorScreen } from "./GenerationErrorScreen";
+export { StarRatingPicker } from "./StarRatingPicker";
+export type { StarRatingPickerProps } from "./StarRatingPicker";
 export type {
   GenerationErrorTranslations,
   GenerationErrorConfig,