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

package/src/components/Package/Tag/styles.ts

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled('span')({
+  verticalAlign: 'middle',
+  lineHeight: '22px',
+  borderRadius: '2px',
+  color: '#485a3e',
+  backgroundColor: '#f3f4f2',
+  padding: '0.22rem 0.4rem',
+  margin: '8px 8px 0 0',
+});

package/src/components/Package/index.ts

@@ -0,0 +1 @@
+export { default, PackageInterface } from './Package';

package/src/components/Package/styles.ts

@@ -0,0 +1,104 @@
+import styled from '@emotion/styled';
+import { default as Photo } from '@mui/material/Avatar';
+import Grid from '@mui/material/Grid';
+import { default as MuiIconButton } from '@mui/material/IconButton';
+import List from '@mui/material/List';
+import ListItemText from '@mui/material/ListItemText';
+import { Link } from 'react-router-dom';
+
+import { Theme } from '../../';
+
+export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  margin: '0 0 0 16px',
+  color: theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+  fontSize: 12,
+  [`@media (max-width: ${theme?.breakPoints.medium}px)`]: {
+    ':nth-of-type(3)': {
+      display: 'none',
+    },
+  },
+  [`@media (max-width: ${theme?.breakPoints.small}px)`]: {
+    ':nth-of-type(4)': {
+      display: 'none',
+    },
+  },
+}));
+
+export const Published = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+  margin: '0 5px 0 0',
+}));
+
+export const Details = styled('span')({
+  marginLeft: '5px',
+  lineHeight: 1.5,
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const Author = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const Avatar = styled(Photo)({
+  width: '20px',
+  height: '20px',
+});
+
+export const WrapperLink = styled(Link)({
+  textDecoration: 'none',
+});
+
+export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  fontWeight: theme?.fontWeight.bold,
+  fontSize: 20,
+  display: 'block',
+  marginBottom: 12,
+  color: theme?.palette.mode == 'dark' ? theme?.palette.dodgerBlue : theme?.palette.eclipse,
+  cursor: 'pointer',
+  [`@media (max-width: ${theme?.breakPoints.small}px)`]: {
+    fontSize: 14,
+    marginBottom: 8,
+  },
+}));
+
+export const GridRightAligned = styled(Grid)({
+  textAlign: 'right',
+});
+
+export const Wrapper = styled(List)<{ theme?: Theme }>(({ theme }) => ({
+  ':hover': {
+    backgroundColor:
+      theme?.palette?.type == 'dark' ? theme?.palette?.secondary.main : theme?.palette?.greyLight3,
+  },
+}));
+
+export const IconButton = styled(MuiIconButton)({
+  padding: 6,
+  svg: {
+    fontSize: 16,
+  },
+});
+
+export const TagContainer = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  marginTop: 8,
+  marginBottom: 12,
+  display: 'flex',
+  flexWrap: 'wrap',
+  [`@media (max-width: ${theme?.breakPoints.medium}px)`]: {
+    display: 'none',
+  },
+}));
+
+export const PackageListItemText = styled(ListItemText)({
+  paddingRight: 0,
+});
+
+export const Description = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.mode === 'light' ? theme?.palette.greyDark2 : theme?.palette.white,
+  fontSize: '14px',
+  paddingRight: 0,
+}));

package/src/components/PackageList/PackageList.tsx

