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

package/src/components/LoginDialog/LoginDialogHeader.tsx

@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+import CloseIcon from '@mui/icons-material/Close';
+import LockOutlined from '@mui/icons-material/LockOutlined';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Heading, Theme } from '../../';
+
+interface Props {
+  onClose?: () => void;
+}
+
+const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box alignItems="center" display="flex" flexDirection="column" position="relative">
+      {onClose && (
+        <StyledIconButton aria-label={t('button.close')} onClick={onClose}>
+          <CloseIcon />
+        </StyledIconButton>
+      )}
+      <StyledAvatar>
+        <LockOutlined />
+      </StyledAvatar>
+      <Heading>{t('button.login')}</Heading>
+    </Box>
+  );
+};
+
+export default LoginDialogHeader;
+
+const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
+  margin: theme?.spacing(1),
+  backgroundColor:
+    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  color: theme?.palette.white,
+}));
+
+const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
+  position: 'absolute',
+  right: theme?.spacing() / 2,
+  top: theme?.spacing() / 2,
+  color: theme?.palette.grey[500],
+}));

package/src/components/LoginDialog/index.ts

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

package/src/components/Logo/Logo.test.tsx

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

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+import React from 'react';
+
+import { Theme, useConfig } from '../../';
+
+const blackAndWithLogo = require('./img/logo-black-and-white.svg');
+const defaultLogo = require('./img/logo.svg');
+
+const sizes = {
+  'x-small': '30px',
+  small: '40px',
+  big: '90px',
+};
+
+const logos = {
+  light: defaultLogo,
+  dark: blackAndWithLogo,
+};
+
+interface Props {
+  size?: keyof typeof sizes;
+  onClick?: () => void;
+  className?: string;
+  isDefault?: boolean;
+}
+
+const Logo: React.FC<Props> = ({ size, onClick, className, isDefault = false }) => {
+  const { configOptions } = useConfig();
+  if (!isDefault && configOptions?.logo) {
+    return (
+      <ImageLogo className={className} onClick={onClick}>
+        <img alt="logo" height="40px" src={configOptions.logo} />
+      </ImageLogo>
+    );
+  }
+  return <StyledLogo className={className} onClick={onClick} size={size} />;
+};
+
+export default Logo;
+
+const ImageLogo = styled('div')({
+  fontSize: 0,
+});
+
+const StyledLogo = styled('div')<Props & { theme?: Theme }>(({ size = 'small', theme }) => ({
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  boxSizing: 'border-box',
+  backgroundPosition: 'center',
+  backgroundSize: 'contain',
+  backgroundImage: `url(${logos[theme?.palette.mode]})`,
+  backgroundRepeat: ' no-repeat',
+  width: sizes[size],
+  height: sizes[size],
+}));

package/src/components/Logo/img/logo-black-and-white.svg

@@ -0,0 +1 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-19.8%" y="-11.7%" width="139.6%" height="140.4%" filterUnits="objectBoundingBox" id="a"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><filter x="-33.9%" y="-50%" width="167.9%" height="272.7%" filterUnits="objectBoundingBox" id="c"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><path id="b" d="M48 16.729L32.672 47h-8.874L0 0h15.328l12.907 25.492 4.437-8.763H48z"/><path d="M35.2 11H28V8.643h8.4l1.2-2.357H32V3.929h6.8l.8-1.572H36V0h20l-5.6 11H35.2z" id="d"/></defs><g fill="none" fill-rule="evenodd"><rect fill="#000" width="100" height="100" rx="37"/><g transform="translate(22 30)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill-opacity=".6" fill="#FFF" xlink:href="#b"/></g><g transform="translate(22 30)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><use fill="#FFF" xlink:href="#d"/></g><path fill="#FFF" d="M54.785 77H45.88L22 30h15.38L58 70.718z"/></g></svg>

package/src/components/Logo/img/logo.svg

