rn-custom-ui 1.0.0

package/src/components/customModal/types.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+import type {
+  ImageSourcePropType,
+  ModalProps,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+import type { ButtonVariant } from '../customButton/types';
+
+export type ModalPresentation = 'center' | 'bottom' | 'fullscreen';
+
+export type ModalAction = {
+  label: string;
+  onPress: () => void;
+  variant?: ButtonVariant;
+  disabled?: boolean;
+  isLoading?: boolean;
+};
+
+export type CustomModalProps = Pick<
+  ModalProps,
+  'supportedOrientations' | 'statusBarTranslucent' | 'testID'
+> & {
+  visible: boolean;
+  onClose: () => void;
+  title?: string;
+  description?: string;
+  children?: ReactNode;
+  presentation?: ModalPresentation;
+  showCloseButton?: boolean;
+  closeOnBackdropPress?: boolean;
+  animationType?: ModalProps['animationType'];
+  scrollable?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+  backdropStyle?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+  headerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  descriptionStyle?: StyleProp<TextStyle>;
+  bodyStyle?: StyleProp<ViewStyle>;
+  footerStyle?: StyleProp<ViewStyle>;
+  footer?: ReactNode;
+  primaryAction?: ModalAction;
+  secondaryAction?: ModalAction;
+  closeImage?: ImageSourcePropType;
+};

package/src/components/customModal/useCustomModal.ts

@@ -0,0 +1,25 @@
+import { useCallback, useState } from 'react';
+
+export const useCustomModal = (initialVisible = false) => {
+  const [visible, setVisible] = useState(initialVisible);
+
+  const open = useCallback(() => {
+    setVisible(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  const toggle = useCallback(() => {
+    setVisible((current) => !current);
+  }, []);
+
+  return {
+    visible,
+    setVisible,
+    open,
+    close,
+    toggle,
+  };
+};

package/src/components/customNumberPad/NumberPadKey.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import {
+  Pressable,
+  Text,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { styles } from './styles';
+import type { NumberPadKeyConfig } from './types';
+
+type NumberPadKeyProps = {
+  config: NumberPadKeyConfig;
+  onPress: () => void;
+  keyStyle?: StyleProp<ViewStyle>;
+  keyTextStyle?: StyleProp<TextStyle>;
+  theme: {
+    key: ViewStyle;
+    keyPressed: ViewStyle;
+    keyText: TextStyle;
+    keyTextMuted: TextStyle;
+    keyDisabled: ViewStyle;
+  };
+  sizeStyle: {
+    key: ViewStyle;
+    keyText: TextStyle;
+  };
+  disabled?: boolean;
+};
+
+const NumberPadKey = ({
+  config,
+  onPress,
+  keyStyle,
+  keyTextStyle,
+  theme,
+  sizeStyle,
+  disabled = false,
+}: NumberPadKeyProps) => {
+  const [pressed, setPressed] = useState(false);
+  const isDisabled = disabled || config.disabled;
+  const isMuted = config.type === 'backspace' || config.type === 'decimal';
+
+  return (
+    <Pressable
+      accessibilityRole="keyboardkey"
+      accessibilityLabel={
+        config.accessibilityLabel ??
+        (typeof config.label === 'string' ? config.label : config.id)
+      }
+      accessibilityState={{ disabled: isDisabled }}
+      disabled={isDisabled}
+      onPress={onPress}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={[
+        styles.key,
+        sizeStyle.key,
+        theme.key,
+        { flex: config.flex ?? 1 },
+        pressed && !isDisabled && theme.keyPressed,
+        isDisabled && theme.keyDisabled,
+        keyStyle,
+      ]}
+    >
+      <Text
+        style={[
+          styles.keyText,
+          sizeStyle.keyText,
+          isMuted ? theme.keyTextMuted : theme.keyText,
+          keyTextStyle,
+        ]}
+      >
+        {config.label}
+      </Text>
+    </Pressable>
+  );
+};
+
+export default NumberPadKey;

package/src/components/customNumberPad/index.tsx

@@ -0,0 +1,204 @@
+import { useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+
+import NumberPadKey from './NumberPadKey';
+import { sizeStyles, styles, variantTheme } from './styles';
+import type { CustomNumberPadProps, NumberPadKeyConfig } from './types';
+import { applyNumberPadKey, NUMBER_PAD_ROWS } from './utils';
+
+const CustomNumberPad = ({
+  onKeyPress,
+  onBackspace,
+  value,
+  onChange,
+  maxLength,
+  allowDecimal = false,
+  decimalPlaces,
+  variant = 'default',
+  size = 'md',
+  disabled = false,
+  containerStyle,
+  rowStyle,
+  keyStyle,
+  keyTextStyle,
+  backspaceLabel = '⌫',
+  bottomLeftKey,
+  renderKey,
+}: CustomNumberPadProps) => {
+  const theme = variantTheme[variant];
+  const sizing = sizeStyles[size];
+
+  const inputRules = useMemo(
+    () => ({ maxLength, allowDecimal, decimalPlaces }),
+    [allowDecimal, decimalPlaces, maxLength]
+  );
+
+  const handleKey = useCallback(
+    (key: string, customPress?: () => void) => {
+      if (disabled) {
+        return;
+      }
+
+      if (customPress) {
+        customPress();
+        return;
+      }
+
+      if (key === 'backspace') {
+        onBackspace?.();
+
+        if (onChange) {
+          onChange(
+            applyNumberPadKey(value ?? '', 'backspace', inputRules) ?? ''
+          );
+        }
+
+        onKeyPress?.('backspace');
+        return;
+      }
+
+      onKeyPress?.(key);
+
+      if (onChange) {
+        const next = applyNumberPadKey(value ?? '', key, inputRules);
+        if (next != null) {
+          onChange(next);
+        }
+      }
+    },
+    [disabled, inputRules, onBackspace, onChange, onKeyPress, value]
+  );
+
+  const digitRows: NumberPadKeyConfig[][] = useMemo(
+    () =>
+      NUMBER_PAD_ROWS.map((row) =>
+        row.map((digit) => ({
+          id: digit,
+          label: digit,
+          value: digit,
+          type: 'digit' as const,
+          accessibilityLabel: `Number ${digit}`,
+        }))
+      ),
+    []
+  );
+
+  const bottomRow = useMemo<NumberPadKeyConfig[]>(() => {
+    const keys: NumberPadKeyConfig[] = [];
+
+    if (bottomLeftKey) {
+      keys.push({
+        id: 'custom-bottom-left',
+        label: bottomLeftKey.label,
+        type: 'custom',
+        onPress: bottomLeftKey.onPress,
+        disabled: bottomLeftKey.disabled,
+        accessibilityLabel: bottomLeftKey.accessibilityLabel,
+      });
+    } else if (allowDecimal) {
+      keys.push({
+        id: 'decimal',
+        label: '.',
+        value: '.',
+        type: 'decimal',
+        accessibilityLabel: 'Decimal point',
+      });
+    } else {
+      keys.push({
+        id: 'spacer',
+        label: '',
+        type: 'custom',
+        flex: 1,
+      });
+    }
+
+    keys.push({
+      id: '0',
+      label: '0',
+      value: '0',
+      type: 'digit',
+      accessibilityLabel: 'Number 0',
+    });
+
+    keys.push({
+      id: 'backspace',
+      label: backspaceLabel,
+      value: 'backspace',
+      type: 'backspace',
+      accessibilityLabel: 'Backspace',
+    });
+
+    return keys;
+  }, [allowDecimal, backspaceLabel, bottomLeftKey]);
+
+  const rows = [...digitRows, bottomRow];
+
+  const renderPadKey = (config: NumberPadKeyConfig) => {
+    if (config.id === 'spacer') {
+      return <View key={config.id} style={styles.spacer} />;
+    }
+
+    const onPress = () => {
+      if (config.type === 'custom') {
+        handleKey('', config.onPress);
+        return;
+      }
+
+      handleKey(config.value ?? '');
+    };
+
+    if (renderKey) {
+      return (
+        <View key={config.id} style={{ flex: config.flex ?? 1 }}>
+          {renderKey(config, onPress)}
+        </View>
+      );
+    }
+
+    return (
+      <NumberPadKey
+        key={config.id}
+        config={config}
+        disabled={disabled}
+        keyStyle={keyStyle}
+        keyTextStyle={keyTextStyle}
+        onPress={onPress}
+        sizeStyle={sizing}
+        theme={theme}
+      />
+    );
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        theme.container,
+        { gap: sizing.gap },
+        containerStyle,
+      ]}
+    >
+      {rows.map((row, rowIndex) => (
+        <View
+          key={`row-${rowIndex}`}
+          style={[styles.row, { gap: sizing.gap }, rowStyle]}
+        >
+          {row.map(renderPadKey)}
+        </View>
+      ))}
+    </View>
+  );
+};
+
+export default CustomNumberPad;
+export { applyNumberPadKey, NUMBER_PAD_ROWS } from './utils';
+export { useNumberPadInput } from './useNumberPadInput';
+export type {
+  CustomNumberPadProps,
+  NumberPadBottomLeftKey,
+  NumberPadKeyConfig,
+  NumberPadKeyType,
+  NumberPadSize,
+  NumberPadVariant,
+  UseNumberPadInputOptions,
+} from './types';

package/src/components/customNumberPad/styles.ts

@@ -0,0 +1,146 @@
+import { StyleSheet, type TextStyle, type ViewStyle } from 'react-native';
+
+import type { NumberPadSize, NumberPadVariant } from './types';
+
+export const sizeStyles: Record<
+  NumberPadSize,
+  { key: ViewStyle; keyText: TextStyle; gap: number }
+> = {
+  sm: {
+    key: {
+      minHeight: 44,
+      borderRadius: 8,
+    },
+    keyText: {
+      fontSize: 20,
+    },
+    gap: 8,
+  },
+  md: {
+    key: {
+      minHeight: 52,
+      borderRadius: 10,
+    },
+    keyText: {
+      fontSize: 24,
+    },
+    gap: 10,
+  },
+  lg: {
+    key: {
+      minHeight: 60,
+      borderRadius: 12,
+    },
+    keyText: {
+      fontSize: 28,
+    },
+    gap: 12,
+  },
+};
+
+export const variantTheme: Record<
+  NumberPadVariant,
+  {
+    container: ViewStyle;
+    key: ViewStyle;
+    keyPressed: ViewStyle;
+    keyText: TextStyle;
+    keyTextMuted: TextStyle;
+    keyDisabled: ViewStyle;
+  }
+> = {
+  default: {
+    container: {
+      backgroundColor: '#F8F9FA',
+    },
+    key: {
+      backgroundColor: '#FFFFFF',
+      borderWidth: 1,
+      borderColor: '#E9ECEF',
+    },
+    keyPressed: {
+      backgroundColor: '#E9ECEF',
+    },
+    keyText: {
+      color: '#212529',
+      fontWeight: '600',
+    },
+    keyTextMuted: {
+      color: '#6C757D',
+      fontWeight: '600',
+    },
+    keyDisabled: {
+      opacity: 0.45,
+    },
+  },
+  primary: {
+    container: {
+      backgroundColor: '#E7F1FF',
+    },
+    key: {
+      backgroundColor: '#FFFFFF',
+      borderWidth: 1,
+      borderColor: '#B6D4FE',
+    },
+    keyPressed: {
+      backgroundColor: '#CFE2FF',
+    },
+    keyText: {
+      color: '#0D6EFD',
+      fontWeight: '700',
+    },
+    keyTextMuted: {
+      color: '#6EA8FE',
+      fontWeight: '700',
+    },
+    keyDisabled: {
+      opacity: 0.45,
+    },
+  },
+  dark: {
+    container: {
+      backgroundColor: '#212529',
+    },
+    key: {
+      backgroundColor: '#343A40',
+      borderWidth: 1,
+      borderColor: '#495057',
+    },
+    keyPressed: {
+      backgroundColor: '#495057',
+    },
+    keyText: {
+      color: '#F8F9FA',
+      fontWeight: '600',
+    },
+    keyTextMuted: {
+      color: '#ADB5BD',
+      fontWeight: '600',
+    },
+    keyDisabled: {
+      opacity: 0.45,
+    },
+  },
+};
+
+export const styles = StyleSheet.create({
+  container: {
+    padding: 12,
+    borderRadius: 16,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+  },
+  key: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  keyText: {
+    textAlign: 'center',
+  },
+  spacer: {
+    flex: 1,
+  },
+});

package/src/components/customNumberPad/types.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export type NumberPadVariant = 'default' | 'primary' | 'dark';
+
+export type NumberPadSize = 'sm' | 'md' | 'lg';
+
+export type NumberPadKeyType = 'digit' | 'decimal' | 'backspace' | 'custom';
+
+export type NumberPadKeyConfig = {
+  id: string;
+  label: ReactNode;
+  value?: string;
+  type: NumberPadKeyType;
+  flex?: number;
+  onPress?: () => void;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+};
+
+export type NumberPadBottomLeftKey = {
+  label: ReactNode;
+  onPress: () => void;
+  accessibilityLabel?: string;
+  disabled?: boolean;
+};
+
+export type CustomNumberPadProps = {
+  onKeyPress?: (key: string) => void;
+  onBackspace?: () => void;
+  value?: string;
+  onChange?: (value: string) => void;
+  maxLength?: number;
+  allowDecimal?: boolean;
+  decimalPlaces?: number;
+  variant?: NumberPadVariant;
+  size?: NumberPadSize;
+  disabled?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+  rowStyle?: StyleProp<ViewStyle>;
+  keyStyle?: StyleProp<ViewStyle>;
+  keyTextStyle?: StyleProp<TextStyle>;
+  backspaceLabel?: ReactNode;
+  bottomLeftKey?: NumberPadBottomLeftKey;
+  renderKey?: (key: NumberPadKeyConfig, onPress: () => void) => ReactNode;
+};
+
+export type UseNumberPadInputOptions = {
+  initialValue?: string;
+  maxLength?: number;
+  allowDecimal?: boolean;
+  decimalPlaces?: number;
+};

package/src/components/customNumberPad/useNumberPadInput.ts

@@ -0,0 +1,56 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { applyNumberPadKey } from './utils';
+import type { UseNumberPadInputOptions } from './types';
+
+export const useNumberPadInput = ({
+  initialValue = '',
+  maxLength,
+  allowDecimal = false,
+  decimalPlaces,
+}: UseNumberPadInputOptions = {}) => {
+  const [value, setValue] = useState(initialValue);
+
+  const handleChange = useCallback((nextValue: string) => {
+    setValue(nextValue);
+  }, []);
+
+  const handleKeyPress = useCallback(
+    (key: string) => {
+      setValue((current) => {
+        const next = applyNumberPadKey(current, key, {
+          maxLength,
+          allowDecimal,
+          decimalPlaces,
+        });
+
+        return next ?? current;
+      });
+    },
+    [allowDecimal, decimalPlaces, maxLength]
+  );
+
+  const clear = useCallback(() => {
+    setValue('');
+  }, []);
+
+  const numberPadProps = useMemo(
+    () => ({
+      value,
+      onChange: handleChange,
+      maxLength,
+      allowDecimal,
+      decimalPlaces,
+    }),
+    [allowDecimal, decimalPlaces, handleChange, maxLength, value]
+  );
+
+  return {
+    value,
+    setValue,
+    clear,
+    handleChange,
+    handleKeyPress,
+    numberPadProps,
+  };
+};

package/src/components/customNumberPad/utils.ts

@@ -0,0 +1,54 @@
+import type { UseNumberPadInputOptions } from './types';
+
+export const NUMBER_PAD_ROWS = [
+  ['1', '2', '3'],
+  ['4', '5', '6'],
+  ['7', '8', '9'],
+] as const;
+
+export const applyNumberPadKey = (
+  value: string,
+  key: string,
+  options: Pick<
+    UseNumberPadInputOptions,
+    'maxLength' | 'allowDecimal' | 'decimalPlaces'
+  > = {}
+): string | null => {
+  const { maxLength, allowDecimal = false, decimalPlaces } = options;
+
+  if (key === 'backspace') {
+    return value.slice(0, -1);
+  }
+
+  if (key === '.') {
+    if (!allowDecimal || value.includes('.')) {
+      return null;
+    }
+
+    const next = value ? `${value}.` : '0.';
+    return maxLength && next.length > maxLength ? null : next;
+  }
+
+  if (!/^\d$/.test(key)) {
+    return null;
+  }
+
+  const next = `${value}${key}`;
+
+  if (maxLength && next.length > maxLength) {
+    return null;
+  }
+
+  if (allowDecimal && decimalPlaces != null && value.includes('.')) {
+    const [, decimalPart = ''] = value.split('.');
+    if (decimalPart.length >= decimalPlaces) {
+      return null;
+    }
+  }
+
+  if (value === '0' && key !== '.') {
+    return key;
+  }
+
+  return next;
+};