@verdaccio/ui-components 2.0.0-alpha.0 → 3.0.0-next.1

package/src/sections/Header/Header.tsx

@@ -0,0 +1,79 @@
+import Button from '@mui/material/Button';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Dispatch, LoginDialog, RootState, Search, useConfig } from '../../';
+import HeaderLeft from './HeaderLeft';
+import HeaderRight from './HeaderRight';
+import HeaderSettingsDialog from './HeaderSettingsDialog';
+import { InnerMobileNavBar, InnerNavBar, MobileNavBar, NavBar } from './styles';
+
+type Props = {
+  // TODO: set correct type here
+  HeaderInfoDialog?: any;
+};
+
+/* eslint-disable react/jsx-no-bind*/
+const Header: React.FC<Props> = ({ HeaderInfoDialog }) => {
+  const { t } = useTranslation();
+  const [isInfoDialogOpen, setOpenInfoDialog] = useState<boolean>(false);
+  const [isSettingsDialogOpen, setSettingsDialogOpen] = useState<boolean>(false);
+  const [showMobileNavBar, setShowMobileNavBar] = useState<boolean>(false);
+  const [showLoginModal, setShowLoginModal] = useState<boolean>(false);
+  const loginStore = useSelector((state: RootState) => state.login);
+  const { configOptions } = useConfig();
+  const dispatch = useDispatch<Dispatch>();
+  const handleLogout = () => {
+    dispatch.login.logOutUser();
+    setShowLoginModal(false);
+  };
+  return (
+    <>
+      <NavBar data-testid="header" position="static">
+        <InnerNavBar>
+          <HeaderLeft showSearch={configOptions.showSearch} />
+          <HeaderRight
+            hasLogin={configOptions?.login}
+            onLogout={handleLogout}
+            onOpenRegistryInfoDialog={() => setOpenInfoDialog(true)}
+            onOpenSettingsDialog={() => setSettingsDialogOpen(true)}
+            onToggleLogin={() => setShowLoginModal(!showLoginModal)}
+            onToggleMobileNav={() => setShowMobileNavBar(!showMobileNavBar)}
+            showInfo={configOptions.showInfo}
+            showSearch={configOptions.showSearch}
+            showSettings={configOptions.showSettings}
+            showThemeSwitch={configOptions.showThemeSwitch}
+            username={loginStore?.username}
+          />
+        </InnerNavBar>
+        <HeaderSettingsDialog
+          isOpen={isSettingsDialogOpen}
+          onCloseDialog={() => setSettingsDialogOpen(false)}
+        />
+        {HeaderInfoDialog ? (
+          <HeaderInfoDialog
+            dialogTitle={t('dialog.registry-info.title')}
+            isOpen={isInfoDialogOpen}
+            onCloseDialog={() => setOpenInfoDialog(false)}
+          />
+        ) : null}
+      </NavBar>
+      {showMobileNavBar && (
+        <MobileNavBar>
+          <InnerMobileNavBar>
+            <Search />
+          </InnerMobileNavBar>
+          <Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
+            {t('button.cancel')}
+          </Button>
+        </MobileNavBar>
+      )}
+      {!loginStore.username && (
+        <LoginDialog onClose={() => setShowLoginModal(false)} open={showLoginModal} />
+      )}
+    </>
+  );
+};
+
+export default Header;

package/src/sections/Header/HeaderGreetings.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Label } from '../../';
+import { Greetings } from './styles';
+
+interface Props {
+  username: string;
+}
+
+const HeaderGreetings: React.FC<Props> = ({ username }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Greetings>{t('header.greetings')}</Greetings>
+      <Label data-testid="greetings-label" text={username} weight="bold" />
+    </>
+  );
+};
+
+export default HeaderGreetings;

package/src/sections/Header/HeaderLeft.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { Logo, Search } from '../../';
+import { LeftSide, SearchWrapper } from './styles';
+
+interface Props {
+  showSearch?: boolean;
+}
+
+const StyledLink = styled(Link)({
+  marginRight: '1em',
+});
+
+const HeaderLeft: React.FC<Props> = ({ showSearch }) => (
+  <LeftSide>
+    <StyledLink to={'/'}>
+      <Logo />
+    </StyledLink>
+    {showSearch && (
+      <SearchWrapper data-testid="search-container">
+        <Search />
+      </SearchWrapper>
+    )}
+  </LeftSide>
+);
+
+export default HeaderLeft;

package/src/sections/Header/HeaderMenu.tsx

