@umituz/react-native-splash 1.7.1 → 1.9.0

package/lib/presentation/components/SplashLogo.tsx

@@ -1,80 +0,0 @@
-/**
- * Splash Logo Component
- * Single Responsibility: Render splash screen logo
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
-
-export interface SplashLogoProps {
-  logo?: string | React.ReactNode;
-  logoSize?: number;
-  glowSize?: number;
-  iconColor?: string;
-}
-
-export const SplashLogo: React.FC<SplashLogoProps> = ({
-  logo,
-  logoSize = 140,
-  glowSize = 160,
-  iconColor = "#FFFFFF",
-}) => {
-  const styles = getStyles(logoSize, glowSize);
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.glow} />
-      <View style={styles.background}>
-        {typeof logo === "string" ? (
-          <AtomicIcon name={logo || "sparkles"} size="xxl" customColor={iconColor} />
-        ) : logo ? (
-          logo
-        ) : (
-          <AtomicIcon name="sparkles" size="xxl" customColor={iconColor} />
-        )}
-      </View>
-    </View>
-  );
-};
-
-const getStyles = (logoSize: number, glowSize: number) => {
-  const radius = logoSize / 2;
-  const glowRadius = glowSize / 2;
-
-  return StyleSheet.create({
-    container: {
-      alignItems: "center",
-      justifyContent: "center",
-      position: "relative",
-    },
-    glow: {
-      position: "absolute",
-      width: glowSize,
-      height: glowSize,
-      borderRadius: glowRadius,
-      backgroundColor: "rgba(255, 255, 255, 0.15)",
-      shadowColor: "#FFFFFF",
-      shadowOffset: { width: 0, height: 0 },
-      shadowOpacity: 0.5,
-      shadowRadius: 30,
-      elevation: 10,
-    },
-    background: {
-      width: logoSize,
-      height: logoSize,
-      borderRadius: radius,
-      backgroundColor: "rgba(255, 255, 255, 0.2)",
-      alignItems: "center",
-      justifyContent: "center",
-      borderWidth: 2,
-      borderColor: "rgba(255, 255, 255, 0.3)",
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.3,
-      shadowRadius: 8,
-      elevation: 8,
-    },
-  });
-};
-

package/lib/presentation/components/SplashScreen.tsx

@@ -1,175 +0,0 @@
-/**
- * Splash Screen Component
- * Single Responsibility: Orchestrate splash screen UI
- */
-
-import React, { useEffect, useRef } from "react";
-import { View, StyleSheet } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useLocalization } from "@umituz/react-native-localization";
-import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
-import { SplashLogo } from "./SplashLogo";
-import { SplashTypography } from "./SplashTypography";
-import { SplashLoading } from "./SplashLoading";
-import { SplashDecorations } from "./SplashDecorations";
-import { SplashErrorBoundary } from "./SplashErrorBoundary";
-import type { SplashOptions } from "../../domain/entities/SplashOptions";
-
-export interface SplashScreenProps extends SplashOptions {
-  visible?: boolean;
-  textColor?: string;
-  iconColor?: string;
-  decorationColor?: string;
-}
-
-/**
- * Splash Screen Component
- */
-export const SplashScreen: React.FC<SplashScreenProps> = ({
-  appName,
-  tagline,
-  logo,
-  backgroundColor,
-  gradientColors,
-  loadingText,
-  showLoading = true,
-  minimumDisplayTime = 1500,
-  onReady,
-  renderLogo,
-  renderContent,
-  renderFooter,
-  visible = true,
-  textColor,
-  iconColor,
-  decorationColor,
-}) => {
-  const insets = useSafeAreaInsets();
-  const { t } = useLocalization();
-  const tokens = useAppDesignTokens();
-
-  const styles = getStyles(insets, tokens.spacing);
-
-  const timerRef = useRef<NodeJS.Timeout>();
-
-  useEffect(() => {
-    if (!visible) return;
-
-    timerRef.current = setTimeout(() => {
-      if (onReady) {
-        onReady();
-      }
-    }, minimumDisplayTime);
-
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-      }
-    };
-  }, [visible, minimumDisplayTime, onReady]);
-
-  if (!visible) return null;
-
-  const displayAppName = appName || t("branding.appName", "");
-  const displayTagline = tagline || t("branding.tagline", "");
-  const displayLoadingText = loadingText || t("general.loading", "");
-
-  // Use gradientColors if provided, otherwise use backgroundColor as solid color
-  const finalBackgroundColor = gradientColors
-    ? undefined
-    : backgroundColor || tokens.colors.primary;
-
-  // Use LinearGradient only if gradientColors provided (length > 1)
-  const hasGradient = gradientColors && gradientColors.length > 1;
-
-  // For LinearGradient, ensure at least 2 colors (tuple type requirement)
-  const finalGradientColors: [string, string, ...string[]] = hasGradient
-    ? (gradientColors.length >= 2
-        ? (gradientColors as [string, string, ...string[]])
-        : [gradientColors[0], gradientColors[0] || finalBackgroundColor!])
-    : [finalBackgroundColor!, finalBackgroundColor!];
-
-  const content = (
-    <>
-      <SplashDecorations decorationColor={decorationColor} />
-
-      <View style={styles.content}>
-        {renderLogo ? (
-          renderLogo()
-        ) : (
-          <SplashLogo logo={logo} iconColor={iconColor} />
-        )}
-
-        {renderContent ? (
-          renderContent()
-        ) : (
-          <SplashTypography
-            appName={displayAppName}
-            tagline={displayTagline}
-            tokens={tokens}
-            textColor={textColor}
-          />
-        )}
-      </View>
-
-      {showLoading && (
-        <SplashLoading
-          loadingText={displayLoadingText}
-          tokens={tokens}
-          bottomInset={insets.bottom}
-          textColor={textColor}
-        />
-      )}
-
-      {renderFooter && renderFooter()}
-    </>
-  );
-
-  return (
-    <SplashErrorBoundary>
-      <View style={styles.container}>
-        {hasGradient ? (
-          <LinearGradient
-            colors={finalGradientColors}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 1 }}
-            style={styles.gradient}
-          >
-            {content}
-          </LinearGradient>
-        ) : (
-          <View
-            style={[styles.gradient, { backgroundColor: finalBackgroundColor }]}
-          >
-            {content}
-          </View>
-        )}
-      </View>
-    </SplashErrorBoundary>
-  );
-};
-
-const getStyles = (
-  insets: { top: number; bottom: number },
-  spacing: any,
-) => {
-  return StyleSheet.create({
-    container: {
-      flex: 1,
-    },
-    gradient: {
-      flex: 1,
-      paddingTop: insets.top,
-      paddingBottom: insets.bottom,
-      position: "relative",
-      overflow: "hidden",
-    },
-    content: {
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      paddingHorizontal: spacing.xl,
-      zIndex: 1,
-    },
-  });
-};

package/lib/presentation/components/SplashTypography.tsx

@@ -1,72 +0,0 @@
-/**
- * Splash Typography Component
- * Single Responsibility: Render splash screen typography
- */
-
-import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import type { DesignTokens } from "@umituz/react-native-design-system-theme";
-
-export interface SplashTypographyProps {
-  appName: string;
-  tagline?: string;
-  tokens: DesignTokens;
-  textColor?: string;
-}
-
-export const SplashTypography: React.FC<SplashTypographyProps> = ({
-  appName,
-  tagline,
-  tokens,
-  textColor = "#FFFFFF",
-}) => {
-  const styles = getStyles(tokens, textColor);
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.appName} numberOfLines={1}>
-        {appName}
-      </Text>
-      {tagline && (
-        <Text style={styles.tagline} numberOfLines={2}>
-          {tagline}
-        </Text>
-      )}
-    </View>
-  );
-};
-
-const getStyles = (tokens: DesignTokens, textColor: string) => {
-  return StyleSheet.create({
-    container: {
-      alignItems: "center",
-      marginTop: tokens.spacing.xl,
-    },
-    appName: {
-      fontSize: 48,
-      fontWeight: "800" as const,
-      color: textColor,
-      textAlign: "center" as const,
-      marginBottom: tokens.spacing.md,
-      letterSpacing: -1.2,
-      lineHeight: 56,
-      textShadowColor: "rgba(0, 0, 0, 0.25)",
-      textShadowOffset: { width: 0, height: 2 },
-      textShadowRadius: 6,
-    },
-    tagline: {
-      fontSize: 17,
-      color: textColor,
-      textAlign: "center" as const,
-      opacity: 0.95,
-      maxWidth: 320,
-      lineHeight: 24,
-      fontWeight: "500" as const,
-      letterSpacing: 0.2,
-      textShadowColor: "rgba(0, 0, 0, 0.2)",
-      textShadowOffset: { width: 0, height: 1 },
-      textShadowRadius: 3,
-    },
-  });
-};
-

