@umituz/react-native-design-system 4.23.129 → 4.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.129",
+  "version": "4.25.0",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/carousel/BannerCarousel.tsx

@@ -0,0 +1,147 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "../theme";
+import { AtomicText } from "../atoms/AtomicText";
+import { AtomicIcon } from "../atoms/icon/AtomicIcon";
+import { Carousel } from "./Carousel";
+import type { CarouselItem as CarouselItemType } from "./types";
+
+export interface BannerItem {
+  id: string;
+  title: string;
+  subtitle: string;
+  backgroundColor: string;
+  action: () => void;
+}
+
+interface BannerCarouselProps {
+  items: BannerItem[];
+}
+
+export const BannerCarousel: React.FC<BannerCarouselProps> = ({ items }) => {
+  const tokens = useAppDesignTokens();
+
+  const renderBannerItem = (
+    item: CarouselItemType<BannerItem>,
+    _index: number,
+  ) => {
+    const bannerData = item.data;
+    const spacing = tokens.spacing;
+
+    return (
+      <View
+        style={[
+          styles.banner,
+          {
+            backgroundColor: bannerData.backgroundColor,
+            padding: spacing.xl,
+            minHeight: 240,
+            borderRadius: 28,
+          },
+        ]}
+      >
+        <View style={styles.bannerContent}>
+          <View
+            style={[styles.bannerTextContainer, { marginRight: spacing.lg }]}
+          >
+            <AtomicText
+              type="headlineLarge"
+              style={[
+                styles.bannerTitle,
+                {
+                  color: tokens.colors.textInverse,
+                  marginBottom: spacing.sm,
+                  fontSize: 32,
+                  lineHeight: 40,
+                  letterSpacing: -0.5,
+                },
+              ]}
+            >
+              {bannerData.title}
+            </AtomicText>
+            <AtomicText
+              type="bodyLarge"
+              style={[
+                styles.bannerSubtitle,
+                {
+                  color: tokens.colors.textInverse,
+                  opacity: 0.95,
+                  fontSize: 16,
+                  lineHeight: 24,
+                },
+              ]}
+            >
+              {bannerData.subtitle}
+            </AtomicText>
+          </View>
+          <View style={styles.bannerIconContainer}>
+            <View
+              style={[
+                styles.bannerIconCircle,
+                {
+                  width: 56,
+                  height: 56,
+                  borderRadius: 28,
+                  backgroundColor: "rgba(255, 255, 255, 0.3)",
+                  borderWidth: 1,
+                  borderColor: "rgba(255, 255, 255, 0.4)",
+                },
+              ]}
+            >
+              <AtomicIcon
+                name="arrow-forward-outline"
+                size="xl"
+                color="onSurface"
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  };
+
+  const carouselItems: CarouselItemType<BannerItem>[] = items.map((item) => ({
+    id: item.id,
+    data: item,
+    onPress: item.action,
+  }));
+
+  return (
+    <Carousel
+      items={carouselItems}
+      renderItem={renderBannerItem}
+      spacing={16}
+      showDots={true}
+      pagingEnabled={true}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  banner: {
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  bannerContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  bannerTextContainer: {
+    flex: 1,
+  },
+  bannerTitle: {
+    fontWeight: "800",
+  },
+  bannerSubtitle: {
+    fontWeight: "500",
+  },
+  bannerIconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  bannerIconCircle: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/carousel/Carousel.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { View, StyleSheet, ViewStyle } from "react-native";
+import { useAppDesignTokens } from "../theme";
+import { CarouselScrollView } from "./CarouselScrollView";
+import { CarouselDots } from "./CarouselDots";
+import { CarouselItem } from "./CarouselItem";
+import { useCarouselScroll } from "./useCarouselScroll";
+import { calculateItemWidth } from "./carouselCalculations";
+import type { CarouselProps, CarouselItem as CarouselItemType } from "./types";
+
+export const Carousel = <T,>({
+  items,
+  renderItem,
+  itemWidth,
+  spacing = 16,
+  onIndexChange,
+  showDots = true,
+  pagingEnabled = true,
+  style,
+}: CarouselProps<T> & { style?: ViewStyle }) => {
+  const tokens = useAppDesignTokens();
+  const calculatedItemWidth = itemWidth || calculateItemWidth(spacing);
+
+  const pageWidth = calculatedItemWidth + spacing;
+
+  const { currentIndex, handleScroll } = useCarouselScroll({
+    itemWidth: pageWidth,
+    onIndexChange,
+  });
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <CarouselScrollView
+        onScroll={handleScroll}
+        pagingEnabled={pagingEnabled}
+        spacing={spacing}
+        itemWidth={calculatedItemWidth}
+      >
+        {items.map((item, index) => (
+          <CarouselItem
+            key={item.id}
+            item={item}
+            itemWidth={calculatedItemWidth}
+            renderContent={(itemData) => renderItem(itemData, index)}
+            style={
+              index < items.length - 1 ? { marginRight: spacing } : undefined
+            }
+          />
+        ))}
+      </CarouselScrollView>
+
+      {showDots && items.length > 1 && (
+        <CarouselDots
+          count={items.length}
+          currentIndex={currentIndex}
+          activeColor={tokens.colors.primary}
+          inactiveColor={tokens.colors.border}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 8,
+    marginBottom: 8,
+  },
+});

package/src/carousel/CarouselDots.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "../theme";
+import type { CarouselDotsProps } from "./types";
+
+export const CarouselDots: React.FC<CarouselDotsProps> = ({
+  count,
+  currentIndex,
+  activeColor,
+  inactiveColor,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (count <= 1) {
+    return null;
+  }
+
+  const activeDotColor = activeColor || tokens.colors.primary;
+  const inactiveDotColor = inactiveColor || tokens.colors.border;
+
+  return (
+    <View style={styles.container}>
+      {Array.from({ length: count }).map((_, index) => (
+        <View
+          key={index}
+          style={[
+            styles.dot,
+            {
+              backgroundColor:
+                index === currentIndex ? activeDotColor : inactiveDotColor,
+            },
+          ]}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 12,
+    gap: 8,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+});

package/src/carousel/CarouselItem.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { TouchableOpacity, StyleSheet, ViewStyle } from "react-native";
+import type { CarouselItem as CarouselItemType } from "./types";
+
+interface CarouselItemProps<T = unknown> {
+  item: CarouselItemType<T>;
+  itemWidth: number;
+  renderContent: (item: CarouselItemType<T>) => React.ReactNode;
+  style?: ViewStyle;
+  activeOpacity?: number;
+}
+
+export const CarouselItem = <T,>({
+  item,
+  itemWidth,
+  renderContent,
+  style,
+  activeOpacity = 0.9,
+}: CarouselItemProps<T>) => {
+  return (
+    <TouchableOpacity
+      activeOpacity={activeOpacity}
+      onPress={item.onPress}
+      style={[styles.container, { width: itemWidth }, style]}
+    >
+      {renderContent(item)}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    // Container styles handled by width prop
+  },
+});

package/src/carousel/CarouselScrollView.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import {
+  ScrollView,
+  StyleSheet,
+  ViewStyle,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+} from "react-native";
+
+interface CarouselScrollViewProps {
+  itemWidth: number;
+  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  children: React.ReactNode;
+  pagingEnabled?: boolean;
+  style?: ViewStyle;
+  contentContainerStyle?: ViewStyle;
+  spacing?: number;
+}
+
+export const CarouselScrollView: React.FC<CarouselScrollViewProps> = ({
+  onScroll,
+  children,
+  pagingEnabled = true,
+  style,
+  contentContainerStyle,
+  spacing = 0,
+}) => {
+  return (
+    <ScrollView
+      horizontal
+      pagingEnabled={pagingEnabled}
+      showsHorizontalScrollIndicator={false}
+      onScroll={onScroll}
+      scrollEventThrottle={16}
+      style={[styles.scrollView, style]}
+      contentContainerStyle={[
+        styles.scrollContent,
+        pagingEnabled
+          ? { paddingHorizontal: spacing }
+          : { paddingLeft: spacing, paddingRight: spacing },
+        contentContainerStyle,
+      ]}
+    >
+      {children}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollView: {
+    marginHorizontal: 0,
+  },
+  scrollContent: {
+    paddingHorizontal: 0,
+  },
+});

package/src/carousel/carouselCalculations.ts

@@ -0,0 +1,18 @@
+import { Dimensions } from "react-native";
+
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+
+export const calculateItemWidth = (padding: number = 16): number => {
+  return SCREEN_WIDTH - padding * 2;
+};
+
+export const calculateIndexFromScroll = (
+  scrollPosition: number,
+  itemWidth: number,
+): number => {
+  return Math.round(scrollPosition / itemWidth);
+};
+
+export const getScreenWidth = (): number => {
+  return SCREEN_WIDTH;
+};

package/src/carousel/index.ts

@@ -0,0 +1,21 @@
+export type {
+  CarouselItem,
+  CarouselProps,
+  CarouselScrollProps,
+  CarouselDotsProps,
+} from "./types";
+
+export { useCarouselScroll } from "./useCarouselScroll";
+
+export {
+  calculateItemWidth,
+  calculateIndexFromScroll,
+  getScreenWidth,
+} from "./carouselCalculations";
+
+export { CarouselDots } from "./CarouselDots";
+export { CarouselItem as CarouselItemComponent } from "./CarouselItem";
+export { CarouselScrollView } from "./CarouselScrollView";
+export { Carousel } from "./Carousel";
+export { BannerCarousel } from "./BannerCarousel";
+export type { BannerItem } from "./BannerCarousel";

package/src/carousel/types.ts

@@ -0,0 +1,31 @@
+import type { NativeSyntheticEvent, NativeScrollEvent } from "react-native";
+
+export interface CarouselItem<T = unknown> {
+  id: string;
+  data: T;
+  onPress?: () => void;
+}
+
+export interface CarouselProps<T = unknown> {
+  items: CarouselItem<T>[];
+  renderItem: (item: CarouselItem<T>, index: number) => React.ReactNode;
+  itemWidth?: number;
+  spacing?: number;
+  onIndexChange?: (index: number) => void;
+  showDots?: boolean;
+  pagingEnabled?: boolean;
+}
+
+export interface CarouselScrollProps {
+  itemWidth: number;
+  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  children: React.ReactNode;
+  pagingEnabled?: boolean;
+}
+
+export interface CarouselDotsProps {
+  count: number;
+  currentIndex: number;
+  activeColor?: string;
+  inactiveColor?: string;
+}

package/src/carousel/useCarouselScroll.ts

@@ -0,0 +1,33 @@
+import { useState, useCallback } from "react";
+import { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
+import { calculateIndexFromScroll } from "./carouselCalculations";
+
+interface UseCarouselScrollOptions {
+  itemWidth: number;
+  onIndexChange?: (index: number) => void;
+}
+
+export const useCarouselScroll = ({
+  itemWidth,
+  onIndexChange,
+}: UseCarouselScrollOptions) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const scrollPosition = event.nativeEvent.contentOffset.x;
+      const newIndex = calculateIndexFromScroll(scrollPosition, itemWidth);
+
+      if (newIndex !== currentIndex) {
+        setCurrentIndex(newIndex);
+        onIndexChange?.(newIndex);
+      }
+    },
+    [itemWidth, currentIndex, onIndexChange],
+  );
+
+  return {
+    currentIndex,
+    handleScroll,
+  };
+};

package/src/gallery/gallery-download.service.ts

@@ -0,0 +1,69 @@
+/**
+ * Gallery Download Service
+ * Single Responsibility: Download remote media to local storage
+ */
+
+import { FileSystemService } from "../filesystem";
+import { validateImageUri, getFileExtension } from "../image";
+import { timezoneService } from "../timezone";
+import type { DownloadMediaResult } from "./types";
+
+const generateFilename = (uri: string, prefix: string): string => {
+  const extension = getFileExtension(uri) || "jpg";
+  const timestamp = timezoneService.formatDateToString(new Date());
+  const randomId = Math.random().toString(36).substring(2, 10);
+  return `${prefix}_${timestamp}_${randomId}.${extension}`;
+};
+
+class GalleryDownloadService {
+  async downloadMedia(
+    mediaUri: string,
+    prefix: string = "media",
+  ): Promise<DownloadMediaResult> {
+    try {
+      const validationResult = validateImageUri(mediaUri, "Media");
+      if (!validationResult.isValid) {
+        return {
+          success: false,
+          error: validationResult.error || "Invalid media file",
+        };
+      }
+
+      const filename = generateFilename(mediaUri, prefix);
+      const documentDir = FileSystemService.getDocumentDirectory();
+      const fileUri = `${documentDir}${filename}`;
+
+      const downloadResult = await FileSystemService.downloadFile(
+        mediaUri,
+        fileUri,
+      );
+
+      if (!downloadResult.success || !downloadResult.uri) {
+        return {
+          success: false,
+          error: downloadResult.error || "Download failed",
+        };
+      }
+
+      return {
+        success: true,
+        localUri: downloadResult.uri,
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : "Download failed",
+      };
+    }
+  }
+
+  isRemoteUrl(uri: string): boolean {
+    return uri.startsWith("http://") || uri.startsWith("https://");
+  }
+
+  async cleanupFile(fileUri: string): Promise<void> {
+    await FileSystemService.deleteFile(fileUri);
+  }
+}
+
+export const galleryDownloadService = new GalleryDownloadService();

package/src/gallery/gallery-save.service.ts

@@ -0,0 +1,80 @@
+/**
+ * Gallery Save Service
+ * Single Responsibility: Save media to device gallery
+ */
+
+import * as MediaLibrary from "expo-media-library";
+import { validateImageUri } from "../image";
+import { galleryDownloadService } from "./gallery-download.service";
+import type { SaveMediaResult } from "./types";
+
+const requestMediaPermissions = async (): Promise<boolean> => {
+  try {
+    const { status } = await MediaLibrary.requestPermissionsAsync();
+    return status === "granted";
+  } catch {
+    return false;
+  }
+};
+
+class GallerySaveService {
+  async saveToGallery(
+    mediaUri: string,
+    prefix?: string,
+  ): Promise<SaveMediaResult> {
+    try {
+      const validationResult = validateImageUri(mediaUri, "Media");
+      if (!validationResult.isValid) {
+        return {
+          success: false,
+          error: validationResult.error || "Invalid media file",
+        };
+      }
+
+      const hasPermission = await requestMediaPermissions();
+      if (!hasPermission) {
+        return {
+          success: false,
+          error: "Media library permission denied",
+        };
+      }
+
+      let localUri = mediaUri;
+      const isRemote = galleryDownloadService.isRemoteUrl(mediaUri);
+
+      if (isRemote) {
+        const downloadResult = await galleryDownloadService.downloadMedia(
+          mediaUri,
+          prefix,
+        );
+
+        if (!downloadResult.success || !downloadResult.localUri) {
+          return {
+            success: false,
+            error: downloadResult.error || "Download failed",
+          };
+        }
+
+        localUri = downloadResult.localUri;
+      }
+
+      const asset = await MediaLibrary.createAssetAsync(localUri);
+
+      if (isRemote && localUri) {
+        await galleryDownloadService.cleanupFile(localUri);
+      }
+
+      return {
+        success: true,
+        fileUri: asset.uri,
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : "Save failed",
+      };
+    }
+  }
+}
+
+export const gallerySaveService = new GallerySaveService();

package/src/gallery/index.ts

@@ -0,0 +1,3 @@
+export { gallerySaveService } from "./gallery-save.service";
+export { galleryDownloadService } from "./gallery-download.service";
+export type { SaveMediaResult, DownloadMediaResult } from "./types";

package/src/gallery/types.ts

@@ -0,0 +1,11 @@
+export interface SaveMediaResult {
+  success: boolean;
+  fileUri?: string;
+  error?: string;
+}
+
+export interface DownloadMediaResult {
+  success: boolean;
+  localUri?: string;
+  error?: string;
+}

package/src/index.ts

@@ -147,3 +147,13 @@ export * from "./loading";
 // INIT EXPORTS
 // =============================================================================
 export * from "./init";
+
+// =============================================================================
+// GALLERY EXPORTS
+// =============================================================================
+export * from "./gallery";
+
+// =============================================================================
+// CAROUSEL EXPORTS
+// =============================================================================
+export * from "./carousel";