@umituz/react-native-design-system 2.6.61 → 2.6.62

package/src/atoms/button/styles/buttonVariantStyles.ts

@@ -0,0 +1,88 @@
+/**
+ * Button Variant Styles
+ */
+
+import type { DesignTokens } from '../../../theme';
+import type { ButtonVariant, ButtonVariantStyles } from '../types';
+
+export const getVariantStyles = (
+  variant: ButtonVariant,
+  tokens: DesignTokens,
+): ButtonVariantStyles => {
+  const baseStyle = {
+    backgroundColor: tokens.colors.primary,
+    borderWidth: 0,
+  };
+
+  const baseTextStyle = {
+    color: tokens.colors.textInverse,
+  };
+
+  switch (variant) {
+    case 'primary':
+      return {
+        container: {
+          ...baseStyle,
+          backgroundColor: tokens.colors.primary,
+        },
+        text: {
+          ...baseTextStyle,
+          color: tokens.colors.textInverse,
+        },
+      };
+
+    case 'secondary':
+      return {
+        container: {
+          ...baseStyle,
+          backgroundColor: tokens.colors.surfaceSecondary,
+        },
+        text: {
+          ...baseTextStyle,
+          color: tokens.colors.textPrimary,
+        },
+      };
+
+    case 'outline':
+      return {
+        container: {
+          backgroundColor: undefined,
+          borderWidth: 1,
+          borderColor: tokens.colors.border,
+        },
+        text: {
+          ...baseTextStyle,
+          color: tokens.colors.textPrimary,
+        },
+      };
+
+    case 'text':
+      return {
+        container: {
+          backgroundColor: undefined,
+        },
+        text: {
+          ...baseTextStyle,
+          color: tokens.colors.primary,
+        },
+      };
+
+    case 'danger':
+      return {
+        container: {
+          ...baseStyle,
+          backgroundColor: tokens.colors.error,
+        },
+        text: {
+          ...baseTextStyle,
+          color: tokens.colors.textInverse,
+        },
+      };
+
+    default:
+      return {
+        container: baseStyle,
+        text: baseTextStyle,
+      };
+  }
+};

package/src/atoms/button/types/index.ts

@@ -0,0 +1,40 @@
+/**
+ * AtomicButton Type Definitions
+ */
+
+import type { StyleProp } from 'react-native';
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { IconName } from '../../AtomicIcon';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface AtomicButtonProps {
+  readonly title?: string;
+  readonly children?: React.ReactNode;
+  readonly onPress: () => void;
+  readonly variant?: ButtonVariant;
+  readonly size?: ButtonSize;
+  readonly disabled?: boolean;
+  readonly loading?: boolean;
+  readonly icon?: IconName;
+  readonly iconPosition?: 'left' | 'right';
+  readonly fullWidth?: boolean;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly textStyle?: StyleProp<TextStyle>;
+  readonly activeOpacity?: number;
+  readonly testID?: string;
+}
+
+export interface ButtonSizeConfig {
+  readonly paddingVertical: number;
+  readonly paddingHorizontal: number;
+  readonly fontSize: number;
+  readonly iconSize: number;
+  readonly minHeight: number;
+}
+
+export interface ButtonVariantStyles {
+  readonly container: ViewStyle;
+  readonly text: TextStyle;
+}

package/src/atoms/chip/AtomicChip.tsx

