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

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,56 @@
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { default as FundButton } from '.';
+
+const meta: Meta<typeof FundButton> = {
+  title: 'Components/Sidebar/FundButton',
+  component: FundButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof FundButton>;
+
+export const Primary: Story = {
+  name: 'Default',
+  render: () => {
+    return (
+      <Box sx={{ width: '100%' }}>
+        <Stack spacing={2}>
+          <FundButton
+            packageMeta={{
+              latest: {
+                funding: {
+                  url: 'https://opencollective.com/verdaccio',
+                },
+              },
+            }}
+          />
+        </Stack>
+      </Box>
+    );
+  },
+};
+
+export const Bad: Story = {
+  name: 'Bad Link (empty)',
+  render: () => {
+    return (
+      <Box sx={{ width: '100%' }}>
+        <Stack spacing={2}>
+          <FundButton
+            packageMeta={{
+              latest: {
+                funding: {
+                  url: 'bad_link',
+                },
+              },
+            }}
+          />
+        </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: 'Components/Home/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();
+  });
+});

package/src/components/Help/Help.tsx

@@ -0,0 +1,54 @@
+import Button from '@mui/material/Button';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { CopyClipboard, useConfig } from '../../';
+import { Heading } from '../../';
+import { CardStyled as Card } from './styles';
+
+function renderHeadingClipboardSegments(title: string, text: string): React.ReactNode {
+  return (
+    <Fragment>
+      <Typography variant={'body1'}>{title}</Typography>
+      <CopyClipboard dataTestId="segments" text={text} />
+    </Fragment>
+  );
+}
+
+const Help: React.FC = () => {
+  const { configOptions } = useConfig();
+  const registryUrl = configOptions.base;
+  const { t } = useTranslation();
+
+  return (
+    <Card data-testid="help-card" id="help-card">
+      <CardContent>
+        <Heading gutterBottom={true} id="help-card__title" variant="h5">
+          {t('help.title')}
+        </Heading>
+        <Heading color="textSecondary" gutterBottom={true} sx={{ marginBottom: 1 }}>
+          {t('help.sub-title')}
+        </Heading>
+        {renderHeadingClipboardSegments(
+          t('help.first-step'),
+          t('help.first-step-command-line', { registryUrl })
+        )}
+        {renderHeadingClipboardSegments(
+          t('help.second-step'),
+          t('help.second-step-command-line', { registryUrl })
+        )}
+        <Typography variant="body2">{t('help.third-step')}</Typography>
+      </CardContent>
+      <CardActions>
+        <Button color="primary" href="https://verdaccio.org/docs/cli-registry" size="small">
+          {t('button.learn-more')}
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+export default Help;

package/src/components/Help/index.ts

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

package/src/components/Help/styles.ts

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+import Card from '@mui/material/Card';
+
+export const CardStyled = styled(Card)({
+  maxWidth: 600,
+  margin: 'auto',
+});

package/src/components/Icons/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "max-len": 0
+  }
+}

package/src/components/Icons/DevsIcons/CommonJS.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { Theme } from '@mui/material';
+import React from 'react';
+
+const icon = require('./commonjs.svg');
+
+const ImgIcon = styled.img<{ theme?: Theme }>(({ theme }) => ({
+  marginLeft: theme?.spacing(1),
+}));
+
+export function CommonJS() {
+  return <ImgIcon alt="commonjs" height="20" src={icon} width="20" />;
+}

package/src/components/Icons/DevsIcons/ES6Module.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { Theme } from '@mui/material';
+import React from 'react';
+
+const icon = require('./es6modules.svg');
+
+const ImgIcon = styled.img<{ theme?: Theme }>(({ theme }) => ({
+  marginLeft: theme?.spacing(1),
+}));
+
+export function ES6Modules() {
+  return <ImgIcon alt="es6 modules" height="20" src={icon} width="20" />;
+}

package/src/components/Icons/DevsIcons/Git.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { Theme } from '@mui/material';
+import React from 'react';
+
+const icon = require('./git.svg');
+
+const ImgIcon = styled.img<{ theme?: Theme }>(({ theme }) => ({
+  marginLeft: theme?.spacing(1),
+}));
+
+export function Git() {
+  return <ImgIcon alt="git" height="20" src={icon} width="20" />;
+}

