tycho-components 0.18.1 → 0.18.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -133,6 +133,10 @@
133
133
  .header-profile-apps {
134
134
  display: block;
135
135
  margin-left: auto;
136
+
137
+ > .profile-container {
138
+ display: flex;
139
+ }
136
140
  }
137
141
  }
138
142
 
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useState } from 'react';
3
3
  import { useTranslation } from 'react-i18next';
4
4
  import { IconButton } from 'tycho-storybook';
@@ -14,5 +14,5 @@ export default function HeaderButtons({ hideKeyboard, notifications, keyboardLay
14
14
  const { getCorpus } = useCorpusUtils();
15
15
  const { isLogged } = useLoggedUtils();
16
16
  const [openKeyboard, setOpenKeyboard] = useState(false);
17
- return (_jsxs(_Fragment, { children: [!hideKeyboard && (_jsx(IconButton, { onClick: () => setOpenKeyboard(!openKeyboard), name: "keyboard", size: "medium", title: t('tooltip.keyboard'), mode: mobile ? 'outlined' : 'filled' })), _jsx(HelpButton, { helpActions: helpActions, mobile: mobile }), notifications && isLogged() && (_jsx(HeaderNotifications, { uid: notifications.ref, mode: notifications.mode, mobile: mobile })), _jsx(LanguageSelector, { openToTop: mobile ? true : false, mobile: mobile }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: keyboardLayout || getCorpus().keyboardLayout || 'english' }))] }));
17
+ return (_jsxs("div", { className: "header-buttons", children: [!hideKeyboard && (_jsx(IconButton, { onClick: () => setOpenKeyboard(!openKeyboard), name: "keyboard", size: "medium", title: t('tooltip.keyboard'), mode: mobile ? 'outlined' : 'filled' })), _jsx(HelpButton, { helpActions: helpActions, mobile: mobile }), notifications && isLogged() && (_jsx(HeaderNotifications, { uid: notifications.ref, mode: notifications.mode, mobile: mobile })), _jsx(LanguageSelector, { openToTop: mobile ? true : false, mobile: mobile }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: keyboardLayout || getCorpus().keyboardLayout || 'english' }))] }));
18
18
  }
@@ -0,0 +1,11 @@
1
+ .header-buttons {
2
+ display: flex;
3
+ align-items: center;
4
+ gap: 8px;
5
+ }
6
+
7
+ @media (max-width: 768px) {
8
+ .header-buttons {
9
+ display: none;
10
+ }
11
+ }
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useState } from 'react';
3
3
  import { useTranslation } from 'react-i18next';
4
- import { Button, Icon, ProfileDropdown } from 'tycho-storybook';
4
+ import { Avatar, Button, Icon } from 'tycho-storybook';
5
5
  import { useLoggedUtils } from '../../configs/useLoggedUtils';
6
6
  import './style.scss';
