tycho-components 0.6.0 → 0.6.2

package/dist/AppLoading/AppLoading.d.ts

@@ -1,6 +1,7 @@
 import './style.scss';
 type Props = {
     className?: string;
+    pageLoading?: boolean;
 };
-export default function AppLoading({ className }: Props): import("react/jsx-runtime").JSX.Element;
+export default function AppLoading({ className, pageLoading, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/AppLoading/AppLoading.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import cx from 'classnames';
 import ReactLoading from 'react-loading';
 import './style.scss';
-export default function AppLoading({ className = '' }) {
-    return (_jsx("div", { className: `loading-container ${className}`, children: _jsx(ReactLoading, { type: "spinningBubbles", color: "blue", height: 50, width: 50 }) }));
+export default function AppLoading({ className = '', pageLoading = false, }) {
+    const containerClassName = cx('loading-container', { 'page-loading': pageLoading }, className);
+    return (_jsx("div", { className: containerClassName, children: _jsx(ReactLoading, { type: "spinningBubbles", color: "blue", height: 50, width: 50 }) }));
 }

package/dist/AppLoading/style.scss

@@ -2,4 +2,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  &.page-loading {
+    margin-top: 10%;
+  }
 }

package/dist/Header/HeaderApps/HeaderApps.js

@@ -5,12 +5,11 @@ import { useTranslation } from 'react-i18next';
 import { Button, Icon, IconButton, Tag } from 'tycho-storybook';
 import { useCorpusUtils } from '../../configs/useCorpusUtils';
 import { useLoggedUtils } from '../../configs/useLoggedUtils';
-import UsabilityUtils from '../../functions/UsabilityUtils';
 import { AvailableApps } from '../types/App';
 import logo from './logo.png';
 import './style.scss';
 export default function HeaderApps({ freeAccess }) {
-    const { t } = useTranslation('header');
+    const { t } = useTranslation('header-app');
     const { getCorpus, hasCorpus } = useCorpusUtils();
     const { hasLexiconAccess, hasParserAccess, isAdminOfAnyCorpus } = useLoggedUtils();
     const [open, setOpen] = useState(false);
@@ -35,18 +34,15 @@ export default function HeaderApps({ freeAccess }) {
             return null;
         if (item.parser && !hasParserAccess())
             return null;
-        if (UsabilityUtils.isDesktop() && !item.desktop)
-            return null;
-        return (_jsxs("div", { className: "item", title: t(`${item.code}.desc`), children: [item.icon && (_jsx("div", { className: "icon", children: _jsx(Icon, { name: item.icon }) })), item.image && _jsx("img", { src: item.image }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "label", children: t(`${item.code}.name`) }), _jsx("span", { className: "sublabel", children: t(`${item.code}.desc`) })] }), _jsxs("div", { className: "options", children: [item.visibility && (_jsx(Tag, { text: item.visibility, size: "small", color: "green" })), item.external ? (_jsx(Button, { text: t('button.open'), size: "x-small", mode: "tonal", icon: "open_in_new", onClick: () => window.open(item.external, '_blank') })) : (_jsxs(_Fragment, { children: [_jsx(Button, { text: t('button.open'), size: "x-small", mode: "tonal", onClick: () => goto(item, false) }), _jsx(IconButton, { name: "open_in_new", size: "x-small", className: "icon-open", mode: "tonal", onClick: () => goto(item, true) })] }))] })] }, idx.valueOf()));
+        return (_jsxs("div", { className: "item", title: t(`${item.code}.desc`), children: [item.icon && (_jsx("div", { className: "icon", children: _jsx(Icon, { name: item.icon }) })), item.image && _jsx("img", { src: item.image }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "label", children: t(`${item.code}.name`) }), _jsx("span", { className: "sublabel", children: t(`${item.code}.desc`) })] }), _jsxs("div", { className: "options", children: [item.visibility && (_jsx(Tag, { text: t(`common:label.${item.visibility}`), size: "small", color: "green" })), item.external ? (_jsx(Button, { text: t('common:button.open'), size: "x-small", mode: "tonal", icon: "open_in_new", onClick: () => window.open(item.external, '_blank') })) : (_jsxs(_Fragment, { children: [_jsx(Button, { text: t('common:button.open'), size: "x-small", mode: "tonal", onClick: () => goto(item, false) }), _jsx(IconButton, { name: "open_in_new", size: "x-small", className: "icon-open", mode: "tonal", onClick: () => goto(item, true) })] }))] })] }, idx.valueOf()));
     };