@@ -0,0 +1,112 @@
+/**
+ * AtomicChip Component
+ * Refactored: Extracted configs, styles, and types
+ */
+
+import React from 'react';
+import { View, ViewStyle, TouchableOpacity } from 'react-native';
+import { AtomicText } from '../AtomicText';
+import { AtomicIcon } from '../AtomicIcon';
+import { useAppDesignTokens } from '../../theme';
+import { getChipSizeConfig } from './configs/chipSizeConfig';
+import { getChipColorConfig } from './configs/chipColorConfig';
+import { getChipBorderStyle, getChipSelectedStyle } from './styles/chipStyles';
+import type { AtomicChipProps } from './types';
+
+export const AtomicChip: React.FC<AtomicChipProps> = React.memo(({
+  children,
+  variant = 'filled',
+  size = 'md',
+  color = 'primary',
+  backgroundColor,
+  textColor,
+  borderColor,
+  leadingIcon,
+  trailingIcon,
+  clickable = false,
+  onPress,
+  selected = false,
+  disabled = false,
+  style,
+  testID,
+  activeOpacity = 0.7,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const sizeConfig = getChipSizeConfig(size, tokens);
+  const colorConfig = getChipColorConfig(color, variant, tokens);
+  const borderStyle = getChipBorderStyle(variant, tokens);
+  const selectedStyle = getChipSelectedStyle(selected, tokens);
+
+  // Apply custom colors if provided
+  const finalBackgroundColor = backgroundColor || colorConfig.bg;
+  const finalTextColor = textColor || colorConfig.text;
+  const finalBorderColor = borderColor || colorConfig.border;
+
+  // Handle disabled state
+  const isDisabled = disabled || (!clickable && !onPress);
+  const opacity = isDisabled ? 0.5 : 1;
+
+  const chipStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: sizeConfig.paddingHorizontal,
+    paddingVertical: sizeConfig.paddingVertical,
+    backgroundColor: finalBackgroundColor,
+    opacity,
+    ...borderStyle,
+    borderColor: finalBorderColor,
+    ...selectedStyle,
+  };
+
+  const textStyle = {
+    fontSize: sizeConfig.fontSize,
+    fontWeight: tokens.typography.medium,
+  };
+
+  const iconColor = finalTextColor;
+
+  const content = (
+    <View style={[chipStyle, style]} testID={testID}>
+      {leadingIcon && (
+        <AtomicIcon
+          name={leadingIcon}
+          size={sizeConfig.iconSize}
+          customColor={iconColor}
+          style={{ marginRight: tokens.spacing.xs }}
+        />
+      )}
+      <AtomicText
+        type="labelMedium"
+        color={finalTextColor}
+        style={textStyle}
+      >
+        {children}
+      </AtomicText>
+      {trailingIcon && (
+        <AtomicIcon
+          name={trailingIcon}
+          size={sizeConfig.iconSize}
+          customColor={iconColor}
+          style={{ marginLeft: tokens.spacing.xs }}
+        />
+      )}
+    </View>
+  );
+
+  if (clickable && onPress && !disabled) {
+    return (
+      <TouchableOpacity onPress={onPress} activeOpacity={activeOpacity}>
+        {content}
+      </TouchableOpacity>
+    );
+  }
+
+  return content;
+});
+
+AtomicChip.displayName = 'AtomicChip';
+
+// Re-export types for convenience
+export type { AtomicChipProps, ChipVariant, ChipSize, ChipColor } from './types';

package/src/atoms/chip/configs/chipColorConfig.ts

@@ -0,0 +1,47 @@
+/**
+ * Chip Color Configuration
+ */
+
+import type { DesignTokens } from '../../../theme';
+import type { ChipColor, ChipVariant, ChipColorConfig } from '../types';
+
+export const getChipColorConfig = (
+  color: ChipColor,
+  variant: ChipVariant,
+  tokens: DesignTokens,
+): ChipColorConfig => {
+  const colorMap: Record<ChipColor, Record<ChipVariant, ChipColorConfig>> = {
+    primary: {
+      filled: { bg: tokens.colors.primary, text: tokens.colors.onPrimary, border: tokens.colors.primary },
+      outlined: { bg: undefined, text: tokens.colors.primary, border: tokens.colors.primary },
+      soft: { bg: tokens.colors.primaryContainer, text: tokens.colors.onPrimaryContainer, border: undefined },
+    },
+    secondary: {
+      filled: { bg: tokens.colors.secondary, text: tokens.colors.onSecondary, border: tokens.colors.secondary },
+      outlined: { bg: undefined, text: tokens.colors.secondary, border: tokens.colors.secondary },
+      soft: { bg: tokens.colors.secondaryContainer, text: tokens.colors.onSecondaryContainer, border: undefined },
+    },
+    success: {
+      filled: { bg: tokens.colors.success, text: tokens.colors.onSuccess, border: tokens.colors.success },
+      outlined: { bg: undefined, text: tokens.colors.success, border: tokens.colors.success },
+      soft: { bg: tokens.colors.successContainer, text: tokens.colors.onSuccessContainer, border: undefined },
+    },
+    warning: {
+      filled: { bg: tokens.colors.warning, text: tokens.colors.onWarning, border: tokens.colors.warning },
+      outlined: { bg: undefined, text: tokens.colors.warning, border: tokens.colors.warning },
+      soft: { bg: tokens.colors.warningContainer, text: tokens.colors.onWarningContainer, border: undefined },
+    },
+    error: {
+      filled: { bg: tokens.colors.error, text: tokens.colors.onError, border: tokens.colors.error },
+      outlined: { bg: undefined, text: tokens.colors.error, border: tokens.colors.error },
+      soft: { bg: tokens.colors.errorContainer, text: tokens.colors.onErrorContainer, border: undefined },
+    },
+    info: {
+      filled: { bg: tokens.colors.info, text: tokens.colors.onInfo, border: tokens.colors.info },
+      outlined: { bg: undefined, text: tokens.colors.info, border: tokens.colors.info },
+      soft: { bg: tokens.colors.infoContainer, text: tokens.colors.onInfoContainer, border: undefined },
+    },
+  };
+
+  return colorMap[color][variant];
+};

