@umituz/react-native-design-system 2.3.39 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.3.39",
+  "version": "2.4.0",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/molecules/PhotoUploadCard/PhotoUploadCard.tsx

@@ -0,0 +1,241 @@
+/**
+ * PhotoUploadCard Component
+ * Beautiful photo upload card with validation status and responsive design
+ *
+ * @package @umituz/react-native-design-system
+ */
+
+import React, { useMemo } from "react";
+import {
+  View,
+  Image,
+  StyleSheet,
+  Pressable,
+  TouchableOpacity,
+  ActivityIndicator,
+  type ViewStyle,
+  type StyleProp,
+} from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { AtomicText } from "../../atoms/AtomicText";
+import { AtomicIcon } from "../../atoms/AtomicIcon";
+import { useAppDesignTokens } from "../../theme/hooks/useAppDesignTokens";
+
+export interface PhotoUploadCardConfig {
+  aspectRatio?: number;
+  borderRadius?: number;
+  iconSize?: number;
+  showValidationStatus?: boolean;
+  allowChange?: boolean;
+  borderStyle?: "solid" | "dashed";
+}
+
+export interface PhotoUploadCardProps {
+  imageUri: string | null;
+  onPress: () => void;
+  isValidating?: boolean;
+  isValid?: boolean | null;
+  disabled?: boolean;
+  config?: PhotoUploadCardConfig;
+  translations: {
+    tapToUpload: string;
+    selectPhoto: string;
+    change: string;
+    analyzing?: string;
+  };
+  style?: StyleProp<ViewStyle>;
+}
+
+const DEFAULT_CONFIG: PhotoUploadCardConfig = {
+  aspectRatio: 1,
+  borderRadius: 28,
+  iconSize: 40,
+  showValidationStatus: true,
+  allowChange: true,
+  borderStyle: "dashed",
+};
+
+export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
+  imageUri,
+  onPress,
+  isValidating = false,
+  isValid = null,
+  disabled = false,
+  config = DEFAULT_CONFIG,
+  translations,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+  const cfg = { ...DEFAULT_CONFIG, ...config };
+
+  const borderColor = useMemo(() => {
+    if (!cfg.showValidationStatus) {
+      return `${tokens.colors.primary}40`;
+    }
+    if (isValidating) return tokens.colors.primary;
+    if (isValid === true) return tokens.colors.success;
+    if (isValid === false) return tokens.colors.error;
+    return `${tokens.colors.primary}40`;
+  }, [isValidating, isValid, tokens, cfg.showValidationStatus]);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          marginHorizontal: 24,
+          marginBottom: 24,
+        },
+        card: {
+          aspectRatio: cfg.aspectRatio,
+          backgroundColor: tokens.colors.surfaceSecondary,
+          borderRadius: cfg.borderRadius,
+          justifyContent: "center",
+          alignItems: "center",
+          overflow: "hidden",
+          borderWidth: 2,
+          borderStyle: imageUri ? "solid" : cfg.borderStyle,
+        },
+        placeholder: {
+          alignItems: "center",
+          padding: 32,
+        },
+        iconCircle: {
+          width: 88,
+          height: 88,
+          borderRadius: 44,
+          justifyContent: "center",
+          alignItems: "center",
+          marginBottom: 20,
+          borderWidth: 2,
+          borderColor: `${tokens.colors.primary}30`,
+        },
+        iconGradient: {
+          width: 88,
+          height: 88,
+          borderRadius: 44,
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        title: {
+          fontSize: 20,
+          fontWeight: "700",
+          color: tokens.colors.textPrimary,
+          marginBottom: 8,
+          letterSpacing: 0.3,
+        },
+        subtitle: {
+          fontSize: 14,
+          color: tokens.colors.textSecondary,
+          textAlign: "center",
+          lineHeight: 20,
+          maxWidth: 240,
+        },
+        image: {
+          width: "100%",
+          height: "100%",
+          resizeMode: "cover",
+        },
+        imageOverlay: {
+          ...StyleSheet.absoluteFillObject,
+          backgroundColor: "rgba(0,0,0,0.15)",
+        },
+        changeButton: {
+          position: "absolute",
+          bottom: 20,
+          right: 20,
+          backgroundColor: tokens.colors.surface,
+          paddingHorizontal: 18,
+          paddingVertical: 12,
+          borderRadius: 28,
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 8,
+        },
+        changeText: {
+          fontSize: 14,
+          fontWeight: "700",
+          color: tokens.colors.primary,
+        },
+        validatingContainer: {
+          alignItems: "center",
+          padding: 32,
+        },
+        validatingText: {
+          fontSize: 16,
+          fontWeight: "600",
+          color: tokens.colors.primary,
+          marginTop: 20,
+        },
+        pulseRing: {
+          position: "absolute",
+          width: 100,
+          height: 100,
+          borderRadius: 50,
+          borderWidth: 2,
+          borderColor: `${tokens.colors.primary}30`,
+        },
+      }),
+    [tokens, imageUri, cfg],
+  );
+
+  return (
+    <View style={[styles.container, style]}>
+      <Pressable
+        style={[styles.card, { borderColor }]}
+        onPress={onPress}
+        disabled={disabled || isValidating}
+      >
+        {isValidating ? (
+          <View style={styles.validatingContainer}>
+            <View style={styles.pulseRing} />
+            <ActivityIndicator size="large" color={tokens.colors.primary} />
+            <AtomicText style={styles.validatingText}>
+              {translations.analyzing || "Analyzing..."}
+            </AtomicText>
+          </View>
+        ) : imageUri ? (
+          <>
+            <Image source={{ uri: imageUri }} style={styles.image} />
+            <View style={styles.imageOverlay} />
+            {cfg.allowChange && (
+              <TouchableOpacity style={styles.changeButton} onPress={onPress}>
+                <AtomicIcon
+                  name="camera"
+                  size={18}
+                  customColor={tokens.colors.primary}
+                />
+                <AtomicText style={styles.changeText}>
+                  {translations.change}
+                </AtomicText>
+              </TouchableOpacity>
+            )}
+          </>
+        ) : (
+          <View style={styles.placeholder}>
+            <View style={styles.iconCircle}>
+              <LinearGradient
+                colors={[
+                  `${tokens.colors.primary}20`,
+                  `${tokens.colors.primary}10`,
+                ]}
+                style={styles.iconGradient}
+              >
+                <AtomicIcon
+                  name="camera"
+                  size={cfg.iconSize}
+                  customColor={tokens.colors.primary}
+                />
+              </LinearGradient>
+            </View>
+            <AtomicText style={styles.title}>
+              {translations.tapToUpload}
+            </AtomicText>
+            <AtomicText style={styles.subtitle}>
+              {translations.selectPhoto}
+            </AtomicText>
+          </View>
+        )}
+      </Pressable>
+    </View>
+  );
+};

