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

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,99 @@
+/* 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();
+  });
+});

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

@@ -0,0 +1,196 @@
+import styled from '@emotion/styled';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+import {
+  CopyClipboard,
+  getCLIChangePassword,
+  getCLISBerryYamlRegistry,
+  getCLISetConfigRegistry,
+  getCLISetRegistry,
+  useConfig,
+} from '../../../';
+import { Description, TextContent } from './styles';
+
+export const NODE_MANAGER = {
+  npm: 'npm',
+  yarn: 'yarn',
+  pnpm: 'pnpm',
+};
+
+const renderNpmTab = (scope: string | undefined, registryUrl: string): JSX.Element => {
+  return (
+    <Box display="flex" flexDirection="column">
+      <CopyClipboard
+        dataTestId="copy"
+        text={getCLISetConfigRegistry(`${NODE_MANAGER.npm} set`, scope, registryUrl)}
+      />
+      <CopyClipboard
+        dataTestId="copy"
+        text={getCLISetRegistry(`${NODE_MANAGER.npm} adduser`, registryUrl)}
+      />
+      <CopyClipboard dataTestId="copy" text={getCLIChangePassword(NODE_MANAGER.npm, registryUrl)} />
+    </Box>
+  );
+};
+
+const renderPnpmTab = (scope: string | undefined, registryUrl: string): JSX.Element => {
+  return (
+    <Box display="flex" flexDirection="column">
+      <CopyClipboard
+        dataTestId="copy"
+        text={getCLISetConfigRegistry(`${NODE_MANAGER.pnpm} set`, scope, registryUrl)}
+      />
+      <CopyClipboard
+        dataTestId="copy"
+        text={getCLISetRegistry(`${NODE_MANAGER.pnpm} adduser`, registryUrl)}
+      />
+      <CopyClipboard
+        dataTestId="copy"
+        text={getCLIChangePassword(NODE_MANAGER.pnpm, registryUrl)}
+      />
+    </Box>
+  );
+};
+
+const renderYarnTab = (scope: string | undefined, registryUrl: string): JSX.Element => {
+  return (
+    <Box display="flex" flexDirection="column">
+      <CopyClipboard
+        dataTestId="copy"
+        text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)}
+      />
+    </Box>
+  );
+};
+
+const renderYarnBerryTab = (scope: string | undefined, registryUrl: string): JSX.Element => {
+  return (
+    <Box display="flex" flexDirection="column">
+      <CopyClipboard dataTestId="copy" text={getCLISBerryYamlRegistry(scope, registryUrl)} />
+    </Box>
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+  },
+  heading: {
+    fontSize: theme.typography.pxToRem(15),
+    fontWeight: theme.typography.fontWeightBold,
+  },
+}));
+
+export const AccordionContainer = styled('div')({
+  padding: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+});
+
+export const CommandContainer = styled('div')({
+  padding: 5,
+});
+
+export const LinkContainer = styled('div')({
+  margin: 10,
+  marginLeft: 0,
+});
+
+export type Props = {
+  registryUrl: string;
+  scope: string | undefined;
+};
+
+const RegistryInfoContent: FC<Props> = ({ scope, registryUrl }) => {
+  const { t } = useTranslation();
+  const classes = useStyles();
+  const { configOptions } = useConfig();
+
+  const hasNpm = configOptions?.pkgManagers?.includes('npm');
+  const hasYarn = configOptions?.pkgManagers?.includes('yarn');
+  const hasPnpm = configOptions?.pkgManagers?.includes('pnpm');
+  // TODO: we can improve this logic, expanding only one accordion based on which package manager is enabled
+  // feel free to contribute here
+  return (
+    <>
+      <TextContent>{t('packageManagers.description')}</TextContent>
+      <AccordionContainer>
+        <Accordion disabled={!hasNpm}>
+          <AccordionSummary
+            aria-controls="panel1a-content"
+            expandIcon={<ExpandMoreIcon />}
+            id="panel1a-header"
+          >
+            <Typography className={classes.heading}>{'npm'}</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <CommandContainer data-testid={'tab-content'}>
+              {renderNpmTab(scope, registryUrl)}
+            </CommandContainer>
+          </AccordionDetails>
+        </Accordion>
+        <Accordion disabled={!hasYarn}>
+          <AccordionSummary
+            aria-controls="panel2a-content"
+            expandIcon={<ExpandMoreIcon />}
+            id="panel2a-header"
+          >
+            <Typography className={classes.heading}>{'yarn'}</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Description>
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                {t('packageManagers.yarnclassicDetails')}
+              </ReactMarkdown>
+            </Description>
+            <CommandContainer data-testid={'tab-content'}>
+              {renderYarnTab(scope, registryUrl)}
+            </CommandContainer>
+            <Description>
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                {t('packageManagers.yarnBerryDetails')}
+              </ReactMarkdown>
+            </Description>
+            <CommandContainer data-testid={'tab-content'}>
+              {renderYarnBerryTab(scope, registryUrl)}
+            </CommandContainer>
+          </AccordionDetails>
+        </Accordion>
+
+        <Accordion disabled={!hasPnpm}>
+          <AccordionSummary
+            aria-controls="panel3a-content"
+            expandIcon={<ExpandMoreIcon />}
+            id="panel3a-header"
+          >
+            {'pnpm'}
+          </AccordionSummary>
+          <AccordionDetails>
+            <CommandContainer data-testid={'tab-content'}>
+              {renderPnpmTab(scope, registryUrl)}
+            </CommandContainer>
+          </AccordionDetails>
+        </Accordion>
+
+        <LinkContainer>
+          <Link href="https://verdaccio.org/docs/en/cli-registry" target="_blank">
+            <Typography>{t('header.registry-info-link')}</Typography>
+          </Link>
+        </LinkContainer>
+      </AccordionContainer>
+    </>
+  );
+};
+
+export default RegistryInfoContent;

package/src/sections/Header/RegistryInfoContent/index.ts

@@ -0,0 +1 @@
+export { default } from './RegistryInfoContent';

package/src/sections/Header/RegistryInfoContent/styles.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+import { Theme } from '../../../';
+
+export const TextContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  paddingBottom: '10px',
+  backgroundColor: theme?.palette.background.default,
+}));
+
+export const Description = styled('div')<{ theme?: Theme }>(() => ({
+  fontSize: '1rem',
+  fontStyle: 'italic',
+}));

package/src/sections/Header/RegistryInfoDialog/RegistryInfoDialog.tsx

@@ -0,0 +1,31 @@
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Content, Title } from './styles';
+import { Props } from './types';
+
+const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose, title = '' }) => {
+  const { t } = useTranslation();
+  return (
+    <Dialog
+      data-testid={'registryInfo--dialog'}
+      id="registryInfo--dialog-container"
+      maxWidth="sm"
+      onClose={onClose}
+      open={open}
+    >
+      <Title>{title}</Title>
+      <Content>{children}</Content>
+      <DialogActions>
+        <Button color="inherit" id="registryInfo--dialog-close" onClick={onClose}>
+          {t('button.close')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default RegistryInfoDialog;

package/src/sections/Header/RegistryInfoDialog/index.ts

@@ -0,0 +1 @@
+export { default } from './RegistryInfoDialog';

package/src/sections/Header/RegistryInfoDialog/styles.ts

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import { Theme } from '../../../';
+
+export const Title = styled(DialogTitle)<{ theme?: Theme }>((props) => ({
+  backgroundColor: props.theme?.palette.primary.main,
+  color: props.theme?.palette.white,
+  fontSize: props.theme?.fontSize.lg,
+}));
+
+export const Content = styled(DialogContent)<{ theme?: Theme }>(({ theme }) => ({
+  padding: '0 24px',
+  backgroundColor: theme?.palette.background.default,
+}));
+
+export const TextContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  padding: '10px 24px',
+  backgroundColor: theme?.palette.background.default,
+}));

package/src/sections/Header/RegistryInfoDialog/types.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export interface Props {
+  children: ReactNode;
+  open: boolean;
+  title: string;
+  onClose: () => void;
+}

package/src/sections/Header/index.ts

@@ -0,0 +1 @@
+export { default } from './Header';

package/src/sections/Header/styles.ts

@@ -0,0 +1,100 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import AppBar from '@mui/material/AppBar';
+import IconButton from '@mui/material/IconButton';
+import Toolbar from '@mui/material/Toolbar';
+
+import { Link, Theme } from '../../';
+
+export const InnerNavBar = styled(Toolbar)({
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '0 15px',
+});
+
+export const Greetings = styled('span')({
+  margin: '0 5px 0 0',
+});
+
+export const RightSide = styled(Toolbar)({
+  display: 'flex',
+  padding: 0,
+});
+
+export const LeftSide = styled(RightSide)({
+  flex: 1,
+});
+
+export const MobileNavBar = styled('div')<{ theme?: Theme }>((props) => ({
+  alignItems: 'center',
+  display: 'flex',
+  borderBottom: `1px solid ${props.theme?.palette.greyLight}`,
+  padding: '8px',
+  position: 'relative',
+}));
+
+export const InnerMobileNavBar = styled('div')<{ theme?: Theme }>((props) => ({
+  borderRadius: '4px',
+  backgroundColor: props.theme?.palette.greyLight,
+  color: props.theme?.palette.white,
+  width: '100%',
+  padding: '0 5px',
+  margin: '0 10px 0 0',
+}));
+
+export const IconSearchButton = styled(IconButton)({});
+export const InfoButton = styled(IconButton)({});
+export const SwitchThemeButton = styled(IconButton)({});
+export const SettingsButtom = styled(IconButton)({});
+
+export const SearchWrapper = styled('div')({
+  display: 'none',
+  width: '100%',
+});
+
+export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
+  backgroundColor:
+    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  color: theme?.palette.white,
+  minHeight: 60,
+  display: 'flex',
+  justifyContent: 'center',
+  [`@media (max-width: ${theme?.breakPoints.xsmall}px)`]: css`
+    ${InfoButton} {
+      display: none;
+    }
+    ${SwitchThemeButton} {
+      display: none;
+    }
+    ${SettingsButtom} {
+      display: none;
+    }
+  `,
+  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: css`
+    ${SearchWrapper} {
+      display: flex;
+    }
+    ${IconSearchButton} {
+      display: none;
+    }
+    ${MobileNavBar} {
+      display: none;
+    }
+  `,
+  [`@media (min-width: ${theme?.breakPoints.large}px)`]: css`
+    ${InnerNavBar} {
+      padding: 0 20px;
+    }
+  `,
+  [`@media (min-width: ${theme?.breakPoints.xlarge}px)`]: css`
+    ${InnerNavBar} {
+      max-width: 1240px;
+      width: 100%;
+      margin: 0 auto;
+    }
+  `,
+}));
+
+export const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.white,
+}));

package/src/sections/Home/Home.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router';
+
+import Home from './Home';
+
+export default {
+  title: 'Sections/Home',
+};
+
+export const HomeDefault: any = () => (
+  <MemoryRouter initialEntries={[`/`]}>
+    <Route exact={true} path="/">
+      <Home />
+    </Route>
+  </MemoryRouter>
+);

package/src/sections/Home/Home.tsx

@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Dispatch, Loading, PackageList, RootState } from '../..';
+
+const Home: React.FC = () => {
+  const packages = useSelector((state: RootState) => state.packages.response);
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.packages);
+  const dispatch = useDispatch<Dispatch>();
+  useEffect(() => {
+    // @ts-ignore
+    dispatch.packages.getPackages();
+  }, [dispatch]);
+
+  return (
+    <div className="container content" data-testid="home-page-container">
+      {isLoading ? <Loading /> : <PackageList packages={packages} />}
+    </div>
+  );
+};
+
+export default Home;

package/src/sections/Home/index.ts

@@ -0,0 +1 @@
+export { default } from './Home';

package/src/sections/SideBar/Sidebar.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router';
+
+import { VersionProvider } from '../../providers';
+import DetailSidebar from './Sidebar';
+
+export default {
+  title: 'Sections/Sidebar',
+};
+
+export const SidebarLatestPackage: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
+    <Route exact={true} path="/-/web/detail/:package">
+      <VersionProvider>
+        <DetailSidebar />
+      </VersionProvider>
+    </Route>
+  </MemoryRouter>
+);
+
+export const SidebarPackageVersion: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/storybook/v/6.0.26`]}>
+    <Route exact={true} path="/-/web/detail/:package/v/:version">
+      <VersionProvider>
+        <DetailSidebar />
+      </VersionProvider>
+    </Route>
+  </MemoryRouter>
+);
+
+export const SidebarNoFounding: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/jquery`]}>
+    <Route exact={true} path="/-/web/detail/:package">
+      <VersionProvider>
+        <DetailSidebar />
+      </VersionProvider>
+    </Route>
+  </MemoryRouter>
+);