@verdaccio/ui-components 2.0.0-6-next.4 → 2.0.0-6-next.5

package/src/components/Distribution/index.ts

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

package/src/components/Distribution/styles.ts

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+import Chip from '@mui/material/Chip';
+import FabMUI from '@mui/material/Fab';
+import ListItem from '@mui/material/ListItem';
+import Typography from '@mui/material/Typography';
+
+import { Theme } from '../../Theme';
+
+export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
+export const DistListItem = styled(ListItem)({
+  paddingLeft: 0,
+  paddingRight: 0,
+  flexWrap: 'wrap',
+});
+
+export const DistChips = styled(Chip)({
+  marginRight: 5,
+  textTransform: 'capitalize',
+  marginTop: 5,
+});
+
+export const DownloadButton = styled(FabMUI)<{ theme?: Theme }>((props) => ({
+  backgroundColor: props.theme?.palette.primary.main,
+  color: props.theme?.palette.white,
+}));

package/src/components/Distribution/utils.ts

@@ -0,0 +1,31 @@
+/**
+ * Formats license field for webui.
+ * @see https://docs.npmjs.com/files/package.json#license
+ */
+// License should use type License defined above, but conflicts with the unit test that provide array or empty object
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function formatLicense(license: any): string | undefined {
+  if (typeof license === 'string') {
+    return license;
+  }
+
+  if (license?.type) {
+    return license.type;
+  }
+
+  return;
+}
+
+export function fileSizeSI(
+  a: number,
+  b?: typeof Math,
+  c?: (p: number) => number,
+  d?: number,
+  e?: number
+): string {
+  return (
+    ((b = Math), (c = b.log), (d = 1e3), (e = (c(a) / c(d)) | 0), a / b.pow(d, e)).toFixed(2) +
+    ' ' +
+    (e ? 'kMGTPEZY'[--e] + 'B' : 'Bytes')
+  );
+}

package/src/components/Engines/Engines.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { default as Engines } from '.';
+
+export default {
+  title: 'Engines',
+};
+
+export const EnginesNpmNode: any = () => (
+  <Engines
+    packageMeta={{
+      latest: {
+        engines: {
+          node: '>= 0.1.98',
+          npm: '>3',
+        },
+      },
+    }}
+  />
+);
+
+export const EnginesNode: any = () => (
+  <Engines
+    packageMeta={{
+      latest: {
+        engines: {
+          node: '>= 18',
+        },
+      },
+    }}
+  />
+);
+
+export const EnginesYarn: any = () => (
+  <Engines
+    packageMeta={{
+      latest: {
+        engines: {
+          yarn: '>3',
+        },
+      },
+    }}
+  />
+);
+
+export const EnginesPnpm: any = () => (
+  <Engines
+    packageMeta={{
+      latest: {
+        engines: {
+          pnpm: '>7',
+        },
+      },
+    }}
+  />
+);
+
+export const EnginesAll: any = () => (
+  <Engines
+    packageMeta={{
+      latest: {
+        engines: {
+          node: '>= 18',
+          pnpm: '>7',
+          yarn: '>3',
+          npm: '>3',
+        },
+      },
+    }}
+  />
+);

package/src/components/Engines/Engines.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { cleanup, render } from '../../test/test-react-testing-library';
+import { PackageMetaInterface } from '../../types/packageMeta';
+import Engine from './Engines';
+
+jest.mock('./img/node.png', () => '');
+jest.mock('../Install/img/npm.svg', () => '');
+
+const mockPackageMeta = (
+  engines?: PackageMetaInterface['latest']['engines']
+): PackageMetaInterface => ({
+  latest: {
+    name: 'verdaccio',
+    version: '0.0.0',
+    dist: {
+      fileCount: 1,
+      unpackedSize: 1,
+    },
+    ...(engines && { engines }),
+  },
+  _uplinks: {},
+});
+
+describe('<Engines /> component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+  const htmlRender = 'sidebar.engines.npm-version';
+
+  test('should render the component in default state', () => {
+    const packageMeta = mockPackageMeta({
+      node: '>= 0.1.98',
+      npm: '>3',
+    });
+
+    const wrapper = render(<Engine packageMeta={packageMeta} />);
+
+    expect(wrapper.getByText(htmlRender)).toBeInTheDocument();
+  });
+
+  test('should render the component when there is no engine key in package meta', () => {
+    const packageMeta = mockPackageMeta();
+    const wrapper = render(<Engine packageMeta={packageMeta} />);
+
+    expect(wrapper.queryByText(htmlRender)).not.toBeInTheDocument();
+  });
+
+  test('should render the component when there is no keys in engine in package meta', () => {
+    const packageMeta = mockPackageMeta({});
+
+    const wrapper = render(<Engine packageMeta={packageMeta} />);
+
+    expect(wrapper.queryByText(htmlRender)).not.toBeInTheDocument();
+  });
+});

package/src/components/Engines/Engines.tsx

