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

package/src/components/SettingsMenu/SettingsMenu.tsx

@@ -0,0 +1,86 @@
+import Check from '@mui/icons-material/Check';
+import Settings from '@mui/icons-material/Settings';
+import IconButton from '@mui/material/IconButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSettings } from '../../providers/PersistenceSettingProvider';
+
+interface Props {
+  packageName: string;
+}
+
+const InstallListItem: React.FC<Props> = ({ packageName }) => {
+  const { t } = useTranslation();
+  const { localSettings, updateSettings } = useSettings();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleOpenMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleGlobalSelect = () => {
+    const statusGlobal = !localSettings[packageName]?.global;
+    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
+        aria-controls={open ? 'basic-menu' : undefined}
+        aria-expanded={open ? 'true' : undefined}
+        aria-haspopup="true"
+        id="basic-button"
+        onClick={handleOpenMenu}
+        size="small"
+      >
+        <Settings fontSize="small" />
+      </IconButton>
+      <Menu
+        MenuListProps={{
+          'aria-labelledby': 'basic-button',
+        }}
+        anchorEl={anchorEl}
+        id="basic-menu"
+        onClose={handleClose}
+        open={open}
+      >
+        <MenuItem onClick={handleGlobalSelect}>
+          {' '}
+          {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>
+    </>
+  );
+};
+
+export default InstallListItem;

package/src/components/SettingsMenu/index.ts

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

package/src/components/SideBarTitle/SideBarTitle.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { default as SideBarTittle } from '.';
+
+const meta: Meta<typeof SideBarTittle> = {
+  title: 'Components/Sidebar/Title',
+  component: SideBarTittle,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SideBarTittle>;
+
+export const Commonjs: Story = {
+  name: 'CommonJS package',
+  render: () => (
+    <SideBarTittle
+      isLatest={false}
+      moduleType="commonjs"
+      packageName="jquery"
+      time="2012-12-31T06:54:14.275Z"
+      version="1.0.0"
+    />
+  ),
+};
+
+export const ES6: Story = {
+  name: 'ES6 package',
+  render: () => (
+    <SideBarTittle
+      isLatest={true}
+      moduleType="module"
+      packageName="react"
+      time="2012-12-31T06:54:14.275Z"
+      version="14.0.0"
+    />
+  ),
+};
+
+export const Description: Story = {
+  name: 'With description',
+  render: () => (
+    <SideBarTittle
+      description="Storybook's CLI - easiest method of adding storybook to your projects"
+      isLatest={true}
+      moduleType="module"
+      packageName="storybook"
+      time="2012-12-31T06:54:14.275Z"
+      version="14.0.0"
+    />
+  ),
+};
+
+export const WithTypes: Story = {
+  name: 'With types declaration',
+  render: () => (
+    <SideBarTittle
+      description="Storybook's CLI - easiest method of adding storybook to your projects"
+      hasTypes={true}
+      isLatest={true}
+      moduleType="module"
+      packageName="storybook"
+      time="2012-12-31T06:54:14.275Z"
+      version="14.0.0"
+    />
+  ),
+};

package/src/components/SideBarTitle/SideBarTitle.tsx

@@ -0,0 +1,82 @@
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Theme } from '../../Theme';
+import Heading from '../Heading';
+import { CommonJS, ES6Modules, TypeScript } from '../Icons';
+import { formatDate, formatDateDistance } from './utils';
+
+export type ModuleType = 'commonjs' | 'module';
+
+interface Props {
+  packageName: string;
+  description?: string;
+  version: string;
+  isLatest: boolean;
+  hasTypes?: boolean;
+  moduleType: ModuleType | void;
+  time: string;
+}
+
+const ModuleJS: React.FC<{ module: ModuleType | void }> = ({ module }) => {
+  if (module === 'commonjs') {
+    return <CommonJS />;
+  } else if (module === 'module') {
+    return <ES6Modules />;
+  } else {
+    return null;
+  }
+};
+
+const DetailSidebarTitle: React.FC<Props> = ({
+  description,
+  packageName,
+  version,
+  isLatest,
+  hasTypes,
+  moduleType,
+  time,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
+      <StyledHeading>
+        <TitleWrapper>
+          <>
+            {packageName}
+            {hasTypes && <TypeScript />}
+            <ModuleJS module={moduleType} />
+          </>
+        </TitleWrapper>
+      </StyledHeading>
+      {description && <div>{description}</div>}
+      <StyledBoxVersion title={formatDate(time)}>
+        {isLatest
+          ? t('sidebar.detail.latest-version', { version })
+          : t('sidebar.detail.version', { version })}
+        {time
+          ? ' - ' + t('sidebar.detail.published') + ' ' + formatDateDistance(time)
+          : t('versions.not-available')}
+      </StyledBoxVersion>
+    </Box>
+  );
+};
+
+export default DetailSidebarTitle;
+
+const TitleWrapper = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const StyledHeading = styled(Heading)({
+  fontSize: '1rem',
+  fontWeight: 700,
+});
+
+const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.text.secondary,
+  fontSize: theme?.fontSize.sm,
+}));

