tycho-components 0.0.15-SNAPSHOT-9 → 0.0.15-SNAPSHOT-11

package/dist/AppDropzone/AppDropzone.d.ts

@@ -0,0 +1,14 @@
+import './style.scss';
+import { UploadedFile } from './UploadedFile';
+type Props = {
+    folder: string;
+    onClose: () => void;
+    onSuccess: (response: UploadedFile) => void;
+    onError?: (err: any) => void;
+    accept: Record<string, string[]>;
+    onDrop?: () => void;
+    keepName?: boolean;
+    title?: string;
+};
+export default function AppDropzone({ folder, onClose, onSuccess, onError, accept, onDrop, keepName, title, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AppDropzone/AppDropzone.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Dropzone from 'react-dropzone';
+import { useTranslation } from 'react-i18next';
+import './style.scss';
+import UploadService from './UploadService';
+import { useMessageUtils } from '../configs/useMessageUtils';
+import AppModal from '../AppModal';
+export default function AppDropzone({ folder, onClose, onSuccess, onError, accept, onDrop, keepName, title, }) {
+    const { t } = useTranslation('upload');
+    const { dispatchError } = useMessageUtils();
+    const [file, setFile] = useState();
+    const [preview, setPreview] = useState();
+    const isImageFile = (file) => {
+        return file.type.startsWith('image/');
+    };
+    const handleDrop = async (files) => {
+        const file = files[0];
+        setFile(file);
+        if (isImageFile(file))
+            setPreview(URL.createObjectURL(file));
+        onDrop && onDrop();
+    };
+    const upload = async () => {
+        if (!file)
+            return;
+        const data = new FormData();
+        data.append('file', file);
+        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 });
+            onError && onError(err);
+        });
+    };
+    return (_jsx(AppModal, { title: title || t('modal.title'), className: "modal-upload", close: onClose, confirm: upload, children: _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: t('label.dropzone') })] })) })), file && preview && (_jsx("img", { className: "preview", src: preview, onLoad: () => {
+                        URL.revokeObjectURL(preview);
+                    } })), file && !preview && (_jsxs("div", { className: "uploaded-message", children: [_jsx("b", { children: t('label.uploaded.file') }), _jsx("span", { children: file.name }), _jsx("b", { children: t('label.confirm') })] }))] }) }));
+}

package/dist/AppDropzone/UploadService.d.ts

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

package/dist/AppDropzone/UploadService.js

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

package/dist/AppDropzone/UploadedFile.d.ts

@@ -0,0 +1,13 @@
+export interface UploadedFile {
+    url: string;
+    path: string;
+    filetype: string;
+    name: string;
+    original: string;
+    width?: number;
+    height?: number;
+}
+export interface UploadedPreview {
+    file: File;
+    preview: any;
+}

package/dist/AppDropzone/UploadedFile.js

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

package/dist/AppDropzone/index.d.ts

@@ -0,0 +1,2 @@
+import AppDropzone from './AppDropzone';
+export default AppDropzone;

package/dist/AppDropzone/index.js

@@ -0,0 +1,2 @@
+import AppDropzone from './AppDropzone';
+export default AppDropzone;

package/dist/AppDropzone/style.scss

@@ -0,0 +1,35 @@
+.dropzone-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .dropzone {
+    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 {
+    margin: 0 auto;
+    width: 400px;
+    height: 400px;
+  }
+
+  .uploaded-message {
+    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;
+  }
+}

package/dist/Header/Header.d.ts

@@ -8,6 +8,7 @@ type Props = {
     autoload?: boolean;
     freeAccess?: boolean;
     hideKeyboard?: boolean;
+    hideReplaceAll?: boolean;
 };
