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

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

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { VersionProvider } from '../../providers';
+import { store } from '../../store';
+import { renderWithStore, screen, waitFor } from '../../test/test-react-testing-library';
+import Sidebar from './Sidebar';
+
+jest.mock('marked');
+jest.mock('marked-highlight');
+
+const ComponentSideBar: React.FC = () => (
+  <MemoryRouter>
+    <VersionProvider>
+      <Sidebar />
+    </VersionProvider>
+  </MemoryRouter>
+);
+
+const mockPkgName = jest.fn().mockReturnValue('jquery');
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
+  useParams: () => ({
+    package: mockPkgName(),
+  }),
+}));
+
+describe('Sidebar', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  test('should render titles', async () => {
+    renderWithStore(<ComponentSideBar />, store);
+    await waitFor(() => expect(screen.getByText('jquery')).toBeInTheDocument());
+
+    expect(screen.getByText(`jquery`)).toBeInTheDocument();
+    expect(screen.getByText(`sidebar.detail.latest-version`, { exact: false })).toBeInTheDocument();
+    expect(
+      screen.getByText(`sidebar.detail.published a year ago`, { exact: false })
+    ).toBeInTheDocument();
+    expect(screen.getByText(`sidebar.installation.title`, { exact: false })).toBeInTheDocument();
+  });
+
+  test('should render commonJS', async () => {
+    renderWithStore(<ComponentSideBar />, store);
+
+    await waitFor(() => expect(screen.getByText('jquery')).toBeInTheDocument());
+    expect(screen.getByAltText('commonjs')).toBeInTheDocument();
+  });
+
+  test('should render typescript', async () => {
+    mockPkgName.mockReturnValue('glob');
+    renderWithStore(<ComponentSideBar />, store);
+
+    await waitFor(() => expect(screen.getByText('glob')).toBeInTheDocument());
+    expect(screen.getByAltText('typescript')).toBeInTheDocument();
+  });
+
+  test('should render es modules', async () => {
+    mockPkgName.mockReturnValue('got');
+    renderWithStore(<ComponentSideBar />, store);
+
+    await waitFor(() => expect(screen.getByText('got')).toBeInTheDocument());
+    expect(screen.getByAltText('es6 modules')).toBeInTheDocument();
+  });
+});

package/src/sections/SideBar/Sidebar.tsx

@@ -0,0 +1,69 @@
+import styled from '@emotion/styled';
+import Paper from '@mui/material/Paper';
+import React from 'react';
+
+import { Theme } from '../../Theme';
+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 Repository from '../../components/Repository';
+import SideBarTitle from '../../components/SideBarTitle';
+import { useConfig } from '../../providers';
+import { useVersion } from '../../providers';
+import { PackageMetaInterface } from '../../types/packageMeta';
+
+const getModuleType = (manifest: PackageMetaInterface) => {
+  if (manifest.latest.main) {
+    return 'commonjs';
+  } else if (manifest.latest.type) {
+    return manifest.latest.type;
+  }
+  return;
+};
+
+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 (
+    <StyledPaper sx={{ position: 'sticky', top: 0 }}>
+      <SideBarTitle
+        description={packageMeta.latest?.description}
+        hasTypes={typeof packageMeta.latest?.types === 'string'}
+        isLatest={typeof packageVersion === 'undefined'}
+        moduleType={getModuleType(packageMeta)}
+        packageName={packageName}
+        time={time}
+        version={version}
+      />
+      <ActionBar
+        packageMeta={packageMeta}
+        showDownloadTarball={configOptions.showDownloadTarball}
+        showRaw={configOptions.showRaw}
+      />
+      <Install configOptions={configOptions} packageMeta={packageMeta} packageName={packageName} />
+      <FundButton packageMeta={packageMeta} />
+      <Repository packageMeta={packageMeta} />
+      <Engines packageMeta={packageMeta} />
+      <Dist packageMeta={packageMeta} />
+      <Author packageMeta={packageMeta} />
+      <Developers packageMeta={packageMeta} type={DeveloperType.MAINTAINERS} />
+      <Developers packageMeta={packageMeta} type={DeveloperType.CONTRIBUTORS} />
+    </StyledPaper>
+  );
+};
+
+export default DetailSidebar;
+
+const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
+  padding: theme?.spacing(3, 2),
+}));