package/src/atoms/chip/configs/chipSizeConfig.ts

@@ -0,0 +1,34 @@
+/**
+ * Chip Size Configuration
+ */
+
+import type { DesignTokens } from '../../../theme';
+import type { ChipSize, ChipSizeConfig } from '../types';
+
+export const getChipSizeConfig = (
+  size: ChipSize,
+  tokens: DesignTokens,
+): ChipSizeConfig => {
+  const sizeConfigs: Record<ChipSize, ChipSizeConfig> = {
+    sm: {
+      paddingHorizontal: tokens.spacing.sm,
+      paddingVertical: tokens.spacing.xs,
+      fontSize: tokens.typography.bodySmall.responsiveFontSize,
+      iconSize: 'xs',
+    },
+    md: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.sm,
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+      iconSize: 'sm',
+    },
+    lg: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.sm,
+      fontSize: tokens.typography.bodyLarge.responsiveFontSize,
+      iconSize: 'sm',
+    },
+  };
+
+  return sizeConfigs[size];
+};

package/src/atoms/chip/index.ts

@@ -0,0 +1,6 @@
+/**
+ * AtomicChip Barrel Export
+ */
+
+export { AtomicChip } from './AtomicChip';
+export type { AtomicChipProps, ChipVariant, ChipSize, ChipColor } from './types';

package/src/atoms/chip/styles/chipStyles.ts

@@ -0,0 +1,28 @@
+/**
+ * Chip Styles
+ */
+
+import type { DesignTokens } from '../../../theme';
+import type { ChipVariant } from '../types';
+
+export const getChipBorderStyle = (
+  variant: ChipVariant,
+  tokens: DesignTokens,
+) => {
+  return {
+    borderWidth: variant === 'outlined' ? 1 : 0,
+    borderRadius: tokens.borders.radius.xl,
+  };
+};
+
+export const getChipSelectedStyle = (
+  selected: boolean,
+  tokens: DesignTokens,
+) => {
+  if (!selected) return {};
+
+  return {
+    borderWidth: tokens.borders.width.medium,
+    borderColor: tokens.colors.primary,
+  };
+};

package/src/atoms/chip/types/index.ts