@@ -0,0 +1 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="verdaccio"><Title>Verdaccio</Title><defs><path id="b" d="M48 17.6L32.8 48H24L.4.8h15.2l12.8 25.6 4.4-8.8H48z"/><filter x="-20%" y="-11.7%" width="139.9%" height="140.3%" filterUnits="objectBoundingBox" id="a"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><path id="d" d="M50.8 12H35.6L41.2.8h15.2L50.8 12z"/><filter x="-45.7%" y="-49.1%" width="191.3%" height="269.6%" filterUnits="objectBoundingBox" id="c"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><rect fill="#F7F8F6" width="100" height="100" rx="37"/><g transform="translate(22 29)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><path stroke="#405236" stroke-width="2.4" d="M46.058 18.8H33.542L28.4 29.083 14.858 2H2.342l22.4 44.8h7.316l14-28z" stroke-linejoin="square" fill="#405236"/></g><g transform="translate(22 29)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><path stroke="#CD4000" stroke-width="2.4" d="M50.058 10.8l4.4-8.8H41.942l-4.4 8.8h12.516z" stroke-linejoin="square" fill="#CD4000"/></g><path d="M54.06 75.8l2.575-5.112L36.857 31H24.342l22.4 44.8h7.319z" stroke="#405236" stroke-width="2.4" fill="#4A5E3F"/><path d="M59.6 31h15.221M55.6 35h15.221M51.6 39.8h15.221" stroke="#CD4000" stroke-width="2.4" stroke-linecap="square"/></g></svg>

package/src/components/Logo/index.ts

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

package/src/components/MenuItem/MenuItem.tsx

@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+import { default as MaterialUIMenuItem, MenuItemProps } from '@mui/material/MenuItem';
+import React, { forwardRef } from 'react';
+
+type HTMLElementTagName = keyof HTMLElementTagNameMap;
+type MenuItemRef = HTMLElementTagNameMap[HTMLElementTagName];
+
+interface Props extends Omit<MenuItemProps, 'component'> {
+  component?: HTMLElementTagName;
+}
+
+const MenuItem = forwardRef<MenuItemRef, Props>(function MenuItem(props, ref) {
+  // it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971
+  // @ts-ignore Type Types of property 'button' are incompatible.
+  return <StyledMaterialUIMenuItem {...props} ref={ref as any} />;
+});
+
+MenuItem.defaultProps = {
+  component: 'li',
+};
+
+export default MenuItem;
+const StyledMaterialUIMenuItem = styled(MaterialUIMenuItem)({
+  outline: 'none',
+});

package/src/components/MenuItem/index.ts

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

package/src/components/NoItems/NoItems.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { default as NoItems } from '.';
+
+export default {
+  title: 'Components/Detail/No Items',
+};
+
+export const NoItemsText: any = () => {
+  return <NoItems text="no items" />;
+};

package/src/components/NoItems/NoItems.tsx

@@ -0,0 +1,15 @@
+import Alert from '@mui/material/Alert';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+interface Props {
+  text: string;
+}
+
+const NoItems: React.FC<Props> = ({ text, ...props }) => (
+  <Alert severity="info">
+    <Typography {...props}>{text}</Typography>
+  </Alert>
+);
+
+export default NoItems;

package/src/components/NoItems/Noitems.test.tsx

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

package/src/components/NoItems/index.ts

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

package/src/components/NotFound/NotFound.tsx

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+
+import { Theme } from '../../';
+import Heading from '../Heading';
+// @ts-ignore
+import PackageImg from './img/package.svg';
+
+const NotFound: React.FC = () => {
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  const handleGoHome = useCallback(() => {
+    history.push('/');
+  }, [history]);
+
+  return (
+    <Box
+      alignItems="center"
+      data-testid="404"
+      display="flex"
+      flexDirection="column"
+      flexGrow={1}
+      justifyContent="center"
+      p={2}
+    >
+      <EmptyPackage alt={t('error.404.page-not-found')} src={PackageImg} />
+      <StyledHeading className="not-found-text" variant="h4">
+        {t('error.404.sorry-we-could-not-find-it')}
+      </StyledHeading>
+      <Button data-testid="not-found-go-to-home-button" onClick={handleGoHome} variant="contained">
+        {t('button.go-to-the-home-page')}
+      </Button>
+    </Box>
+  );
+};
+
+export default NotFound;
+
+const EmptyPackage = styled('img')({
+  width: '150px',
+  margin: '0 auto',
+});
+
+const StyledHeading = styled(Heading)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  marginBottom: 16,
+}));

