tycho-components 0.37.2 → 0.38.0

package/dist/common/AppDropzone/AppDropzone.d.ts

@@ -7,6 +7,7 @@ type Props = {
     accept: Record<string, string[]>;
     messages?: Partial<Record<'label.dropzone' | 'label.uploaded.file', string>>;
     onDrop?: () => void;
+    /** Initial value for the keep-original-name checkbox (default false). */
     keepName?: boolean;
     title?: string;
     alternativeButton?: {

package/dist/common/AppDropzone/AppDropzoneBody.d.ts

@@ -7,6 +7,7 @@ export type AppDropzoneBodyProps = {
     accept: Record<string, string[]>;
     messages?: Partial<Record<'label.dropzone' | 'label.uploaded.file', string>>;
     onDrop?: () => void;
+    /** Initial value for the keep-original-name checkbox (default false). */
     keepName?: boolean;
     /** When false, the confirm button is hidden (e.g. when used inside modal with its own confirm) */
     showConfirmButton?: boolean;

package/dist/common/AppDropzone/AppDropzoneBody.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState, } from 'react';
 import Dropzone from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
@@ -6,16 +8,25 @@ import { Button } from 'tycho-storybook';
 import CommonContext from '../../configs/CommonContext';
 import { toastLoading } from '../../configs/store/actions';
 import { useMessageUtils } from '../../configs/useMessageUtils';
+import AppModalConfirm from '../AppModal/AppModalConfirm';
 import UploadService from './UploadService';
 import './style.scss';
-function AppDropzoneBodyInner({ folder, onSuccess, onError, accept, messages, onDrop, keepName, showConfirmButton = true, disablePreview = false, disableConfirm = false, }, ref) {
+function isFileAlreadyExistsError(err) {
+    return (err?.response?.status === 409 &&
+        err?.response?.data?.description === 'upload.file.already.exists');
+}
+function AppDropzoneBodyInner({ folder, onSuccess, onError, accept, messages, onDrop, keepName = false, showConfirmButton = true, disablePreview = false, disableConfirm = false, }, ref) {
     const { t } = useTranslation('upload');
     const { state, dispatch } = useContext(CommonContext);
     const { dispatchError } = useMessageUtils();
     const [file, setFile] = useState();
     const [preview, setPreview] = useState();
+    const [keepOriginalName, setKeepOriginalName] = useState(keepName);
+    const [replaceConfirmOpen, setReplaceConfirmOpen] = useState(false);
     const fileRef = useRef();
+    const keepOriginalNameRef = useRef(keepOriginalName);
     fileRef.current = file;
+    keepOriginalNameRef.current = keepOriginalName;
     const isImageFile = (f) => {
         return f.type?.startsWith('image/') ?? false;
     };
@@ -31,29 +42,63 @@ function AppDropzoneBodyInner({ folder, onSuccess, onError, accept, messages, on
         }
         setPreview(undefined);
     }, [file, disablePreview]);
-    const upload = async () => {
+    const buildUploadFormData = (currentFile, replace) => {
+        const data = new FormData();
+        data.append('file', currentFile);
+        data.append('folder', folder);
+        if (keepOriginalNameRef.current) {
+            data.append('keepOriginalName', 'true');
+        }
+        if (replace) {
+            data.append('replace', 'true');
+        }
+        return data;
+    };
+    const executeUpload = async (currentFile, replace) => {
+        const response = await UploadService.execute(buildUploadFormData(currentFile, replace));
+        onSuccess(response.data);
+    };
+    const upload = async (replace = false) => {
         const currentFile = fileRef.current;
         if (!currentFile || state.toastLoading)
             return;
         dispatch(toastLoading(true));
-        const data = new FormData();
-        data.append('file', currentFile);
-        data.append('folder', folder);
-        keepName && data.append('keepOriginalName', 'true');
-        UploadService.execute(data)
-            .then((r) => {
-            onSuccess(r.data);
-        })
-            .catch((err) => {
-            dispatchError({ err: 'error.uploading.image', t, key: 'upload' });
+        try {
+            if (keepOriginalNameRef.current && !replace) {
+                const validateData = new FormData();
+                validateData.append('folder', folder);
+                validateData.append('filename', currentFile.name);
+                validateData.append('keepOriginalName', 'true');
+                try {
+                    await UploadService.validate(validateData);
+                }
+                catch (err) {
+                    if (isFileAlreadyExistsError(err)) {
+                        dispatch(toastLoading(false));
+                        setReplaceConfirmOpen(true);
+                        return;
+                    }
+                    dispatchError({ err, t, key: 'upload' });
+                    onError?.(err);
+                    return;
+                }
+            }
+            await executeUpload(currentFile, replace);
+        }
+        catch (err) {
+            if (!replace && isFileAlreadyExistsError(err)) {
+                setReplaceConfirmOpen(true);
+                return;
+            }
+            dispatchError({ err, t, key: 'upload' });
             onError?.(err);
-        })
-            .finally(() => {
+        }
+        finally {
             dispatch(toastLoading(false));
-        });
+        }
     };
     useImperativeHandle(ref, () => ({
-        upload,
+        upload: () => upload(false),
     }));
     const handleDrop = (files) => {
         if (files.length === 0)
@@ -64,11 +109,17 @@ function AppDropzoneBodyInner({ folder, onSuccess, onError, accept, messages, on
     const handleCancel = () => {
         setFile(undefined);
     };
+    const handleReplaceConfirm = () => {
+        setReplaceConfirmOpen(false);
+        upload(true);
+    };
     const resolveMessage = (key) => {
         const customMessage = messages?.[key]?.trim();
         return customMessage || t(key);
     };
-    return (_jsxs("div", { className: "dropzone-container", children: [!file && (_jsx(Dropzone, { onDrop: (acceptedFiles) => handleDrop(acceptedFiles), accept: accept, maxFiles: 1, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: resolveMessage('label.dropzone') })] })) })), file && (_jsxs("div", { className: "uploaded-file", children: [preview && _jsx("img", { className: "preview", src: preview, alt: "" }), !preview && (_jsxs(_Fragment, { children: [_jsx("b", { children: resolveMessage('label.uploaded.file') }), _jsx("span", { children: file.name })] })), showConfirmButton && (_jsxs("div", { className: "buttons", children: [_jsx(Button, { onClick: handleCancel, text: t('common:button.cancel'), size: "small", mode: "outlined", color: "danger" }), _jsx(Button, { onClick: upload, text: t('common:button.confirm'), size: "small", mode: "outlined", disabled: disableConfirm })] }))] }))] }));
+    return (_jsxs("div", { className: "dropzone-container", children: [!file && (_jsx(Dropzone, { onDrop: (acceptedFiles) => handleDrop(acceptedFiles), accept: accept, maxFiles: 1, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: resolveMessage('label.dropzone') })] })) })), file && (_jsxs("div", { className: "uploaded-file", children: [preview && _jsx("img", { className: "preview", src: preview, alt: "" }), !preview && (_jsxs(_Fragment, { children: [_jsx("b", { children: resolveMessage('label.uploaded.file') }), _jsx("span", { children: file.name })] })), showConfirmButton && (_jsxs("div", { className: "buttons", children: [_jsx(Button, { onClick: handleCancel, text: t('common:button.cancel'), size: "small", mode: "outlined", color: "danger" }), _jsx(Button, { onClick: () => upload(false), text: t('common:button.confirm'), size: "small", mode: "outlined", disabled: disableConfirm })] }))] })), _jsx(FormControlLabel, { className: "keep-name-checkbox", control: _jsx(Checkbox, { checked: keepOriginalName, onChange: (_, checked) => setKeepOriginalName(checked) }), label: t('label.keep.original.name') }), replaceConfirmOpen && (_jsx(AppModalConfirm, { title: t('replace.confirm.title'), subtitle: t('replace.confirm.subtitle', {
+                    0: fileRef.current?.name ?? '',
+                }), onClose: () => setReplaceConfirmOpen(false), onConfirm: handleReplaceConfirm }))] }));
 }
 const AppDropzoneBody = forwardRef(AppDropzoneBodyInner);
 export default AppDropzoneBody;

