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

package/src/providers/TranslatorProvider/TranslatorProvider.tsx

@@ -0,0 +1,54 @@
+import { i18n } from 'i18next';
+import React, { FunctionComponent, createContext, useCallback, useContext, useEffect } from 'react';
+import { I18nextProvider } from 'react-i18next';
+
+import useLocalStorage from '../../hooks/useLocalStorage';
+
+export type TranslatorProviderProps = {
+  setLanguage: (lng: string) => void;
+  language: string;
+  listLanguages: LanguageItem[];
+};
+
+export type LanguageItem = { lng: string; icon: any; menuKey: string };
+
+const I18nTranslatorContext = createContext<TranslatorProviderProps>({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setLanguage: (_lng: string) => {},
+  language: 'en-US',
+  listLanguages: [],
+});
+
+/**
+ * Translator provider
+ * @category Provider
+ */
+const TranslatorProvider: FunctionComponent<{
+  children: React.ReactElement<any>;
+  i18n: i18n;
+  listLanguages: any;
+  onMount: () => {};
+}> = ({ children, onMount, i18n, listLanguages }) => {
+  const currentLanguage = i18n.languages?.[0];
+  const [language, setLanguage] = useLocalStorage<string>('language', currentLanguage);
+  const changeLanguage = useCallback(async () => {
+    await i18n.changeLanguage(language);
+  }, [i18n, language]);
+
+  useEffect(() => {
+    changeLanguage();
+    onMount();
+  }, [language, onMount, changeLanguage]);
+
+  return (
+    <I18nextProvider i18n={i18n}>
+      <I18nTranslatorContext.Provider value={{ setLanguage, language, listLanguages }}>
+        {children}
+      </I18nTranslatorContext.Provider>
+    </I18nextProvider>
+  );
+};
+
+export default TranslatorProvider;
+
+export const useLanguage = () => useContext(I18nTranslatorContext);

package/src/providers/TranslatorProvider/index.ts

@@ -0,0 +1 @@
+export { default as TranslatorProvider, useLanguage, LanguageItem } from './TranslatorProvider';

package/src/providers/VersionProvider/README.md

@@ -0,0 +1,22 @@
+# `VersionProvider`
+
+Use the hook `useVersion()` to get an object with:
+
+- packageMeta
+- packageName
+- packageVersion
+
+The provider must be
+
+```jsx
+function CustomComponent() {
+  const { packageMeta, packageName, packageVersion } = useVersion();
+  return <div />;
+}
+
+<Route path={Routes.PACKAGE}>
+  <VersionProvider>
+    <CustomComponent />
+  </VersionProvider>
+</Route>;
+```

package/src/providers/VersionProvider/VersionProvider.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+import { Route } from 'react-router-dom';
+
+import { Route as Routes, store } from '../../';
+import {
+  act,
+  cleanup,
+  renderWithStore,
+  screen,
+  waitFor,
+} from '../../test/test-react-testing-library';
+import VersionProvider, { useVersion } from './VersionProvider';
+
+function CustomComponent() {
+  const { packageMeta, packageName, packageVersion } = useVersion();
+  return (
+    <div>
+      <div>{packageMeta?.latest?.license as string}</div>
+      <div>{packageName}</div>
+      <div>{packageVersion}</div>
+    </div>
+  );
+}
+
+/* eslint-disable react/jsx-no-bind*/
+describe('<Header /> component with logged in state', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('should load data from the provider', async () => {
+    await act(async () => {
+      renderWithStore(
+        <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
+          <Route path={Routes.PACKAGE}>
+            <VersionProvider>
+              <CustomComponent />
+            </VersionProvider>
+          </Route>
+        </MemoryRouter>,
+        store
+      );
+    });
+    await waitFor(() => screen.getByText('storybook'));
+    expect(screen.getByText('storybook')).toBeInTheDocument();
+    expect(screen.getByText('MIT')).toBeInTheDocument();
+  });
+});

package/src/providers/VersionProvider/VersionProvider.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect } from 'react';
+import { createContext, useContext } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import { Dispatch, RootState } from '../../store/store';
+import { PackageMetaInterface } from '../../types/packageMeta';
+
+function getRouterPackageName(packageName: string, scope?: string): string {
+  if (scope) {
+    return `@${scope}/${packageName}`;
+  }
+
+  return packageName;
+}
+
+export interface DetailContextProps {
+  hasNotBeenFound: boolean;
+  isLoading: boolean;
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  packageVersion?: string;
+  readMe: string;
+}
+
+export interface VersionPageConsumerProps {
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  packageVersion?: string;
+  readMe: string;
+}
+
+export const DetailContext = createContext<Partial<DetailContextProps>>({});
+
+interface Params {
+  scope?: string;
+  package: string;
+  version?: string;
+}
+
+/**
+* 
+*  @example
+    Once a component has been wrapped with `VersionProvider`, use the hook `useVersion()` to get an object with:
+    ```jsx
+    function CustomComponent() {
+      const { packageMeta, packageName, packageVersion } = useVersion();
+      return <div />;
+    }
+
+    <Route path={Routes.PACKAGE}>
+      <VersionProvider>
+        <CustomComponent />
+      </VersionProvider>
+    </Route>;
+    ```
+    On mount, the provider will fetch data from the store for specific package or version provided via router.
+   @category Provider
+ */
+const VersionProvider: React.FC<{ children: any }> = ({ children }) => {
+  const { version: packageVersion, package: pkgName, scope } = useParams<Params>();
+  // @ts-ignore
+  const { manifest, readme, packageName, hasNotBeenFound } = useSelector(
+    (state: RootState) => state.manifest
+  );
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.manifest);
+  const dispatch = useDispatch<Dispatch>();
+  useEffect(() => {
+    const packageName = getRouterPackageName(pkgName, scope);
+
+    dispatch.manifest.getManifest({ packageName, packageVersion });
+  }, [dispatch, packageVersion, pkgName, scope]);
+
+  return (
+    <DetailContext.Provider
+      value={{
+        packageMeta: manifest,
+        packageVersion,
+        readMe: readme,
+        packageName,
+        isLoading,
+        hasNotBeenFound,
+      }}
+    >
+      {children}
+    </DetailContext.Provider>
+  );
+};
+
+export default VersionProvider;
+
+export const useVersion = () => useContext(DetailContext);

package/src/providers/VersionProvider/index.ts

@@ -0,0 +1 @@
+export { default as VersionProvider, useVersion } from './VersionProvider';

package/src/providers/index.ts

@@ -0,0 +1,3 @@
+export * from './AppConfigurationProvider';
+export * from './VersionProvider';
+export * from './TranslatorProvider';

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>
+);