rn-inputforge 0.3.1 → 0.5.0

package/src/components/FieldFlowCheckbox/FieldFlowCheckbox.tsx

@@ -0,0 +1,174 @@
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet, Text, View, ViewStyle, TextStyle } from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { renderFieldFlowIcon, type FieldFlowIconSource } from '../../icons';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+
+export interface FieldFlowCheckboxProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  required?: boolean;
+  /** Position of the label relative to the box. Default: 'right'. */
+  labelPosition?: 'left' | 'right';
+  /** Icon shown when checked. Default: 'check'. Pass a custom node to fully replace. */
+  checkedIcon?: FieldFlowIconSource;
+  /** Optional icon shown when unchecked. */
+  uncheckedIcon?: FieldFlowIconSource;
+  /** Icon beside the label (leading). */
+  leftIcon?: FieldFlowIconSource;
+  iconSize?: number;
+  /** Checked box / icon tint. Defaults to theme borderFocused. */
+  checkedColor?: string;
+  /** Unchecked border color. */
+  uncheckedColor?: string;
+  boxSize?: number;
+  boxStyle?: ViewStyle;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  helperStyle?: TextStyle;
+  errorStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+export function FieldFlowCheckbox({
+  value,
+  onChange,
+  label,
+  helperText,
+  errorText,
+  disabled,
+  required,
+  labelPosition = 'right',
+  checkedIcon = 'check',
+  uncheckedIcon,
+  leftIcon,
+  iconSize = 14,
+  checkedColor,
+  uncheckedColor,
+  boxSize = 22,
+  boxStyle,
+  containerStyle,
+  labelStyle,
+  helperStyle,
+  errorStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowCheckboxProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(
+    () => createStyles(theme, Boolean(errorText), Boolean(disabled), boxSize),
+    [theme, errorText, disabled, boxSize],
+  );
+  const checked = Boolean(value);
+  const activeColor = checkedColor ?? theme.colors.borderFocused;
+  const idleColor = uncheckedColor ?? (errorText ? theme.colors.borderError : theme.colors.border);
+
+  const box = (
+    <View
+      style={[
+        styles.box,
+        checked && { backgroundColor: activeColor, borderColor: activeColor },
+        !checked && { borderColor: idleColor },
+        disabled ? styles.boxDisabled : null,
+        boxStyle,
+      ]}
+    >
+      {checked
+        ? renderFieldFlowIcon(checkedIcon, '#FFFFFF', iconSize)
+        : uncheckedIcon
+          ? renderFieldFlowIcon(uncheckedIcon, idleColor, iconSize)
+          : null}
+    </View>
+  );
+
+  const labelNode = label ? (
+    <Text style={[styles.label, labelStyle]}>
+      {label}
+      {required ? ' *' : ''}
+    </Text>
+  ) : null;
+
+  return (
+    <View style={[styles.wrapper, containerStyle]} testID={testID}>
+      <Pressable
+        onPress={() => !disabled && onChange(!checked)}
+        disabled={disabled}
+        style={styles.row}
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked, disabled: Boolean(disabled) }}
+        accessibilityLabel={label}
+        hitSlop={6}
+      >
+        {leftIcon ? (
+          <View style={styles.leftIcon}>{renderFieldFlowIcon(leftIcon, theme.colors.icon, 18)}</View>
+        ) : null}
+        {labelPosition === 'left' ? labelNode : null}
+        {box}
+        {labelPosition === 'right' ? labelNode : null}
+      </Pressable>
+      {errorText ? (
+        <Text style={[styles.errorText, errorStyle, helperStyle]}>{errorText}</Text>
+      ) : helperText ? (
+        <Text style={[styles.helperText, helperStyle]}>{helperText}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme, _hasError: boolean, disabled: boolean, boxSize: number) {
+  return StyleSheet.create({
+    wrapper: {
+      marginBottom: theme.spacing.gap * 2,
+      opacity: disabled ? 0.6 : 1,
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.spacing.gap,
+    },
+    leftIcon: {
+      marginRight: 2,
+    },
+    box: {
+      width: boxSize,
+      height: boxSize,
+      borderRadius: 6,
+      borderWidth: theme.spacing.borderWidthFocused,
+      backgroundColor: theme.colors.background,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    boxDisabled: {
+      backgroundColor: theme.colors.backgroundDisabled,
+    },
+    label: {
+      flex: 1,
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+      fontWeight: '400',
+      fontFamily: theme.typography.fontFamily,
+    },
+    helperText: {
+      marginTop: theme.spacing.gap / 1.5,
+      marginLeft: boxSize + theme.spacing.gap,
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+    },
+    errorText: {
+      marginTop: theme.spacing.gap / 1.5,
+      marginLeft: boxSize + theme.spacing.gap,
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.error,
+    },
+  });
+}

package/src/components/FieldFlowCheckbox/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowCheckbox } from './FieldFlowCheckbox';
+export type { FieldFlowCheckboxProps } from './FieldFlowCheckbox';

package/src/components/FieldFlowCreditCard/FieldFlowCreditCard.tsx

@@ -0,0 +1,152 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View, type TextStyle, type ViewStyle } from 'react-native';
+import { FieldFlowMaskedInput } from '../FieldFlowMaskedInput';
+import { FieldFlowInput } from '../FieldFlowInput';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+
+export interface FieldFlowCreditCardValue {
+  number: string;
+  expiry: string;
+  cvc: string;
+  name?: string;
+}
+
+export interface FieldFlowCreditCardProps {
+  value: FieldFlowCreditCardValue;
+  onChange: (value: FieldFlowCreditCardValue) => void;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  /** Per-field errors. */
+  errors?: Partial<Record<keyof FieldFlowCreditCardValue, string>>;
+  disabled?: boolean;
+  required?: boolean;
+  showName?: boolean;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+function formatExpiry(raw: string): string {
+  const digits = raw.replace(/\D/g, '').slice(0, 4);
+  if (digits.length <= 2) return digits;
+  return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+}
+
+export function FieldFlowCreditCard({
+  value,
+  onChange,
+  label = 'Card details',
+  helperText,
+  errorText,
+  errors,
+  disabled,
+  required,
+  showName = false,
+  containerStyle,
+  labelStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowCreditCardProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const patch = (partial: Partial<FieldFlowCreditCardValue>) => onChange({ ...value, ...partial });
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID}>
+      {label ? (
+        <Text style={[styles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+
+      <FieldFlowMaskedInput
+        mask="card"
+        label="Card number"
+        leftIcon="creditCard"
+        value={value.number}
+        valueMode="raw"
+        onChangeText={(_formatted, raw) => patch({ number: raw })}
+        errorText={errors?.number}
+        disabled={disabled}
+        theme={themeOverride}
+      />
+
+      <View style={styles.row}>
+        <View style={styles.half}>
+          <FieldFlowInput
+            label="Expiry"
+            placeholder="MM/YY"
+            keyboardType="number-pad"
+            value={value.expiry}
+            onChangeText={text => patch({ expiry: formatExpiry(text) })}
+            maxLength={5}
+            errorText={errors?.expiry}
+            disabled={disabled}
+            leftIcon="calendar"
+            theme={themeOverride}
+          />
+        </View>
+        <View style={styles.half}>
+          <FieldFlowInput
+            label="CVC"
+            placeholder="123"
+            keyboardType="number-pad"
+            value={value.cvc}
+            onChangeText={text => patch({ cvc: text.replace(/\D/g, '').slice(0, 4) })}
+            maxLength={4}
+            errorText={errors?.cvc}
+            disabled={disabled}
+            leftIcon="lock"
+            secureTextEntry
+            theme={themeOverride}
+          />
+        </View>
+      </View>
+
+      {showName ? (
+        <FieldFlowInput
+          label="Name on card"
+          value={value.name ?? ''}
+          onChangeText={name => patch({ name })}
+          errorText={errors?.name}
+          disabled={disabled}
+          leftIcon="user"
+          autoCapitalize="words"
+          theme={themeOverride}
+        />
+      ) : null}
+
+      {errorText ? (
+        <Text style={styles.error}>{errorText}</Text>
+      ) : helperText ? (
+        <Text style={styles.helper}>{helperText}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme) {
+  return StyleSheet.create({
+    wrap: { marginBottom: theme.spacing.gap },
+    label: {
+      fontSize: theme.typography.fontSize + 1,
+      fontWeight: '600',
+      color: theme.colors.text,
+      marginBottom: theme.spacing.gap,
+    },
+    row: { flexDirection: 'row', gap: 12 },
+    half: { flex: 1 },
+    helper: { fontSize: theme.typography.helperFontSize, color: theme.colors.label, marginTop: -4 },
+    error: { fontSize: theme.typography.helperFontSize, color: theme.colors.error, marginTop: -4 },
+  });
+}

package/src/components/FieldFlowCreditCard/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowCreditCard } from './FieldFlowCreditCard';
+export type { FieldFlowCreditCardProps, FieldFlowCreditCardValue } from './FieldFlowCreditCard';