@verdaccio/ui-theme 3.1.0 → 6.0.0-6-next.11

package/src/pages/home/PackageList/Package/Tag/styles.ts

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled('span')({
+  verticalAlign: 'middle',
+  lineHeight: '22px',
+  borderRadius: '2px',
+  color: '#485a3e',
+  backgroundColor: '#f3f4f2',
+  padding: '0.22rem 0.4rem',
+  margin: '8px 8px 0 0',
+});

package/src/pages/home/PackageList/Package/index.ts

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

package/src/pages/home/PackageList/Package/styles.ts

@@ -0,0 +1,112 @@
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+
+import { default as Photo } from 'verdaccio-ui/components/Avatar';
+import Grid from 'verdaccio-ui/components/Grid';
+import { default as MuiIconButton } from 'verdaccio-ui/components/IconButton';
+import Label from 'verdaccio-ui/components/Label';
+import List from 'verdaccio-ui/components/List';
+import ListItemText from 'verdaccio-ui/components/ListItemText';
+import { default as MuiText } from 'verdaccio-ui/components/Text';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  margin: '0 0 0 16px',
+  color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+  fontSize: 12,
+  [`@media (max-width: ${theme?.breakPoints.medium}px)`]: {
+    ':nth-of-type(3)': {
+      display: 'none',
+    },
+  },
+  [`@media (max-width: ${theme?.breakPoints.small}px)`]: {
+    ':nth-of-type(4)': {
+      display: 'none',
+    },
+  },
+}));
+
+export const Published = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+  margin: '0 5px 0 0',
+}));
+
+export const Text = styled(Label)<{ theme?: Theme }>(({ theme }) => ({
+  fontSize: '12px',
+  fontWeight: theme?.fontWeight.semiBold,
+  color: theme?.palette.type === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+}));
+
+export const Details = styled('span')({
+  marginLeft: '5px',
+  lineHeight: 1.5,
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const Author = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const Avatar = styled(Photo)({
+  width: '20px',
+  height: '20px',
+});
+
+export const WrapperLink = styled(Link)({
+  textDecoration: 'none',
+});
+
+export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  fontWeight: theme?.fontWeight.bold,
+  fontSize: 20,
+  display: 'block',
+  marginBottom: 12,
+  color: theme?.palette.type == 'dark' ? theme?.palette.dodgerBlue : theme?.palette.eclipse,
+  cursor: 'pointer',
+  [`@media (max-width: ${theme?.breakPoints.small}px)`]: {
+    fontSize: 14,
+    marginBottom: 8,
+  },
+}));
+
+export const GridRightAligned = styled(Grid)({
+  textAlign: 'right',
+});
+
+export const Wrapper = styled(List)<{ theme?: Theme }>(({ theme }) => ({
+  ':hover': {
+    backgroundColor:
+      theme?.palette?.type == 'dark' ? theme?.palette?.secondary.main : theme?.palette?.greyLight3,
+  },
+}));
+
+export const IconButton = styled(MuiIconButton)({
+  padding: 6,
+  svg: {
+    fontSize: 16,
+  },
+});
+
+export const TagContainer = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  marginTop: 8,
+  marginBottom: 12,
+  display: 'flex',
+  flexWrap: 'wrap',
+  [`@media (max-width: ${theme?.breakPoints.medium}px)`]: {
+    display: 'none',
+  },
+}));
+
+export const PackageListItemText = styled(ListItemText)({
+  paddingRight: 0,
+});
+
+export const Description = styled(MuiText)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.type === 'light' ? theme?.palette.greyDark2 : theme?.palette.white,
+  fontSize: '14px',
+  paddingRight: 0,
+}));