package/src/components/SideBarTitle/index.ts

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

package/src/components/SideBarTitle/utils.ts

@@ -0,0 +1,12 @@
+import dayjs from 'dayjs';
+
+export const TIMEFORMAT = 'L LTS';
+
+export function formatDate(lastUpdate: string | number): string {
+  return dayjs(new Date(lastUpdate)).format(TIMEFORMAT);
+}
+
+export function formatDateDistance(lastUpdate: Date | string | number): string {
+  // @ts-ignore
+  return dayjs(new Date(lastUpdate)).fromNow();
+}

package/src/components/TextField/TextField.test.tsx

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

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable verdaccio/jsx-spread */
+import { default as MaterialUITextField, TextFieldProps } from '@mui/material/TextField';
+import React, { forwardRef } from 'react';
+
+// The default element type of MUI's TextField is 'div'
+type TextFieldRef = HTMLDivElement;
+
+const TextField = forwardRef<TextFieldRef, TextFieldProps>(function TextField(
+  { InputProps, classes, ...props },
+  ref
+) {
+  return (
+    <MaterialUITextField
+      {...props}
+      InputProps={{
+        ...InputProps,
+        classes,
+      }}
+      ref={ref}
+    />
+  );
+});
+
+export default TextField;

package/src/components/TextField/index.ts

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

package/src/components/UpLinks/UpLinks.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { cleanup, render } from '../../test/test-react-testing-library';
+import UpLinks from './UpLinks';
+
+describe('<UpLinks /> component', () => {
+  beforeEach(cleanup);
+
+  test('should render the component when there is no uplink', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio',
+        version: '4.0.0',
+        dist: { fileCount: 0, unpackedSize: 0 },
+      },
+      _uplinks: {},
+    };
+
+    const wrapper = render(<UpLinks packageMeta={packageMeta} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('should render the component with uplinks', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio',
+        version: '4.0.0',
+        author: {
+          name: 'verdaccio user',
+          url: '',
+          avatar: 'https://www.gravatar.com/avatar/000000',
+        },
+        dist: { fileCount: 0, unpackedSize: 0 },
+      },
+      _uplinks: {
+        npmjs: {
+          etag: '"W/"252f0a131cedd3ea82dfefd6fa049558""',
+          fetched: 1529779934081,
+        },
+      },
+    };
+
+    const wrapper = render(<UpLinks packageMeta={packageMeta} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/src/components/UpLinks/UpLinks.tsx

@@ -0,0 +1,41 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { utils } from '../../utils';
+import NoItems from '../NoItems';
+import { ListItemText, Spacer, StyledText } from './styles';
+
+const UpLinks: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
+  const { t } = useTranslation();
+
+  if (!packageMeta?._uplinks || !packageMeta.latest) {
+    return null;
+  }
+
+  const { _uplinks: uplinks, latest } = packageMeta;
+
+  if (Object.keys(uplinks).length === 0) {
+    return <NoItems data-testid="no-uplinks" text={t('uplinks.no-items', { name: latest.name })} />;
+  }
+
+  return (
+    <>
+      <StyledText variant="subtitle1">{t('uplinks.title')}</StyledText>
+      <List>
+        {Object.keys(uplinks)
+          .reverse()
+          .map((name) => (
+            <ListItem key={name}>
+              <ListItemText>{name}</ListItemText>
+              <Spacer />
+              <ListItemText>{utils.formatDateDistance(uplinks[name].fetched)}</ListItemText>
+            </ListItem>
+          ))}
+      </List>
+    </>
+  );
+};
+
+export default UpLinks;

package/src/components/UpLinks/Uplinks.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { default as Uplinks } from '.';
+
+export default {
+  title: 'Components/Detail/Uplinks',
+};
+
+export const UplinksAll: any = () => {
+  return (
+    <Uplinks
+      packageMeta={{
+        latest: {
+          name: 'verdaccio',
+          version: '4.0.0',
+        },
+        _uplinks: {
+          npmjs: {
+            etag: '"W/"252f0a131cedd3ea82dfefd6fa049558""',
+            fetched: 1529779934081,
+          },
+          yarn: {
+            etag: '"W/"252f0a131cedd3ea82dfefd6fa049558""',
+            fetched: 1529779934081,
+          },
+          private: {
+            etag: '"W/"252f0a131cedd3ea82dfefd6fa049558""',
+            fetched: 1529779934081,
+          },
+        },
+      }}
+    />
+  );
+};
+export const NoUplinks: any = () => {
+  return (
+    <Uplinks
+      packageMeta={{
+        latest: {
+          name: 'verdaccio',
+          version: '4.0.0',
+        },
+        _uplinks: {},
+      }}
+    />
+  );
+};

package/src/components/UpLinks/index.ts

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

package/src/components/UpLinks/styles.ts

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+import { default as MuiListItemText } from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+
+import { Theme } from '../../Theme';
+
+export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight.bold,
+}));
+
+export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  flex: '1 1 auto',
+  borderBottom: `1px dotted ${
+    theme?.palette.mode == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'
+  } `,
+  whiteSpace: 'nowrap',
+  height: '0.5em',
+}));
+
+export const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({
+  flex: 'none',
+  color: theme?.palette.mode == 'light' ? theme?.palette.black : theme?.palette.white,
+  opacity: 0.6,
+}));