7
7
  export default function HeaderUser({ navigateLogout, navigateNotLogged, }) {
@@ -12,7 +12,7 @@ export default function HeaderUser({ navigateLogout, navigateNotLogged, }) {
12
12
  setOpen(false);
13
13
  window.open(import.meta.env.VITE_APP_RESERVED_URL, '_blank');
14
14
  };
15
- return (_jsxs("div", { className: "profile-container", children: [isLogged() ? (_jsx(ProfileDropdown, { src: getLogged()?.picture, title: getLogged()?.name || getLogged()?.sub, onClick: (b) => setOpen(b) })) : (_jsx(Button, { text: t('button.sign.in'), 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: () => {
15
+ return (_jsxs("div", { className: "profile-container", children: [isLogged() ? (_jsx("div", { onClick: () => setOpen(!open), children: _jsx(Avatar, { size: "small", src: getLogged()?.picture, title: getLogged()?.name || getLogged()?.sub }) })) : (_jsx(Button, { text: t('button.sign.in'), 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: () => {
16
16
  setOpen(false);
17
17
  navigateLogout && navigateLogout();
18
18
  }, children: [_jsx(Icon, { name: "logout", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.logout') })] })] }))] }));
@@ -24,3 +24,9 @@
24
24
  }
25
25
  }
26
26
  }
27
+
28
+ @media (max-width: 767px) {
29
+ .profile-container {
30
+ display: none;
31
+ }
32
+ }
@@ -35,7 +35,7 @@
35
35
  align-items: center;
36
36
  justify-content: flex-end;
37
37
  padding-right: var(--spacing-150);
38
- gap: 4px;
38
+ gap: 8px;
39
39
  }
40
40
  }
41
41
 
@@ -1,15 +1,23 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import FormControlLabel from '@mui/material/FormControlLabel';
3
3
  import Switch from '@mui/material/Switch';
4
- import React from 'react';
4
+ import Tooltip from '@mui/material/Tooltip';
5
+ import React, { useState } from 'react';
5
6
  import { useTranslation } from 'react-i18next';
6
7
  import { useLoggedUtils } from '../configs/useLoggedUtils';
7
- import { Icon, Tooltip } from 'tycho-storybook';
8
+ import { Icon } from 'tycho-storybook';
8
9
  import './style.scss';
9
10
  export default function Parameters({ parameters, onChange }) {
10
11
  const { t } = useTranslation('parameters');
11
12
  const { isSuper } = useLoggedUtils();
12
- const renderSwitchList = (fields) => (_jsx("div", { className: "parameters-group-container", children: fields.map((name) => (_jsx(React.Fragment, { children: _jsx(FormControlLabel, { control: _jsx(Switch, { checked: Boolean(parameters[name]), onChange: (_, checked) => onChange(name, checked) }), label: _jsxs("div", { className: "parameter-label", children: [_jsx("span", { children: t(`parameter.field.${name}`) }), _jsx(Tooltip, { title: t(`parameter.tooltip.${name}`), className: "tooltip-parameter", children: _jsx("span", { children: _jsx(Icon, { name: "help", className: "info", size: "x-small" }) }) })] }) }) }, name))) }));
13
+ const [openHelpField, setOpenHelpField] = useState(null);
14
+ const renderSwitchList = (fields) => (_jsx("div", { className: "parameters-group-container", children: fields.map((name) => (_jsx(React.Fragment, { children: _jsx(FormControlLabel, { control: _jsx(Switch, { checked: Boolean(parameters[name]), onChange: (_, checked) => onChange(name, checked) }), label: _jsxs("div", { className: "parameter-label", children: [_jsx("span", { children: t(`parameter.field.${name}`) }), _jsx(Tooltip, { title: t(`parameter.tooltip.${name}`), open: openHelpField === name, onClose: () => setOpenHelpField(null), disableHoverListener: true, disableFocusListener: true, disableTouchListener: true, slotProps: {
15
+ tooltip: { className: 'tooltip-parameter' },
16
+ }, children: _jsx("span", { className: "parameter-help-trigger", onClick: (e) => {
17
+ e.preventDefault();
18
+ e.stopPropagation();
19
+ setOpenHelpField((prev) => (prev === name ? null : name));
20
+ }, children: _jsx(Icon, { name: "help", className: "info", size: "x-small" }) }) })] }) }) }, name))) }));
13
21
  return (_jsxs("div", { className: "parameters-container", children: [_jsxs("div", { className: "group", children: [_jsx("div", { className: "group-title", children: t('title.available') }), renderSwitchList(PARAMETERS_TOOLS)] }), _jsxs("div", { className: "group", children: [_jsx("div", { className: "group-title", children: t('title.general') }), renderSwitchList(PARAMETERS)] }), _jsxs("div", { className: "group", children: [_jsx("div", { className: "group-title", children: t('title.edictor') }), renderSwitchList(PARAMETERS_EDICTOR), isSuper() && renderSwitchList(PARAMETERS_EDICTOR_SUPER)] }), _jsxs("div", { className: "group", children: [_jsx("div", { className: "group-title", children: t('title.catalog') }), renderSwitchList(PARAMETERS_CATALOG)] })] }));
14
22
  }
15
23
  const PARAMETERS = [
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "tycho-components",
3
3
  "private": false,
4
- "version": "0.18.1",
4
+ "version": "0.18.3",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
@@ -49,7 +49,7 @@
49
49
  "react-hook-form": "^7.45.2",
50
50
  "react-i18next": "^13.0.2",
51
51
  "react-router-dom": "^6.14.2",
52
- "tycho-storybook": "0.6.3",
52
+ "tycho-storybook": "0.6.4",
53
53
  "yup": "^1.2.0"
54
54
  },
55
55
  "devDependencies": {