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

package/src/sections/Detail/ContainerContent.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { useVersion } from '../../providers';
+import loadable from '../../utils/loadable';
+import ReadmeSection from './ReadmeSection';
+
+export enum TabPosition {
+  README = 'readme',
+  DEPENDENCIES = 'dependencies',
+  VERSIONS = 'versions',
+  UPLINKS = 'uplinks',
+}
+
+const Versions = loadable(
+  () => import(/* webpackChunkName: "Versions" */ '../../components/Versions')
+);
+const UpLinks = loadable(
+  () => import(/* webpackChunkName: "UpLinks" */ '../../components/UpLinks')
+);
+
+const Dependencies = loadable(
+  () => import(/* webpackChunkName: "Dependencies" */ '../../components/Dependencies')
+);
+
+interface Props {
+  tabPosition: TabPosition;
+  readDescription?: string;
+}
+
+const ContainerContent: React.FC<Props> = ({ tabPosition, readDescription }) => {
+  const { packageMeta, packageName } = useVersion();
+  switch (tabPosition) {
+    case TabPosition.README:
+      return <ReadmeSection description={readDescription} />;
+    case TabPosition.UPLINKS:
+      return <UpLinks packageMeta={packageMeta} />;
+    case TabPosition.VERSIONS:
+      return <Versions packageMeta={packageMeta} packageName={packageName} />;
+    case TabPosition.DEPENDENCIES:
+      return <Dependencies packageMeta={packageMeta} />;
+    default:
+      return null;
+  }
+};
+
+export default ContainerContent;

