@umituz/react-native-ai-generation-content 1.12.44 → 1.13.1

package/package.json

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

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

@@ -31,7 +31,7 @@ export function CreationCard({
   const tokens = useAppDesignTokens();
   const { translatedTypes, t } = useCreationsProvider();
 
-  const typeConfig = translatedTypes.find((t) => t.id === creation.type);
+  const typeConfig = translatedTypes.find((type) => type.id === creation.type);
   const icon = typeConfig?.icon;
   // Use manual name if available, otherwise use translated label from config
   const label = (creation.metadata?.names as string) || typeConfig?.labelKey || creation.type;

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

@@ -0,0 +1,56 @@
+/**
+ * Creations Provider
+ * Context provider for creations configuration and localization
+ */
+
+import React, { createContext, useContext, useMemo, type ReactNode } from "react";
+import type { CreationsConfig, CreationType } from "../../domain/value-objects/CreationsConfig";
+import { getTranslatedTypes } from "../utils/filterUtils";
+
+interface CreationsContextValue {
+  config: CreationsConfig;
+  t: (key: string) => string;
+  translatedTypes: readonly CreationType[];
+  getLocalizedTitle: (typeId: string) => string;
+}
+
+const CreationsContext = createContext<CreationsContextValue | null>(null);
+
+interface CreationsProviderProps {
+  config: CreationsConfig;
+  t: (key: string) => string;
+  children: ReactNode;
+}
+
+export function CreationsProvider({ config, t, children }: CreationsProviderProps) {
+  const translatedTypes = useMemo(() => getTranslatedTypes(config, t), [config, t]);
+
+  const getLocalizedTitle = (typeId: string): string => {
+    const typeConfig = translatedTypes.find((type) => type.id === typeId);
+    return typeConfig?.labelKey || typeId;
+  };
+
+  const value = useMemo<CreationsContextValue>(
+    () => ({
+      config,
+      t,
+      translatedTypes,
+      getLocalizedTitle,
+    }),
+    [config, t, translatedTypes]
+  );
+
+  return (
+    <CreationsContext.Provider value={value}>
+      {children}
+    </CreationsContext.Provider>
+  );
+}
+
+export function useCreationsProvider(): CreationsContextValue {
+  const context = useContext(CreationsContext);
+  if (!context) {
+    throw new Error("useCreationsProvider must be used within a CreationsProvider");
+  }
+  return context;
+}

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/components/index.ts

@@ -11,6 +11,7 @@ export { CreationCard } from "./CreationCard";
 export { CreationThumbnail } from "./CreationThumbnail";
 export { CreationImageViewer } from "./CreationImageViewer";
 export { CreationsGrid } from "./CreationsGrid";
+export { CreationsProvider, useCreationsProvider } from "./CreationsProvider";
 
 // Detail Components
 export { DetailHeader } from "./CreationDetail/DetailHeader";