package/src/components/Versions/HistoryList.tsx

@@ -0,0 +1,69 @@
+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';
+import { ListItemText, Spacer } from './styles';
+
+interface Props {
+  versions: Versions;
+  packageName: string;
+  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(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]
+                ? utils.formatDateDistance(time[version])
+                : t('versions.not-available')}
+            </ListItemText>
+          </ListItem>
+        ))}
+    </List>
+  );
+};
+
+export default VersionsHistoryList;

package/src/components/Versions/TagList.tsx

@@ -0,0 +1,33 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import React from 'react';
+
+import { DistTags, Time } from '../../types/packageMeta';
+import { Link } from '../Link';
+import { ListItemText, Spacer } from './styles';
+
+interface Props {
+  tags: DistTags;
+  packageName: string;
+  time: Time;
+}
+
+const VersionsTagList: React.FC<Props> = ({ tags, packageName, time }) => (
+  <List dense={true}>
+    {Object.keys(tags)
+      .sort((a, b) => {
+        return time[tags[a]] < time[tags[b]] ? 1 : time[tags[a]] > time[tags[b]] ? -1 : 0;
+      })
+      .map((tag) => (
+        <ListItem className="version-item" data-testid={`tag-${tag}`} key={tag}>
+          <Link to={`/-/web/detail/${packageName}/v/${tags[tag]}`} variant="outline">
+            <ListItemText>{tag}</ListItemText>
+          </Link>
+          <Spacer />
+          <ListItemText>{tags[tag]}</ListItemText>
+        </ListItem>
+      ))}
+  </List>
+);
+
+export default VersionsTagList;

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

@@ -0,0 +1,54 @@
+/* eslint-disable verdaccio/jsx-spread */
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+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>
+    <Versions {...props} />
+  </MemoryRouter>
+);
+
+describe('<Version /> component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('should render versions', () => {
+    const { getByText } = render(<ComponentToBeRendered packageMeta={data} packageName={'foo'} />);
+
+    expect(getByText('versions.version-history')).toBeTruthy();
+    expect(getByText('versions.current-tags')).toBeTruthy();
+
+    // 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', () => {
+    const { queryByText } = render(<ComponentToBeRendered packageMeta={{}} packageName={'foo'} />);
+
+    expect(queryByText('versions.version-history')).toBeFalsy();
+    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

@@ -0,0 +1,56 @@
+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';
+
+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;
+  }
+
+  const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta;
+
+  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;
+  const hasVersionHistory = versions && Object.keys(versions).length > 0 && packageName;
+  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;
+
+  return (
+    <>
+      {hasDistTags ? (
+        <>
+          <Typography variant="subtitle1">{t('versions.current-tags')}</Typography>
+          <VersionsTagList packageName={packageName} tags={distTags} time={time} />
+        </>
+      ) : null}
+      {hasVersionHistory ? (
+        <>
+          <Typography variant="subtitle1">{t('versions.version-history')}</Typography>
+          <>
+            {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}
+    </>
+  );
+};
+
+export default Versions;