@@ -0,0 +1,63 @@
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import React, { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { MenuItem } from '../../';
+import HeaderGreetings from './HeaderGreetings';
+
+interface Props {
+  username: string;
+  isMenuOpen: boolean;
+  anchorEl?: Element | null | undefined;
+  onLogout: () => void;
+  onLoggedInMenu: (event: MouseEvent<HTMLButtonElement>) => void;
+  onLoggedInMenuClose: () => void;
+}
+
+const HeaderMenu: React.FC<Props> = ({
+  onLogout,
+  username,
+  isMenuOpen = false,
+  anchorEl,
+  onLoggedInMenu,
+  onLoggedInMenuClose,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <IconButton
+        color="inherit"
+        data-testid="logInDialogIcon"
+        id="header--button-account"
+        onClick={onLoggedInMenu}
+        size="large"
+      >
+        <AccountCircle />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        onClose={onLoggedInMenuClose}
+        open={isMenuOpen}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+      >
+        <MenuItem>
+          <HeaderGreetings username={username} />
+        </MenuItem>
+        <MenuItem data-testid="logOutDialogIcon" id="logOutDialogIcon" onClick={onLogout}>
+          {t('button.logout')}
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+export default HeaderMenu;

package/src/sections/Header/HeaderRight.tsx

@@ -0,0 +1,131 @@
+import Button from '@mui/material/Button';
+import React, { MouseEvent, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useCustomTheme } from '../../';
+import HeaderMenu from './HeaderMenu';
+import HeaderToolTip from './HeaderToolTip';
+import { RightSide } from './styles';
+
+interface Props {
+  showSearch?: boolean;
+  username?: string | null;
+  hasLogin?: boolean;
+  showInfo?: boolean;
+  showSettings?: boolean;
+  showThemeSwitch?: boolean;
+  onToggleLogin: () => void;
+  onOpenRegistryInfoDialog: () => void;
+  onOpenSettingsDialog: () => void;
+  onToggleMobileNav: () => void;
+  onLogout: () => void;
+}
+
+const HeaderRight: React.FC<Props> = ({
+  showSearch,
+  username,
+  onToggleLogin,
+  hasLogin,
+  showInfo,
+  showSettings,
+  showThemeSwitch,
+  onLogout,
+  onToggleMobileNav,
+  onOpenRegistryInfoDialog,
+  onOpenSettingsDialog,
+}) => {
+  // @ts-ignore
+  const { isDarkMode, setIsDarkMode } = useCustomTheme();
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
+  const hideLoginSection = hasLogin === false;
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    setIsMenuOpen(Boolean(anchorEl));
+  }, [anchorEl]);
+
+  /**
+   * opens popover menu for logged in user.
+   */
+  const handleLoggedInMenu = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  /**
+   * closes popover menu for logged in user
+   */
+  const handleLoggedInMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  /**
+   * close/open popover menu for logged in users.
+   */
+  const handleToggleLogin = () => {
+    setAnchorEl(null);
+    onToggleLogin();
+  };
+
+  const handleToggleDarkLightMode = () => {
+    setTimeout(() => {
+      setIsDarkMode(!isDarkMode);
+    }, 300);
+  };
+
+  return (
+    <RightSide data-testid="header-right">
+      {showSearch === true && (
+        <HeaderToolTip
+          onClick={onToggleMobileNav}
+          title={t('search.packages')}
+          tooltipIconType={'search'}
+        />
+      )}
+
+      {showSettings === true && (
+        <HeaderToolTip
+          onClick={onOpenSettingsDialog}
+          title={t('header.settings')}
+          tooltipIconType={'settings'}
+        />
+      )}
+      {showInfo === true && (
+        <HeaderToolTip
+          onClick={onOpenRegistryInfoDialog}
+          title={t('header.registry-info')}
+          tooltipIconType={'info'}
+        />
+      )}
+      {showThemeSwitch === true && (
+        <HeaderToolTip
+          onClick={handleToggleDarkLightMode}
+          title={t('header.documentation')}
+          tooltipIconType={isDarkMode ? 'dark-mode' : 'light-mode'}
+        />
+      )}
+
+      {!hideLoginSection && (
+        <>
+          {username ? (
+            <HeaderMenu
+              anchorEl={anchorEl}
+              isMenuOpen={isMenuOpen}
+              onLoggedInMenu={handleLoggedInMenu}
+              onLoggedInMenuClose={handleLoggedInMenuClose}
+              onLogout={onLogout}
+              username={username}
+            />
+          ) : (
+            <Button color="inherit" data-testid="header--button-login" onClick={handleToggleLogin}>
+              {t('button.login')}
+            </Button>
+          )}
+        </>
+      )}
+    </RightSide>
+  );
+};
+
+export default HeaderRight;

package/src/sections/Header/HeaderSettingsDialog.tsx

@@ -0,0 +1,81 @@
+/* eslint-disable verdaccio/jsx-spread */
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import { useSelector } from 'react-redux';
+import remarkGfm from 'remark-gfm';
+
+import { RootState, Theme } from '../../';
+import LanguageSwitch from './LanguageSwitch';
+import RegistryInfoContent from './RegistryInfoContent';
+import RegistryInfoDialog from './RegistryInfoDialog';
+
+interface Props {
+  isOpen: boolean;
+  onCloseDialog: () => void;
+}
+
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      aria-labelledby={`simple-tab-${index}`}
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      role="tabpanel"
+      {...other}
+    >
+      {value === index && <Box sx={{ paddingTop: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+const TextContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  padding: '10px 0',
+  backgroundColor: theme?.palette.background.default,
+}));
+
+const HeaderSettingsDialog: React.FC<Props> = ({ onCloseDialog, isOpen }) => {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (_event, newValue) => {
+    setValue(newValue);
+  };
+  const configStore = useSelector((state: RootState) => state.configuration.config);
+  const { scope, base } = configStore;
+  const { t } = useTranslation();
+  return (
+    <RegistryInfoDialog onClose={onCloseDialog} open={isOpen} title={t('dialog.settings.title')}>
+      <Box sx={{ width: '100%' }}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <Tabs aria-label="basic tabs example" onChange={handleChange} value={value}>
+            <Tab label={t('packageManagers.title')} {...a11yProps(0)} />
+            <Tab label={t('language.title')} {...a11yProps(1)} />
+          </Tabs>
+        </Box>
+        <TabPanel index={0} value={value}>
+          <RegistryInfoContent registryUrl={base} scope={scope} />
+        </TabPanel>
+        <TabPanel index={1} value={value}>
+          <TextContent>{t('language.description')}</TextContent>
+          <LanguageSwitch />
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{t('language.contribute')}</ReactMarkdown>
+        </TabPanel>
+      </Box>
+    </RegistryInfoDialog>
+  );
+};
+
+export default HeaderSettingsDialog;

package/src/sections/Header/HeaderToolTip.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import HeaderToolTipIcon, { TooltipIconType } from './HeaderToolTipIcon';
+
+interface Props {
+  title: string;
+  tooltipIconType: TooltipIconType;
+  onClick?: () => void;
+}
+
+const HeaderToolTip: React.FC<Props> = ({ tooltipIconType, onClick }) => (
+  <HeaderToolTipIcon onClick={onClick} tooltipIconType={tooltipIconType} />
+);
+
+export default HeaderToolTip;

package/src/sections/Header/HeaderToolTipIcon.tsx

@@ -0,0 +1,87 @@
+import Info from '@mui/icons-material/Info';
+import NightsStay from '@mui/icons-material/NightsStay';
+import Search from '@mui/icons-material/Search';
+import Settings from '@mui/icons-material/Settings';
+import WbSunny from '@mui/icons-material/WbSunny';
+import React, { forwardRef } from 'react';
+
+import { IconSearchButton, InfoButton, SettingsButtom, SwitchThemeButton } from './styles';
+
+export type TooltipIconType = 'search' | 'info' | 'dark-mode' | 'light-mode' | 'settings';
+interface Props {
+  tooltipIconType: TooltipIconType;
+  onClick?: () => void;
+}
+
+type HeaderToolTipIconRef = HTMLButtonElement;
+
+/* eslint-disable react/jsx-no-undef */
+/* eslint-disable react/display-name */
+const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function HeaderToolTipIcon(
+  { tooltipIconType, onClick },
+  ref
+) {
+  switch (tooltipIconType) {
+    case 'info':
+      return (
+        <InfoButton
+          color="inherit"
+          data-testid={'header--tooltip-info'}
+          id="header--button-registryInfo"
+          onClick={onClick}
+          ref={ref}
+          size="large"
+        >
+          <Info />
+        </InfoButton>
+      );
+    case 'settings':
+      return (
+        <SettingsButtom
+          color="inherit"
+          data-testid={'header--tooltip-settings'}
+          id="header--button-settings"
+          onClick={onClick}
+          ref={ref}
+          size="large"
+        >
+          <Settings />
+        </SettingsButtom>
+      );
+    case 'search':
+      return (
+        <IconSearchButton color="inherit" onClick={onClick} ref={ref}>
+          <Search />
+        </IconSearchButton>
+      );
+    case 'dark-mode':
+      return (
+        <SwitchThemeButton
+          color="inherit"
+          data-testid={'header--button--dark'}
+          onClick={onClick}
+          ref={ref}
+          size="large"
+        >
+          <NightsStay />
+        </SwitchThemeButton>
+      );
+
+    case 'light-mode':
+      return (
+        <SwitchThemeButton
+          color="inherit"
+          data-testid={'header--button--light'}
+          onClick={onClick}
+          ref={ref}
+          size="large"
+        >
+          <WbSunny />
+        </SwitchThemeButton>
+      );
+    default:
+      return null;
+  }
+});
+
+export default HeaderToolTipIcon;

