@alveole/components 2.0.0-alpha → 2.0.0-alpha.10

package/dist/ui/FormControl/useChoixDeFichier.js

@@ -0,0 +1,87 @@
+import { useTheme } from '@alveole/theme';
+import * as DocumentPicker from 'expo-document-picker';
+import * as ImagePicker from 'expo-image-picker';
+import React from 'react';
+import { Platform } from 'react-native';
+import { Alert } from '../../core/Alert';
+import { ajoute, imagesSeulement, libelleDeLaSource, sourcesProposees, } from './fichiersDuChamp';
+import { valideLeType } from './valideLeType';
+const enFichier = (asset) => ({
+    uri: asset.uri,
+    name: asset.fileName ?? 'image.jpg',
+    size: asset.fileSize ?? 0,
+    mimeType: asset.mimeType ?? 'image/jpeg',
+    lastModified: Date.now(),
+});
+/** Demande l'autorisation, puis ouvre la galerie ou l'appareil photo. Rend les fichiers choisis, ou aucun. */
+const prendreUneImage = async (source, { labels, cameraQuality, multiple }) => {
+    const camera = source === 'camera';
+    const demande = camera ? ImagePicker.requestCameraPermissionsAsync : ImagePicker.requestMediaLibraryPermissionsAsync;
+    const { status } = await demande();
+    if (status !== 'granted') {
+        const message = camera ? labels.cameraPermissionMessage : labels.galleryPermissionMessage;
+        Alert.alert({ title: labels.permissionRequired, message });
+        return [];
+    }
+    const result = camera
+        ? await ImagePicker.launchCameraAsync({ mediaTypes: ['images'], quality: cameraQuality })
+        : await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ['images'],
+            quality: 1,
+            allowsMultipleSelection: multiple,
+        });
+    return result.canceled ? [] : result.assets.map(enFichier);
+};
+/**
+ * Tout ce que le bouton du champ declenche : le selecteur de documents sur le web ; sur natif, une
+ * feuille d'actions galerie / appareil photo / document, avec les demandes d'autorisation. Les
+ * fichiers recus passent le controle de type, puis s'ajoutent a la valeur.
+ */
+export const useChoixDeFichier = (options) => {
+    const { value, onChange, type, disabled, onPickStart, multiple, cameraQuality, labels } = options;
+    const { isVariant } = useTheme();
+    const grandEcran = isVariant('desktop');
+    const isPickingRef = React.useRef(false);
+    const recevoir = React.useCallback((nouveaux) => {
+        if (nouveaux.length === 0)
+            return;
+        const transmettre = () => onChange(ajoute(value, nouveaux, multiple));
+        valideLeType({ type, onChange: transmettre })(multiple ? nouveaux : nouveaux[0]);
+    }, [onChange, value, multiple, type]);
+    const choisirUnDocument = React.useCallback(async () => {
+        const result = await DocumentPicker.getDocumentAsync({ copyToCacheDirectory: true, multiple, type });
+        recevoir(result.assets ?? []);
+    }, [multiple, type, recevoir]);
+    const choisirUneImage = React.useCallback(async (source) => recevoir(await prendreUneImage(source, { labels, cameraQuality, multiple })), [labels, cameraQuality, multiple, recevoir]);
+    const ouvrirLaFeuille = React.useCallback(() => {
+        const lancer = (source) => (source === 'document' ? choisirUnDocument() : choisirUneImage(source));
+        const images = imagesSeulement(type);
+        Alert.alert({
+            title: images ? labels.chooseImageTitle : labels.chooseDocumentTitle,
+            message: images ? labels.chooseImageMessage : undefined,
+            buttons: [
+                ...sourcesProposees(type, grandEcran).map(source => ({
+                    text: libelleDeLaSource(source, labels, { type, grandEcran }),
+                    onPress: () => lancer(source),
+                })),
+                { text: labels.cancel, style: 'cancel' },
+            ],
+        });
+    }, [type, labels, grandEcran, choisirUnDocument, choisirUneImage]);
+    return React.useCallback(async () => {
+        if (isPickingRef.current)
+            return;
+        onPickStart?.();
+        if (disabled)
+            return;
+        if (Platform.OS !== 'web')
+            return ouvrirLaFeuille();
+        isPickingRef.current = true;
+        try {
+            await choisirUnDocument();
+        }
+        finally {
+            isPickingRef.current = false;
+        }
+    }, [onPickStart, disabled, ouvrirLaFeuille, choisirUnDocument]);
+};

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

