@umituz/react-native-design-system 2.0.15 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.0.15",
+  "version": "2.1.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",
@@ -21,8 +21,8 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "typecheck": "echo 'TypeScript validation passed'",
-    "lint": "echo 'Lint passed'",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint . --ext .ts,.tsx",
     "version:patch": "npm version patch -m 'chore: release v%s'",
     "version:minor": "npm version minor -m 'chore: release v%s'",
     "version:major": "npm version major -m 'chore: release v%s'"
@@ -53,7 +53,6 @@
     "@react-native-async-storage/async-storage": ">=2.0.0",
     "@react-native-community/datetimepicker": ">=8.0.0",
     "@react-navigation/native": ">=6.0.0",
-    "@umituz/react-native-icons": "latest",
     "expo-linear-gradient": ">=15.0.0",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
@@ -83,12 +82,12 @@
     "@react-navigation/native": "^6.0.0",
     "@types/jest": "^30.0.0",
     "@types/react": "~19.1.10",
-    "@typescript-eslint/eslint-plugin": "^8.50.0",
-    "@typescript-eslint/parser": "^8.50.0",
-    "@umituz/react-native-icons": "latest",
+    "@typescript-eslint/eslint-plugin": "^8.50.1",
+    "@typescript-eslint/parser": "^8.50.1",
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-native": "^5.0.0",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "^2.20.0",
@@ -106,4 +105,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/atoms/AtomicCard.tsx

@@ -40,11 +40,8 @@ export const AtomicCard: React.FC<AtomicCardProps> = ({
             case 'elevated':
                 return {
                     backgroundColor: tokens.colors.surface,
-                    shadowColor: '#000',
-                    shadowOffset: { width: 0, height: 2 },
-                    shadowOpacity: 0.1,
-                    shadowRadius: 4,
-                    elevation: 2,
+                    borderWidth: 1,
+                    borderColor: tokens.colors.outlineVariant || tokens.colors.outline,
                 };
             case 'outlined':
                 return {

package/src/atoms/AtomicIcon.tsx

@@ -1,18 +1,25 @@
 /**
  * AtomicIcon - Theme-aware Icon Component
  *
- * Uses @umituz/react-native-icons internally
+ * Uses @expo/vector-icons/Ionicons internally
  * Adds theme-aware semantic colors and background support
  */
 
 import React from "react";
 import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
-import { Icon, type IconSize as BaseIconSize, ICON_SIZES } from "@umituz/react-native-icons";
+import { Ionicons } from "@expo/vector-icons";
 import { useAppDesignTokens } from '../theme';
+import {
+  getIconSize,
+  ICON_SIZES,
+  type IconSize as BaseIconSize
+} from "./AtomicIcon.types";
 
-// Re-export IconSize from icons package for convenience
+// Re-export IconSize for convenience
 export type IconSize = BaseIconSize;
 
+const FALLBACK_ICON = "help-circle-outline";
+
 // Semantic color names that map to theme tokens
 export type IconColor =
   | "primary"
@@ -96,7 +103,7 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
   const tokens = useAppDesignTokens();
 
   // Calculate size
-  const iconSize = customSize ?? (typeof size === "number" ? size : ICON_SIZES[size]);
+  const sizeInPixels = customSize ?? getIconSize(size);
 
   // Calculate color
   const iconColor = customColor
@@ -105,9 +112,29 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
       ? getSemanticColor(color, tokens)
       : tokens.colors.textPrimary;
 
+  // Validate icon
+  const isValidIcon = name in Ionicons.glyphMap;
+  const iconName = isValidIcon ? name : FALLBACK_ICON;
+
+  if (__DEV__ && !isValidIcon) {
+    console.warn(
+      `[AtomicIcon] Invalid icon name: "${name}". Using fallback icon "${FALLBACK_ICON}". ` +
+      `Available icons: https://icons.expo.fyi/`
+    );
+  }
+
+  const iconElement = (
+    <Ionicons
+      name={iconName as keyof typeof Ionicons.glyphMap}
+      size={sizeInPixels}
+      color={iconColor}
+      testID={testID ? `${testID}-icon` : undefined}
+    />
+  );
+
   if (withBackground) {
     const bgColor = backgroundColor || tokens.colors.surfaceVariant;
-    const containerSize = iconSize + 16;
+    const containerSize = sizeInPixels + 16;
 
     return (
       <View
@@ -124,14 +151,14 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
         testID={testID}
         accessibilityLabel={accessibilityLabel}
       >
-        <Icon name={name} size={iconSize} color={iconColor} />
+        {iconElement}
       </View>
     );
   }
 
   return (
     <View accessibilityLabel={accessibilityLabel} testID={testID} style={style}>
-      <Icon name={name} size={iconSize} color={iconColor} />
+      {iconElement}
     </View>
   );
 });
@@ -147,3 +174,4 @@ const styles = StyleSheet.create({
 
 // Legacy type alias for backward compatibility
 export type IconProps = AtomicIconProps;
+

package/src/atoms/AtomicIcon.types.ts

@@ -0,0 +1,48 @@
+/**
+ * Icon Type Definitions
+ * Centralized icon types for @expo/vector-icons Ionicons
+ */
+
+import type { Ionicons } from "@expo/vector-icons";
+
+/**
+ * All available Ionicons names (type-safe)
+ */
+export type IoniconsName = keyof typeof Ionicons.glyphMap;
+
+/**
+ * Semantic icon size presets
+ */
+export type IconSizePreset = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+
+/**
+ * Icon size - preset name or custom number in pixels
+ */
+export type IconSize = IconSizePreset | number;
+
+/**
+ * Icon size mapping to pixels
+ */
+export const ICON_SIZES: Record<IconSizePreset, number> = {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+    xxl: 48,
+} as const;
+
+/**
+ * Get icon size in pixels
+ */
+export function getIconSize(size: IconSize): number {
+    if (typeof size === "number") return size;
+    return ICON_SIZES[size];
+}
+
+/**
+ * Check if size is a preset
+ */
+export function isIconSizePreset(size: IconSize): size is IconSizePreset {
+    return typeof size === "string" && size in ICON_SIZES;
+}

package/src/atoms/index.ts

@@ -40,6 +40,8 @@ export {
     type IconName,
 } from './AtomicIcon';
 
+export * from './AtomicIcon.types';
+
 // Avatar
 export { AtomicAvatar, type AtomicAvatarProps } from './AtomicAvatar';
 

package/src/molecules/ConfirmationModalContent.tsx

@@ -29,7 +29,7 @@ const useConfirmButtonStyle = (
 ) => {
   return React.useCallback(() => {
     const baseStyle = getButtonStyle();
-    const variantStyles = [];
+    const variantStyles: ViewStyle[] = [];
 
     if (variant === 'destructive') variantStyles.push({ backgroundColor: tokens.colors.error });
     if (variant === 'warning') variantStyles.push({ backgroundColor: tokens.colors.warning });