@umituz/react-native-onboarding 3.6.12 → 3.6.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.6.12",
+  "version": "3.6.13",
   "description": "Advanced onboarding flow for React Native apps with personalization questions, theme-aware colors, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -77,7 +77,7 @@ export type { OnboardingTheme, OnboardingColors } from "./presentation/types/Onb
 // =============================================================================
 
 export { ensureArray, safeIncludes, safeFilter } from "./infrastructure/utils/arrayUtils";
-export type { ImageLayoutItem, LayoutConfig } from "./infrastructure/utils/imageLayoutUtils";
+export type { ImageLayoutItem, LayoutConfig } from "./infrastructure/utils/layouts";
 
 // Export OnboardingSlide component
 // Note: TypeScript doesn't allow exporting both a type and a value with the same name

package/src/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 } from "./layoutTypes";
+
+export const generateCollageLayout = (
+  images: unknown[],
+  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/infrastructure/utils/layouts/gridLayouts.ts

@@ -0,0 +1,68 @@
+/**
+ * Grid Layout Generators
+ * Standard and dense grid layouts
+ */
+
+import { SCREEN_WIDTH, SCREEN_HEIGHT } from "./screenDimensions";
+import type { ImageLayoutItem, LayoutConfig } from "./layoutTypes";
+
+export const generateGridLayout = (
+  images: unknown[],
+  config: LayoutConfig = {},
+): ImageLayoutItem[] => {
+  const { columns, gap = 0, borderRadius = 0 } = config;
+  const count = images.length;
+  const cols = columns ?? Math.ceil(Math.sqrt(count));
+  const rows = Math.ceil(count / cols);
+  const totalGapX = gap * (cols - 1);
+  const totalGapY = gap * (rows - 1);
+  const cellWidth = (SCREEN_WIDTH - totalGapX) / cols;
+  const cellHeight = (SCREEN_HEIGHT - 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: col * (cellWidth + gap),
+        top: row * (cellHeight + gap),
+        width: cellWidth,
+        height: cellHeight,
+        borderRadius,
+      },
+    };
+  });
+};
+
+export const generateDenseGridLayout = (
+  images: unknown[],
+  config: LayoutConfig = {},
+): ImageLayoutItem[] => {
+  const { columns = 6, gap = 2, borderRadius = 4 } = config;
+  const count = images.length;
+  const rows = Math.ceil(count / columns);
+  const totalGapX = gap * (columns - 1);
+  const totalGapY = gap * (rows - 1);
+  const cellWidth = (SCREEN_WIDTH - totalGapX) / columns;
+  const cellHeight = (SCREEN_HEIGHT - 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: col * (cellWidth + gap),
+        top: row * (cellHeight + gap),
+        width: cellWidth,
+        height: cellHeight,
+        borderRadius,
+      },
+    };
+  });
+};

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

@@ -0,0 +1,36 @@
+/**
+ * Honeycomb Layout Generator
+ * Hexagonal pattern layout
+ */
+
+import { SCREEN_WIDTH } from "./screenDimensions";
+import type { ImageLayoutItem, LayoutConfig } from "./layoutTypes";
+
+export const generateHoneycombLayout = (
+  images: unknown[],
+  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/infrastructure/utils/layouts/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Layout Generators - Barrel Export
+ */
+
+export type { ImageLayoutItem, ImageLayoutStyle, LayoutConfig } 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/infrastructure/utils/layouts/layoutTypes.ts

@@ -0,0 +1,25 @@
+/**
+ * Layout Types
+ * Type definitions for image layout generators
+ */
+
+export interface ImageLayoutStyle {
+  position: "absolute";
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+  borderRadius?: number;
+}
+
+export interface ImageLayoutItem {
+  source: unknown;
+  style: ImageLayoutStyle;
+}
+
+export interface LayoutConfig {
+  columns?: number;
+  gap?: number;
+  borderRadius?: number;
+  randomizeSize?: boolean;
+}

package/src/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 } from "./layoutTypes";
+
+export const generateMasonryLayout = (
+  images: unknown[],
+  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/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 } from "./layoutTypes";
+
+export const generateScatteredLayout = (
+  images: unknown[],
+  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/infrastructure/utils/layouts/screenDimensions.ts

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

package/src/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 } from "./layoutTypes";
+
+export const generateTilesLayout = (
+  images: unknown[],
+  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/presentation/components/BackgroundImageCollage.tsx

@@ -16,8 +16,8 @@ import {
   generateHoneycombLayout,
   type ImageLayoutItem,
   type LayoutConfig,
-} from "../../infrastructure/utils/imageLayoutUtils";
-import { ensureArray } from "../../infrastructure/utils/arrayUtils";
+} from "@/infrastructure/utils/layouts";
+import { ensureArray } from "@/infrastructure/utils/arrayUtils";
 
 export type CollageLayout =
   | "grid"
@@ -37,21 +37,16 @@ export interface BackgroundImageCollageProps {
   opacity?: number;
 }
 
