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

package/src/store/models/manifest.ts

@@ -0,0 +1,98 @@
+import { createModel } from '@rematch/core';
+
+import { Manifest } from '@verdaccio/types';
+
+import type { RootModel } from '.';
+import { PackageMetaInterface } from '../../types/packageMeta';
+import API from '../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;
+}
+
+/**
+ *
+ * @category Model
+ */
+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 {
+        const manifest: Manifest = await API.request(
+          `${basePath}-/verdaccio/data/sidebar/${packageName}${
+            packageVersion ? `?v=${packageVersion}` : ''
+          }`
+        );
+
+        // FIXME: update types accordingly
+        // @ts-ignore
+        if (!isPackageVersionValid(manifest, packageVersion)) {
+          throw new Error('not found');
+        }
+
+        const readme: string = await API.request<string>(
+          `${basePath}-/verdaccio/data/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,43 @@
+import { createModel } from '@rematch/core';
+
+import { Manifest } from '@verdaccio/types';
+
+import type { RootModel } from '.';
+import API from '../api';
+
+/**
+ *
+ * @category Model
+ */
+export const packages = createModel<RootModel>()({
+  state: {
+    response: [] as Manifest[],
+  },
+  reducers: {
+    savePackages(state, response: Manifest[]) {
+      return {
+        ...state,
+        response,
+      };
+    },
+  },
+  effects: (dispatch) => ({
+    async getPackages(_payload, state) {
+      const basePath = state.configuration.config.base;
+      try {
+        const payload: Manifest[] = await API.request(
+          `${basePath}-/verdaccio/data/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,86 @@
+import { createModel } from '@rematch/core';
+import orderBy from 'lodash/orderBy';
+
+import { SearchResultWeb } from '@verdaccio/types';
+
+import type { RootModel } from '.';
+import API from '../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/data/search/${encodeURIComponent(value)}`,
+          'GET',
+          {
+            signal,
+            headers: {},
+          }
+        );
+        const orderedSuggestions = orderBy(suggestions, ['verdaccioPrivate'], ['desc']);
+        dispatch.search.saveSearch({
+          suggestions: orderedSuggestions,
+        });
+      } catch (error: any) {
+        if (error.name === CONSTANTS.ABORT_ERROR) {
+          dispatch.search.saveSearch({ suggestions: [] });
+        } else {
+          dispatch.search.setError();
+        }
+      }
+    },
+  }),
+});

package/src/store/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/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/test/i18n-config.ts

@@ -0,0 +1,19 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+i18n.use(initReactI18next).init({
+  lng: 'en-US',
+  whitelist: ['en-US'],
+  load: 'currentOnly',
+  resources: {
+    'en-US': {
+      translation: {},
+    },
+  },
+  debug: false,
+  interpolation: {
+    escapeValue: false, // react already safes from xss
+  },
+});
+
+export default i18n;

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

@@ -0,0 +1,47 @@
+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 '../Theme';
+import AppConfigurationProvider from '../providers/AppConfigurationProvider';
+import PersistenceSettingProvider from '../providers/PersistenceSettingProvider';
+import { Store } from '../store/store';
+import i18nConfig from './i18n-config';
+
+const renderWithStore = (ui: React.ReactElement<any>, store: Store) =>
+  render(ui, {
+    wrapper: ({ children }) => (
+      <Provider store={store}>
+        <PersistenceSettingProvider>
+          <AppConfigurationProvider>
+            <StyledEngineProvider injectFirst={true}>
+              <ThemeProvider>
+                <I18nextProvider i18n={i18nConfig}>{children}</I18nextProvider>
+              </ThemeProvider>
+            </StyledEngineProvider>
+          </AppConfigurationProvider>
+        </PersistenceSettingProvider>
+      </Provider>
+    ),
+  });
+
+const customRender = (node: React.ReactElement, ...options: any) => {
+  return render(
+    <AppConfigurationProvider>
+      <PersistenceSettingProvider>
+        <StyledEngineProvider injectFirst={true}>
+          <ThemeProvider>
+            <I18nextProvider i18n={i18nConfig}>{node}</I18nextProvider>
+          </ThemeProvider>
+        </StyledEngineProvider>
+      </PersistenceSettingProvider>
+    </AppConfigurationProvider>,
+    ...options
+  );
+};
+
+export * from '@testing-library/react';
+export { customRender as render };
+export { customRender, renderWithStore };

package/src/types/index.d.ts

@@ -0,0 +1,2 @@
+declare module 'unist';
+declare module 'hast';

package/src/types/index.ts

@@ -0,0 +1,11 @@
+import { TemplateUIOptions } from '@verdaccio/types';
+
+declare global {
+  interface Window {
+    /**
+     * __VERDACCIO_BASENAME_UI_OPTIONS is a global object available in the
+     * browser.
+     */
+    __VERDACCIO_BASENAME_UI_OPTIONS: TemplateUIOptions;
+  }
+}

package/src/types/packageMeta.ts

@@ -0,0 +1,93 @@
+export type ModuleType = 'commonjs' | 'module';
+
+export type Latest = {
+  author?: Author;
+  deprecated?: string;
+  name: string;
+  dist?: {
+    fileCount: number;
+    unpackedSize: number;
+    tarball?: string;
+  };
+  engines?: {
+    node?: string;
+    npm?: string;
+    pnpm?: string;
+    yarn?: string;
+  };
+  license?: undefined | LicenseInterface | string;
+  version: string;
+  homepage?: string;
+  bugs?: {
+    url: string;
+  };
+  repository?: {
+    type?: string;
+    url?: string;
+  };
+  main?: string;
+  type?: ModuleType;
+  types?: string;
+  description?: string;
+  funding?: Funding;
+  maintainers?: Developer[];
+  contributors?: Developer[];
+};
+
+export interface PackageMetaInterface {
+  versions?: Versions;
+  'dist-tags'?: DistTags;
+  time?: Time;
+  latest: Latest;
+  _uplinks?: Record<string, { fetched: number }>;
+}
+
+export interface Developer {
+  name: string;
+  email: string;
+  avatar: string;
+}
+
+interface Funding {
+  type?: string;
+  url?: string;
+}
+
+export interface LicenseInterface {
+  type?: string;
+  url?: string;
+}
+
+export interface DistTags {
+  [key: string]: string;
+}
+
+export interface Time {
+  [key: string]: string;
+}
+
+export interface Versions {
+  [key: string]: Version;
+}
+
+export interface Version {
+  name: string;
+  version: string;
+  author?: string | Author;
+  description?: string;
+  license?: string;
+  main?: string;
+  keywords?: string[];
+  deprecated?: string;
+}
+
+export interface Author {
+  name?: string;
+  email?: string;
+  url?: string;
+  avatar?: string;
+}
+
+export interface PackageDependencies {
+  [key: string]: string;
+}

package/src/utils/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "rules": {
+        "no-invalid-this": 0
+    }
+}