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

package/src/onboarding/infrastructure/storage/OnboardingStoreActions.ts

@@ -0,0 +1,50 @@
+/**
+ * Onboarding Store Actions
+ * Single Responsibility: Async store actions interface and factory
+ */
+
+import type { OnboardingUserData } from "../../domain/entities/OnboardingUserData";
+import type { OnboardingStoreState } from "./OnboardingStoreState";
+import {
+  initializeAction,
+  completeAction,
+  skipAction,
+  resetAction,
+  saveAnswerAction,
+  setUserDataAction,
+  DEFAULT_STORAGE_KEY,
+} from "./actions";
+
+export interface OnboardingStoreActions {
+  initialize: (storageKey?: string) => Promise<void>;
+  complete: (storageKey?: string) => Promise<void>;
+  skip: (storageKey?: string) => Promise<void>;
+  reset: (storageKey?: string) => Promise<void>;
+  saveAnswer: (questionId: string, answer: unknown) => Promise<void>;
+  setUserData: (data: OnboardingUserData) => Promise<void>;
+}
+
+export function createOnboardingStoreActions(
+  set: (state: Partial<OnboardingStoreState>) => void,
+  get: () => OnboardingStoreState
+): OnboardingStoreActions {
+  return {
+    initialize: (storageKey = DEFAULT_STORAGE_KEY) =>
+      initializeAction(set, storageKey),
+
+    complete: (storageKey = DEFAULT_STORAGE_KEY) =>
+      completeAction(set, get, storageKey),
+
+    skip: (storageKey = DEFAULT_STORAGE_KEY) =>
+      skipAction(set, get, storageKey),
+
+    reset: (storageKey = DEFAULT_STORAGE_KEY) =>
+      resetAction(set, storageKey),
+
+    saveAnswer: (questionId: string, answer: unknown) =>
+      saveAnswerAction(set, get, questionId, answer),
+
+    setUserData: (data: OnboardingUserData) =>
+      setUserDataAction(set, data),
+  };
+}

package/src/onboarding/infrastructure/storage/OnboardingStoreSelectors.ts

@@ -0,0 +1,25 @@
+/**
+ * Onboarding Store Selectors
+ * Single Responsibility: Store state selectors
+ */
+
+import type { OnboardingStoreState } from "./OnboardingStoreState";
+
+export interface OnboardingStoreSelectors {
+  getAnswer: (questionId: string) => any;
+  getUserData: () => OnboardingStoreState['userData'];
+}
+
+export function createOnboardingStoreSelectors(
+  get: () => OnboardingStoreState
+): OnboardingStoreSelectors {
+  return {
+    getAnswer: (questionId: string) => {
+      return get().userData.answers[questionId];
+    },
+
+    getUserData: () => {
+      return get().userData;
+    },
+  };
+}

package/src/onboarding/infrastructure/storage/OnboardingStoreState.ts

@@ -0,0 +1,22 @@
+/**
+ * Onboarding Store State
+ * Single Responsibility: Store state interface and initial state
+ */
+
+import type { OnboardingUserData } from "../../domain/entities/OnboardingUserData";
+
+export interface OnboardingStoreState {
+  isOnboardingComplete: boolean;
+  currentStep: number;
+  loading: boolean;
+  error: string | null;
+  userData: OnboardingUserData;
+}
+
+export const initialOnboardingState: OnboardingStoreState = {
+  isOnboardingComplete: false,
+  currentStep: 0,
+  loading: true,
+  error: null,
+  userData: { answers: {} },
+};

package/src/onboarding/infrastructure/storage/__tests__/OnboardingStore.test.ts