package/src/components/NotFound/Notfound.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { fireEvent, render } from '../../test/test-react-testing-library';
+import NotFound from './NotFound';
+
+const mockHistory = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: mockHistory,
+  }),
+}));
+
+describe('<NotFound /> component', () => {
+  test('should load the component in default state', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <NotFound />
+      </MemoryRouter>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('go to Home Page button click', async () => {
+    const { getByTestId } = render(
+      <MemoryRouter>
+        <NotFound />
+      </MemoryRouter>
+    );
+
+    const node = getByTestId('not-found-go-to-home-button');
+    fireEvent.click(node);
+    expect(mockHistory).toHaveBeenCalled();
+  });
+});

package/src/components/NotFound/img/package.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 495.2 495.2"><path fill="#d38c0d" d="M325.6 224.4L495.2 126 325.6 28.4l-168.8 99.2z"/><g fill="#efbb67"><path d="M170.4 224.4l168-97.6-168-98.4L0 126.8z"/><path d="M416 368.4l-168 98.4-168-98.4v-196L248 74l168 98.4z"/></g><path fill="#d38c0d" d="M248 74l168 98.4v196l-168 98.4"/><path fill="#efbb67" d="M326.4 314.8L495.2 218l-169.6-98.4L156 218z"/><path fill="#d38c0d" d="M170.4 316.4l168.8-99.2-168.8-97.6L0 218z"/><path fill="#704a0e" d="M248.8 270.8L416 172.4 248.8 74 78.4 172.4z"/><path fill="#513307" d="M248.8 270.8L416 172.4 248.8 74"/><path fill="#2d1c05" d="M248.8 270.8l36-21.6-36-20.8-36 20.8z"/><g fill="#0dd396"><path d="M368 379.6l40-23.2v-12.8l-40 23.2zM368 356.4l40-23.2v-12.8l-40 23.2zM368 333.2l40-23.2v-13.6l-40 24z"/></g></svg>

package/src/components/NotFound/index.ts

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

package/src/components/Package/Package.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { store } from '../../';
+import { cleanup, renderWithStore } from '../../test/test-react-testing-library';
+import Package from './Package';
+
+/**
+ * Generates one month back date from current time
+ * @return {object} date object
+ */
+const dateOneMonthAgo = (): Date => new Date(1544377770747);
+
+describe('<Package /> component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('should load the component', () => {
+    const props = {
+      name: 'verdaccio',
+      version: '1.0.0',
+      time: String(dateOneMonthAgo()),
+      license: 'MIT',
+      description: 'Private NPM repository',
+      author: {
+        name: 'Sam',
+      },
+      keywords: ['verdaccio'],
+    };
+
+    const wrapper = renderWithStore(
+      <MemoryRouter>
+        <Package
+          author={props.author}
+          description={props.description}
+          license={props.license}
+          name={props.name}
+          time={props.time}
+          version={props.version}
+        />
+      </MemoryRouter>,
+      store
+    );
+
+    // FUTURE: improve this expectectations
+    expect(wrapper.getByText('verdaccio')).toBeInTheDocument();
+    expect(wrapper.getByText('Private NPM repository')).toBeInTheDocument();
+    expect(wrapper.getByText('package.version')).toBeInTheDocument();
+    expect(wrapper.getByText('MIT')).toBeInTheDocument();
+  });
+
+  test.todo('should load the component without author');
+});