package/dist/common/AppDropzone/UploadService.d.ts

@@ -1,6 +1,8 @@
 import { UploadedFile } from './UploadedFile';
 declare function execute(data: FormData): Promise<import("axios").AxiosResponse<UploadedFile, any, {}>>;
+declare function validate(data: FormData): Promise<import("axios").AxiosResponse<any, any, {}>>;
 declare const UploadService: {
     execute: typeof execute;
+    validate: typeof validate;
 };
 export default UploadService;

package/dist/common/AppDropzone/UploadService.js

@@ -5,14 +5,18 @@ const getJwtToken = () => {
     const cookie = Cookies.get(JWT_TOKEN);
     return cookie === 'undefined' ? '' : cookie;
 };
+const authHeaders = () => ({
+    Authorization: `Bearer ${getJwtToken() || ''}`,
+});
 function execute(data) {
-    const token = getJwtToken() || '';
-    const header = {
-        Authorization: `Bearer ${token}`,
-    };
     return axios.post(import.meta.env.VITE_APP_UPLOAD_URL, data, {
-        headers: header,
+        headers: authHeaders(),
     });
 }
-const UploadService = { execute };
+function validate(data) {
+    return axios.post(`${import.meta.env.VITE_APP_UPLOAD_URL}/validate`, data, {
+        headers: authHeaders(),
+    });
+}
+const UploadService = { execute, validate };
 export default UploadService;