@@ -0,0 +1,85 @@
+/**
+ * OnboardingStore Tests
+ */
+
+import { renderHook, act } from '@testing-library/react-native';
+import { useOnboardingStore, useOnboarding } from '../OnboardingStore';
+
+// Mock storage repository
+jest.mock('@umituz/react-native-storage', () => ({
+  storageRepository: {
+    getString: jest.fn(),
+    setString: jest.fn(),
+    getObject: jest.fn(),
+    setObject: jest.fn(),
+    removeItem: jest.fn(),
+  },
+  StorageKey: {
+    ONBOARDING_COMPLETED: '@onboarding_completed',
+  },
+  unwrap: jest.fn((result, defaultValue) => result.success ? result.data : defaultValue),
+}));
+
+describe('OnboardingStore', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('useOnboardingStore', () => {
+    it('should have initial state', () => {
+      const { result } = renderHook(() => useOnboardingStore());
+
+      expect(result.current.isOnboardingComplete).toBe(false);
+      expect(result.current.currentStep).toBe(0);
+      expect(result.current.loading).toBe(true);
+      expect(result.current.error).toBe(null);
+      expect(result.current.userData).toEqual({ answers: {} });
+    });
+
+    it('should set current step', () => {
+      const { result } = renderHook(() => useOnboardingStore());
+
+      act(() => {
+        result.current.setCurrentStep(5);
+      });
+
+      expect(result.current.currentStep).toBe(5);
+    });
+
+    it('should set loading state', () => {
+      const { result } = renderHook(() => useOnboardingStore());
+
+      act(() => {
+        result.current.setLoading(false);
+      });
+
+      expect(result.current.loading).toBe(false);
+    });
+
+    it('should set error state', () => {
+      const { result } = renderHook(() => useOnboardingStore());
+      const errorMessage = 'Test error';
+
+      act(() => {
+        result.current.setError(errorMessage);
+      });
+
+      expect(result.current.error).toBe(errorMessage);
+    });
+  });
+
+  describe('useOnboarding', () => {
+    it('should return all store properties and methods', () => {
+      const { result } = renderHook(() => useOnboarding());
+
+      expect(typeof result.current.initialize).toBe('function');
+      expect(typeof result.current.complete).toBe('function');
+      expect(typeof result.current.skip).toBe('function');
+      expect(typeof result.current.reset).toBe('function');
+      expect(typeof result.current.saveAnswer).toBe('function');
+      expect(typeof result.current.getAnswer).toBe('function');
+      expect(typeof result.current.getUserData).toBe('function');
+      expect(typeof result.current.setUserData).toBe('function');
+    });
+  });
+});

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

@@ -0,0 +1,47 @@
+/**
+ * Answer Actions
+ * Single Responsibility: Save and update user answers
+ */
+
+import { storageRepository } from "@umituz/react-native-storage";
+import type { OnboardingUserData } from "../../../domain/entities/OnboardingUserData";
+import type { OnboardingStoreState } from "../OnboardingStoreState";
+import { USER_DATA_STORAGE_KEY, handleError, logSuccess } from "./storageHelpers";
+
+export async function saveAnswerAction(
+  set: (state: Partial<OnboardingStoreState>) => void,
+  get: () => OnboardingStoreState,
+  questionId: string,
+  answer: unknown
+): Promise<void> {
+  try {
+    const userData: OnboardingUserData = {
+      ...get().userData,
+      answers: {
+        ...get().userData.answers,
+        [questionId]: answer,
+      },
+    };
+
+    await storageRepository.setItem(USER_DATA_STORAGE_KEY, userData);
+    set({ userData });
+
+    logSuccess(`Answer saved for question: ${questionId}`);
+  } catch (error) {
+    handleError(error, "save answer");
+  }
+}
+
+export async function setUserDataAction(
+  set: (state: Partial<OnboardingStoreState>) => void,
+  data: OnboardingUserData
+): Promise<void> {
+  try {
+    await storageRepository.setItem(USER_DATA_STORAGE_KEY, data);
+    set({ userData: data });
+
+    logSuccess("User data updated successfully");
+  } catch (error) {
+    handleError(error, "set user data");
+  }
+}

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

