@umituz/react-native-design-system 2.6.128 → 2.8.0

package/src/onboarding/infrastructure/storage/actions/storageHelpers.ts

@@ -0,0 +1,60 @@
+/**
+ * Storage Helpers
+ * Single Responsibility: Common storage operations and error handling
+ */
+
+import { storageRepository, unwrap } from "@umituz/react-native-storage";
+import type { OnboardingUserData } from "../../../domain/entities/OnboardingUserData";
+
+export const DEFAULT_STORAGE_KEY = "@onboarding:completed";
+export const USER_DATA_STORAGE_KEY = "@onboarding:user_data";
+
+export async function loadCompletionStatus(storageKey: string): Promise<boolean> {
+  const result = await storageRepository.getString(storageKey, "false");
+  return unwrap(result, "false") === "true";
+}
+
+export async function loadUserData(
+  defaultData: OnboardingUserData
+): Promise<OnboardingUserData> {
+  const result = await storageRepository.getItem<OnboardingUserData>(
+    USER_DATA_STORAGE_KEY,
+    defaultData
+  );
+  return unwrap(result, defaultData);
+}
+
+export async function saveCompletionStatus(storageKey: string): Promise<void> {
+  const result = await storageRepository.setString(storageKey, "true");
+  if (!result.success) {
+    throw new Error("Failed to save completion status to storage");
+  }
+}
+
+export async function saveUserData(data: OnboardingUserData): Promise<void> {
+  const result = await storageRepository.setItem(USER_DATA_STORAGE_KEY, data);
+  if (!result.success) {
+    throw new Error("Failed to save user data to storage");
+  }
+}
+
+export async function removeStorageKeys(storageKey: string): Promise<void> {
+  await storageRepository.removeItem(storageKey);
+  await storageRepository.removeItem(USER_DATA_STORAGE_KEY);
+}
+
+export function handleError(error: unknown, context: string): string {
+  const message = error instanceof Error ? error.message : `Failed to ${context}`;
+
+  if (__DEV__) {
+    console.error(`[OnboardingStore] ${context} error:`, error);
+  }
+
+  return message;
+}
+
+export function logSuccess(message: string): void {
+  if (__DEV__) {
+    console.log(`[OnboardingStore] ${message}`);
+  }
+}

package/src/onboarding/infrastructure/utils/arrayUtils.ts

@@ -0,0 +1,28 @@
+/**
+ * Array Utilities
+ * Safe array operations for onboarding components
+ */
+
+/**
+ * Ensures the value is a valid array, returns empty array if not
+ */
+export const ensureArray = <T>(value: T[] | undefined | null): T[] => {
+  return Array.isArray(value) ? value : [];
+};
+
+/**
+ * Safe includes check that handles undefined/null values
+ */
+export const safeIncludes = <T>(array: T[] | undefined | null, item: T): boolean => {
+  return ensureArray(array).includes(item);
+};
+
+/**
+ * Safe filter that handles undefined/null values
+ */
+export const safeFilter = <T>(
+  array: T[] | undefined | null,
+  predicate: (item: T) => boolean,
+): T[] => {
+  return ensureArray(array).filter(predicate);
+};

package/src/onboarding/infrastructure/utils/backgroundUtils.ts

@@ -0,0 +1,38 @@
+/**
+ * Background Utilities
+ *
+ * Utility functions for background-related operations
+ * Follows Single Responsibility Principle
+ */
+
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+
+/**
+ * Check if slide should use custom background or overlay
+ * Indicates that we are not using the default theme background.
+ * 
+ * @param slide - The slide to check
+ * @param globalUseCustomBackground - Global option from OnboardingOptions
+ * @returns true if custom background/media should be used, false otherwise
+ */
+export function shouldUseCustomBackground(
+  slide: OnboardingSlide | undefined,
+  globalUseCustomBackground?: boolean
+): boolean {
+  if (!slide) {
+    return false;
+  }
+
+  // If there is background media, we always treat it as custom (needs overlay for readability)
+  if (slide.backgroundImage || slide.backgroundVideo || (slide.backgroundImages && slide.backgroundImages.length > 0)) {
+    return true;
+  }
+
+  // If global custom background is enabled, use it if slide has color defined
+  if (globalUseCustomBackground === true) {
+    return !!slide.backgroundColor;
+  }
+
+  // Otherwise, check slide's own useCustomBackground prop
+  return slide.useCustomBackground === true && !!slide.backgroundColor;
+}

