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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @verdaccio/ui-theme
 
+## 6.0.0-6-next.11
+
+### Minor Changes
+
+- 5fed1955: feat: integrate rematch for ui state storage
+
 ## 6.0.0-6-next.10
 
 ### Major Changes

package/jest/api/packages.json

@@ -0,0 +1,42 @@
+[
+  {
+    "name": "test",
+    "version": "1.0.22",
+    "description": "test",
+    "main": "src/index.js",
+    "scripts": {
+      "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+      "type": "http",
+      "url": "git+https://github.com/test/test.git"
+    },
+    "keywords": [],
+    "author": {
+      "name": "",
+      "email": "",
+      "url": "",
+      "avatar": "data:image/svg+xml;utf8,%3Csvg%20height%3D%22100%22%20viewBox%3D%22-27%2024%20100%20100%22%20width%3D%22100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2274%22%20id%3D%22a%22%20r%3D%2250%22%2F%3E%3C%2Fdefs%3E%3Cuse%20fill%3D%22%23F5EEE5%22%20overflow%3D%22visible%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%3CclipPath%20id%3D%22b%22%3E%3Cuse%20overflow%3D%22visible%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23b)%22%3E%3Cdefs%3E%3Cpath%20d%3D%22M36%2095.9c0%204%204.7%205.2%207.1%205.8%207.6%202%2022.8%205.9%2022.8%205.9%203.2%201.1%205.7%203.5%207.1%206.6v9.8H-27v-9.8c1.3-3.1%203.9-5.5%207.1-6.6%200%200%2015.2-3.9%2022.8-5.9%202.4-.6%207.1-1.8%207.1-5.8V85h26v10.9z%22%20id%3D%22c%22%2F%3E%3C%2Fdefs%3E%3Cuse%20fill%3D%22%23E6C19C%22%20overflow%3D%22visible%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3CclipPath%20id%3D%22d%22%3E%3Cuse%20overflow%3D%22visible%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3C%2FclipPath%3E%3Cpath%20clip-path%3D%22url(%23d)%22%20d%3D%22M23.2%2035h.2c3.3%200%208.2.2%2011.4%202%203.3%201.9%207.3%205.6%208.5%2012.1%202.4%2013.7-2.1%2035.4-6.3%2042.4-4%206.7-9.8%209.2-13.5%209.4H23h-.1c-3.7-.2-9.5-2.7-13.5-9.4-4.2-7-8.7-28.7-6.3-42.4%201.2-6.5%205.2-10.2%208.5-12.1%203.2-1.8%208.1-2%2011.4-2h.2z%22%20fill%3D%22%23D4B08C%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M22.6%2040c19.1%200%2020.7%2013.8%2020.8%2015.1%201.1%2011.9-3%2028.1-6.8%2033.7-4%205.9-9.8%208.1-13.5%208.3h-.5c-3.8-.3-9.6-2.5-13.6-8.4-3.8-5.6-7.9-21.8-6.8-33.8C2.3%2053.7%203.5%2040%2022.6%2040z%22%20fill%3D%22%23F2CEA5%22%2F%3E%3C%2Fsvg%3E"
+    },
+    "license": "ISC",
+    "dependencies": {
+      "lodash": "^4.17.21"
+    },
+    "readmeFilename": "README.md",
+    "bugs": {
+      "url": "https://github.com/test/test/issues"
+    },
+    "homepage": "https://github.com/test/test#readme",
+    "_id": "test@1.0.22",
+    "_nodeVersion": "14.17.4",
+    "_npmVersion": "7.20.5",
+    "dist": {
+      "integrity": "sha512-2IDD0lLzGUL7YJ+17Oh9VtbOwdKLqBLS+ZFATDXi5R22TL2hZ9LBFE10bzsDovNc4xtgwZAk1/K+5LHTye4ztg==",
+      "shasum": "c9152f57636bce762ccb5a83113c42a5831579bc",
+      "tarball": "http://localhost:4873/test/-/test-1.0.22.tgz"
+    },
+    "contributors": [],
+    "time": "2021-08-14T20:15:19.336Z",
+    "users": {}
+  }
+]

package/jest/jest.config.js

