@verdaccio/ui-components 4.0.0-next-8.6 → 4.0.0-next-8.8

package/src/sections/Header/styles.ts

@@ -1,88 +0,0 @@
-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 { Theme } from '../../Theme';
-
-export const InnerNavBar = styled(Toolbar)({
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: 0,
-});
-
-export const Greetings = styled('span')({
-  margin: '0 5px 0 0',
-});
-
-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%',
-  marginLeft: 20,
-});
-
-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 16px;
-    }
-  `,
-  [`@media (min-width: ${theme.breakPoints.xlarge}px)`]: css`
-    ${InnerNavBar} {
-      max-width: 1240px;
-      width: 100%;
-      margin: 0 auto;
-    }
-  `,
-}));

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

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { HttpResponse, http } from 'msw';
-import React from 'react';
-import { MemoryRouter, Route } from 'react-router';
-
-import Home from './Home';
-
-type Story = StoryObj<typeof Home>;
-const meta: Meta<typeof Home> = {
-  title: 'Sections/Home',
-  component: Home,
-};
-
-export default meta;
-
-export const HomeDefault: Story = {
-  render: () => (
-    <MemoryRouter initialEntries={[`/`]}>
-      <Route exact={true} path="/">
-        <Home />
-      </Route>
-    </MemoryRouter>
-  ),
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('https://my-registry.org/-/verdaccio/data/packages', () => {
-          return HttpResponse.json([...require('../../../vitest/api/home.json')]);
-        }),
-      ],
-    },
-  },
-};

package/src/sections/Home/Home.test.tsx

@@ -1,41 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import React from 'react';
-import { MemoryRouter } from 'react-router';
-import { afterEach, describe, expect, test, vi } from 'vitest';
-
-import { store } from '../../store';
-import { act, renderWithStore, screen, waitFor } from '../../test/test-react-testing-library';
-import Home from './Home';
-
-// force the windows to expand to display items
-// https://github.com/bvaughn/react-virtualized/issues/493#issuecomment-640084107
-vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600);
-vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(600);
-
-const ComponentHome: React.FC = () => (
-  <MemoryRouter>
-    <Home />
-  </MemoryRouter>
-);
-
-describe('Home', () => {
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test('should render titles', async () => {
-    act(() => {
-      renderWithStore(<ComponentHome />, store);
-    });
-    await waitFor(() => expect(screen.getAllByTestId('package-item-list')).toHaveLength(5));
-  });
-
-  test('should render loading', async () => {
-    act(() => {
-      renderWithStore(<ComponentHome />, store);
-    });
-    await waitFor(() => expect(screen.getByTestId('loading')).toBeInTheDocument());
-  });
-});

package/src/sections/Home/Home.tsx

@@ -1,21 +0,0 @@
-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

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

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

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { HttpResponse, http } from 'msw';
-import React from 'react';
-import { MemoryRouter, Route } from 'react-router';
-
-import { VersionProvider } from '../../providers';
-import DetailSidebar from './Sidebar';
-
-const meta: Meta<typeof DetailSidebar> = {
-  title: 'Sections/Sidebar',
-  component: DetailSidebar,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DetailSidebar>;
-
-export const SidebarLatestPackage: Story = {
-  render: () => (
-    <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
-      <Route exact={true} path="/-/web/detail/:package">
-        <VersionProvider>
-          <DetailSidebar />
-        </VersionProvider>
-      </Route>
-    </MemoryRouter>
-  ),
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('https://my-registry.org/-/verdaccio/data/sidebar/storybook', () => {
-          return HttpResponse.json(require('../../../vitest/api/storybook-sidebar.json'));
-        }),
-        http.get('https://my-registry.org/-/verdaccio/data/package/readme/storybook', () => {
-          return HttpResponse.json(require('../../../vitest/api/storybook-readme')());
-        }),
-      ],
-    },
-  },
-};
-
-export const SidebarPackageVersion: Story = {
-  render: () => (
-    <MemoryRouter initialEntries={[`/-/web/detail/storybook/v/6.0.26`]}>
-      <Route exact={true} path="/-/web/detail/:package/v/:version">
-        <VersionProvider>
-          <DetailSidebar />
-        </VersionProvider>
-      </Route>
-    </MemoryRouter>
-  ),
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('https://my-registry.org/-/verdaccio/data/sidebar/storybook', () => {
-          return HttpResponse.json(require('../../../vitest/api/storybook-sidebar.json'));
-        }),
-        http.get('https://my-registry.org/-/verdaccio/data/package/readme/storybook', () => {
-          return HttpResponse.json(require('../../../vitest/api/storybook-readme')());
-        }),
-      ],
-    },
-  },
-};

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

@@ -1,75 +0,0 @@
-import React from 'react';
-import { MemoryRouter } from 'react-router';
-import { vi } from 'vitest';
-
-import { VersionProvider } from '../../providers';
-import { store } from '../../store';
-import { act, renderWithStore, screen, waitFor } from '../../test/test-react-testing-library';
-import Sidebar from './Sidebar';
-
-vi.mock('marked');
-vi.mock('marked-highlight');
-
-const ComponentSideBar: React.FC = () => (
-  <MemoryRouter initialEntries={[`/-/web/detail/jquery`]}>
-    <VersionProvider>
-      <Sidebar />
-    </VersionProvider>
-  </MemoryRouter>
-);
-
-const mockPkgName = vi.fn().mockReturnValue('jquery');
-
-vi.mock('react-router-dom', async (importOriginal) => ({
-  ...(await importOriginal<typeof import('react-router-dom')>()),
-  useParams: () => ({
-    package: mockPkgName(),
-  }),
-}));
-
-describe('Sidebar', () => {
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-  test('should render titles', async () => {
-    act(() => {
-      renderWithStore(<ComponentSideBar />, store);
-    });
-    await waitFor(() => expect(screen.getAllByText('jquery')).toHaveLength(2));
-
-    expect(screen.getByText(`sidebar.detail.latest-version`, { exact: false })).toBeInTheDocument();
-    expect(
-      screen.getByText(/sidebar.detail.published .*years? ago/i, { exact: false })
-    ).toBeInTheDocument();
-    expect(screen.getByText(`sidebar.installation.title`, { exact: false })).toBeInTheDocument();
-  });
-
-  test('should render commonJS', async () => {
-    act(() => {
-      renderWithStore(<ComponentSideBar />, store);
-    });
-    // package name + keyword
-    await waitFor(() => expect(screen.getAllByText('jquery')).toHaveLength(2));
-    expect(screen.getByAltText('commonjs')).toBeInTheDocument();
-  });
-
-  test('should render typescript', async () => {
-    mockPkgName.mockReturnValue('glob');
-    act(() => {
-      renderWithStore(<ComponentSideBar />, store);
-    });
-    // just package name
-    await waitFor(() => expect(screen.getByText('glob')).toBeInTheDocument());
-    expect(screen.getByAltText('typescript')).toBeInTheDocument();
-  });
-
-  test('should render es modules', async () => {
-    mockPkgName.mockReturnValue('got');
-    act(() => {
-      renderWithStore(<ComponentSideBar />, store);
-    });
-    // package name + keyword
-    await waitFor(() => expect(screen.getAllByText('got')).toHaveLength(2));
-    expect(screen.getByAltText('es6 modules')).toBeInTheDocument();
-  });
-});

package/src/sections/SideBar/Sidebar.tsx

@@ -1,69 +0,0 @@
-import Paper from '@mui/material/Paper';
-import React from 'react';
-
-import ActionBar from '../../components/ActionBar';
-import Author from '../../components/Author';
-import Developers, { DeveloperType } from '../../components/Developers';
-import Dist from '../../components/Distribution';
-import Engines from '../../components/Engines';
-import FundButton from '../../components/FundButton';
-import Install from '../../components/Install';
-import Keywords from '../../components/Keywords';
-import Repository from '../../components/Repository';
-import SideBarTitle from '../../components/SideBarTitle';
-import { useConfig } from '../../providers';
-import { useVersion } from '../../providers';
-import { ModuleType, PackageMetaInterface } from '../../types/packageMeta';
-
-const getModuleTypes = (manifest: PackageMetaInterface) => {
-  if (!manifest.latest) return [];
-
-  const moduleTypes: ModuleType[] = [manifest.latest.type || 'commonjs'];
-
-  if (manifest.latest.main) {
-    moduleTypes.push('commonjs');
-  }
-
-  return Array.from(new Set(moduleTypes));
-};
-
-const DetailSidebar: React.FC = () => {
-  const { packageMeta, packageName, packageVersion } = useVersion();
-
-  const { configOptions } = useConfig();
-  const version = packageVersion || packageMeta?.latest.version || '';
-  const time = packageMeta?.time ? packageMeta.time[version] : '';
-  if (!packageMeta || !packageName) {
-    return null;
-  }
-
-  return (
-    <Paper data-testid="sidebar" sx={{ position: 'sticky', top: 0, p: 2, ml: 2 }}>
-      <SideBarTitle
-        description={packageMeta.latest?.description}
-        hasTypes={typeof packageMeta.latest?.types === 'string'}
-        isLatest={typeof packageVersion === 'undefined'}
-        moduleTypes={getModuleTypes(packageMeta)}
-        packageName={packageName}
-        time={time}
-        version={version}
-      />
-      <ActionBar
-        packageMeta={packageMeta}
-        showDownloadTarball={configOptions.showDownloadTarball}
-        showRaw={configOptions.showRaw}
-      />
-      <FundButton packageMeta={packageMeta} />
-      <Install configOptions={configOptions} packageMeta={packageMeta} packageName={packageName} />
-      <Repository packageMeta={packageMeta} />
-      <Engines packageMeta={packageMeta} />
-      <Dist packageMeta={packageMeta} />
-      <Keywords packageMeta={packageMeta} />
-      <Author packageMeta={packageMeta} />
-      <Developers packageMeta={packageMeta} type={DeveloperType.MAINTAINERS} />
-      <Developers packageMeta={packageMeta} type={DeveloperType.CONTRIBUTORS} />
-    </Paper>
-  );
-};
-
-export default DetailSidebar;

package/src/sections/SideBar/index.ts

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

package/src/sections/index.ts

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

package/src/store/api.test.ts

@@ -1,157 +0,0 @@
-import { vi } from 'vitest';
-
-import api, { CustomError, handleResponseType } from './api';
-
-describe('api', () => {
-  describe('handleResponseType', () => {
-    test('should handle missing Content-Type', async () => {
-      const responseText = `responseText`;
-      const ok = false;
-      const response: Response = {
-        url: 'http://localhost:8080/-/packages',
-        ok,
-        headers: new Headers(),
-        text: async () => responseText,
-      } as Response;
-
-      const handled = await handleResponseType(response);
-
-      expect(handled[0]).toBeFalsy();
-      expect(handled[1]).toBeDefined();
-    });
-
-    test('should test tgz scenario', async () => {
-      const blob = new Blob(['foo']);
-      const blobPromise = Promise.resolve<Blob>(blob);
-      const response: Response = {
-        url: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
-        blob: () => blobPromise,
-        ok: true,
-        headers: new Headers(),
-      } as Response;
-      const handled = await handleResponseType(response);
-
-      expect(handled).toEqual([true, blob]);
-    });
-
-    test('should test pdf scenario', async () => {
-      const blob = new Blob(['foo']);
-      const blobPromise = Promise.resolve<Blob>(blob);
-      const response: Response = {
-        url: 'http://localhost:8080/test.pdf',
-        blob: () => blobPromise,
-        ok: true,
-        headers: new Headers({
-          'Content-Type': 'application/pdf',
-        }),
-      } as Response;
-      const handled = await handleResponseType(response);
-
-      expect(handled).toEqual([true, blob]);
-    });
-  });
-
-  describe('api client', () => {
-    let fetchSpy;
-
-    beforeEach(() => {
-      fetchSpy = vi.spyOn(window, 'fetch');
-    });
-
-    afterEach(() => {
-      fetchSpy.mockRestore();
-    });
-
-    test('when url is a resource url', async () => {
-      fetchSpy.mockImplementation(() =>
-        Promise.resolve({
-          headers: new Headers({
-            'Content-Type': 'application/json',
-          }),
-          ok: true,
-          json: () => ({ a: 1 }),
-        })
-      );
-
-      const response = await api.request('https://verdaccio.tld/resource');
-
-      expect(fetchSpy).toHaveBeenCalledWith('https://verdaccio.tld/resource', {
-        credentials: 'same-origin',
-        headers: {},
-        method: 'GET',
-      });
-      expect(response).toEqual({ a: 1 });
-    });
-
-    test.skip('when there is token from storage', async () => {
-      vi.resetModules();
-      vi.doMock('./storage', () => ({ getItem: () => 'token-xx-xx-xx' }));
-
-      fetchSpy.mockImplementation(() =>
-        Promise.resolve({
-          headers: new Headers({
-            'Content-Type': 'application/json',
-          }),
-          ok: true,
-          json: () => ({ c: 3 }),
-        })
-      );
-
-      const api = await require('./api').default;
-      const response = await api.request('https://verdaccio.tld/resource', 'GET');
-
-      expect(fetchSpy).toHaveBeenCalledWith('https://verdaccio.tld/resource', {
-        credentials: 'same-origin',
-        headers: new Headers({
-          Authorization: 'Bearer token-xx-xx-xx',
-          'x-client': 'verdaccio-ui',
-        }),
-        method: 'GET',
-      });
-      expect(response).toEqual({ c: 3 });
-    });
-
-    test('when url is a cross origin url', async () => {
-      fetchSpy.mockImplementation(() =>
-        Promise.resolve({
-          headers: new Headers({
-            'Content-Type': 'application/json',
-          }),
-          ok: true,
-          json: () => ({ b: 2 }),
-        })
-      );
-
-      const response = await api.request('https://verdaccio.xyz/resource');
-      expect(fetchSpy).toHaveBeenCalledWith('https://verdaccio.xyz/resource', {
-        credentials: 'same-origin',
-        headers: {},
-        method: 'GET',
-      });
-      expect(response).toEqual({ b: 2 });
-    });
-
-    test('when api returns an error 3.x.x - 4.x.x', async () => {
-      fetchSpy.mockImplementation(() =>
-        Promise.resolve({
-          headers: new Headers({
-            'Content-Type': 'application/json',
-          }),
-          ok: false,
-          json: () => {},
-        })
-      );
-
-      const error = new CustomError('Unknown error');
-      error.code = 500;
-      await expect(api.request('/resource')).rejects.toThrow(error);
-    });
-
-    test('when api returns an error 5.x.x', async () => {
-      const errorMessage = 'Internal server error';
-      fetchSpy.mockImplementation(() => Promise.reject(new Error(errorMessage)));
-
-      await expect(api.request('/resource')).rejects.toThrow(new Error(errorMessage));
-    });
-  });
-});

package/src/store/api.ts

@@ -1,80 +0,0 @@
-import storage from './storage';
-
-export class CustomError extends Error {
-  // @ts-ignore
-  code: number;
-}
-
-/**
- * Handles response according to content type
- * @param {object} response
- * @returns {promise}
- */
-export function handleResponseType(response: Response): Promise<[boolean, any]> {
-  if (response.headers) {
-    const contentType = response.headers.get('Content-Type');
-    if (contentType?.includes('application/pdf')) {
-      return Promise.all([response.ok, response.blob()]);
-    }
-    if (contentType?.includes('application/json')) {
-      return Promise.all([response.ok, response.json()]);
-    }
-    // it includes all text types
-    if (contentType?.includes('text/')) {
-      return Promise.all([response.ok, response.text()]);
-    }
-
-    // unfortunately on download files there is no header available
-    if (response.url && response.url.endsWith('.tgz') === true) {
-      return Promise.all([response.ok, response.blob()]);
-    }
-  }
-
-  // error handling
-  return Promise.all([response.ok, response]);
-}
-
-const AuthHeader = 'Authorization';
-
-class API {
-  public request<T>(
-    url: string,
-    method = 'GET',
-    options: RequestInit = { headers: {} }
-  ): Promise<T> {
-    const token = storage.getItem('token');
-    const headers = new Headers(options.headers);
-
-    if (token && headers.has(AuthHeader) === false) {
-      headers.set(AuthHeader, `Bearer ${token}`);
-      options.headers = headers;
-    }
-
-    headers.set('x-client', 'verdaccio-ui');
-
-    return new Promise((resolve, reject) => {
-      fetch(url, {
-        method,
-        credentials: 'same-origin',
-        signal: options.signal,
-        ...options,
-      })
-        .then(handleResponseType)
-        .then((response) => {
-          const [ok, data] = response;
-          if (ok === true) {
-            resolve(data);
-          } else {
-            const error = new CustomError(data?.statusText ?? 'Unknown error');
-            error.code = data?.status ?? 500;
-            reject(error);
-          }
-        })
-        .catch((error) => {
-          reject(error);
-        });
-    });
-  }
-}
-
-export default new API();

package/src/store/index.ts

@@ -1,3 +0,0 @@
-export { store, RootState, Dispatch } from './store';
-export { LoginError, LoginBody, LoginResponse } from './models/login';
-export { default as api } from './api';