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

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>
+  );
+};

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

@@ -0,0 +1,91 @@
+/**
+ * Onboarding Background Component
+ * Handles rendering of video, image or solid backgrounds
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+
+import { Image } from "expo-image";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { BackgroundVideo } from "./BackgroundVideo";
+import { BackgroundImageCollage } from "./BackgroundImageCollage";
+
+interface OnboardingBackgroundProps {
+  currentSlide: OnboardingSlide | undefined;
+  useCustomBackground: boolean;
+  showOverlay: boolean;
+  overlayOpacity: number;
+}
+
+export const OnboardingBackground: React.FC<OnboardingBackgroundProps> = ({
+  currentSlide,
+  useCustomBackground,
+  showOverlay,
+  overlayOpacity,
+}) => {
+  if (!currentSlide) return null;
+
+  const renderContent = () => {
+    if (currentSlide.backgroundVideo) {
+      return (
+        <BackgroundVideo
+          source={currentSlide.backgroundVideo}
+          overlayOpacity={overlayOpacity}
+        />
+      );
+    }
+
+    if (currentSlide.backgroundImages && currentSlide.backgroundImages.length > 0) {
+      return (
+        <BackgroundImageCollage
+          images={currentSlide.backgroundImages}
+          layout={currentSlide.backgroundImagesLayout || "grid"}
+          columns={currentSlide.backgroundImagesColumns}
+          gap={currentSlide.backgroundImagesGap}
+          borderRadius={currentSlide.backgroundImagesBorderRadius}
+        />
+      );
+    }
+
+    if (currentSlide.backgroundImage) {
+      return (
+        <Image
+          source={currentSlide.backgroundImage}
+          style={StyleSheet.absoluteFill}
+          contentFit="cover"
+          transition={500}
+        />
+      );
+    }
+
+    if (useCustomBackground && currentSlide.backgroundColor) {
+      return (
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            { backgroundColor: currentSlide.backgroundColor }
+          ]}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="none">
+      {renderContent()}
+      <View
+        style={[
+          StyleSheet.absoluteFill,
+          {
+            backgroundColor: showOverlay
+              ? `rgba(0,0,0,${overlayOpacity})`
+              : "transparent",
+          },
+        ]}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,151 @@
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useLocalization } from "@umituz/react-native-localization";
+import { AtomicText } from "@umituz/react-native-design-system";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
+
+export interface OnboardingFooterProps {
+  currentIndex: number;
+  totalSlides: number;
+  isLastSlide: boolean;
+  onNext: () => void;
+  showProgressBar?: boolean;
+  showDots?: boolean;
+  showProgressText?: boolean;
+  nextButtonText?: string;
+  getStartedButtonText?: string;
+  disabled?: boolean;
+}
+
+export const OnboardingFooter = ({
+  currentIndex,
+  totalSlides,
+  isLastSlide,
+  onNext,
+  showProgressBar = true,
+  showDots = true,
+  showProgressText = true,
+  nextButtonText,
+  getStartedButtonText,
+  disabled = false,
+}: OnboardingFooterProps) => {
+  const insets = useSafeAreaInsets();
+  const { t } = useLocalization();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
+
+  const buttonText = isLastSlide
+    ? getStartedButtonText || t("onboarding.getStarted")
+    : nextButtonText || t("general.continue");
+
+  const progressPercent = ((currentIndex + 1) / totalSlides) * 100;
+
+  return (
+    <View style={[styles.footer, { paddingBottom: insets.bottom + 24 }]}>
+      {showProgressBar && (
+        <View style={styles.progressContainer}>
+          <View style={[styles.progressBar, { backgroundColor: colors.progressBarBg }]}>
+            <View style={[styles.progressFill, { width: `${progressPercent}%`, backgroundColor: colors.progressFillColor }]} />
+          </View>
+        </View>
+      )}
+
+      {showDots && (
+        <View style={styles.dots}>
+          {Array.from({ length: totalSlides }).map((_, index) => (
+            <View
+              key={index}
+              style={[
+                styles.dot,
+                { backgroundColor: colors.dotColor },
+                index === currentIndex && {
+                  width: 12,
+                  backgroundColor: colors.activeDotColor
+                }
+              ]}
+            />
+          ))}
+        </View>
+      )}
+
+      <TouchableOpacity
+        onPress={onNext}
+        disabled={disabled}
+        activeOpacity={0.7}
+        style={[
+          styles.button,
+          {
+            backgroundColor: colors.buttonBg,
+            opacity: disabled ? 0.5 : 1,
+          },
+        ]}
+      >
+        <AtomicText
+          type="labelLarge"
+          style={[styles.buttonText, { color: colors.buttonTextColor }]}
+        >
+          {buttonText}
+        </AtomicText>
+      </TouchableOpacity>
+
+      {showProgressText && (
+        <AtomicText
+          type="labelSmall"
+          style={[styles.progressText, { color: colors.progressTextColor }]}
+        >
+          {currentIndex + 1} {t("general.of")} {totalSlides}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  footer: {
+    paddingHorizontal: 24,
+    paddingTop: 24,
+  },
+  progressContainer: {
+    marginBottom: 20,
+  },
+  progressBar: {
+    height: 4,
+    borderRadius: 2,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 2,
+  },
+  dots: {
+    flexDirection: "row",
+    justifyContent: "center",
+    marginBottom: 24,
+    gap: 8,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  progressText: {
+    marginTop: 12,
+    textAlign: "center",
+  },
+  button: {
+    width: "100%",
+    minHeight: 52,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+  },
+  buttonText: {
+    fontWeight: "700",
+  },
+});
+
+