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

package/package.json

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

@@ -418,6 +418,10 @@ export {
   PhotoUploadCard,
   type PhotoUploadCardProps,
   type PhotoUploadCardConfig,
+  // Image Picker
+  ImagePickerBox,
+  type ImagePickerBoxProps,
+  type ImagePickerBoxConfig,
   // Step Header
   StepHeader,
   type StepHeaderProps,

package/src/molecules/ImagePickerBox/ImagePickerBox.tsx

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

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

package/src/molecules/index.ts

@@ -51,6 +51,9 @@ export * from './long-press-menu';
 // Photo Upload
 export * from './PhotoUploadCard';
 
+// Image Picker
+export * from './ImagePickerBox';
+
 // Step Header
 export * from './StepHeader';