package/src/onboarding/infrastructure/utils/layouts/collageLayout.ts

@@ -0,0 +1,81 @@
+/**
+ * Collage Layout Generator
+ * Random collage with varying sizes
+ */
+
+import { SCREEN_WIDTH, SCREEN_HEIGHT } from "./screenDimensions";
+import type { ImageLayoutItem, LayoutConfig, ImageSourceType } from "./layoutTypes";
+
+export const generateCollageLayout = (
+  images: ImageSourceType[],
+  config: LayoutConfig = {},
+): ImageLayoutItem[] => {
+  const { borderRadius = 8 } = config;
+  const layouts: ImageLayoutItem[] = [];
+  const minSize = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT) * 0.15;
+  const maxSize = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT) * 0.35;
+
+  images.forEach((source) => {
+    const size = minSize + Math.random() * (maxSize - minSize);
+    const position = findNonOverlappingPosition(layouts, size);
+
+    layouts.push({
+      source,
+      style: {
+        position: "absolute" as const,
+        left: position.left,
+        top: position.top,
+        width: size,
+        height: size,
+        borderRadius,
+      },
+    });
+  });
+
+  return layouts;
+};
+
+const findNonOverlappingPosition = (
+  existing: ImageLayoutItem[],
+  size: number,
+): { left: number; top: number } => {
+  const maxX = SCREEN_WIDTH - size;
+  const maxY = SCREEN_HEIGHT - size;
+  let attempts = 0;
+  let left = 0;
+  let top = 0;
+
+  while (attempts < 50) {
+    left = Math.random() * maxX;
+    top = Math.random() * maxY;
+
+    if (!hasOverlap(existing, left, top, size)) {
+      break;
+    }
+    attempts++;
+  }
+
+  return { left, top };
+};
+
+const hasOverlap = (
+  existing: ImageLayoutItem[],
+  left: number,
+  top: number,
+  size: number,
+): boolean => {
+  const threshold = 20;
+
+  for (const item of existing) {
+    const { style } = item;
+    if (
+      left < style.left + style.width - threshold &&
+      left + size > style.left + threshold &&
+      top < style.top + style.height - threshold &&
+      top + size > style.top + threshold
+    ) {
+      return true;
+    }
+  }
+  return false;
+};

package/src/onboarding/infrastructure/utils/layouts/gridLayouts.ts

@@ -0,0 +1,78 @@
+/**
+ * Grid Layout Generators
+ * Standard and dense grid layouts with safe area support
+ */
+
+import { SCREEN_WIDTH, SCREEN_HEIGHT } from "./screenDimensions";
+import type { ImageLayoutItem, LayoutConfig, ImageSourceType } from "./layoutTypes";
+
+export const generateGridLayout = (
+  images: ImageSourceType[],
+  config: LayoutConfig = {},
+): ImageLayoutItem[] => {
+  const { columns, gap = 0, borderRadius = 0, safeAreaInsets } = config;
+  const count = images.length;
+  const cols = columns ?? Math.ceil(Math.sqrt(count));
+  const rows = Math.ceil(count / cols);
+
+  const insets = safeAreaInsets ?? { top: 0, bottom: 0, left: 0, right: 0 };
+  const availableWidth = SCREEN_WIDTH - insets.left - insets.right;
+  const availableHeight = SCREEN_HEIGHT - insets.top - insets.bottom;
+
+  const totalGapX = gap * (cols - 1);
+  const totalGapY = gap * (rows - 1);
+  const cellWidth = (availableWidth - totalGapX) / cols;
+  const cellHeight = (availableHeight - totalGapY) / rows;
+
+  return images.map((source, index) => {
+    const col = index % cols;
+    const row = Math.floor(index / cols);
+
+    return {
+      source,
+      style: {
+        position: "absolute" as const,
+        left: insets.left + col * (cellWidth + gap),
+        top: insets.top + row * (cellHeight + gap),
+        width: cellWidth,
+        height: cellHeight,
+        borderRadius,
+      },
+    };
+  });
+};
+
+export const generateDenseGridLayout = (
+  images: ImageSourceType[],
+  config: LayoutConfig = {},
+): ImageLayoutItem[] => {
+  const { columns = 6, gap = 2, borderRadius = 4, safeAreaInsets } = config;
+  const count = images.length;
+  const rows = Math.ceil(count / columns);
+
+  const insets = safeAreaInsets ?? { top: 0, bottom: 0, left: 0, right: 0 };
+  const availableWidth = SCREEN_WIDTH - insets.left - insets.right;
+  const availableHeight = SCREEN_HEIGHT - insets.top - insets.bottom;
+
+  const totalGapX = gap * (columns - 1);
+  const totalGapY = gap * (rows - 1);
+  const cellWidth = (availableWidth - totalGapX) / columns;
+  const cellHeight = (availableHeight - totalGapY) / rows;
+
+  return images.map((source, index) => {
+    const col = index % columns;
+    const row = Math.floor(index / columns);
+
+    return {
+      source,
+      style: {
+        position: "absolute" as const,
+        left: insets.left + col * (cellWidth + gap),
+        top: insets.top + row * (cellHeight + gap),
+        width: cellWidth,
+        height: cellHeight,
+        borderRadius,
+      },
+    };
+  });
+};