@@ -0,0 +1,95 @@
+import Avatar from '@mui/material/Avatar';
+import Grid from '@mui/material/Grid';
+import List from '@mui/material/List';
+import ListItemText from '@mui/material/ListItemText';
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PackageMetaInterface } from '../../types/packageMeta';
+import { NodeJS, Npm, Pnpm, Yarn } from '../Icons';
+import { EngineListItem, StyledText } from './styles';
+
+/**
+ * The props type for {@link EngineItem}.
+ */
+type EngineItemProps = { title: string; element: React.ReactElement; engineText?: string };
+
+/**
+ *
+ *
+ * @category Component
+ */
+const EngineItem: FC<EngineItemProps> = ({ title, element, engineText }) => (
+  <Grid item={true} xs={6}>
+    <List subheader={<StyledText variant={'subtitle1'}>{title}</StyledText>}>
+      <EngineListItem>
+        <Avatar sx={{ bgcolor: '#FFF' }}>{element}</Avatar>
+        <ListItemText primary={engineText} />
+      </EngineListItem>
+    </List>
+  </Grid>
+);
+
+interface EngineMetadata extends Omit<PackageMetaInterface, 'latest'> {
+  latest: {
+    engines?: { npm?: string; node?: string; pnpm?: string; yarn?: string };
+  };
+}
+
+/**
+ * The props type for {@link Engine}.
+ */
+export type Props = { packageMeta: EngineMetadata };
+
+/**
+ *
+ *
+ * @category Component
+ */
+const Engine: React.FC<Props> = ({ packageMeta }) => {
+  const { t } = useTranslation();
+
+  const engines = packageMeta?.latest?.engines;
+
+  if (!engines) {
+    return null;
+  }
+
+  return (
+    <Grid container={true}>
+      {engines.node ? (
+        <EngineItem
+          element={<NodeJS />}
+          engineText={engines.node}
+          title={t('sidebar.engines.node-js')}
+        />
+      ) : null}
+
+      {engines.npm ? (
+        <EngineItem
+          element={<Npm />}
+          engineText={engines.node}
+          title={t('sidebar.engines.npm-version')}
+        />
+      ) : null}
+
+      {engines.yarn ? (
+        <EngineItem
+          element={<Yarn />}
+          engineText={engines.yarn}
+          title={t('sidebar.engines.npm-version')}
+        />
+      ) : null}
+
+      {engines.pnpm ? (
+        <EngineItem
+          element={<Pnpm />}
+          engineText={engines.pnpm}
+          title={t('sidebar.engines.npm-version')}
+        />
+      ) : null}
+    </Grid>
+  );
+};
+
+export default Engine;

package/src/components/Engines/index.ts

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

package/src/components/Engines/styles.ts

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+import ListItem from '@mui/material/ListItem';
+import Typography from '@mui/material/Typography';
+
+import { Theme } from '../../Theme';
+
+export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
+export const EngineListItem = styled(ListItem)({
+  paddingLeft: 0,
+});

package/src/components/ErrorBoundary/ErrorBoundary.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;
+  }
+}

package/src/components/ErrorBoundary/index.ts

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

package/src/components/FundButton/FundButton.stories.tsx

@@ -0,0 +1,25 @@
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import React from 'react';
+
+import { default as FundButton } from '.';
+
+export default {
+  title: 'FundButton',
+};
+
+export const FundButtonUrl: any = () => (
+  <Box sx={{ width: '100%' }}>
+    <Stack spacing={2}>
+      <FundButton
+        packageMeta={{
+          latest: {
+            funding: {
+              url: 'https://opencollective.com/verdaccio',
+            },
+          },
+        }}
+      />
+    </Stack>
+  </Box>
+);

package/src/components/FundButton/FundButton.test.tsx

@@ -0,0 +1,84 @@
+import _ from 'lodash';
+import React from 'react';
+
+import { render } from '../../test/test-react-testing-library';
+import FundButton from './FundButton';
+
+const pkgMeta = {
+  _uplinks: {},
+  latest: {
+    name: 'verdaccio-ui/local-storage',
+    version: '8.0.1-next.1',
+    dist: {
+      fileCount: 0,
+      unpackedSize: 0,
+      tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
+    },
+    homepage: 'https://verdaccio.org',
+    bugs: {
+      url: 'https://github.com/verdaccio/monorepo/issues',
+    },
+  },
+};
+
+describe('test FundButton', () => {
+  test('should not display the button if fund is missing', () => {
+    const wrapper = render(<FundButton packageMeta={pkgMeta} />);
+
+    expect(wrapper.queryByText('button.fund-this-package')).toBeNull();
+  });
+
+  test('should not display the button if url is missing', () => {
+    const value = _.merge(pkgMeta, {
+      latest: {
+        funding: {},
+      },
+    });
+
+    const wrapper = render(<FundButton packageMeta={value} />);
+
+    expect(wrapper.queryByText('button.fund-this-package')).toBeNull();
+  });
+
+  test('should not display the button if url is not a string', () => {
+    const value = _.merge(pkgMeta, {
+      latest: {
+        funding: {
+          url: null,
+        },
+      },
+    });
+
+    const wrapper = render(<FundButton packageMeta={value} />);
+
+    expect(wrapper.queryByText('button.fund-this-package')).toBeNull();
+  });
+
+  test('should not display the button if url is not an url', () => {
+    const value = _.merge(pkgMeta, {
+      latest: {
+        funding: {
+          url: 'something different as url',
+        },
+      },
+    });
+
+    const wrapper = render(<FundButton packageMeta={value} />);
+
+    expect(wrapper.queryByText('button.fund-this-package')).toBeNull();
+  });
+
+  test('should display the button if url is a valid url', () => {
+    const value = _.merge(pkgMeta, {
+      latest: {
+        funding: {
+          url: 'https://opencollective.com/verdaccio',
+        },
+      },
+    });
+
+    const wrapper = render(<FundButton packageMeta={value} />);
+
+    expect(wrapper.getByText('button.fund-this-package')).toBeTruthy();
+  });
+});