-export default function Header({ tool, navigateHome, navigateCorpora, navigateLogout, redirect, autoload, freeAccess, hideKeyboard, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Header({ tool, navigateHome, navigateCorpora, navigateLogout, redirect, autoload, freeAccess, hideKeyboard, hideReplaceAll, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Header/Header.js

@@ -8,10 +8,11 @@ import LanguageSelector from '../LanguageSelector';
 import VirtualKeyboard from '../VirtualKeyboard';
 import HeaderApps from './HeaderApps';
 import HeaderCorpora from './HeaderCorpora/HeaderCorpora';
+import HeaderReplaceAll from './HeaderReplaceAll';
 import HeaderUser from './HeaderUser';
 import './styles.scss';
 const linkTurorials = 'https://www.tycho.iel.unicamp.br/home/tutorials';
-export default function Header({ tool, navigateHome, navigateCorpora, navigateLogout, redirect, autoload, freeAccess, hideKeyboard, }) {
+export default function Header({ tool, navigateHome, navigateCorpora, navigateLogout, redirect, autoload, freeAccess, hideKeyboard, hideReplaceAll, }) {
     const { t } = useTranslation('header');
     const { getCorpus, hasCorpus } = useCorpusUtils();
     const [openKeyboard, setOpenKeyboard] = useState(false);
@@ -21,5 +22,5 @@ export default function Header({ tool, navigateHome, navigateCorpora, navigateLo
     const homeTextsClass = cx('texts', {
         pointer: navigateHome !== undefined,
     });
-    return (_jsxs("div", { className: "ds-header", children: [_jsx(HeaderApps, { freeAccess: freeAccess }), _jsxs("div", { className: homeTextsClass, onClick: () => navigateHome && navigateHome(), children: [_jsx("span", { className: "title", children: t('label.platform') }), _jsx("span", { className: "subtitle", children: tool })] }), _jsx(HeaderCorpora, { redirect: redirect, autoload: autoload, freeAccess: freeAccess, navigateCorpora: navigateCorpora }), _jsxs("div", { className: profileClass, children: [!hideKeyboard && (_jsx(IconButton, { onClick: () => setOpenKeyboard(!openKeyboard), name: "keyboard", size: "medium", title: t('tooltip.keyboard') })), _jsx(IconButton, { name: "live_help", size: "medium", title: t('tooltip.tutorials'), onClick: () => window.open(linkTurorials, '_blank') }), _jsx(LanguageSelector, {}), !freeAccess && _jsx(HeaderUser, { navigateLogout: navigateLogout })] }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: getCorpus().keyboardLayout || 'english' }))] }));
+    return (_jsxs("div", { className: "ds-header", children: [_jsx(HeaderApps, { freeAccess: freeAccess }), _jsxs("div", { className: homeTextsClass, onClick: () => navigateHome && navigateHome(), children: [_jsx("span", { className: "title", children: t('label.platform') }), _jsx("span", { className: "subtitle", children: tool })] }), _jsx(HeaderCorpora, { redirect: redirect, autoload: autoload, freeAccess: freeAccess, navigateCorpora: navigateCorpora }), _jsxs("div", { className: profileClass, children: [!hideReplaceAll && _jsx(HeaderReplaceAll, {}), !hideKeyboard && (_jsx(IconButton, { onClick: () => setOpenKeyboard(!openKeyboard), name: "keyboard", size: "medium", title: t('tooltip.keyboard') })), _jsx(IconButton, { name: "live_help", size: "medium", title: t('tooltip.tutorials'), onClick: () => window.open(linkTurorials, '_blank') }), _jsx(LanguageSelector, {}), !freeAccess && _jsx(HeaderUser, { navigateLogout: navigateLogout })] }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: getCorpus().keyboardLayout || 'english' }))] }));
 }

package/dist/Header/HeaderReplaceAll/HeaderReplaceAll.d.ts

@@ -0,0 +1,2 @@
+import './style.scss';
+export default function HeaderReplaceAll(): import("react/jsx-runtime").JSX.Element;

package/dist/Header/HeaderReplaceAll/HeaderReplaceAll.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useState } from 'react';
+import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { getCurrentInput, getCurrentOnChange } from 'tycho-storybook';
+import './style.scss';
+export default function HeaderReplaceAll() {
+    const { t } = useTranslation('header');
+    const [findValue, setFindValue] = useState('');
+    const [replaceValue, setReplaceValue] = useState('');
+    const replaceAll = (str, find, replace) => {
+        // Escape special regex characters in 'find'
+        var escapedFind = find.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+        var regex = new RegExp(escapedFind, 'g');
+        return str.replace(regex, replace);
+    };
+    const handleReplaceAll = () => {
+        const input = getCurrentInput();
+        const onChange = getCurrentOnChange();
+        if (input && onChange) {
+            const value = input.value;
+            input.value = replaceAll(value, findValue, replaceValue);
+            input.focus();
+            onChange({ target: input });
+        }
+    };
+    const popoverReplace = (_jsx(Popover, { className: "popover-replace", children: _jsxs(Popover.Body, { children: [_jsx("input", { type: "text", placeholder: t('replace.find.placeholder'), value: findValue, onChange: (e) => setFindValue(e.target.value) }), _jsx("input", { type: "text", placeholder: t('replace.placeholder'), value: replaceValue, onChange: (e) => setReplaceValue(e.target.value) }), _jsx(Button, { size: "sm", onClick: handleReplaceAll, children: "confirm" })] }) }));
+    return (_jsx(OverlayTrigger, { placement: "bottom", trigger: "click", overlay: popoverReplace, rootClose: true, children: _jsx(Button, { className: "btn-replace-all", title: t('replace.all.tooltip'), children: _jsx(FontAwesomeIcon, { icon: faArrowsRotate }) }) }));
+}

package/dist/Header/HeaderReplaceAll/index.d.ts

@@ -0,0 +1,2 @@
+import HeaderReplaceAll from './HeaderReplaceAll';
+export default HeaderReplaceAll;

package/dist/Header/HeaderReplaceAll/index.js

@@ -0,0 +1,2 @@
+import HeaderReplaceAll from './HeaderReplaceAll';
+export default HeaderReplaceAll;

package/dist/Header/HeaderReplaceAll/style.scss

@@ -0,0 +1,24 @@
+.popover-replace {
+  max-width: 10vw;
+
+  > .popover-body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-width: 10vw;
+    padding: 8px;
+  }
+}
+
+.btn-replace-all {
+  width: 40px;
+  height: 40px;
+  background: var(--button-primary-default);
+  border-radius: 0;
+  border: 0;
+  margin-right: 4px;
+
+  &:hover {
+    background: var(--button-primary-hover);
+  }
+}

package/dist/configs/Localization.d.ts

@@ -84,6 +84,9 @@ export declare const commonResources: {
             'button.close': string;
             'tooltip.keyboard': string;
             'tooltip.tutorials': string;
+            'replace.all.tooltip': string;
+            'replace.find.placeholder': string;
+            'replace.placeholder': string;
             'tag.public': string;
             'tag.private': string;
             'profile.label.hello': string;
@@ -118,6 +121,13 @@ export declare const commonResources: {
             'platform.name': string;
             'platform.desc': string;
         };
+        upload: {
+            'label.dropzone': string;
+            'label.uploaded.file': string;
+            'label.confirm': string;
+            'modal.title': string;
+            'error.uploading.image': string;
+        };
     };
     'pt-BR': {
         common: {
@@ -201,6 +211,9 @@ export declare const commonResources: {
             'button.close': string;
             'tooltip.keyboard': string;
             'tooltip.tutorials': string;
+            'replace.all.tooltip': string;
+            'replace.find.placeholder': string;
+            'replace.placeholder': string;
             'tag.public': string;
             'tag.private': string;
             'profile.label.hello': string;
@@ -235,6 +248,13 @@ export declare const commonResources: {
             'platform.name': string;
             'platform.desc': string;
         };
+        upload: {
+            'label.dropzone': string;
+            'label.uploaded.file': string;
+            'label.confirm': string;
+            'modal.title': string;
+            'error.uploading.image': string;
+        };
     };
     it: {
         header: {
@@ -248,6 +268,9 @@ export declare const commonResources: {
             'button.close': string;
             'tooltip.keyboard': string;
             'tooltip.tutorials': string;
+            'replace.all.tooltip': string;
+            'replace.find.placeholder': string;
+            'replace.placeholder': string;
             'tag.public': string;
             'tag.private': string;
             'profile.label.hello': string;

package/dist/configs/Localization.js

@@ -1,22 +1,25 @@
 import i18n from 'i18next';
 import languageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
-import { ParticipantsTexts } from './localization/ParticipantsTexts';
-import { CommonTexts } from './localization/CommonTexts';
 import { CommentsTexts } from './localization/CommentsTexts';
+import { CommonTexts } from './localization/CommonTexts';
 import { HeaderTexts } from './localization/HeaderTexts';
+import { ParticipantsTexts } from './localization/ParticipantsTexts';
+import { UploadTexts } from './localization/UploadTexts';
 export const commonResources = {
     en: {
         common: CommonTexts.en,
         participants: ParticipantsTexts.en,
         comments: CommentsTexts.en,
         header: HeaderTexts.en,
+        upload: UploadTexts.en,
     },
     'pt-BR': {
         common: CommonTexts['pt-BR'],
         participants: ParticipantsTexts['pt-BR'],
         comments: CommentsTexts['pt-BR'],
         header: HeaderTexts['pt-BR'],
+        upload: UploadTexts['pt-BR'],
     },
     it: {
         header: HeaderTexts.it,

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

@@ -10,6 +10,9 @@ export declare const HeaderTexts: {
         'button.close': string;
         'tooltip.keyboard': string;
         'tooltip.tutorials': string;
+        'replace.all.tooltip': string;
+        'replace.find.placeholder': string;
+        'replace.placeholder': string;
         'tag.public': string;
         'tag.private': string;
         'profile.label.hello': string;
@@ -54,6 +57,9 @@ export declare const HeaderTexts: {
         'button.close': string;
         'tooltip.keyboard': string;
         'tooltip.tutorials': string;
+        'replace.all.tooltip': string;
+        'replace.find.placeholder': string;
+        'replace.placeholder': string;
         'tag.public': string;
         'tag.private': string;
         'profile.label.hello': string;
@@ -99,6 +105,9 @@ export declare const HeaderTexts: {
         'button.close': string;
         'tooltip.keyboard': string;
         'tooltip.tutorials': string;
+        'replace.all.tooltip': string;
+        'replace.find.placeholder': string;
+        'replace.placeholder': string;
         'tag.public': string;
         'tag.private': string;
         'profile.label.hello': string;

package/dist/configs/localization/HeaderTexts.js

@@ -10,6 +10,9 @@ export const HeaderTexts = {
         'button.close': 'Close',
         'tooltip.keyboard': 'Open Virtual Keyboard',
         'tooltip.tutorials': 'Views Tutorials',
+        'replace.all.tooltip': 'Replace All',
+        'replace.find.placeholder': 'Find',
+        'replace.placeholder': 'Replace',
         'tag.public': 'Public',
         'tag.private': 'Private',
         'profile.label.hello': 'Hello,',
@@ -54,6 +57,9 @@ export const HeaderTexts = {
         'button.close': 'Fechar',
         'tooltip.keyboard': 'Abrir Teclado Virtual',
         'tooltip.tutorials': 'Ver tutoriais',
+        'replace.all.tooltip': 'Substituir Todos',
+        'replace.find.placeholder': 'Procurar',
+        'replace.placeholder': 'Substituir',
         'tag.public': 'Público',
         'tag.private': 'Privado',
         'profile.label.hello': 'Olá,',
@@ -99,6 +105,9 @@ export const HeaderTexts = {
         'button.close': 'Chiudi',
         'tooltip.keyboard': 'Apri tastiera virtuale',
         'tooltip.tutorials': 'Visualizza i tutorial',
+        'replace.all.tooltip': 'Sostituisci tutto',
+        'replace.find.placeholder': 'Trova',
+        'replace.placeholder': 'Sostituisci',
         'tag.public': 'Pubblico',
         'tag.private': 'Privato',
         'profile.label.hello': 'Ciao,',

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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,23 @@
+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/functions/CorpusUtils.d.ts

@@ -0,0 +1,5 @@
+import { Corpus } from '../configs/Corpus';
+declare const CorpusUtils: {
+    hasParameter: (corpus: Corpus, param: string) => boolean;
+};
+export default CorpusUtils;

package/dist/functions/CorpusUtils.js

@@ -0,0 +1,7 @@
+const hasParameter = (corpus, param) => {
+    return corpus.parameters[param];
+};
+const CorpusUtils = {
+    hasParameter,
+};
+export default CorpusUtils;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { default as AppAnalytics } from './AppAnalytics';
 export { default as AppColorpicker } from './AppColorpicker';
+export { default as AppDropzone } from './AppDropzone';
 export { default as AppEditable } from './AppEditable';
 export { default as AppLoading } from './AppLoading';
 export { default as AppModal } from './AppModal';
@@ -24,6 +25,7 @@ export { commonResources } from './configs/Localization';
 export { KeyboardCustomLayouts } from './VirtualKeyboard/KeyboardCustomLayout';
 export { CorpusImageTypeNames } from './configs/CorpusImage';
 export { UserStatusNames } from './configs/User';
+export { default as CorpusUtils } from './functions/CorpusUtils';
 export { default as DateUtils } from './functions/DateUtils';
 export { default as FormUtils } from './functions/FormUtils';
 export { default as ImageUtils } from './functions/ImageUtils';
@@ -38,5 +40,6 @@ export type { Github } from './configs/Corpus';
 export type { FormFieldOption } from './AppEditable/FormFieldOption';
 export type { FieldOperations, FormField } from './AppEditable/FormField';
 export type { KeyboardLayout } from './VirtualKeyboard/KeyboardCustomLayout';
+export type { UploadedFile } from './AppDropzone/UploadedFile';
 export type { User } from './configs/User';
 export type { UserStatus } from './configs/User';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { default as AppAnalytics } from './AppAnalytics';
 export { default as AppColorpicker } from './AppColorpicker';
+export { default as AppDropzone } from './AppDropzone';
 export { default as AppEditable } from './AppEditable';
 export { default as AppLoading } from './AppLoading';
 export { default as AppModal } from './AppModal';
@@ -24,6 +25,7 @@ export { commonResources } from './configs/Localization';
 export { KeyboardCustomLayouts } from './VirtualKeyboard/KeyboardCustomLayout';
 export { CorpusImageTypeNames } from './configs/CorpusImage';
 export { UserStatusNames } from './configs/User';
+export { default as CorpusUtils } from './functions/CorpusUtils';
 export { default as DateUtils } from './functions/DateUtils';
 export { default as FormUtils } from './functions/FormUtils';
 export { default as ImageUtils } from './functions/ImageUtils';

package/package.json

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