package/src/components/Icons/DevsIcons/NodeJS.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { Theme } from '@mui/material';
+import React from 'react';
+
+const icon = require('./nodejs.svg');
+
+const ImgIcon = styled.img<{ theme?: Theme }>(({ theme }) => ({
+  marginLeft: theme?.spacing(1),
+}));
+
+export function NodeJS() {
+  return <ImgIcon alt="nodejs" height="20" src={icon} width="20" />;
+}

package/src/components/Icons/DevsIcons/TypeScript.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { Theme } from '@mui/material';
+import React from 'react';
+
+const icon = require('./typescript.svg');
+
+const ImgIcon = styled.img<{ theme?: Theme }>(({ theme }) => ({
+  marginLeft: theme?.spacing(1),
+}));
+
+export function TypeScript() {
+  return <ImgIcon alt="typescript" height="20" src={icon} width="20" />;
+}

package/src/components/Icons/DevsIcons/commonjs.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H36V36H0V0Z" fill="#FFD102"/>
+<path d="M9.41113 21.7109H12.2588C12.2119 22.5898 11.9717 23.3662 11.5381 24.04C11.1104 24.708 10.5156 25.2324 9.75391 25.6133C8.99219 25.9883 8.08691 26.1758 7.03809 26.1758C6.2002 26.1758 5.4502 26.0322 4.78809 25.7451C4.12598 25.458 3.56348 25.0479 3.10059 24.5146C2.64355 23.9756 2.29199 23.3281 2.0459 22.5723C1.80566 21.8105 1.68555 20.9521 1.68555 19.9971V19.2148C1.68555 18.2598 1.81152 17.4014 2.06348 16.6396C2.31543 15.8779 2.67578 15.2275 3.14453 14.6885C3.61328 14.1494 4.17578 13.7363 4.83203 13.4492C5.48828 13.1621 6.2207 13.0186 7.0293 13.0186C8.11914 13.0186 9.03906 13.2148 9.78906 13.6074C10.5391 14 11.1191 14.5391 11.5293 15.2246C11.9453 15.9102 12.1943 16.6924 12.2764 17.5713H9.41992C9.39648 17.0732 9.30273 16.6543 9.13867 16.3145C8.97461 15.9688 8.72266 15.708 8.38281 15.5322C8.04297 15.3564 7.5918 15.2686 7.0293 15.2686C6.61914 15.2686 6.25879 15.3447 5.94824 15.4971C5.64355 15.6494 5.38867 15.8867 5.18359 16.209C4.98438 16.5312 4.83496 16.9414 4.73535 17.4395C4.63574 17.9316 4.58594 18.5176 4.58594 19.1973V19.9971C4.58594 20.6709 4.62988 21.2539 4.71777 21.7461C4.80566 22.2383 4.94629 22.6455 5.13965 22.9678C5.33887 23.29 5.59375 23.5303 5.9043 23.6885C6.21484 23.8467 6.59277 23.9258 7.03809 23.9258C7.54785 23.9258 7.97266 23.8467 8.3125 23.6885C8.65234 23.5244 8.91309 23.2783 9.09473 22.9502C9.27637 22.6221 9.38184 22.209 9.41113 21.7109ZM18.9912 22.0273V13.2031H21.8389V22.0273C21.8389 22.8828 21.6455 23.6211 21.2588 24.2422C20.8779 24.8574 20.3594 25.335 19.7031 25.6748C19.0527 26.0088 18.3174 26.1758 17.4971 26.1758C16.6533 26.1758 15.9033 26.0352 15.2471 25.7539C14.5908 25.4668 14.0752 25.0303 13.7002 24.4443C13.3311 23.8525 13.1465 23.0996 13.1465 22.1855H16.0117C16.0117 22.6367 16.0674 22.9941 16.1787 23.2578C16.2959 23.5156 16.4658 23.6973 16.6885 23.8027C16.9111 23.9082 17.1807 23.9609 17.4971 23.9609C17.8018 23.9609 18.0654 23.8877 18.2881 23.7412C18.5107 23.5889 18.6836 23.3691 18.8066 23.082C18.9297 22.7891 18.9912 22.4375 18.9912 22.0273ZM30.5752 22.625C30.5752 22.4082 30.543 22.2148 30.4785 22.0449C30.4141 21.8691 30.2969 21.708 30.127 21.5615C29.957 21.415 29.7168 21.2686 29.4062 21.1221C29.0957 20.9697 28.6885 20.8145 28.1846 20.6562C27.6104 20.4688 27.0625 20.2578 26.541 20.0234C26.0254 19.7832 25.5654 19.5049 25.1611 19.1885C24.7568 18.8721 24.4375 18.5029 24.2031 18.0811C23.9746 17.6592 23.8604 17.167 23.8604 16.6045C23.8604 16.0596 23.9805 15.5674 24.2207 15.1279C24.4609 14.6885 24.7979 14.3135 25.2314 14.0029C25.665 13.6865 26.1748 13.4463 26.7607 13.2822C27.3467 13.1123 27.9912 13.0273 28.6943 13.0273C29.6318 13.0273 30.4551 13.1943 31.1641 13.5283C31.8789 13.8564 32.4355 14.3193 32.834 14.917C33.2324 15.5088 33.4316 16.1973 33.4316 16.9824H30.584C30.584 16.6367 30.5107 16.332 30.3643 16.0684C30.2236 15.7988 30.0068 15.5879 29.7139 15.4355C29.4268 15.2832 29.0664 15.207 28.6328 15.207C28.2109 15.207 27.8564 15.2715 27.5693 15.4004C27.2881 15.5234 27.0742 15.6934 26.9277 15.9102C26.7871 16.127 26.7168 16.3643 26.7168 16.6221C26.7168 16.8271 26.7695 17.0146 26.875 17.1846C26.9863 17.3486 27.1445 17.5039 27.3496 17.6504C27.5605 17.791 27.8184 17.9258 28.123 18.0547C28.4277 18.1836 28.7764 18.3066 29.1689 18.4238C29.8545 18.6406 30.4609 18.8809 30.9883 19.1445C31.5215 19.4082 31.9697 19.707 32.333 20.041C32.6963 20.375 32.9688 20.7529 33.1504 21.1748C33.3379 21.5967 33.4316 22.0742 33.4316 22.6074C33.4316 23.1758 33.3203 23.6797 33.0977 24.1191C32.8809 24.5586 32.5645 24.9336 32.1484 25.2441C31.7383 25.5488 31.2461 25.7803 30.6719 25.9385C30.0977 26.0967 29.4561 26.1758 28.7471 26.1758C28.1025 26.1758 27.4668 26.0938 26.8398 25.9297C26.2129 25.7598 25.6445 25.502 25.1348 25.1562C24.6309 24.8105 24.2266 24.3711 23.9219 23.8379C23.623 23.2988 23.4736 22.6602 23.4736 21.9219H26.3389C26.3389 22.3086 26.3945 22.6367 26.5059 22.9062C26.6172 23.1699 26.7754 23.3838 26.9805 23.5479C27.1914 23.7119 27.4463 23.8291 27.7451 23.8994C28.0439 23.9697 28.3779 24.0049 28.7471 24.0049C29.1748 24.0049 29.5205 23.9463 29.7842 23.8291C30.0537 23.7061 30.2529 23.5391 30.3818 23.3281C30.5107 23.1172 30.5752 22.8828 30.5752 22.625Z" fill="white"/>
+</svg>

