tycho-components 0.0.14-SNAPSHOT-5 → 0.0.15-SNAPSHOT

package/dist/AppPicture/AppPicture.d.ts

@@ -0,0 +1,9 @@
+import './style.scss';
+type PictureProps = {
+    src: string;
+    title?: string;
+    className?: string;
+    onClick?: () => void;
+};
+export default function AppPicture({ src, title, className, onClick, }: PictureProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AppPicture/AppPicture.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import ImageUtils from '../functions/ImageUtils';
+import './style.scss';
+export default function AppPicture({ src, title, className, onClick, }) {
+    const { t } = useTranslation('header');
+    return (_jsx("div", { className: "app-picture-container", children: _jsx("img", { className: `${className} ${src ? '' : 'picture-placeholder'}`, src: ImageUtils.display(src), title: title, onClick: () => onClick && onClick(), onError: ({ currentTarget }) => {
+                /* eslint-disable no-param-reassign */
+                currentTarget.onerror = null; // prevents looping
+                currentTarget.src = ImageUtils.getPlaceHolder();
+                /* eslint-enable no-param-reassign */
+            } }) }));
+}

package/dist/AppPicture/index.d.ts

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

package/dist/AppPicture/index.js

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

package/dist/Header/Header.d.ts

@@ -0,0 +1,13 @@
+import './styles.scss';
+type Props = {
+    tool: string;
+    navigateHome?: () => void;
+    navigateCorpora?: (uid: string) => void;
+    navigateLogout?: () => void;
+    redirect?: string;
+    autoload?: boolean;
+    freeAccess?: boolean;
+    hideKeyboard?: boolean;
+};
+export default function Header({ tool, navigateHome, navigateCorpora, navigateLogout, redirect, autoload, freeAccess, hideKeyboard, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Header/Header.js

@@ -0,0 +1,25 @@
+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 { useCorpusUtils } from '../configs/useCorpusUtils';
+import LanguageSelector from '../LanguageSelector';
+import VirtualKeyboard from '../VirtualKeyboard';
+import HeaderApps from './HeaderApps';
+import HeaderCorpora from './HeaderCorpora/HeaderCorpora';
+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, }) {
+    const { t } = useTranslation('header');
+    const { getCorpus, hasCorpus } = useCorpusUtils();
+    const [openKeyboard, setOpenKeyboard] = useState(false);
+    const profileClass = cx('header-profile', {
+        'corpora-free': freeAccess && !hasCorpus(),
+    });
+    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' }))] }));
+}

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

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

package/dist/Header/HeaderApps/HeaderApps.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import logo from '../../assets/img/logo.png';
+import { Drawer } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon, IconButton, Tag } from 'tycho-storybook';
+import { useLoggedUtils } from '../../configs/useLoggedUtils';
+import UsabilityUtils from '../../functions/UsabilityUtils';
+import { AvailableApps } from '../types/App';
+import './style.scss';
+export default function HeaderApps({ freeAccess }) {
+    const { t } = useTranslation('header');
+    const { hasLexiconAccess, hasParserAccess, isAdminOfAnyCorpus } = useLoggedUtils();
+    const [open, setOpen] = useState(false);
+    const goto = (app, blank) => {
+        if (blank) {
+            window.open(`/${app.code}`, '_blank');
+        }
+        else {
+            location.href = `/${app.code}`;
+        }
+    };
+    const renderItem = (item, idx) => {
+        if (!item.visibility && freeAccess)
+            return null;
+        if (item.admin && !isAdminOfAnyCorpus())
+            return null;
+        if (item.lexicon && !hasLexiconAccess())
+            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: "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))] })] }))] }));
+}
+const quickAccess = [
+    {
+        code: 'platform',
+        image: logo,
+        visibility: 'public',
+        desktop: false,
+        external: 'https://www.tycho.iel.unicamp.br',
+    },
+];

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

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

package/dist/Header/HeaderApps/index.js

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

package/dist/Header/HeaderApps/style.scss

@@ -0,0 +1,104 @@
+.offcanvas-apps {
+  border: 1px solid var(--border-subtle-1);
+  background-color: var(--background-default);
+  width: 26vw;
+
+  > .MuiPaper-root {
+    width: 26vw;
+
+    > .header {
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid var(--border-subtle-1);
+      padding: 16px;
+
+      > .label {
+        @include label-large-1;
+        color: var(--text-primary);
+      }
+
+      > .ds-icon-button {
+        margin-left: auto;
+      }
+    }
+
+    > .body,
+    .footer {
+      padding: var(--spacing-250) 0;
+
+      > .title {
+        @include tag-medium-1;
+        color: var(--text-tertiary);
+        padding: 0px var(--spacing-250) var(--spacing-150);
+      }
+
+      > .item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: var(--spacing-100) var(--spacing-250);
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--layer-hover-1);
+        }
+
+        > .icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-color: var(--layer-field-hover);
+          border-radius: var(--radius-100);
+          padding: 8px;
+
+          > .ds-icon {
+            color: var(--icon-on-color-accent);
+          }
+        }
+
+        > img {
+          width: 40px;
+          height: 40px;
+        }
+
+        > .texts {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+
+          > .label {
+            @include label-medium-2;
+            color: var(--text-primary);
+          }
+
+          > .sublabel {
+            @include helper-medium-1;
+            color: var(--text-secondary);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+            max-width: 12vw;
+            line-height: 1.2;
+          }
+        }
+
+        > .options {
+          display: flex;
+          display: flex;
+          align-items: center;
+          margin-left: auto;
+          gap: 4px;
+
+          > .ds-tag {
+            margin-right: 4px;
+          }
+        }
+      }
+    }
+
+    > .footer {
+      border-top: 1px solid var(--border-subtle-1);
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import './style.scss';
+type Props = {
+    navigateCorpora?: (uid: string) => void;
+    autoload?: boolean;
+    redirect?: string;
+    freeAccess?: boolean;
+};
+export default function HeaderCorpora({ navigateCorpora, redirect, autoload, freeAccess, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Header/HeaderCorpora/HeaderCorpora.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import AppModal from '../../AppModal';
+import AppPicture from '../../AppPicture';
+import { useCorpusUtils } from '../../configs/useCorpusUtils';
+import CorpusService from '../types/CorpusService';
+import './style.scss';
+export default function HeaderCorpora({ navigateCorpora, redirect, autoload, freeAccess, }) {
+    const { t } = useTranslation('header');
+    const { setCorpus, getCorpus, hasCorpus } = useCorpusUtils();
+    const { uid } = useParams();
+    const [corpora, setCorpora] = useState([]);
+    const [openCorpora, setOpenCorpora] = useState(false);
+    const load = () => {
+        CorpusService.available().then((r) => {
+            setCorpora(r.data);
+            if (uid) {
+                const selectedCorpus = r.data.filter((c) => c.uid === uid);
+                navigateCorpora && navigateCorpora(selectedCorpus[0].uid);
+                setCorpus(selectedCorpus[0]);
+            }
+            else {
+                navigateCorpora && navigateCorpora(r.data[0].uid);
+                setCorpus(r.data[0]);
+            }
+        });
+    };
+    const handleChooseCorpus = (thisCorpus) => {
+        setOpenCorpora(false);
+        if (redirect) {
+            location.href = `${redirect}/${thisCorpus.uid}`;
+        }
+        else {
+            navigateCorpora && navigateCorpora(thisCorpus.uid);
+            setCorpus(thisCorpus);
+        }
+    };
+    const handleCorpusClick = () => {
+        if (freeAccess && hasCorpus()) {
+            navigateCorpora && navigateCorpora(getCorpus().uid);
+        }
+        else {
+            setOpenCorpora(true);
+        }
+    };
+    useEffect(() => {
+        openCorpora && load();
+    }, [openCorpora]);
+    useEffect(() => {
+        autoload && load();
+    }, [autoload]);
+    return (_jsxs("div", { className: "header-corpora-container", children: [hasCorpus() && (_jsxs("div", { className: "corpus-container", onClick: handleCorpusClick, children: [_jsx(AppPicture, { src: getCorpus().picture, title: getCorpus().name, className: "avatar" }), _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: "avatar" }), _jsx("span", { children: corpus.name })] }, corpus.uid))) }))] }));
+}

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

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

