tycho-components 0.19.16 → 0.19.17

package/dist/AppDropzoneLocal/AppDropzoneBodyLocal.d.ts

@@ -0,0 +1,15 @@
+import './style.scss';
+import type { UploadedFileLocal } from './UploadedFileLocal';
+export type AppDropzoneBodyLocalProps = {
+    onSuccess: (files: UploadedFileLocal[]) => void;
+    onError?: (err: unknown) => void;
+    accept: Record<string, string[]>;
+    onDrop?: () => void;
+    /** When false, the confirm button is hidden (e.g. when used inside modal with its own confirm) */
+    showConfirmButton?: boolean;
+};
+export type AppDropzoneBodyLocalRef = {
+    upload: () => Promise<void>;
+};
+declare const AppDropzoneBodyLocal: import("react").ForwardRefExoticComponent<AppDropzoneBodyLocalProps & import("react").RefAttributes<AppDropzoneBodyLocalRef>>;
+export default AppDropzoneBodyLocal;

package/dist/AppDropzoneLocal/AppDropzoneBodyLocal.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import Dropzone from 'react-dropzone';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'tycho-storybook';
+import './style.scss';
+function AppDropzoneBodyLocalInner({ onSuccess, onError, accept, onDrop, showConfirmButton = true, }, ref) {
+    const { t } = useTranslation('upload');
+    const [files, setFiles] = useState([]);
+    const [isUploading, setIsUploading] = useState(false);
+    const filesRef = useRef([]);
+    filesRef.current = files;
+    const upload = async () => {
+        const currentFiles = filesRef.current;
+        if (currentFiles.length === 0 || isUploading)
+            return;
+        setIsUploading(true);
+        try {
+            const results = await Promise.all(currentFiles.map(async (file) => ({
+                name: file.name,
+                content: await file.text(),
+            })));
+            onSuccess(results);
+        }
+        catch (err) {
+            onError?.(err);
+        }
+        finally {
+            setIsUploading(false);
+        }
+    };
+    useImperativeHandle(ref, () => ({
+        upload,
+    }));
+    const handleDrop = (acceptedFiles) => {
+        if (acceptedFiles.length === 0)
+            return;
+        setFiles((prev) => [...prev, ...acceptedFiles]);
+        onDrop?.();
+    };
+    const clearFiles = () => setFiles([]);
+    const removeAt = (index) => {
+        setFiles((prev) => prev.filter((_, i) => i !== index));
+    };
+    return (_jsxs("div", { className: "dropzone-container-local", children: [files.length === 0 && (_jsx(Dropzone, { onDrop: handleDrop, accept: accept, multiple: true, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone-local", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: t('label.dropzone') })] })) })), files.length > 0 && (_jsxs("div", { className: "uploaded-message-local", children: [_jsx("b", { children: t('label.uploaded.file') }), _jsx("ul", { className: "uploaded-file-list-local", children: files.map((file, index) => (_jsxs("li", { children: [_jsx("span", { children: file.name }), _jsx("button", { type: "button", className: "uploaded-file-remove-local", onClick: (e) => {
+                                        e.stopPropagation();
+                                        removeAt(index);
+                                    }, "aria-label": t('common:button.remove', {
+                                        defaultValue: 'Remove',
+                                    }), children: "\u00D7" })] }, `${file.name}-${file.size}-${index}`))) }), _jsx("button", { type: "button", className: "uploaded-clear-all-local", onClick: clearFiles, children: t('label.clear.all', { defaultValue: 'Clear all' }) }), _jsx("b", { children: t('label.confirm') })] })), files.length > 0 && showConfirmButton && (_jsx(Button, { onClick: () => {
+                    void upload();
+                }, text: t('common:button.confirm') }))] }));
+}
+const AppDropzoneBodyLocal = forwardRef(AppDropzoneBodyLocalInner);
+export default AppDropzoneBodyLocal;

package/dist/AppDropzoneLocal/AppDropzoneLocal.d.ts