@@ -0,0 +1,42 @@
+/**
+ * AtomicChip Type Definitions
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { IconSize } from '../../AtomicIcon';
+
+export type ChipVariant = 'filled' | 'outlined' | 'soft';
+export type ChipSize = 'sm' | 'md' | 'lg';
+export type ChipColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+
+export interface AtomicChipProps {
+  readonly children: React.ReactNode;
+  readonly variant?: ChipVariant;
+  readonly size?: ChipSize;
+  readonly color?: ChipColor;
+  readonly backgroundColor?: string;
+  readonly textColor?: string;
+  readonly borderColor?: string;
+  readonly leadingIcon?: string;
+  readonly trailingIcon?: string;
+  readonly clickable?: boolean;
+  readonly onPress?: () => void;
+  readonly selected?: boolean;
+  readonly disabled?: boolean;
+  readonly style?: ViewStyle;
+  readonly testID?: string;
+  readonly activeOpacity?: number;
+}
+
+export interface ChipSizeConfig {
+  readonly paddingHorizontal: number;
+  readonly paddingVertical: number;
+  readonly fontSize: number;
+  readonly iconSize: IconSize;
+}
+
+export interface ChipColorConfig {
+  readonly bg: string | undefined;
+  readonly text: string;
+  readonly border: string | undefined;
+}

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -1,145 +1,16 @@
 /**
- * ScreenLayout - Universal Screen Container Component
- *
- * Provides consistent layout structure for all screens:
- * - SafeAreaView with configurable edges
- * - Optional ScrollView for content
- * - Theme-aware background colors
- * - Optional header/footer slots
- * - Consistent spacing and padding
- *
- * Usage:
- * <ScreenLayout>
- *   <View>Your content here</View>
- * </ScreenLayout>
- *
- * Advanced:
- * <ScreenLayout
- *   scrollable={false}
- *   edges={['top', 'bottom']}
- *   header={<CustomHeader />}
- * >
- *   <View>Content</View>
- * </ScreenLayout>
+ * ScreenLayout Component
+ * Refactored: Extracted types, styles, and ContentWrapper
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet, type ViewStyle, type RefreshControlProps } from 'react-native';
-import { SafeAreaView, useSafeAreaInsets, type Edge } from '../../safe-area';
+import { View, ScrollView } from 'react-native';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../../theme';
 import { getScreenLayoutConfig } from '../../responsive/responsiveLayout';
-import { AtomicKeyboardAvoidingView } from '../../atoms';
-
-/**
- * NOTE: This component now works in conjunction with the SafeAreaProvider
- * from our safe-area module. The SafeAreaProvider should wrap your app root:
- * 
- * import { SafeAreaProvider } from '../../index';
- * 
- * function App() {
- *   return (
- *     <SafeAreaProvider>
- *       <YourApp />
- *     </SafeAreaProvider>
- *   );
- * }
- */
-
-export interface ScreenLayoutProps {
-  /**
-   * Content to render inside the layout
-   */
-  children: React.ReactNode;
-
-  /**
-   * Enable scrolling (default: true)
-   * Set to false for screens with custom scroll logic
-   */
-  scrollable?: boolean;
-
-  /**
-   * Safe area edges to apply (default: ['top'])
-   * Common values:
-   * - ['top'] - For screens with bottom tabs
-   * - ['top', 'bottom'] - For modal screens
-   * - [] - No safe area (use cautiously)
-   */
-  edges?: Edge[];
-
-  /**
-   * Optional header component
-   * Rendered above scrollable content
-   */
-  header?: React.ReactNode;
-
-  /**
-   * Optional footer component
-   * Rendered below scrollable content
-   */
-  footer?: React.ReactNode;
-
-  /**
-   * Override background color
-   * If not provided, uses theme's backgroundPrimary
-   */
-  backgroundColor?: string;
-
-  /**
-   * Custom container style
-   */
-  containerStyle?: ViewStyle;
-
-  /**
-   * Custom content container style (for ScrollView)
-   */
-  contentContainerStyle?: ViewStyle;
-
-  /**
-   * Test ID for automation
-   */
-  testID?: string;
-
-  /**
-   * Hide vertical scroll indicator (default: false)
-   */
-  hideScrollIndicator?: boolean;
-
-  /**
-   * Enable keyboard avoiding behavior (default: false)
-   * Useful for screens with inputs
-   */
-  keyboardAvoiding?: boolean;
-
-  /**
-   * Accessibility label for the layout
-   */
-  accessibilityLabel?: string;
-
-  /**
-   * Accessibility hint for the layout
-   */
-  accessibilityHint?: string;
-
-  /**
-   * Whether the layout is accessible
-   */
-  accessible?: boolean;
-
-  /**
-   * Enable responsive content width and centering (default: true)
-   */
-  responsiveEnabled?: boolean;
-
-  /**
-   * Maximum content width override
-   */
-  maxWidth?: number;
-
-  /**
-   * RefreshControl component for pull-to-refresh
-   */
-  refreshControl?: React.ReactElement<RefreshControlProps>;
-}
+import { ContentWrapper } from './components/ContentWrapper';
+import { getScreenLayoutStyles } from './styles/screenLayoutStyles';
+import type { ScreenLayoutProps } from './types';
 
 export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   children,
