@alveole/components 0.43.2 → 1.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewer.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AACxD,eAAO,MAAM,wBAAwB,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,sBAC/B,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG;IAC3C,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAsFxD,CAAC"}
+{"version":3,"file":"DocumentViewer.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AACxD,eAAO,MAAM,wBAAwB,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,sBAC/B,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG;IAC3C,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAmFxD,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewer.js

@@ -35,11 +35,9 @@ export const DocumentViewer = (props) => {
     const handlePreviousPage = React.useCallback(() => {
         setPage(currentPage => Math.max(currentPage - 1, 1));
     }, []);
-    React.useEffect(() => {
-        setPage(currentPage => Math.min(currentPage, totalPages));
-    }, [totalPages]);
     const handlePdfReady = React.useCallback((proxy) => {
         setTotalPages(proxy.numPages);
+        setPage(currentPage => Math.min(currentPage, proxy.numPages));
     }, []);
     return (_jsxs(Box, { tag: "document-viewer-wrapper", height: height, style: styles.viewerWrapper, children: [_jsxs(Box, { tag: "document-viewer", flex: 1, height: '100%', minW: 0, style: { flexBasis: 0 }, ...boxProps, children: [_jsx(DocumentViewerToolbar, { title: title, state: state, withChildren: children != null, onRotateLeft: () => handleRotate('left'), onRotateRight: () => handleRotate('right'), onNextPage: handleNextPage, onPreviousPage: handlePreviousPage }), _jsx(Box, { tag: "document-viewer-container", style: {
                             ...styles.viewerContainer,

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

@@ -8,12 +8,12 @@ declare const _default: {
     styleFn: () => {
         toolbar: {
             padding: import("@alveole/theme").Spacing;
-            borderColor: "#DEE3EC";
+            borderColor: string;
             borderWidth: number;
             borderStyle: "solid";
             borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
             borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            backgroundColor: "#F6F7F8";
+            backgroundColor: string;
             display: "flex";
             flexDirection: "row";
             gap: import("@alveole/theme").Spacing;
@@ -26,7 +26,7 @@ declare const _default: {
             justifyContent: "flex-end";
         };
         toolbarTitle: {
-            color: "#373A3F";
+            color: string;
             paddingLeft: import("@alveole/theme").Spacing;
             marginTop: string;
             marginBottom: string;
@@ -38,7 +38,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         toolbarState: {
-            color: "#5F6571";
+            color: string;
             userSelect: "none";
             fontVariant: "tabular-nums"[];
             fontSize: 14;
@@ -50,7 +50,7 @@ declare const _default: {
         toolbarDivider: {
             width: number;
             height: "50%";
-            backgroundColor: "#DEE3EC";
+            backgroundColor: string;
             marginTop: string;
             marginBottom: string;
         };
@@ -64,13 +64,13 @@ declare const _default: {
             flexDirection: "column";
             flex: number;
             padding: import("@alveole/theme").Spacing;
-            borderColor: "#DEE3EC";
+            borderColor: string;
             borderWidth: number;
             borderStyle: "solid";
             borderTopWidth: number;
             borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
             borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            backgroundColor: "#FFFFFF";
+            backgroundColor: string;
             overflow: "hidden";
         };
         children: {
@@ -81,13 +81,13 @@ declare const _default: {
             maxWidth: string;
             minWidth: number;
             flexShrink: number;
-            borderColor: "#DEE3EC";
+            borderColor: string;
             borderWidth: number;
             borderStyle: "solid";
             borderLeft: number;
             borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
             borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            backgroundColor: "#FFFFFF";
+            backgroundColor: string;
             overflow: "auto";
         };
         viewerImageContent: {
@@ -145,7 +145,7 @@ declare const _default: {
             display: "flex";
             alignItems: "center";
             justifyContent: "center";
-            backgroundColor: "#FFFFFF";
+            backgroundColor: string;
         };
     };
 };

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

@@ -1,12 +1,12 @@
 export declare const useStyles: () => {
     toolbar: {
         padding: import("@alveole/theme").Spacing;
-        borderColor: "#DEE3EC";
+        borderColor: string;
         borderWidth: number;
         borderStyle: "solid";
         borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        backgroundColor: "#F6F7F8";
+        backgroundColor: string;
         display: "flex";
         flexDirection: "row";
         gap: import("@alveole/theme").Spacing;
@@ -19,7 +19,7 @@ export declare const useStyles: () => {
         justifyContent: "flex-end";
     };
     toolbarTitle: {
-        color: "#373A3F";
+        color: string;
         paddingLeft: import("@alveole/theme").Spacing;
         marginTop: string;
         marginBottom: string;
@@ -31,7 +31,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     toolbarState: {
-        color: "#5F6571";
+        color: string;
         userSelect: "none";
         fontVariant: "tabular-nums"[];
         fontSize: 14;
@@ -43,7 +43,7 @@ export declare const useStyles: () => {
     toolbarDivider: {
         width: number;
         height: "50%";
-        backgroundColor: "#DEE3EC";
+        backgroundColor: string;
         marginTop: string;
         marginBottom: string;
     };
@@ -57,13 +57,13 @@ export declare const useStyles: () => {
         flexDirection: "column";
         flex: number;
         padding: import("@alveole/theme").Spacing;
-        borderColor: "#DEE3EC";
+        borderColor: string;
         borderWidth: number;
         borderStyle: "solid";
         borderTopWidth: number;
         borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        backgroundColor: "#FFFFFF";
+        backgroundColor: string;
         overflow: "hidden";
     };
     children: {
@@ -74,13 +74,13 @@ export declare const useStyles: () => {
         maxWidth: string;
         minWidth: number;
         flexShrink: number;
-        borderColor: "#DEE3EC";
+        borderColor: string;
         borderWidth: number;
         borderStyle: "solid";
         borderLeft: number;
         borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        backgroundColor: "#FFFFFF";
+        backgroundColor: string;
         overflow: "auto";
     };
     viewerImageContent: {
@@ -138,7 +138,7 @@ export declare const useStyles: () => {
         display: "flex";
         alignItems: "center";
         justifyContent: "center";
-        backgroundColor: "#FFFFFF";
+        backgroundColor: string;
     };
 };
 //# sourceMappingURL=DocumentViewer.styles.d.ts.map

package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentViewerPDF.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,4CAA4C,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAYF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA6J9D,CAAC"}
+{"version":3,"file":"DocumentViewerPDF.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,4CAA4C,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAYF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBAyJ9D,CAAC"}

package/dist/ui/DocumentViewer/DocumentViewerPDF.js

@@ -28,11 +28,8 @@ export const DocumentViewerPDF = (props) => {
     }, [onReady]);
     const onPdfLoadedSuccess = React.useCallback((documentPdf, active) => {
         if (!active)
-            return void documentPdf.destroy?.();
-        setPdf(currentPdf => {
-            void currentPdf?.destroy?.();
-            return documentPdf;
-        });
+            return;
+        setPdf(documentPdf);
         onReadyRef.current?.(documentPdf);
     }, []);
     const onPdfLoadedError = (active) => {
@@ -59,6 +56,7 @@ export const DocumentViewerPDF = (props) => {
         context.setTransform(1, 0, 0, 1, 0, 0);
         context.clearRect(0, 0, canvas.width, canvas.height);
         return pagePdf.render({
+            canvas,
             canvasContext: context,
             viewport,
             transform: pixelRatio === 1 ? undefined : [pixelRatio, 0, 0, pixelRatio, 0, 0],
@@ -66,7 +64,7 @@ export const DocumentViewerPDF = (props) => {
     }, [rotation, scale, viewerSize.height, viewerSize.width]);
     React.useEffect(() => {
         let isActive = true;
-        const loadingTask = pdfjs.getDocument(source);
+        const loadingTask = pdfjs.getDocument({ url: source });
         loadingTask.promise
             .then(nextPdf => onPdfLoadedSuccess(nextPdf, isActive))
             .catch(error => {
@@ -119,7 +117,6 @@ export const DocumentViewerPDF = (props) => {
         const y = ((event.clientY - rect.top) / rect.height) * 100;
         setTransformOrigin(`${Math.max(0, Math.min(100, x))}% ${Math.max(0, Math.min(100, y))}%`);
     }, []);
-    React.useEffect(() => () => void pdf?.destroy?.(), [pdf]);
     return (_jsx(Box, { tag: "document-viewer-pdf", width: '100%', height: height, onLayout: handleLayout, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: styles.viewerPdfContent, children: _jsx(Box, { width: '100%', height: '100%', p: '1V', style: styles.viewerPdfStage, children: Platform.OS === 'web' && (_jsx(Box, { style: [
                     styles.viewerPdfCanvasWrapper,
                     {

package/dist/ui/DragAndDropFile/DragAndDropFile.d.ts

@@ -0,0 +1,9 @@
+import { FormControlCaptionProps, FormControlFileInputProps, FormControlFileInputValue, FormControlHintProps, LucideIconProps } from '@alveole/components';
+import React from 'react';
+export type DragAndDropFileValue = FormControlFileInputValue;
+export type DragAndDropFileProps = FormControlHintProps & FormControlCaptionProps & FormControlFileInputProps & {
+    label: string;
+    icon?: LucideIconProps['name'];
+};
+export declare const DragAndDropFile: (props: DragAndDropFileProps) => React.JSX.Element;
+//# sourceMappingURL=DragAndDropFile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDropFile.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,yBAAyB,EACzB,yBAAyB,EAEzB,oBAAoB,EAIpB,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,oBAAoB,GAAG,yBAAyB,CAAC;AAC7D,MAAM,MAAM,oBAAoB,GAAG,oBAAoB,GACrD,uBAAuB,GACvB,yBAAyB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AAEJ,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAqG1D,CAAC"}

package/dist/ui/DragAndDropFile/DragAndDropFile.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControlCaption, FormControlFileInput, FormControlHint, FormControlLabel, Image, LucideIcon, } from '@alveole/components';
+import React from 'react';
+import { Alert } from '../../core/Alert';
+import { useStyles } from './DragAndDropFile.styles';
+export const DragAndDropFile = (props) => {
+    const { label, hint, icon, type, error, success, onChange, multiple } = props;
+    const styles = useStyles();
+    const [forceOpen, setForceOpen] = React.useState(false);
+    const onValueChange = value => {
+        if (type == null)
+            return onChange(value);
+        if (multiple && Array.isArray(value)) {
+            const invalidFiles = value.filter(file => {
+                const mimeType = file?.mimeType;
+                const fileName = file?.name;
+                if (mimeType == null)
+                    return true;
+                return !((type.includes('image') && mimeType.startsWith('image')) ||
+                    (type.includes('pdf') && mimeType.endsWith('pdf')) ||
+                    (type.includes('csv') &&
+                        (mimeType === 'text/csv' || mimeType === 'application/csv' || fileName?.endsWith('.csv'))));
+            });
+            if (invalidFiles.length > 0) {
+                Alert.alert({
+                    title: 'Type de fichier incorrect',
+                    message: `Certains fichiers ne sont pas pris en charge`,
+                });
+                return;
+            }
+            return onChange(value);
+        }
+        const mimeType = value?.mimeType;
+        if (mimeType == null)
+            return onChange(value);
+        const fileName = value?.name;
+        if ((type.includes('image') && mimeType.startsWith('image')) ||
+            (type.includes('pdf') && mimeType.endsWith('pdf')) ||
+            (type.includes('csv') &&
+                (mimeType === 'text/csv' || mimeType === 'application/csv' || fileName?.endsWith('.csv'))))
+            return onChange(value);
+        else {
+            Alert.alert({
+                title: 'Type de fichier incorrect',
+                message: `Le format du fichier n'est pas pris en charge`,
+            });
+        }
+    };
+    return (_jsxs(Box, { tag: "drag-and-drop-file", style: styles.container, display: "flex", flexDirection: "row", justify: "space-between", onPress: () => setForceOpen(true), children: [_jsxs(Box, { children: [_jsxs(Box, { tag: "drag-and-drop-file-icon", display: "flex", flexDirection: "row", justify: "center", gap: '050', children: [_jsx(LucideIcon, { size: "md", name: icon ?? 'Upload' }), _jsx(Box, { mt: 'auto', mb: 'auto', children: _jsx(FormControlLabel, { label: label }) })] }), _jsx(Box, { tag: "drag-and-drop-file-hint", display: "flex", flexDirection: "row", justify: "center", children: hint && _jsx(FormControlHint, { hint: hint }) }), _jsx(Box, { tag: "drag-and-drop-file-input", children: _jsx(FormControlFileInput, { ...props, hideButton: true, hideFilename: true, canChange: false, onChange: onValueChange, reopen: forceOpen, onPickStart: () => setForceOpen(false), type: type, multiple: multiple }) }), (error || success) && (_jsx(Box, { tag: "drag-and-drop-file-error", mt: '075', display: "flex", flexDirection: "row", justify: "center", children: _jsx(Box, { p: 16, children: _jsx(FormControlCaption, { ...props }) }) }))] }), _jsx(Box, { children: props.previewURL && _jsx(Image, { source: { uri: props.previewURL }, height: 40, width: 30, contentFit: "cover" }) })] }));
+};

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

@@ -0,0 +1,102 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    webOnly: true;
+    description: string;
+    component: (props: import("./DragAndDropFile").DragAndDropFileProps) => import("react").JSX.Element;
+    styleFn: () => {
+        container: {
+            borderWidth: number;
+            borderStyle: "dashed";
+            borderColor: string;
+            padding: import("@alveole/theme").Spacing;
+            borderRadius: number;
+            backgroundColor: string;
+            cursor: "pointer";
+        };
+        containerHover: {
+            borderStyle: "solid";
+            borderColor: string;
+            backgroundColor: string;
+        };
+        containerMouseHover: {
+            borderStyle: "dashed";
+            borderColor: string;
+            backgroundColor: string;
+        };
+        containerError: {
+            borderStyle: "dashed";
+            borderColor: string;
+            backgroundColor: string;
+        };
+        webError: {
+            width: "100%";
+            alignItems: "center";
+        };
+        icon: {
+            color: string;
+            backgroundColor: string;
+            padding: import("@alveole/theme").Spacing;
+            borderRadius: number;
+            width: import("@alveole/theme").Spacing;
+            height: import("@alveole/theme").Spacing;
+            marginBottom: import("@alveole/theme").Spacing;
+        };
+        filesListContainer: {
+            marginTop: import("@alveole/theme").Spacing;
+        };
+        filesListHeader: {
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "space-between";
+            alignItems: "center";
+            marginBottom: import("@alveole/theme").Spacing;
+        };
+        filesListTitle: {
+            fontWeight: "bold";
+        };
+        filesListBox: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            padding: import("@alveole/theme").Spacing;
+            backgroundColor: string;
+        };
+        fileItemContainer: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+            padding: import("@alveole/theme").Spacing;
+            marginBottom: import("@alveole/theme").Spacing;
+            backgroundColor: string;
+            borderRadius: number;
+        };
+        fileItemContainerLast: {
+            marginBottom: number;
+        };
+        fileIcon: {
+            color: string;
+        };
+        fileInfo: {
+            flex: number;
+            display: "flex";
+            flexDirection: "column";
+            gap: import("@alveole/theme").Spacing;
+        };
+        fileName: {
+            fontWeight: "bold";
+        };
+        fileSize: {
+            fontSize: number;
+            color: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Multiple: () => import("react").JSX.Element;
+export declare const WithError: () => import("react").JSX.Element;
+export * as Sources from './DragAndDropFile.stories.sources';
+//# sourceMappingURL=DragAndDropFile.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDropFile.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAEpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAErB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,mCAAmC,CAAC"}

package/dist/ui/DragAndDropFile/DragAndDropFile.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { DragAndDropFile } from './DragAndDropFile';
+import { useStyles } from './DragAndDropFile.styles';
+export default {
+    title: 'DragAndDropFile',
+    tags: ['ui'],
+    experimental: false,
+    webOnly: true,
+    description: 'Zone de dépôt de fichiers par glisser-déposer ou clic.',
+    component: DragAndDropFile,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(DragAndDropFile, { label: "Document", value: null, onChange: () => { } }), _jsx(DragAndDropFile, { label: "Image uniquement", type: "image/*", value: null, onChange: () => { } })] }));
+export const Multiple = () => (_jsx(DragAndDropFile, { label: "Documents (plusieurs)", multiple: true, value: null, onChange: () => { } }));
+export const WithError = () => (_jsx(DragAndDropFile, { label: "Document", error: "Format non support\u00E9", value: null, onChange: () => { } }));
+export * as Sources from './DragAndDropFile.stories.sources';

package/dist/ui/DragAndDropFile/DragAndDropFile.stories.sources.d.ts

@@ -0,0 +1,10 @@
+export declare const Default: () => string;
+export declare const Multiple: () => string;
+export declare const WithError: () => string;
+export declare const storySources: {
+    readonly Default: () => string;
+    readonly Multiple: () => string;
+    readonly WithError: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+//# sourceMappingURL=DragAndDropFile.stories.sources.d.ts.map

package/dist/ui/DragAndDropFile/DragAndDropFile.stories.sources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDropFile.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAsS,CAAC;AAE3T,eAAO,MAAM,QAAQ,cAA+I,CAAC;AAErK,eAAO,MAAM,SAAS,cAAwJ,CAAC;AAE/K,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/DragAndDropFile/DragAndDropFile.stories.sources.js

@@ -0,0 +1,10 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/DragAndDropFile/DragAndDropFile.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <DragAndDropFile label=\"Document\" value={null} onChange={() => {}} />\n    <DragAndDropFile label=\"Image uniquement\" type=\"image/*\" value={null} onChange={() => {}} />\n  </Box>\n);";
+export const Multiple = () => "export const Multiple = () => (\n  <DragAndDropFile label=\"Documents (plusieurs)\" multiple value={null} onChange={() => {}} />\n);";
+export const WithError = () => "export const WithError = () => (\n  <DragAndDropFile label=\"Document\" error=\"Format non supporté\" value={null} onChange={() => {}} />\n);";
+export const storySources = {
+    Default,
+    Multiple,
+    WithError,
+};

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

@@ -0,0 +1,89 @@
+export declare const useStyles: () => {
+    container: {
+        borderWidth: number;
+        borderStyle: "dashed";
+        borderColor: string;
+        padding: import("@alveole/theme").Spacing;
+        borderRadius: number;
+        backgroundColor: string;
+        cursor: "pointer";
+    };
+    containerHover: {
+        borderStyle: "solid";
+        borderColor: string;
+        backgroundColor: string;
+    };
+    containerMouseHover: {
+        borderStyle: "dashed";
+        borderColor: string;
+        backgroundColor: string;
+    };
+    containerError: {
+        borderStyle: "dashed";
+        borderColor: string;
+        backgroundColor: string;
+    };
+    webError: {
+        width: "100%";
+        alignItems: "center";
+    };
+    icon: {
+        color: string;
+        backgroundColor: string;
+        padding: import("@alveole/theme").Spacing;
+        borderRadius: number;
+        width: import("@alveole/theme").Spacing;
+        height: import("@alveole/theme").Spacing;
+        marginBottom: import("@alveole/theme").Spacing;
+    };
+    filesListContainer: {
+        marginTop: import("@alveole/theme").Spacing;
+    };
+    filesListHeader: {
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+        marginBottom: import("@alveole/theme").Spacing;
+    };
+    filesListTitle: {
+        fontWeight: "bold";
+    };
+    filesListBox: {
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        padding: import("@alveole/theme").Spacing;
+        backgroundColor: string;
+    };
+    fileItemContainer: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: import("@alveole/theme").Spacing;
+        padding: import("@alveole/theme").Spacing;
+        marginBottom: import("@alveole/theme").Spacing;
+        backgroundColor: string;
+        borderRadius: number;
+    };
+    fileItemContainerLast: {
+        marginBottom: number;
+    };
+    fileIcon: {
+        color: string;
+    };
+    fileInfo: {
+        flex: number;
+        display: "flex";
+        flexDirection: "column";
+        gap: import("@alveole/theme").Spacing;
+    };
+    fileName: {
+        fontWeight: "bold";
+    };
+    fileSize: {
+        fontSize: number;
+        color: string;
+    };
+};
+//# sourceMappingURL=DragAndDropFile.styles.d.ts.map

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

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

package/dist/ui/DragAndDropFile/DragAndDropFile.styles.js

@@ -0,0 +1,89 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color, spacing }) => ({
+    container: {
+        borderWidth: 1,
+        borderStyle: 'dashed',
+        borderColor: color.border['contrast-grey'],
+        padding: spacing('200'),
+        borderRadius: 8,
+        backgroundColor: color.alpha(color.background['alt-grey'], 0.3),
+        cursor: 'pointer',
+    },
+    containerHover: {
+        borderStyle: 'solid',
+        borderColor: color.border['disabled-grey'],
+        backgroundColor: color.alpha(color.background['alt-grey'], 0.25),
+    },
+    containerMouseHover: {
+        borderStyle: 'dashed',
+        borderColor: color.border['contrast-grey'],
+        backgroundColor: color.alpha(color.background['alt-grey'], 0.75),
+    },
+    containerError: {
+        borderStyle: 'dashed',
+        borderColor: color.alpha(color.border['plain-error'], 0.5),
+        backgroundColor: color.alpha(color.background['alt-grey'], 0.25),
+    },
+    webError: {
+        width: '100%',
+        alignItems: 'center',
+    },
+    icon: {
+        color: color.text.mention,
+        backgroundColor: color.background['alt-grey'],
+        padding: spacing('100'),
+        borderRadius: 12,
+        width: spacing('200'),
+        height: spacing('200'),
+        marginBottom: spacing('100'),
+    },
+    filesListContainer: {
+        marginTop: spacing('100'),
+    },
+    filesListHeader: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: spacing('050'),
+    },
+    filesListTitle: {
+        fontWeight: 'bold',
+    },
+    filesListBox: {
+        borderWidth: 1,
+        borderColor: color.border['default-grey'],
+        borderRadius: 8,
+        padding: spacing('050'),
+        backgroundColor: color.background.default,
+    },
+    fileItemContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing('050'),
+        padding: spacing('050'),
+        marginBottom: spacing('025'),
+        backgroundColor: color.background['alt-grey'],
+        borderRadius: 8,
+    },
+    fileItemContainerLast: {
+        marginBottom: 0,
+    },
+    fileIcon: {
+        color: color.text['default-error'],
+    },
+    fileInfo: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacing('025'),
+    },
+    fileName: {
+        fontWeight: 'bold',
+    },
+    fileSize: {
+        fontSize: 12,
+        color: color.text['default-grey'],
+    },
+}));

package/dist/ui/DragAndDropFile/DragAndDropFile.web.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DragAndDropFileProps } from './DragAndDropFile';
+export declare const DragAndDropFile: (props: DragAndDropFileProps) => React.JSX.Element;
+//# sourceMappingURL=DragAndDropFile.web.d.ts.map

package/dist/ui/DragAndDropFile/DragAndDropFile.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDropFile.web.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.web.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AA8BzD,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAyN1D,CAAC"}