@@ -0,0 +1,15 @@
+import type { UploadedFileLocal } from './UploadedFileLocal';
+type AppDropzoneLocalProps = {
+    onClose: () => void;
+    onSuccess: (files: UploadedFileLocal[]) => void;
+    onError?: (err: unknown) => void;
+    accept: Record<string, string[]>;
+    onDrop?: () => void;
+    title?: string;
+    alternativeButton?: {
+        title: string;
+        action: () => void;
+    };
+};
+export default function AppDropzoneLocal({ onClose, onSuccess, onError, accept, onDrop, title, alternativeButton, }: AppDropzoneLocalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AppDropzoneLocal/AppDropzoneLocal.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import AppModal from '../AppModal';
+import AppDropzoneBodyLocal from './AppDropzoneBodyLocal';
+export default function AppDropzoneLocal({ onClose, onSuccess, onError, accept, onDrop, title, alternativeButton, }) {
+    const { t } = useTranslation('upload');
+    const bodyRef = useRef(null);
+    const handleConfirm = () => {
+        void bodyRef.current?.upload();
+    };
+    return (_jsx(AppModal, { title: title || t('modal.title'), className: "modal-upload-local", close: onClose, confirm: handleConfirm, alternativeButton: alternativeButton, children: _jsx(AppDropzoneBodyLocal, { ref: bodyRef, onSuccess: onSuccess, onError: onError, accept: accept, onDrop: onDrop, showConfirmButton: false }) }));
+}

package/dist/AppDropzoneLocal/UploadedFileLocal.d.ts

@@ -0,0 +1,5 @@
+/** One text file selected in the dropzone, with UTF-8 content read client-side. */
+export interface UploadedFileLocal {
+    name: string;
+    content: string;
+}

package/dist/AppDropzoneLocal/UploadedFileLocal.js

@@ -0,0 +1 @@
+export {};

package/dist/AppDropzoneLocal/index.d.ts

@@ -0,0 +1,5 @@
+import AppDropzoneLocal from './AppDropzoneLocal';
+import AppDropzoneBodyLocal, { type AppDropzoneBodyLocalProps, type AppDropzoneBodyLocalRef } from './AppDropzoneBodyLocal';
+import type { UploadedFileLocal } from './UploadedFileLocal';
+export default AppDropzoneLocal;
+export { AppDropzoneBodyLocal, type AppDropzoneBodyLocalProps, type AppDropzoneBodyLocalRef, type UploadedFileLocal, };

package/dist/AppDropzoneLocal/index.js

@@ -0,0 +1,4 @@
+import AppDropzoneLocal from './AppDropzoneLocal';
+import AppDropzoneBodyLocal from './AppDropzoneBodyLocal';
+export default AppDropzoneLocal;
+export { AppDropzoneBodyLocal, };

package/dist/AppDropzoneLocal/style.scss

@@ -0,0 +1,75 @@
+.dropzone-container-local {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .dropzone-local {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    padding: var(--spacing-700);
+    border-radius: var(--radius-100);
+    border: 2px dashed var(--border-subtle-3);
+    background-color: var(--layer-layer-2);
+    cursor: pointer;
+  }
+
+  .preview-local {
+    margin: 0 auto;
+    width: 400px;
+    height: 400px;
+  }
+
+  .uploaded-message-local {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 16px;
+    text-align: center;
+    border: 1px solid var(--border-subtle-3);
+    border-radius: var(--radius-100);
+    padding: 16px;
+    margin-top: var(--spacing-400);
+  }
+
+  .uploaded-file-list-local {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+    border: var(--border-default);
+    padding: 8px;
+    border-radius: var(--radius-100);
+
+    li {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 4px 0;
+    }
+  }
+
+  .uploaded-file-remove-local {
+    flex-shrink: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 1.25rem;
+    line-height: 1;
+    padding: 0 4px;
+    color: var(--text-secondary, inherit);
+  }
+
+  .uploaded-clear-all-local {
+    align-self: center;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    text-decoration: underline;
+    font: inherit;
+    color: var(--text-link, inherit);
+  }
+}

package/dist/configs/Localization.d.ts

@@ -230,6 +230,7 @@ export declare const commonResources: {
         upload: {
             'label.dropzone': string;
             'label.uploaded.file': string;
+            'label.confirm': string;
             'modal.title': string;
             'error.uploading.image': string;
         };
@@ -549,6 +550,7 @@ export declare const commonResources: {
         upload: {
             'label.dropzone': string;
             'label.uploaded.file': string;
+            'label.confirm': string;
             'modal.title': string;
             'error.uploading.image': string;
         };
@@ -870,6 +872,7 @@ export declare const commonResources: {
         upload: {
             'label.dropzone': string;
             'label.uploaded.file': string;
+            'label.confirm': string;
             'modal.title': string;
             'error.uploading.image': string;
         };

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

@@ -2,18 +2,21 @@ export declare const UploadTexts: {
     en: {
         'label.dropzone': string;
         'label.uploaded.file': string;
+        'label.confirm': string;
         'modal.title': string;
         'error.uploading.image': string;
     };
     'pt-BR': {
         'label.dropzone': string;
         'label.uploaded.file': string;
+        'label.confirm': string;
         'modal.title': string;
         'error.uploading.image': string;
     };
     it: {
         'label.dropzone': string;
         'label.uploaded.file': string;
+        'label.confirm': string;
         'modal.title': string;
         'error.uploading.image': string;
     };

package/dist/configs/localization/UploadTexts.js

@@ -2,18 +2,21 @@ export const UploadTexts = {
     en: {
         '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',
         'modal.title': 'Upload a file',
         'error.uploading.image': 'An error occurred while uploading a file. Contact the administrator.',
     },
     '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',
         'modal.title': 'Upload de arquivo',
         'error.uploading.image': 'Ocorreu um erro ao enviar o arquivo. Entre em contato com o administrador.',
     },
     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',
         'modal.title': 'Carica un file',
         'error.uploading.image': "Si è verificato un errore durante il caricamento del file. Contatta l'amministratore.",
     },

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { default as AppClipboard } from './AppClipboard';
 export { default as AppColorpicker } from './AppColorpicker';
 export { default as AppDropzone, AppDropzoneBody, type AppDropzoneBodyProps, type AppDropzoneBodyRef, } from './AppDropzone';
 export type { UploadedFile } from './AppDropzone/UploadedFile';
+export { default as AppDropzoneLocal, AppDropzoneBodyLocal, type AppDropzoneBodyLocalProps, type AppDropzoneBodyLocalRef, type UploadedFileLocal, } from './AppDropzoneLocal';
 export { default as AppEditable } from './AppEditable';
 export type { AppEditableField } from './AppEditable/AppEditableField';
 export { validateFormField } from './AppEditable/FormField';

package/dist/index.js

@@ -3,6 +3,7 @@ export { default as AppCard } from './AppCard/AppCard';
 export { default as AppClipboard } from './AppClipboard';
 export { default as AppColorpicker } from './AppColorpicker';
 export { default as AppDropzone, AppDropzoneBody, } from './AppDropzone';
+export { default as AppDropzoneLocal, AppDropzoneBodyLocal, } from './AppDropzoneLocal';
 export { default as AppEditable } from './AppEditable';
 export { validateFormField } from './AppEditable/FormField';
 export { default as AppForm } from './AppForm/AppForm';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.19.16",
+  "version": "0.19.17",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {