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

package/package.json

@@ -1,230 +1,155 @@
 {
-  "name": "@verdaccio/ui-theme",
-  "version": "3.1.0",
-  "description": "Verdaccio User Interface",
-  "author": {
-    "name": "Verdaccio Core Team",
-    "email": "verdaccio.npm@gmail.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/verdaccio/ui"
-  },
-  "homepage": "https://verdaccio.org",
-  "main": "index.js",
-  "devDependencies": {
-    "@babel/cli": "7.13.16",
-    "@babel/core": "7.13.16",
-    "@babel/node": "7.13.13",
-    "@babel/plugin-proposal-class-properties": "7.13.0",
-    "@babel/plugin-proposal-decorators": "7.13.15",
-    "@babel/plugin-proposal-export-namespace-from": "7.12.13",
-    "@babel/plugin-proposal-function-sent": "7.12.13",
-    "@babel/plugin-proposal-json-strings": "7.13.8",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.13.8",
-    "@babel/plugin-proposal-numeric-separator": "7.12.13",
-    "@babel/plugin-proposal-object-rest-spread": "7.13.8",
-    "@babel/plugin-proposal-optional-chaining": "7.13.12",
-    "@babel/plugin-proposal-throw-expressions": "7.12.13",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-syntax-import-meta": "7.10.4",
-    "@babel/plugin-transform-async-to-generator": "7.12.1",
-    "@babel/plugin-transform-classes": "7.13.0",
-    "@babel/plugin-transform-runtime": "7.13.15",
-    "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "7.13.15",
-    "@babel/preset-react": "7.13.13",
-    "@babel/preset-typescript": "7.13.0",
-    "@babel/register": "7.13.16",
-    "@babel/runtime": "7.13.17",
-    "@commitlint/cli": "9.1.2",
-    "@commitlint/config-conventional": "9.1.2",
-    "@emotion/core": "10.1.1",
-    "@emotion/jest": "^11.1.0",
-    "@emotion/styled": "10.0.27",
-    "@emotion/styled-base": "^10.0.31",
-    "@material-ui/core": "4.11.4",
-    "@material-ui/icons": "4.11.2",
-    "@material-ui/styles": "^4.11.4",
-    "@octokit/rest": "16.43.2",
-    "@percy/puppeteer": "^1.1.0",
-    "@testing-library/dom": "^7.29.0",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "10.4.9",
-    "@types/autosuggest-highlight": "3.1.0",
-    "@types/jest": "26.0.19",
-    "@types/js-base64": "3.0.0",
-    "@types/lodash": "4.14.165",
-    "@types/node": "14.14.13",
-    "@types/react": "16.14.2",
-    "@types/react-autosuggest": "10.0.1",
-    "@types/react-dom": "^16.9.10",
-    "@types/react-router-dom": "5.1.6",
-    "@types/react-virtualized": "9.21.10",
-    "@types/request": "2.48.5",
-    "@types/testing-library__jest-dom": "^5.9.5",
-    "@types/validator": "13.1.1",
-    "@types/webpack": "^4.41.25",
-    "@types/webpack-env": "1.16.0",
-    "@typescript-eslint/eslint-plugin": "2.34.0",
-    "@typescript-eslint/parser": "2.34.0",
-    "@verdaccio/commons-api": "9.7.1",
-    "@verdaccio/eslint-config": "9.3.2",
-    "@verdaccio/types": "9.7.2",
-    "all-contributors-cli": "6.19.0",
-    "autosuggest-highlight": "3.1.1",
-    "babel-eslint": "10.1.0",
-    "babel-jest": "26.6.3",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-emotion": "10.0.33",
-    "bundlesize": "0.18.0",
-    "codeceptjs": "2.6.11",
-    "codecov": "3.8.1",
-    "concurrently": "5.3.0",
-    "css-loader": "5.2.0",
-    "dayjs": "1.10.4",
-    "detect-secrets": "1.0.6",
-    "emotion": "10.0.27",
-    "emotion-theming": "10.0.27",
-    "eslint": "7.15.0",
-    "eslint-config-prettier": "7.2.0",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-codeceptjs": "1.3.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-react": "7.21.5",
-    "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-verdaccio": "9.6.1",
-    "file-loader": "5.1.0",
-    "friendly-errors-webpack-plugin": "1.7.0",
-    "get-stdin": "7.0.0",
-    "github-markdown-css": "3.0.1",
-    "harmony-reflect": "^1.6.1",
-    "history": "^4.10.1",
-    "html-webpack-plugin": "^5.0.0-alpha.15",
-    "husky": "4.3.5",
-    "i18next": "^19.8.4",
-    "in-publish": "2.0.1",
-    "jest": "26.6.3",
-    "jest-environment-jsdom": "26.6.2",
-    "jest-environment-jsdom-global": "^2.0.4",
-    "jest-environment-node": "26.6.2",
-    "jest-fetch-mock": "3.0.3",
-    "js-base64": "2.5.1",
-    "js-yaml": "3.14.0",
-    "lint-staged": "9.5.0",
-    "localstorage-memory": "1.0.3",
-    "lockfile-lint": "4.6.2",
-    "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^1.3.3",
-    "mutationobserver-shim": "0.3.7",
-    "node-mocks-http": "1.9.0",
-    "normalize.css": "8.0.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "ora": "4.0.4",
-    "prettier": "1.19.1",
-    "prop-types": "15.7.2",
-    "puppeteer": "5.3.1",
-    "react": "16.13.1",
-    "react-autosuggest": "10.0.2",
-    "react-dom": "16.14.0",
-    "react-hook-form": "3.29.4",
-    "react-hot-loader": "4.12.21",
-    "react-i18next": "^11.8.13",
-    "react-router": "^5.2.0",
-    "react-router-dom": "5.2.0",
-    "react-virtualized": "9.22.3",
-    "request": "2.88.2",
-    "resolve-url-loader": "3.1.1",
-    "rimraf": "3.0.2",
-    "source-map-loader": "1.1.0",
-    "standard-version": "9.2.0",
-    "style-loader": "1.2.1",
-    "stylelint": "13.7.2",
-    "stylelint-config-recommended": "3.0.0",
-    "stylelint-config-styled-components": "0.1.1",
-    "stylelint-processor-styled-components": "1.10.0",
-    "stylelint-webpack-plugin": "^2.1.1",
-    "supertest": "4.0.2",
-    "terser-webpack-plugin": "^5.0.3",
-    "typescript": "3.9.6",
-    "url-loader": "^4.1.1",
-    "validator": "13.1.1",
-    "verdaccio": "4.11.3",
-    "verdaccio-auth-memory": "9.7.2",
-    "verdaccio-memory": "9.7.2",
-    "wait-on": "5.2.0",
-    "webpack": "5.36.0",
-    "webpack-bundle-analyzer": "3.8.0",
-    "webpack-bundle-size-analyzer": "3.1.0",
-    "webpack-cli": "~4.5.0",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-manifest-plugin": "^3.0.0",
-    "webpack-merge": "^5.6.1",
-    "whatwg-fetch": "^3.6.2",
-    "xss": "1.0.8"
-  },
-  "keywords": [
-    "verdaccio",
-    "verdaccio-plugin",
-    "verdaccio-theme"
-  ],
-  "bundlesize": [
-    {
-      "path": "./static/vendors.*.js",
-      "maxSize": "900 kB"
-    },
-    {
-      "path": "./static/main.*.js",
-      "maxSize": "400 kB"
-    }
-  ],
-  "scripts": {
-    "type-check": "tsc --noEmit --pretty",
-    "type-check:watch": "yarn run type-check -- --watch",
-    "release": "standard-version -a",
-    "test:clean": "jest --clearCache",
-    "test:acceptance": "codeceptjs run --steps",
-    "test:acceptance:server": "concurrently --kill-others \"yarn run verdaccio:server\" \"yarn run test:acceptance\"",
-    "test:e2e": " jest --config ./test/jest.config.e2e.js --runInBand",
-    "test": "BABEL_ENV=test NODE_ENV=test TZ=UTC jest --config ./jest/jest.config.js --maxWorkers 2 --passWithNoTests",
-    "test:update-snapshot": "yarn run test -- -u",
-    "test:size": "bundlesize",
-    "lint": "yarn run lint:js && yarn run lint:css",
-    "lint:js": "yarn run type-check && eslint . --ext .js,.ts,.tsx",
-    "lint:css": "yarn stylelint \"src/**/styles.ts\"",
-    "coverage:publish": "codecov",
-    "dev:web": "babel-node tools/dev.server.js",
-    "verdaccio:server": "node tools/verdaccio.js",
-    "build": "webpack --config tools/webpack.prod.config.babel.js",
-    "build:stats": "webpack --config tools/webpack.prod.config.babel.js --json > stats.json",
-    "build:size": "webpack --config tools/webpack.prod.config.babel.js --json | webpack-bundle-size-analyzer",
-    "dev": "concurrently --kill-others \"yarn run dev:web\" \"yarn run verdaccio:server\""
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged --relative",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
-  "lint-staged": {
-    "*.{js,tsx,ts}": [
-      "eslint . --ext .js,.ts,.tsx"
-    ],
-    "*": [
-      "git add"
-    ]
-  },
-  "license": "MIT",
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "collective": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/verdaccio",
-    "logo": "https://opencollective.com/verdaccio/logo.txt"
-  }
+	"name": "@verdaccio/ui-theme",
+	"version": "6.0.0-6-next.11",
+	"description": "Verdaccio User Interface",
+	"author": {
+		"name": "Verdaccio Contributors",
+		"email": "verdaccio.npm@gmail.com"
+	},
+	"repository": {
+		"type": "https",
+		"url": "https://github.com/verdaccio/verdaccio"
+	},
+	"homepage": "https://verdaccio.org",
+	"main": "index.js",
+	"engines": {
+		"node": ">=10",
+		"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",
+		"@emotion/styled-base": "^10.0.31",
+		"@material-ui/core": "4.11.4",
+		"@material-ui/icons": "4.11.2",
+		"@material-ui/styles": "4.11.4",
+		"@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.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",
+		"babel-plugin-emotion": "10.2.2",
+		"bundlesize": "0.18.1",
+		"css-loader": "6.2.0",
+		"dayjs": "1.10.6",
+		"emotion": "10.0.27",
+		"emotion-theming": "10.0.27",
+		"friendly-errors-webpack-plugin": "1.7.0",
+		"github-markdown-css": "4.0.0",
+		"harmony-reflect": "1.6.2",
+		"history": "4.10.1",
+		"html-webpack-plugin": "5.3.2",
+		"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",
+		"lodash": "4.17.21",
+		"mini-css-extract-plugin": "2.2.2",
+		"mutationobserver-shim": "0.3.7",
+		"node-mocks-http": "1.10.1",
+		"normalize.css": "8.0.1",
+		"optimize-css-assets-webpack-plugin": "6.0.1",
+		"ora": "5.4.1",
+		"prop-types": "15.7.2",
+		"react": "17.0.2",
+		"react-autosuggest": "10.1.0",
+		"react-dom": "17.0.2",
+		"react-hook-form": "7.15.3",
+		"react-hot-loader": "4.13.0",
+		"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",
+		"stylelint-config-recommended": "5.0.0",
+		"stylelint-config-styled-components": "0.1.1",
+		"stylelint-processor-styled-components": "1.10.0",
+		"stylelint-webpack-plugin": "3.0.1",
+		"supertest": "6.1.6",
+		"terser-webpack-plugin": "5.2.3",
+		"url-loader": "4.1.1",
+		"validator": "13.6.0",
+		"webpack": "5.52.0",
+		"webpack-bundle-analyzer": "4.4.2",
+		"webpack-bundle-size-analyzer": "3.1.0",
+		"webpack-cli": "^4.7.2",
+		"webpack-dev-server": "3.11.2",
+		"webpack-manifest-plugin": "4.0.2",
+		"webpack-merge": "5.8.0",
+		"whatwg-fetch": "3.6.2",
+		"xss": "1.0.9"
+	},
+	"keywords": [
+		"private",
+		"package",
+		"repository",
+		"registry",
+		"enterprise",
+		"modules",
+		"proxy",
+		"server",
+		"verdaccio"
+	],
+	"bundlesize": [
+		{
+			"path": "./static/vendors.*.js",
+			"maxSize": "900 kB"
+		},
+		{
+			"path": "./static/main.*.js",
+			"maxSize": "400 kB"
+		},
+		{
+			"path": "./static/*.svg",
+			"maxSize": "1.3 kB"
+		},
+		{
+			"path": "./static/*.png",
+			"maxSize": "15 kB"
+		},
+		{
+			"path": "./static/fonts/*.{woff,woff2}",
+			"maxSize": "20 kB"
+		}
+	],
+	"license": "MIT",
+	"collective": {
+		"type": "opencollective",
+		"url": "https://opencollective.com/verdaccio",
+		"logo": "https://opencollective.com/verdaccio/logo.txt"
+	},
+	"scripts": {
+		"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 --runInBand",
+		"test:update-snapshot": "yarn run test -- -u",
+		"test:size": "bundlesize",
+		"lint": "pnpm lint:js && pnpm lint:css",
+		"lint:css": "yarn stylelint \"src/**/styles.ts\"",
+		"verdaccio:server": "node tools/verdaccio.js",
+		"build": "webpack --config tools/webpack.prod.config.babel.js",
+		"build:stats": "webpack --config tools/webpack.prod.config.babel.js --json > stats.json",
+		"build:size": "webpack --config tools/webpack.prod.config.babel.js --json | webpack-bundle-size-analyzer"
+	}
 }

