@verdaccio/ui-theme 6.0.0-6-next.9 → 6.0.0-6-next.13

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

@@ -3,7 +3,6 @@ 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';
 
@@ -26,7 +25,6 @@ const PackageList: React.FC<Props> = ({ packages }) => {
       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}>
@@ -56,21 +54,23 @@ const PackageList: React.FC<Props> = ({ packages }) => {
     <WindowScroller>
       {({ height, isScrolling, scrollTop, onChildScroll }) => (
         <AutoSizer disableHeight={true}>
-          {({ width }) => (
-            <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}
-            />
-          )}
+          {({ 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>

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
+import { cleanup, renderWithStore } from 'verdaccio-ui/utils/test-react-testing-library';
 
-import { render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
-
+import { store } from '../../../store';
 import { PackageList } from './PackageList';
 
 describe('<PackageList /> component', () => {
@@ -12,7 +12,7 @@ describe('<PackageList /> component', () => {
     const props = {
       packages: [],
     };
-    const wrapper = render(<PackageList packages={props.packages} />);
+    const wrapper = renderWithStore(<PackageList packages={props.packages} />, store);
     expect(wrapper.getByText('No Package Published Yet.')).toBeInTheDocument();
   });
 
@@ -46,10 +46,11 @@ describe('<PackageList /> component', () => {
       help: false,
     };
 
-    const wrapper = render(
+    const wrapper = renderWithStore(
       <BrowserRouter>
         <PackageList packages={props.packages} />
-      </BrowserRouter>
+      </BrowserRouter>,
+      store
     );
 
     expect(wrapper.queryAllByTestId('package-item-list')).toHaveLength(3);

package/src/providers/API/api.test.ts

@@ -85,6 +85,7 @@ describe('api', () => {
         credentials: 'same-origin',
         headers: new Headers({
           Authorization: 'Bearer token-xx-xx-xx',
+          'x-client': 'verdaccio-ui',
         }),
         method: 'GET',
       });

package/src/providers/API/api.ts

@@ -1,5 +1,5 @@
-import storage from './storage';
 import '../../../types';
+import storage from './storage';
 
 /**
  * Handles response according to content type
@@ -29,6 +29,8 @@ export function handleResponseType(response: Response): Promise<[boolean, any]>
   return Promise.all([response.ok, response.text()]);
 }
 
+const AuthHeader = 'Authorization';
+
 class API {
   public request<T>(
     url: string,
@@ -38,11 +40,13 @@ class API {
     const token = storage.getItem('token');
     const headers = new Headers(options.headers);
 
-    if (token && headers.has('Authorization') === false) {
-      headers.set('Authorization', `Bearer ${token}`);
+    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,

package/src/providers/config/AppConfigurationProvider.tsx

@@ -1,10 +1,10 @@
-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 React, { FunctionComponent, createContext, useContext, useMemo, useState } from 'react';
 import { PRIMARY_COLOR } from 'verdaccio-ui/utils/colors';
 
+import { TemplateUIOptions } from '@verdaccio/types';
+
 type ConfigProviderProps = {
   configOptions: TemplateUIOptions;
   setConfigOptions: Function;

package/src/store/index.ts

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

package/src/store/models/configuration.ts

@@ -0,0 +1,41 @@
+import { createModel } from '@rematch/core';
+import isEmpty from 'lodash/isEmpty';
+import isNil from 'lodash/isNil';
+import { PRIMARY_COLOR } from 'verdaccio-ui/utils/colors';
+
+import { Package, TemplateUIOptions } from '@verdaccio/types';
+
+import type { RootModel } from '.';
+import API from '../../providers/API/api';
+
+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,30 @@
+import { createModel } from '@rematch/core';
+
+import type { RootModel } from '.';
+import API from '../../providers/API/api';
+import { downloadFile, extractFileName } from '../../utils/url';
+
+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,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.ts

@@ -0,0 +1,92 @@
+import { createModel } from '@rematch/core';
+import i18next from 'i18next';
+
+import type { RootModel } from '.';
+import API from '../../providers/API/api';
+import storage from '../../utils/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;
+
+const token = storage.getItem('token');
+const username = storage.getItem('username');
+const defaultUserState: LoginBody = {
+  token,
+  username,
+};
+
+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/login`, 'POST', {
+          body: JSON.stringify({ username, password }),
+          headers: {
+            Accept: HEADERS.JSON,
+            'Content-Type': HEADERS.JSON,
+          },
+        });
+        dispatch.login.logInUser(payload);
+        dispatch.packages.getPackages();
+      } catch (error: any) {
+        dispatch.login.addError({
+          type: 'error',
+          description: i18next.t('form-validation.unable-to-sign-in'),
+        });
+      }
+    },
+  }),
+});

package/src/store/models/manifest.ts

@@ -0,0 +1,91 @@
+import { createModel } from '@rematch/core';
+import { PackageMetaInterface } from 'types/packageMeta';
+
+import { Package } from '@verdaccio/types';
+
+import type { RootModel } from '.';
+import API from '../../providers/API/api';
+
+function isPackageVersionValid(
+  packageMeta: Partial<PackageMetaInterface>,
+  packageVersion?: string
+): boolean {
+  if (!packageVersion || typeof packageVersion === 'undefined') {
+    // if is undefined, that means versions does not exist, we continue
+    return true;
+  }
+
+  if (packageMeta.versions) {
+    return Object.keys(packageMeta.versions).includes(packageVersion);
+  }
+
+  return false;
+}
+
+export const manifest = createModel<RootModel>()({
+  state: {},
+  reducers: {
+    notFound(state) {
+      return {
+        ...state,
+        hasNotBeenFound: true,
+        manifest: undefined,
+        packageName: undefined,
+        packageVersion: undefined,
+        readme: undefined,
+      };
+    },
+    clearError(state) {
+      return {
+        ...state,
+        isError: null,
+      };
+    },
+    isError(state) {
+      return {
+        ...state,
+        isError: true,
+        hasNotBeenFound: false,
+        manifest: undefined,
+        packageName: undefined,
+        packageVersion: undefined,
+        readme: undefined,
+      };
+    },
+    saveManifest(state, { packageName, packageVersion, manifest, readme }) {
+      return {
+        ...state,
+        manifest,
+        packageName,
+        packageVersion,
+        readme,
+        hasNotBeenFound: false,
+      };
+    },
+  },
+  effects: (dispatch) => ({
+    async getManifest({ packageName, packageVersion }, state) {
+      const basePath = state.configuration.config.base;
+      try {
+        if (!isPackageVersionValid(packageName, packageVersion)) {
+          throw new Error('not found');
+        }
+
+        const manifest: Package = await API.request(
+          `${basePath}-/verdaccio/sidebar/${packageName}${
+            packageVersion ? `?v=${packageVersion}` : ''
+          }`
+        );
+        const readme: string = await API.request<string>(
+          `${basePath}-/verdaccio/package/readme/${packageName}${
+            packageVersion ? `?v=${packageVersion}` : ''
+          }`,
+          'GET'
+        );
+        dispatch.manifest.saveManifest({ packageName, packageVersion, manifest, readme });
+      } catch (error: any) {
+        dispatch.manifest.notFound();
+      }
+    },
+  }),
+});

package/src/store/models/packages.ts

@@ -0,0 +1,36 @@
+import { createModel } from '@rematch/core';
+
+import { Package } from '@verdaccio/types';
+
+import type { RootModel } from '.';
+import API from '../../providers/API/api';
+
+export const packages = createModel<RootModel>()({
+  state: {
+    response: [] as Package[],
+  },
+  reducers: {
+    savePackages(state, response: Package[]) {
+      return {
+        ...state,
+        response,
+      };
+    },
+  },
+  effects: (dispatch) => ({
+    async getPackages(_payload, state) {
+      const basePath = state.configuration.config.base;
+      try {
+        const payload: Package[] = await API.request(`${basePath}-/verdaccio/packages`, 'GET');
+        dispatch.packages.savePackages(payload);
+      } catch (error: any) {
+        // eslint-disable-next-line no-console
+        console.error({
+          title: 'Warning',
+          message: `Unable to load package list: ${error.message}`,
+        });
+        // TODO: handle error, display something retry or something
+      }
+    },
+  }),
+});

package/src/store/models/search.ts

@@ -0,0 +1,81 @@
+import { createModel } from '@rematch/core';
+
+import { SearchResultWeb } from '@verdaccio/types';
+
+import type { RootModel } from '.';
+import API from '../../providers/API/api';
+
+const CONSTANTS = {
+  API_DELAY: 300,
+  ABORT_ERROR: 'AbortError',
+};
+
+type SearchState = {
+  suggestions: SearchResultWeb[];
+  controller: AbortController[];
+};
+
+export const search = createModel<RootModel>()({
+  state: {
+    suggestions: [],
+    controller: [],
+  } as SearchState,
+  reducers: {
+    clearRequestQueue(state) {
+      const controllers = state.controller;
+      controllers.forEach((request) => request.abort());
+      return {
+        ...state,
+        controller: [],
+      };
+    },
+    addControllerToQueue(state, { controller }: { controller: AbortController }) {
+      const currentControllers = state.controller;
+      return {
+        ...state,
+        controller: [...currentControllers, controller],
+      };
+    },
+    setError(state) {
+      return {
+        ...state,
+        isError: true,
+      };
+    },
+    saveSearch(state, { suggestions }: { suggestions: SearchResultWeb[] }) {
+      return {
+        ...state,
+        suggestions,
+        isError: null,
+      };
+    },
+  },
+  effects: (dispatch) => ({
+    async getSuggestions({ value }, state) {
+      const basePath = state.configuration.config.base;
+      try {
+        const controller = new window.AbortController();
+        dispatch.search.addControllerToQueue({ controller });
+        const signal = controller.signal;
+        // https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#Browser_compatibility
+        // FUTURE: signal is not well supported for IE and Samsung Browser
+        const suggestions: SearchResultWeb[] = await API.request(
+          `${basePath}-/verdaccio/search/${encodeURIComponent(value)}`,
+          'GET',
+          {
+            signal,
+            headers: {},
+          }
+        );
+
+        dispatch.search.saveSearch({ suggestions });
+      } catch (error: any) {
+        if (error.name === CONSTANTS.ABORT_ERROR) {
+          dispatch.search.saveSearch({ suggestions: [] });
+        } else {
+          dispatch.search.setError();
+        }
+      }
+    },
+  }),
+});

package/src/store/store.ts

@@ -0,0 +1,15 @@
+import { RematchDispatch, RematchRootState, init } from '@rematch/core';
+import loadingPlugin, { ExtraModelsFromLoading } from '@rematch/loading';
+
+import { RootModel, models } from './models';
+
+type FullModel = ExtraModelsFromLoading<RootModel>;
+
+export const store = init<RootModel, FullModel>({
+  models,
+  plugins: [loadingPlugin()],
+});
+
+export type Store = typeof store;
+export type Dispatch = RematchDispatch<RootModel>;
+export type RootState = RematchRootState<RootModel, FullModel>;

package/src/utils/login.test.ts

@@ -1,11 +1,10 @@
 // eslint-disable-next-line jest/no-mocks-import
 import {
-  generateTokenWithTimeRange,
+  generateInvalidToken,
   generateTokenWithExpirationAsString,
   generateTokenWithOutExpiration,
-  generateInvalidToken,
+  generateTokenWithTimeRange,
 } from '../../jest/unit/components/__mocks__/token';
-
 import { isTokenExpire } from './login';
 
 /* eslint-disable no-console */
@@ -17,7 +16,7 @@ jest.mock('verdaccio-ui/providers/API/api', () => ({
 }));
 
 jest.mock('i18next', () => {
-  const translationEN = require('../../i18n/translations/en-US.json');
+  const translationEN = require('../../i18n/translations/ui.json');
   return {
     t: (key: string) => {
       const splittedKey = key.split('.');

package/src/utils/package.test.ts

@@ -1,10 +1,9 @@
 import { packageMeta } from '../../jest/unit/components/store/packageMeta';
-
 import {
-  formatLicense,
-  formatRepository,
   formatDate,
   formatDateDistance,
+  formatLicense,
+  formatRepository,
   getLastUpdatedPackageTime,
   getRecentReleases,
 } from './package';

package/src/utils/package.ts

@@ -1,10 +1,11 @@
-import { UpLinks } from '@verdaccio/types';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import i18next from 'i18next';
 import isString from 'lodash/isString';
 
+import { UpLinks } from '@verdaccio/types';
+
 import { Time } from '../../types/packageMeta';
 
 export const TIMEFORMAT = 'L LTS';

package/src/utils/sec-utils.ts

@@ -1,4 +1,4 @@
-import { filterXSS, escapeAttrValue } from 'xss';
+import { escapeAttrValue, filterXSS } from 'xss';
 
 const xssOpts = {
   onIgnoreTagAttr: function (tag: string, name: string, value: string) {

package/src/utils/test-react-testing-library.tsx

@@ -1,25 +1,42 @@
+import { StyledEngineProvider } from '@mui/material/styles';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { I18nextProvider } from 'react-i18next';
-
+import { Provider } from 'react-redux';
 import ThemeProvider from 'verdaccio-ui/design-tokens/ThemeProvider';
-import APIProvider from 'verdaccio-ui/providers/API/APIProvider';
 import AppConfigurationProvider from 'verdaccio-ui/providers/config';
 
-import i18nConfig from '../../i18n/config';
+import i18nConfig from '../i18n/config';
+
+const renderWithStore = (ui, store) =>
+  render(ui, {
+    wrapper: ({ children }) => (
+      <Provider store={store}>
+        <AppConfigurationProvider>
+          <StyledEngineProvider injectFirst={true}>
+            <ThemeProvider>
+              <I18nextProvider i18n={i18nConfig}>{children}</I18nextProvider>
+            </ThemeProvider>
+          </StyledEngineProvider>
+        </AppConfigurationProvider>
+      </Provider>
+    ),
+  });
 
 const customRender = (node: React.ReactElement, ...options: any) => {
   return render(
     <AppConfigurationProvider>
-      <APIProvider>
+      <StyledEngineProvider injectFirst={true}>
         <ThemeProvider>
           <I18nextProvider i18n={i18nConfig}>{node}</I18nextProvider>
         </ThemeProvider>
-      </APIProvider>
+      </StyledEngineProvider>
     </AppConfigurationProvider>,
     ...options
   );
 };
 
 export * from '@testing-library/react';
+// FIXME: rename all references with customRemder
 export { customRender as render };
+export { customRender, renderWithStore };

package/src/utils/url.test.ts

@@ -1,4 +1,4 @@
-import { isURL, isEmail, extractFileName } from './url';
+import { extractFileName, isEmail, isURL } from './url';
 
 describe('utils', () => {
   describe('url', () => {

package/src/utils/url.ts

@@ -1,5 +1,6 @@
 import isEmailValidator from 'validator/lib/isEmail';
 import isURLValidator from 'validator/lib/isURL';
+
 import '../../types';
 
 export function isURL(url: string): boolean {