package/src/components/FundButton/FundButton.tsx

@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+import Favorite from '@mui/icons-material/Favorite';
+import Button from '@mui/material/Button';
+import React from 'react';
+import { Trans } from 'react-i18next';
+
+import { Theme } from '../../Theme';
+import { url } from '../../utils';
+import { Link } from '../Link';
+
+const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
+  marginTop: theme?.spacing(1),
+  marginBottom: theme?.spacing(1),
+  textDecoration: 'none',
+  display: 'block',
+}));
+
+const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.orange,
+}));
+
+const StyledFundStrong = styled('strong')({
+  marginRight: 3,
+});
+
+/* eslint-disable react/jsx-no-bind */
+const FundButton: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
+  const fundingUrl = packageMeta?.latest?.funding?.url as string;
+
+  if (!url.isURL(fundingUrl)) {
+    return null;
+  }
+
+  return (
+    <StyledLink external={true} to={fundingUrl} variant="button">
+      <Button
+        color="primary"
+        fullWidth={true}
+        startIcon={<StyledFavoriteIcon />}
+        variant="outlined"
+      >
+        <Trans components={[<StyledFundStrong key="fund" />]} i18nKey="button.fund-this-package" />
+      </Button>
+    </StyledLink>
+  );
+};
+
+export default FundButton;

package/src/components/FundButton/index.ts

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

package/src/components/HeaderInfoDialog/HeaderInfoDialog.tsx

@@ -0,0 +1,82 @@
+/* eslint-disable verdaccio/jsx-spread */
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import React from 'react';
+
+import RegistryInfoDialog from '../RegistryInfoDialog';
+
+interface Props {
+  isOpen: boolean;
+  onCloseDialog: () => void;
+  tabPanels: any;
+  tabs: any;
+  dialogTitle: string;
+}
+
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      aria-labelledby={`simple-tab-${index}`}
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      role="tabpanel"
+      {...other}
+    >
+      {value === index && <Box sx={{ paddingTop: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+const HeaderInfoDialog: React.FC<Props> = ({
+  onCloseDialog,
+  isOpen,
+  tabs = null,
+  tabPanels = null,
+  dialogTitle,
+}) => {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (_event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <RegistryInfoDialog onClose={onCloseDialog} open={isOpen} title={dialogTitle}>
+      <Box sx={{ width: '100%' }}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <Tabs aria-label="infoTabs" onChange={handleChange} value={value}>
+            {tabs
+              ? tabs.map((item, index) => {
+                  return (
+                    <Tab key={item.label} label={item.label} {...a11yProps(index)} {...item} />
+                  );
+                })
+              : null}
+          </Tabs>
+        </Box>
+
+        {tabPanels
+          ? tabPanels.map((item, index) => {
+              return (
+                <TabPanel index={index} key={item.key} value={value}>
+                  {item.element}
+                </TabPanel>
+              );
+            })
+          : null}
+      </Box>
+    </RegistryInfoDialog>
+  );
+};
+
+export default HeaderInfoDialog;

package/src/components/HeaderInfoDialog/index.ts

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

package/src/components/Heading/Heading.tsx

@@ -0,0 +1,16 @@
+import { default as MaterialUITypography, TypographyProps } from '@mui/material/Typography';
+import React, { forwardRef } from 'react';
+
+type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type HeadingRef = HTMLHeadingElement;
+
+interface Props extends Omit<TypographyProps, 'variant'> {
+  variant?: HeadingType;
+}
+
+const Heading = forwardRef<HeadingRef, Props>(function Heading({ variant = 'h6', ...props }, ref) {
+  // eslint-disable-next-line verdaccio/jsx-spread
+  return <MaterialUITypography {...props} ref={ref} variant={variant} />;
+});
+
+export default Heading;

package/src/components/Heading/index.ts

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

package/src/components/Help/Help.stories.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { default as Help } from '.';
+
+export default {
+  title: 'Help',
+};
+
+export const HelpMessage: any = () => <Help />;

package/src/components/Help/Help.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { render } from '../../test/test-react-testing-library';
+import Help from './Help';
+
+describe('<Help /> component', () => {
+  test('should load the component in default state', () => {
+    const { container } = render(<Help />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});