package/src/App/App.test.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+
+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';
+
+jest.mock('verdaccio-ui/utils/storage', () => {
+  class LocalStorageMock {
+    private store: Record<string, string>;
+    public constructor() {
+      this.store = {};
+    }
+    public clear(): void {
+      this.store = {};
+    }
+    public getItem(key: string): unknown {
+      return this.store[key] || null;
+    }
+    public setItem(key: string, value: string): void {
+      this.store[key] = value.toString();
+    }
+    public removeItem(key: string): void {
+      delete this.store[key];
+    }
+  }
+  return new LocalStorageMock();
+});
+
+// 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 />', () => {
+  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();
+        }
+      }
+    });
+
+    test('isUserAlreadyLoggedIn: token already available in storage', async () => {
+      const { queryByTestId, queryAllByText } = 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 Greeting's label element component appearance and return the element
+        const greetingsLabelElement = await waitFor(() => queryByTestId('greetings-label'));
+        expect(greetingsLabelElement).toBeTruthy();
+
+        if (greetingsLabelElement) {
+          expect(queryAllByText('verdaccio')).toBeTruthy();
+        }
+      }
+    });
+  });
+
+  describe('list packages', () => {
+    test('should display the Header component', async () => {
+      renderWithStore(<App />, store);
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('loading')).toBeTruthy();
+      });
+
+      // wait for the Header component appearance and return the element
+      const headerElement = await waitFor(() => screen.queryByTestId('header'));
+      expect(headerElement).toBeTruthy();
+    });
+
+    test('should display package lists', async () => {
+      act(() => {
+        renderWithStore(<App />, store);
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('package-item-list')).toBeInTheDocument();
+      });
+
+      expect(store.getState().packages.response).toHaveLength(1);
+    }, 10000);
+  });
+});