-    return (_jsxs("div", { className: "header-apps-container", children: [_jsx(IconButton, { name: "apps", className: "icon-apps", size: "large", onClick: () => setOpen(!open), filledIcon: true }), open && (_jsxs(Drawer, { anchor: "left", open: true, onClose: () => setOpen(false), className: "offcanvas-apps", children: [_jsxs("div", { className: "header", children: [_jsx("span", { className: "label", children: t('label.platform') }), _jsx(IconButton, { name: "close", size: "x-small", mode: "ghost", onClick: () => setOpen(false) })] }), _jsxs("div", { className: "body", children: [_jsx("div", { className: "title", children: t('label.tools') }), AvailableApps.map((item, idx) => renderItem(item, idx))] }), _jsxs("div", { className: "footer", children: [_jsx("div", { className: "title", children: t('label.quick') }), quickAccess.map((item, idx) => renderItem(item, idx))] })] }))] }));
+    return (_jsxs("div", { className: "header-apps-container", children: [_jsx(IconButton, { name: "apps", className: "icon-apps", size: "large", onClick: () => setOpen(!open), filledIcon: true }), open && (_jsxs(Drawer, { anchor: "left", open: true, onClose: () => setOpen(false), className: "offcanvas-apps", children: [_jsxs("div", { className: "header", children: [_jsx("span", { className: "label", children: t('header:label.platform') }), _jsx(IconButton, { name: "close", size: "x-small", mode: "ghost", onClick: () => setOpen(false) })] }), _jsxs("div", { className: "body", children: [_jsx("div", { className: "title", children: t('label.tools') }), AvailableApps.map((item, idx) => renderItem(item, idx))] }), _jsxs("div", { className: "footer", children: [_jsx("div", { className: "title", children: t('label.quick') }), quickAccess.map((item, idx) => renderItem(item, idx))] })] }))] }));
 }
 const quickAccess = [
     {
         code: 'platform',
         image: logo,
         visibility: 'public',
-        desktop: false,
         external: 'https://www.tycho.iel.unicamp.br',
     },
 ];

package/dist/Header/HeaderApps/HeaderAppsDesktop.d.ts

@@ -0,0 +1,6 @@
+import './style.scss';
+type Props = {
+    freeAccess?: boolean;
+};
+export default function HeaderAppsDesktop({ freeAccess }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Header/HeaderApps/HeaderAppsDesktop.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Drawer } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon, IconButton, Tag } from 'tycho-storybook';
+import { useCorpusUtils } from '../../configs/useCorpusUtils';
+import { AvailableAppsDesktop } from '../types/App';
+import './style.scss';
+export default function HeaderAppsDesktop({ freeAccess }) {
+    const { t } = useTranslation('header-app');
+    const { getCorpus, hasCorpus } = useCorpusUtils();
+    const [open, setOpen] = useState(false);
+    const goto = (app, blank) => {
+        const shouldAppendCorpusUid = app.appendCorpusUid !== false;
+        const url = hasCorpus() && shouldAppendCorpusUid
+            ? `/${app.code}/${getCorpus().uid}`
+            : `/${app.code}`;
+        if (blank) {
+            window.open(url, '_blank');
+        }
+        else {
+            location.href = url;
+        }
+    };
+    const renderItem = (item, idx) => {
+        return (_jsxs("div", { className: "item", title: t(`${item.code}.desc`), children: [item.icon && (_jsx("div", { className: "icon", children: _jsx(Icon, { name: item.icon }) })), item.image && _jsx("img", { src: item.image }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "label", children: t(`${item.code}.name`) }), _jsx("span", { className: "sublabel", children: t(`${item.code}.desc`) })] }), _jsxs("div", { className: "options", children: [item.visibility && (_jsx(Tag, { text: t(`common:label.${item.visibility}`), size: "small", color: "green" })), item.external ? (_jsx(Button, { text: t('common:button.open'), size: "x-small", mode: "tonal", icon: "open_in_new", onClick: () => window.open(item.external, '_blank') })) : (_jsxs(_Fragment, { children: [_jsx(Button, { text: t('common:button.open'), size: "x-small", mode: "tonal", onClick: () => goto(item, false) }), _jsx(IconButton, { name: "open_in_new", size: "x-small", className: "icon-open", mode: "tonal", onClick: () => goto(item, true) })] }))] })] }, idx.valueOf()));
+    };
+    return (_jsxs("div", { className: "header-apps-container", children: [_jsx(IconButton, { name: "apps", className: "icon-apps", size: "large", onClick: () => setOpen(!open), filledIcon: true }), open && (_jsxs(Drawer, { anchor: "left", open: true, onClose: () => setOpen(false), className: "offcanvas-apps", children: [_jsxs("div", { className: "header", children: [_jsx("span", { className: "label", children: t('header:label.platform') }), _jsx(IconButton, { name: "close", size: "x-small", mode: "ghost", onClick: () => setOpen(false) })] }), _jsxs("div", { className: "body", children: [_jsx("div", { className: "title", children: t('label.tools') }), AvailableAppsDesktop.map((item, idx) => renderItem(item, idx))] })] }))] }));
+}