package/src/sections/Header/LanguageSwitch.tsx

@@ -0,0 +1,96 @@
+/* eslint-disable react/jsx-pascal-case */
+import styled from '@emotion/styled';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import i18next from 'i18next';
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Theme, useLanguage } from '../../';
+
+export const CardSelected = styled(Card)<{ theme?: Theme }>(({ theme }) => {
+  return {
+    backgroundColor: theme?.palette?.grey['600'],
+    opacity: '0.9',
+    color: theme?.palette?.error.contrastText,
+    fontWeight: 'bold',
+  };
+});
+
+export const CardUnSelected = styled(Card)<{ theme?: Theme }>(({ theme }) => {
+  return {
+    cursor: 'pointer',
+    ':hover': {
+      backgroundColor: theme?.palette.greyGainsboro,
+    },
+  };
+});
+
+const LanguageContent = ({ translation, icon }) => (
+  <>
+    <CardContent>
+      <Typography display="block" gutterBottom={true} variant="caption">
+        {translation}
+      </Typography>
+    </CardContent>
+    <CardContent>{icon}</CardContent>
+  </>
+);
+
+const LanguageSwitch = () => {
+  const { language, setLanguage, listLanguages } = useLanguage();
+  const listConverted = listLanguages.reduce((prev, item) => {
+    prev[item.lng] = {
+      translation: item.menuKey,
+      icon: item.icon,
+    };
+    return prev;
+  }, {} as Record<string, { translation: string; icon: any }>);
+
+  const [languages] = useState<string[]>(Object.keys(i18next.options?.resources || {}));
+  const { t } = useTranslation();
+  const currentLanguage = language;
+  const getCurrentLngDetails = useCallback(
+    (language: string) => {
+      const lng = listConverted[language] || listConverted['en-US'];
+      return {
+        icon: <lng.icon />,
+        translation: t(lng.translation),
+      };
+    },
+    [listConverted, t]
+  );
+  const handleChangeLanguage = useCallback(
+    (language: string) => {
+      setLanguage(language);
+    },
+    [setLanguage]
+  );
+
+  return (
+    <div>
+      <Grid columns={{ xs: 12, sm: 12, md: 12 }} container={true} spacing={{ xs: 1, md: 1 }}>
+        {languages.map((language, index) => {
+          const { icon, translation } = getCurrentLngDetails(language);
+          return (
+            <Grid item={true} key={index} sm={2} xs={6}>
+              {language === currentLanguage ? (
+                <CardSelected sx={{ maxWidth: 80 }}>
+                  <LanguageContent icon={icon} translation={translation} />
+                </CardSelected>
+              ) : (
+                <CardUnSelected onClick={() => handleChangeLanguage(language)}>
+                  <LanguageContent icon={icon} translation={translation} />
+                </CardUnSelected>
+              )}
+            </Grid>
+          );
+        })}
+      </Grid>
+    </div>
+  );
+};
+
+export default LanguageSwitch;

package/src/sections/Header/RegistryInfoContent/RegistryInfoContent.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { cleanup, render, screen } from '../../../test/test-react-testing-library';
+import RegistryInfoContent from './RegistryInfoContent';
+
+describe('<RegistryInfoContent /> component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('should load the component with no data', () => {
+    render(<RegistryInfoContent registryUrl="http://localhost:4873" scope={''} />);
+    expect(screen.getByText('packageManagers.description')).toBeInTheDocument();
+  });
+
+  test('should load the appropiate tab content when the tab is clicked', () => {
+    const props = { registryUrl: 'http://localhost:4872', scope: '@' };
+    render(<RegistryInfoContent registryUrl={props.registryUrl} scope={props.scope} />);
+
+    expect(screen.getByText('pnpm set @:registry http://localhost:4872')).toBeInTheDocument();
+    expect(screen.getByText('pnpm adduser --registry http://localhost:4872')).toBeInTheDocument();
+    expect(
+      screen.getByText('pnpm profile set password --registry http://localhost:4872')
+    ).toBeInTheDocument();
+  });
+});