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

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/atoms/index.ts

@@ -25,11 +25,13 @@ export {
 // Input
 export {
     AtomicInput,
-    type AtomicInputProps,
-    type AtomicInputVariant,
-    type AtomicInputState,
-    type AtomicInputSize,
 } from './AtomicInput';
+export type {
+    AtomicInputProps,
+    AtomicInputVariant,
+    AtomicInputState,
+    AtomicInputSize,
+} from './input/types';
 
 // Icon
 export {

package/src/atoms/input/components/InputHelper.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View } from 'react-native';
+import { AtomicText } from '../../AtomicText';
+import type { AtomicInputState } from '../../input/types';
+
+interface InputHelperProps {
+  helperText?: string;
+  showCharacterCount?: boolean;
+  characterCount?: number;
+  maxLength?: number;
+  state?: AtomicInputState;
+  testID?: string;
+}
+
+export const InputHelper: React.FC<InputHelperProps> = ({
+  helperText,
+  showCharacterCount,
+  characterCount = 0,
+  maxLength,
+  state,
+  testID,
+}) => {
+  if (!helperText && !showCharacterCount) return null;
+
+  const color = state === 'error' ? 'error' : 'secondary';
+
+  return (
+    <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 4 }}>
+      {helperText && (
+        <AtomicText
+          style={{ flex: 1 }}
+          color={color}
+          testID={testID ? `${testID}-helper` : undefined}
+        >
+          {helperText}
+        </AtomicText>
+      )}
+      {showCharacterCount && maxLength && (
+        <AtomicText
+          style={{ marginLeft: 8 }}
+          color="secondary"
+          testID={testID ? `${testID}-count` : undefined}
+        >
+          {characterCount}/{maxLength}
+        </AtomicText>
+      )}
+    </View>
+  );
+};

package/src/atoms/input/components/InputIcon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { View, Pressable } from 'react-native';
+import { AtomicIcon } from '../../AtomicIcon';
+
+interface InputIconProps {
+  name: string;
+  size: number;
+  color: string;
+  position: 'leading' | 'trailing';
+  onPress?: () => void;
+  testID?: string;
+}
+
+export const InputIcon: React.FC<InputIconProps> = ({
+  name,
+  size,
+  color,
+  position,
+  onPress,
+  testID,
+}) => {
+  const positionStyle = position === 'leading' ? styles.leadingIcon : styles.trailingIcon;
+  const Wrapper = onPress ? Pressable : View;
+  const wrapperProps = onPress ? { onPress, testID } : {};
+
+  return (
+    <Wrapper style={positionStyle} {...wrapperProps}>
+      <AtomicIcon name={name} customSize={size} customColor={color} />
+    </Wrapper>
+  );
+};
+
+const styles = {
+  leadingIcon: {
+    position: 'absolute' as const,
+    left: 12,
+    zIndex: 1,
+  },
+  trailingIcon: {
+    position: 'absolute' as const,
+    right: 12,
+    zIndex: 1,
+  },
+};

package/src/atoms/input/components/InputLabel.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AtomicText } from '../../AtomicText';
+import type { AtomicInputState } from '../../input/types';
+
+interface InputLabelProps {
+  label?: string;
+  state?: AtomicInputState;
+}
+
+export const InputLabel: React.FC<InputLabelProps> = ({ label, state }) => {
+  if (!label) return null;
+
+  const color = state === 'error' ? 'error' : state === 'success' ? 'success' : 'secondary';
+
+  return (
+    <AtomicText type="labelMedium" color={color} style={{ marginBottom: 4 }}>
+      {label}
+    </AtomicText>
+  );
+};

package/src/atoms/input/styles/inputStylesHelper.ts

@@ -7,7 +7,7 @@
 
 import { ViewStyle } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
-import type { AtomicInputVariant, AtomicInputSize } from '../../AtomicInput';
+import type { AtomicInputVariant, AtomicInputSize } from '../../input/types';
 
 interface GetVariantStyleParams {
   variant: AtomicInputVariant;

package/src/atoms/input/types.ts

@@ -0,0 +1,72 @@
+import type { StyleProp } from 'react-native';
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { IconName } from '../AtomicIcon';
+
+export type AtomicInputVariant = 'outlined' | 'filled' | 'flat';
+export type AtomicInputState = 'default' | 'error' | 'success' | 'disabled';
+export type AtomicInputSize = 'sm' | 'md' | 'lg';
+
+export interface AtomicInputProps {
+  /** Input label */
+  label?: string;
+  /** Current input value */
+  value?: string;
+  /** Value change callback */
+  onChangeText?: (text: string) => void;
+  /** Input variant (outlined, filled, flat) */
+  variant?: AtomicInputVariant;
+  /** Input state (default, error, success, disabled) */
+  state?: AtomicInputState;
+  /** Input size (sm, md, lg) */
+  size?: AtomicInputSize;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Helper text below input */
+  helperText?: string;
+  /** Leading icon (Ionicons name) */
+  leadingIcon?: IconName;
+  /** Trailing icon (Ionicons name) */
+  trailingIcon?: IconName;
+  /** Callback when trailing icon is pressed */
+  onTrailingIconPress?: () => void;
+  /** Show password toggle for secure inputs */
+  showPasswordToggle?: boolean;
+  /** Secure text entry (password field) */
+  secureTextEntry?: boolean;
+  /** Maximum character length */
+  maxLength?: number;
+  /** Show character counter */
+  showCharacterCount?: boolean;
+  /** Keyboard type */
+  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'url' | 'number-pad' | 'decimal-pad' | 'web-search' | 'twitter' | 'numeric' | 'visible-password';
+  /** Return key type */
+  returnKeyType?: 'done' | 'go' | 'next' | 'search' | 'send';
+  /** Callback when submit button is pressed */
+  onSubmitEditing?: () => void;
+  /** Blur on submit */
+  blurOnSubmit?: boolean;
+  /** Auto focus */
+  autoFocus?: boolean;
+  /** Auto-capitalize */
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+  /** Auto-correct */
+  autoCorrect?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+  /** Input text style */
+  inputStyle?: StyleProp<TextStyle>;
+  /** Test ID for E2E testing */
+  testID?: string;
+  /** Blur callback */
+  onBlur?: () => void;
+  /** Focus callback */
+  onFocus?: () => void;
+  /** Multiline input support */
+  multiline?: boolean;
+  /** Number of lines for multiline input */
+  numberOfLines?: number;
+}
+
+export type { AtomicInputProps as InputProps };