package/dist/Header/HeaderCorpora/HeaderCorpora.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
@@ -7,6 +7,7 @@ import AppPicture from '../../AppPicture';
 import { useCorpusUtils } from '../../configs/useCorpusUtils';
 import CorpusService from '../types/CorpusService';
 import './style.scss';
+import HeaderCorpus from './HeaderCorpus';
 export default function HeaderCorpora({ navigateCorpora, redirect, autoload, freeAccess, }) {
     const { t } = useTranslation('header');
     const { setCorpus, getCorpus, hasCorpus } = useCorpusUtils();
@@ -60,5 +61,5 @@ export default function HeaderCorpora({ navigateCorpora, redirect, autoload, fre
     useEffect(() => {
         autoload && loadAndApply();
     }, [autoload]);
-    return (_jsxs("div", { className: "header-corpora-container", children: [hasCorpus() && (_jsxs("div", { className: "header-corpus-container", onClick: handleCorpusClick, children: [_jsx(AppPicture, { src: getCorpus().picture, title: getCorpus().name, className: "header-corpus-image" }), _jsx("span", { children: getCorpus().name })] })), openCorpora && (_jsx(AppModal, { className: "modal-corpora", title: t('label.choose'), close: () => setOpenCorpora(false), children: corpora.map((corpus) => (_jsxs("div", { className: "item", onClick: () => handleChooseCorpus(corpus), children: [_jsx(AppPicture, { src: corpus.picture, title: corpus.name, className: "modal-corpus-image" }), _jsx("span", { children: corpus.name })] }, corpus.uid))) }))] }));
+    return (_jsxs(_Fragment, { children: [hasCorpus() && _jsx(HeaderCorpus, { onClick: handleCorpusClick }), openCorpora && (_jsx(AppModal, { className: "modal-corpora", title: t('label.choose'), close: () => setOpenCorpora(false), children: corpora.map((corpus) => (_jsxs("div", { className: "item", onClick: () => handleChooseCorpus(corpus), children: [_jsx(AppPicture, { src: corpus.picture, title: corpus.name, className: "modal-corpus-image" }), _jsx("span", { children: corpus.name })] }, corpus.uid))) }))] }));
 }

package/dist/Header/HeaderCorpora/HeaderCorpus.d.ts

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

package/dist/Header/HeaderCorpora/HeaderCorpus.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import AppPicture from '../../AppPicture';
+import { useCorpusUtils } from '../../configs/useCorpusUtils';
+import './style.scss';
+export default function HeaderCorpus({ onClick }) {
+    const { getCorpus, hasCorpus } = useCorpusUtils();
+    return (_jsx(_Fragment, { children: hasCorpus() && (_jsxs("div", { className: "header-corpus-container", onClick: onClick, children: [_jsx(AppPicture, { src: getCorpus().picture, title: getCorpus().name, className: "header-corpus-image" }), _jsx("span", { children: getCorpus().name })] })) }));
+}

package/dist/Header/HeaderCorpora/style.scss

@@ -1,26 +1,22 @@
-.header-corpora-container {
+.header-corpus-container {
   display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
   margin-left: auto;
   margin-right: auto;
 
-  .header-corpus-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-
-    > span {
-      margin-right: var(--spacing-200);
-      margin-left: var(--spacing-200);
-      @include label-large-1;
-      color: var(--text-light-fixed);
-    }
+  > span {
+    margin-right: var(--spacing-200);
+    margin-left: var(--spacing-200);
+    @include label-large-1;
+    color: var(--text-light-fixed);
+  }
 
-    .header-corpus-image {
-      border-radius: 50%;
-      width: 32px;
-      height: 32px;
-    }
+  .header-corpus-image {
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
   }
 }
 

package/dist/Header/HeaderDesktop.d.ts

@@ -0,0 +1,11 @@
+import { HelpAction } from './HelpButton/HelpButton';
+import './styles.scss';
+type Props = {
+    tool: string;
+    hideKeyboard?: boolean;
+    keyboardLayout?: string;
+    navigateHome?: () => void;
+    helpActions?: HelpAction[];
+};
+export default function HeaderDesktop({ tool, hideKeyboard, keyboardLayout, navigateHome, helpActions, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Header/HeaderDesktop.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from 'tycho-storybook';
+import LanguageSelector from '../LanguageSelector';
+import VirtualKeyboard from '../VirtualKeyboard';
+import { useCorpusUtils } from '../configs/useCorpusUtils';
+import HeaderAppsDesktop from './HeaderApps/HeaderAppsDesktop';
+import HeaderCorpus from './HeaderCorpora/HeaderCorpus';
+import HelpButton from './HelpButton';
+import './styles.scss';
+export default function HeaderDesktop({ tool, hideKeyboard, keyboardLayout, navigateHome, helpActions, }) {
+    const { t } = useTranslation('header');
+    const { getCorpus } = useCorpusUtils();
+    const [openKeyboard, setOpenKeyboard] = useState(false);
+    const homeTextsClass = cx('texts', {
+        pointer: navigateHome !== undefined,
+    });
+    return (_jsxs("div", { className: "ds-header", children: [_jsx(HeaderAppsDesktop, {}), _jsxs("div", { className: homeTextsClass, onClick: () => navigateHome && navigateHome(), children: [_jsx("span", { className: "title", children: t('label.desktop') }), _jsx("span", { className: "subtitle", children: tool })] }), _jsx(HeaderCorpus, {}), _jsxs("div", { className: "header-profile", children: [!hideKeyboard && (_jsx(IconButton, { onClick: () => setOpenKeyboard(!openKeyboard), name: "keyboard", size: "medium", title: t('tooltip.keyboard') })), _jsx(HelpButton, { helpActions: helpActions }), _jsx(LanguageSelector, {})] }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('common:button.close'), defaultLayout: keyboardLayout || getCorpus().keyboardLayout || 'english' }))] }));
+}

package/dist/Header/styles.scss

@@ -27,6 +27,7 @@
   > .header-profile {
     display: flex;
     align-items: center;
+    margin-left: auto;
     padding-right: var(--spacing-150);
 
     &.corpora-free {

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

@@ -3,7 +3,6 @@ type App = {
     icon?: string;
     image?: string;
     visibility: 'public' | null;
-    desktop: boolean;
     admin?: boolean;
     lexicon?: boolean;
     parser?: boolean;
@@ -11,4 +10,5 @@ type App = {
     appendCorpusUid?: boolean;
 };
 export declare const AvailableApps: App[];
+export declare const AvailableAppsDesktop: App[];
 export default App;

package/dist/Header/types/App.js

@@ -3,26 +3,22 @@ export const AvailableApps = [
         code: 'reserved',
         icon: 'lock',
         visibility: null,
-        desktop: false,
     },
     {
         code: 'catalog',
         icon: 'auto_stories',
         visibility: null,
-        desktop: true,
     },
     {
         code: 'admin',
         icon: 'folder_managed',
         visibility: null,
-        desktop: true,
         admin: true,
     },
     {
         code: 'parser',
         icon: 'settings',
         visibility: null,
-        desktop: true,
         parser: true,
         appendCorpusUid: false,
     },
@@ -30,13 +26,11 @@ export const AvailableApps = [
         code: 'io',
         icon: 'swap_vert',
         visibility: null,
-        desktop: true,
     },
     {
         code: 'lexicon',
         icon: 'book_3',
         visibility: null,
-        desktop: false,
         lexicon: true,
         appendCorpusUid: false,
     },
@@ -44,27 +38,55 @@ export const AvailableApps = [
         code: 'search',
         icon: 'match_word',
         visibility: 'public',
-        desktop: true,
     },
     {
         code: 'viewer',
         icon: 'news',
         visibility: 'public',
-        desktop: false,
         appendCorpusUid: false,
     },
     {
         code: 'synviewer',
         icon: 'graph_4',
         visibility: 'public',
-        desktop: false,
         appendCorpusUid: false,
     },
     {
         code: 'psd-reindexer',
         icon: '123',
         visibility: 'public',
-        desktop: false,
+        appendCorpusUid: false,
+    },
+];
+export const AvailableAppsDesktop = [
+    {
+        code: 'catalog',
+        icon: 'auto_stories',
+        visibility: 'public',
+        appendCorpusUid: false,
+    },
+    {
+        code: 'syntrees',
+        icon: 'graph_4',
+        visibility: 'public',
+        appendCorpusUid: false,
+    },
+    {
+        code: 'search',
+        icon: 'match_word',
+        visibility: 'public',
+        appendCorpusUid: false,
+    },
+    {
+        code: 'parser',
+        icon: 'automation',
+        visibility: 'public',
+        appendCorpusUid: false,
+    },
+    {
+        code: 'settings',
+        icon: 'graph_4',
+        visibility: 'public',
         appendCorpusUid: false,
     },
 ];

package/dist/LanguageSelector/LanguageSelector.d.ts

@@ -12,7 +12,6 @@ export type Props = {
 export type AvailableLanguage = {
     value: string;
     name: string;
-    flag: string;
 };
 export declare const AvailableLanguages: AvailableLanguage[];
 export default function LanguageSelector({ className, color, size, }: Props): import("react/jsx-runtime").JSX.Element | null;

package/dist/LanguageSelector/LanguageSelector.js

@@ -3,9 +3,6 @@ import cx from 'classnames';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from 'tycho-storybook';
-import brFlag from './flags/br.svg';
-import itFlag from './flags/it.svg';
-import usFlag from './flags/us.svg';
 import './styles.scss';
 export const LanguageSelectorModes = ['white', 'blue'];
 export const LanguageSelectorSizes = ['large', 'medium', 'small'];
@@ -18,17 +15,14 @@ export const AvailableLanguages = [
     {
         value: 'en',
         name: 'English',
-        flag: usFlag,
     },
     {
         value: 'pt-BR',
         name: 'Português-Brasil',
-        flag: brFlag,
     },
     {
         value: 'it',
         name: 'Italiano',
-        flag: itFlag,
     },
 ];
 export default function LanguageSelector({ className, color = 'primary', size = 'medium', }) {
@@ -54,5 +48,5 @@ export default function LanguageSelector({ className, color = 'primary', size =
     }, []);
     if (!language)
         return null;
-    return (_jsx("div", { className: getClassNames, children: _jsxs("div", { className: "ds-dropdown-container", children: [_jsxs("div", { className: getClassNamesDropdown, onClick: () => setOpen(!open), children: [_jsx("div", { className: "flag", children: _jsx("img", { src: language.flag, alt: language.name, className: "flag" }) }), _jsx("span", { className: "label", children: language.value }), _jsx(Icon, { name: "arrow_drop_down", className: "icon-arrow" })] }), open && (_jsx("div", { className: "ds-dropdown-list", children: AvailableLanguages.map((item, idx) => (_jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => changeLanguageHandler(item), children: [_jsx("div", { className: "flag", children: _jsx("img", { src: item.flag, alt: item.name, className: "flag" }) }), _jsx("span", { className: "label", children: item.name }), _jsx("span", { className: "sublabel", children: item.value }), item.value === language.label && (_jsx(Icon, { name: "check", size: "x-small", className: "icon-check" }))] }, idx.valueOf()))) }))] }) }));
+    return (_jsx("div", { className: getClassNames, children: _jsxs("div", { className: "ds-dropdown-container", children: [_jsxs("div", { className: getClassNamesDropdown, onClick: () => setOpen(!open), children: [_jsx("span", { className: "label", children: language.value }), _jsx(Icon, { name: "arrow_drop_down", className: "icon-arrow" })] }), open && (_jsx("div", { className: "ds-dropdown-list", children: AvailableLanguages.map((item, idx) => (_jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => changeLanguageHandler(item), children: [_jsx("span", { className: "label", children: item.name }), _jsx("span", { className: "sublabel", children: item.value }), item.value === language.label && (_jsx(Icon, { name: "check", size: "x-small", className: "icon-check" }))] }, idx.valueOf()))) }))] }) }));
 }

package/dist/LanguageSelector/styles.scss

@@ -1,15 +1,7 @@
 .language-container {
   > .ds-dropdown-container {
     .ds-dropdown-button {
-      .flag {
-        margin-left: var(--spacing-100);
-        margin-right: var(--spacing-050);
-
-        > img {
-          width: 24px !important;
-          height: 24px !important;
-        }
-      }
+      padding-left: 8px;
 
       .label {
         margin-right: var(--spacing-100);
@@ -24,17 +16,6 @@
         display: flex;
         align-items: center;
 
-        .flag {
-          display: flex;
-          align-items: center;
-          margin-right: 8px;
-
-          > img {
-            width: 20px !important;
-            height: 20px !important;
-          }
-        }
-
         .icon-check {
           margin-left: var(--spacing-100);
         }