feat : Différents inputs
This commit is contained in:
Yaël Perret
@@ -1,14 +1,26 @@
|
|||||||
|
import { useRouter } from 'expo-router';
|
||||||
import { StyleSheet, Text, View } from 'react-native';
|
import { StyleSheet, Text, View } from 'react-native';
|
||||||
|
|
||||||
|
import { Button } from '@/components/Button';
|
||||||
import { colors } from '@/theme/colors';
|
import { colors } from '@/theme/colors';
|
||||||
import { spacing } from '@/theme/spacing';
|
import { spacing } from '@/theme/spacing';
|
||||||
import { typography } from '@/theme/typography';
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
export default function HomeTabScreen() {
|
export default function HomeTabScreen() {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Text style={styles.title}>Accueil</Text>
|
<Text style={styles.title}>Accueil</Text>
|
||||||
<Text style={styles.description}>Base ecran accueil tab</Text>
|
<Text style={styles.description}>Base ecran accueil tab</Text>
|
||||||
|
<View style={styles.actions}>
|
||||||
|
<Button
|
||||||
|
label="Voir la démo des inputs"
|
||||||
|
variant="secondary"
|
||||||
|
onPress={() => router.push('/index-old')}
|
||||||
|
accessibilityLabel="Ouvrir la page d'exemple des champs"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -29,4 +41,7 @@ const styles = StyleSheet.create({
|
|||||||
...typography.body,
|
...typography.body,
|
||||||
color: colors.textSecondary,
|
color: colors.textSecondary,
|
||||||
},
|
},
|
||||||
|
actions: {
|
||||||
|
marginTop: spacing[16],
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,226 +1,144 @@
|
|||||||
import { ArrowUp, ArrowUpRight, Plus } from 'lucide-react-native';
|
import { Mail } from 'lucide-react-native';
|
||||||
import { useCallback, useMemo, useState } from 'react';
|
import { useMemo, useState } from 'react';
|
||||||
import { ScrollView, StyleSheet, Text, View } from 'react-native';
|
import { StyleSheet, Text, View } from 'react-native';
|
||||||
|
|
||||||
import { Badge } from '@/components/Badge';
|
import { FormField, Input, PasswordInput, SearchInput, TextArea } from '@/components/form';
|
||||||
import { Button } from '@/components/Button';
|
import { Screen } from '@/components/ui/Screen';
|
||||||
import { ParticipationSegment } from '@/components/ParticipationSegment';
|
|
||||||
import { ThemeChip } from '@/components/ThemeChip';
|
|
||||||
import { colors } from '@/theme/colors';
|
import { colors } from '@/theme/colors';
|
||||||
import { spacing } from '@/theme/spacing';
|
import { spacing } from '@/theme/spacing';
|
||||||
import { typography } from '@/theme/typography';
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
export default function Index() {
|
function computePasswordStrength(value: string): 0 | 1 | 2 | 3 {
|
||||||
const [selectedThemes, setSelectedThemes] = useState<string[]>(['Soirée', 'Techno', 'Festival']);
|
if (!value) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
const themeOptions = useMemo(
|
const hasLower = /[a-z]/.test(value);
|
||||||
() => ['Soirée', 'Techno', 'Festival', 'Fête de jeunesse', 'Concert', 'Bal', 'Afterwork', 'Gratuit'],
|
const hasUpper = /[A-Z]/.test(value);
|
||||||
[],
|
const hasNumber = /\d/.test(value);
|
||||||
);
|
const hasSpecial = /[^A-Za-z0-9]/.test(value);
|
||||||
|
|
||||||
const simulateSubmit = useCallback(async () => {
|
const criteria = [hasLower, hasUpper, hasNumber, hasSpecial].filter(Boolean)
|
||||||
await new Promise<void>((resolve) => {
|
.length;
|
||||||
setTimeout(resolve, 1300);
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleThemeSelect = useCallback((value: string, nextSelected: boolean) => {
|
if (value.length < 6 || criteria <= 1) {
|
||||||
setSelectedThemes((prev) => {
|
return 1;
|
||||||
if (nextSelected) {
|
}
|
||||||
if (prev.includes(value)) {
|
|
||||||
return prev;
|
|
||||||
}
|
|
||||||
|
|
||||||
return [...prev, value];
|
if (value.length >= 10 && criteria >= 3) {
|
||||||
}
|
return 3;
|
||||||
|
}
|
||||||
|
|
||||||
return prev.filter((theme) => theme !== value);
|
return 2;
|
||||||
});
|
}
|
||||||
}, []);
|
|
||||||
|
export default function InputExamplesScreen() {
|
||||||
|
const [email, setEmail] = useState('lea.mercier@example.ch');
|
||||||
|
const [password, setPassword] = useState('');
|
||||||
|
const [search, setSearch] = useState('néon');
|
||||||
|
const [debouncedSearch, setDebouncedSearch] = useState('néon');
|
||||||
|
const [description, setDescription] = useState('');
|
||||||
|
|
||||||
|
const emailError = useMemo(() => {
|
||||||
|
if (email.length === 0) {
|
||||||
|
return 'Adresse e-mail requise';
|
||||||
|
}
|
||||||
|
|
||||||
|
const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||||
|
return isValid ? undefined : 'Adresse e-mail invalide';
|
||||||
|
}, [email]);
|
||||||
|
|
||||||
|
const passwordStrength = useMemo(() => computePasswordStrength(password), [password]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={[styles.screen, { backgroundColor: colors.deepBackground }]}>
|
<Screen contentContainerStyle={styles.content}>
|
||||||
<ScrollView
|
<View style={styles.header}>
|
||||||
contentContainerStyle={[
|
<Text style={styles.kicker}>DESIGN SYSTEM · FORM INPUTS</Text>
|
||||||
styles.content,
|
<Text style={styles.title}>Page d'exemple des champs</Text>
|
||||||
{
|
</View>
|
||||||
padding: spacing[24],
|
|
||||||
gap: spacing[24],
|
<FormField
|
||||||
},
|
label="E-mail"
|
||||||
]}
|
required
|
||||||
showsVerticalScrollIndicator={false}
|
error={emailError}
|
||||||
|
counter={{ value: email.length, max: 120 }}
|
||||||
>
|
>
|
||||||
<View style={{ gap: spacing[8] }}>
|
<Input
|
||||||
<Text
|
accessibilityLabel="E-mail"
|
||||||
style={[
|
value={email}
|
||||||
typography.sectionLabel,
|
onChangeText={setEmail}
|
||||||
{
|
keyboardType="email-address"
|
||||||
color: colors.textSecondary,
|
autoCapitalize="none"
|
||||||
letterSpacing: 1.1,
|
autoCorrect={false}
|
||||||
},
|
state={emailError ? 'error' : 'default'}
|
||||||
]}
|
placeholder="lea.mercier@example.ch"
|
||||||
>
|
left={<Mail color={colors.textSecondary} size={20} />}
|
||||||
BOUTONS · HAUTEUR 52 PX · RAYON 14 PX
|
/>
|
||||||
</Text>
|
</FormField>
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={styles.row}>
|
<FormField label="Mot de passe" helper="6 caractères minimum">
|
||||||
<View style={styles.cell}>
|
<PasswordInput
|
||||||
<Button label="Publier" variant="primary" />
|
accessibilityLabel="Mot de passe"
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Primaire</Text>
|
value={password}
|
||||||
</View>
|
onChangeText={setPassword}
|
||||||
<View style={styles.cell}>
|
placeholder="••••••••"
|
||||||
<Button label="Publier" variant="primary" />
|
strength={passwordStrength}
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Pressé (tap)</Text>
|
/>
|
||||||
</View>
|
</FormField>
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={styles.row}>
|
<FormField label="Recherche" helper={`Terme debouncé: ${debouncedSearch || '—'}`}>
|
||||||
<View style={styles.cell}>
|
<SearchInput
|
||||||
<Button label="Intéressé" variant="secondary" rightIcon={ArrowUpRight} />
|
accessibilityLabel="Recherche"
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Secondaire</Text>
|
value={search}
|
||||||
</View>
|
onChangeText={setSearch}
|
||||||
<View style={styles.cell}>
|
onDebouncedChange={setDebouncedSearch}
|
||||||
<Button label="Publier" variant="primary" disabled />
|
debounceMs={300}
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Désactivé</Text>
|
placeholder="techno la chaux"
|
||||||
</View>
|
/>
|
||||||
</View>
|
</FormField>
|
||||||
|
|
||||||
<View style={styles.row}>
|
<FormField
|
||||||
<View style={styles.cell}>
|
label="Description d'événement"
|
||||||
<Button label="Tout voir" variant="ghost" fullWidth={false} style={styles.autoWidthButton} />
|
helper="Ajoute le contexte, l'entrée et les horaires"
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Texte</Text>
|
counter={{ value: description.length, max: 280 }}
|
||||||
</View>
|
>
|
||||||
<View style={styles.cell}>
|
<TextArea
|
||||||
<Button label="Envoyer" variant="primary" autoLoading loadingLabel="Envoi..." onPress={simulateSubmit} />
|
accessibilityLabel="Description d'événement"
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Chargement</Text>
|
value={description}
|
||||||
</View>
|
onChangeText={setDescription}
|
||||||
</View>
|
rows={4}
|
||||||
|
maxLength={280}
|
||||||
|
placeholder="Il reste 40 places en prévente pour ce soir..."
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
<View style={styles.row}>
|
<FormField label="Champ désactivé" helper="Exemple d'état non éditable">
|
||||||
<View style={styles.cell}>
|
<Input
|
||||||
<Button label="Supprimer" variant="destructive" />
|
accessibilityLabel="Champ désactivé"
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Destructif</Text>
|
editable={false}
|
||||||
</View>
|
value="Néon session"
|
||||||
<View style={styles.cell}>
|
onChangeText={() => undefined}
|
||||||
<View style={styles.iconRow}>
|
/>
|
||||||
<Button
|
</FormField>
|
||||||
iconOnly
|
</Screen>
|
||||||
variant="secondary"
|
|
||||||
fullWidth={false}
|
|
||||||
icon={ArrowUp}
|
|
||||||
iconOnlyShape="default"
|
|
||||||
accessibilityLabel="Partager"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
iconOnly
|
|
||||||
variant="primary"
|
|
||||||
fullWidth={false}
|
|
||||||
icon={Plus}
|
|
||||||
iconOnlyShape="round"
|
|
||||||
accessibilityLabel="Ajouter"
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
<Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Icône / FAB</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={{ gap: spacing[12] }}>
|
|
||||||
<Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>PARTICIPATION</Text>
|
|
||||||
<View style={{ gap: spacing[12] }}>
|
|
||||||
<ParticipationSegment defaultValue={{ going: false, interested: false }} />
|
|
||||||
<ParticipationSegment defaultValue={{ going: true, interested: true }} />
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={{ gap: spacing[12] }}>
|
|
||||||
<Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>BADGES</Text>
|
|
||||||
<View style={styles.badgeWrap}>
|
|
||||||
<Badge variant="verified" />
|
|
||||||
<Badge variant="free" />
|
|
||||||
<Badge variant="complete" />
|
|
||||||
<Badge variant="tonight" />
|
|
||||||
<Badge variant="pro" />
|
|
||||||
<Badge variant="draft" />
|
|
||||||
<Badge date={{ day: '04', month: 'sept' }} />
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={{ gap: spacing[12] }}>
|
|
||||||
<Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>CHIPS DE THÈME · CAPSULE 34 PX</Text>
|
|
||||||
<View style={styles.chipWrap}>
|
|
||||||
<ThemeChip label="Soirée" selected selectedVariant="gradient" showCross={false} />
|
|
||||||
<ThemeChip label="Festival" selected selectedVariant="accent" />
|
|
||||||
<ThemeChip label="Fête de jeunesse" />
|
|
||||||
<ThemeChip label="Concert" />
|
|
||||||
<ThemeChip label="Bal" />
|
|
||||||
<ThemeChip label="Techno" />
|
|
||||||
<ThemeChip label="Afterwork" />
|
|
||||||
<ThemeChip label="Gratuit" selected selectedVariant="accent" showRemoveIcon={false} />
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={{ gap: spacing[12] }}>
|
|
||||||
<Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>THÈMES · MULTI-SÉLECTION</Text>
|
|
||||||
<View style={styles.chipWrap}>
|
|
||||||
{themeOptions.map((theme) => {
|
|
||||||
const selected = selectedThemes.includes(theme);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ThemeChip
|
|
||||||
key={theme}
|
|
||||||
label={theme}
|
|
||||||
value={theme}
|
|
||||||
selected={selected}
|
|
||||||
selectedVariant={theme === 'Soirée' ? 'gradient' : 'accent'}
|
|
||||||
onSelect={handleThemeSelect}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</ScrollView>
|
|
||||||
</View>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
screen: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
content: {
|
content: {
|
||||||
paddingBottom: 40,
|
gap: spacing[16],
|
||||||
|
paddingTop: spacing[24],
|
||||||
},
|
},
|
||||||
row: {
|
header: {
|
||||||
flexDirection: 'row',
|
gap: spacing[8],
|
||||||
gap: 14,
|
marginBottom: spacing[8],
|
||||||
},
|
},
|
||||||
cell: {
|
kicker: {
|
||||||
flex: 1,
|
...typography.sectionLabel,
|
||||||
gap: 10,
|
color: colors.textSecondary,
|
||||||
},
|
},
|
||||||
caption: {
|
title: {
|
||||||
textAlign: 'center',
|
...typography.body,
|
||||||
},
|
color: colors.textPrimary,
|
||||||
iconRow: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'center',
|
|
||||||
gap: 12,
|
|
||||||
},
|
|
||||||
autoWidthButton: {
|
|
||||||
alignSelf: 'center',
|
|
||||||
width: 140,
|
|
||||||
},
|
|
||||||
badgeWrap: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
gap: 12,
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
chipWrap: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
gap: 10,
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
110
src/components/form/FormField.tsx
Normal file
110
src/components/form/FormField.tsx
Normal file
@@ -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;
|
||||||
143
src/components/form/Input.tsx
Normal file
143
src/components/form/Input.tsx
Normal file
@@ -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;
|
||||||
117
src/components/form/PasswordInput.tsx
Normal file
117
src/components/form/PasswordInput.tsx
Normal file
@@ -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;
|
||||||
84
src/components/form/SearchInput.tsx
Normal file
84
src/components/form/SearchInput.tsx
Normal file
@@ -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;
|
||||||
44
src/components/form/TextArea.tsx
Normal file
44
src/components/form/TextArea.tsx
Normal file
@@ -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;
|
||||||
12
src/components/form/index.ts
Normal file
12
src/components/form/index.ts
Normal file
@@ -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';
|
||||||
|
|
||||||
@@ -46,6 +46,11 @@ export const colors = {
|
|||||||
canvas: palette.ink950,
|
canvas: palette.ink950,
|
||||||
surface: palette.ink800,
|
surface: palette.ink800,
|
||||||
surfaceElevated: palette.ink700,
|
surfaceElevated: palette.ink700,
|
||||||
|
inputBackground: palette.ink700,
|
||||||
|
inputBorder: palette.ink600,
|
||||||
|
inputBorderFocus: palette.violet,
|
||||||
|
inputPlaceholder: palette.grey400,
|
||||||
|
focusRing: 'rgba(123,61,255,0.22)',
|
||||||
border: palette.ink600,
|
border: palette.ink600,
|
||||||
/** Séparateur intra-carte, plus léger que `border` */
|
/** Séparateur intra-carte, plus léger que `border` */
|
||||||
divider: 'rgba(255,255,255,0.12)',
|
divider: 'rgba(255,255,255,0.12)',
|
||||||
|
|||||||
@@ -100,6 +100,24 @@ export const typography = {
|
|||||||
lineHeight: 22,
|
lineHeight: 22,
|
||||||
letterSpacing: 0,
|
letterSpacing: 0,
|
||||||
},
|
},
|
||||||
|
input: {
|
||||||
|
fontFamily: fontFamily.body,
|
||||||
|
fontSize: 16,
|
||||||
|
lineHeight: 22,
|
||||||
|
letterSpacing: 0,
|
||||||
|
},
|
||||||
|
inputLabel: {
|
||||||
|
fontFamily: fontFamily.bodySemi,
|
||||||
|
fontSize: 13,
|
||||||
|
lineHeight: 18,
|
||||||
|
letterSpacing: 0,
|
||||||
|
},
|
||||||
|
helper: {
|
||||||
|
fontFamily: fontFamily.body,
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 16,
|
||||||
|
letterSpacing: 0,
|
||||||
|
},
|
||||||
/** Libellé de bouton — 52 px de haut, rayon 14 px */
|
/** Libellé de bouton — 52 px de haut, rayon 14 px */
|
||||||
button: {
|
button: {
|
||||||
fontFamily: fontFamily.bodySemi,
|
fontFamily: fontFamily.bodySemi,
|
||||||
|
|||||||
Reference in New Issue
Block a user