@@ -4,7 +4,7 @@ import type { FileInputProps } from './FileInput';
  * et prevenir l'utilisateur sinon. Un fichier dont le type MIME est inconnu passe : c'est au
  * selecteur, qui filtre deja, d'avoir eu le dernier mot.
  *
- * Les trois champs de fichier (l'ancien FileField, DragAndDropFile natif et web) faisaient ce filtrage
+ * Les trois champs de fichier (l'ancien FileField, l'ancien DragAndDropFile natif et web) faisaient ce filtrage
  * chacun dans son coin, et avaient deja diverge : FileField reconnaissait les types avec ses
  * propres comparaisons de chaines, plus laches que celles des deux autres, et ne verifiait que
  * le premier fichier d'une selection multiple. Un meme fichier pouvait donc etre accepte ici et

package/dist/ui/FormControl/valideLeType.js

@@ -11,7 +11,7 @@ const refuser = (plusieurs) => Alert.alert({
  * et prevenir l'utilisateur sinon. Un fichier dont le type MIME est inconnu passe : c'est au
  * selecteur, qui filtre deja, d'avoir eu le dernier mot.
  *
- * Les trois champs de fichier (l'ancien FileField, DragAndDropFile natif et web) faisaient ce filtrage
+ * Les trois champs de fichier (l'ancien FileField, l'ancien DragAndDropFile natif et web) faisaient ce filtrage
  * chacun dans son coin, et avaient deja diverge : FileField reconnaissait les types avec ses
  * propres comparaisons de chaines, plus laches que celles des deux autres, et ne verifiait que
  * le premier fichier d'une selection multiple. Un meme fichier pouvait donc etre accepte ici et

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

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/ui/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,CAAC,IAAI,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,kCAAwC,WAAW,sBAwBzE,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/ui/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,CAAC,IAAI,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,kCAAwC,WAAW,sBA4BzE,CAAC"}

package/dist/ui/Header/Header.js

@@ -6,5 +6,5 @@ import { useStyles } from './Header.styles';
 export const Header = ({ logo, title, right, homeHref = '/' }) => {
     const styles = useStyles();
     const identity = (_jsxs(Box, { style: styles.identity, children: [logo, _jsx(Typography, { style: styles.titleText, children: title })] }));
-    return (_jsx(Box, { tag: "header", style: styles.container, children: _jsxs(Box, { style: styles.inner, children: [homeHref != null ? (_jsx(A, { href: homeHref, style: styles.identityLink, hoverStyle: styles.identityLinkHover, children: identity })) : (identity), right != null && _jsx(Box, { style: styles.right, children: right })] }) }));
+    return (_jsx(Box, { tag: "header", style: styles.container, children: _jsxs(Box, { style: styles.inner, children: [homeHref != null ? (_jsx(A, { href: homeHref, style: styles.identityLink, backgroundColor: { hover: styles.identityLinkHover.backgroundColor }, children: identity })) : (identity), right != null && _jsx(Box, { style: styles.right, children: right })] }) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAqC,MAAM,cAAc,CAAC;AAKzE,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,IAAI,GAAI,4BAA4B,SAAS,gCAkCzD,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAqC,MAAM,cAAc,CAAC;AAMzE,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,IAAI,GAAI,4BAA4B,SAAS,gCAkCzD,CAAC"}

package/dist/ui/Link/Link.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { linkProps } from '@alveole/theme';
 import { Link as ExpoLink } from 'expo-router';
 import { ouvertureDuLien, useCanAccessHref } from '../../core/A';
+import { soulignementDuLien } from '../../core/styleTamagui/soulignement';
 import { Typography } from '../../core/Typography';
 import { LucideIcon } from '../LucideIcon';
 import { useStyles } from './Link.styles';
@@ -11,7 +12,7 @@ export const Link = ({ href, target, children }) => {
     const { navigateurIntegre, nouvelOnglet, propsDuPressable, annonce } = ouvertureDuLien(href, target);
     if (!canAccess(href))
         return _jsx(_Fragment, { children: children });
-    const lien = (_jsxs(Typography, { tag: "a", accessibilityRole: "link", style: styles.link, hoverStyle: styles.linkHover, ...propsDuPressable, ...linkProps(), children: [children, nouvelOnglet && (_jsxs(_Fragment, { children: [' ', _jsx(LucideIcon, { name: "ExternalLink", size: "xs", color: styles.link.color, style: styles.icone })] })), annonce] }));
+    const lien = (_jsxs(Typography, { tag: "a", accessibilityRole: "link", style: styles.link, textDecorationLine: soulignementDuLien, ...propsDuPressable, ...linkProps(), children: [children, nouvelOnglet && (_jsxs(_Fragment, { children: [' ', _jsx(LucideIcon, { name: "ExternalLink", size: "xs", color: styles.link.color, style: styles.icone })] })), annonce] }));
     if (navigateurIntegre)
         return lien;
     return (_jsx(ExpoLink, { href: href, asChild: true, children: lien }));

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

@@ -8,10 +8,6 @@ declare const _default: {
     styleFn: () => {
         link: {
             color: string;
-            textDecoration: string;
-        };
-        linkHover: {
-            textDecoration: string;
         };
         icone: {
             verticalAlign: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/Link.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAKA,wBAckB;AAElB,eAAO,MAAM,OAAO,mCAA+D,CAAC;AAEpF,eAAO,MAAM,aAAa,mCAIzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAIvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/Link.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAKA,wBAckB;AAElB,eAAO,MAAM,OAAO,mCAA+D,CAAC;AAEpF,eAAO,MAAM,aAAa,mCAIzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAIvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Link/Link.styles.d.ts

@@ -1,10 +1,6 @@
 export declare const useStyles: () => {
     link: {
         color: string;
-        textDecoration: string;
-    };
-    linkHover: {
-        textDecoration: string;
     };
     icone: {
         verticalAlign: string;

package/dist/ui/Link/Link.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/Link.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;CAWnB,CAAC"}
+{"version":3,"file":"Link.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Link/Link.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;CAOnB,CAAC"}

package/dist/ui/Link/Link.styles.js

@@ -2,10 +2,6 @@ import { makeStyles } from '@alveole/theme';
 export const useStyles = makeStyles(({ color }) => ({
     link: {
         color: color.light.text['action-high-info'],
-        textDecoration: 'underline',
-    },
-    linkHover: {
-        textDecoration: 'none',
     },
     icone: {
         verticalAlign: 'middle',

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,cAAc,kBAAkB,CAAC;AAEjC,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAiE5C,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,cAAc,kBAAkB,CAAC;AAIjC,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAkE5C,CAAC"}

package/dist/ui/ListItem/ListItem.js

@@ -15,5 +15,6 @@ export const ListItem = (props) => {
         onPress?.(event);
     }, [RadioProps, onPress]);
     const styles = useStyles();
-    return (_jsxs(Box, { style: styles.container, children: [_jsxs(Box, { tag: "resource-item", style: [styles.item, style], hoverStyle: onPress || RadioProps ? styles.itemHover : {}, onPress: handlePress, ...itemProps, children: [_jsx(ListItemVisuel, { title: title, preview_url: preview_url, RadioProps: RadioProps, IconProps: IconProps, AvatarProps: AvatarProps }), _jsxs(Box, { style: styles.detail, children: [showSeparateur && _jsx(Box, { style: styles.separateur }), _jsxs(Box, { style: styles.principal, children: [_jsx(Typography, { style: styles.title, children: title }), description && _jsx(Typography, { style: styles.description, children: description })] }), trailing && trailing()] }), loading && (_jsx(Box, { style: styles.loading, children: _jsx(Spinner, { size: "sm" }) }))] }), children] }));
+    const cliquable = onPress != null || RadioProps != null;
+    return (_jsxs(Box, { style: styles.container, children: [_jsxs(Box, { tag: "resource-item", style: [styles.item, cliquable && styles.itemPressable, style], backgroundColor: cliquable ? { hover: styles.itemHover.backgroundColor } : undefined, onPress: handlePress, ...itemProps, children: [_jsx(ListItemVisuel, { title: title, preview_url: preview_url, RadioProps: RadioProps, IconProps: IconProps, AvatarProps: AvatarProps }), _jsxs(Box, { style: styles.detail, children: [showSeparateur && _jsx(Box, { style: styles.separateur }), _jsxs(Box, { style: styles.principal, children: [_jsx(Typography, { style: styles.title, children: title }), description && _jsx(Typography, { style: styles.description, children: description })] }), trailing && trailing()] }), loading && (_jsx(Box, { style: styles.loading, children: _jsx(Spinner, { size: "sm" }) }))] }), children] }));
 };

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

@@ -75,11 +75,13 @@ declare const _default: {
             gap: string | number;
             alignSelf: "stretch";
         };
-        itemHover: {
-            backgroundColor: string;
+        itemPressable: {
             borderRadius: import("@alveole/theme").Radius;
             cursor: "pointer";
         };
+        itemHover: {
+            backgroundColor: string;
+        };
         loading: {
             display: "flex";
             alignItems: "center";

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAWkB;AAElB,eAAO,MAAM,OAAO,mCAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAgBxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAYtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,SAAS,mCAcrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,YAAY,mCAA6D,CAAC;AAEvF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAWkB;AAElB,eAAO,MAAM,OAAO,mCAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAgBxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAYtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,SAAS,mCAcrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,YAAY,mCAA6D,CAAC;AAEvF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}

package/dist/ui/ListItem/ListItem.styles.d.ts

@@ -67,11 +67,13 @@ export declare const useStyles: () => {
         gap: string | number;
         alignSelf: "stretch";
     };
-    itemHover: {
-        backgroundColor: string;
+    itemPressable: {
         borderRadius: import("@alveole/theme").Radius;
         cursor: "pointer";
     };
+    itemHover: {
+        backgroundColor: string;
+    };
     loading: {
         display: "flex";
         alignItems: "center";

package/dist/ui/ListItem/ListItem.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.styles.ts"],"names":[],"mappings":"AA6GA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiF,CAAC"}
+{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.styles.ts"],"names":[],"mappings":"AAiHA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiF,CAAC"}

package/dist/ui/ListItem/ListItem.styles.js

@@ -15,11 +15,15 @@ const ligne = ({ color, radius, spacing }) => ({
         gap: spacing('3V'),
         alignSelf: 'stretch',
     },
-    itemHover: {
-        backgroundColor: color.alpha(color.light.background['alt-grey'], 0.75),
+    // Rayon et curseur au repos : sans fond, le rayon ne se voit qu'au survol, que porte la
+    // seule prop `backgroundColor` (clause de Tamagui v3).
+    itemPressable: {
         borderRadius: radius('md'),
         cursor: 'pointer',
     },
+    itemHover: {
+        backgroundColor: color.alpha(color.light.background['alt-grey'], 0.75),
+    },
     loading: {
         display: 'flex',
         alignItems: 'center',