tycho-components 0.2.7-SNAPSHOT-3 → 0.2.9

package/dist/AppDropzone/UploadService.d.ts

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

package/dist/Comments/types/CommentService.d.ts

@@ -1,13 +1,13 @@
 import { User } from '../../configs/types/User';
 import { Comment, CommentRequest } from './Comment';
-declare function findNotifications(uid: string, mode: string): Promise<import("axios").AxiosResponse<Comment[], any>>;
-declare function findReadNotifications(uid: string, mode: string): Promise<import("axios").AxiosResponse<Comment[], any>>;
-declare function markRead(id: string): Promise<import("axios").AxiosResponse<Comment, any>>;
-declare function update(id: string, comment: CommentRequest): Promise<import("axios").AxiosResponse<Comment, any>>;
-declare function remove(id: string): Promise<import("axios").AxiosResponse<Comment, any>>;
-declare function add(uid: string, mode: string, comment: CommentRequest, references: Record<string, string | number | boolean>, keywords?: Record<string, string | number | boolean>): Promise<import("axios").AxiosResponse<Comment, any>>;
-declare function find(uid: string, mode: string, request: Record<string, string | number | boolean>): Promise<import("axios").AxiosResponse<Comment[], any>>;
-declare function findAvailableUsers(uid: string, mode: string): Promise<import("axios").AxiosResponse<User[], any>>;
+declare function findNotifications(uid: string, mode: string): Promise<import("axios").AxiosResponse<Comment[], any, {}>>;
+declare function findReadNotifications(uid: string, mode: string): Promise<import("axios").AxiosResponse<Comment[], any, {}>>;
+declare function markRead(id: string): Promise<import("axios").AxiosResponse<Comment, any, {}>>;
+declare function update(id: string, comment: CommentRequest): Promise<import("axios").AxiosResponse<Comment, any, {}>>;
+declare function remove(id: string): Promise<import("axios").AxiosResponse<Comment, any, {}>>;
+declare function add(uid: string, mode: string, comment: CommentRequest, references: Record<string, string | number | boolean>, keywords?: Record<string, string | number | boolean>): Promise<import("axios").AxiosResponse<Comment, any, {}>>;
+declare function find(uid: string, mode: string, request: Record<string, string | number | boolean>): Promise<import("axios").AxiosResponse<Comment[], any, {}>>;
+declare function findAvailableUsers(uid: string, mode: string): Promise<import("axios").AxiosResponse<User[], any, {}>>;
 declare const CommentService: {
     add: typeof add;
     remove: typeof remove;

package/dist/Header/Header.d.ts

@@ -1,3 +1,4 @@
+import { HelpAction } from './HelpButton/HelpButton';
 import './styles.scss';
 type Props = {
     tool: string;
@@ -16,6 +17,7 @@ type Props = {
     navigateHome?: () => void;
     navigateCorpora?: (uid: string) => void;
     navigateLogout?: () => void;
+    helpActions?: HelpAction[];
 };
-export default function Header({ tool, redirect, autoload, freeAccess, hideKeyboard, hideReplaceAll, customHeader, notifications, keyboardLayout, navigateHome, navigateCorpora, navigateLogout, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Header({ tool, redirect, autoload, freeAccess, hideKeyboard, hideReplaceAll, customHeader, notifications, keyboardLayout, navigateHome, navigateCorpora, navigateLogout, helpActions, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Header/Header.js

@@ -1,24 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cx from 'classnames';
-import { useContext, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IconButton } from 'tycho-storybook';
-import { useCorpusUtils } from '../configs/useCorpusUtils';
+import HeaderNotifications from '../Comments/HeaderNotifications';
 import LanguageSelector from '../LanguageSelector';
 import VirtualKeyboard from '../VirtualKeyboard';
+import { useCorpusUtils } from '../configs/useCorpusUtils';
+import { useLoggedUtils } from '../configs/useLoggedUtils';
 import HeaderApps from './HeaderApps';
 import HeaderCorpora from './HeaderCorpora/HeaderCorpora';
 import HeaderReplaceAll from './HeaderReplaceAll';
 import HeaderUser from './HeaderUser';
+import HelpButton from './HelpButton';
 import './styles.scss';
-import HeaderNotifications from '../Comments/HeaderNotifications';
-import { useLoggedUtils } from '../configs/useLoggedUtils';
-import CommonContext from '../configs/CommonContext';
-import { tour } from '../configs/store/actions';
-const linkTutorials = 'https://www.tycho.iel.unicamp.br/home/tutorials';
-export default function Header({ tool, redirect, autoload, freeAccess, hideKeyboard, hideReplaceAll, customHeader, notifications, keyboardLayout, navigateHome, navigateCorpora, navigateLogout, }) {
+export default function Header({ tool, redirect, autoload, freeAccess, hideKeyboard, hideReplaceAll, customHeader, notifications, keyboardLayout, navigateHome, navigateCorpora, navigateLogout, helpActions, }) {
     const { t } = useTranslation('header');
-    const { dispatch } = useContext(CommonContext);
     const { getCorpus, hasCorpus } = useCorpusUtils();
     const { isLogged } = useLoggedUtils();
     const [openKeyboard, setOpenKeyboard] = useState(false);
@@ -28,9 +25,5 @@ export default function Header({ tool, redirect, autoload, freeAccess, hideKeybo
     const homeTextsClass = cx('texts', {
         pointer: navigateHome !== undefined,
     });
-    const handleHelp = () => {
-        window.open(linkTutorials, '_blank');
-        dispatch(tour(true));
-    };
-    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 })] }), customHeader, !customHeader && (_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: (e) => handleHelp() }), notifications && isLogged() && (_jsx(HeaderNotifications, { uid: notifications.ref, mode: notifications.mode })), _jsx(LanguageSelector, {}), !freeAccess && _jsx(HeaderUser, { navigateLogout: navigateLogout })] }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: keyboardLayout || 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 })] }), customHeader, !customHeader && (_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(HelpButton, { helpActions: helpActions }), notifications && isLogged() && (_jsx(HeaderNotifications, { uid: notifications.ref, mode: notifications.mode })), _jsx(LanguageSelector, {}), !freeAccess && _jsx(HeaderUser, { navigateLogout: navigateLogout })] }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: keyboardLayout || getCorpus().keyboardLayout || 'english' }))] }));
 }

