@umituz/react-native-design-system 4.23.67 → 4.23.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.67",
+  "version": "4.23.68",
   "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/icon/AtomicIcon.tsx

@@ -20,19 +20,27 @@
  * <AtomicIcon name="favorite" size="md" color="primary" />
  */
 
-import React from "react";
-import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
-import Svg, { Path } from "react-native-svg";
-import { useAppDesignTokens } from "../../theme";
-import { useIconRenderer, type IconRenderProps } from "./iconStore";
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../../theme';
+import { useIconRenderer } from './iconStore';
 import {
   type IconSize as BaseIconSize,
   type IconColor,
-} from "./AtomicIcon.types";
+} from './AtomicIcon.types';
+import {
+  calculateIconSize,
+  calculateIconColor,
+} from './utils/iconUtils';
+import {
+  renderSvgIcon,
+  renderWithBackground,
+  buildIconRenderProps,
+} from './components/iconRenderer';
 
 export type IconSize = BaseIconSize;
 export type IconName = string;
-export type { IconColor, IconRenderProps };
+export type { IconColor };
 
 export interface AtomicIconProps {
   /** Icon name - interpreted by the app's icon renderer */
@@ -61,44 +69,20 @@ export interface AtomicIconProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const getSemanticColor = (
-  color: IconColor,
-  tokens: ReturnType<typeof useAppDesignTokens>
-): string => {
-  const colorMap: Record<IconColor, string> = {
-    primary: tokens.colors.primary,
-    secondary: tokens.colors.secondary,
-    success: tokens.colors.success,
-    warning: tokens.colors.warning,
-    error: tokens.colors.error,
-    info: tokens.colors.info,
-    onSurface: tokens.colors.onSurface,
-    surfaceVariant: tokens.colors.surfaceVariant,
-    onPrimary: tokens.colors.onPrimary,
-    onSecondary: tokens.colors.onSecondary,
-    textInverse: tokens.colors.textInverse,
-    textPrimary: tokens.colors.textPrimary,
-    textSecondary: tokens.colors.textSecondary,
-    textTertiary: tokens.colors.textTertiary,
-    onSurfaceVariant: tokens.colors.onSurfaceVariant,
-  };
-  return colorMap[color];
-};
-
 /**
  * Agnostic icon component - requires iconRenderer in DesignSystemProvider
  */
 export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(
   ({
     name,
-    size = "md",
+    size = 'md',
     customSize,
     color,
     customColor,
     withBackground = false,
     backgroundColor,
     svgPath,
-    svgViewBox = "0 0 24 24",
+    svgViewBox = '0 0 24 24',
     accessibilityLabel,
     testID,
     style,
@@ -106,34 +90,19 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(
     const tokens = useAppDesignTokens();
     const iconRenderer = useIconRenderer();
 
-    // Calculate size
-    const baseSize = customSize ?? size;
-    const iconSizesMap = tokens.iconSizes as Record<string, number>;
-    const sizeInPixels: number =
-      typeof baseSize === "number"
-        ? baseSize * tokens.spacingMultiplier
-        : iconSizesMap[baseSize] ?? iconSizesMap["md"] ?? 24;
-
-    // Calculate color
-    const iconColor = customColor
-      ? customColor
-      : color
-        ? getSemanticColor(color, tokens)
-        : tokens.colors.textPrimary;
+    // Calculate size and color using utility functions
+    const sizeInPixels = calculateIconSize(size, customSize, tokens);
+    const iconColor = calculateIconColor(customColor, color, tokens);
 
     // SVG path rendering (built-in, no external dependency)
     if (svgPath) {
-      const svgElement = (
-        <Svg
-          viewBox={svgViewBox}
-          width={sizeInPixels}
-          height={sizeInPixels}
-          key="custom-svg-icon"
-          testID={testID}
-          accessibilityLabel={accessibilityLabel}
-        >
-          <Path d={svgPath} fill={iconColor} />
-        </Svg>
+      const svgElement = renderSvgIcon(
+        svgPath,
+        svgViewBox,
+        sizeInPixels,
+        iconColor,
+        testID,
+        accessibilityLabel
       );
 
       if (withBackground) {
@@ -154,27 +123,27 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(
     if (!iconRenderer) {
       if (__DEV__) {
         console.warn(
-          "[DesignSystem] AtomicIcon requires an iconRenderer in DesignSystemProvider.\n" +
-            "Example:\n" +
-            "<DesignSystemProvider\n" +
+          '[DesignSystem] AtomicIcon requires an iconRenderer in DesignSystemProvider.\n' +
+            'Example:\n' +
+            '<DesignSystemProvider\n' +
             '  iconRenderer={({ name, size, color }) => (\n' +
             '    <YourIconLibrary name={name} size={size} color={color} />\n' +
-            "  )}\n" +
-            ">"
+            '  )}\n' +
+            '>'
         );
       }
       return null;
     }
 
-    // Build render props
-    const renderProps: IconRenderProps = {
-      name: name || "",
-      size: sizeInPixels,
-      color: iconColor,
-      style: style as StyleProp<ViewStyle>,
+    // Build render props and render icon
+    const renderProps = buildIconRenderProps(
+      name || '',
+      sizeInPixels,
+      iconColor,
+      style,
       testID,
-      accessibilityLabel,
-    };
+      accessibilityLabel
+    );
 
     const iconElement = iconRenderer(renderProps);
 
@@ -193,44 +162,4 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(
   }
 );
 
-AtomicIcon.displayName = "AtomicIcon";
-
-/**
- * Helper to render icon with circular background
- */
-function renderWithBackground(
-  iconElement: React.ReactNode,
-  sizeInPixels: number,
-  bgColor: string,
-  style: StyleProp<ViewStyle> | undefined,
-  testID: string | undefined,
-  accessibilityLabel: string | undefined
-): React.ReactElement {
-  const containerSize = sizeInPixels + 16;
-
-  return (
-    <View
-      style={[
-        styles.backgroundContainer,
-        {
-          width: containerSize,
-          height: containerSize,
-          borderRadius: containerSize / 2,
-          backgroundColor: bgColor,
-        },
-        style,
-      ]}
-      testID={testID}
-      accessibilityLabel={accessibilityLabel}
-    >
-      {iconElement}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  backgroundContainer: {
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});
+AtomicIcon.displayName = 'AtomicIcon';

package/src/atoms/icon/components/iconRenderer.tsx

@@ -0,0 +1,118 @@
+/**
+ * Icon Renderer Components
+ * SVG rendering and background rendering logic
+ */
+
+import React from 'react';
+import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import type { IconRenderProps } from '../iconStore';
+
+/**
+ * Renders an SVG icon from path data
+ *
+ * @param svgPath - SVG path string
+ * @param svgViewBox - SVG viewBox attribute
+ * @param size - Icon size in pixels
+ * @param color - Icon color
+ * @param testID - Test ID for testing
+ * @param accessibilityLabel - Accessibility label
+ * @returns SVG element
+ */
+export function renderSvgIcon(
+  svgPath: string,
+  svgViewBox: string,
+  size: number,
+  color: string,
+  testID?: string,
+  accessibilityLabel?: string
+): React.ReactElement {
+  return (
+    <Svg
+      viewBox={svgViewBox}
+      width={size}
+      height={size}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+    >
+      <Path d={svgPath} fill={color} />
+    </Svg>
+  );
+}
+
+/**
+ * Renders an icon with a circular background
+ *
+ * @param iconElement - Icon element to wrap
+ * @param size - Icon size in pixels
+ * @param backgroundColor - Background color
+ * @param style - Additional styles
+ * @param testID - Test ID for testing
+ * @param accessibilityLabel - Accessibility label
+ * @returns Wrapped icon with background
+ */
+export function renderWithBackground(
+  iconElement: React.ReactNode,
+  size: number,
+  backgroundColor: string,
+  style?: StyleProp<ViewStyle>,
+  testID?: string,
+  accessibilityLabel?: string
+): React.ReactElement {
+  const containerSize = size + 16;
+
+  return (
+    <View
+      style={[
+        styles.backgroundContainer,
+        {
+          width: containerSize,
+          height: containerSize,
+          borderRadius: containerSize / 2,
+          backgroundColor,
+        },
+        style,
+      ]}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+    >
+      {iconElement}
+    </View>
+  );
+}
+
+/**
+ * Builds render props for custom icon renderer
+ *
+ * @param name - Icon name
+ * @param size - Icon size in pixels
+ * @param color - Icon color
+ * @param style - Additional styles
+ * @param testID - Test ID
+ * @param accessibilityLabel - Accessibility label
+ * @returns Icon render props
+ */
+export function buildIconRenderProps(
+  name: string,
+  size: number,
+  color: string,
+  style?: StyleProp<ViewStyle>,
+  testID?: string,
+  accessibilityLabel?: string
+): IconRenderProps {
+  return {
+    name,
+    size,
+    color,
+    style: style as StyleProp<ViewStyle>,
+    testID,
+    accessibilityLabel,
+  };
+}
+
+const styles = StyleSheet.create({
+  backgroundContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/atoms/icon/utils/iconUtils.ts

@@ -0,0 +1,94 @@
+/**
+ * Icon Utility Functions
+ * Helper functions for icon color and size calculations
+ */
+
+import type { IconColor } from '../AtomicIcon.types';
+import type { DesignTokens } from '../../../theme';
+
+/**
+ * Maps semantic color names to actual color values from tokens
+ *
+ * @param color - Semantic color name
+ * @param tokens - Design tokens
+ * @returns Hex color string
+ */
+export function getSemanticColor(
+  color: IconColor,
+  tokens: DesignTokens
+): string {
+  const colorMap: Record<IconColor, string> = {
+    primary: tokens.colors.primary,
+    secondary: tokens.colors.secondary,
+    success: tokens.colors.success,
+    warning: tokens.colors.warning,
+    error: tokens.colors.error,
+    info: tokens.colors.info,
+    onSurface: tokens.colors.onSurface,
+    surfaceVariant: tokens.colors.surfaceVariant,
+    onPrimary: tokens.colors.onPrimary,
+    onSecondary: tokens.colors.onSecondary,
+    textInverse: tokens.colors.textInverse,
+    textPrimary: tokens.colors.textPrimary,
+    textSecondary: tokens.colors.textSecondary,
+    textTertiary: tokens.colors.textTertiary,
+    onSurfaceVariant: tokens.colors.onSurfaceVariant,
+  };
+  return colorMap[color];
+}
+
+/**
+ * Calculates icon size in pixels
+ *
+ * @param size - Size preset or custom size value
+ * @param customSize - Custom size in pixels (overrides size)
+ * @param tokens - Design tokens
+ * @returns Size in pixels
+ */
+export function calculateIconSize(
+  size: string | number,
+  customSize: number | undefined,
+  tokens: DesignTokens
+): number {
+  const baseSize = customSize ?? size;
+  const iconSizesMap = tokens.iconSizes as Record<string, number>;
+
+  return typeof baseSize === 'number'
+    ? baseSize * tokens.spacingMultiplier
+    : iconSizesMap[baseSize] ?? iconSizesMap['md'] ?? 24;
+}
+
+/**
+ * Calculates icon color
+ *
+ * @param customColor - Custom color override
+ * @param semanticColor - Semantic color from theme
+ * @param tokens - Design tokens
+ * @returns Hex color string
+ */
+export function calculateIconColor(
+  customColor: string | undefined,
+  semanticColor: IconColor | undefined,
+  tokens: DesignTokens
+): string {
+  if (customColor) {
+    return customColor;
+  }
+
+  if (semanticColor) {
+    return getSemanticColor(semanticColor, tokens);
+  }
+
+  return tokens.colors.textPrimary;
+}
+
+/**
+ * Calculates container size for icon with background
+ *
+ * @param iconSize - Icon size in pixels
+ * @param padding - Padding around icon (default: 16)
+ * @returns Container size
+ */
+export function calculateContainerSize(iconSize: number, padding: number = 16): number {
+  return iconSize + padding;
+}