package/lib/presentation/hooks/useSplash.ts

@@ -1,70 +0,0 @@
-/**
- * Use Splash Hook
- * Single Responsibility: Manage splash screen state and timing
- */
-
-import { useEffect, useState, useRef } from "react";
-
-interface UseSplashOptions {
-  minimumDisplayTime?: number;
-  onReady?: () => void | Promise<void>;
-  autoHide?: boolean;
-}
-
-export const useSplash = ({
-  minimumDisplayTime = 1500,
-  onReady,
-  autoHide = true,
-}: UseSplashOptions = {}) => {
-  const [isVisible, setIsVisible] = useState(true);
-  const [isReady, setIsReady] = useState(false);
-  const timerRef = useRef<NodeJS.Timeout>();
-  const isReadyRef = useRef(false);
-
-  const hide = () => {
-    setIsVisible(false);
-  };
-
-  const show = () => {
-    setIsVisible(true);
-  };
-
-  const markReady = async () => {
-    if (isReadyRef.current) return;
-
-    isReadyRef.current = true;
-    setIsReady(true);
-
-    if (onReady) {
-      try {
-        await onReady();
-      } catch (error) {
-        if (__DEV__) {
-          console.error("Splash onReady error:", error);
-        }
-      }
-    }
-
-    if (autoHide) {
-      timerRef.current = setTimeout(() => {
-        hide();
-      }, minimumDisplayTime);
-    }
-  };
-
-  useEffect(() => {
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-      }
-    };
-  }, []);
-
-  return {
-    isVisible,
-    isReady,
-    hide,
-    show,
-    markReady,
-  };
-};

package/lib/presentation/utils/splashGradient.utils.ts