package/dist/common/AppDropzone/style.scss

@@ -1,14 +1,22 @@
 .dropzone-container {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: var(--spacing-200);
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
 
   .dropzone {
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
+    box-sizing: border-box;
     width: 100%;
+    max-width: 100%;
     padding: var(--spacing-700);
     border-radius: var(--radius-100);
     border: 2px dashed var(--border-subtle-3);
@@ -26,17 +34,27 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    box-sizing: border-box;
     width: 100%;
+    max-width: 100%;
     text-align: center;
     border: 1px solid var(--border-subtle-3);
     border-radius: var(--radius-100);
-    padding: 16px;
-    gap: 16px;
+    padding: var(--spacing-200);
+    gap: var(--spacing-200);
 
     .buttons {
       display: flex;
-      gap: 16px;
-      margin-top: 16px;
+      gap: var(--spacing-200);
+      margin-top: var(--spacing-200);
+    }
+  }
+
+  .keep-name-checkbox {
+    align-self: flex-start;
+
+    > .MuiCheckbox-root {
+      padding: 0px 8px;
     }
   }
 }

package/dist/configs/localization/UploadTexts.d.ts

@@ -3,21 +3,51 @@ export declare const UploadTexts: {
         'label.dropzone': string;
         'label.uploaded.file': string;
         'label.confirm': string;
+        'label.keep.original.name': string;
         'modal.title': string;
         'error.uploading.image': string;
+        'upload.file.already.exists': string;
+        'replace.confirm.title': string;
+        'replace.confirm.subtitle': string;
+        'upload.file.read.error': string;
+        'upload.file.type.detect.error': string;
+        'upload.file.type.unknown': string;
+        'upload.file.threat.detected': string;
+        'upload.file.write.error': string;
+        'upload.file.name.required': string;
     };
     'pt-BR': {
         'label.dropzone': string;
         'label.uploaded.file': string;
         'label.confirm': string;
+        'label.keep.original.name': string;
         'modal.title': string;
         'error.uploading.image': string;
+        'upload.file.already.exists': string;
+        'replace.confirm.title': string;
+        'replace.confirm.subtitle': string;
+        'upload.file.read.error': string;
+        'upload.file.type.detect.error': string;
+        'upload.file.type.unknown': string;
+        'upload.file.threat.detected': string;
+        'upload.file.write.error': string;
+        'upload.file.name.required': string;
     };
     it: {
         'label.dropzone': string;
         'label.uploaded.file': string;
         'label.confirm': string;
+        'label.keep.original.name': string;
         'modal.title': string;
         'error.uploading.image': string;
+        'upload.file.already.exists': string;
+        'replace.confirm.title': string;
+        'replace.confirm.subtitle': string;
+        'upload.file.read.error': string;
+        'upload.file.type.detect.error': string;
+        'upload.file.type.unknown': string;
+        'upload.file.threat.detected': string;
+        'upload.file.write.error': string;
+        'upload.file.name.required': string;
     };
 };

package/dist/configs/localization/UploadTexts.js

