@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/ui/FilterDate/FilterDate.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { format } from 'date-fns';
-import { enUS, fr } from 'date-fns/locale';
+import { format } from 'date-fns/format';
+import { enUS } from 'date-fns/locale/en-US';
+import { fr } from 'date-fns/locale/fr';
 import React from 'react';
 import { ScrollView } from 'react-native';
 import { Box } from '../../core/Box';
+import { Grid } from '../../core/Grid';
 import { Typography } from '../../core/Typography';
 import { BottomSheet } from '../BottomSheet';
 import { Button } from '../Button';
-import { Grid } from '../Grid';
 import { useStyles } from './FilterDate.styles';
 const capitalize = (value) => value.charAt(0).toUpperCase() + value.slice(1);
 const monthsFr = Array.from({ length: 12 }, (_, month) => ({
@@ -34,54 +35,69 @@ export const filerDateValueToDates = (values, from, to) => {
         return values.months.flatMap(m => yearsList.map(y => `${y}-${format(new Date(2026, m - 1, 1), 'MM')}`));
     return values.years.flatMap(y => values.months.map(m => `${y}-${format(new Date(2026, m - 1, 1), 'MM')}`));
 };
-export const FilterDate = (props) => {
-    const { title, local = 'fr', from, to, value, onChange } = props;
-    const actionLabel = local === 'fr' ? 'Effacer' : 'Clear';
-    const yearsLabel = local === 'fr' ? 'Années' : 'Years';
-    const monthsLabel = local === 'fr' ? 'Mois' : 'Months';
+// Les libelles n'existent qu'en deux jeux : les choisir un par un au fil du rendu laissait la
+// langue se decider a trois endroits differents.
+const libelles = (local) => local === 'fr'
+    ? { action: 'Effacer', annees: 'Années', mois: 'Mois', listeMois: monthsFr }
+    : { action: 'Clear', annees: 'Years', mois: 'Months', listeMois: monthsEn };
+const anneesEntre = (from, to) => {
     const fromYear = from === 'today' ? new Date().getFullYear() : from;
     const toYear = to === 'today' ? new Date().getFullYear() : to;
-    const yearsList = Array.from({ length: toYear - fromYear + 1 }, (_, i) => fromYear + i);
-    const monthsList = local === 'fr' ? monthsFr : monthsEn;
-    const [open, setOpen] = React.useState(false);
+    return Array.from({ length: toYear - fromYear + 1 }, (_, i) => fromYear + i);
+};
+// Annees et mois se selectionnent de la meme facon : on bascule une valeur dans une liste, puis
+// on republie les deux listes ensemble. Ecrit deux fois dans le composant, ce basculement en
+// faisait la moitie du corps sans rien devoir au rendu.
+const useSelectionPeriode = ({ value, from, to, onChange, }) => {
     const [years, setYears] = React.useState(value.years);
     const [months, setMonths] = React.useState(value.months);
-    const yearsScrollRef = React.useRef(null);
+    const publier = (nouvellesAnnees, nouveauxMois) => {
+        setYears(nouvellesAnnees);
+        setMonths(nouveauxMois);
+        onChange?.({ years: nouvellesAnnees, months: nouveauxMois }, filerDateValueToDates({ years: nouvellesAnnees, months: nouveauxMois }, from, to));
+    };
+    const basculer = (liste, valeur) => liste.includes(valeur) ? liste.filter(v => v !== valeur) : [...liste, valeur];
+    return {
+        years,
+        months,
+        vide: years.length === 0 && months.length === 0,
+        handleReset: () => publier([], []),
+        handlePressYear: (y) => publier(basculer(years, y), months),
+        handlePressMonth: (m) => publier(years, basculer(months, m)),
+    };
+};
+// La bande des annees defile horizontalement et doit toujours s'ouvrir sur l'annee la plus
+// recente : ce recalage a l'ouverture et au changement de contenu est le seul comportement
+// propre a cette section.
+const SectionAnnees = ({ titre, annees, selection, onPress, ouvert, }) => {
     const styles = useStyles();
-    const disabledReset = React.useMemo(() => years.length === 0 && months.length === 0, [months.length, years.length]);
-    const hasValues = React.useMemo(() => years.length > 0 || months.length > 0, [months.length, years.length]);
+    const yearsScrollRef = React.useRef(null);
     const scrollYearsToEnd = React.useCallback(() => {
         yearsScrollRef.current?.scrollToEnd({ animated: false });
     }, []);
     React.useEffect(() => {
-        if (open) {
+        if (ouvert) {
             requestAnimationFrame(scrollYearsToEnd);
         }
-    }, [open, scrollYearsToEnd]);
-    const handleReset = React.useCallback(() => {
-        setYears([]);
-        setMonths([]);
-        onChange?.({ years: [], months: [] }, []);
-    }, [onChange]);
-    const handlePressYear = React.useCallback((y) => {
-        let newYears = years;
-        if (newYears.includes(y))
-            newYears = newYears.filter(v => v !== y);
-        else
-            newYears = [...newYears, y];
-        setYears(newYears);
-        onChange?.({ years: newYears, months }, filerDateValueToDates({ years: newYears, months }, from, to));
-    }, [from, months, onChange, to, years]);
-    const handlePressMonth = React.useCallback((m) => {
-        let newMonths = months;
-        if (newMonths.includes(m))
-            newMonths = newMonths.filter(v => v !== m);
-        else
-            newMonths = [...newMonths, m];
-        setMonths(newMonths);
-        onChange?.({ years, months: newMonths }, filerDateValueToDates({ years, months: newMonths }, from, to));
-    }, [from, months, onChange, to, years]);
-    return (_jsxs(React.Fragment, { children: [_jsx(Button, { variant: "secondary", title: title, endIcon: "ChevronDown", size: "sm", selected: hasValues, active: open, onPress: () => setOpen(true) }), _jsx(BottomSheet, { fitContent: true, title: title, open: open, setOpen: setOpen, action: _jsx(Button, { title: actionLabel, variant: "tertiary", size: "sm", disabled: disabledReset, onPress: handleReset }), children: _jsxs(Box, { style: styles.container, children: [_jsxs(Box, { style: styles.partContainer, children: [_jsx(Typography, { style: styles.partTitle, children: yearsLabel }), _jsx(ScrollView, { ref: yearsScrollRef, horizontal: true, nestedScrollEnabled: true, showsHorizontalScrollIndicator: false, style: [styles.filtersHorizontalScroll, { width: '100%' }], contentContainerStyle: styles.filtersScroll, onContentSizeChange: scrollYearsToEnd, children: yearsList.map(y => (_jsx(Box, { children: _jsx(FilterDateButton, { type: "year", title: y, selected: years.includes(y), onPress: () => handlePressYear(y) }) }, `year--${y}`))) })] }), _jsxs(Box, { style: styles.partContainer, children: [_jsx(Typography, { style: styles.partTitle, children: monthsLabel }), _jsx(Grid, { gap: '1W', pl: '2W', pr: '2W', children: monthsList.map(m => (_jsx(Grid.Column, { size: 4, children: _jsx(FilterDateButton, { type: "month", title: m.label, selected: months.includes(m.value), onPress: () => handlePressMonth(m.value) }) }, `month--${m.value}`))) })] })] }) })] }));
+    }, [ouvert, scrollYearsToEnd]);
+    return (_jsxs(Box, { style: styles.partContainer, children: [_jsx(Typography, { style: styles.partTitle, children: titre }), _jsx(ScrollView, { ref: yearsScrollRef, horizontal: true, nestedScrollEnabled: true, showsHorizontalScrollIndicator: false, style: [styles.filtersHorizontalScroll, { width: '100%' }], contentContainerStyle: styles.filtersScroll, onContentSizeChange: scrollYearsToEnd, children: annees.map(y => (_jsx(Box, { children: _jsx(FilterDateButton, { type: "year", title: y, selected: selection.includes(y), onPress: () => onPress(y) }) }, `year--${y}`))) })] }));
+};
+const SectionMois = ({ titre, mois, selection, onPress, }) => {
+    const styles = useStyles();
+    return (_jsxs(Box, { style: styles.partContainer, children: [_jsx(Typography, { style: styles.partTitle, children: titre }), _jsx(Grid, { gap: '1W', pl: '2W', pr: '2W', children: mois.map(m => (_jsx(Grid.Column, { size: 4, children: _jsx(FilterDateButton, { type: "month", title: m.label, selected: selection.includes(m.value), onPress: () => onPress(m.value) }) }, `month--${m.value}`))) })] }));
+};
+export const FilterDate = (props) => {
+    const { title, local = 'fr', from, to, value, onChange } = props;
+    const styles = useStyles();
+    const mots = libelles(local);
+    const [open, setOpen] = React.useState(false);
+    const { years, months, vide, handleReset, handlePressYear, handlePressMonth } = useSelectionPeriode({
+        value,
+        from,
+        to,
+        onChange,
+    });
+    return (_jsxs(React.Fragment, { children: [_jsx(Button, { variant: "secondary", title: title, trailing: "ChevronDown", size: "sm", selected: !vide, expanded: open, onPress: () => setOpen(true) }), _jsx(BottomSheet, { fitContent: true, title: title, open: open, setOpen: setOpen, action: _jsx(Button, { title: mots.action, variant: "tertiary", size: "sm", disabled: vide, onPress: handleReset }), children: _jsxs(Box, { style: styles.container, children: [_jsx(SectionAnnees, { titre: mots.annees, annees: anneesEntre(from, to), selection: years, onPress: handlePressYear, ouvert: open }), _jsx(SectionMois, { titre: mots.mois, mois: mots.listeMois, selection: months, onPress: handlePressMonth })] }) })] }));
 };
 const FilterDateButton = (props) => {
     const { title, type, selected, onPress } = props;

package/dist/ui/FilterDate/FilterDate.stories.d.ts

@@ -4,7 +4,7 @@ declare const _default: {
     tags: "ui"[];
     experimental: false;
     description: string;
-    component: (props: import("@alveole/components").FilterDateProps) => React.JSX.Element;
+    component: (props: import("./FilterDate").FilterDateProps) => React.JSX.Element;
     styleFn: () => {
         container: {
             display: "flex";

package/dist/ui/FilterDate/FilterDate.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterDate.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/FilterDate.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI1B,wBAOkB;AAElB,eAAO,MAAM,OAAO,yBAQnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"FilterDate.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterDate/FilterDate.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM1B,wBAOkB;AAElB,eAAO,MAAM,OAAO,yBAQnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/ui/FilterDate/FilterDate.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@alveole/components';
 import React from 'react';
+import { Box } from '../../core/Box';
 import { FilterDate } from './FilterDate';
 import { useStyles } from './FilterDate.styles';
 export default {

package/dist/ui/FormControl/ChampHHMM.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { FormControlCaptionProps } from './FormControlCaption';
+import { TextInputProps } from './TextInput';
+export type ChampHHMMProps = FormControlCaptionProps & {
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+};
+type ChampHHMMConfig = {
+    formater: (chiffres: string) => string;
+    clavier: Pick<TextInputProps, 'inputMode' | 'keyboardType'>;
+};
+/** Un champ HH:MM saisi au clavier. Seuls la mise en forme et le clavier changent d'un usage a l'autre. */
+export declare const ChampHHMM: React.ForwardRefExoticComponent<FormControlCaptionProps & {
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+} & ChampHHMMConfig & React.RefAttributes<import("react-native").TextInput>>;
+export {};
+//# sourceMappingURL=ChampHHMM.d.ts.map

package/dist/ui/FormControl/ChampHHMM.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChampHHMM.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/ChampHHMM.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAA+B,cAAc,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,MAAM,cAAc,GAAG,uBAAuB,GAAG;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,cAAc,CAAC,CAAC;CAC7D,CAAC;AAEF,2GAA2G;AAC3G,eAAO,MAAM,SAAS;YAZZ,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;aACzB,MAAM,IAAI;eACR,OAAO;4EA6BlB,CAAC"}

package/dist/ui/FormControl/ChampHHMM.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { TextInput } from './TextInput';
+import { useSaisieHHMM } from './useSaisieHHMM';
+/** Un champ HH:MM saisi au clavier. Seuls la mise en forme et le clavier changent d'un usage a l'autre. */
+export const ChampHHMM = React.forwardRef(function ChampHHMM({ error, success, value, onChange, onBlur, disabled, formater, clavier }, ref) {
+    const { localValue, handleChangeText, handleBlur } = useSaisieHHMM({ value, onChange, onBlur, formater });
+    return (_jsx(TextInput, { ref: ref, placeholder: "HH:MM", value: localValue, onChangeText: handleChangeText, onBlur: handleBlur, disabled: disabled, error: error, success: success, maxLength: 5, ...clavier }));
+});

package/dist/ui/FormControl/FieldId.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type FieldContextValue = {
+    fieldId?: string;
+    label?: string;
+    disabled?: boolean;
+    required?: boolean;
+};
+export declare const useFieldId: () => string | undefined;
+export declare const useFieldDisabled: (ownDisabled?: boolean) => boolean | undefined;
+export declare const useFieldLabel: () => string | undefined;
+export declare const useFieldRequired: () => boolean | undefined;
+export declare const FieldIdProvider: ({ children, label, disabled, required, }: React.PropsWithChildren<Omit<FieldContextValue, "fieldId">>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=FieldId.d.ts.map

package/dist/ui/FormControl/FieldId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldId.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FieldId.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,iBAAiB,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAItG,eAAO,MAAM,UAAU,0BAA+C,CAAC;AAGvE,eAAO,MAAM,gBAAgB,GAAI,cAAc,OAAO,wBAIrD,CAAC;AAEF,eAAO,MAAM,aAAa,0BAA6C,CAAC;AAExE,eAAO,MAAM,gBAAgB,2BAAgD,CAAC;AAE9E,eAAO,MAAM,eAAe,GAAI,0CAK7B,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,sBAI7D,CAAC"}

package/dist/ui/FormControl/FieldId.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+const FieldContext = React.createContext({});
+export const useFieldId = () => React.useContext(FieldContext).fieldId;
+// Posée sur le contrôle lui-même, la désactivation l'emporte sur celle de l'enveloppe.
+export const useFieldDisabled = (ownDisabled) => {
+    const { disabled } = React.useContext(FieldContext);
+    return ownDisabled ?? disabled;
+};
+export const useFieldLabel = () => React.useContext(FieldContext).label;
+export const useFieldRequired = () => React.useContext(FieldContext).required;
+export const FieldIdProvider = ({ children, label, disabled, required, }) => {
+    const fieldId = React.useId();
+    return _jsx(FieldContext.Provider, { value: { fieldId, label, disabled, required }, children: children });
+};

package/dist/ui/FormControl/FileInput.d.ts

@@ -0,0 +1,20 @@
+import * as DocumentPicker from 'expo-document-picker';
+import React from 'react';
+import { FileInputLabels, FileInputValue } from './fichiersDuChamp';
+export * from './fichiersDuChamp';
+export type FileInputProps = {
+    value: FileInputValue;
+    onChange: (value: FileInputValue) => void;
+    type?: DocumentPicker.DocumentPickerOptions['type'];
+    multiple?: boolean;
+    disabled?: boolean;
+    removable?: boolean;
+    hideButton?: boolean;
+    labels?: Partial<FileInputLabels>;
+    /** Qualite des photos prises avec l'appareil photo, de 0 a 1. */
+    cameraQuality?: number;
+    reopen?: boolean;
+    onPickStart?: () => void;
+};
+export declare const FileInput: (props: FileInputProps) => React.JSX.Element;
+//# sourceMappingURL=FileInput.d.ts.map

package/dist/ui/FormControl/FileInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,cAAc,EAA+C,MAAM,mBAAmB,CAAC;AAKjH,cAAc,mBAAmB,CAAC;AAElC,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAClC,iEAAiE;IACjE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBAmC9C,CAAC"}

package/dist/ui/FormControl/FileInput.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Platform } from 'react-native';
+import { Box } from '../../core/Box';
+import { Button } from '../Button';
+import { fichiersVisibles, libellesParDefaut, retire } from './fichiersDuChamp';
+import { useStyles } from './FileInput.styles';
+import { FileInputListe } from './FileInputListe';
+import { useChoixDeFichier } from './useChoixDeFichier';
+export * from './fichiersDuChamp';
+export const FileInput = (props) => {
+    const { value, disabled, onChange, reopen = false, multiple = false, hideButton = false, removable = true } = props;
+    const styles = useStyles();
+    const labels = React.useMemo(() => ({ ...libellesParDefaut, ...props.labels }), [props.labels]);
+    const choisir = useChoixDeFichier({ ...props, multiple, cameraQuality: props.cameraQuality ?? 0.8, labels });
+    // Le champ simple ne remplace pas un fichier en silence : il faut d'abord retirer celui qu'il montre.
+    const visibles = fichiersVisibles(value);
+    const boutonDesactive = disabled || (!multiple && visibles.length > 0);
+    React.useEffect(() => {
+        if (reopen)
+            choisir();
+    }, [reopen, choisir]);
+    return (_jsxs(Box, { tag: "file-input", style: styles.container, children: [!hideButton && (_jsx(Button, { fullWidth: Platform.OS !== 'web', onPress: choisir, disabled: boutonDesactive, variant: "secondary", title: labels.addFile, leading: "Paperclip" })), _jsx(FileInputListe, { fichiers: visibles, labels: labels, retirable: !disabled && removable, onRetirer: fichier => onChange(retire(value, fichier)) })] }));
+};

package/dist/ui/FormControl/FileInput.stories.d.ts

@@ -0,0 +1,24 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: (props: import("./FileInput").FileInputProps) => import("react").JSX.Element;
+    styleFn: () => {
+        container: {
+            display: "flex";
+            flexDirection: "column";
+            gap: string | number;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Multiple: () => import("react").JSX.Element;
+export declare const ImagesSeulement: () => import("react").JSX.Element;
+export declare const AvecFichiersEnregistres: () => import("react").JSX.Element;
+export declare const LibellesPersonnalises: () => import("react").JSX.Element;
+export declare const Desactive: () => import("react").JSX.Element;
+export declare const NonRetirable: () => import("react").JSX.Element;
+export * as Sources from './FileInput.stories.sources';
+//# sourceMappingURL=FileInput.stories.d.ts.map

package/dist/ui/FormControl/FileInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAOpB,CAAC;AAEF,eAAO,MAAM,eAAe,mCAO3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mCAwBnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCAWjC,CAAC;AAEF,eAAO,MAAM,SAAS,mCAarB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAexB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}

package/dist/ui/FormControl/FileInput.stories.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FileInput } from './FileInput';
+import { useStyles } from './FileInput.styles';
+import { FormControl } from './FormControl';
+export default {
+    title: 'FileInput',
+    tags: ['ui'],
+    experimental: false,
+    description: "Sélection de fichiers avec validation MIME et liste des fichiers choisis. Sur natif, propose galerie, appareil photo ou document. Nue : on la place dans un FormControl pour son libellé, son aide et sa validation. Pour déposer des fichiers sur tout un formulaire (web), l'envelopper dans une [FileDropZone](/components/FileDropZone).",
+    component: FileInput,
+    styleFn: useStyles,
+};
+export const Default = () => {
+    const [file, setFile] = useState(null);
+    return (_jsx(FormControl, { label: "Document", children: _jsx(FileInput, { value: file, onChange: setFile }) }));
+};
+export const Multiple = () => {
+    const [files, setFiles] = useState(null);
+    return (_jsx(FormControl, { label: "Documents", children: _jsx(FileInput, { value: files, onChange: setFiles, multiple: true }) }));
+};
+export const ImagesSeulement = () => {
+    const [files, setFiles] = useState(null);
+    return (_jsx(FormControl, { label: "Photos", hint: "Formats accept\u00E9s : JPG, PNG", children: _jsx(FileInput, { type: "image/*", value: files, onChange: setFiles, multiple: true }) }));
+};
+export const AvecFichiersEnregistres = () => {
+    const [files, setFiles] = useState([
+        {
+            id: '1',
+            persisted: true,
+            uri: 'https://picsum.photos/id/10/200',
+            name: 'photo-chantier.jpg',
+            mimeType: 'image/jpeg',
+            lastModified: 0,
+        },
+        {
+            id: '2',
+            persisted: true,
+            uri: 'https://example.com/devis.pdf',
+            name: 'devis.pdf',
+            mimeType: 'application/pdf',
+            lastModified: 0,
+        },
+    ]);
+    return (_jsx(FormControl, { label: "Pi\u00E8ces jointes", hint: "Un fichier enregistr\u00E9 retir\u00E9 reste dans la valeur, marqu\u00E9 removed.", children: _jsx(FileInput, { value: files, onChange: setFiles, multiple: true }) }));
+};
+export const LibellesPersonnalises = () => {
+    const [file, setFile] = useState(null);
+    return (_jsx(FormControl, { label: "Attachment", children: _jsx(FileInput, { value: file, onChange: setFile, labels: { addFile: 'Add a file', gallery: 'Gallery', camera: 'Camera', document: 'Document', cancel: 'Cancel' } }) }));
+};
+export const Desactive = () => (_jsx(FormControl, { label: "Document", disabled: true, children: _jsx(FileInput, { value: {
+            uri: 'https://example.com/contrat.pdf',
+            name: 'contrat.pdf',
+            mimeType: 'application/pdf',
+            lastModified: 0,
+        }, onChange: () => { }, disabled: true }) }));
+export const NonRetirable = () => (_jsx(FormControl, { label: "Justificatif", children: _jsx(FileInput, { value: {
+            id: '3',
+            persisted: true,
+            uri: 'https://example.com/justificatif.pdf',
+            name: 'justificatif.pdf',
+            mimeType: 'application/pdf',
+            lastModified: 0,
+        }, onChange: () => { }, removable: false }) }));
+export * as Sources from './FileInput.stories.sources';

package/dist/ui/FormControl/FileInput.stories.sources.d.ts

@@ -0,0 +1,18 @@
+export declare const Default: () => string;
+export declare const Multiple: () => string;
+export declare const ImagesSeulement: () => string;
+export declare const AvecFichiersEnregistres: () => string;
+export declare const LibellesPersonnalises: () => string;
+export declare const Desactive: () => string;
+export declare const NonRetirable: () => string;
+export declare const storySources: {
+    readonly Default: () => string;
+    readonly Multiple: () => string;
+    readonly ImagesSeulement: () => string;
+    readonly AvecFichiersEnregistres: () => string;
+    readonly LibellesPersonnalises: () => string;
+    readonly Desactive: () => string;
+    readonly NonRetirable: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+//# sourceMappingURL=FileInput.stories.sources.d.ts.map

package/dist/ui/FormControl/FileInput.stories.sources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAyO,CAAC;AAE9P,eAAO,MAAM,QAAQ,cAAwP,CAAC;AAE9Q,eAAO,MAAM,eAAe,cAAkT,CAAC;AAE/U,eAAO,MAAM,uBAAuB,cAAotB,CAAC;AAEzvB,eAAO,MAAM,qBAAqB,cAA4Y,CAAC;AAE/a,eAAO,MAAM,SAAS,cAA0V,CAAC;AAEjX,eAAO,MAAM,YAAY,cAAuZ,CAAC;AAEjb,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/FormControl/FileInput.stories.sources.js

@@ -0,0 +1,18 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/FormControl/FileInput.stories.tsx
+export const Default = () => "export const Default = () => {\n  const [file, setFile] = useState<FileInputValue>(null);\n  return (\n    <FormControl label=\"Document\">\n      <FileInput value={file} onChange={setFile} />\n    </FormControl>\n  );\n};";
+export const Multiple = () => "export const Multiple = () => {\n  const [files, setFiles] = useState<FileInputValue>(null);\n  return (\n    <FormControl label=\"Documents\">\n      <FileInput value={files} onChange={setFiles} multiple />\n    </FormControl>\n  );\n};";
+export const ImagesSeulement = () => "export const ImagesSeulement = () => {\n  const [files, setFiles] = useState<FileInputValue>(null);\n  return (\n    <FormControl label=\"Photos\" hint=\"Formats acceptés : JPG, PNG\">\n      <FileInput type=\"image/*\" value={files} onChange={setFiles} multiple />\n    </FormControl>\n  );\n};";
+export const AvecFichiersEnregistres = () => "export const AvecFichiersEnregistres = () => {\n  const [files, setFiles] = useState<FileInputValue>([\n    {\n      id: '1',\n      persisted: true,\n      uri: 'https://picsum.photos/id/10/200',\n      name: 'photo-chantier.jpg',\n      mimeType: 'image/jpeg',\n      lastModified: 0,\n    },\n    {\n      id: '2',\n      persisted: true,\n      uri: 'https://example.com/devis.pdf',\n      name: 'devis.pdf',\n      mimeType: 'application/pdf',\n      lastModified: 0,\n    },\n  ]);\n  return (\n    <FormControl label=\"Pièces jointes\" hint=\"Un fichier enregistré retiré reste dans la valeur, marqué removed.\">\n      <FileInput value={files} onChange={setFiles} multiple />\n    </FormControl>\n  );\n};";
+export const LibellesPersonnalises = () => "export const LibellesPersonnalises = () => {\n  const [file, setFile] = useState<FileInputValue>(null);\n  return (\n    <FormControl label=\"Attachment\">\n      <FileInput\n        value={file}\n        onChange={setFile}\n        labels={{ addFile: 'Add a file', gallery: 'Gallery', camera: 'Camera', document: 'Document', cancel: 'Cancel' }}\n      />\n    </FormControl>\n  );\n};";
+export const Desactive = () => "export const Desactive = () => (\n  <FormControl label=\"Document\" disabled>\n    <FileInput\n      value={{\n        uri: 'https://example.com/contrat.pdf',\n        name: 'contrat.pdf',\n        mimeType: 'application/pdf',\n        lastModified: 0,\n      }}\n      onChange={() => {}}\n      disabled\n    />\n  </FormControl>\n);";
+export const NonRetirable = () => "export const NonRetirable = () => (\n  <FormControl label=\"Justificatif\">\n    <FileInput\n      value={{\n        id: '3',\n        persisted: true,\n        uri: 'https://example.com/justificatif.pdf',\n        name: 'justificatif.pdf',\n        mimeType: 'application/pdf',\n        lastModified: 0,\n      }}\n      onChange={() => {}}\n      removable={false}\n    />\n  </FormControl>\n);";
+export const storySources = {
+    Default,
+    Multiple,
+    ImagesSeulement,
+    AvecFichiersEnregistres,
+    LibellesPersonnalises,
+    Desactive,
+    NonRetirable,
+};

package/dist/ui/FormControl/FileInput.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const useStyles: () => {
+    container: {
+        display: "flex";
+        flexDirection: "column";
+        gap: string | number;
+    };
+};
+//# sourceMappingURL=FileInput.styles.d.ts.map

package/dist/ui/FormControl/FileInput.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.styles.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;CAMnB,CAAC"}

package/dist/ui/FormControl/FileInput.styles.js

@@ -0,0 +1,8 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ spacing }) => ({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacing('1W'),
+    },
+}));

package/dist/ui/FormControl/FileInputListe.d.ts

@@ -0,0 +1,11 @@
+import { FileInputFile, FileInputLabels } from './fichiersDuChamp';
+type FileInputListeProps = {
+    fichiers: FileInputFile[];
+    labels: FileInputLabels;
+    retirable: boolean;
+    onRetirer: (fichier: FileInputFile) => void;
+};
+/** Les fichiers montres par le champ : apercu ou icone, ouverture au clic, bouton de retrait. */
+export declare const FileInputListe: ({ fichiers, labels, retirable, onRetirer }: FileInputListeProps) => import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=FileInputListe.d.ts.map

package/dist/ui/FormControl/FileInputListe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInputListe.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInputListe.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAYnE,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,iGAAiG;AACjG,eAAO,MAAM,cAAc,GAAI,4CAA4C,mBAAmB,uCA6B7F,CAAC"}

package/dist/ui/FormControl/FileInputListe.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Linking } from 'react-native';
+import { Box } from '../../core/Box';
+import { ButtonIcon } from '../Button';
+import { ListItem } from '../ListItem';
+const estUneImage = (fichier) => fichier.mimeType?.startsWith('image/') || /\.(jpe?g|png|gif|webp|bmp|svg)$/i.test(fichier.name ?? '');
+const iconeDe = (fichier) => {
+    if (fichier.persisted)
+        return 'FileCheckCorner';
+    if (fichier.mimeType?.includes('pdf') || fichier.name?.endsWith('.pdf'))
+        return 'FileText';
+    if (estUneImage(fichier))
+        return 'FileImage';
+    return 'File';
+};
+/** Les fichiers montres par le champ : apercu ou icone, ouverture au clic, bouton de retrait. */
+export const FileInputListe = ({ fichiers, labels, retirable, onRetirer }) => {
+    if (fichiers.length === 0)
+        return null;
+    return (_jsx(Box, { tag: "file-input-list", children: fichiers.map((fichier, index) => {
+            const nom = fichier.name ?? labels.unnamed;
+            return (_jsx(ListItem, { title: nom, preview_url: estUneImage(fichier) ? fichier.uri : undefined, IconProps: { name: iconeDe(fichier) }, showSeparateur: index !== 0, onPress: () => Linking.openURL(fichier.uri).catch(() => { }), trailing: () => (_jsx(ButtonIcon, { accessibilityLabel: `${labels.remove} ${nom}`, disabled: !retirable, variant: "tertiary", icon: "CircleX", onPress: () => onRetirer(fichier) })) }, fichier.id ?? fichier.uri));
+        }) }));
+};

package/dist/ui/FormControl/FormControl.d.ts

@@ -1,12 +1,21 @@
 import React from 'react';
 import { TextInput as ReactNativeTextInput } from 'react-native';
-import { BoxProps } from '../../core';
-export type FormControlProps = React.PropsWithChildren & {
+import { BoxProps } from '../../core/Box';
+import { FormControlCaptionProps } from './FormControlCaption';
+import { FormControlHintProps } from './FormControlHint';
+import { FormControlLabelProps } from './FormControlLabel';
+export type FormControlProps = React.PropsWithChildren & Pick<FormControlHintProps, 'hint'> & FormControlCaptionProps & Pick<FormControlLabelProps, 'labelRight'> & {
+    label?: string;
+    disabled?: boolean;
+    required?: boolean;
     style?: BoxProps['style'];
 };
 export declare const FormControl: React.ForwardRefExoticComponent<{
     children?: React.ReactNode | undefined;
-} & {
+} & Pick<FormControlHintProps, "hint"> & FormControlCaptionProps & Pick<FormControlLabelProps, "labelRight"> & {
+    label?: string;
+    disabled?: boolean;
+    required?: boolean;
     style?: BoxProps["style"];
 } & React.RefAttributes<ReactNativeTextInput>>;
 //# sourceMappingURL=FormControl.d.ts.map

package/dist/ui/FormControl/FormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAG3C,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,GAAG;IAAE,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC;AAEvF,eAAO,MAAM,WAAW;;;YAF2C,QAAQ,CAAC,OAAO,CAAC;8CAYlF,CAAC"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,OAAO,EAAsB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACnF,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,GACpD,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAClC,uBAAuB,GACvB,IAAI,CAAC,qBAAqB,EAAE,YAAY,CAAC,GAAG;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC3B,CAAC;AAEJ,eAAO,MAAM,WAAW;;;YANZ,MAAM;eACH,OAAO;eACP,OAAO;YACV,QAAQ,CAAC,OAAO,CAAC;8CAsB3B,CAAC"}

package/dist/ui/FormControl/FormControl.js

@@ -1,9 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
+import { InputHeading } from '../InputHeading';
+import { FieldIdProvider } from './FieldId';
 import { useStyles } from './FormControl.styles';
+import { FormControlCaption } from './FormControlCaption';
+import { FormControlHint } from './FormControlHint';
+import { FormControlLabel } from './FormControlLabel';
 export const FormControl = React.forwardRef(function FormControl(props, _ref) {
-    const { children, style } = props;
+    const { children, label, labelRight, hint, error, success, disabled, required, style } = props;
     const styles = useStyles();
-    return (_jsx(Box, { tag: "form-control", style: [styles.formControl, style], children: children }));
+    return (_jsx(FieldIdProvider, { label: label, disabled: disabled, required: required, children: _jsxs(Box, { tag: "form-control", style: [styles.formControl, style], children: [(!!label || !!hint) && (_jsxs(InputHeading, { children: [!!label && _jsx(FormControlLabel, { label: label, labelRight: labelRight }), !!hint && _jsx(FormControlHint, { hint: hint })] })), children, (!!error || !!success) && _jsx(FormControlCaption, { error: error, success: success })] }) }));
 });