@umituz/react-native-design-system 2.4.11 → 2.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.4.11",
+  "version": "2.4.12",
   "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/index.ts

@@ -414,14 +414,6 @@ export {
   type CountdownTarget,
   type CountdownFormatOptions,
   type CountdownDisplayConfig,
-  // Photo Upload
-  PhotoUploadCard,
-  type PhotoUploadCardProps,
-  type PhotoUploadCardConfig,
-  // Image Picker
-  ImagePickerBox,
-  type ImagePickerBoxProps,
-  type ImagePickerBoxConfig,
   // Step Header
   StepHeader,
   type StepHeaderProps,

package/src/molecules/index.ts

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

package/src/molecules/ImagePickerBox/ImagePickerBox.tsx

@@ -1,171 +0,0 @@
-/**
- * ImagePickerBox Component
- * Generic image picker box with gradient design
- * Props-driven for 100+ apps compatibility
- *
- * @package @umituz/react-native-design-system
- */
-
-import React, { useMemo } from "react";
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  Image,
-  type ViewStyle,
-} 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 ImagePickerBoxConfig {
-  readonly variant?: "portrait" | "square" | "landscape";
-  readonly size?: "sm" | "md" | "lg";
-  readonly uploadIcon?: string;
-  readonly editIcon?: string;
-}
-
-export interface ImagePickerBoxProps {
-  readonly imageUri: string | null;
-  readonly isDisabled?: boolean;
-  readonly onPress: () => void;
-  readonly placeholderText: string;
-  readonly gradientColors?: readonly [string, string, ...string[]];
-  readonly config?: ImagePickerBoxConfig;
-}
-
-const VARIANT_STYLES: Record<string, ViewStyle> = {
-  portrait: { width: 200, height: 280, borderRadius: 20 },
-  square: { width: "100%" as unknown as number, aspectRatio: 1, borderRadius: 24 },
-  landscape: { width: "100%" as unknown as number, aspectRatio: 16 / 9, borderRadius: 16 },
-};
-
-const SIZE_MULTIPLIERS = { sm: 0.7, md: 1, lg: 1.3 };
-
-const DEFAULT_CONFIG: ImagePickerBoxConfig = {
-  variant: "portrait",
-  size: "md",
-  uploadIcon: "cloud-upload-outline",
-  editIcon: "image-outline",
-};
-
-export const ImagePickerBox: React.FC<ImagePickerBoxProps> = ({
-  imageUri,
-  isDisabled = false,
-  onPress,
-  placeholderText,
-  gradientColors = ["#667eea", "#764ba2"],
-  config = DEFAULT_CONFIG,
-}) => {
-  const tokens = useAppDesignTokens();
-  const cfg = useMemo(() => ({ ...DEFAULT_CONFIG, ...config }), [config]);
-
-  const multiplier = SIZE_MULTIPLIERS[cfg.size || "md"];
-  const baseStyle = VARIANT_STYLES[cfg.variant || "portrait"];
-  const iconSize = Math.round(32 * multiplier);
-
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          marginVertical: 16,
-          alignItems: "center",
-        },
-        box: {
-          overflow: "hidden",
-          ...baseStyle,
-          backgroundColor: tokens.colors.backgroundSecondary,
-        },
-        imageContainer: {
-          flex: 1,
-          position: "relative",
-        },
-        image: {
-          width: "100%",
-          height: "100%",
-        },
-        imageOverlay: {
-          position: "absolute",
-          bottom: 0,
-          left: 0,
-          right: 0,
-          height: "30%",
-          justifyContent: "flex-end",
-          alignItems: "flex-end",
-          padding: 12,
-        },
-        editBadge: {
-          borderRadius: 20,
-          padding: 8,
-          backgroundColor: `${gradientColors[1]}E6`,
-        },
-        placeholder: {
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-        },
-        placeholderContent: {
-          alignItems: "center",
-          justifyContent: "center",
-          paddingHorizontal: 16,
-        },
-        uploadIconContainer: {
-          backgroundColor: "rgba(255,255,255,0.2)",
-          borderRadius: 40,
-          padding: 16,
-          marginBottom: 12,
-        },
-        placeholderText: {
-          textAlign: "center",
-          fontWeight: "600",
-          color: "#FFFFFF",
-        },
-      }),
-    [tokens, baseStyle, gradientColors]
-  );
-
-  return (
-    <View style={styles.container}>
-      <TouchableOpacity
-        style={styles.box}
-        onPress={onPress}
-        disabled={isDisabled}
-        activeOpacity={0.8}
-      >
-        {imageUri ? (
-          <View style={styles.imageContainer}>
-            <Image source={{ uri: imageUri }} style={styles.image} />
-            <LinearGradient
-              colors={["transparent", "rgba(0,0,0,0.3)"]}
-              style={styles.imageOverlay}
-            >
-              <View style={styles.editBadge}>
-                <AtomicIcon
-                  name={cfg.editIcon || "image-outline"}
-                  customSize={Math.round(16 * multiplier)}
-                  customColor="#FFFFFF"
-                />
-              </View>
-            </LinearGradient>
-          </View>
-        ) : (
-          <LinearGradient colors={gradientColors} style={styles.placeholder}>
-            <View style={styles.placeholderContent}>
-              <View style={styles.uploadIconContainer}>
-                <AtomicIcon
-                  name={cfg.uploadIcon || "cloud-upload-outline"}
-                  customSize={iconSize}
-                  customColor="#FFFFFF"
-                />
-              </View>
-              <AtomicText type="bodyMedium" style={styles.placeholderText}>
-                {placeholderText}
-              </AtomicText>
-            </View>
-          </LinearGradient>
-        )}
-      </TouchableOpacity>
-    </View>
-  );
-};

package/src/molecules/ImagePickerBox/index.ts

@@ -1,2 +0,0 @@
-export { ImagePickerBox } from "./ImagePickerBox";
-export type { ImagePickerBoxProps, ImagePickerBoxConfig } from "./ImagePickerBox";

package/src/molecules/PhotoUploadCard/PhotoUploadCard.tsx

@@ -1,241 +0,0 @@
-/**
- * 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

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