@@ -0,0 +1,45 @@
+/**
+ * Complete Action
+ * Single Responsibility: Mark onboarding as completed
+ */
+
+import type { OnboardingUserData } from "../../../domain/entities/OnboardingUserData";
+import type { OnboardingStoreState } from "../OnboardingStoreState";
+import {
+  saveCompletionStatus,
+  saveUserData,
+  handleError,
+  logSuccess,
+} from "./storageHelpers";
+
+export async function completeAction(
+  set: (state: Partial<OnboardingStoreState>) => void,
+  get: () => OnboardingStoreState,
+  storageKey: string
+): Promise<void> {
+  try {
+    set({ loading: true, error: null });
+
+    await saveCompletionStatus(storageKey);
+
+    const userData: OnboardingUserData = {
+      ...get().userData,
+      completedAt: new Date().toISOString(),
+    };
+
+    await saveUserData(userData);
+
+    set({
+      isOnboardingComplete: true,
+      userData,
+      loading: false,
+      error: null,
+    });
+
+    logSuccess("Onboarding completed and persisted successfully");
+  } catch (error) {
+    const errorMessage = handleError(error, "complete onboarding");
+    set({ loading: false, error: errorMessage });
+    throw error;
+  }
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Actions Index
+ * Single Responsibility: Export all action functions
+ */
+
+export {
+  loadCompletionStatus,
+  loadUserData,
+  saveCompletionStatus,
+  saveUserData,
+  removeStorageKeys,
+  handleError,
+  logSuccess,
+  DEFAULT_STORAGE_KEY,
+  USER_DATA_STORAGE_KEY,
+} from "./storageHelpers";
+
+export { initializeAction } from "./initializeAction";
+export { completeAction } from "./completeAction";
+export { skipAction } from "./skipAction";
+export { resetAction } from "./resetAction";
+export { saveAnswerAction, setUserDataAction } from "./answerActions";

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

@@ -0,0 +1,40 @@
+/**
+ * Initialize Action
+ * Single Responsibility: Load initial onboarding state from storage
+ */
+
+import type { OnboardingUserData } from "../../../domain/entities/OnboardingUserData";
+import type { OnboardingStoreState } from "../OnboardingStoreState";
+import {
+  loadCompletionStatus,
+  loadUserData,
+  handleError,
+  logSuccess,
+} from "./storageHelpers";
+
+export async function initializeAction(
+  set: (state: Partial<OnboardingStoreState>) => void,
+  storageKey: string
+): Promise<void> {
+  try {
+    set({ loading: true, error: null });
+
+    const isComplete = await loadCompletionStatus(storageKey);
+    const defaultData: OnboardingUserData = { answers: {} };
+    const userData = await loadUserData(defaultData);
+
+    set({
+      isOnboardingComplete: isComplete,
+      userData,
+      loading: false,
+      error: null,
+    });
+
+    logSuccess(`Initialized with completion status: ${isComplete}`);
+  } catch (error) {
+    set({
+      loading: false,
+      error: handleError(error, "initialize onboarding"),
+    });
+  }
+}

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

@@ -0,0 +1,37 @@
+/**
+ * Reset Action
+ * Single Responsibility: Reset onboarding state
+ */
+
+import type { OnboardingStoreState } from "../OnboardingStoreState";
+import {
+  removeStorageKeys,
+  handleError,
+  logSuccess,
+} from "./storageHelpers";
+
+export async function resetAction(
+  set: (state: Partial<OnboardingStoreState>) => void,
+  storageKey: string
+): Promise<void> {
+  try {
+    set({ loading: true, error: null });
+
+    await removeStorageKeys(storageKey);
+
+    set({
+      isOnboardingComplete: false,
+      currentStep: 0,
+      userData: { answers: {} },
+      loading: false,
+      error: null,
+    });
+
+    logSuccess("Onboarding reset successfully");
+  } catch (error) {
+    set({
+      loading: false,
+      error: handleError(error, "reset onboarding"),
+    });
+  }
+}

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

@@ -0,0 +1,46 @@
+/**
+ * Skip Action
+ * Single Responsibility: Mark onboarding as skipped
+ */
+
+import type { OnboardingUserData } from "../../../domain/entities/OnboardingUserData";
+import type { OnboardingStoreState } from "../OnboardingStoreState";
+import {
+  saveCompletionStatus,
+  saveUserData,
+  handleError,
+  logSuccess,
+} from "./storageHelpers";
+
+export async function skipAction(
+  set: (state: Partial<OnboardingStoreState>) => void,
+  get: () => OnboardingStoreState,
+  storageKey: string
+): Promise<void> {
+  try {
+    set({ loading: true, error: null });
+
+    await saveCompletionStatus(storageKey);
+
+    const userData: OnboardingUserData = {
+      ...get().userData,
+      skipped: true,
+      completedAt: new Date().toISOString(),
+    };
+
+    await saveUserData(userData);
+
+    set({
+      isOnboardingComplete: true,
+      userData,
+      loading: false,
+      error: null,
+    });
+
+    logSuccess("Onboarding skipped and persisted successfully");
+  } catch (error) {
+    const errorMessage = handleError(error, "skip onboarding");
+    set({ loading: false, error: errorMessage });
+    throw error;
+  }
+}

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