tycho-components 0.8.21 → 0.8.23

package/dist/Header/Header.d.ts

@@ -17,7 +17,8 @@ type Props = {
     navigateHome?: () => void;
     navigateCorpora?: (uid: string) => void;
     navigateLogout?: () => void;
+    navigateNotLogged?: () => void;
     helpActions?: HelpAction[];
 };
-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 default function Header({ tool, redirect, autoload, freeAccess, hideKeyboard, hideReplaceAll, customHeader, notifications, keyboardLayout, navigateHome, navigateCorpora, navigateLogout, navigateNotLogged, helpActions, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Header/Header.js

@@ -14,16 +14,15 @@ import HeaderReplaceAll from './HeaderReplaceAll';
 import HeaderUser from './HeaderUser';
 import HelpButton from './HelpButton';
 import './styles.scss';
-export default function Header({ tool, redirect, autoload, freeAccess, hideKeyboard, hideReplaceAll, customHeader, notifications, keyboardLayout, navigateHome, navigateCorpora, navigateLogout, helpActions, }) {
+export default function Header({ tool, redirect, autoload, freeAccess, hideKeyboard, hideReplaceAll, customHeader, notifications, keyboardLayout, navigateHome, navigateCorpora, navigateLogout, navigateNotLogged = () => {
+    location.href = '/auth';
+}, helpActions, }) {
     const { t } = useTranslation('header');
     const { getCorpus, hasCorpus } = useCorpusUtils();
     const { isLogged } = useLoggedUtils();
     const [openKeyboard, setOpenKeyboard] = useState(false);
-    const profileClass = cx('header-profile', {
-        'corpora-free': freeAccess && !hasCorpus(),
-    });
     const homeTextsClass = cx('app-title', {
         pointer: navigateHome !== undefined,
     });
-    return (_jsxs("div", { className: "ds-header", children: [_jsxs("div", { className: "header-left", 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' }))] }));
+    return (_jsxs("div", { className: "ds-header", children: [_jsxs("div", { className: "header-left", 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: "header-right", 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, navigateNotLogged: navigateNotLogged }))] }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: keyboardLayout || getCorpus().keyboardLayout || 'english' }))] }));
 }

package/dist/Header/HeaderCorpora/HeaderCorpora.js

@@ -15,12 +15,17 @@ export default function HeaderCorpora({ navigateCorpora, redirect, autoload, fre
     const [corpora, setCorpora] = useState([]);
     const [openCorpora, setOpenCorpora] = useState(false);
     const load = () => {
-        CorpusService.available().then((r) => {
+        CorpusService.available()
+            .then((r) => {
             setCorpora(r.data);
+        })
+            .catch(() => {
+            setCorpora([]);
         });
     };
     const loadAndApply = () => {
-        CorpusService.available().then((r) => {
+        CorpusService.available()
+            .then((r) => {
             setCorpora(r.data);
             if (uid) {
                 const selectedCorpus = r.data.find((c) => c.uid === uid);
@@ -35,6 +40,9 @@ export default function HeaderCorpora({ navigateCorpora, redirect, autoload, fre
                 navigateCorpora && navigateCorpora(r.data[0].uid);
                 setCorpus(r.data[0]);
             }
+        })
+            .catch(() => {
+            setCorpora([]);
         });
     };
     const handleChooseCorpus = (thisCorpus) => {

package/dist/Header/HeaderUser/HeaderUser.d.ts

@@ -1,6 +1,7 @@
 import './style.scss';
 type Props = {
     navigateLogout?: () => void;
+    navigateNotLogged: () => void;
 };
-export default function HeaderUser({ navigateLogout }: Props): import("react/jsx-runtime").JSX.Element;
+export default function HeaderUser({ navigateLogout, navigateNotLogged, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Header/HeaderUser/HeaderUser.js

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Avatar, Icon, ProfileDropdown } from 'tycho-storybook';
 import { useLoggedUtils } from '../../configs/useLoggedUtils';
 import './style.scss';
-export default function HeaderUser({ navigateLogout }) {
+export default function HeaderUser({ navigateLogout, navigateNotLogged, }) {
     const { t } = useTranslation('header');
     const { isLogged, getLogged } = useLoggedUtils();
     const [open, setOpen] = useState(false);
@@ -12,7 +12,7 @@ export default function HeaderUser({ navigateLogout }) {
         setOpen(false);
         window.open(import.meta.env.VITE_APP_RESERVED_URL, '_blank');
     };
-    return (_jsxs("div", { className: "header-user-container", children: [isLogged() ? (_jsx(ProfileDropdown, { src: getLogged()?.picture, title: getLogged()?.name || getLogged()?.sub, onClick: (b) => setOpen(b) })) : (_jsx(Avatar, { size: "small", onClick: () => (location.href = '/auth') })), open && isLogged() && (_jsxs("div", { className: "ds-dropdown-list", children: [_jsx("div", { className: "ds-dropdown-itemlist", children: _jsx("span", { className: "label", children: `${t('profile.label.hello')} ${getLogged()?.name || getLogged()?.sub}` }) }), _jsxs("div", { className: "ds-dropdown-itemlist d-none", children: [_jsx(Icon, { name: "colors", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.theme') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: handleProfile, children: [_jsx(Icon, { name: "person", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.home') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", children: [_jsx(Icon, { name: "live_help", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.help') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => {
+    return (_jsxs("div", { className: "header-user-container", children: [isLogged() ? (_jsx(ProfileDropdown, { src: getLogged()?.picture, title: getLogged()?.name || getLogged()?.sub, onClick: (b) => setOpen(b) })) : (_jsx(Avatar, { size: "small", onClick: navigateNotLogged })), open && isLogged() && (_jsxs("div", { className: "ds-dropdown-list", children: [_jsx("div", { className: "ds-dropdown-itemlist", children: _jsx("span", { className: "label", children: `${t('profile.label.hello')} ${getLogged()?.name || getLogged()?.sub}` }) }), _jsxs("div", { className: "ds-dropdown-itemlist d-none", children: [_jsx(Icon, { name: "colors", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.theme') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: handleProfile, children: [_jsx(Icon, { name: "person", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.home') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", children: [_jsx(Icon, { name: "live_help", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.help') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => {
                             setOpen(false);
                             navigateLogout && navigateLogout();
                         }, children: [_jsx(Icon, { name: "logout", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.logout') })] })] }))] }));

package/dist/Header/styles.scss

@@ -31,13 +31,10 @@
     }
   }
 
-  > .header-profile {
+  .header-right {
     display: flex;
     align-items: center;
     padding-right: var(--spacing-150);
-
-    &.corpora-free {
-      margin-left: auto;
-    }
+    gap: 8px;
   }
 }

package/dist/LanguageSelector/styles.scss

@@ -1,10 +1,8 @@
 .language-container {
   > .ds-dropdown-container {
     .ds-dropdown-button {
-      padding-left: 8px;
-
       .label {
-        margin-right: var(--spacing-100);
+        margin: 0px var(--spacing-100);
       }
     }
 

package/dist/TreeView/TreeView.d.ts

@@ -1,8 +1,8 @@
-import { Core } from 'cytoscape';
-import { Struct } from '../configs/types/Struct';
-import './style.scss';
+import { Core } from "cytoscape";
+import { Struct } from "../configs/types/Struct";
+import "./style.scss";
 type Props = {
-    struct: Struct;
+    struct?: Struct;
     expression?: string;
     selector?: string;
     translations?: Record<string, string>;

package/dist/TreeView/TreeView.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { saveAs } from 'file-saver';
-import html2canvas from 'html2canvas';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { IconButton } from 'tycho-storybook';
-import AppPlaceholder from '../AppPlaceholder';
-import DateUtils from '../functions/DateUtils';
-import SentenceUtils from '../functions/SentenceUtils';
-import TreeViewSearch from './TreeViewSearch/TreeViewSearch';
-import CytoscapeTreeConverter from './cytoscape/CytoscapeTreeConverter';
-import SyntreesCytoscape from './cytoscape/SyntreesCytoscape';
-import './style.scss';
-export default function TreeView({ struct, expression, selector = 'canvas-tree', translations, wheelSensitivity, renderWithInfo = false, placeholder, cyRef, onClickExpression, onExpand, onReadyCustom, }) {
-    const { t } = useTranslation('tree');
+import { saveAs } from "file-saver";
+import html2canvas from "html2canvas";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { IconButton } from "tycho-storybook";
+import AppPlaceholder from "../AppPlaceholder";
+import DateUtils from "../functions/DateUtils";
+import SentenceUtils from "../functions/SentenceUtils";
+import TreeViewSearch from "./TreeViewSearch/TreeViewSearch";
+import CytoscapeTreeConverter from "./cytoscape/CytoscapeTreeConverter";
+import SyntreesCytoscape from "./cytoscape/SyntreesCytoscape";
+import "./style.scss";
+export default function TreeView({ struct, expression, selector = "canvas-tree", translations, wheelSensitivity, renderWithInfo = false, placeholder, cyRef, onClickExpression, onExpand, onReadyCustom, }) {
+    const { t } = useTranslation("tree");
     const [cy, setCy] = useState(null);
     const [showInfo, setShowInfo] = useState(renderWithInfo);
     const [invalid, setInvalid] = useState();
@@ -27,7 +27,7 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
         setCy(null);
         const element = document.getElementById(selector);
         if (element)
-            element.innerHTML = '';
+            element.innerHTML = "";
         if (!struct)
             return;
         let tree;
@@ -58,8 +58,8 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
     const downloadPsd = () => {
         if (!expression)
             return;
-        const blob = new Blob([expression], { type: 'text/plain;charset=utf-8' });
-        saveAs(blob, 'sentence.psd');
+        const blob = new Blob([expression], { type: "text/plain;charset=utf-8" });
+        saveAs(blob, "sentence.psd");
     };
     const generateImage = () => {
         if (!cy)
@@ -68,13 +68,13 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
         if (!cyContainer)
             return;
         html2canvas(cyContainer, {
-            backgroundColor: 'white',
+            backgroundColor: "white",
         }).then((canvas) => {
             canvas.toBlob((blob) => {
                 if (blob === null)
                     return;
-                saveAs(blob, 'tree.jpg');
-            }, 'image/jpeg', 1.0);
+                saveAs(blob, "tree.jpg");
+            }, "image/jpeg", 1.0);
         });
     };
     const reset = () => {
@@ -90,9 +90,9 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
             if (!token.ec) {
                 const leafId = token.p?.toString();
                 const converter = new CytoscapeTreeConverter();
-                converter['extraInfo'] = extraInfo;
+                converter["extraInfo"] = extraInfo;
                 const newLabel = converter.getLabelLeaf(token);
-                thisCy.$id(leafId).data('label', newLabel);
+                thisCy.$id(leafId).data("label", newLabel);
             }
         });
     };
@@ -113,8 +113,8 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
         setInvalid(undefined);
         load();
     }, [struct]);
-    if (invalid) {
-        return (_jsx(AppPlaceholder, { text: placeholder || t('placeholder.sentence.notparsed') }));
+    if (invalid || !struct) {
+        return (_jsx(AppPlaceholder, { text: placeholder || t("placeholder.sentence.notparsed") }));
     }
     return (_jsxs("div", { className: "tree-view-container", children: [_jsx("div", { className: "floating-buttons", children: cy &&
                     getButtons(generateImage, reset, onClickExpression || downloadPsd, toggleInfo, onExpand, expression, openSearchModal)
@@ -122,43 +122,43 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
                         .map((btn, i) => {
                         return (_jsx(IconButton, { name: btn.icon, title: t(btn.title), onClick: btn.onClick, size: "small", mode: "ghost" }, i));
                     }) }), showSearchModal && cy && (_jsx(TreeViewSearch, { struct: struct, cy: cy, onClose: closeSearchModal, searchCriteria: searchCriteria, setSearchCriteria: setSearchCriteria })), _jsx("div", { id: selector, className: "canvas-tree" }), showInfo && (_jsxs("div", { className: "info", children: [_jsx("span", { children: SentenceUtils.getAsText(struct) }), translations &&
-                        Object.entries(translations).map(([k, v]) => (_jsxs("div", { className: "translation", children: [_jsxs("b", { children: [k, ":"] }), _jsx("span", { children: v })] }, k))), struct.parsed && (_jsxs("span", { className: "date", children: [t('date.parsed'), ' ', DateUtils.formatDateTime(struct.parsed, 'dd/MM/yyyy HH:mm:ss')] }))] }))] }));
+                        Object.entries(translations).map(([k, v]) => (_jsxs("div", { className: "translation", children: [_jsxs("b", { children: [k, ":"] }), _jsx("span", { children: v })] }, k))), struct.parsed && (_jsxs("span", { className: "date", children: [t("date.parsed"), " ", DateUtils.formatDateTime(struct.parsed, "dd/MM/yyyy HH:mm:ss")] }))] }))] }));
 }
 const getButtons = (generateImage, reset, downloadPsd, toggleInfo, onExpand, expression, openSearchModal) => [
     {
         condition: true,
-        title: 'button.download.tree',
+        title: "button.download.tree",
         onClick: generateImage,
-        icon: 'download',
+        icon: "download",
     },
     {
         condition: true,
-        title: 'button.recenter.tree',
+        title: "button.recenter.tree",
         onClick: reset,
-        icon: 'fullscreen',
+        icon: "fullscreen",
     },
     {
         condition: !!expression,
-        title: 'button.download.penn',
+        title: "button.download.penn",
         onClick: downloadPsd,
-        icon: 'graph_4',
+        icon: "graph_4",
     },
     {
         condition: !!onExpand,
-        title: 'button.expand.tree',
+        title: "button.expand.tree",
         onClick: onExpand || (() => { }),
-        icon: 'open_in_full',
+        icon: "open_in_full",
     },
     {
         condition: true,
-        title: 'button.info',
+        title: "button.info",
         onClick: toggleInfo,
-        icon: 'info',
+        icon: "info",
     },
     {
         condition: true,
-        title: 'button.search',
+        title: "button.search",
         onClick: openSearchModal || (() => { }),
-        icon: 'search',
+        icon: "search",
     },
 ];

package/dist/configs/api.js

@@ -9,14 +9,18 @@ const api = axios.create({
     },
     baseURL: import.meta.env.VITE_APP_URL_API,
 });
+const isStorybook = () => typeof window !== 'undefined' &&
+    (window.location.port === '6006' || window.__STORYBOOK__);
 api.interceptors.response.use((response) => response, async (error) => {
     if (error.response?.status === 401) {
         CookieStorage.removeJwtToken();
         sessionStorage.clear();
         localStorage.clear();
-        window.location.replace(import.meta.env.VITE_APP_AUTH_URL);
+        if (!isStorybook()) {
+            window.location.replace(import.meta.env.VITE_APP_AUTH_URL);
+        }
     }
-    else if (error.response?.status === 403) {
+    else if (error.response?.status === 403 && !isStorybook()) {
         window.location.href = `${import.meta.env.VITE_APP_PUBLIC_URL}/unauthorized`;
     }
     else if (error.status === null) {

package/package.json

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