package/src/pages/home/PackageList/PackageList.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
+import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
+import { List, ListRowProps } from 'react-virtualized/dist/commonjs/List';
+import { WindowScroller } from 'react-virtualized/dist/commonjs/WindowScroller';
+
+import Divider from 'verdaccio-ui/components/Divider';
+import { formatLicense } from 'verdaccio-ui/utils/package';
+
+import Help from './Help';
+import Package, { PackageInterface } from './Package';
+
+interface Props {
+  packages: PackageInterface[];
+}
+
+const cache = new CellMeasurerCache({
+  fixedWidth: true,
+  defaultHeight: 100,
+});
+
+/* eslint-disable  verdaccio/jsx-no-style */
+const PackageList: React.FC<Props> = ({ packages }) => {
+  const renderRow = ({ index, key, parent, style }: ListRowProps) => {
+    const { name, version, description, time, keywords, dist, homepage, bugs, author, license } =
+      packages[index];
+    // TODO: move format license to API side.
+    const formattedLicense = formatLicense(license);
+    return (
+      <CellMeasurer cache={cache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
+        <div style={style}>
+          {index !== 0 && <Divider />}
+          <Package
+            author={author}
+            bugs={bugs}
+            description={description}
+            dist={dist}
+            homepage={homepage}
+            keywords={keywords}
+            license={formattedLicense}
+            name={name}
+            time={time}
+            version={version}
+          />
+        </div>
+      </CellMeasurer>
+    );
+  };
+
+  if (packages.length === 0) {
+    return <Help />;
+  }
+
+  return (
+    <WindowScroller>
+      {({ height, isScrolling, scrollTop, onChildScroll }) => (
+        <AutoSizer disableHeight={true}>
+          {({ width }) => {
+            return (
+              <List
+                autoHeight={true}
+                deferredMeasurementCache={cache}
+                height={height}
+                isScrolling={isScrolling}
+                onScroll={onChildScroll}
+                overscanRowCount={3}
+                rowCount={packages.length}
+                rowHeight={cache.rowHeight}
+                rowRenderer={renderRow}
+                scrollTop={scrollTop}
+                width={width}
+              />
+            );
+          }}
+        </AutoSizer>
+      )}
+    </WindowScroller>
+  );
+};
+
+export { PackageList };

package/src/pages/home/PackageList/Packagelist.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
+import { renderWithStore, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { store } from '../../../store';
+
+import { PackageList } from './PackageList';
+
+describe('<PackageList /> component', () => {
+  beforeEach(cleanup);
+
+  test('should load the component with no packages', () => {
+    const props = {
+      packages: [],
+    };
+    const wrapper = renderWithStore(<PackageList packages={props.packages} />, store);
+    expect(wrapper.getByText('No Package Published Yet.')).toBeInTheDocument();
+  });
+
+  test('should load the component with packages', () => {
+    // Mock <Autosizer /> width
+    jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(600);
+
+    const props = {
+      packages: [
+        {
+          name: 'verdaccio',
+          version: '1.0.0',
+          time: new Date(1532211072138).getTime(),
+          description: 'Private NPM repository',
+          author: { name: 'Sam', avatar: 'test avatar' },
+        },
+        {
+          name: 'abc',
+          version: '1.0.1',
+          time: new Date(1532211072138).getTime(),
+          description: 'abc description',
+          author: { name: 'Rose', avatar: 'test avatar' },
+        },
+        {
+          name: 'xyz',
+          version: '1.1.0',
+          description: 'xyz description',
+          author: { name: 'Martin', avatar: 'test avatar' },
+        },
+      ],
+      help: false,
+    };
+
+    const wrapper = renderWithStore(
+      <BrowserRouter>
+        <PackageList packages={props.packages} />
+      </BrowserRouter>,
+      store
+    );
+
+    expect(wrapper.queryAllByTestId('package-item-list')).toHaveLength(3);
+  });
+});

package/src/pages/home/PackageList/index.ts

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

package/src/pages/home/index.ts

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

package/src/providers/API/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/providers/API/api.ts

@@ -0,0 +1,73 @@
+import storage from './storage';
+import '../../../types';
+
+/**
+ * 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',
+        ...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/providers/API/storage.ts

@@ -0,0 +1,12 @@
+import memoryStorage from 'localstorage-memory';
+
+let storage: Storage;
+try {
+  localStorage.setItem('__TEST__', '');
+  localStorage.removeItem('__TEST__');
+  storage = localStorage;
+} catch (err: any) {
+  storage = memoryStorage;
+}
+
+export default storage;

package/src/providers/config/AppConfigurationProvider.tsx

@@ -0,0 +1,57 @@
+import { TemplateUIOptions } from '@verdaccio/types';
+import isEmpty from 'lodash/isEmpty';
+import isNil from 'lodash/isNil';
+import React, { createContext, FunctionComponent, useContext, useMemo, useState } from 'react';
+
+import { PRIMARY_COLOR } from 'verdaccio-ui/utils/colors';
+
+type ConfigProviderProps = {
+  configOptions: TemplateUIOptions;
+  setConfigOptions: Function;
+};
+
+const defaultValues: ConfigProviderProps = {
+  configOptions: {
+    primaryColor: PRIMARY_COLOR,
+    darkMode: false,
+    pkgManagers: ['yarn', 'pnpm', 'npm'],
+    scope: '',
+    base: '',
+    login: true,
+    url_prefix: '',
+    title: 'Verdaccio',
+  },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setConfigOptions: () => {},
+};
+
+function getConfiguration() {
+  const uiConfiguration = window?.__VERDACCIO_BASENAME_UI_OPTIONS ?? defaultValues.configOptions;
+  if (isNil(uiConfiguration.primaryColor) || isEmpty(uiConfiguration.primaryColor)) {
+    uiConfiguration.primaryColor = PRIMARY_COLOR;
+  }
+
+  return uiConfiguration;
+}
+
+const AppConfigurationContext = createContext<ConfigProviderProps>(defaultValues);
+
+const AppConfigurationProvider: FunctionComponent = ({ children }) => {
+  const [configOptions, setConfigOptions] = useState(getConfiguration());
+
+  const value = useMemo(
+    () => ({
+      configOptions,
+      setConfigOptions,
+    }),
+    [configOptions]
+  );
+
+  return (
+    <AppConfigurationContext.Provider value={value}>{children}</AppConfigurationContext.Provider>
+  );
+};
+
+export default AppConfigurationProvider;
+
+export const useConfig = () => useContext(AppConfigurationContext);

package/src/providers/config/index.ts

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

package/src/store/index.ts

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

package/src/store/models/configuration.ts

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

package/src/store/models/download.ts

@@ -0,0 +1,31 @@
+import { createModel } from '@rematch/core';
+
+import API from '../../providers/API/api';
+import { downloadFile, extractFileName } from '../../utils/url';
+
+import type { RootModel } from '.';
+
+export const download = createModel<RootModel>()({
+  state: {},
+  reducers: {},
+  effects: () => ({
+    async getTarball({ link }) {
+      // const basePath = state.configuration.config.base;
+      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,17 @@
+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 };