package/src/App/App.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable react/jsx-max-depth */
+import styled from '@emotion/styled';
+import React, { useEffect, Suspense } from 'react';
+import { Router } from 'react-router-dom';
+
+import Box from 'verdaccio-ui/components/Box';
+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 AppRoute, { history } from './AppRoute';
+import Footer from './Footer';
+import Header from './Header';
+
+import '../i18n/config';
+
+const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
+  backgroundColor: theme?.palette.background.default,
+}));
+
+const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
+  [`@media screen and (min-width: ${theme?.breakPoints.container}px)`]: {
+    maxWidth: theme?.breakPoints.container,
+    width: '100%',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+}));
+
+const App: React.FC = () => {
+  useEffect(() => {
+    loadDayJSLocale();
+  }, []);
+
+  return (
+    <Suspense fallback={<Loading />}>
+      <StyleBaseline />
+      <StyledBox display="flex" flexDirection="column" height="100%">
+        <>
+          <Router history={history}>
+            <Header />
+            <StyledBoxContent flexGrow={1}>
+              <AppRoute />
+            </StyledBoxContent>
+          </Router>
+          <Footer />
+        </>
+      </StyledBox>
+    </Suspense>
+  );
+};
+
+export default App;

package/src/App/AppError.tsx

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+
+export interface ErrorProps {
+  children: any;
+}
+
+export interface ErrorAppState {
+  hasError: boolean;
+  error: Error | null;
+  info: object | null;
+}
+
+export default class ErrorBoundary extends Component<ErrorProps, ErrorAppState> {
+  constructor(props: ErrorProps) {
+    super(props);
+    this.state = { hasError: false, error: null, info: null };
+  }
+
+  public componentDidCatch(error: Error, info: object) {
+    this.setState({ hasError: true, error, info });
+  }
+
+  public render(): JSX.Element {
+    const { hasError, error, info } = this.state;
+    const { children } = this.props;
+
+    if (hasError) {
+      return (
+        <>
+          <h1>{'Something went wrong.'}</h1>
+          <p>{`error: ${error}`}</p>
+          <p>{`info: ${JSON.stringify(info)}`}</p>
+        </>
+      );
+    }
+    return children;
+  }
+}