package/src/sections/Detail/Detail.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router';
+
+import { VersionProvider } from '../../providers';
+import Detail from './Detail';
+
+export default {
+  title: 'Sections/Detail',
+};
+
+export const DetailStorybook: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
+    <Route exact={true} path="/-/web/detail/:package">
+      <VersionProvider>
+        <Detail />
+      </VersionProvider>
+    </Route>
+  </MemoryRouter>
+);
+
+export const DetailJquery: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/jquery`]}>
+    <Route exact={true} path="/-/web/detail/:package">
+      <VersionProvider>
+        <Detail />
+      </VersionProvider>
+    </Route>
+  </MemoryRouter>
+);

package/src/sections/Detail/Detail.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { render } from '../../test/test-react-testing-library';
+import DetailContainer from './Detail';
+
+describe('DetailContainer', () => {
+  test('renders correctly', () => {
+    const { container } = render(<DetailContainer />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  test.todo('should test click on tabs');
+});

package/src/sections/Detail/Detail.tsx

@@ -0,0 +1,34 @@
+import Box from '@mui/material/Box';
+import React, { useState } from 'react';
+
+import Deprecated from '../../components/Deprecated';
+import { useVersion } from '../../providers';
+import ContainerContent from './ContainerContent';
+import Tabs from './Tabs';
+
+export enum TabPosition {
+  README = 'readme',
+  DEPENDENCIES = 'dependencies',
+  VERSIONS = 'versions',
+  UPLINKS = 'uplinks',
+}
+
+const DetailContainer: React.FC = () => {
+  const tabs = Object.values(TabPosition);
+  const [tabPosition, setTabPosition] = useState(0);
+  const { readMe, packageMeta } = useVersion();
+
+  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+    setTabPosition(newValue);
+  };
+
+  return (
+    <Box component="div" display="flex" flexDirection="column" padding={2}>
+      <Tabs onChange={handleChange} tabPosition={tabPosition} />
+      {packageMeta?.latest?.deprecated && <Deprecated message={packageMeta?.latest?.deprecated} />}
+      <ContainerContent readDescription={readMe} tabPosition={tabs[tabPosition]} />
+    </Box>
+  );
+};
+
+export default DetailContainer;

package/src/sections/Detail/ReadmeSection.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Readme from '../../components/Readme';
+
+interface Props {
+  description?: string;
+}
+
+const DetailContainerContentReadme: React.FC<Props> = ({ description }) => {
+  if (!description) {
+    return null;
+  }
+
+  return <Readme description={description} />;
+};
+
+export default DetailContainerContentReadme;

package/src/sections/Detail/Tabs.tsx

@@ -0,0 +1,36 @@
+import styled from '@emotion/styled';
+import Tab from '@mui/material/Tab';
+import { default as MuiTabs } from '@mui/material/Tabs';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Theme } from '../../Theme';
+
+interface Props {
+  onChange: (event: React.ChangeEvent<{}>, newValue: number) => void;
+  tabPosition: number;
+}
+
+const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
+  const { t } = useTranslation();
+  return (
+    <Tabs
+      color={'primary'}
+      indicatorColor={'primary'}
+      onChange={onChange}
+      value={tabPosition}
+      variant={'fullWidth'}
+    >
+      <Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
+      <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
+      <Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />
+      <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={t('tab.uplinks')} />
+    </Tabs>
+  );
+};
+
+export default DetailContainerTabs;
+
+const Tabs = styled(MuiTabs)<{ theme?: Theme }>({
+  marginBottom: 16,
+});

package/src/sections/Detail/index.ts

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

package/src/sections/Footer/Footer.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { render, screen } from '../../test/test-react-testing-library';
+import Footer from './Footer';
+
+describe('<Footer /> component', () => {
+  beforeAll(() => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.version = 'v1.0.0';
+  });
+
+  afterAll(() => {
+    delete window.__VERDACCIO_BASENAME_UI_OPTIONS.version;
+  });
+
+  test('should load the initial state of Footer component', () => {
+    render(<Footer />);
+    expect(screen.getByTestId('footer')).toBeInTheDocument();
+    expect(screen.getByTestId('version-footer')).toBeInTheDocument();
+  });
+});

package/src/sections/Footer/Footer.tsx

@@ -0,0 +1,112 @@
+/* eslint-disable react/jsx-max-depth */
+
+/* eslint-disable react/jsx-pascal-case */
+import styled from '@emotion/styled';
+import FlagsIcon from 'country-flag-icons/react/3x2';
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { Logo, Theme, useConfig } from '../../';
+import { Earth } from '../../components/Icons';
+import { Inner, Left, Love, Right, Wrapper } from './styles';
+
+function goToVerdaccioWebsite(): void {
+  window.open('https://verdaccio.org', '_blank');
+}
+
+/* eslint-disable react/jsx-key */
+const Footer = () => {
+  const { t } = useTranslation();
+  const { configOptions } = useConfig();
+  return (
+    <Wrapper data-testid="footer">
+      <Inner>
+        <Left>
+          <Trans components={[<Love />]} i18nKey="footer.made-with-love-on" />
+          <ToolTip>
+            <StyledEarth />
+            <Flags>
+              <Icon>
+                <FlagsIcon.ES />
+              </Icon>
+              <Icon>
+                <FlagsIcon.NI />
+              </Icon>
+              <Icon>
+                <FlagsIcon.IN />
+              </Icon>
+              <Icon>
+                <FlagsIcon.BR />
+              </Icon>
+              <Icon>
+                <FlagsIcon.CN />
+              </Icon>
+              <Icon>
+                <FlagsIcon.AU />
+              </Icon>
+              <Icon>
+                <FlagsIcon.DE />
+              </Icon>
+              <Icon>
+                <FlagsIcon.TW />
+              </Icon>
+            </Flags>
+          </ToolTip>
+        </Left>
+        <Right>
+          {configOptions?.version && (
+            <>
+              <span data-testid="version-footer">{t('footer.powered-by')}</span>
+              <Logo isDefault={true} onClick={goToVerdaccioWebsite} size="x-small" />
+              {`/ ${configOptions.version}`}
+            </>
+          )}
+        </Right>
+      </Inner>
+    </Wrapper>
+  );
+};
+
+export default Footer;
+
+const StyledEarth = styled(Earth)<{ theme?: Theme }>(({ theme }) => ({
+  margin: theme.spacing(0, 1),
+}));
+
+const Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  display: 'inline-grid',
+  gridTemplateColumns: 'repeat(8, max-content)',
+  gridGap: theme.spacing(0, 1),
+  position: 'absolute',
+  background: theme?.palette.greyAthens,
+  padding: '1px 4px',
+  borderRadius: 3,
+  height: 20,
+  alignItems: 'center',
+  visibility: 'hidden',
+  top: -2,
+  ':before': {
+    content: "''",
+    position: 'absolute',
+    top: '29%',
+    left: -4,
+    marginLeft: -5,
+    border: '5px solid',
+    borderColor: `${theme?.palette.greyAthens} transparent transparent transparent`,
+    transform: 'rotate(90deg)',
+  },
+}));
+
+const Icon = styled('div')({
+  width: '10px',
+});
+
+const ToolTip = styled('span')({
+  position: 'relative',
+  height: '18px',
+  ':hover': {
+    [`${Flags}`]: {
+      visibility: 'visible',
+    },
+  },
+});

package/src/sections/Footer/index.ts

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

package/src/sections/Footer/styles.ts

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+
+import { Theme } from '../../';
+
+export const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  background: theme?.palette.mode === 'light' ? theme?.palette.snow : theme?.palette.cyanBlue,
+  borderTop: `1px solid ${theme?.palette.greyGainsboro}`,
+  color: theme?.palette.mode === 'dark' ? theme?.palette.white : theme?.palette.nobel01,
+  fontSize: '14px',
+  padding: '20px',
+}));
+
+export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  width: '100%',
+  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
+    minWidth: 400,
+    maxWidth: 800,
+    margin: 'auto',
+    justifyContent: 'space-between',
+  },
+  [`@media (min-width: ${theme?.breakPoints.large}px)`]: {
+    maxWidth: 1240,
+  },
+}));
+
+export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  alignItems: 'center',
+  display: 'none',
+  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
+    display: 'flex',
+  },
+}));
+
+export const Right = styled(Left)({
+  display: 'flex',
+});
+
+export const Love = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.love,
+  padding: '0 5px',
+}));

package/src/sections/Header/Header.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router';
+
+import { HeaderInfoDialog } from '../../';
+import { VersionProvider } from '../../providers';
+import Header from './Header';
+
+export default {
+  title: 'Sections/Header',
+};
+
+function CustomInfoDialog({ onCloseDialog, title, isOpen }) {
+  return (
+    <HeaderInfoDialog
+      dialogTitle={title}
+      isOpen={isOpen}
+      onCloseDialog={onCloseDialog}
+      tabPanels={[
+        { element: <div>{'foo'}</div> },
+        { element: <div>{'bar'}</div> },
+        { element: <div>{'fooBar'}</div> },
+      ]}
+      tabs={[{ label: 'foo' }, { label: 'bar' }, { label: 'barFoo' }]}
+    />
+  );
+}
+
+export const HeaderAll: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
+    <Route exact={true} path="/-/web/detail/:package">
+      <VersionProvider>
+        <Header HeaderInfoDialog={CustomInfoDialog} />
+      </VersionProvider>
+    </Route>
+  </MemoryRouter>
+);

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

@@ -0,0 +1,278 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { HeaderInfoDialog, store } from '../../';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  renderWithStore,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '../../test/test-react-testing-library';
+import Header from './Header';
+
+function CustomInfoDialog({ onCloseDialog, title, isOpen }) {
+  return (
+    <HeaderInfoDialog
+      dialogTitle={title}
+      isOpen={isOpen}
+      onCloseDialog={onCloseDialog}
+      tabPanels={[
+        { element: <div>{'foo'}</div> },
+        { element: <div>{'bar'}</div> },
+        { element: <div>{'fooBar'}</div> },
+      ]}
+      tabs={[{ label: 'foo' }, { label: 'bar' }, { label: 'barFoo' }]}
+    />
+  );
+}
+
+/* eslint-disable react/jsx-no-bind*/
+describe('<Header /> component with logged in state', () => {
+  beforeEach(() => {
+    store.dispatch.login.logOutUser();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('should load the component n logged out state', () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    expect(screen.queryByTestId('logInDialogIcon')).toBeNull();
+    expect(screen.getByText('button.login')).toBeTruthy();
+    expect(screen.queryByTestId('header--button-login')).toBeInTheDocument();
+  });
+
+  test('should load the component in logged in state', async () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+    store.dispatch.login.logInUser({ username: 'store', token: '12345' });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('logInDialogIcon')).toBeTruthy();
+      expect(screen.queryByText('button.login')).toBeNull();
+    });
+  });
+
+  test('should open login dialog', async () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    const loginBtn = screen.getByTestId('header--button-login');
+    fireEvent.click(loginBtn);
+
+    const loginDialog = await waitFor(() => screen.getByTestId('login--dialog'));
+
+    expect(loginDialog).toBeTruthy();
+  });
+
+  test('should login and logout the user', async () => {
+    const { getByText, getByTestId } = renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    fireEvent.click(screen.getByText('button.login'));
+    const userNameInput = screen.getByPlaceholderText('form-placeholder.username');
+    fireEvent.focus(userNameInput);
+    fireEvent.change(userNameInput, { target: { value: 'xyz' } });
+    const passwordInput = screen.getByPlaceholderText('form-placeholder.password');
+    fireEvent.focus(passwordInput);
+    await act(async () => {
+      fireEvent.change(passwordInput, { target: { value: '1234' } });
+    });
+    const signInButton = screen.getByTestId('login-dialog-form-login-button');
+    await act(async () => {
+      fireEvent.click(signInButton);
+    });
+    await waitFor(() => getByTestId('logInDialogIcon'));
+    const headerMenuAccountCircle = getByTestId('logInDialogIcon');
+    fireEvent.click(headerMenuAccountCircle);
+
+    // // wait for button Logout's appearance and return the element
+    const logoutBtn = await waitFor(() => getByText('button.logout'));
+    fireEvent.click(logoutBtn);
+    await waitFor(() => getByText('button.login'));
+    expect(getByText('button.login')).toBeTruthy();
+  });
+
+  test('should display info button', () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+    expect(screen.getByTestId('header--tooltip-info')).toBeInTheDocument();
+  });
+
+  test('should display settings button', () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+    expect(screen.getByTestId('header--tooltip-settings')).toBeInTheDocument();
+  });
+
+  test('should display light button switch', () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+    expect(screen.getByTestId('header--button--light')).toBeInTheDocument();
+  });
+
+  test.todo('should test display dark button switch');
+
+  test('should display search box', () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+    expect(screen.getByTestId('search-container')).toBeInTheDocument();
+  });
+
+  test('should open the registrationInfo modal when clicking on the info icon', async () => {
+    renderWithStore(
+      <Router>
+        <Header HeaderInfoDialog={CustomInfoDialog} />
+      </Router>,
+      store
+    );
+
+    const infoBtn = screen.getByTestId('header--tooltip-info');
+    expect(infoBtn).toBeInTheDocument();
+    fireEvent.click(infoBtn);
+    // wait for registrationInfo modal appearance and return the element
+    const registrationInfoModal = await waitFor(() => screen.getByTestId('registryInfo--dialog'));
+    expect(registrationInfoModal).toBeTruthy();
+  });
+
+  test('should close the registrationInfo modal when clicking on the button close', async () => {
+    const { getByTestId, getByText, queryByTestId } = renderWithStore(
+      <Router>
+        <Header HeaderInfoDialog={CustomInfoDialog} />
+      </Router>,
+      store
+    );
+
+    const infoBtn = getByTestId('header--tooltip-info');
+    fireEvent.click(infoBtn);
+
+    // wait for Close's button of registrationInfo modal appearance and return the element
+    const closeBtn = await waitFor(() => getByText('button.close'));
+    fireEvent.click(closeBtn);
+
+    const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>
+      queryByTestId('registryInfo--dialog')
+    );
+    expect(hasRegistrationInfoModalBeenRemoved).not.toBeDefined();
+  });
+
+  test('should hide login if is disabled', () => {
+    // @ts-expect-error
+    window.__VERDACCIO_BASENAME_UI_OPTIONS = {
+      base: 'foo',
+      login: false,
+    };
+    renderWithStore(
+      <Router>
+        <Header HeaderInfoDialog={CustomInfoDialog} />
+      </Router>,
+      store
+    );
+
+    expect(screen.queryByTestId('header--button-login')).toBeNull();
+  });
+
+  test('should hide search if is disabled', () => {
+    // @ts-expect-error
+    window.__VERDACCIO_BASENAME_UI_OPTIONS = {
+      base: 'foo',
+      showSearch: false,
+    };
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    expect(screen.queryByTestId('search-container')).toBeNull();
+  });
+
+  test('should hide settings if is disabled', () => {
+    // @ts-expect-error
+    window.__VERDACCIO_BASENAME_UI_OPTIONS = {
+      base: 'foo',
+      showSettings: false,
+    };
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    expect(screen.queryByTitle('header--tooltip-settings')).toBeNull();
+  });
+
+  test('should hide info if is disabled', () => {
+    // @ts-expect-error
+    window.__VERDACCIO_BASENAME_UI_OPTIONS = {
+      base: 'foo',
+      showSettings: false,
+    };
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    expect(screen.queryByTitle('header.registry-info')).toBeNull();
+  });
+
+  test('should hide theme switch if is disabled', () => {
+    // @ts-expect-error
+    window.__VERDACCIO_BASENAME_UI_OPTIONS = {
+      base: 'foo',
+      showThemeSwitch: false,
+    };
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    expect(screen.queryByTitle('header.registry-info')).toBeNull();
+  });
+
+  test.todo('autocompletion should display suggestions according to the type value');
+});