@umituz/react-native-design-system 4.23.82 → 4.23.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.82",
+  "version": "4.23.84",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/input/hooks/useInputState.ts

@@ -24,12 +24,10 @@ export const useInputState = ({
   value = '',
   onChangeText,
   secureTextEntry = false,
-  showPasswordToggle = false,
+  showPasswordToggle: _showPasswordToggle = false,
   maxLength,
-  showCharacterCount = false,
+  showCharacterCount: _showCharacterCount = false,
 }: UseInputStateProps = {}): UseInputStateReturn => {
-  void showPasswordToggle;
-  void showCharacterCount;
   const [localValue, setLocalValue] = useState(value);
   const [isFocused, setIsFocused] = useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(!secureTextEntry);

package/src/image/presentation/components/editor/text-editor/TextTransformTab.tsx

@@ -3,10 +3,10 @@
  */
 
 import React from "react";
-import { View, ScrollView, TouchableOpacity } from "react-native";
-import { AtomicText, AtomicIcon } from "../../../../../atoms";
+import { View } from "react-native";
 import { useAppDesignTokens } from "../../../../../theme/hooks/useAppDesignTokens";
-import { textEditorStyles, type TabProps } from "./TextEditorTabs.styles";
+import type { TabProps } from "./TextEditorTabs.styles";
+import { TransformButtonRow, DeleteButton } from "./components/TransformButtonRow";
 
 const DEFAULT_SCALES = [0.5, 0.75, 1, 1.25, 1.5, 2];
 const DEFAULT_ROTATIONS = [0, 45, 90, 135, 180, 225, 270, 315];
@@ -33,160 +33,48 @@ export const TextTransformTab: React.FC<TextTransformTabProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
+  const scaleButtons = DEFAULT_SCALES.map((s) => ({
+    value: s,
+    label: s.toFixed(1) + "x",
+  }));
+
+  const rotationButtons = DEFAULT_ROTATIONS.map((r) => ({
+    value: r,
+    label: r + "°",
+  }));
+
+  const opacityButtons = DEFAULT_OPACITIES.map((o) => ({
+    value: o,
+    label: Math.round(o * 100) + "%",
+  }));
+
   return (
     <View style={{ gap: tokens.spacing.xl }}>
-      {/* Scale Selection */}
-      <View>
-        <AtomicText
-          style={{
-            ...tokens.typography.labelMedium,
-            marginBottom: tokens.spacing.xs,
-          }}
-        >
-          Scale: {scale.toFixed(2)}x
-        </AtomicText>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{ gap: tokens.spacing.sm }}
-        >
-          {DEFAULT_SCALES.map((s) => (
-            <TouchableOpacity
-              key={s}
-              onPress={() => setScale(s)}
-              style={[
-                textEditorStyles.transformButton,
-                {
-                  paddingHorizontal: tokens.spacing.md,
-                  paddingVertical: tokens.spacing.sm,
-                  borderRadius: tokens.borders.radius.md,
-                  borderWidth: 1,
-                  borderColor: scale === s ? tokens.colors.primary : tokens.colors.border,
-                  backgroundColor: scale === s ? tokens.colors.primary : tokens.colors.surface,
-                },
-              ]}
-            >
-              <AtomicText
-                style={{ color: scale === s ? "white" : tokens.colors.textPrimary }}
-              >
-                {s.toFixed(1)}x
-              </AtomicText>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      </View>
+      <TransformButtonRow
+        title="Scale"
+        buttons={scaleButtons}
+        selectedValue={scale}
+        onSelect={setScale}
+        formatTitle={(v) => v.toFixed(2) + "x"}
+      />
 
-      {/* Rotation Selection */}
-      <View>
-        <AtomicText
-          style={{
-            ...tokens.typography.labelMedium,
-            marginBottom: tokens.spacing.xs,
-          }}
-        >
-          Rotation: {Math.round(rotation)}°
-        </AtomicText>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{ gap: tokens.spacing.sm }}
-        >
-          {DEFAULT_ROTATIONS.map((r) => (
-            <TouchableOpacity
-              key={r}
-              onPress={() => setRotation(r)}
-              style={[
-                textEditorStyles.transformButton,
-                {
-                  paddingHorizontal: tokens.spacing.md,
-                  paddingVertical: tokens.spacing.sm,
-                  borderRadius: tokens.borders.radius.md,
-                  borderWidth: 1,
-                  borderColor: rotation === r ? tokens.colors.primary : tokens.colors.border,
-                  backgroundColor: rotation === r ? tokens.colors.primary : tokens.colors.surface,
-                },
-              ]}
-            >
-              <AtomicText
-                style={{ color: rotation === r ? "white" : tokens.colors.textPrimary }}
-              >
-                {r}°
-              </AtomicText>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      </View>
+      <TransformButtonRow
+        title="Rotation"
+        buttons={rotationButtons}
+        selectedValue={rotation}
+        onSelect={setRotation}
+        formatTitle={(v) => Math.round(v) + "°"}
+      />
 
-      {/* Opacity Selection */}
-      <View>
-        <AtomicText
-          style={{
-            ...tokens.typography.labelMedium,
-            marginBottom: tokens.spacing.xs,
-          }}
-        >
-          Opacity: {(opacity * 100).toFixed(0)}%
-        </AtomicText>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{ gap: tokens.spacing.sm }}
-        >
-          {DEFAULT_OPACITIES.map((o) => (
-            <TouchableOpacity
-              key={o}
-              onPress={() => setOpacity(o)}
-              style={[
-                textEditorStyles.transformButton,
-                {
-                  paddingHorizontal: tokens.spacing.md,
-                  paddingVertical: tokens.spacing.sm,
-                  borderRadius: tokens.borders.radius.md,
-                  borderWidth: 1,
-                  borderColor: opacity === o ? tokens.colors.primary : tokens.colors.border,
-                  backgroundColor: opacity === o ? tokens.colors.primary : tokens.colors.surface,
-                },
-              ]}
-            >
-              <AtomicText
-                style={{ color: opacity === o ? "white" : tokens.colors.textPrimary }}
-              >
-                {Math.round(o * 100)}%
-              </AtomicText>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      </View>
+      <TransformButtonRow
+        title="Opacity"
+        buttons={opacityButtons}
+        selectedValue={opacity}
+        onSelect={setOpacity}
+        formatTitle={(v) => (v * 100).toFixed(0) + "%"}
+      />
 
-      {/* Delete Button */}
-      {onDelete && (
-        <TouchableOpacity
-          onPress={onDelete}
-          style={[
-            textEditorStyles.deleteButton,
-            {
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: tokens.spacing.sm,
-              padding: tokens.spacing.md,
-              borderRadius: tokens.borders.radius.md,
-              borderWidth: 1,
-              borderColor: tokens.colors.error,
-            },
-          ]}
-        >
-          <AtomicIcon name="trash" size={20} color="error" />
-          <AtomicText
-            style={{
-              ...tokens.typography.labelMedium,
-              color: tokens.colors.error,
-            }}
-          >
-            Delete Layer
-          </AtomicText>
-        </TouchableOpacity>
-      )}
+      {onDelete && <DeleteButton onPress={onDelete} />}
     </View>
   );
 };

package/src/image/presentation/components/editor/text-editor/components/TransformButtonRow.tsx

@@ -0,0 +1,124 @@
+/**
+ * Transform Button Row Component
+ *
+ * Reusable horizontal scrollable row of transform buttons.
+ */
+
+import React from "react";
+import { ScrollView, TouchableOpacity, View, type StyleProp, type ViewStyle } from "react-native";
+import { AtomicText, AtomicIcon } from "../../../../../../atoms";
+import { useAppDesignTokens } from "../../../../../../theme/hooks/useAppDesignTokens";
+import { textEditorStyles } from "../TextEditorTabs.styles";
+
+interface TransformButton {
+  value: number;
+  label: string;
+}
+
+interface TransformButtonRowProps {
+  title: string;
+  buttons: TransformButton[];
+  selectedValue: number;
+  onSelect: (value: number) => void;
+  formatLabel?: (value: number) => string;
+  formatTitle?: (selectedValue: number) => string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const TransformButtonRow: React.FC<TransformButtonRowProps> = ({
+  title,
+  buttons,
+  selectedValue,
+  onSelect,
+  formatLabel = (v) => v.toString(),
+  formatTitle = (v) => v.toString(),
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={style}>
+      <AtomicText
+        style={{
+          ...tokens.typography.labelMedium,
+          marginBottom: tokens.spacing.xs,
+        }}
+      >
+        {title}: {formatTitle(selectedValue)}
+      </AtomicText>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ gap: tokens.spacing.sm }}
+      >
+        {buttons.map((button) => {
+          const isSelected = selectedValue === button.value;
+          return (
+            <TouchableOpacity
+              key={button.value}
+              onPress={() => onSelect(button.value)}
+              style={[
+                textEditorStyles.transformButton,
+                {
+                  paddingHorizontal: tokens.spacing.md,
+                  paddingVertical: tokens.spacing.sm,
+                  borderRadius: tokens.borders.radius.md,
+                  borderWidth: 1,
+                  borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+                  backgroundColor: isSelected ? tokens.colors.primary : tokens.colors.surface,
+                },
+              ]}
+            >
+              <AtomicText
+                style={{ color: isSelected ? "white" : tokens.colors.textPrimary }}
+              >
+                {formatLabel(button.value)}
+              </AtomicText>
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+};
+
+interface DeleteButtonProps {
+  onPress: () => void;
+  label?: string;
+}
+
+export const DeleteButton: React.FC<DeleteButtonProps> = ({
+  onPress,
+  label = "Delete Layer",
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[
+        textEditorStyles.deleteButton,
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: tokens.spacing.sm,
+          padding: tokens.spacing.md,
+          borderRadius: tokens.borders.radius.md,
+          borderWidth: 1,
+          borderColor: tokens.colors.error,
+        },
+      ]}
+    >
+      <AtomicIcon name="trash" size={20} color="error" />
+      <AtomicText
+        style={{
+          ...tokens.typography.labelMedium,
+          color: tokens.colors.error,
+        }}
+      >
+        {label}
+      </AtomicText>
+    </TouchableOpacity>
+  );
+};

package/src/layouts/Grid/Grid.tsx

@@ -78,17 +78,22 @@ export const Grid: React.FC<GridProps> = ({
 
   return (
     <View style={[styles.container, style]} testID={testID}>
-      {childArray.map((child, index) => (
-        <View
-          key={index}
-          style={{
-            flex: columns ? 1 / columns - 0.01 : undefined,
-            minWidth: columns ? `${100 / columns - 1}%` : undefined,
-          }}
-        >
-          {child}
-        </View>
-      ))}
+      {childArray.map((child, index) => {
+        // Use child's key if available, otherwise use index
+        const key = (child as React.ReactElement).key || `grid-item-${index}`;
+
+        return (
+          <View
+            key={key}
+            style={{
+              flex: columns ? 1 / columns - 0.01 : undefined,
+              minWidth: columns ? `${100 / columns - 1}%` : undefined,
+            }}
+          >
+            {child}
+          </View>
+        );
+      })}
     </View>
   );
 };

package/src/media/domain/utils/FileValidator.ts

@@ -0,0 +1,156 @@
+/**
+ * File Validator
+ *
+ * File size and format validation utilities for media operations.
+ */
+
+import type { MediaAsset } from "../entities/Media";
+import { MediaValidationError, MEDIA_CONSTANTS } from "../entities/Media";
+
+/**
+ * File validation options
+ */
+export interface FileValidationOptions {
+  maxFileSizeMB?: number;
+  allowedFormats?: string[];
+}
+
+/**
+ * File validation result
+ */
+export interface FileValidationResult {
+  valid: boolean;
+  error?: MediaValidationError;
+  errorMessage?: string;
+}
+
+/**
+ * File validator for media operations
+ */
+export class FileValidator {
+  /**
+   * Validates file size against maximum limit
+   *
+   * @param fileSize - File size in bytes
+   * @param maxSizeMB - Maximum file size in megabytes
+   * @returns Validation result
+   */
+  static validateFileSize(
+    fileSize: number,
+    maxSizeMB: number = MEDIA_CONSTANTS.MAX_IMAGE_SIZE_MB
+  ): FileValidationResult {
+    const maxSizeBytes = maxSizeMB * 1024 * 1024;
+
+    if (fileSize > maxSizeBytes) {
+      return {
+        valid: false,
+        error: MediaValidationError.FILE_TOO_LARGE,
+        errorMessage: `File size exceeds ${maxSizeMB}MB limit`,
+      };
+    }
+
+    return { valid: true };
+  }
+
+  /**
+   * Validates file format against allowed formats
+   *
+   * @param fileName - File name to check
+   * @param allowedFormats - Array of allowed file extensions
+   * @returns Validation result
+   */
+  static validateFileFormat(
+    fileName: string,
+    allowedFormats?: string[]
+  ): FileValidationResult {
+    const formats = allowedFormats ?? [...MEDIA_CONSTANTS.SUPPORTED_IMAGE_FORMATS];
+    const fileExtension = fileName
+      .substring(fileName.lastIndexOf("."))
+      .toLowerCase();
+
+    if (!formats.includes(fileExtension)) {
+      return {
+        valid: false,
+        error: MediaValidationError.INVALID_FORMAT,
+        errorMessage: `File format ${fileExtension} is not supported`,
+      };
+    }
+
+    return { valid: true };
+  }
+
+  /**
+   * Validates a media asset
+   *
+   * @param asset - Media asset to validate
+   * @param options - Validation options
+   * @returns Validation result
+   */
+  static validateAsset(
+    asset: MediaAsset,
+    options: FileValidationOptions = {}
+  ): FileValidationResult {
+    // Validate file size if present
+    if (asset.fileSize !== undefined) {
+      const maxSizeMB = options.maxFileSizeMB ?? MEDIA_CONSTANTS.MAX_IMAGE_SIZE_MB;
+      const sizeValidation = this.validateFileSize(asset.fileSize, maxSizeMB);
+      if (!sizeValidation.valid) {
+        return sizeValidation;
+      }
+    }
+
+    // Validate file format if file name is present
+    if (asset.fileName && options.allowedFormats) {
+      const formatValidation = this.validateFileFormat(
+        asset.fileName,
+        options.allowedFormats
+      );
+      if (!formatValidation.valid) {
+        return formatValidation;
+      }
+    }
+
+    return { valid: true };
+  }
+
+  /**
+   * Validates multiple media assets
+   *
+   * @param assets - Array of media assets to validate
+   * @param options - Validation options
+   * @returns First validation error found, or { valid: true } if all pass
+   */
+  static validateAssets(
+    assets: MediaAsset[],
+    options: FileValidationOptions = {}
+  ): FileValidationResult {
+    for (const asset of assets) {
+      const validation = this.validateAsset(asset, options);
+      if (!validation.valid) {
+        return validation;
+      }
+    }
+
+    return { valid: true };
+  }
+
+  /**
+   * Formats file size for display
+   *
+   * @param fileSize - File size in bytes
+   * @returns Formatted file size string (e.g., "1.5 MB")
+   */
+  static formatFileSize(fileSize: number): string {
+    const bytes = fileSize;
+    const kilobytes = bytes / 1024;
+    const megabytes = kilobytes / 1024;
+
+    if (megabytes >= 1) {
+      return `${megabytes.toFixed(1)} MB`;
+    } else if (kilobytes >= 1) {
+      return `${kilobytes.toFixed(0)} KB`;
+    } else {
+      return `${bytes} B`;
+    }
+  }
+}

package/src/media/infrastructure/services/MediaPickerService.ts

@@ -12,64 +12,27 @@ import type {
   CameraOptions,
 } from "../../domain/entities/Media";
 import {
-  MediaLibraryPermission,
   MediaType,
   MediaValidationError,
   MEDIA_CONSTANTS,
 } from "../../domain/entities/Media";
 import {
   mapMediaType,
-  mapPermissionStatus,
   mapPickerResult,
 } from "../utils/mediaPickerMappers";
+import { PermissionManager } from "../utils/PermissionManager";
+import { FileValidator } from "../../domain/utils/FileValidator";
 
 /**
  * Media picker service for selecting images/videos
  */
 export class MediaPickerService {
-  static async requestCameraPermission(): Promise<MediaLibraryPermission> {
-    try {
-      const { status } = await ImagePicker.requestCameraPermissionsAsync();
-      return mapPermissionStatus(status);
-    } catch {
-      return MediaLibraryPermission.DENIED;
-    }
-  }
-
-  static async requestMediaLibraryPermission(): Promise<MediaLibraryPermission> {
-    try {
-      const { status } =
-        await ImagePicker.requestMediaLibraryPermissionsAsync();
-      return mapPermissionStatus(status);
-    } catch {
-      return MediaLibraryPermission.DENIED;
-    }
-  }
-
-  static async getCameraPermissionStatus(): Promise<MediaLibraryPermission> {
-    try {
-      const { status } = await ImagePicker.getCameraPermissionsAsync();
-      return mapPermissionStatus(status);
-    } catch {
-      return MediaLibraryPermission.DENIED;
-    }
-  }
-
-  static async getMediaLibraryPermissionStatus(): Promise<MediaLibraryPermission> {
-    try {
-      const { status } = await ImagePicker.getMediaLibraryPermissionsAsync();
-      return mapPermissionStatus(status);
-    } catch {
-      return MediaLibraryPermission.DENIED;
-    }
-  }
-
   static async launchCamera(
     options?: CameraOptions
   ): Promise<MediaPickerResult> {
     try {
-      const permission = await MediaPickerService.requestCameraPermission();
-      if (permission === MediaLibraryPermission.DENIED) {
+      const permission = await PermissionManager.requestCameraPermission();
+      if (!PermissionManager.isPermissionGranted(permission)) {
         return { canceled: true };
       }
 
@@ -91,8 +54,8 @@ export class MediaPickerService {
     options?: CameraOptions
   ): Promise<MediaPickerResult> {
     try {
-      const permission = await MediaPickerService.requestCameraPermission();
-      if (permission === MediaLibraryPermission.DENIED) {
+      const permission = await PermissionManager.requestCameraPermission();
+      if (!PermissionManager.isPermissionGranted(permission)) {
         return { canceled: true };
       }
 
@@ -113,9 +76,8 @@ export class MediaPickerService {
     options?: MediaPickerOptions
   ): Promise<MediaPickerResult> {
     try {
-      const permission =
-        await MediaPickerService.requestMediaLibraryPermission();
-      if (permission === MediaLibraryPermission.DENIED) {
+      const permission = await PermissionManager.requestMediaLibraryPermission();
+      if (!PermissionManager.isPermissionGranted(permission)) {
         return {
           canceled: true,
           error: MediaValidationError.PERMISSION_DENIED,
@@ -138,17 +100,16 @@ export class MediaPickerService {
 
       // Validate file size if not canceled and has assets
       if (!mappedResult.canceled && mappedResult.assets && mappedResult.assets.length > 0) {
-        const maxSizeMB = options?.maxFileSizeMB ?? MEDIA_CONSTANTS.MAX_IMAGE_SIZE_MB;
-        const maxSizeBytes = maxSizeMB * 1024 * 1024;
-
-        for (const asset of mappedResult.assets) {
-          if (asset.fileSize && asset.fileSize > maxSizeBytes) {
-            return {
-              canceled: true,
-              error: MediaValidationError.FILE_TOO_LARGE,
-              errorMessage: `File size exceeds ${maxSizeMB}MB limit`,
-            };
-          }
+        const validation = FileValidator.validateAssets(mappedResult.assets, {
+          maxFileSizeMB: options?.maxFileSizeMB,
+        });
+
+        if (!validation.valid) {
+          return {
+            canceled: true,
+            error: validation.error,
+            errorMessage: validation.errorMessage,
+          };
         }
       }