@verdaccio/ui-components 2.0.0-6-next.10 → 3.0.0-next-7.3

package/src/components/Readme/utils.ts

@@ -1,19 +1,23 @@
 import * as DOMPurify from 'dompurify';
-import * as marked from 'marked';
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
+
+const marked = new Marked(
+  markedHighlight({
+    async: false,
+    highlight(code, lang) {
+      const hljs = require('highlight.js');
+      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+      return hljs.highlight(code, { language }).value;
+    },
+  })
+);
 
 marked.setOptions({
   renderer: new marked.Renderer(),
-  highlight: function (code, lang) {
-    const hljs = require('highlight.js');
-    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
-    return hljs.highlight(code, { language }).value;
-  },
-  langPrefix: 'hljs language-', // highlight.js css expects a top-level 'hljs' class.
   pedantic: false,
   gfm: true,
   breaks: false,
-  mangle: false,
-  xhtml: false,
 });
 
 export function parseReadme(readme: string): string | void {

package/src/components/Search/Search.test.tsx

@@ -40,8 +40,8 @@ describe('<Search /> component', () => {
   });
 
   test('should load the component in default state', () => {
-    const { container } = renderWithStore(<ComponentToBeRendered />, store);
-    expect(container.firstChild).toMatchSnapshot();
+    renderWithStore(<ComponentToBeRendered />, store);
+    expect(screen.getByPlaceholderText('search.packages')).toBeInTheDocument();
   });
 
   test('handleSearch: when user type package name in search component, show suggestions', async () => {

package/src/components/SettingsMenu/SettingsMenu.tsx

@@ -21,14 +21,24 @@ const InstallListItem: React.FC<Props> = ({ packageName }) => {
   const handleOpenMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
-  const handleClick = () => {
+
+  const handleGlobalSelect = () => {
     const statusGlobal = !localSettings[packageName]?.global;
-    updateSettings({ [packageName]: { global: statusGlobal } });
+    updateSettings({ ...localSettings, [packageName]: { global: statusGlobal } });
+    setAnchorEl(null);
+  };
+
+  const handleGlobalYarnModern = () => {
+    const statusYarnModern = !localSettings?.yarnModern;
+    updateSettings({ ...localSettings, yarnModern: statusYarnModern });
     setAnchorEl(null);
   };
+
   const handleClose = () => {
     setAnchorEl(null);
   };
+
+  const statusGlobal = localSettings[packageName]?.global;
   return (
     <>
       <IconButton
@@ -50,15 +60,24 @@ const InstallListItem: React.FC<Props> = ({ packageName }) => {
         onClose={handleClose}
         open={open}
       >
-        <MenuItem onClick={handleClick}>
+        <MenuItem onClick={handleGlobalSelect}>
           {' '}
-          {localSettings?.global ? (
+          {statusGlobal === true ? (
             <ListItemIcon>
               <Check />
             </ListItemIcon>
           ) : null}
           {t('sidebar.installation.global')}
         </MenuItem>
+        <MenuItem onClick={handleGlobalYarnModern}>
+          {' '}
+          {localSettings?.yarnModern ? (
+            <ListItemIcon>
+              <Check />
+            </ListItemIcon>
+          ) : null}
+          {t('sidebar.installation.yarnModern')}
+        </MenuItem>
       </Menu>
     </>
   );

package/src/components/SideBarTittle/SideBarTittle.tsx

@@ -78,4 +78,5 @@ const StyledHeading = styled(Heading)({
 
 const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
   color: theme?.palette.text.secondary,
+  fontSize: theme?.fontSize.sm,
 }));

package/src/components/Versions/HistoryList.tsx

@@ -1,8 +1,11 @@
+import Chip from '@mui/material/Chip';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useConfig } from '../../providers';
 import { Time, Versions } from '../../types/packageMeta';
 import { utils } from '../../utils';
 import { Link } from '../Link';
@@ -14,18 +17,43 @@ interface Props {
   time: Time;
 }
 
+export function filterDeprecated(versions: Versions) {
+  const versionsIds = Object.keys(versions);
+  return versionsIds.reduce((prev, current) => {
+    if (!versions[current].deprecated) {
+      prev[current] = versions[current];
+    }
+
+    return prev;
+  }, {});
+}
+
 const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {
   const { t } = useTranslation();
+  const { configOptions } = useConfig();
+  const theme = useTheme();
+  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;
+  const listVersions = hideDeprecatedVersions ? filterDeprecated(versions) : versions;
 
   return (
     <List dense={true}>
-      {Object.keys(versions)
+      {Object.keys(listVersions)
         .reverse()
         .map((version) => (
           <ListItem className="version-item" data-testid={`version-${version}`} key={version}>
             <Link to={`/-/web/detail/${packageName}/v/${version}`} variant="caption">
               <ListItemText disableTypography={false} primary={version}></ListItemText>
             </Link>
+            {typeof versions[version].deprecated === 'string' ? (
+              <Chip
+                color="warning"
+                data-testid="deprecated-badge"
+                label={t('versions.deprecated')}
+                size="small"
+                sx={{ marginLeft: theme.spacing(1) }}
+                variant="outlined"
+              />
+            ) : null}
             <Spacer />
             <ListItemText title={utils.formatDate(time[version])}>
               {time[version]

package/src/components/Versions/Versions.test.tsx

@@ -2,9 +2,10 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
-import { cleanup, render } from '../../test/test-react-testing-library';
+import { cleanup, render, screen } from '../../test/test-react-testing-library';
 import Versions, { Props } from './Versions';
 import data from './__partials__/data.json';
+import dataDeprecated from './__partials__/deprecated-versions.json';
 
 const ComponentToBeRendered: React.FC<Props> = (props) => (
   <MemoryRouter>
@@ -26,6 +27,8 @@ describe('<Version /> component', () => {
     // pick some versions
     expect(getByText('2.3.0')).toBeTruthy();
     expect(getByText('canary')).toBeTruthy();
+    // there is one deprecated version deprecated
+    expect(screen.queryByTestId('deprecated-badge')).toBeInTheDocument();
   });
 
   test('should not render versions', () => {
@@ -35,5 +38,17 @@ describe('<Version /> component', () => {
     expect(queryByText('versions.current-tags')).toBeFalsy();
   });
 
+  test('should render versions deprecated settings', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.hideDeprecatedVersions = true;
+    const { getByText } = render(
+      <ComponentToBeRendered packageMeta={dataDeprecated} packageName={'foo'} />
+    );
+    expect(getByText('versions.hide-deprecated')).toBeTruthy();
+
+    // pick some versions
+    expect(screen.queryByText('0.0.2')).not.toBeInTheDocument();
+    expect(screen.getByText('0.0.1')).toBeInTheDocument();
+  });
+
   test.todo('should click on version link');
 });

package/src/components/Versions/Versions.tsx

@@ -1,7 +1,10 @@
+import Alert from '@mui/material/Alert';
 import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useConfig } from '../../providers';
 import VersionsHistoryList from './HistoryList';
 import VersionsTagList from './TagList';
 
@@ -9,6 +12,8 @@ export type Props = { packageMeta: any; packageName: string };
 
 const Versions: React.FC<Props> = ({ packageMeta, packageName }) => {
   const { t } = useTranslation();
+  const { configOptions } = useConfig();
+  const theme = useTheme();
 
   if (!packageMeta) {
     return null;
@@ -18,6 +23,7 @@ const Versions: React.FC<Props> = ({ packageMeta, packageName }) => {
 
   const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;
   const hasVersionHistory = versions && Object.keys(versions).length > 0 && packageName;
+  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;
 
   return (
     <>
@@ -30,7 +36,17 @@ const Versions: React.FC<Props> = ({ packageMeta, packageName }) => {
       {hasVersionHistory ? (
         <>
           <Typography variant="subtitle1">{t('versions.version-history')}</Typography>
-          <VersionsHistoryList packageName={packageName} time={time} versions={versions} />
+          <>
+            {hideDeprecatedVersions && (
+              <Alert
+                severity="info"
+                sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}
+              >
+                {t('versions.hide-deprecated')}
+              </Alert>
+            )}
+            <VersionsHistoryList packageName={packageName} time={time} versions={versions} />
+          </>
         </>
       ) : null}
     </>

package/src/components/Versions/__partials__/data.json

@@ -3,6 +3,7 @@
     "0.0.1": {
       "name": "@verdaccio/local-storage",
       "version": "0.0.1",
+      "deprecated": "this is deprecated",
       "description": "local storage implementation",
       "main": "lib/index.js",
       "scripts": {

package/src/components/Versions/__partials__/deprecated-versions.json

@@ -0,0 +1,175 @@
+{
+  "versions": {
+    "0.0.1": {
+      "name": "@verdaccio/local-storage",
+      "version": "0.0.1",
+      "description": "local storage implementation",
+      "main": "lib/index.js",
+      "scripts": {
+        "test": "npm run lint && mocha --require babel-polyfill  --compilers js:babel-core/register ./test/**/*.spec.js",
+        "lint": "eslint .",
+        "flow": "flow",
+        "build": "babel src/ --out-dir lib/ --copy-files",
+        "cover": "cross-env NODE_ENV=test nyc npm t"
+      },
+      "dependencies": {
+        "@verdaccio/file-locking": "^0.0.3",
+        "@verdaccio/streams": "^0.0.2",
+        "async": "2.5.0",
+        "http-errors": "1.4.0",
+        "lodash": "4.17.4",
+        "mkdirp": "0.5.1"
+      },
+      "devDependencies": {
+        "@verdaccio/types": "0.0.2",
+        "babel-cli": "6.24.1",
+        "babel-core": "6.25.0",
+        "babel-eslint": "^7.2.3",
+        "babel-plugin-istanbul": "4.1.4",
+        "babel-polyfill": "6.23.0",
+        "babel-preset-es2015": "6.24.1",
+        "babel-preset-es2015-node4": "2.1.0",
+        "babel-preset-flow": "6.23.0",
+        "babel-plugin-transform-inline-imports-commonjs": "1.0.0",
+        "babel-plugin-array-includes": "2.0.3",
+        "babel-plugin-transform-runtime": "6.4.3",
+        "cross-env": "5.0.5",
+        "eslint": "4.4.1",
+        "eslint-config-google": "0.9.1",
+        "eslint-plugin-flowtype": "2.35.0",
+        "flow-bin": "0.52.0",
+        "mocha": "3.5.0",
+        "nyc": "11.1.0"
+      },
+      "nyc": {
+        "include": ["src/**/*.js"],
+        "all": true,
+        "cache": true,
+        "sourceMap": false,
+        "instrument": false,
+        "report-dir": "./tests-report",
+        "reporter": ["text", "html"]
+      },
+      "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+      },
+      "keywords": ["streams"],
+      "author": {
+        "name": "Juan Picado",
+        "email": "juanpicado19@gmail.com"
+      },
+      "private": false,
+      "license": "MIT",
+      "gitHead": "e7e4ea74f20331dfde0a7133a02b5b95d68696a9",
+      "_id": "@verdaccio/local-storage@0.0.1",
+      "_npmVersion": "5.3.0",
+      "_nodeVersion": "8.2.1",
+      "_npmUser": {
+        "name": "jotadeveloper",
+        "email": "juanpicado19@gmail.com"
+      },
+      "dist": {
+        "integrity": "sha512-J7qeK3r6jbaMOf4mBIqL1bAdb7Iwb+mC4ZaE9PUE2TctzXSkRRnk2M33zWGhZV0ziEPGAF40wC76wWex2GvXeA==",
+        "shasum": "9c71cbeeb922b35efc1b31949d0afa6aac97e9b6",
+        "tarball": "http://localhost:4872/@verdaccio%2flocal-storage/-/local-storage-0.0.1.tgz"
+      },
+      "maintainers": [
+        {
+          "name": "jotadeveloper",
+          "email": "juanpicado19@gmail.com"
+        }
+      ],
+      "_npmOperationalInternal": {
+        "host": "s3://npm-registry-packages",
+        "tmp": "tmp/local-storage-0.0.1.tgz_1502536792670_0.3513342353980988"
+      },
+      "directories": {}
+    },
+    "0.0.2": {
+      "deprecated": "this package is deprecated",
+      "name": "@verdaccio/local-storage",
+      "version": "0.0.2",
+      "description": "local storage implementation",
+      "main": "lib/index.js",
+      "scripts": {
+        "test": "npm run lint && mocha --require babel-polyfill  --compilers js:babel-core/register ./test/**/*.spec.js",
+        "lint": "eslint .",
+        "flow": "flow",
+        "build": "babel src/ --out-dir lib/ --copy-files",
+        "cover": "cross-env NODE_ENV=test nyc npm t"
+      },
+      "dependencies": {
+        "@verdaccio/file-locking": "^0.0.3",
+        "@verdaccio/streams": "^0.0.2",
+        "async": "2.5.0",
+        "http-errors": "1.4.0",
+        "lodash": "4.17.4",
+        "mkdirp": "0.5.1"
+      },
+      "devDependencies": {
+        "@verdaccio/types": "0.0.2",
+        "babel-cli": "6.24.1",
+        "babel-core": "6.25.0",
+        "babel-eslint": "^7.2.3",
+        "babel-plugin-istanbul": "4.1.4",
+        "babel-polyfill": "6.23.0",
+        "babel-preset-es2015": "6.24.1",
+        "babel-preset-es2015-node4": "2.1.0",
+        "babel-preset-flow": "6.23.0",
+        "babel-plugin-transform-inline-imports-commonjs": "1.0.0",
+        "babel-plugin-array-includes": "2.0.3",
+        "babel-plugin-transform-runtime": "6.4.3",
+        "cross-env": "5.0.5",
+        "eslint": "4.4.1",
+        "eslint-config-google": "0.9.1",
+        "eslint-plugin-flowtype": "2.35.0",
+        "flow-bin": "0.52.0",
+        "mocha": "3.5.0",
+        "nyc": "11.1.0"
+      },
+      "nyc": {
+        "include": ["src/**/*.js"],
+        "all": true,
+        "cache": true,
+        "sourceMap": false,
+        "instrument": false,
+        "report-dir": "./tests-report",
+        "reporter": ["text", "html"]
+      },
+      "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+      },
+      "keywords": ["streams"],
+      "author": {
+        "name": "Juan Picado",
+        "email": "juanpicado19@gmail.com"
+      },
+      "private": false,
+      "license": "MIT",
+      "gitHead": "626ea013ee810da9115550e0a60f44aa3d08e9a0",
+      "_id": "@verdaccio/local-storage@0.0.2",
+      "_npmVersion": "5.3.0",
+      "_nodeVersion": "8.2.1",
+      "_npmUser": {
+        "name": "jotadeveloper",
+        "email": "juanpicado19@gmail.com"
+      },
+      "dist": {
+        "integrity": "sha512-Su0cQpLAaBab3qekpcHO+J/JCfoznTuU0P7e5q9T7R2trGVobYXvsTiIB/usQNmDr2e+1N6iBhMst7Uy+231ag==",
+        "shasum": "fe79ad6f9ceb631857618038486f729098e7b31b",
+        "tarball": "http://localhost:4872/@verdaccio%2flocal-storage/-/local-storage-0.0.2.tgz"
+      },
+      "maintainers": [
+        {
+          "name": "jotadeveloper",
+          "email": "juanpicado19@gmail.com"
+        }
+      ],
+      "_npmOperationalInternal": {
+        "host": "s3://npm-registry-packages",
+        "tmp": "tmp/local-storage-0.0.2.tgz_1502611253150_0.21545960218645632"
+      },
+      "directories": {}
+    }
+  }
+}

package/src/providers/AppConfigurationProvider/AppConfigurationProvider.tsx

@@ -28,6 +28,7 @@ const defaultValues: ConfigProviderProps = {
     showSearch: true,
     showRaw: true,
     showDownloadTarball: true,
+    hideDeprecatedVersions: false,
     title: 'Verdaccio',
   },
 };

package/src/providers/PersistenceSettingProvider/PersistenceSettingProvider.tsx

@@ -11,10 +11,12 @@ import useLocalStorage from '../../hooks/useLocalStorage';
 
 type PersistenceSettingsProps = {
   isGlobal?: boolean;
+  yarnModern: boolean;
 };
 
 const defaultValues: PersistenceSettingsProps = {
   isGlobal: false,
+  yarnModern: false,
 };
 
 const PersistenceSettingContext = createContext<any>(defaultValues);

package/src/sections/Header/HeaderMenu.tsx

@@ -10,7 +10,7 @@ import HeaderGreetings from './HeaderGreetings';
 interface Props {
   username: string;
   isMenuOpen: boolean;
-  anchorEl?: Element | ((element: Element) => Element) | null | undefined;
+  anchorEl?: Element | null | undefined;
   onLogout: () => void;
   onLoggedInMenu: (event: MouseEvent<HTMLButtonElement>) => void;
   onLoggedInMenuClose: () => void;

package/src/sections/Header/LanguageSwitch.tsx

@@ -41,13 +41,16 @@ const LanguageContent = ({ translation, icon }) => (
 
 const LanguageSwitch = () => {
   const { language, setLanguage, listLanguages } = useLanguage();
-  const listConverted = listLanguages.reduce((prev, item) => {
-    prev[item.lng] = {
-      translation: item.menuKey,
-      icon: item.icon,
-    };
-    return prev;
-  }, {} as Record<string, { translation: string; icon: any }>);
+  const listConverted = listLanguages.reduce(
+    (prev, item) => {
+      prev[item.lng] = {
+        translation: item.menuKey,
+        icon: item.icon,
+      };
+      return prev;
+    },
+    {} as Record<string, { translation: string; icon: any }>
+  );
 
   const [languages] = useState<string[]>(Object.keys(i18next.options?.resources || {}));
   const { t } = useTranslation();

package/src/sections/SideBar/Sidebar.test.tsx

@@ -5,9 +5,13 @@ import { MemoryRouter } from 'react-router';
 import { server } from '../../../jest/server';
 import { VersionProvider } from '../../providers';
 import { store } from '../../store';
-import { renderWithStore, waitFor } from '../../test/test-react-testing-library';
+import { renderWithStore, screen, waitFor } from '../../test/test-react-testing-library';
 import DetailSidebar from './Sidebar';
 
+jest.mock('marked');
+jest.mock('marked');
+jest.mock('marked-highlight');
+
 const ComponentToBeRendered: React.FC = () => (
   <MemoryRouter>
     <VersionProvider>
@@ -66,9 +70,9 @@ server.use(
   ]
 );
 // describe('DetailSidebar', () => {
-test('should render commonjs module icon', async () => {
+test.skip('should render commonjs module icon', async () => {
   const { getByText } = renderWithStore(<ComponentToBeRendered />, store);
-
+  screen.debug();
   await waitFor(() => expect(getByText('jquery')).toBeInTheDocument());
 });
 

package/src/store/models/download.ts

@@ -13,7 +13,6 @@ export const download = createModel<RootModel>()({
   reducers: {},
   effects: () => ({
     async getTarball({ link }) {
-      // const basePath = state.configuration.config.base;
       try {
         const fileStream: Blob = await API.request(link, 'GET', {
           headers: {

package/src/store/models/login.test.ts

@@ -0,0 +1,38 @@
+// eslint-disable-next-line jest/no-mocks-import
+import { generateTokenWithTimeRange } from '../../../jest/unit/components/__mocks__/token';
+
+describe('getDefaultUserState', (): void => {
+  const username = 'xyz';
+
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  test('should return state with empty user', (): void => {
+    const token = 'token-xx-xx-xx';
+
+    jest.doMock('../storage', () => ({
+      getItem: (key: string) => (key === 'token' ? token : username),
+    }));
+    const { getDefaultUserState } = require('./login');
+    const result = {
+      token: null,
+      username: null,
+    };
+    expect(getDefaultUserState()).toEqual(result);
+  });
+
+  test('should return state with user from storage', (): void => {
+    const token = generateTokenWithTimeRange(24);
+
+    jest.doMock('../storage', () => ({
+      getItem: (key: string) => (key === 'token' ? token : username),
+    }));
+    const { getDefaultUserState } = require('./login');
+    const result = {
+      token,
+      username,
+    };
+    expect(getDefaultUserState()).toEqual(result);
+  });
+});

package/src/store/models/login.ts

@@ -2,6 +2,7 @@ import { createModel } from '@rematch/core';
 import i18next from 'i18next';
 
 import type { RootModel } from '.';
+import { isTokenExpire } from '../../utils';
 import API from '../api';
 import storage from '../storage';
 
@@ -23,12 +24,17 @@ export type LoginBody = {
   error?: LoginError;
 } & LoginResponse;
 
-const token = storage.getItem('token');
-const username = storage.getItem('username');
-const defaultUserState: LoginBody = {
-  token,
-  username,
-};
+export function getDefaultUserState(): LoginBody {
+  const token = storage.getItem('token');
+  const username = storage.getItem('username');
+  const defaultUserState = isTokenExpire(token)
+    ? { token: null, username: null }
+    : { token, username };
+
+  return defaultUserState;
+}
+
+const defaultUserState: LoginBody = getDefaultUserState();
 
 /**
  *

package/src/types/packageMeta.ts

@@ -78,6 +78,7 @@ export interface Version {
   license?: string;
   main?: string;
   keywords?: string[];
+  deprecated?: string;
 }
 
 export interface Author {

package/src/utils/__partials__/packageMeta.ts

@@ -140,7 +140,6 @@ export const packageMeta = {
       'flow-runtime': '0.13.0',
       'friendly-errors-webpack-plugin': '1.6.1',
       'fs-extra': '4.0.1',
-      'github-markdown-css': '2.8.0',
       'html-webpack-plugin': '2.29.0',
       'in-publish': '2.0.0',
       'localstorage-memory': '1.0.2',

package/src/utils/index.ts

@@ -8,3 +8,4 @@ export {
 } from './cli-utils';
 export { default as loadable } from './loadable';
 export { Route } from './routes';
+export * from './token';