package/src/sections/SideBar/index.ts

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

package/src/sections/index.ts

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

package/src/store/api.test.ts

@@ -0,0 +1,136 @@
+import api, { 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).toEqual([ok, responseText]);
+    });
+
+    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]);
+    });
+  });
+
+  describe('api client', () => {
+    let fetchSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      fetchSpy = jest.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('when there is token from storage', async () => {
+      jest.resetModules();
+      jest.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 = 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: () => {},
+        })
+      );
+
+      await expect(api.request('/resource')).rejects.toThrow(new Error('something went wrong'));
+    });
+
+    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

@@ -0,0 +1,73 @@
+import storage from './storage';
+
+/**
+ * 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()]);
+    }
+  }
+
+  return Promise.all([response.ok, response.text()]);
+}
+
+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) => {
+          if (response[0]) {
+            resolve(response[1]);
+          } else {
+            // eslint-disable-next-line no-console
+            console.error(response);
+            reject(new Error('something went wrong'));
+          }
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  }
+}
+
+export default new API();

package/src/store/index.ts

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

package/src/store/models/configuration.ts

@@ -0,0 +1,46 @@
+import { createModel } from '@rematch/core';
+import isEmpty from 'lodash/isEmpty';
+import isNil from 'lodash/isNil';
+
+import { Manifest, TemplateUIOptions } from '@verdaccio/types';
+
+import type { RootModel } from '.';
+import { colors } from '../../Theme';
+import API from '../api';
+
+const defaultValues: TemplateUIOptions = {
+  primaryColor: colors.PRIMARY_COLOR,
+  darkMode: false,
+  pkgManagers: ['yarn', 'pnpm', 'npm'],
+  scope: '',
+  base: '',
+  login: true,
+  flags: {},
+  url_prefix: '',
+  title: 'Verdaccio',
+};
+
+function getConfiguration() {
+  const uiConfiguration = window?.__VERDACCIO_BASENAME_UI_OPTIONS ?? defaultValues;
+  if (isNil(uiConfiguration.primaryColor) || isEmpty(uiConfiguration.primaryColor)) {
+    uiConfiguration.primaryColor = colors.PRIMARY_COLOR;
+  }
+
+  return uiConfiguration;
+}
+
+/**
+ *
+ * @category Model
+ */
+export const configuration = createModel<RootModel>()({
+  state: {
+    config: getConfiguration(),
+  },
+  effects: (dispatch) => ({
+    async getPackages() {
+      const payload: Manifest[] = await API.request(`/-/verdaccio/packages`, 'GET');
+      dispatch.packages.savePackages(payload);
+    },
+  }),
+});

package/src/store/models/download.ts

@@ -0,0 +1,33 @@
+import { createModel } from '@rematch/core';
+
+import type { RootModel } from '.';
+import { downloadFile, extractFileName } from '../../utils/url';
+import API from '../api';
+
+/**
+ *
+ * @category Model
+ */
+export const download = createModel<RootModel>()({
+  state: {},
+  reducers: {},
+  effects: () => ({
+    async getTarball({ link }) {
+      try {
+        const fileStream: Blob = await API.request(link, 'GET', {
+          headers: {
+            ['accept']:
+              'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3',
+          },
+          credentials: 'include',
+        });
+        const fileName = extractFileName(link);
+        downloadFile(fileStream, fileName);
+      } catch (error: any) {
+        // TODO: handle better error
+        // eslint-disable-next-line no-console
+        console.error('error on download', error);
+      }
+    },
+  }),
+});

package/src/store/models/index.ts