package/src/components/Icons/DevsIcons/es6modules.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H36V36H0V0Z" fill="#93C2DB"/>
+<path d="M11.7559 22.7852V25H4.94434V22.7852H11.7559ZM5.91992 12.2031V25H3.05469V12.2031H5.91992ZM10.877 17.3535V19.498H4.94434V17.3535H10.877ZM11.7646 12.2031V14.4268H4.94434V12.2031H11.7646ZM19.7979 21.625C19.7979 21.4082 19.7656 21.2148 19.7012 21.0449C19.6367 20.8691 19.5195 20.708 19.3496 20.5615C19.1797 20.415 18.9395 20.2686 18.6289 20.1221C18.3184 19.9697 17.9111 19.8145 17.4072 19.6562C16.833 19.4688 16.2852 19.2578 15.7637 19.0234C15.248 18.7832 14.7881 18.5049 14.3838 18.1885C13.9795 17.8721 13.6602 17.5029 13.4258 17.0811C13.1973 16.6592 13.083 16.167 13.083 15.6045C13.083 15.0596 13.2031 14.5674 13.4434 14.1279C13.6836 13.6885 14.0205 13.3135 14.4541 13.0029C14.8877 12.6865 15.3975 12.4463 15.9834 12.2822C16.5693 12.1123 17.2139 12.0273 17.917 12.0273C18.8545 12.0273 19.6777 12.1943 20.3867 12.5283C21.1016 12.8564 21.6582 13.3193 22.0566 13.917C22.4551 14.5088 22.6543 15.1973 22.6543 15.9824H19.8066C19.8066 15.6367 19.7334 15.332 19.5869 15.0684C19.4463 14.7988 19.2295 14.5879 18.9365 14.4355C18.6494 14.2832 18.2891 14.207 17.8555 14.207C17.4336 14.207 17.0791 14.2715 16.792 14.4004C16.5107 14.5234 16.2969 14.6934 16.1504 14.9102C16.0098 15.127 15.9395 15.3643 15.9395 15.6221C15.9395 15.8271 15.9922 16.0146 16.0977 16.1846C16.209 16.3486 16.3672 16.5039 16.5723 16.6504C16.7832 16.791 17.041 16.9258 17.3457 17.0547C17.6504 17.1836 17.999 17.3066 18.3916 17.4238C19.0771 17.6406 19.6836 17.8809 20.2109 18.1445C20.7441 18.4082 21.1924 18.707 21.5557 19.041C21.9189 19.375 22.1914 19.7529 22.373 20.1748C22.5605 20.5967 22.6543 21.0742 22.6543 21.6074C22.6543 22.1758 22.543 22.6797 22.3203 23.1191C22.1035 23.5586 21.7871 23.9336 21.3711 24.2441C20.9609 24.5488 20.4688 24.7803 19.8945 24.9385C19.3203 25.0967 18.6787 25.1758 17.9697 25.1758C17.3252 25.1758 16.6895 25.0938 16.0625 24.9297C15.4355 24.7598 14.8672 24.502 14.3574 24.1562C13.8535 23.8105 13.4492 23.3711 13.1445 22.8379C12.8457 22.2988 12.6963 21.6602 12.6963 20.9219H15.5615C15.5615 21.3086 15.6172 21.6367 15.7285 21.9062C15.8398 22.1699 15.998 22.3838 16.2031 22.5479C16.4141 22.7119 16.6689 22.8291 16.9678 22.8994C17.2666 22.9697 17.6006 23.0049 17.9697 23.0049C18.3975 23.0049 18.7432 22.9463 19.0068 22.8291C19.2764 22.7061 19.4756 22.5391 19.6045 22.3281C19.7334 22.1172 19.7979 21.8828 19.7979 21.625ZM30.7227 12.0449H31.1445V14.2246H30.9863C30.3711 14.2246 29.8086 14.3125 29.2988 14.4883C28.7949 14.6641 28.3584 14.9248 27.9893 15.2705C27.6201 15.6104 27.3359 16.0322 27.1367 16.5361C26.9434 17.0342 26.8467 17.6084 26.8467 18.2588V20.4385C26.8467 20.8779 26.8848 21.2617 26.9609 21.5898C27.043 21.9121 27.1602 22.1816 27.3125 22.3984C27.4707 22.6094 27.6611 22.7705 27.8838 22.8818C28.1064 22.9873 28.3584 23.04 28.6396 23.04C28.8916 23.04 29.123 22.9844 29.334 22.873C29.5449 22.7617 29.7266 22.6035 29.8789 22.3984C30.0312 22.1934 30.1484 21.9561 30.2305 21.6865C30.3125 21.4111 30.3535 21.1123 30.3535 20.79C30.3535 20.4502 30.3096 20.1426 30.2217 19.8672C30.1396 19.5859 30.0195 19.3457 29.8613 19.1465C29.709 18.9473 29.5215 18.7949 29.2988 18.6895C29.0762 18.5781 28.8301 18.5225 28.5605 18.5225C28.1738 18.5225 27.8398 18.6104 27.5586 18.7861C27.2773 18.9619 27.0605 19.1875 26.9082 19.4629C26.7559 19.7383 26.6768 20.0195 26.6709 20.3066L25.9414 19.7002C25.9414 19.3018 26.0205 18.9092 26.1787 18.5225C26.3428 18.1299 26.5742 17.7754 26.873 17.459C27.1719 17.1367 27.5381 16.8818 27.9717 16.6943C28.4111 16.501 28.9121 16.4043 29.4746 16.4043C30.0664 16.4043 30.5879 16.5186 31.0391 16.7471C31.4902 16.9697 31.8682 17.2803 32.1729 17.6787C32.4834 18.0771 32.7148 18.543 32.8672 19.0762C33.0254 19.6035 33.1045 20.1689 33.1045 20.7725C33.1045 21.3936 32.9961 21.9736 32.7793 22.5127C32.5684 23.0459 32.2695 23.5117 31.8828 23.9102C31.4961 24.3086 31.0332 24.6191 30.4941 24.8418C29.9609 25.0645 29.3662 25.1758 28.71 25.1758C28.0303 25.1758 27.4092 25.0557 26.8467 24.8154C26.29 24.5752 25.8037 24.2324 25.3877 23.7871C24.9775 23.3359 24.6582 22.7969 24.4297 22.1699C24.207 21.543 24.0957 20.8398 24.0957 20.0605V19.0322C24.0957 17.9658 24.2598 17.0049 24.5879 16.1494C24.9219 15.2939 25.3848 14.5615 25.9766 13.9521C26.5742 13.3369 27.2773 12.8652 28.0859 12.5371C28.8945 12.209 29.7734 12.0449 30.7227 12.0449Z" fill="white"/>
+</svg>