-const getLayoutGenerator = (layout: CollageLayout) => {
-  const generators: Record<
-    CollageLayout,
-    (images: unknown[], config: LayoutConfig) => ImageLayoutItem[]
-  > = {
-    grid: generateGridLayout,
-    dense: generateDenseGridLayout,
-    masonry: generateMasonryLayout,
-    collage: generateCollageLayout,
-    scattered: generateScatteredLayout,
-    tiles: generateTilesLayout,
-    honeycomb: generateHoneycombLayout,
-  };
+type LayoutGenerator = (images: unknown[], config: LayoutConfig) => ImageLayoutItem[];
 
-  return generators[layout] ?? generateGridLayout;
+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> = ({
@@ -67,15 +62,11 @@ export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = ({
   const imageLayouts = useMemo(() => {
     if (safeImages.length === 0) return [];
 
-    const generator = getLayoutGenerator(layout);
-    const config: LayoutConfig = { columns, gap, borderRadius };
-
-    return generator(safeImages, config);
+    const generator = LAYOUT_GENERATORS[layout] ?? generateGridLayout;
+    return generator(safeImages, { columns, gap, borderRadius });
   }, [safeImages, layout, columns, gap, borderRadius]);
 
-  if (imageLayouts.length === 0) {
-    return null;
-  }
+  if (imageLayouts.length === 0) return null;
 
   return (
     <View style={[StyleSheet.absoluteFill, { opacity }]} pointerEvents="none">

package/src/presentation/components/questions/MultipleChoiceQuestion.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
-import { useOnboardingProvider } from "../../providers/OnboardingProvider";
-import { ensureArray } from "../../../infrastructure/utils/arrayUtils";
-import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
+import { useOnboardingProvider } from "@/presentation/providers/OnboardingProvider";
+import { ensureArray } from "@/infrastructure/utils/arrayUtils";
+import type { OnboardingQuestion, QuestionOption } from "@/domain/entities/OnboardingQuestion";
 
 export interface MultipleChoiceQuestionProps {
   question: OnboardingQuestion;

package/src/infrastructure/utils/imageLayoutUtils.ts

@@ -1,280 +0,0 @@
-/**
- * Image Layout Utilities
- * Layout generators for BackgroundImageCollage component
- */
-
-import { Dimensions } from "react-native";
-
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
-
-export interface ImageLayoutStyle {
-  position: "absolute";
-  top: number;
-  left: number;
-  width: number;
-  height: number;
-  borderRadius?: number;
-}
-
-export interface ImageLayoutItem {
-  source: unknown;
-  style: ImageLayoutStyle;
-}
-
-export interface LayoutConfig {
-  columns?: number;
-  gap?: number;
-  borderRadius?: number;
-  randomizeSize?: boolean;
-}
-
-/**
- * Generate a uniform grid layout
- */
-export const generateGridLayout = (
-  images: unknown[],
-  config: LayoutConfig = {},
-): ImageLayoutItem[] => {
-  const { columns, gap = 0, borderRadius = 0 } = config;
-  const count = images.length;
-  const cols = columns ?? Math.ceil(Math.sqrt(count));
-  const rows = Math.ceil(count / cols);
-  const totalGapX = gap * (cols - 1);
-  const totalGapY = gap * (rows - 1);
-  const cellWidth = (SCREEN_WIDTH - totalGapX) / cols;
-  const cellHeight = (SCREEN_HEIGHT - 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: col * (cellWidth + gap),
-        top: row * (cellHeight + gap),
-        width: cellWidth,
-        height: cellHeight,
-        borderRadius,
-      },
-    };
-  });
-};
-
-/**
- * Generate a dense grid layout with many small images
- */
-export const generateDenseGridLayout = (
-  images: unknown[],
-  config: LayoutConfig = {},
-): ImageLayoutItem[] => {
-  const { columns = 6, gap = 2, borderRadius = 4 } = config;
-  const count = images.length;
-  const rows = Math.ceil(count / columns);
-  const totalGapX = gap * (columns - 1);
-  const totalGapY = gap * (rows - 1);
-  const cellWidth = (SCREEN_WIDTH - totalGapX) / columns;
-  const cellHeight = (SCREEN_HEIGHT - 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: col * (cellWidth + gap),
-        top: row * (cellHeight + gap),
-        width: cellWidth,
-        height: cellHeight,
-        borderRadius,
-      },
-    };
-  });
-};
-
-/**
- * Generate a masonry-style layout (Pinterest-like)
- */
-export const generateMasonryLayout = (
-  images: unknown[],
-  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;
-  });
-};
-
-/**
- * Generate a random collage layout with varying sizes
- */
-export const generateCollageLayout = (
-  images: unknown[],
-  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 maxX = SCREEN_WIDTH - size;
-    const maxY = SCREEN_HEIGHT - size;
-
-    let attempts = 0;
-    let overlaps = true;
-    let left = 0;
-    let top = 0;
-
-    while (overlaps && attempts < 50) {
-      left = Math.random() * maxX;
-      top = Math.random() * maxY;
-      overlaps = false;
-
-      for (const existing of layouts) {
-        const overlapThreshold = 20;
-        if (
-          left < existing.style.left + existing.style.width - overlapThreshold &&
-          left + size > existing.style.left + overlapThreshold &&
-          top < existing.style.top + existing.style.height - overlapThreshold &&
-          top + size > existing.style.top + overlapThreshold
-        ) {
-          overlaps = true;
-          break;
-        }
-      }
-
-      attempts++;
-    }
-
-    layouts.push({
-      source,
-      style: {
-        position: "absolute" as const,
-        left,
-        top,
-        width: size,
-        height: size,
-        borderRadius,
-      },
-    });
-  });
-
-  return layouts;
-};
-
-/**
- * Generate a scattered layout with small images
- */
-export const generateScatteredLayout = (
-  images: unknown[],
-  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,
-      },
-    };
-  });
-};
-
-/**
- * Generate a tiles layout with fixed small size
- */
-export const generateTilesLayout = (
-  images: unknown[],
-  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,
-      },
-    };
-  });
-};
-
-/**
- * Generate a honeycomb/hex layout
- */
-export const generateHoneycombLayout = (
-  images: unknown[],
-  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,
-      },
-    };
-  });
-};