feat : Différents inputs

src/components/form/FormField.tsx

@@ -0,0 +1,110 @@
+import type { ReactNode } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { fontFamily, typography } from '@/theme/typography';
+
+export type FieldCounter = {
+  value: number;
+  max: number;
+};
+
+export type FormFieldProps = {
+  label?: string;
+  required?: boolean;
+  helper?: string;
+  error?: string;
+  counter?: FieldCounter;
+  children: ReactNode;
+};
+
+const FormField = ({
+  label,
+  required = false,
+  helper,
+  error,
+  counter,
+  children,
+}: FormFieldProps) => {
+  const message = error ?? helper;
+  const isCounterOverflow =
+    typeof counter?.value === 'number' && typeof counter?.max === 'number'
+      ? counter.value > counter.max
+      : false;
+
+  return (
+    <View style={styles.container}>
+      {label ? (
+        <Text style={styles.label}>
+          {label}
+          {required ? <Text style={styles.required}> *</Text> : null}
+        </Text>
+      ) : null}
+
+      {children}
+
+      {message || counter ? (
+        <View style={styles.bottomRow}>
+          {message ? (
+            <Text
+              style={[styles.message, error ? styles.errorMessage : null]}
+              accessibilityLiveRegion={error ? 'polite' : undefined}
+            >
+              {message}
+            </Text>
+          ) : (
+            <View style={styles.messageSpacer} />
+          )}
+
+          {counter ? (
+            <Text
+              style={[styles.counter, isCounterOverflow ? styles.counterError : null]}
+            >
+              {counter.value} / {counter.max}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 8,
+  },
+  label: {
+    ...typography.inputLabel,
+    color: colors.textBody,
+  },
+  required: {
+    color: colors.primary,
+  },
+  bottomRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: 8,
+  },
+  message: {
+    ...typography.helper,
+    color: colors.textSecondary,
+    flex: 1,
+  },
+  errorMessage: {
+    color: colors.danger,
+  },
+  messageSpacer: {
+    flex: 1,
+  },
+  counter: {
+    ...typography.metadataSm,
+    color: colors.textSecondary,
+    fontFamily: fontFamily.mono,
+  },
+  counterError: {
+    color: colors.danger,
+  },
+});
+
+export default FormField;

src/components/form/Input.tsx

@@ -0,0 +1,143 @@
+import type { ReactNode } from 'react';
+import {
+    forwardRef,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react';
+import {
+    Pressable,
+    StyleSheet,
+    TextInput,
+    View,
+    type StyleProp,
+    type TextInputProps,
+    type ViewStyle,
+} from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { typography } from '@/theme/typography';
+
+export type InputSize = 'md' | 'lg';
+export type InputState = 'default' | 'error' | 'success';
+
+export type InputProps = Omit<TextInputProps, 'style'> & {
+  size?: InputSize;
+  state?: InputState;
+  left?: ReactNode;
+  right?: ReactNode;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+const HEIGHT_BY_SIZE: Record<InputSize, number> = {
+  md: 48,
+  lg: 56,
+};
+
+const Input = forwardRef<TextInput, InputProps>(function Input(
+  {
+    size = 'md',
+    state = 'default',
+    left,
+    right,
+    containerStyle,
+    editable = true,
+    onFocus,
+    onBlur,
+    placeholderTextColor = colors.inputPlaceholder,
+    ...textInputProps
+  },
+  ref,
+) {
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  useImperativeHandle(ref, () => inputRef.current as TextInput);
+
+  const handleFocus: NonNullable<TextInputProps['onFocus']> = (event) => {
+    setIsFocused(true);
+    onFocus?.(event);
+  };
+
+  const handleBlur: NonNullable<TextInputProps['onBlur']> = (event) => {
+    setIsFocused(false);
+    onBlur?.(event);
+  };
+
+  const borderColor =
+    state === 'error'
+      ? colors.danger
+      : isFocused
+        ? colors.inputBorderFocus
+        : state === 'success'
+          ? colors.success
+          : colors.inputBorder;
+
+  return (
+    <Pressable
+      onPress={() => {
+        if (editable) {
+          inputRef.current?.focus();
+        }
+      }}
+      style={[
+        styles.container,
+        {
+          height: HEIGHT_BY_SIZE[size],
+          borderColor,
+          backgroundColor: editable ? colors.inputBackground : colors.surface,
+          opacity: editable ? 1 : 0.5,
+        },
+        isFocused && state !== 'error' ? styles.focusRing : null,
+        containerStyle,
+      ]}
+    >
+      {left ? <View style={styles.slot}>{left}</View> : null}
+      <TextInput
+        ref={inputRef}
+        {...textInputProps}
+        editable={editable}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        placeholderTextColor={placeholderTextColor}
+        style={styles.input}
+      />
+      {right ? <View style={styles.slot}>{right}</View> : null}
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 14,
+    paddingHorizontal: 14,
+    gap: 10,
+  },
+  input: {
+    ...typography.input,
+    flex: 1,
+    alignSelf: 'stretch',
+    height: '100%',
+    color: colors.textPrimary,
+    paddingVertical: 0,
+  },
+  slot: {
+    minWidth: 20,
+    minHeight: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+  },
+  focusRing: {
+    shadowColor: colors.focusRing,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 1,
+    shadowRadius: 10,
+    elevation: 2,
+  },
+});
+
+export default Input;

src/components/form/PasswordInput.tsx

@@ -0,0 +1,117 @@
+import { Eye, EyeOff } from 'lucide-react-native';
+import { forwardRef, useState } from 'react';
+import {
+    Pressable,
+    StyleSheet,
+    TextInput,
+    View,
+    type StyleProp,
+    type ViewStyle,
+} from 'react-native';
+
+import { colors } from '@/theme/colors';
+
+import Input, { type InputProps } from './Input';
+
+export type PasswordStrength = 0 | 1 | 2 | 3;
+
+export type PasswordInputProps = Omit<InputProps, 'right' | 'secureTextEntry'> & {
+  strength?: PasswordStrength;
+  strengthContainerStyle?: StyleProp<ViewStyle>;
+};
+
+const SEGMENT_COUNT = 3;
+
+function getStrengthColor(strength: PasswordStrength): string {
+  if (strength <= 1) {
+    return colors.danger;
+  }
+
+  if (strength === 2) {
+    return colors.warning;
+  }
+
+  return colors.success;
+}
+
+const PasswordInput = forwardRef<TextInput, PasswordInputProps>(
+  function PasswordInput({ strength, strengthContainerStyle, ...props }, ref) {
+    const [revealed, setRevealed] = useState(false);
+    const strengthColor =
+      typeof strength === 'number' ? getStrengthColor(strength) : colors.divider;
+
+    return (
+      <View style={styles.wrapper}>
+        <Input
+          ref={ref}
+          secureTextEntry={!revealed}
+          autoCapitalize="none"
+          autoCorrect={false}
+          textContentType="password"
+          autoComplete="current-password"
+          right={
+            <Pressable
+              onPress={() => setRevealed((prev) => !prev)}
+              style={styles.toggleButton}
+              hitSlop={8}
+              accessibilityRole="button"
+              accessibilityLabel={
+                revealed
+                  ? 'Masquer le mot de passe'
+                  : 'Afficher le mot de passe'
+              }
+            >
+              {revealed ? (
+                <EyeOff color={colors.textSecondary} size={20} />
+              ) : (
+                <Eye color={colors.textSecondary} size={20} />
+              )}
+            </Pressable>
+          }
+          {...props}
+        />
+
+        {typeof strength === 'number' ? (
+          <View style={[styles.strengthRow, strengthContainerStyle]}>
+            {Array.from({ length: SEGMENT_COUNT }).map((_, index) => (
+              <View
+                // eslint-disable-next-line react/no-array-index-key
+                key={index}
+                style={[
+                  styles.strengthSegment,
+                  {
+                    backgroundColor:
+                      index < strength ? strengthColor : colors.divider,
+                  },
+                ]}
+              />
+            ))}
+          </View>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    gap: 8,
+  },
+  toggleButton: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  strengthRow: {
+    flexDirection: 'row',
+    gap: 4,
+  },
+  strengthSegment: {
+    flex: 1,
+    height: 3,
+    borderRadius: 999,
+  },
+});
+
+export default PasswordInput;

src/components/form/SearchInput.tsx

@@ -0,0 +1,84 @@
+import { Search, X } from 'lucide-react-native';
+import {
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    type ReactNode,
+} from 'react';
+import { Pressable, StyleSheet, TextInput } from 'react-native';
+
+import { colors } from '@/theme/colors';
+
+import Input, { type InputProps } from './Input';
+
+export type SearchInputProps = Omit<InputProps, 'left' | 'right'> & {
+  onDebouncedChange?: (value: string) => void;
+  debounceMs?: number;
+};
+
+const SearchInput = forwardRef<TextInput, SearchInputProps>(function SearchInput(
+  { onDebouncedChange, debounceMs = 300, value, onChangeText, ...props },
+  ref,
+) {
+  const inputRef = useRef<TextInput>(null);
+  const valueAsString = typeof value === 'string' ? value : '';
+
+  useImperativeHandle(ref, () => inputRef.current as TextInput);
+
+  useEffect(() => {
+    if (!onDebouncedChange) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      onDebouncedChange(valueAsString);
+    }, debounceMs);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [debounceMs, onDebouncedChange, valueAsString]);
+
+  const clearButton: ReactNode =
+    valueAsString.length > 0 ? (
+      <Pressable
+        onPress={() => {
+          onChangeText?.('');
+          inputRef.current?.clear();
+          inputRef.current?.focus();
+        }}
+        style={styles.clearButton}
+        hitSlop={8}
+        accessibilityRole="button"
+        accessibilityLabel="Vider la recherche"
+      >
+        <X color={colors.textSecondary} size={20} />
+      </Pressable>
+    ) : null;
+
+  return (
+    <Input
+      ref={inputRef}
+      value={value}
+      onChangeText={onChangeText}
+      left={<Search color={colors.textSecondary} size={20} />}
+      right={clearButton}
+      returnKeyType="search"
+      autoCorrect={false}
+      clearButtonMode="never"
+      {...props}
+    />
+  );
+});
+
+const styles = StyleSheet.create({
+  clearButton: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default SearchInput;

src/components/form/TextArea.tsx

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+import { TextInput, type StyleProp, type ViewStyle } from 'react-native';
+
+import { typography } from '@/theme/typography';
+
+import Input, { type InputProps } from './Input';
+
+export type TextAreaProps = Omit<
+  InputProps,
+  'multiline' | 'textAlignVertical' | 'containerStyle'
+> & {
+  rows?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+const TextArea = forwardRef<TextInput, TextAreaProps>(function TextArea(
+  { rows = 4, containerStyle, ...props },
+  ref,
+) {
+  const lineHeight =
+    typeof typography.input.lineHeight === 'number'
+      ? typography.input.lineHeight
+      : 22;
+  const minHeight = rows * lineHeight + 24;
+
+  return (
+    <Input
+      ref={ref}
+      multiline
+      textAlignVertical="top"
+      containerStyle={[
+        {
+          minHeight,
+          alignItems: 'flex-start',
+          paddingVertical: 12,
+        },
+        containerStyle,
+      ]}
+      {...props}
+    />
+  );
+});
+
+export default TextArea;

src/components/form/index.ts

@@ -0,0 +1,12 @@
+export { default as FormField } from './FormField';
+export { default as Input } from './Input';
+export { default as PasswordInput } from './PasswordInput';
+export { default as SearchInput } from './SearchInput';
+export { default as TextArea } from './TextArea';
+
+export type { FieldCounter, FormFieldProps } from './FormField';
+export type { InputProps, InputSize, InputState } from './Input';
+export type { PasswordInputProps, PasswordStrength } from './PasswordInput';
+export type { SearchInputProps } from './SearchInput';
+export type { TextAreaProps } from './TextArea';
+