package/src/components/Icons/DevsIcons/git.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="97" height="97">
+  <path fill="#F05133" d="M92.71 44.408 52.591 4.291c-2.31-2.311-6.057-2.311-8.369 0l-8.33 8.332L46.459 23.19c2.456-.83 5.272-.273 7.229 1.685 1.969 1.97 2.521 4.81 1.67 7.275l10.186 10.185c2.465-.85 5.307-.3 7.275 1.671 2.75 2.75 2.75 7.206 0 9.958-2.752 2.751-7.208 2.751-9.961 0-2.068-2.07-2.58-5.11-1.531-7.658l-9.5-9.499v24.997c.67.332 1.303.774 1.861 1.332 2.75 2.75 2.75 7.206 0 9.959-2.75 2.749-7.209 2.749-9.957 0-2.75-2.754-2.75-7.21 0-9.959.68-.679 1.467-1.193 2.307-1.537v-25.23c-.84-.344-1.625-.853-2.307-1.537-2.083-2.082-2.584-5.14-1.516-7.698L31.798 16.715 4.288 44.222c-2.311 2.313-2.311 6.06 0 8.371l40.121 40.118c2.31 2.311 6.056 2.311 8.369 0L92.71 52.779c2.311-2.311 2.311-6.06 0-8.371z"/>
+</svg>