package/src/onboarding/infrastructure/utils/layouts/honeycombLayout.ts

@@ -0,0 +1,36 @@
+/**
+ * Honeycomb Layout Generator
+ * Hexagonal pattern layout
+ */
+
+import { SCREEN_WIDTH } from "./screenDimensions";
+import type { ImageLayoutItem, LayoutConfig, ImageSourceType } from "./layoutTypes";
+
+export const generateHoneycombLayout = (
+  images: ImageSourceType[],
+  config: LayoutConfig = {},
+): ImageLayoutItem[] => {
+  const { borderRadius = 50 } = config;
+  const size = 80;
+  const horizontalSpacing = size * 0.85;
+  const verticalSpacing = size * 0.75;
+  const columns = Math.floor(SCREEN_WIDTH / horizontalSpacing);
+
+  return images.map((source, index) => {
+    const row = Math.floor(index / columns);
+    const col = index % columns;
+    const offsetX = row % 2 === 1 ? horizontalSpacing / 2 : 0;
+
+    return {
+      source,
+      style: {
+        position: "absolute" as const,
+        left: col * horizontalSpacing + offsetX,
+        top: row * verticalSpacing,
+        width: size,
+        height: size,
+        borderRadius,
+      },
+    };
+  });
+};

package/src/onboarding/infrastructure/utils/layouts/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Layout Generators - Barrel Export
+ */
+
+export type { ImageLayoutItem, ImageLayoutStyle, LayoutConfig, ImageSourceType } from "./layoutTypes";
+
+export { generateGridLayout, generateDenseGridLayout } from "./gridLayouts";
+export { generateMasonryLayout } from "./masonryLayout";
+export { generateCollageLayout } from "./collageLayout";
+export { generateScatteredLayout } from "./scatteredLayout";
+export { generateTilesLayout } from "./tilesLayout";
+export { generateHoneycombLayout } from "./honeycombLayout";

package/src/onboarding/infrastructure/utils/layouts/layoutTypes.ts