package/dist/Header/HelpButton/HelpButton.d.ts

@@ -0,0 +1,10 @@
+export type HelpAction = {
+    title: string;
+    desc: string;
+    action: () => void;
+};
+type Props = {
+    helpActions?: HelpAction[];
+};
+export default function HelpButton({ helpActions }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Header/HelpButton/HelpButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from 'tycho-storybook';
+import HelpModal from './HelpModal';
+export default function HelpButton({ helpActions }) {
+    const { t } = useTranslation('header');
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { name: "live_help", size: "medium", title: t('tooltip.tutorials'), onClick: () => setOpen(true) }), open && (_jsx(HelpModal, { onClose: () => setOpen(false), helpActions: helpActions }))] }));
+}

package/dist/Header/HelpButton/HelpModal.d.ts

@@ -0,0 +1,8 @@
+import { HelpAction } from './HelpButton';
+import './style.scss';
+type Props = {
+    onClose: () => void;
+    helpActions?: HelpAction[];
+};
+export default function HelpModal({ onClose, helpActions }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Header/HelpButton/HelpModal.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Button } from 'tycho-storybook';
+import AppModal from '../../AppModal/AppModal';
+import Storage from '../../configs/Storage';
+import { useTourUtils } from '../../configs/useTourUtils';
+import './style.scss';
+export default function HelpModal({ onClose, helpActions = [] }) {
+    const { t } = useTranslation('help');
+    const { turnOn, turnOff, status } = useTourUtils();
+    const isTourActive = status();
+    const isAutoOpenEnabled = Storage.getTourAutoOpen();
+    const handleTutorials = () => {
+        window.open('https://www.tycho.iel.unicamp.br/home/tutorials', '_blank');
+        onClose();
+    };
+    const handleTourToggle = () => {
+        if (isTourActive) {
+            turnOff();
+        }
+        else {
+            turnOn();
+        }
+        onClose();
+    };
+    const handleCustomAction = (item) => {
+        item.action();
+        onClose();
+    };
+    const handleAutoOpenToggle = (event) => {
+        Storage.setTourAutoOpen(event.target.checked);
+    };
+    return (_jsxs(AppModal, { title: t('modal.title') || 'Help Center', close: onClose, hideFooter: true, className: "help-modal", children: [_jsxs("div", { className: "item", children: [_jsx("div", { className: "title", children: t('title.tutorials') }), _jsx("div", { className: "desc", children: t('description.tutorials') }), _jsx(Button, { text: t('button.open', { title: t('title.tutorials') }), size: "small", mode: "outlined", icon: "keyboard_arrow_right", onClick: handleTutorials })] }), _jsxs("div", { className: "item d-none", children: [_jsx("div", { className: "title", children: t('title.tour') }), _jsx("div", { className: "desc", children: t('description.tour') }), _jsxs("label", { className: "help-checkbox-label", children: [_jsx("input", { type: "checkbox", checked: isAutoOpenEnabled, onChange: handleAutoOpenToggle, className: "help-checkbox" }), _jsx("span", { children: t('checkbox.autoOpen') })] }), _jsx(Button, { text: t('button.open', { title: t('title.tour') }), size: "small", mode: "outlined", icon: "keyboard_arrow_right", onClick: handleTourToggle })] }), helpActions.map((item, idx) => (_jsxs("div", { className: "item", children: [_jsx("div", { className: "title", children: item.title }), _jsx("div", { className: "desc", children: item.desc }), _jsx(Button, { text: t('button.open', { title: item.title }), size: "small", mode: "outlined", icon: "keyboard_arrow_right", onClick: () => handleCustomAction(item) })] }, idx)))] }));
+}

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