package/src/molecules/PhotoUploadCard/index.ts

@@ -0,0 +1,5 @@
+export { PhotoUploadCard } from "./PhotoUploadCard";
+export type {
+  PhotoUploadCardProps,
+  PhotoUploadCardConfig,
+} from "./PhotoUploadCard";

package/src/molecules/StepHeader/StepHeader.tsx

@@ -0,0 +1,122 @@
+/**
+ * StepHeader Component
+ * Header component for step-by-step flows with title and subtitle
+ *
+ * @package @umituz/react-native-design-system
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, type ViewStyle, type StyleProp } from "react-native";
+import { AtomicText } from "../../atoms/AtomicText";
+import { useAppDesignTokens } from "../../theme/hooks/useAppDesignTokens";
+
+export interface StepHeaderConfig {
+  showStepIndicator?: boolean;
+  currentStep?: number;
+  totalSteps?: number;
+  titleAlignment?: "left" | "center" | "right";
+  titleFontSize?: number;
+  subtitleFontSize?: number;
+  spacing?: {
+    marginBottom?: number;
+    paddingHorizontal?: number;
+  };
+}
+
+export interface StepHeaderProps {
+  title: string;
+  subtitle?: string;
+  config?: StepHeaderConfig;
+  style?: StyleProp<ViewStyle>;
+}
+
+const DEFAULT_CONFIG: StepHeaderConfig = {
+  showStepIndicator: false,
+  titleAlignment: "left",
+  titleFontSize: 28,
+  subtitleFontSize: 16,
+  spacing: {
+    marginBottom: 32,
+    paddingHorizontal: 24,
+  },
+};
+
+export const StepHeader: React.FC<StepHeaderProps> = ({
+  title,
+  subtitle,
+  config = DEFAULT_CONFIG,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+  const cfg = { ...DEFAULT_CONFIG, ...config };
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingHorizontal: cfg.spacing?.paddingHorizontal ?? 24,
+          marginBottom: cfg.spacing?.marginBottom ?? 32,
+        },
+        stepIndicator: {
+          flexDirection: "row",
+          alignItems: "center",
+          marginBottom: 12,
+        },
+        stepDot: {
+          width: 8,
+          height: 8,
+          borderRadius: 4,
+          marginHorizontal: 4,
+        },
+        activeDot: {
+          backgroundColor: tokens.colors.primary,
+        },
+        inactiveDot: {
+          backgroundColor: `${tokens.colors.primary}30`,
+        },
+        title: {
+          fontSize: cfg.titleFontSize,
+          fontWeight: "900",
+          color: tokens.colors.textPrimary,
+          textAlign: cfg.titleAlignment,
+          marginBottom: subtitle ? 12 : 0,
+          letterSpacing: 0.3,
+        },
+        subtitle: {
+          fontSize: cfg.subtitleFontSize,
+          fontWeight: "500",
+          color: tokens.colors.textSecondary,
+          textAlign: cfg.titleAlignment,
+          lineHeight: (cfg.subtitleFontSize ?? 16) * 1.5,
+          opacity: 0.9,
+        },
+      }),
+    [tokens, cfg, subtitle],
+  );
+
+  return (
+    <View style={[styles.container, style]}>
+      {cfg.showStepIndicator &&
+        cfg.currentStep !== undefined &&
+        cfg.totalSteps !== undefined && (
+          <View style={styles.stepIndicator}>
+            {Array.from({ length: cfg.totalSteps }, (_, i) => (
+              <View
+                key={i}
+                style={[
+                  styles.stepDot,
+                  i + 1 <= cfg.currentStep!
+                    ? styles.activeDot
+                    : styles.inactiveDot,
+                ]}
+              />
+            ))}
+          </View>
+        )}
+
+      <AtomicText style={styles.title}>{title}</AtomicText>
+
+      {subtitle && <AtomicText style={styles.subtitle}>{subtitle}</AtomicText>}
+    </View>
+  );
+};

package/src/molecules/StepHeader/index.ts

@@ -0,0 +1,2 @@
+export { StepHeader } from "./StepHeader";
+export type { StepHeaderProps, StepHeaderConfig } from "./StepHeader";

package/src/molecules/index.ts

@@ -48,6 +48,12 @@ export * from './animation';
 // Long Press Menu
 export * from './long-press-menu';
 
+// Photo Upload
+export * from './PhotoUploadCard';
+
+// Step Header
+export * from './StepHeader';
+
 // Emoji
 export * from './emoji';