@@ -0,0 +1,81 @@
+import Divider from '@mui/material/Divider';
+import React from 'react';
+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 { Help, Package, useConfig } from '../..';
+import { utils } from '../../utils';
+
+interface Props {
+  packages: any[];
+}
+
+const cache = new CellMeasurerCache({
+  fixedWidth: true,
+  defaultHeight: 100,
+});
+
+/* eslint-disable  verdaccio/jsx-no-style */
+const PackageList: React.FC<Props> = ({ packages }) => {
+  const { configOptions } = useConfig();
+  const renderRow = ({ index, key, parent, style }: ListRowProps) => {
+    const { name, version, description, time, keywords, dist, homepage, bugs, author, license } =
+      packages[index];
+    // TODO: move format license to API side.
+    const formattedLicense = utils.formatLicense(license);
+    return (
+      <CellMeasurer cache={cache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
+        <div style={style}>
+          {index !== 0 && <Divider />}
+          <Package
+            author={author}
+            bugs={bugs}
+            description={description}
+            dist={dist}
+            homepage={homepage}
+            keywords={keywords}
+            license={formattedLicense}
+            name={name}
+            showDownload={configOptions.showDownloadTarball}
+            time={time}
+            version={version}
+          />
+        </div>
+      </CellMeasurer>
+    );
+  };
+
+  if (packages.length === 0) {
+    return <Help />;
+  }
+
+  return (
+    <WindowScroller>
+      {({ height, isScrolling, scrollTop, onChildScroll }) => (
+        <AutoSizer disableHeight={true}>
+          {({ 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>
+  );
+};
+
+export default PackageList;

package/src/components/PackageList/Packagelist.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
+import { store } from '../../store';
+import { cleanup, renderWithStore } from '../../test/test-react-testing-library';
+import PackageList from './PackageList';
+
+describe('<PackageList /> component', () => {
+  beforeEach(cleanup);
+
+  test('should load the component with no packages', () => {
+    const props = {
+      packages: [],
+    };
+    const wrapper = renderWithStore(<PackageList packages={props.packages} />, store);
+    expect(wrapper.getByText('help.title')).toBeInTheDocument();
+  });
+
+  test('should load the component with packages', () => {
+    // Mock <Autosizer /> width
+    jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(600);
+
+    const props = {
+      packages: [
+        {
+          name: 'verdaccio',
+          version: '1.0.0',
+          time: new Date(1532211072138).getTime(),
+          description: 'Private NPM repository',
+          author: { name: 'Sam', avatar: 'test avatar' },
+        },
+        {
+          name: 'abc',
+          version: '1.0.1',
+          time: new Date(1532211072138).getTime(),
+          description: 'abc description',
+          author: { name: 'Rose', avatar: 'test avatar' },
+        },
+        {
+          name: 'xyz',
+          version: '1.1.0',
+          description: 'xyz description',
+          author: { name: 'Martin', avatar: 'test avatar' },
+        },
+      ],
+      help: false,
+    };
+
+    const wrapper = renderWithStore(
+      <BrowserRouter>
+        <PackageList packages={props.packages} />
+      </BrowserRouter>,
+      store
+    );
+
+    expect(wrapper.queryAllByTestId('package-item-list')).toHaveLength(3);
+  });
+});

package/src/components/PackageList/index.ts

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

package/src/components/RawViewer/RawViewer.tsx

@@ -0,0 +1,67 @@
+import CloseIcon from '@mui/icons-material/Close';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import ReactJson from 'react-json-view';
+
+export interface ViewerTitleProps {
+  id: string;
+  children?: React.ReactNode;
+  onClose: () => void;
+}
+
+const ViewerTitle = (props: ViewerTitleProps) => {
+  const { children, onClose } = props;
+
+  return (
+    <DialogTitle sx={{ m: 0, p: 2 }}>
+      {children}
+      {onClose ? (
+        <IconButton
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      ) : null}
+    </DialogTitle>
+  );
+};
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  packageMeta: any;
+};
+
+/* eslint-disable verdaccio/jsx-spread */
+const RawViewer: React.FC<Props> = ({ isOpen = false, onClose, packageMeta }) => {
+  const { t } = useTranslation();
+  return (
+    <Dialog data-testid={'rawViewer--dialog'} fullScreen={true} open={isOpen}>
+      <ViewerTitle id="viewer-title" onClose={onClose}>
+        {t('action-bar-action.raw')}
+      </ViewerTitle>
+      <DialogContent>
+        <ReactJson
+          collapseStringsAfterLength={40}
+          collapsed={true}
+          enableClipboard={false}
+          groupArraysAfterLength={10}
+          src={packageMeta as any}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default RawViewer;

package/src/components/RawViewer/index.ts

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

package/src/components/Readme/Readme.spec.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { cleanup, render } from '../../test/test-react-testing-library';
+import Readme from './Readme';
+
+describe('<Readme /> component', () => {
+  beforeEach(cleanup);
+
+  test('should load the component in default state', () => {
+    const wrapper = render(<Readme description="test" />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('should dangerously set html', () => {
+    const wrapper = render(<Readme description="<h1>This is a test string</h1>" />);
+    expect(wrapper.getByText('This is a test string')).toBeInTheDocument();
+  });
+});

package/src/components/Readme/Readme.tsx

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import { useTheme } from '@mui/styles';
+import 'highlight.js/styles/default.css';
+import React from 'react';
+
+import { useCustomTheme } from '../../';
+import './github-markdown.css';
+import { Props } from './types';
+import { parseReadme } from './utils';
+
+const Readme: React.FC<Props> = ({ description }) => {
+  // @ts-ignore
+  const { isDarkMode } = useCustomTheme();
+  const theme = useTheme();
+
+  return (
+    <Card>
+      <CardContent>
+        <Box data-testid="readme" sx={{ margin: theme.spacing(1) }}>
+          <Wrapper
+            className={`markdown-body ${isDarkMode ? 'markdown-dark' : 'markdown-light'}`}
+            dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
+          />
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+export default Readme;
+
+const Wrapper = styled('div')({
+  ul: {
+    listStyle: 'disc',
+  },
+  img: {
+    maxWidth: '100%',
+  },
+});