@@ -0,0 +1 @@
+export { default } from './HelpButton';

package/dist/Header/HelpButton/index.js

@@ -0,0 +1 @@
+export { default } from './HelpButton';

package/dist/Header/HelpButton/style.scss

@@ -0,0 +1,55 @@
+.help-modal {
+  max-width: 60vw !important;
+  width: 60vw !important;
+
+  .body {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 16px;
+    padding: var(--spacing-300) var(--spacing-200);
+    max-height: 60vh;
+    width: 60vw;
+    overflow-y: auto;
+
+    .item {
+      display: flex;
+      flex-direction: column;
+      flex: 0 0 calc(33.333% - 11px);
+      min-height: 24vh;
+      padding: 24px 24px 16px;
+      border: 1px solid var(--border-subtle-2);
+      border-radius: var(--radius-100);
+
+      > .title {
+        @include subtitle-small-2;
+        color: var(--text-primary);
+        margin-bottom: 4px;
+      }
+
+      > .desc {
+        @include body-medium-1;
+        color: var(--text-secondary);
+        margin-bottom: 8px;
+      }
+
+      > .ds-button {
+        margin-top: auto;
+      }
+
+      .help-checkbox-label {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-100);
+        cursor: pointer;
+        user-select: none;
+        font-size: 0.875rem;
+        margin-bottom: 16px;
+
+        .help-checkbox {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}

package/dist/Header/types/CorpusService.d.ts

@@ -1,5 +1,5 @@
 import { Corpus } from '../../configs/types/Corpus';
-declare function available(): Promise<import("axios").AxiosResponse<Corpus[], any>>;
+declare function available(): Promise<import("axios").AxiosResponse<Corpus[], any, {}>>;
 declare const CorpusService: {
     available: typeof available;
 };

package/dist/Participants/types/ParticipantService.d.ts

@@ -1,8 +1,8 @@
 import { AppEditableField } from '../../AppEditable/AppEditableField';
 import Participant, { ParticipantCreateRequest } from './Participant';
-declare function add(uid: string, request: ParticipantCreateRequest): Promise<import("axios").AxiosResponse<Participant, any>>;
-declare function update(field: AppEditableField): Promise<import("axios").AxiosResponse<any, any>>;
-declare function remove(document: string, code: string, transfer?: string): Promise<import("axios").AxiosResponse<any, any>>;
+declare function add(uid: string, request: ParticipantCreateRequest): Promise<import("axios").AxiosResponse<Participant, any, {}>>;
+declare function update(field: AppEditableField): Promise<import("axios").AxiosResponse<any, any, {}>>;
+declare function remove(document: string, code: string, transfer?: string): Promise<import("axios").AxiosResponse<any, any, {}>>;
 declare const ParticipantService: {
     add: typeof add;
     update: typeof update;

package/dist/configs/Localization.d.ts

@@ -180,6 +180,16 @@ export declare const commonResources: {
             'modal.title': string;
             'error.uploading.image': string;
         };
+        help: {
+            'modal.title': string;
+            'title.tutorials': string;
+            'title.tour': string;
+            'title.autoOpen': string;
+            'description.tutorials': string;
+            'description.tour': string;
+            'checkbox.autoOpen': string;
+            'button.open': string;
+        };
     };
     'pt-BR': {
         base: {
@@ -360,6 +370,16 @@ export declare const commonResources: {
             'modal.title': string;
             'error.uploading.image': string;
         };
+        help: {
+            'modal.title': string;
+            'title.tutorials': string;
+            'title.tour': string;
+            'title.autoOpen': string;
+            'description.tutorials': string;
+            'description.tour': string;
+            'checkbox.autoOpen': string;
+            'button.open': string;
+        };
     };
     it: {
         base: {
@@ -541,6 +561,16 @@ export declare const commonResources: {
             'modal.title': string;
             'error.uploading.image': string;
         };
+        help: {
+            'modal.title': string;
+            'title.tutorials': string;
+            'title.tour': string;
+            'title.autoOpen': string;
+            'description.tutorials': string;
+            'description.tour': string;
+            'checkbox.autoOpen': string;
+            'button.open': string;
+        };
     };
 };
 export default function commonLocalization(): void;

package/dist/configs/Localization.js

@@ -9,6 +9,7 @@ import { UploadTexts } from './localization/UploadTexts';
 import { TreeTexts } from './localization/TreeTexts';
 import { SentenceTexts } from './localization/SentenceTexts';
 import { BaseTexts } from './localization/BaseTexts';
+import { HelpTexts } from './localization/HelpTexts';
 export const commonResources = {
     en: {
         base: BaseTexts.en,
@@ -19,6 +20,7 @@ export const commonResources = {
         tree: TreeTexts.en,
         sentence: SentenceTexts.en,
         upload: UploadTexts.en,
+        help: HelpTexts.en,
     },
     'pt-BR': {
         base: BaseTexts['pt-BR'],
@@ -29,6 +31,7 @@ export const commonResources = {
         sentence: SentenceTexts['pt-BR'],
         tree: TreeTexts['pt-BR'],
         upload: UploadTexts['pt-BR'],
+        help: HelpTexts['pt-BR'],
     },
     it: {
         base: BaseTexts.it,
@@ -39,6 +42,7 @@ export const commonResources = {
         sentence: SentenceTexts.it,
         tree: TreeTexts.it,
         upload: UploadTexts.it,
+        help: HelpTexts.it,
     },
 };
 export default function commonLocalization() {

package/dist/configs/Storage.d.ts

@@ -1,9 +1,15 @@
 declare function getActiveCorpus(): string | null;
 declare function setActiveCorpus(corpus: string): void;
 declare function removeActiveCorpus(): void;
+declare function getTourAutoOpen(): boolean;
+declare function setTourAutoOpen(value: boolean): void;
+declare function removeTourAutoOpen(): void;
 declare const Storage: {
     getActiveCorpus: typeof getActiveCorpus;
     setActiveCorpus: typeof setActiveCorpus;
     removeActiveCorpus: typeof removeActiveCorpus;
+    getTourAutoOpen: typeof getTourAutoOpen;
+    setTourAutoOpen: typeof setTourAutoOpen;
+    removeTourAutoOpen: typeof removeTourAutoOpen;
 };
 export default Storage;

package/dist/configs/Storage.js

@@ -1,4 +1,5 @@
 const ACTIVE_CORPUS = '@Tycho:corpus';
+const TOUR_AUTO_OPEN = '@Tycho:tourAutoOpen';
 function getActiveCorpus() {
     return localStorage.getItem(ACTIVE_CORPUS);
 }
@@ -8,9 +9,21 @@ function setActiveCorpus(corpus) {
 function removeActiveCorpus() {
     localStorage.removeItem(ACTIVE_CORPUS);
 }
+function getTourAutoOpen() {
+    return localStorage.getItem(TOUR_AUTO_OPEN) === 'true';
+}
+function setTourAutoOpen(value) {
+    localStorage.setItem(TOUR_AUTO_OPEN, String(value));
+}
+function removeTourAutoOpen() {
+    localStorage.removeItem(TOUR_AUTO_OPEN);
+}
 const Storage = {
     getActiveCorpus,
     setActiveCorpus,
     removeActiveCorpus,
+    getTourAutoOpen,
+    setTourAutoOpen,
+    removeTourAutoOpen,
 };
 export default Storage;

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

@@ -0,0 +1,32 @@
+export declare const HelpTexts: {
+    en: {
+        'modal.title': string;
+        'title.tutorials': string;
+        'title.tour': string;
+        'title.autoOpen': string;
+        'description.tutorials': string;
+        'description.tour': string;
+        'checkbox.autoOpen': string;
+        'button.open': string;
+    };
+    'pt-BR': {
+        'modal.title': string;
+        'title.tutorials': string;
+        'title.tour': string;
+        'title.autoOpen': string;
+        'description.tutorials': string;
+        'description.tour': string;
+        'checkbox.autoOpen': string;
+        'button.open': string;
+    };
+    it: {
+        'modal.title': string;
+        'title.tutorials': string;
+        'title.tour': string;
+        'title.autoOpen': string;
+        'description.tutorials': string;
+        'description.tour': string;
+        'checkbox.autoOpen': string;
+        'button.open': string;
+    };
+};

package/dist/configs/localization/HelpTexts.js

@@ -0,0 +1,32 @@
+export const HelpTexts = {
+    en: {
+        'modal.title': 'Help Center',
+        'title.tutorials': 'Tutorials',
+        'title.tour': 'Live Tour',
+        'title.autoOpen': 'Enable Auto-Open',
+        'description.tutorials': 'Access our comprehensive tutorials and documentation',
+        'description.tour': 'Start an interactive tour of the platform or enable it to open automatically',
+        'checkbox.autoOpen': 'Enable Auto-Open',
+        'button.open': 'Click to open',
+    },
+    'pt-BR': {
+        'modal.title': 'Central de Ajuda',
+        'title.tutorials': 'Tutoriais',
+        'title.tour': 'Tour ao Vivo',
+        'title.autoOpen': 'Ativar Abertura Automática',
+        'description.tutorials': 'Acesse nossos tutoriais abrangentes e documentação',
+        'description.tour': 'Inicie um tour interativo da plataforma ou ative para abrir automaticamente',
+        'checkbox.autoOpen': 'Ativar Abertura Automática',
+        'button.open': 'Clique para abrir',
+    },
+    it: {
+        'modal.title': 'Centro Assistenza',
+        'title.tutorials': 'Tutorial',
+        'title.tour': 'Tour Interattivo',
+        'title.autoOpen': 'Abilita Apertura Automatica',
+        'description.tutorials': 'Accedi ai nostri tutorial completi e alla documentazione',
+        'description.tour': 'Avvia un tour interattivo della piattaforma o abilitalo per aprirsi automaticamente',
+        'checkbox.autoOpen': 'Abilita Apertura Automatica',
+        'button.open': 'Clicca per aprire',
+    },
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.2.7-SNAPSHOT-3",
+  "version": "0.2.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -21,7 +21,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@tanstack/react-table": "^8.20.6",
-    "axios": "^1.7.7",
+    "axios": "^1.13.2",
     "classnames": "^2.5.1",
     "cytoscape": "^3.28.1",
     "cytoscape-node-edge-html-label": "^1.0.6",
@@ -79,6 +79,7 @@
     "eslint-plugin-storybook": "^0.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sass": "^1.96.0",
     "storybook": "^7.5.3",
     "typescript": "^5.7.3"
   },