@@ -1,47 +0,0 @@
-/**
- * Splash Gradient Utilities
- * Single Responsibility: Gradient color generation
- */
-
-/**
- * Adjust color brightness
- */
-export const adjustColorBrightness = (hex: string, percent: number): string => {
-  const num = parseInt(hex.replace("#", ""), 16);
-  const amt = Math.round(2.55 * percent);
-  const R = (num >> 16) + amt;
-  const G = ((num >> 8) & 0x00ff) + amt;
-  const B = (num & 0x0000ff) + amt;
-  return (
-    "#" +
-    (
-      0x1000000 +
-      (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
-      (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
-      (B < 255 ? (B < 1 ? 0 : B) : 255)
-    )
-      .toString(16)
-      .slice(1)
-  );
-};
-
-/**
- * Generate gradient colors from backgroundColor
- */
-export const generateGradientFromColor = (
-  backgroundColor: string,
-  isDark: boolean,
-): readonly string[] => {
-  return isDark
-    ? ([
-        backgroundColor,
-        adjustColorBrightness(backgroundColor, -20),
-        adjustColorBrightness(backgroundColor, -30),
-      ] as const)
-    : ([
-        backgroundColor,
-        adjustColorBrightness(backgroundColor, 10),
-        adjustColorBrightness(backgroundColor, 20),
-      ] as const);
-};
-

package/lib/types/expo-linear-gradient.d.ts

@@ -1,12 +0,0 @@
-declare module 'expo-linear-gradient' {
-  import { View, ViewProps } from 'react-native';
-  
-  export interface LinearGradientProps extends ViewProps {
-    colors: readonly string[];
-    start?: { x: number; y: number };
-    end?: { x: number; y: number };
-    locations?: readonly number[];
-  }
-  
-  export const LinearGradient: React.FC<LinearGradientProps>;
-}

package/src/__tests__/SplashScreen.test.tsx

@@ -1,161 +0,0 @@
-/**
- * Splash Screen Tests
- */
-
-import React from "react";
-import { render, fireEvent } from "@testing-library/react-native";
-import { SplashScreen } from "../presentation/components/SplashScreen";
-
-// Mock dependencies
-jest.mock("react-native-safe-area-context", () => ({
-  useSafeAreaInsets: () => ({ top: 44, bottom: 34 }),
-}));
-
-jest.mock("@umituz/react-native-localization", () => ({
-  useLocalization: () => ({
-    t: (key: string, fallback: string) => fallback,
-  }),
-}));
-
-jest.mock("@umituz/react-native-design-system-theme", () => ({
-  useAppDesignTokens: () => ({
-    colors: { primary: "#007AFF" },
-    spacing: { xl: 24, md: 16, xxxl: 48 },
-  }),
-}));
-
-jest.mock("@umituz/react-native-design-system-atoms", () => ({
-  AtomicIcon: ({ name, size, customColor }: any) => (
-    <div testID={`icon-${name}`} data-size={size} data-color={customColor} />
-  ),
-}));
-
-jest.mock("expo-linear-gradient", () => ({
-  LinearGradient: ({ children, testID }: any) => (
-    <div testID={testID || "linear-gradient"}>{children}</div>
-  ),
-}));
-
-describe("SplashScreen", () => {
-  const defaultProps = {
-    appName: "Test App",
-    tagline: "Test Tagline",
-    visible: true,
-  };
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
-  it("renders correctly with basic props", () => {
-    const { getByText } = render(<SplashScreen {...defaultProps} />);
-    
-    expect(getByText("Test App")).toBeTruthy();
-    expect(getByText("Test Tagline")).toBeTruthy();
-  });
-
-  it("renders without tagline when not provided", () => {
-    const props = { ...defaultProps, tagline: undefined };
-    const { getByText, queryByText } = render(<SplashScreen {...props} />);
-    
-    expect(getByText("Test App")).toBeTruthy();
-    expect(queryByText("Test Tagline")).toBeFalsy();
-  });
-
-  it("calls onReady after minimum display time", () => {
-    const onReady = jest.fn();
-    const props = { ...defaultProps, onReady };
-    
-    render(<SplashScreen {...props} />);
-    
-    expect(onReady).not.toHaveBeenCalled();
-    
-    jest.advanceTimersByTime(1500);
-    
-    expect(onReady).toHaveBeenCalledTimes(1);
-  });
-
-  it("does not render when visible is false", () => {
-    const props = { ...defaultProps, visible: false };
-    const { queryByText } = render(<SplashScreen {...props} />);
-    
-    expect(queryByText("Test App")).toBeFalsy();
-  });
-
-  it("uses custom colors when provided", () => {
-    const props = {
-      ...defaultProps,
-      textColor: "#FF0000",
-      iconColor: "#00FF00",
-      decorationColor: "rgba(255, 0, 0, 0.1)",
-    };
-    
-    render(<SplashScreen {...props} />);
-    
-    // Color props are passed down to child components
-    // This test ensures the props are accepted without error
-    expect(true).toBeTruthy();
-  });
-
-  it("uses gradient colors when provided", () => {
-    const props = {
-      ...defaultProps,
-      gradientColors: ["#FF0000", "#00FF00", "#0000FF"],
-    };
-    
-    const { getByTestId } = render(<SplashScreen {...props} />);
-    
-    expect(getByTestId("linear-gradient")).toBeTruthy();
-  });
-
-  it("renders custom logo when provided", () => {
-    const CustomLogo = () => <div testID="custom-logo" />;
-    const props = { ...defaultProps, renderLogo: () => <CustomLogo /> };
-    
-    const { getByTestId } = render(<SplashScreen {...props} />);
-    
-    expect(getByTestId("custom-logo")).toBeTruthy();
-  });
-
-  it("renders custom content when provided", () => {
-    const CustomContent = () => <div testID="custom-content" />;
-    const props = { ...defaultProps, renderContent: () => <CustomContent /> };
-    
-    const { getByTestId } = render(<SplashScreen {...props} />);
-    
-    expect(getByTestId("custom-content")).toBeTruthy();
-  });
-
-  it("renders custom footer when provided", () => {
-    const CustomFooter = () => <div testID="custom-footer" />;
-    const props = { ...defaultProps, renderFooter: () => <CustomFooter /> };
-    
-    const { getByTestId } = render(<SplashScreen {...props} />);
-    
-    expect(getByTestId("custom-footer")).toBeTruthy();
-  });
-
-  it("hides loading indicator when showLoading is false", () => {
-    const props = { ...defaultProps, showLoading: false };
-    const { queryByText } = render(<SplashScreen {...props} />);
-    
-    expect(queryByText("Loading...")).toBeFalsy();
-  });
-
-  it("uses custom minimum display time", () => {
-    const onReady = jest.fn();
-    const props = { ...defaultProps, onReady, minimumDisplayTime: 3000 };
-    
-    render(<SplashScreen {...props} />);
-    
-    jest.advanceTimersByTime(1500);
-    expect(onReady).not.toHaveBeenCalled();
-    
-    jest.advanceTimersByTime(1500);
-    expect(onReady).toHaveBeenCalledTimes(1);
-  });
-});