@@ -0,0 +1,37 @@
+/**
+ * Layout Types
+ * Type definitions for image layout generators
+ */
+
+import type { ImageSource } from "expo-image";
+
+export type ImageSourceType = ImageSource | number | string;
+
+export interface SafeAreaInsets {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+export interface ImageLayoutStyle {
+  position: "absolute";
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+  borderRadius?: number;
+}
+
+export interface ImageLayoutItem {
+  source: ImageSourceType;
+  style: ImageLayoutStyle;
+}
+
+export interface LayoutConfig {
+  columns?: number;
+  gap?: number;
+  borderRadius?: number;
+  randomizeSize?: boolean;
+  safeAreaInsets?: SafeAreaInsets;
+}

package/src/onboarding/infrastructure/utils/layouts/masonryLayout.ts

@@ -0,0 +1,37 @@
+/**
+ * Masonry Layout Generator
+ * Pinterest-style masonry layout
+ */
+
+import { SCREEN_WIDTH } from "./screenDimensions";
+import type { ImageLayoutItem, LayoutConfig, ImageSourceType } from "./layoutTypes";
+
+export const generateMasonryLayout = (
+  images: ImageSourceType[],
+  config: LayoutConfig = {},
+): ImageLayoutItem[] => {
+  const { columns = 3, gap = 2, borderRadius = 4 } = config;
+  const colWidth = (SCREEN_WIDTH - gap * (columns - 1)) / columns;
+  const columnHeights = new Array(columns).fill(0);
+
+  return images.map((source) => {
+    const shortestCol = columnHeights.indexOf(Math.min(...columnHeights));
+    const aspectRatio = 0.7 + Math.random() * 0.6;
+    const height = colWidth * aspectRatio;
+
+    const layout: ImageLayoutItem = {
+      source,
+      style: {
+        position: "absolute" as const,
+        left: shortestCol * (colWidth + gap),
+        top: columnHeights[shortestCol],
+        width: colWidth,
+        height,
+        borderRadius,
+      },
+    };
+
+    columnHeights[shortestCol] += height + gap;
+    return layout;
+  });
+};

package/src/onboarding/infrastructure/utils/layouts/scatteredLayout.ts

@@ -0,0 +1,34 @@
+/**
+ * Scattered Layout Generator
+ * Random small images scattered across screen
+ */
+
+import { SCREEN_WIDTH, SCREEN_HEIGHT } from "./screenDimensions";
+import type { ImageLayoutItem, LayoutConfig, ImageSourceType } from "./layoutTypes";
+
+export const generateScatteredLayout = (
+  images: ImageSourceType[],
+  config: LayoutConfig = {},
+): ImageLayoutItem[] => {
+  const { borderRadius = 6 } = config;
+  const minSize = 60;
+  const maxSize = 100;
+
+  return images.map((source) => {
+    const size = minSize + Math.random() * (maxSize - minSize);
+    const left = Math.random() * (SCREEN_WIDTH - size);
+    const top = Math.random() * (SCREEN_HEIGHT - size);
+
+    return {
+      source,
+      style: {
+        position: "absolute" as const,
+        left,
+        top,
+        width: size,
+        height: size,
+        borderRadius,
+      },
+    };
+  });
+};

package/src/onboarding/infrastructure/utils/layouts/screenDimensions.ts

@@ -0,0 +1,11 @@
+/**
+ * Screen Dimensions
+ * Centralized screen dimension values using design system utilities
+ */
+
+import { getScreenDimensions } from "@umituz/react-native-design-system";
+
+const dimensions = getScreenDimensions();
+
+export const SCREEN_WIDTH = dimensions.width;
+export const SCREEN_HEIGHT = dimensions.height;

package/src/onboarding/infrastructure/utils/layouts/tilesLayout.ts

@@ -0,0 +1,34 @@
+/**
+ * Tiles Layout Generator
+ * Fixed size tiles centered on screen
+ */
+
+import { SCREEN_WIDTH, SCREEN_HEIGHT } from "./screenDimensions";
+import type { ImageLayoutItem, LayoutConfig, ImageSourceType } from "./layoutTypes";
+
+export const generateTilesLayout = (
+  images: ImageSourceType[],
+  config: LayoutConfig = {},
+): ImageLayoutItem[] => {
+  const { columns = 5, gap = 4, borderRadius = 8 } = config;
+  const tileSize = (SCREEN_WIDTH - gap * (columns + 1)) / columns;
+  const rows = Math.ceil(images.length / columns);
+  const startY = (SCREEN_HEIGHT - rows * (tileSize + gap)) / 2;
+
+  return images.map((source, index) => {
+    const col = index % columns;
+    const row = Math.floor(index / columns);
+
+    return {
+      source,
+      style: {
+        position: "absolute" as const,
+        left: gap + col * (tileSize + gap),
+        top: startY + row * (tileSize + gap),
+        width: tileSize,
+        height: tileSize,
+        borderRadius,
+      },
+    };
+  });
+};

package/src/onboarding/presentation/components/BackgroundImageCollage.tsx

@@ -0,0 +1,90 @@
+/**
+ * Background Image Collage Component
+ * Displays multiple images in various layout patterns with safe area support
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { Image } from "expo-image";
+import { useSafeAreaInsets } from "@umituz/react-native-design-system";
+import {
+  generateGridLayout,
+  generateDenseGridLayout,
+  generateMasonryLayout,
+  generateCollageLayout,
+  generateScatteredLayout,
+  generateTilesLayout,
+  generateHoneycombLayout,
+  type ImageLayoutItem,
+  type LayoutConfig,
+  type ImageSourceType,
+} from "../../infrastructure/utils/layouts";
+
+export type CollageLayout =
+  | "grid"
+  | "dense"
+  | "masonry"
+  | "collage"
+  | "scattered"
+  | "tiles"
+  | "honeycomb";
+
+export interface BackgroundImageCollageProps {
+  images: ImageSourceType[];
+  layout?: CollageLayout;
+  columns?: number;
+  gap?: number;
+  borderRadius?: number;
+  opacity?: number;
+}
+
+type LayoutGenerator = (images: ImageSourceType[], config: LayoutConfig) => ImageLayoutItem[];
+
+const LAYOUT_GENERATORS: Record<CollageLayout, LayoutGenerator> = {
+  grid: generateGridLayout,
+  dense: generateDenseGridLayout,
+  masonry: generateMasonryLayout,
+  collage: generateCollageLayout,
+  scattered: generateScatteredLayout,
+  tiles: generateTilesLayout,
+  honeycomb: generateHoneycombLayout,
+};
+
+export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = ({
+  images,
+  layout = "grid",
+  columns,
+  gap,
+  borderRadius,
+  opacity = 1,
+}) => {
+  const insets = useSafeAreaInsets();
+
+  const imageLayouts = useMemo(() => {
+    if (!images || images.length === 0) return [];
+
+    const generator = LAYOUT_GENERATORS[layout] ?? generateGridLayout;
+    return generator(images, {
+      columns,
+      gap,
+      borderRadius,
+      safeAreaInsets: insets
+    });
+  }, [images, layout, columns, gap, borderRadius, insets]);
+
+  if (imageLayouts.length === 0) return null;
+
+  return (
+    <View style={[StyleSheet.absoluteFill, { opacity }]} pointerEvents="none">
+      {imageLayouts.map((item, index) => (
+        <Image
+          key={index}
+          source={item.source}
+          style={item.style}
+          contentFit="cover"
+          transition={300}
+        />
+      ))}
+    </View>
+  );
+};

package/src/onboarding/presentation/components/BackgroundVideo.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useVideoPlayer, VideoView } from 'expo-video';
+
+interface BackgroundVideoProps {
+    source: any;
+    overlayOpacity?: number;
+}
+
+export const BackgroundVideo = ({ source, overlayOpacity = 0.5 }: BackgroundVideoProps) => {
+    const player = useVideoPlayer(source, (p: any) => {
+        p.loop = true;
+        p.play();
+        p.muted = true;
+    });
+
+    return (
+        <View style={StyleSheet.absoluteFill}>
+            <VideoView player={player} style={StyleSheet.absoluteFill} contentFit="cover" nativeControls={false} />
+            <View style={[StyleSheet.absoluteFill, { backgroundColor: `rgba(0,0,0,${overlayOpacity})` }]} />
+        </View>
+    );
+};
+

package/src/onboarding/presentation/components/BaseSlide.tsx

@@ -0,0 +1,47 @@
+/**
+ * BaseSlide Component
+ * Single Responsibility: Provide a base layout for all onboarding slides
+ */
+
+import React, { useMemo } from "react";
+import { View, ScrollView } from "react-native";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
+import type { ContentPosition } from "../../domain/entities/OnboardingSlide";
+
+export interface BaseSlideProps {
+  children: React.ReactNode;
+  contentPosition?: ContentPosition;
+}
+
+export const BaseSlide = ({
+  children,
+  contentPosition = "center",
+}: BaseSlideProps) => {
+  const tokens = useAppDesignTokens();
+  const { verticalPadding, horizontalPadding } = useResponsive();
+  const isBottom = contentPosition === "bottom";
+
+  const contentContainerStyle = useMemo(() => ({
+    flexGrow: 1,
+    paddingVertical: verticalPadding,
+    justifyContent: isBottom ? "flex-end" as const : "center" as const,
+    paddingBottom: isBottom ? verticalPadding : undefined,
+  }), [verticalPadding, isBottom]);
+
+  const slideContainerStyle = useMemo(() => ({
+    width: "100%" as const,
+    paddingHorizontal: horizontalPadding,
+    alignItems: "center" as const,
+  }), [horizontalPadding]);
+
+  return (
+    <ScrollView
+      style={{ flex: 1 }}
+      contentContainerStyle={contentContainerStyle}
+      showsVerticalScrollIndicator={false}
+      bounces={false}
+    >
+      <View style={slideContainerStyle}>{children}</View>
+    </ScrollView>
+  );
+};