@@ -3,21 +3,51 @@ export const UploadTexts = {
         'label.dropzone': 'Drag and drop or click to upload a file',
         'label.uploaded.file': 'You are uploading the following file:',
         'label.confirm': 'Press confirm to continue',
+        'label.keep.original.name': 'Keep original file name',
         'modal.title': 'Upload a file',
         'error.uploading.image': 'An error occurred while uploading a file. Contact the administrator.',
+        'upload.file.already.exists': 'A file named "{{0}}" already exists in this folder.',
+        'replace.confirm.title': 'Replace existing file?',
+        'replace.confirm.subtitle': 'A file named "{{0}}" already exists. Do you want to replace it?',
+        'upload.file.read.error': 'Could not read the uploaded file.',
+        'upload.file.type.detect.error': 'Could not detect the file type.',
+        'upload.file.type.unknown': 'Unknown file type; upload is not allowed.',
+        'upload.file.threat.detected': 'This file type is not allowed.',
+        'upload.file.write.error': 'Could not save the uploaded file.',
+        'upload.file.name.required': 'A file name is required for validation.',
     },
     'pt-BR': {
         'label.dropzone': 'Arraste e solte ou clique para enviar um arquivo.',
         'label.uploaded.file': 'Você está enviando o seguinte arquivo:',
         'label.confirm': 'Pressione confirmar para continuar',
+        'label.keep.original.name': 'Manter o nome original do arquivo',
         'modal.title': 'Upload de arquivo',
         'error.uploading.image': 'Ocorreu um erro ao enviar o arquivo. Entre em contato com o administrador.',
+        'upload.file.already.exists': 'Já existe um arquivo chamado "{{0}}" nesta pasta.',
+        'replace.confirm.title': 'Substituir arquivo existente?',
+        'replace.confirm.subtitle': 'Já existe um arquivo chamado "{{0}}". Deseja substituí-lo?',
+        'upload.file.read.error': 'Não foi possível ler o arquivo enviado.',
+        'upload.file.type.detect.error': 'Não foi possível detectar o tipo do arquivo.',
+        'upload.file.type.unknown': 'Tipo de arquivo desconhecido; o envio não é permitido.',
+        'upload.file.threat.detected': 'Este tipo de arquivo não é permitido.',
+        'upload.file.write.error': 'Não foi possível salvar o arquivo enviado.',
+        'upload.file.name.required': 'É necessário informar o nome do arquivo para validação.',
     },
     it: {
         'label.dropzone': 'Trascina e rilascia o clicca per caricare un file',
         'label.uploaded.file': 'Stai caricando il seguente file:',
         'label.confirm': 'Premi conferma per continuare',
+        'label.keep.original.name': 'Mantieni il nome originale del file',
         'modal.title': 'Carica un file',
         'error.uploading.image': "Si è verificato un errore durante il caricamento del file. Contatta l'amministratore.",
+        'upload.file.already.exists': 'Esiste già un file chiamato "{{0}}" in questa cartella.',
+        'replace.confirm.title': 'Sostituire il file esistente?',
+        'replace.confirm.subtitle': 'Esiste già un file chiamato "{{0}}". Vuoi sostituirlo?',
+        'upload.file.read.error': 'Impossibile leggere il file caricato.',
+        'upload.file.type.detect.error': 'Impossibile rilevare il tipo di file.',
+        'upload.file.type.unknown': 'Tipo di file sconosciuto; il caricamento non è consentito.',
+        'upload.file.threat.detected': 'Questo tipo di file non è consentito.',
+        'upload.file.write.error': 'Impossibile salvare il file caricato.',
+        'upload.file.name.required': 'Il nome del file è obbligatorio per la convalida.',
     },
 };

package/dist/configs/types/User.d.ts

@@ -20,4 +20,5 @@ export type User = {
     permissions: string[];
     login?: string;
     liveTour?: boolean;
+    settings?: Record<string, any>;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.37.2",
+  "version": "0.38.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -82,7 +82,7 @@
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
     "react-toastify": "^9.1.3",
-    "tycho-storybook": "0.10.15",
+    "tycho-storybook": "0.10.16",
     "wavesurfer-react": "^2.2.2",
     "wavesurfer.js": "^6.6.3"
   },
@@ -111,7 +111,7 @@
     "react-toastify": "^9.1.3",
     "sass-embedded": "^1.97.2",
     "storybook": "^10.1.11",
-    "tycho-storybook": "^0.10.15",
+    "tycho-storybook": "^0.10.16",
     "typescript": "^5.7.3",
     "vite": "^7.0.0",
     "vitest": "^3.2.6",