package/src/components/Package/Package.tsx

@@ -0,0 +1,260 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import BugReport from '@mui/icons-material/BugReport';
+import DownloadIcon from '@mui/icons-material/CloudDownload';
+import HomeIcon from '@mui/icons-material/Home';
+import { useTheme } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import ListItem from '@mui/material/ListItem';
+import Tooltip from '@mui/material/Tooltip';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Dispatch, Link, RootState, Theme } from '../../';
+import { FileBinary, Law, Time, Version } from '../../components/Icons';
+import { Author as PackageAuthor, PackageMetaInterface } from '../../types/packageMeta';
+import { url, utils } from '../../utils';
+import Tag from './Tag';
+import {
+  Author,
+  Avatar,
+  Description,
+  Details,
+  GridRightAligned,
+  IconButton,
+  OverviewItem,
+  PackageListItemText,
+  PackageTitle,
+  Published,
+  TagContainer,
+  Wrapper,
+  WrapperLink,
+} from './styles';
+
+interface Bugs {
+  url: string;
+}
+interface Dist {
+  unpackedSize: number;
+  tarball: string;
+}
+
+export interface PackageInterface {
+  name: string;
+  version: string;
+  time?: number | string;
+  author: PackageAuthor;
+  description?: string;
+  keywords?: string[];
+  license?: PackageMetaInterface['latest']['license'];
+  homepage?: string;
+  bugs?: Bugs;
+  dist?: Dist;
+  showDownload?: boolean;
+}
+
+const Package: React.FC<PackageInterface> = ({
+  author: { name: authorName, avatar: authorAvatar },
+  bugs,
+  description,
+  dist,
+  homepage,
+  keywords = [],
+  license,
+  name: packageName,
+  time,
+  showDownload = true,
+  version,
+}) => {
+  const config = useSelector((state: RootState) => state.configuration.config);
+  const dispatch = useDispatch<Dispatch>();
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const handleDownload = useCallback(
+    async (tarballDist: string) => {
+      // FIXME: check, the dist might be different thant npmjs
+      const link = tarballDist.replace(`https://registry.npmjs.org/`, config.base);
+      dispatch.download.getTarball({ link });
+    },
+    [dispatch, config]
+  );
+
+  const renderVersionInfo = (): React.ReactNode =>
+    version && (
+      <OverviewItem>
+        <StyledVersion />
+        {t('package.version', { version })}
+      </OverviewItem>
+    );
+
+  const renderAuthorInfo = (): React.ReactNode => {
+    const name = utils.getAuthorName(authorName);
+    return (
+      <Author>
+        <Avatar alt={name} src={authorAvatar} />
+        <Details>
+          <div
+            style={{
+              fontSize: '12px',
+              fontWeight: theme?.fontWeight.semiBold,
+              color:
+                theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+            }}
+          >
+            {name}
+          </div>
+        </Details>
+      </Author>
+    );
+  };
+
+  const renderFileSize = (): React.ReactNode =>
+    dist?.unpackedSize && (
+      <OverviewItem>
+        <StyledFileBinary />
+        {utils.fileSizeSI(dist.unpackedSize)}
+      </OverviewItem>
+    );
+
+  const renderLicenseInfo = (): React.ReactNode =>
+    license && (
+      <OverviewItem>
+        <StyledLaw />
+        {license as string}
+      </OverviewItem>
+    );
+
+  const renderPublishedInfo = (): React.ReactNode =>
+    time && (
+      <OverviewItem>
+        <StyledTime />
+        <Published>{t('package.published-on', { time: utils.formatDate(time) })}</Published>
+        {utils.formatDateDistance(time)}
+      </OverviewItem>
+    );
+
+  const renderHomePageLink = (): React.ReactNode =>
+    homepage &&
+    url.isURL(homepage) && (
+      <Link external={true} to={homepage}>
+        <Tooltip aria-label={t('package.homepage')} title={t('package.visit-home-page')}>
+          <IconButton aria-label={t('package.homepage')} size="large">
+            <HomeIcon />
+          </IconButton>
+        </Tooltip>
+      </Link>
+    );
+
+  const renderBugsLink = (): React.ReactNode =>
+    bugs?.url &&
+    url.isURL(bugs.url) && (
+      <Link external={true} to={bugs.url}>
+        <Tooltip aria-label={t('package.bugs')} title={t('package.open-an-issue')}>
+          <IconButton aria-label={t('package.bugs')} size="large">
+            <BugReport />
+          </IconButton>
+        </Tooltip>
+      </Link>
+    );
+
+  const renderDownloadLink = (): React.ReactNode =>
+    dist?.tarball &&
+    url.isURL(dist.tarball) && (
+      <Link
+        onClick={() => {
+          handleDownload(dist.tarball);
+        }}
+        to="#"
+      >
+        <Tooltip
+          aria-label={t('package.download', { what: t('package.the-tar-file') })}
+          title={t('package.tarball')}
+        >
+          <IconButton aria-label={t('package.download')} size="large">
+            <DownloadIcon />
+          </IconButton>
+        </Tooltip>
+      </Link>
+    );
+
+  const renderPrimaryComponent = (): React.ReactNode => {
+    return (
+      <Grid container={true} item={true} xs={12}>
+        <Grid item={true} xs={11}>
+          <WrapperLink to={`/-/web/detail/${packageName}`}>
+            <PackageTitle className="package-title" data-testid="package-title">
+              {packageName}
+            </PackageTitle>
+          </WrapperLink>
+        </Grid>
+        <GridRightAligned
+          alignItems="center"
+          container={true}
+          item={true}
+          justify="flex-end"
+          xs={true}
+        >
+          {renderHomePageLink()}
+          {renderBugsLink()}
+          {showDownload && renderDownloadLink()}
+        </GridRightAligned>
+      </Grid>
+    );
+  };
+
+  const renderSecondaryComponent = (): React.ReactNode => {
+    const tags = keywords.sort().map((keyword, index) => <Tag key={index}>{keyword}</Tag>);
+    return (
+      <>
+        <Description>{description}</Description>
+        {tags.length > 0 && <TagContainer>{tags}</TagContainer>}
+      </>
+    );
+  };
+
+  const renderPackageListItemText = (): React.ReactNode => (
+    <PackageListItemText
+      className="package-link"
+      primary={renderPrimaryComponent()}
+      secondary={renderSecondaryComponent()}
+    />
+  );
+
+  return (
+    <Wrapper className={'package'} data-testid="package-item-list">
+      <ListItem alignItems={'flex-start'}>{renderPackageListItemText()}</ListItem>
+      <ListItem alignItems={'flex-start'}>
+        {renderAuthorInfo()}
+        {renderVersionInfo()}
+        {renderPublishedInfo()}
+        {renderFileSize()}
+        {renderLicenseInfo()}
+      </ListItem>
+    </Wrapper>
+  );
+};
+
+export default Package;
+
+const iconStyle = ({ theme }: { theme: Theme }) => css`
+  margin: 2px 10px 0 0;
+  fill: ${theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white};
+`;
+
+const StyledVersion = styled(Version)`
+  ${iconStyle};
+`;
+
+const StyledFileBinary = styled(FileBinary)`
+  ${iconStyle};
+`;
+
+const StyledLaw = styled(Law)`
+  ${iconStyle};
+`;
+
+const StyledTime = styled(Time)`
+  ${iconStyle};
+`;

package/src/components/Package/Tag/Tag.test.tsx

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

package/src/components/Package/Tag/Tag.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+
+import { Wrapper } from './styles';
+
+interface Props {
+  children: ReactNode;
+}
+
+const Tag: React.FC<Props> = ({ children }) => <Wrapper>{children}</Wrapper>;
+
+export default Tag;

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

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

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';