@umituz/react-native-ai-generation-content 1.12.43 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.12.43",
+  "version": "1.13.0",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -102,4 +102,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/domains/creations/index.ts

@@ -75,6 +75,10 @@ export { CreationCard } from "./presentation/components/CreationCard";
 export { CreationsHomeCard } from "./presentation/components/CreationsHomeCard";
 export { FilterChips } from "./presentation/components/FilterChips";
 export { EmptyState } from "./presentation/components/EmptyState";
+export {
+  CreationsProvider,
+  useCreationsProvider,
+} from "./presentation/components/CreationsProvider";
 
 // =============================================================================
 // PRESENTATION LAYER - Screens

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

@@ -9,9 +9,10 @@ import { timezoneService } from "@umituz/react-native-timezone";
 import type { Creation } from "../../domain/entities/Creation";
 import type { CreationType } from "../../domain/value-objects/CreationsConfig";
 
+import { useCreationsProvider } from "./CreationsProvider";
+
 interface CreationCardProps {
   readonly creation: Creation;
-  readonly types: readonly CreationType[];
   readonly onView?: (creation: Creation) => void;
   readonly onShare: (creation: Creation) => void;
   readonly onDelete: (creation: Creation) => void;
@@ -21,7 +22,6 @@ interface CreationCardProps {
 
 export function CreationCard({
   creation,
-  types,
   onView,
   onShare,
   onDelete,
@@ -29,10 +29,12 @@ export function CreationCard({
   locale = "en-US",
 }: CreationCardProps) {
   const tokens = useAppDesignTokens();
+  const { translatedTypes, t } = useCreationsProvider();
 
-  const typeConfig = types.find((t) => t.id === creation.type);
+  const typeConfig = translatedTypes.find((t) => t.id === creation.type);
   const icon = typeConfig?.icon;
-  const label = typeConfig?.labelKey || creation.type;
+  // Use manual name if available, otherwise use translated label from config
+  const label = (creation.metadata?.names as string) || typeConfig?.labelKey || creation.type;
 
   const handleView = useCallback(() => onView?.(creation), [creation, onView]);
   const handleShare = useCallback(() => onShare(creation), [creation, onShare]);

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

@@ -2,7 +2,6 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { AtomicText, AtomicIcon, useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
-import { type EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
 
 interface DetailHeaderProps {
     readonly title: string;
@@ -12,8 +11,7 @@ interface DetailHeaderProps {
 
 export const DetailHeader: React.FC<DetailHeaderProps> = ({ title, date, onClose }) => {
     const tokens = useAppDesignTokens();
-    const insets = useSafeAreaInsets();
-    const styles = useStyles(tokens, insets);
+    const styles = useStyles(tokens);
 
     return (
         <View style={styles.headerContainer}>
@@ -34,11 +32,11 @@ export const DetailHeader: React.FC<DetailHeaderProps> = ({ title, date, onClose
     );
 };
 
-const useStyles = (tokens: DesignTokens, insets: EdgeInsets) => StyleSheet.create({
+const useStyles = (tokens: DesignTokens) => StyleSheet.create({
     headerContainer: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingTop: insets.top + tokens.spacing.sm,
+        paddingTop: tokens.spacing.sm,
         paddingBottom: tokens.spacing.md,
         paddingHorizontal: tokens.spacing.md,
         backgroundColor: tokens.colors.background,

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

@@ -7,7 +7,6 @@ import { CreationCard } from "./CreationCard";
 
 interface CreationsGridProps {
     readonly creations: Creation[];
-    readonly types: readonly CreationType[];
     readonly isLoading: boolean;
     readonly onRefresh: () => void;
     readonly onView: (creation: Creation) => void;
@@ -22,7 +21,6 @@ interface CreationsGridProps {
 
 export const CreationsGrid: React.FC<CreationsGridProps> = ({
     creations,
-    types,
     isLoading,
     onRefresh,
     onView,
@@ -40,7 +38,6 @@ export const CreationsGrid: React.FC<CreationsGridProps> = ({
     const renderItem = ({ item }: { item: Creation }) => (
         <CreationCard
             creation={item}
-            types={types as CreationType[]}
             onView={() => onView(item)}
             onShare={() => onShare(item)}
             onDelete={() => onDelete(item)}

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

@@ -4,8 +4,8 @@
  */
 
 import React from "react";
-import { View, ActivityIndicator, StyleSheet } from "react-native";
-import type { DesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { AtomicSkeleton, type DesignTokens } from "@umituz/react-native-design-system";
 import { EmptyState } from "./EmptyState";
 import type { Creation } from "../../domain/entities/Creation";
 
@@ -22,6 +22,42 @@ interface GalleryEmptyStatesProps {
     onClearFilters: () => void;
 }
 
+/** Skeleton card matching CreationCard layout */
+function CreationCardSkeleton({ tokens }: { tokens: DesignTokens }) {
+    const styles = createSkeletonStyles(tokens);
+    return (
+        <View style={styles.card}>
+            {/* Thumbnail skeleton */}
+            <AtomicSkeleton
+                pattern="custom"
+                custom={[{ width: 100, height: 100, borderRadius: 0 }]}
+            />
+            {/* Content skeleton */}
+            <View style={styles.content}>
+                <View style={styles.textArea}>
+                    <AtomicSkeleton
+                        pattern="custom"
+                        custom={[
+                            { width: 120, height: 18, borderRadius: 4, marginBottom: 8 },
+                            { width: 100, height: 14, borderRadius: 4 },
+                        ]}
+                    />
+                </View>
+                {/* Action buttons skeleton */}
+                <View style={styles.actions}>
+                    {[1, 2, 3, 4].map((i) => (
+                        <AtomicSkeleton
+                            key={i}
+                            pattern="custom"
+                            custom={[{ width: 36, height: 36, borderRadius: 18 }]}
+                        />
+                    ))}
+                </View>
+            </View>
+        </View>
+    );
+}
+
 export function GalleryEmptyStates({
     isLoading,
     creations,
@@ -36,11 +72,13 @@ export function GalleryEmptyStates({
 }: GalleryEmptyStatesProps) {
     const styles = createStyles(tokens);
 
-    // 1. Loading State
+    // 1. Loading State - Show skeleton cards
     if (isLoading && (!creations || creations?.length === 0)) {
         return (
-            <View style={styles.centerContainer}>
-                <ActivityIndicator size="large" color={tokens.colors.primary} />
+            <View style={styles.skeletonContainer}>
+                {[1, 2, 3].map((i) => (
+                    <CreationCardSkeleton key={i} tokens={tokens} />
+                ))}
             </View>
         );
     }
@@ -84,4 +122,31 @@ const createStyles = (tokens: DesignTokens) => StyleSheet.create({
         minHeight: 400,
         paddingHorizontal: tokens.spacing.xl,
     },
+    skeletonContainer: {
+        flex: 1,
+        paddingHorizontal: tokens.spacing.md,
+        paddingTop: tokens.spacing.md,
+    },
+});
+
+const createSkeletonStyles = (tokens: DesignTokens) => StyleSheet.create({
+    card: {
+        flexDirection: 'row',
+        backgroundColor: tokens.colors.surface,
+        borderRadius: tokens.spacing.md,
+        overflow: 'hidden',
+        marginBottom: tokens.spacing.md,
+    },
+    content: {
+        flex: 1,
+        padding: tokens.spacing.md,
+        justifyContent: 'space-between',
+    },
+    textArea: {
+        gap: tokens.spacing.xs,
+    },
+    actions: {
+        flexDirection: 'row',
+        gap: tokens.spacing.sm,
+    },
 });

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

@@ -1,13 +1,14 @@
-
 import React from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
-import { useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
+import { StyleSheet } from 'react-native';
+import { useAppDesignTokens, type DesignTokens, ScreenLayout } from "@umituz/react-native-design-system";
 import type { Creation } from '../../domain/entities/Creation';
 import { DetailHeader } from '../components/CreationDetail/DetailHeader';
 import { DetailImage } from '../components/CreationDetail/DetailImage';
 import { DetailStory } from '../components/CreationDetail/DetailStory';
 import { DetailActions } from '../components/CreationDetail/DetailActions';
 
+import { useCreationsProvider } from '../components/CreationsProvider';
+
 interface CreationDetailScreenProps {
     readonly creation: Creation;
     readonly onClose: () => void;
@@ -31,47 +32,52 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
     t
 }) => {
     const tokens = useAppDesignTokens();
+    const { getLocalizedTitle } = useCreationsProvider();
 
     // Extract data safely
     const metadata = (creation.metadata || {}) as CreationMetadata;
-    const title = metadata.names || creation.type;
+
+    // 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(creation.type);
     const story = metadata.story || metadata.description || "";
     const date = metadata.date || new Date(creation.createdAt).toLocaleDateString();
 
     const styles = useStyles(tokens);
 
     return (
-        <View style={styles.container}>
-            <DetailHeader
-                title={title}
-                date={date}
-                onClose={onClose}
-            />
-
-            <ScrollView
-                contentContainerStyle={styles.scrollContent}
-                showsVerticalScrollIndicator={false}
-            >
-                <DetailImage uri={creation.uri} />
+        <ScreenLayout
+            scrollable={true}
+            edges={['top', 'bottom']}
+            backgroundColor={tokens.colors.background}
+            header={
+                <DetailHeader
+                    title={title}
+                    date={date}
+                    onClose={onClose}
+                />
+            }
+            contentContainerStyle={styles.scrollContent}
+        >
+            <DetailImage uri={creation.uri} />
 
+            {story ? (
                 <DetailStory story={story} />
+            ) : null}
 
-                <DetailActions
-                    onShare={() => onShare(creation)}
-                    onDelete={() => onDelete(creation)}
-                    shareLabel={t("result.shareButton") || "Share"}
-                    deleteLabel={t("common.delete") || "Delete"}
-                />
-            </ScrollView>
-        </View>
+            <DetailActions
+                onShare={() => onShare(creation)}
+                onDelete={() => onDelete(creation)}
+                shareLabel={t("result.shareButton") || "Share"}
+                deleteLabel={t("common.delete") || "Delete"}
+            />
+        </ScreenLayout>
     );
 };
 
 const useStyles = (tokens: DesignTokens) => StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: tokens.colors.background,
-    },
     scrollContent: {
         paddingBottom: tokens.spacing.xxl,
     },

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

@@ -10,7 +10,8 @@ import {
   useSharing,
   FilterBottomSheet,
   type DesignTokens,
-  type BottomSheetModalRef
+  type BottomSheetModalRef,
+  ScreenLayout
 } from "@umituz/react-native-design-system";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useFocusEffect } from "@react-navigation/native";
@@ -37,7 +38,17 @@ interface CreationsGalleryScreenProps {
   readonly showFilter?: boolean;
 }
 
-export function CreationsGalleryScreen({
+import { CreationsProvider } from "../components/CreationsProvider";
+
+export function CreationsGalleryScreen(props: CreationsGalleryScreenProps) {
+  return (
+    <CreationsProvider config={props.config} t={props.t}>
+      <CreationsGalleryScreenContent {...props} />
+    </CreationsProvider>
+  );
+}
+
+function CreationsGalleryScreenContent({
   userId,
   repository,
   config,
@@ -149,40 +160,38 @@ export function CreationsGalleryScreen({
     );
   }
 
-  const handleLayout = (event: LayoutChangeEvent) => {
-    // Keep internal logic if needed, currently empty but handles the event correctly
-    void event;
-  };
-
   return (
-    <View style={styles.container} onLayout={handleLayout}>
-      {(!creations || creations?.length === 0) && !isLoading ? null : (
-        <GalleryHeader
-          title={t(config.translations.title) || 'My Creations'}
-          count={filtered.length}
-          countLabel={t(config.translations.photoCount) || 'photos'}
-          isFiltered={isFiltered}
-          showFilter={showFilter}
-          filterLabel={t(config.translations.filterLabel) || 'Filter'}
-          onFilterPress={() => {
-            if (__DEV__) {
-              // eslint-disable-next-line no-console
-              console.log('[CreationsGallery] Filter button pressed');
-              // eslint-disable-next-line no-console
-              console.log('[CreationsGallery] filterSheetRef.current:', filterSheetRef.current);
-              // eslint-disable-next-line no-console
-              console.log('[CreationsGallery] allCategories:', allCategories);
-            }
-            filterSheetRef.current?.present();
-          }}
-          style={{ paddingTop: insets.top + tokens.spacing.md }}
-        />
-      )}
-
+    <ScreenLayout
+      scrollable={false}
+      edges={["top"]}
+      backgroundColor={tokens.colors.background}
+      header={
+        (!creations || creations?.length === 0) && !isLoading ? null : (
+          <GalleryHeader
+            title={t(config.translations.title) || 'My Creations'}
+            count={filtered.length}
+            countLabel={t(config.translations.photoCount) || 'photos'}
+            isFiltered={isFiltered}
+            showFilter={showFilter}
+            filterLabel={t(config.translations.filterLabel) || 'Filter'}
+            onFilterPress={() => {
+              if (__DEV__) {
+                // eslint-disable-next-line no-console
+                console.log('[CreationsGallery] Filter button pressed');
+                // eslint-disable-next-line no-console
+                console.log('[CreationsGallery] filterSheetRef.current:', filterSheetRef.current);
+                // eslint-disable-next-line no-console
+                console.log('[CreationsGallery] allCategories:', allCategories);
+              }
+              filterSheetRef.current?.present();
+            }}
+          />
+        )
+      }
+    >
       {/* Main Content Grid - handles empty/loading via ListEmptyComponent */}
       <CreationsGrid
         creations={filtered}
-        types={translatedTypes}
         isLoading={isLoading}
         onRefresh={() => void refetch()}
         onView={handleView}
@@ -190,7 +199,7 @@ export function CreationsGalleryScreen({
         onDelete={handleDelete}
         onFavorite={handleFavorite}
         locale={locale}
-        contentContainerStyle={{ paddingBottom: insets.bottom + tokens.spacing.xl }}
+        contentContainerStyle={{ paddingBottom: tokens.spacing.xl }}
         ListEmptyComponent={renderEmptyComponent}
       />
 
@@ -215,7 +224,7 @@ export function CreationsGalleryScreen({
         onClearFilters={clearFilters}
         title={t(config.translations.filterTitle) || t("common.filter")}
       />
-    </View>
+    </ScreenLayout>
   );
 }