package/src/components/Icons/DevsIcons/index.ts

@@ -0,0 +1,5 @@
+export { TypeScript } from './TypeScript';
+export { CommonJS } from './CommonJS';
+export { ES6Modules } from './ES6Module';
+export { NodeJS } from './NodeJS';
+export { Git } from './Git';

package/src/components/Icons/DevsIcons/nodejs.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="289px" viewBox="0 0 256 289" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M127.999999,288.463771 C124.024844,288.463771 120.314699,287.403728 116.869564,285.548656 L81.6231884,264.612838 C76.32298,261.697724 78.9730854,260.637682 80.5631458,260.107661 C87.7184259,257.72257 89.0434775,257.192547 96.4637688,252.952381 C97.2587979,252.422361 98.3188405,252.687372 99.1138718,253.217392 L126.144927,269.383024 C127.20497,269.913045 128.530021,269.913045 129.325053,269.383024 L235.064182,208.165634 C236.124225,207.635611 236.654245,206.575571 236.654245,205.250519 L236.654245,83.0807467 C236.654245,81.7556929 236.124225,80.6956526 235.064182,80.1656324 L129.325053,19.2132506 C128.26501,18.6832305 126.939959,18.6832305 126.144927,19.2132506 L20.4057954,80.1656324 C19.3457551,80.6956526 18.8157349,82.0207041 18.8157349,83.0807467 L18.8157349,205.250519 C18.8157349,206.31056 19.3457551,207.635611 20.4057954,208.165634 L49.2919247,224.861286 C64.9275364,232.811595 74.7329196,223.536234 74.7329196,214.260871 L74.7329196,93.681159 C74.7329196,92.0910985 76.0579711,90.5010358 77.9130428,90.5010358 L91.4285716,90.5010358 C93.0186343,90.5010358 94.6086948,91.8260873 94.6086948,93.681159 L94.6086948,214.260871 C94.6086948,235.196689 83.2132512,247.387164 63.3374737,247.387164 C57.2422362,247.387164 52.4720502,247.387164 38.9565214,240.761906 L11.1304347,224.861286 C4.24016581,220.886129 5.68434189e-14,213.46584 5.68434189e-14,205.515528 L5.68434189e-14,83.3457557 C5.68434189e-14,75.3954465 4.24016581,67.9751552 11.1304347,64.0000006 L116.869564,2.78260752 C123.494824,-0.927535841 132.505176,-0.927535841 139.130436,2.78260752 L244.869565,64.0000006 C251.759834,67.9751552 256,75.3954465 256,83.3457557 L256,205.515528 C256,213.46584 251.759834,220.886129 244.869565,224.861286 L139.130436,286.078676 C135.685299,287.668739 131.710145,288.463771 127.999999,288.463771 L127.999999,288.463771 Z M160.596274,204.455488 C114.219461,204.455488 104.679089,183.254659 104.679089,165.233955 C104.679089,163.643893 106.004141,162.053832 107.859212,162.053832 L121.639752,162.053832 C123.229813,162.053832 124.554864,163.113872 124.554864,164.703935 C126.674947,178.749484 132.770187,185.639753 160.861283,185.639753 C183.122154,185.639753 192.662526,180.604556 192.662526,168.67909 C192.662526,161.788821 190.012423,156.753624 155.296065,153.308489 C126.409938,150.393375 108.389235,144.033126 108.389235,120.977226 C108.389235,99.5113875 126.409938,86.7908901 156.621119,86.7908901 C190.542443,86.7908901 207.238095,98.4513472 209.358178,123.89234 C209.358178,124.687371 209.093167,125.482403 208.563147,126.277434 C208.033127,126.807454 207.238095,127.337474 206.443064,127.337474 L192.662526,127.337474 C191.337475,127.337474 190.012423,126.277434 189.747412,124.952382 C186.567289,110.376813 178.351966,105.606625 156.621119,105.606625 C132.240165,105.606625 129.325053,114.086957 129.325053,120.447205 C129.325053,128.132506 132.770187,130.5176 165.631471,134.757766 C198.227744,138.997931 213.598344,145.093169 213.598344,167.884058 C213.333333,191.20497 194.252589,204.455488 160.596274,204.455488 L160.596274,204.455488 Z" fill="#539E43"></path>
+    </g>
+</svg>

