rn-custom-ui 1.0.0

package/src/components/customButton/index.tsx

@@ -0,0 +1,288 @@
+import {
+  Image,
+  Text,
+  TouchableOpacity,
+  View,
+  type ColorValue,
+} from 'react-native';
+import { useMemo } from 'react';
+
+import type { CustomButtonProps } from './types';
+import {
+  iconOnlySizeStyles,
+  sizeStyles,
+  contentAlignStyles,
+  styles,
+  variantTheme,
+} from './styles';
+import Loader from '../loading';
+
+const toColorString = (color: ColorValue | undefined, fallback: string) =>
+  typeof color === 'string' ? color : fallback;
+
+const CustomButton = ({
+  text = 'Submit',
+  children,
+  variant = 'default',
+  size = 'md',
+  contentAlign = 'center',
+  iconOnly = false,
+  iconOnlyShape = 'square',
+  rightImage,
+  leftImage,
+  style,
+  buttonStyles,
+  textStyles,
+  opacity = 0.7,
+  onPress,
+  imageStyles,
+  imageOuterStyle,
+  rotateRight = '0deg',
+  rotateLeft = '0deg',
+  disabled = false,
+  isLoading = false,
+  itemCount,
+  showCount = false,
+  isCapital = false,
+  borderRadius = 0,
+  RightIcon,
+  LeftIcon,
+  rightIconColor,
+  leftIconColor,
+  rightIconSize,
+  leftIconSize,
+  rightIconProps = {},
+  leftIconProps = {},
+  accessibilityRole = 'button',
+  accessibilityLabel,
+  accessibilityState,
+  ...touchableProps
+}: CustomButtonProps) => {
+  const iconOnlyMetrics = iconOnlySizeStyles[size];
+  const theme = variantTheme[variant];
+  const fallbackIconColor = toColorString(theme.text.color, '#000000');
+  const resolvedLeftIconColor = leftIconColor ?? fallbackIconColor;
+  const resolvedRightIconColor = rightIconColor ?? fallbackIconColor;
+  const resolvedLeftIconSize =
+    leftIconSize ?? (iconOnly ? iconOnlyMetrics.iconSize : 20);
+  const resolvedRightIconSize =
+    rightIconSize ?? (iconOnly ? iconOnlyMetrics.iconSize : 20);
+  const resolvedImageSize = iconOnly ? iconOnlyMetrics.imageSize : undefined;
+
+  const IconComponent = LeftIcon ?? RightIcon;
+  const imageSource = leftImage ?? rightImage;
+  const hasIconOnlyContent = Boolean(IconComponent || imageSource || children);
+
+  if (__DEV__ && iconOnly && !hasIconOnlyContent) {
+    console.warn(
+      'CustomButton: iconOnly requires LeftIcon, RightIcon, leftImage, rightImage, or children.'
+    );
+  }
+
+  if (__DEV__ && iconOnly && !accessibilityLabel && !text) {
+    console.warn(
+      'CustomButton: iconOnly buttons should include accessibilityLabel for screen readers.'
+    );
+  }
+
+  const alignment = iconOnly
+    ? contentAlignStyles.center
+    : contentAlignStyles[contentAlign];
+
+  const iconOnlyBorderRadius =
+    iconOnly && iconOnlyShape === 'circle'
+      ? (iconOnlyMetrics.button.width as number) / 2
+      : borderRadius;
+
+  const buttonStyle = useMemo(
+    () => [
+      styles.button,
+      theme.button,
+      !iconOnly && sizeStyles[size],
+      iconOnly && iconOnlyMetrics.button,
+      disabled && styles.disabledButton,
+      buttonStyles,
+      style,
+      { borderRadius: iconOnly ? iconOnlyBorderRadius : borderRadius },
+    ],
+    [
+      theme.button,
+      size,
+      iconOnly,
+      iconOnlyMetrics.button,
+      disabled,
+      buttonStyles,
+      style,
+      iconOnlyBorderRadius,
+      borderRadius,
+    ]
+  );
+
+  const labelStyle = useMemo(
+    () => [
+      styles.text,
+      alignment.text,
+      theme.text,
+      textStyles,
+      disabled && styles.disabledText,
+    ],
+    [alignment.text, theme.text, textStyles, disabled]
+  );
+
+  const imageTintStyle = theme.imageTint
+    ? { tintColor: theme.imageTint }
+    : undefined;
+
+  const getLabel = () => {
+    if (typeof text !== 'string') {
+      return text;
+    }
+
+    return isCapital ? text.toUpperCase() : text;
+  };
+
+  const renderLabel = () => {
+    if (iconOnly) {
+      return null;
+    }
+
+    if (children) {
+      return children;
+    }
+
+    const label = getLabel();
+
+    if (!label) {
+      return null;
+    }
+
+    return <Text style={labelStyle}>{label}</Text>;
+  };
+
+  const renderIconOnlyContent = () => {
+    if (!iconOnly) {
+      return null;
+    }
+
+    if (children) {
+      return children;
+    }
+
+    if (IconComponent) {
+      return (
+        <IconComponent
+          size={LeftIcon ? resolvedLeftIconSize : resolvedRightIconSize}
+          color={LeftIcon ? resolvedLeftIconColor : resolvedRightIconColor}
+          {...(LeftIcon ? leftIconProps : rightIconProps)}
+        />
+      );
+    }
+
+    if (imageSource) {
+      return (
+        <Image
+          resizeMode="contain"
+          source={imageSource}
+          style={[
+            iconOnly &&
+              resolvedImageSize != null && {
+                width: resolvedImageSize,
+                height: resolvedImageSize,
+              },
+            imageTintStyle,
+            imageStyles,
+          ]}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <TouchableOpacity
+      {...touchableProps}
+      accessibilityRole={accessibilityRole}
+      accessibilityLabel={accessibilityLabel ?? text}
+      accessibilityState={{
+        disabled: disabled || isLoading,
+        busy: isLoading,
+        ...accessibilityState,
+      }}
+      disabled={disabled || isLoading}
+      activeOpacity={opacity}
+      style={buttonStyle}
+      onPress={onPress}
+    >
+      {showCount && (
+        <View style={styles.countContainer}>
+          <Text style={styles.countText}>{itemCount}</Text>
+        </View>
+      )}
+      <View
+        style={[
+          styles.container,
+          alignment.container,
+          iconOnly && styles.iconOnlyContainer,
+          imageOuterStyle,
+        ]}
+      >
+        {iconOnly ? (
+          renderIconOnlyContent()
+        ) : (
+          <>
+            {LeftIcon && (
+              <LeftIcon
+                size={resolvedLeftIconSize}
+                color={resolvedLeftIconColor}
+                {...leftIconProps}
+              />
+            )}
+            {leftImage && (
+              <Image
+                resizeMode="contain"
+                source={leftImage}
+                style={[
+                  styles.leftImage,
+                  imageTintStyle,
+                  imageStyles,
+                  { transform: [{ rotate: rotateLeft }] },
+                ]}
+              />
+            )}
+            {renderLabel()}
+            {RightIcon && (
+              <RightIcon
+                size={resolvedRightIconSize}
+                color={resolvedRightIconColor}
+                {...rightIconProps}
+              />
+            )}
+            {rightImage && (
+              <Image
+                resizeMode="contain"
+                source={rightImage}
+                style={[
+                  styles.rightImage,
+                  imageTintStyle,
+                  imageStyles,
+                  { transform: [{ rotate: rotateRight }] },
+                ]}
+              />
+            )}
+          </>
+        )}
+      </View>
+      {isLoading && <Loader small color={theme.loaderColor} />}
+    </TouchableOpacity>
+  );
+};
+
+export default CustomButton;
+export type {
+  ButtonContentAlign,
+  ButtonSize,
+  ButtonVariant,
+  CustomButtonProps,
+  IconOnlyShape,
+} from './types';

package/src/components/customButton/styles.ts

@@ -0,0 +1,247 @@
+import { StyleSheet, type TextStyle, type ViewStyle } from 'react-native';
+
+import type { ButtonContentAlign, ButtonSize, ButtonVariant } from './types';
+
+const baseButton: ViewStyle = {
+  paddingHorizontal: 20,
+  paddingVertical: 15,
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'stretch',
+};
+
+export const sizeStyles: Record<ButtonSize, ViewStyle> = {
+  sm: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  md: {},
+  lg: {
+    paddingHorizontal: 24,
+    paddingVertical: 18,
+  },
+};
+
+export const iconOnlySizeStyles: Record<
+  ButtonSize,
+  { button: ViewStyle; iconSize: number; imageSize: number }
+> = {
+  sm: {
+    button: {
+      width: 36,
+      height: 36,
+      paddingHorizontal: 0,
+      paddingVertical: 0,
+      alignSelf: 'flex-start',
+    },
+    iconSize: 16,
+    imageSize: 18,
+  },
+  md: {
+    button: {
+      width: 44,
+      height: 44,
+      paddingHorizontal: 0,
+      paddingVertical: 0,
+      alignSelf: 'flex-start',
+    },
+    iconSize: 20,
+    imageSize: 22,
+  },
+  lg: {
+    button: {
+      width: 52,
+      height: 52,
+      paddingHorizontal: 0,
+      paddingVertical: 0,
+      alignSelf: 'flex-start',
+    },
+    iconSize: 24,
+    imageSize: 26,
+  },
+};
+
+export const variantTheme: Record<
+  ButtonVariant,
+  {
+    button: ViewStyle;
+    text: TextStyle;
+    imageTint?: string;
+    loaderColor: string;
+  }
+> = {
+  default: {
+    button: { backgroundColor: '#FFFFFF' },
+    text: { color: '#000000', fontWeight: '600' },
+    loaderColor: '#000000',
+  },
+  primary: {
+    button: { backgroundColor: '#0D6EFD' },
+    text: { color: '#FFFFFF', fontWeight: '600' },
+    imageTint: '#FFFFFF',
+    loaderColor: '#FFFFFF',
+  },
+  danger: {
+    button: { backgroundColor: '#DC3545' },
+    text: { color: '#FFFFFF', fontWeight: '600' },
+    imageTint: '#FFFFFF',
+    loaderColor: '#FFFFFF',
+  },
+  warning: {
+    button: { backgroundColor: '#FFC107' },
+    text: { color: '#212529', fontWeight: '600' },
+    imageTint: '#212529',
+    loaderColor: '#212529',
+  },
+  info: {
+    button: { backgroundColor: '#407BFF' },
+    text: { color: '#FFFFFF', fontWeight: '600' },
+    imageTint: '#FFFFFF',
+    loaderColor: '#FFFFFF',
+  },
+  success: {
+    button: { backgroundColor: '#198754' },
+    text: { color: '#FFFFFF', fontWeight: '600' },
+    imageTint: '#FFFFFF',
+    loaderColor: '#FFFFFF',
+  },
+  secondary: {
+    button: { backgroundColor: '#6C757D' },
+    text: { color: '#FFFFFF', fontWeight: '600' },
+    imageTint: '#FFFFFF',
+    loaderColor: '#FFFFFF',
+  },
+  light: {
+    button: { backgroundColor: '#F8F9FA' },
+    text: { color: '#212529', fontWeight: '600' },
+    imageTint: '#212529',
+    loaderColor: '#212529',
+  },
+  dark: {
+    button: { backgroundColor: '#212529' },
+    text: { color: '#FFFFFF', fontWeight: '600' },
+    imageTint: '#FFFFFF',
+    loaderColor: '#FFFFFF',
+  },
+  link: {
+    button: {
+      backgroundColor: 'transparent',
+      paddingHorizontal: 4,
+      paddingVertical: 4,
+    },
+    text: {
+      color: '#0D6EFD',
+      fontWeight: '600',
+      textDecorationLine: 'underline',
+    },
+    loaderColor: '#0D6EFD',
+  },
+  outline: {
+    button: {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderColor: '#0D6EFD',
+    },
+    text: { color: '#0D6EFD', fontWeight: '600' },
+    imageTint: '#0D6EFD',
+    loaderColor: '#0D6EFD',
+  },
+  ghost: {
+    button: {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderColor: '#DEE2E6',
+    },
+    text: { color: '#212529', fontWeight: '600' },
+    imageTint: '#212529',
+    loaderColor: '#212529',
+  },
+  text: {
+    button: {
+      backgroundColor: 'transparent',
+      paddingHorizontal: 4,
+      paddingVertical: 4,
+    },
+    text: { color: '#212529', fontWeight: '600' },
+    imageTint: '#212529',
+    loaderColor: '#212529',
+  },
+};
+
+export const contentAlignStyles: Record<
+  ButtonContentAlign,
+  { container: ViewStyle; text: TextStyle }
+> = {
+  left: {
+    container: {
+      alignSelf: 'stretch',
+      justifyContent: 'flex-start',
+    },
+    text: {
+      textAlign: 'left',
+    },
+  },
+  center: {
+    container: {
+      justifyContent: 'center',
+    },
+    text: {
+      textAlign: 'center',
+    },
+  },
+  right: {
+    container: {
+      alignSelf: 'stretch',
+      justifyContent: 'flex-end',
+    },
+    text: {
+      textAlign: 'right',
+    },
+  },
+};
+
+export const styles = StyleSheet.create({
+  button: baseButton,
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  iconOnlyContainer: {
+    gap: 0,
+  },
+  text: {},
+  leftImage: {
+    height: 20,
+    width: 25,
+    marginRight: 2,
+  },
+  rightImage: {
+    height: 20,
+    width: 20,
+    marginLeft: 2,
+  },
+  disabledButton: {
+    opacity: 0.55,
+  },
+  disabledText: {
+    opacity: 0.7,
+  },
+  countContainer: {
+    position: 'absolute',
+    top: -10,
+    right: -10,
+    height: 35,
+    width: 35,
+    borderRadius: 17.5,
+    backgroundColor: '#FFFFFF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 2,
+  },
+  countText: {
+    color: '#000000',
+    fontWeight: '600',
+  },
+});

package/src/components/customButton/types.ts

@@ -0,0 +1,71 @@
+import type { ComponentType, ReactNode } from 'react';
+import type {
+  ImageSourcePropType,
+  ImageStyle,
+  StyleProp,
+  TextStyle,
+  TouchableOpacityProps,
+  ViewStyle,
+} from 'react-native';
+
+export type ButtonVariant =
+  | 'default'
+  | 'primary'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'success'
+  | 'secondary'
+  | 'light'
+  | 'dark'
+  | 'link'
+  | 'outline'
+  | 'ghost'
+  | 'text';
+
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export type ButtonContentAlign = 'left' | 'center' | 'right';
+
+export type IconOnlyShape = 'square' | 'circle';
+
+export type IconComponent = ComponentType<{
+  size?: number;
+  color?: string;
+  [key: string]: unknown;
+}>;
+
+export type CustomButtonProps = Omit<TouchableOpacityProps, 'children'> & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  contentAlign?: ButtonContentAlign;
+  /** Square icon-only button — requires LeftIcon/RightIcon/leftImage/rightImage and accessibilityLabel */
+  iconOnly?: boolean;
+  iconOnlyShape?: IconOnlyShape;
+  text?: string;
+  children?: ReactNode;
+  rightImage?: ImageSourcePropType;
+  leftImage?: ImageSourcePropType;
+  buttonStyles?: StyleProp<ViewStyle>;
+  imageOuterStyle?: StyleProp<ViewStyle>;
+  textStyles?: StyleProp<TextStyle>;
+  opacity?: number;
+  onPress?: () => void;
+  imageStyles?: StyleProp<ImageStyle>;
+  rotateRight?: string;
+  rotateLeft?: string;
+  disabled?: boolean;
+  isLoading?: boolean;
+  itemCount?: number;
+  showCount?: boolean;
+  isCapital?: boolean;
+  borderRadius?: number;
+  RightIcon?: IconComponent;
+  LeftIcon?: IconComponent;
+  rightIconColor?: string;
+  leftIconColor?: string;
+  rightIconSize?: number;
+  leftIconSize?: number;
+  rightIconProps?: Record<string, unknown>;
+  leftIconProps?: Record<string, unknown>;
+};

package/src/components/customDropDown/DropDownBottomSheet.tsx

@@ -0,0 +1,70 @@
+import { Modal, Pressable, Text, View } from 'react-native';
+import type { ImageStyle, StyleProp, TextStyle } from 'react-native';
+
+import DropDownList from './DropDownList';
+import { dropdownStyles } from './styles';
+import type { DropDownItemImageAlign, DropDownListItem } from './types';
+
+type DropDownBottomSheetProps = {
+  data: DropDownListItem[];
+  visible: boolean;
+  title?: string;
+  selectedText?: string;
+  onClose: () => void;
+  onSelect: (item: string, index: number) => void;
+  maxListHeight?: number;
+  itemImageAlign?: DropDownItemImageAlign;
+  itemImageGap?: number;
+  itemTextStyle?: StyleProp<TextStyle>;
+  itemImageStyle?: StyleProp<ImageStyle>;
+};
+
+const DropDownBottomSheet = ({
+  data,
+  visible,
+  title,
+  selectedText,
+  onClose,
+  onSelect,
+  maxListHeight,
+  itemImageAlign,
+  itemImageGap,
+  itemTextStyle,
+  itemImageStyle,
+}: DropDownBottomSheetProps) => {
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      supportedOrientations={['landscape', 'portrait']}
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <View style={dropdownStyles.bottomSheetBackdrop}>
+        <Pressable style={dropdownStyles.backdropDismiss} onPress={onClose} />
+        <View style={dropdownStyles.bottomSheetContent}>
+          <View style={dropdownStyles.bottomSheetHandle} />
+          {!!title && (
+            <Text style={dropdownStyles.bottomSheetTitle}>{title}</Text>
+          )}
+          <DropDownList
+            data={data}
+            selectedText={selectedText}
+            maxHeight={maxListHeight}
+            itemImageAlign={itemImageAlign}
+            itemImageGap={itemImageGap}
+            itemTextStyle={itemTextStyle}
+            itemImageStyle={itemImageStyle}
+            containerStyle={dropdownStyles.bottomSheetList}
+            onSelect={(item, index) => {
+              onSelect(item, index);
+              onClose();
+            }}
+          />
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default DropDownBottomSheet;