@@ -157,7 +28,6 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   maxWidth,
   refreshControl,
 }) => {
-  // Automatically uses current theme from global store
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
@@ -172,51 +42,14 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   const horizontalPadding = responsiveEnabled ? layoutConfig.horizontalPadding : tokens.spacing.md;
   const verticalPadding = responsiveEnabled ? layoutConfig.verticalPadding : tokens.spacing.lg;
 
-  const styles = useMemo(() => StyleSheet.create({
-    container: {
-      flex: 1,
-    },
-    keyboardAvoidingView: {
-      flex: 1,
-    },
-    responsiveWrapper: {
-      flex: 1,
-      width: '100%',
-      ...(finalMaxWidth ? { maxWidth: finalMaxWidth, alignSelf: 'center' as const } : {}),
-    },
-    content: {
-      flex: 1,
-      paddingTop: verticalPadding,
-      paddingHorizontal: horizontalPadding,
-    },
-    scrollView: {
-      flex: 1,
-    },
-    scrollContent: {
-      flexGrow: 1,
-      paddingTop: verticalPadding,
-      paddingHorizontal: horizontalPadding,
-      paddingBottom: verticalPadding,
-    },
-  }), [tokens, finalMaxWidth, horizontalPadding, verticalPadding]);
+  // Pre-compute styles
+  const styles = useMemo(
+    () => getScreenLayoutStyles(tokens, { maxWidth: finalMaxWidth, horizontalPadding, verticalPadding }),
+    [tokens, finalMaxWidth, horizontalPadding, verticalPadding]
+  );
 
   const bgColor = backgroundColor || tokens.colors.backgroundPrimary;
 
-  // Content wrapper - optionally with KeyboardAvoidingView
-  // Uses 'padding' behavior which works consistently cross-platform
-  const ContentWrapper: React.FC<{ children: React.ReactNode }> = ({ children: wrapperChildren }) => {
-    if (keyboardAvoiding) {
-      return (
-        <AtomicKeyboardAvoidingView
-          style={styles.keyboardAvoidingView}
-        >
-          {wrapperChildren}
-        </AtomicKeyboardAvoidingView>
-      );
-    }
-    return <>{wrapperChildren}</>;
-  };
-
   // Non-scrollable layout
   if (!scrollable) {
     return (
@@ -225,7 +58,7 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
         edges={edges}
         testID={testID}
       >
-        <ContentWrapper>
+        <ContentWrapper keyboardAvoiding={keyboardAvoiding}>
           <View style={styles.responsiveWrapper}>
             {header}
             <View style={[styles.content, contentContainerStyle]}>
@@ -245,7 +78,7 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
       edges={edges}
       testID={testID}
     >
-      <ContentWrapper>
+      <ContentWrapper keyboardAvoiding={keyboardAvoiding}>
         <View style={styles.responsiveWrapper}>
           {header}
           <ScrollView
@@ -263,3 +96,6 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
     </SafeAreaView>
   );
 };
+
+// Re-export types for convenience
+export type { ScreenLayoutProps } from './types';

package/src/layouts/ScreenLayout/components/ContentWrapper.tsx

@@ -0,0 +1,31 @@
+/**
+ * ContentWrapper Component
+ * Conditionally wraps content with KeyboardAvoidingView
+ */
+
+import React from 'react';
+import { View } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { AtomicKeyboardAvoidingView } from '../../../atoms';
+
+export interface ContentWrapperProps {
+  readonly children: React.ReactNode;
+  readonly keyboardAvoiding?: boolean;
+  readonly style?: ViewStyle;
+}
+
+export const ContentWrapper: React.FC<ContentWrapperProps> = ({
+  children,
+  keyboardAvoiding = false,
+  style,
+}) => {
+  if (keyboardAvoiding) {
+    return (
+      <AtomicKeyboardAvoidingView style={style}>
+        {children}
+      </AtomicKeyboardAvoidingView>
+    );
+  }
+
+  return <View style={style}>{children}</View>;
+};

package/src/layouts/ScreenLayout/components/index.ts

@@ -0,0 +1,6 @@
+/**
+ * ScreenLayout Components Export
+ */
+
+export { ContentWrapper } from './ContentWrapper';
+export type { ContentWrapperProps } from './ContentWrapper';