package/dist/Header/HeaderCorpora/index.js

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

package/dist/Header/HeaderCorpora/style.scss

@@ -0,0 +1,52 @@
+.header-corpora-container {
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+
+  .corpus-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    > span {
+      margin-right: var(--spacing-small);
+      margin-left: var(--spacing-small);
+      @include label-large-1;
+      color: var(--text-light-fixed);
+    }
+  }
+}
+
+.modal-corpora {
+  > .body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    max-height: 40vh;
+    overflow-y: auto;
+
+    > .item {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      flex: 1 0 16%;
+      min-height: 12vh;
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--layer-hover-1);
+      }
+
+      > img {
+        width: 48px;
+        height: 48px;
+      }
+
+      > span {
+        text-align: center;
+      }
+    }
+  }
+}

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

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

package/dist/Header/HeaderUser/HeaderUser.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+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 }) {
+    const { t } = useTranslation('header');
+    const { isLogged, getLogged } = useLoggedUtils();
+    const [open, setOpen] = useState(false);
+    const handleProfile = () => {
+        setOpen(false);
+        window.open(import.meta.env.VITE_APP_PROFILE_URL, '_blank');
+    };
+    return (_jsxs("div", { className: "header-user-container", children: [isLogged() ? (_jsx(ProfileDropdown, { src: getLogged()?.picture, title: getLogged()?.name, onClick: (b) => setOpen(b) })) : (_jsx(Avatar, { size: "small" })), 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}` }) }), _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: navigateLogout, children: [_jsx(Icon, { name: "logout", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.logout') })] })] }))] }));
+}

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

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

package/dist/Header/HeaderUser/index.js

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

package/dist/Header/HeaderUser/style.scss

@@ -0,0 +1,26 @@
+.header-user-container {
+  display: flex;
+  cursor: pointer;
+  position: relative;
+
+  > .ds-dropdown-list {
+    right: 0;
+    width: auto;
+
+    > .ds-dropdown-itemlist {
+      &:first-child {
+        border-bottom: 1px solid var(--border-subtle-1);
+        color: var(--text-disabled);
+      }
+
+      &:last-child {
+        border-top: 1px solid var(--border-subtle-1);
+        color: var(--text-error);
+
+        > .ds-icon {
+          color: var(--text-error);
+        }
+      }
+    }
+  }
+}

package/dist/Header/index.d.ts

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

package/dist/Header/index.js

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

package/dist/Header/styles.scss

@@ -0,0 +1,36 @@
+.ds-header {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: var(--background-accent);
+  min-width: 960px;
+  min-height: 48px;
+  z-index: 1150;
+  padding: 0px var(--spacing-100);
+  gap: 16px;
+
+  > .texts {
+    > .title {
+      @include label-large-2;
+      color: var(--text-light-fixed);
+      margin-right: 8px;
+    }
+
+    > .subtitle {
+      @include label-large-1;
+      color: var(--text-light-fixed);
+    }
+  }
+
+  > .header-profile {
+    display: flex;
+    align-items: center;
+
+    &.corpora-free {
+      margin-left: auto;
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+type App = {
+    code: string;
+    icon?: string;
+    image?: string;
+    visibility: 'public' | null;
+    desktop: boolean;
+    admin?: boolean;
+    lexicon?: boolean;
+    parser?: boolean;
+    external?: string;
+};
+export declare const AvailableApps: App[];
+export default App;

package/dist/Header/types/App.js

@@ -0,0 +1,65 @@
+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,
+    },
+    {
+        code: 'io',
+        icon: 'swap_vert',
+        visibility: null,
+        desktop: true,
+    },
+    {
+        code: 'lexicon',
+        icon: 'book_3',
+        visibility: null,
+        desktop: false,
+        lexicon: true,
+    },
+    {
+        code: 'search',
+        icon: 'match_word',
+        visibility: 'public',
+        desktop: true,
+    },
+    {
+        code: 'viewer',
+        icon: 'news',
+        visibility: 'public',
+        desktop: false,
+    },
+    {
+        code: 'synviewer',
+        icon: 'graph_4',
+        visibility: 'public',
+        desktop: false,
+    },
+    {
+        code: 'psd-reindexer',
+        icon: '123',
+        visibility: 'public',
+        desktop: false,
+    },
+];

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

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

package/dist/Header/types/CorpusService.js

@@ -0,0 +1,8 @@
+import api from '../../configs/api';
+function available() {
+    return api.get(`${import.meta.env.VITE_APP_AUTH_API}/corpus/list/me`);
+}
+const CorpusService = {
+    available,
+};
+export default CorpusService;

package/dist/configs/Corpus.d.ts

@@ -0,0 +1,24 @@
+type Corpus = {
+    uid: string;
+    name: string;
+    picture: string;
+    uploadDir: string;
+    parameters: Record<string, any>;
+    parser?: string;
+    active: boolean;
+    opened: boolean;
+    keyboardLayout?: string;
+};
+export declare const EMPTY_CORPUS: {
+    uid: string;
+    name: string;
+    picture: string;
+    uploadDir: string;
+    parameters: {
+        '': string;
+    };
+    active: boolean;
+    opened: boolean;
+    keyboardLayout: string;
+};
+export default Corpus;

package/dist/configs/Corpus.js

@@ -0,0 +1,10 @@
+export const EMPTY_CORPUS = {
+    uid: '',
+    name: '',
+    picture: '',
+    uploadDir: '',
+    parameters: { '': '' },
+    active: true,
+    opened: false,
+    keyboardLayout: '',
+};