@@ -0,0 +1,18 @@
+import { Models } from '@rematch/core';
+
+import { configuration } from './configuration';
+import { download } from './download';
+import { login } from './login';
+import { manifest } from './manifest';
+import { packages } from './packages';
+import { search } from './search';
+
+export interface RootModel extends Models<RootModel> {
+  packages: typeof packages;
+  manifest: typeof manifest;
+  configuration: typeof configuration;
+  download: typeof download;
+  login: typeof login;
+  search: typeof search;
+}
+export const models: RootModel = { packages, configuration, search, download, login, manifest };

package/src/store/models/login.test.ts

@@ -0,0 +1,38 @@
+// eslint-disable-next-line jest/no-mocks-import
+import { generateTokenWithTimeRange } from '../../../jest/unit/components/__mocks__/token';
+
+describe('getDefaultUserState', (): void => {
+  const username = 'xyz';
+
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  test('should return state with empty user', (): void => {
+    const token = 'token-xx-xx-xx';
+
+    jest.doMock('../storage', () => ({
+      getItem: (key: string) => (key === 'token' ? token : username),
+    }));
+    const { getDefaultUserState } = require('./login');
+    const result = {
+      token: null,
+      username: null,
+    };
+    expect(getDefaultUserState()).toEqual(result);
+  });
+
+  test('should return state with user from storage', (): void => {
+    const token = generateTokenWithTimeRange(24);
+
+    jest.doMock('../storage', () => ({
+      getItem: (key: string) => (key === 'token' ? token : username),
+    }));
+    const { getDefaultUserState } = require('./login');
+    const result = {
+      token,
+      username,
+    };
+    expect(getDefaultUserState()).toEqual(result);
+  });
+});

package/src/store/models/login.ts

@@ -0,0 +1,106 @@
+import { createModel } from '@rematch/core';
+import i18next from 'i18next';
+
+import type { RootModel } from '.';
+import { isTokenExpire } from '../../utils';
+import API from '../api';
+import storage from '../storage';
+
+export const HEADERS = {
+  JSON: 'application/json',
+};
+
+export type LoginError = {
+  type: string;
+  description: string;
+};
+
+export type LoginResponse = {
+  username: string | null;
+  token: string | null;
+};
+
+export type LoginBody = {
+  error?: LoginError;
+} & LoginResponse;
+
+export function getDefaultUserState(): LoginBody {
+  const token = storage.getItem('token');
+  const username = storage.getItem('username');
+  const defaultUserState = isTokenExpire(token)
+    ? { token: null, username: null }
+    : { token, username };
+
+  return defaultUserState;
+}
+
+const defaultUserState: LoginBody = getDefaultUserState();
+
+/**
+ *
+ * @category Model
+ */
+export const login = createModel<RootModel>()({
+  state: {
+    username: defaultUserState.username,
+    token: defaultUserState.token,
+  },
+  reducers: {
+    logOutUser(state) {
+      storage.removeItem('username');
+      storage.removeItem('token');
+      return {
+        ...state,
+        username: null,
+        token: null,
+      };
+    },
+    addError(state, error: LoginError) {
+      return {
+        ...state,
+        error,
+      };
+    },
+    clearError(state) {
+      return {
+        ...state,
+        error: undefined,
+      };
+    },
+    logInUser(state, response: LoginResponse) {
+      // we might persist this in another way with
+      storage.setItem('username', response.username as string);
+      storage.setItem('token', response.token as string);
+      return {
+        ...state,
+        token: response.token as string,
+        username: response.username as string,
+      };
+    },
+  },
+  effects: (dispatch) => ({
+    async getUser({ username, password }, state) {
+      const basePath = state.configuration.config.base;
+      try {
+        const payload: LoginResponse = await API.request(
+          `${basePath}-/verdaccio/sec/login`,
+          'POST',
+          {
+            body: JSON.stringify({ username, password }),
+            headers: {
+              Accept: HEADERS.JSON,
+              'Content-Type': HEADERS.JSON,
+            },
+          }
+        );
+        dispatch.login.logInUser(payload);
+        dispatch.packages.getPackages(undefined);
+      } catch (error: any) {
+        dispatch.login.addError({
+          type: 'error',
+          description: i18next.t('form-validation.unable-to-sign-in'),
+        });
+      }
+    },
+  }),
+});