package/src/components/Icons/DevsIcons/typescript.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H36V36H0V0Z" fill="#1976D2"/>
+<path d="M14.0137 12.2031V25H11.1572V12.2031H14.0137ZM17.9072 12.2031V14.4268H7.34277V12.2031H17.9072ZM23.374 25H20.5615L20.5791 22.7852H23.374C24.0127 22.7852 24.5518 22.6387 24.9912 22.3457C25.4307 22.0469 25.7646 21.6074 25.9932 21.0273C26.2217 20.4414 26.3359 19.7295 26.3359 18.8916V18.3027C26.3359 17.6699 26.2715 17.1133 26.1426 16.6328C26.0137 16.1465 25.8232 15.7393 25.5713 15.4111C25.3193 15.083 25.0059 14.8369 24.6309 14.6729C24.2617 14.5088 23.8369 14.4268 23.3564 14.4268H20.5088V12.2031H23.3564C24.2236 12.2031 25.0146 12.3496 25.7295 12.6426C26.4502 12.9355 27.0713 13.3545 27.5928 13.8994C28.1201 14.4443 28.5273 15.0889 28.8145 15.833C29.1016 16.5771 29.2451 17.4062 29.2451 18.3203V18.8916C29.2451 19.7998 29.1016 20.6289 28.8145 21.3789C28.5273 22.123 28.1201 22.7676 27.5928 23.3125C27.0713 23.8516 26.4531 24.2676 25.7383 24.5605C25.0234 24.8535 24.2354 25 23.374 25ZM22.1875 12.2031V25H19.3223V12.2031H22.1875Z" fill="white"/>
+</svg>