@@ -10,9 +10,9 @@ module.exports = Object.assign({}, config, {
     '^.+\\.(js|ts|tsx)$': 'babel-jest',
   },
   moduleFileExtensions: ['js', 'ts', 'tsx'],
-  testURL: 'http://localhost',
+  testURL: 'http://localhost:9000/',
   rootDir: '..',
-  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', '<rootDir>/jest/setup-env.ts'],
   setupFiles: ['<rootDir>/jest/setup.ts'],
   transformIgnorePatterns: ['<rootDir>/node_modules/(?!react-syntax-highlighter)'],
   modulePathIgnorePatterns: [

package/jest/server-handlers.ts

@@ -0,0 +1,9 @@
+import { rest } from 'msw';
+
+const packagesPayload = require('./api/packages.json');
+
+export const handlers = [
+  rest.get('http://localhost:9000/-/verdaccio/packages', (req, res, ctx) => {
+    return res(ctx.json(packagesPayload));
+  }),
+];

package/jest/server.ts

@@ -0,0 +1,6 @@
+import { setupServer } from 'msw/node';
+
+import { handlers } from './server-handlers';
+
+const server = setupServer(...handlers);
+export { server };

package/jest/setup-env.ts

@@ -0,0 +1,15 @@
+import '@testing-library/jest-dom/extend-expect';
+import 'whatwg-fetch';
+import '@testing-library/jest-dom';
+
+import { server } from './server';
+
+beforeAll(() => {
+  server.listen({
+    onUnhandledRequest: 'warn',
+  });
+});
+afterEach(() => server.resetHandlers());
+afterAll(() => {
+  server.close();
+});

package/jest/setup.ts

@@ -2,29 +2,24 @@
  * Setup configuration for Jest
  * This file includes global settings for the JEST environment.
  */
-import { GlobalWithFetchMock } from 'jest-fetch-mock';
 import 'mutationobserver-shim';
 
 // @ts-ignore : Property '__VERDACCIO_BASENAME_UI_OPTIONS' does not exist on type 'Global'.
 global.__VERDACCIO_BASENAME_UI_OPTIONS = {
-  base: 'http://localhost',
+  base: 'http://localhost:9000/',
   protocol: 'http',
   host: 'localhost',
   primaryColor: '#4b5e40',
   url_prefix: '',
   darkMode: false,
   language: 'en-US',
-  uri: 'http://localhost:4873',
+  uri: 'http://localhost:9000/',
   pkgManagers: ['pnpm', 'yarn', 'npm'],
   title: 'Verdaccio Dev UI',
   scope: '',
   version: 'v1.0.0',
 };
 
-const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock;
-customGlobal.fetch = require('jest-fetch-mock');
-customGlobal.fetchMock = customGlobal.fetch;
-
 // mocking few DOM methods
 // @ts-ignore : Property 'document' does not exist on type 'Global'.
 if (global.document) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@verdaccio/ui-theme",
-	"version": "6.0.0-6-next.10",
+	"version": "6.0.0-6-next.11",
 	"description": "Verdaccio User Interface",
 	"author": {
 		"name": "Verdaccio Contributors",
@@ -17,6 +17,13 @@
 		"npm": ">=6"
 	},
 	"devDependencies": {
+		"@types/react": "17.0.19",
+		"@types/react-autosuggest": "10.1.5",
+		"@types/react-dom": "17.0.9",
+		"@types/react-helmet": "6.1.2",
+		"@types/redux": "3.6.0",
+		"@types/react-router-dom": "5.1.8",
+		"@types/react-virtualized": "9.21.13",
 		"@emotion/core": "10.1.1",
 		"@emotion/jest": "11.3.0",
 		"@emotion/styled": "10.0.27",
@@ -24,10 +31,12 @@
 		"@material-ui/core": "4.11.4",
 		"@material-ui/icons": "4.11.2",
 		"@material-ui/styles": "4.11.4",
-		"@testing-library/dom": "8.2.0",
+		"@rematch/core": "2.1.0",
+		"@rematch/loading": "2.1.0",
+		"@testing-library/dom": "8.5.0",
 		"@testing-library/jest-dom": "5.14.1",
-		"@testing-library/react": "12.0.0",
-		"@verdaccio/node-api": "6.0.0-6-next.20",
+		"@testing-library/react": "12.1.0",
+		"@verdaccio/node-api": "6.0.0-6-next.21",
 		"autosuggest-highlight": "3.1.1",
 		"babel-loader": "8.2.2",
 		"babel-plugin-dynamic-import-node": "2.3.3",
@@ -42,8 +51,9 @@
 		"harmony-reflect": "1.6.2",
 		"history": "4.10.1",
 		"html-webpack-plugin": "5.3.2",
-		"i18next": "20.6.0",
+		"i18next": "20.6.1",
 		"in-publish": "2.0.1",
+		"country-flag-icons": "1.4.10",
 		"js-base64": "3.6.1",
 		"js-yaml": "3.14.1",
 		"localstorage-memory": "1.0.3",
@@ -58,13 +68,16 @@
 		"react": "17.0.2",
 		"react-autosuggest": "10.1.0",
 		"react-dom": "17.0.2",
-		"react-hook-form": "7.14.2",
+		"react-hook-form": "7.15.3",
 		"react-hot-loader": "4.13.0",
-		"react-i18next": "11.11.4",
+		"react-i18next": "11.12.0",
 		"react-router": "5.2.1",
 		"react-router-dom": "5.3.0",
 		"react-virtualized": "9.22.3",
+		"react-redux": "7.2.1",
+		"redux": "4.1.1",
 		"rimraf": "3.0.2",
+		"msw": "0.35.0",
 		"standard-version": "9.3.1",
 		"style-loader": "3.2.1",
 		"stylelint": "13.13.1",
@@ -129,7 +142,7 @@
 		"type-check": "tsc --noEmit -p tsconfig.build.json",
 		"start": "babel-node tools/dev.server.js",
 		"test:clean": "jest --clearCache",
-		"test": "cross-env BABEL_ENV=test cross-env NODE_ENV=test cross-env TZ=UTC jest --config ./jest/jest.config.js --maxWorkers 2 --passWithNoTests",
+		"test": "cross-env BABEL_ENV=test cross-env NODE_ENV=test cross-env TZ=UTC jest --config ./jest/jest.config.js --runInBand",
 		"test:update-snapshot": "yarn run test -- -u",
 		"test:size": "bundlesize",
 		"lint": "pnpm lint:js && pnpm lint:css",

package/src/App/App.test.tsx

@@ -1,10 +1,16 @@
 import React from 'react';
 
-import storage from 'verdaccio-ui/utils/storage';
-import { render, waitFor, fireEvent } from 'verdaccio-ui/utils/test-react-testing-library';
+import {
+  renderWithStore,
+  act,
+  waitFor,
+  fireEvent,
+  screen,
+} from 'verdaccio-ui/utils/test-react-testing-library';
 
 // eslint-disable-next-line jest/no-mocks-import
 import { generateTokenWithTimeRange } from '../../jest/unit/components/__mocks__/token';
+import { store } from '../store';
 
 import App from './App';
 
@@ -30,68 +36,88 @@ jest.mock('verdaccio-ui/utils/storage', () => {
   return new LocalStorageMock();
 });
 
-jest.mock('verdaccio-ui/providers/API/api', () => ({
-  // eslint-disable-next-line jest/no-mocks-import
-  request: require('../../jest/unit/components/__mocks__/api').default.request,
-}));
+// force the windows to expand to display items
+// https://github.com/bvaughn/react-virtualized/issues/493#issuecomment-640084107
+jest.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600);
+jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(600);
 
 /* eslint-disable react/jsx-no-bind*/
 describe('<App />', () => {
-  // test('should display the Header component ', async () => {
-  //   const { queryByTestId } = render(<App />);
-  //
-  //   expect(queryByTestId('loading')).toBeTruthy();
-  //
-  //   // wait for the Header component appearance and return the element
-  //   const headerElement = await waitFor(() => queryByTestId('header'));
-  //   expect(headerElement).toBeTruthy();
-  // });
-
-  test('handleLogout - logouts the user and clear localstorage', async () => {
-    storage.setItem('username', 'verdaccio');
-    storage.setItem('token', generateTokenWithTimeRange(24));
-
-    const { queryByTestId } = render(<App />);
+  describe('login - log out', () => {
+    test('handleLogout - logouts the user and clear localstorage', async () => {
+      const { queryByTestId } = renderWithStore(<App />, store);
+      store.dispatch.login.logInUser({
+        username: 'verdaccio',
+        token: generateTokenWithTimeRange(24),
+      });
+
+      // wait for the Account's circle element component appearance and return the element
+      const accountCircleElement = await waitFor(() => queryByTestId('logInDialogIcon'));
+      expect(accountCircleElement).toBeTruthy();
+
+      if (accountCircleElement) {
+        fireEvent.click(accountCircleElement);
+
+        // wait for the Button's logout element component appearance and return the element
+        const buttonLogoutElement = await waitFor(() => queryByTestId('logOutDialogIcon'));
+        expect(buttonLogoutElement).toBeTruthy();
+
+        if (buttonLogoutElement) {
+          fireEvent.click(buttonLogoutElement);
+
+          expect(queryByTestId('greetings-label')).toBeFalsy();
+        }
+      }
+    });
 
-    // wait for the Account's circle element component appearance and return the element
-    const accountCircleElement = await waitFor(() => queryByTestId('header--menu-accountcircle'));
-    expect(accountCircleElement).toBeTruthy();
+    test('isUserAlreadyLoggedIn: token already available in storage', async () => {
+      const { queryByTestId, queryAllByText } = renderWithStore(<App />, store);
+      store.dispatch.login.logInUser({
+        username: 'verdaccio',
+        token: generateTokenWithTimeRange(24),
+      });
 
-    if (accountCircleElement) {
-      fireEvent.click(accountCircleElement);
+      // wait for the Account's circle element component appearance and return the element
+      const accountCircleElement = await waitFor(() => queryByTestId('logInDialogIcon'));
+      expect(accountCircleElement).toBeTruthy();
 
-      // wait for the Button's logout element component appearance and return the element
-      const buttonLogoutElement = await waitFor(() => queryByTestId('header--button-logout'));
-      expect(buttonLogoutElement).toBeTruthy();
+      if (accountCircleElement) {
+        fireEvent.click(accountCircleElement);
 
-      if (buttonLogoutElement) {
-        fireEvent.click(buttonLogoutElement);
+        // wait for the Greeting's label element component appearance and return the element
+        const greetingsLabelElement = await waitFor(() => queryByTestId('greetings-label'));
+        expect(greetingsLabelElement).toBeTruthy();
 
-        expect(queryByTestId('greetings-label')).toBeFalsy();
+        if (greetingsLabelElement) {
+          expect(queryAllByText('verdaccio')).toBeTruthy();
+        }
       }
-    }
+    });
   });
 
-  test('isUserAlreadyLoggedIn: token already available in storage', async () => {
-    storage.setItem('username', 'verdaccio');
-    storage.setItem('token', generateTokenWithTimeRange(24));
+  describe('list packages', () => {
+    test('should display the Header component', async () => {
+      renderWithStore(<App />, store);
 
-    const { queryByTestId, queryAllByText } = render(<App />);
+      await waitFor(() => {
+        expect(screen.queryByTestId('loading')).toBeTruthy();
+      });
 
-    // wait for the Account's circle element component appearance and return the element
-    const accountCircleElement = await waitFor(() => queryByTestId('header--menu-accountcircle'));
-    expect(accountCircleElement).toBeTruthy();
+      // wait for the Header component appearance and return the element
+      const headerElement = await waitFor(() => screen.queryByTestId('header'));
+      expect(headerElement).toBeTruthy();
+    });
 
-    if (accountCircleElement) {
-      fireEvent.click(accountCircleElement);
+    test('should display package lists', async () => {
+      act(() => {
+        renderWithStore(<App />, store);
+      });
 
-      // wait for the Greeting's label element component appearance and return the element
-      const greetingsLabelElement = await waitFor(() => queryByTestId('greetings-label'));
-      expect(greetingsLabelElement).toBeTruthy();
+      await waitFor(() => {
+        expect(screen.getByTestId('package-item-list')).toBeInTheDocument();
+      });
 
-      if (greetingsLabelElement) {
-        expect(queryAllByText('verdaccio')).toBeTruthy();
-      }
-    }
+      expect(store.getState().packages.response).toHaveLength(1);
+    }, 10000);
   });
 });

package/src/App/App.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/jsx-max-depth */
 import styled from '@emotion/styled';
-import isNil from 'lodash/isNil';
-import React, { useState, useEffect, Suspense } from 'react';
+import React, { useEffect, Suspense } from 'react';
 import { Router } from 'react-router-dom';
 
 import Box from 'verdaccio-ui/components/Box';
@@ -9,15 +8,12 @@ import Loading from 'verdaccio-ui/components/Loading';
 import loadDayJSLocale from 'verdaccio-ui/design-tokens/load-dayjs-locale';
 import StyleBaseline from 'verdaccio-ui/design-tokens/StyleBaseline';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
-import { isTokenExpire } from 'verdaccio-ui/utils/login';
-import storage from 'verdaccio-ui/utils/storage';
 
-import AppContextProvider from './AppContextProvider';
 import AppRoute, { history } from './AppRoute';
 import Footer from './Footer';
 import Header from './Header';
 
-import '../../i18n/config';
+import '../i18n/config';
 
 const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor: theme?.palette.background.default,
@@ -32,35 +28,8 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
   },
 }));
 
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable react-hooks/exhaustive-deps */
 const App: React.FC = () => {
-  const [user, setUser] = useState<undefined | { username: string | null }>();
-  /**
-   * Logout user
-   * Required by: <Header />
-   */
-  const logout = () => {
-    storage.removeItem('username');
-    storage.removeItem('token');
-    setUser(undefined);
-  };
-
-  const checkUserAlreadyLoggedIn = () => {
-    // checks for token validity
-    const token = storage.getItem('token');
-    const username = storage.getItem('username');
-
-    if (isTokenExpire(token) || isNil(username)) {
-      logout();
-      return;
-    }
-
-    setUser({ username });
-  };
-
   useEffect(() => {
-    checkUserAlreadyLoggedIn();
     loadDayJSLocale();
   }, []);
 
@@ -70,12 +39,10 @@ const App: React.FC = () => {
       <StyledBox display="flex" flexDirection="column" height="100%">
         <>
           <Router history={history}>
-            <AppContextProvider user={user}>
-              <Header />
-              <StyledBoxContent flexGrow={1}>
-                <AppRoute />
-              </StyledBoxContent>
-            </AppContextProvider>
+            <Header />
+            <StyledBoxContent flexGrow={1}>
+              <AppRoute />
+            </StyledBoxContent>
           </Router>
           <Footer />
         </>

package/src/App/AppRoute.tsx

@@ -1,9 +1,7 @@
 import { createBrowserHistory } from 'history';
-import React, { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
+import React from 'react';
 import { Route as ReactRouterDomRoute, Switch, Router } from 'react-router-dom';
 
-import AppContext from './AppContext';
 import loadable from './utils/loadable';
 
 const NotFound = loadable(
@@ -28,22 +26,11 @@ export const history = createBrowserHistory({
 });
 
 const AppRoute: React.FC = () => {
-  const appContext = useContext(AppContext);
-  const { t } = useTranslation();
-
-  if (!appContext) {
-    throw Error(t('app-context-not-correct-used'));
-  }
-
-  const { user } = appContext;
-
-  const isUserLoggedIn = user?.username;
-
   return (
     <Router history={history}>
       <Switch>
         <ReactRouterDomRoute exact={true} path={Route.ROOT}>
-          <HomePage isUserLoggedIn={!!isUserLoggedIn} />
+          <HomePage />
         </ReactRouterDomRoute>
         <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
           <VersionContextProvider>

package/src/App/Footer/Footer.tsx

@@ -1,18 +1,11 @@
+/* eslint-disable react/jsx-max-depth */
+/* eslint-disable react/jsx-pascal-case */
 import styled from '@emotion/styled';
+import FlagsIcon from 'country-flag-icons/react/3x2';
 import React from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
-import {
-  Austria,
-  Brazil,
-  Earth,
-  Nicaragua,
-  Spain,
-  Germany,
-  India,
-  China,
-  Taiwan,
-} from 'verdaccio-ui/components/Icons';
+import { Earth } from 'verdaccio-ui/components/Icons';
 import Logo from 'verdaccio-ui/components/Logo';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import { useConfig } from 'verdaccio-ui/providers/config';
@@ -32,14 +25,30 @@ const Footer = () => {
           <ToolTip>
             <StyledEarth />
             <Flags>
-              <Spain />
-              <Nicaragua />
-              <India />
-              <Brazil />
-              <China />
-              <Austria />
-              <Germany />
-              <Taiwan />
+              <Icon>
+                <FlagsIcon.ES />
+              </Icon>
+              <Icon>
+                <FlagsIcon.NI />
+              </Icon>
+              <Icon>
+                <FlagsIcon.IN />
+              </Icon>
+              <Icon>
+                <FlagsIcon.BR />
+              </Icon>
+              <Icon>
+                <FlagsIcon.CN />
+              </Icon>
+              <Icon>
+                <FlagsIcon.AU />
+              </Icon>
+              <Icon>
+                <FlagsIcon.DE />
+              </Icon>
+              <Icon>
+                <FlagsIcon.TW />
+              </Icon>
             </Flags>
           </ToolTip>
         </Left>
@@ -87,6 +96,10 @@ const Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   },
 }));
 
+const Icon = styled('div')({
+  width: '10px',
+});
+
 const ToolTip = styled('span')({
   position: 'relative',
   height: '18px',