package/src/components/Icons/Earth.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { SvgIcon } from './SvgIcon';
+
+type Props = React.ComponentProps<typeof SvgIcon>;
+
+const Earth = React.forwardRef(function Earth(props: Props, ref: React.Ref<SVGSVGElement>) {
+  return (
+    <SvgIcon viewBox="0 0 45 45" {...props} ref={ref}>
+      <defs>
+        <clipPath id="prefix__a">
+          <path d="M0 36h36V0H0v36z" />
+        </clipPath>
+        <clipPath id="prefix__b">
+          <path d="M18 36C8.059 36 0 27.941 0 18S8.059 0 18 0s18 8.059 18 18-8.059 18-18 18z" />
+        </clipPath>
+      </defs>
+      <g clipPath="url(#prefix__a)" transform="matrix(1.25 0 0 -1.25 0 45)">
+        <path
+          d="M36 18c0-9.941-8.059-18-18-18S0 8.059 0 18s8.059 18 18 18 18-8.059 18-18"
+          fill="#88c9f9"
+        />
+      </g>
+      <g clipPath="url(#prefix__b)" transform="matrix(1.25 0 0 -1.25 0 45)">
+        <path
+          d="M3.627 28.952c-.45 2.93 2.195 4.156 3.607 4.47 1.412.314 2.776.62 2.933-.006.156-.628.311-1.46 1.173-1.148.862.314 3.043.56 4.063 1.342 1.02.783 2.244.787 3.264.473 1.02-.313 3.877-.227 3.25-1.167-.627-.94-1.825-.827-2.45-1.924-.628-1.099.171-1.826 1.033-1.826.865 0 1.71-.135 2.26.727.548.863-.383 2.463.324 2.357.706-.106 1.477-.866 2.03-2.043.547-1.176 1.408-.47 1.723-1.176.313-.705 2.04-2.039 1.177-1.804-.864.236-1.726.392-1.96-.47-.237-.863.388-1.726-.237-1.647-.627.08-.86-.089-1.725-.004-.862.083-1.333.631-2.039-.545-.705-1.175-1.254-1.96-1.567-2.509-.315-.549-.785-.86-.55-1.96.235-1.099-.628-.785-.628.156 0 .94-.548 1.098-1.253.942-.706-.157-1.803-.313-1.724-1.098.077-.784-.315-1.725.313-2.352.627-.629 1.33.076 1.723-.158.393-.237 1.525-.023 1.133-.416-.393-.39-1.76-.88-.976-1.509a4.831 4.831 0 011.893-.907c.313-.08.062.774 1.083 1.166 1.017.392 2.608 1.29 3 .584.391-.705.338-.595 1.75-.75 1.41-.156 1.79-.585 2.417-1.917.626-1.333.446-1.192 1.462-1.58 1.021-.394 1.678-.223.737-1.087-.94-.86-1.65-.814-2.199-1.833-.55-1.017-.153-1.73-1.25-2.75A20.755 20.755 0 0024 4c-.618-.37-2.162-2.07-3.083-2.667-.834-.54-1.083 0-1.083 0s.256 1.667.964 2.372c.704.705 1.105 3.344.87 4.128-.235.783-1.36 1.02-1.75 1.333-.393.312-1.418 1.548-1.418 2.334 0 .784 1.71 2.81 1.71 2.81.218-1.089-1.039.328-1.627.523-.47.157-1.542 1.656-2.459 1.814-.916.16-1.363.7-2.068 1.25-.706.55-2.43 1.332-2.353 2.195.08.862-1.725 1.568-2.038 1.568-.314 0-1.019 0-1.647 1.098-.627 1.098-1.725 2.196-1.41 2.98.312.783.391 1.726.233 2.588-.156.862-1.332 1.176-1.567.941-.235-.236-1.489-1.335-1.647-.315"
+          fill="#5c913b"
+        />
+      </g>
+    </SvgIcon>
+  );
+});
+
+Earth.displayName = 'Earth';
+
+export { Earth };

package/src/components/Icons/FileBinary.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { SvgIcon } from './SvgIcon';
+
+type Props = React.ComponentProps<typeof SvgIcon>;
+
+const FileBinary = React.forwardRef(function FileBinary(
+  props: Props,
+  ref: React.Ref<SVGSVGElement>
+) {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <path d="M8.5 1H1c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V4.5L8.5 1zM11 14H1V2h7l3 3v9zM5 6.98L3.5 8.5 5 10l-.5 1L2 8.5 4.5 6l.5.98zM7.5 6L10 8.5 7.5 11l-.5-.98L8.5 8.5 7 7l.5-1z" />
+    </SvgIcon>
+  );
+});
+
+FileBinary.displayName = 'FileBinary';
+
+export { FileBinary };