@verdaccio/ui-theme 3.1.0 → 6.0.0-6-next.11

package/src/App/AppRoute.tsx

@@ -0,0 +1,63 @@
+import { createBrowserHistory } from 'history';
+import React from 'react';
+import { Route as ReactRouterDomRoute, Switch, Router } from 'react-router-dom';
+
+import loadable from './utils/loadable';
+
+const NotFound = loadable(
+  () => import(/* webpackChunkName: "NotFound" */ 'verdaccio-ui/components/NotFound')
+);
+const VersionContextProvider = loadable(
+  () => import(/* webpackChunkName: "Provider" */ '../pages/Version/VersionContextProvider')
+);
+const VersionPage = loadable(() => import(/* webpackChunkName: "Version" */ '../pages/Version'));
+const HomePage = loadable(() => import(/* webpackChunkName: "Home" */ '../pages/home'));
+
+enum Route {
+  ROOT = '/',
+  SCOPE_PACKAGE = '/-/web/detail/@:scope/:package',
+  SCOPE_PACKAGE_VERSION = '/-/web/detail/@:scope/:package/v/:version',
+  PACKAGE = '/-/web/detail/:package',
+  PACKAGE_VERSION = '/-/web/detail/:package/v/:version',
+}
+
+export const history = createBrowserHistory({
+  basename: window?.__VERDACCIO_BASENAME_UI_OPTIONS?.url_prefix,
+});
+
+const AppRoute: React.FC = () => {
+  return (
+    <Router history={history}>
+      <Switch>
+        <ReactRouterDomRoute exact={true} path={Route.ROOT}>
+          <HomePage />
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute>
+          <NotFound />
+        </ReactRouterDomRoute>
+      </Switch>
+    </Router>
+  );
+};
+
+export default AppRoute;

package/src/App/Footer/Footer.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { render } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import Footer from './Footer';
+
+describe('<Footer /> component', () => {
+  beforeAll(() => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.version = 'v.1.0.0';
+  });
+
+  afterAll(() => {
+    delete window.__VERDACCIO_BASENAME_UI_OPTIONS.version;
+  });
+
+  test('should load the initial state of Footer component', () => {
+    const { container } = render(<Footer />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/App/Footer/Footer.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable react/jsx-max-depth */
+/* eslint-disable react/jsx-pascal-case */
+import styled from '@emotion/styled';
+import FlagsIcon from 'country-flag-icons/react/3x2';
+import React from 'react';
+import { useTranslation, Trans } from 'react-i18next';
+
+import { Earth } from 'verdaccio-ui/components/Icons';
+import Logo from 'verdaccio-ui/components/Logo';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+import { useConfig } from 'verdaccio-ui/providers/config';
+import { goToVerdaccioWebsite } from 'verdaccio-ui/utils/windows';
+
+import { Wrapper, Left, Right, Love, Inner } from './styles';
+
+/* eslint-disable react/jsx-key */
+const Footer = () => {
+  const { t } = useTranslation();
+  const { configOptions } = useConfig();
+  return (
+    <Wrapper>
+      <Inner>
+        <Left>
+          <Trans components={[<Love />]} i18nKey="footer.made-with-love-on" />
+          <ToolTip>
+            <StyledEarth />
+            <Flags>
+              <Icon>
+                <FlagsIcon.ES />
+              </Icon>
+              <Icon>
+                <FlagsIcon.NI />
+              </Icon>
+              <Icon>
+                <FlagsIcon.IN />
+              </Icon>
+              <Icon>
+                <FlagsIcon.BR />
+              </Icon>
+              <Icon>
+                <FlagsIcon.CN />
+              </Icon>
+              <Icon>
+                <FlagsIcon.AU />
+              </Icon>
+              <Icon>
+                <FlagsIcon.DE />
+              </Icon>
+              <Icon>
+                <FlagsIcon.TW />
+              </Icon>
+            </Flags>
+          </ToolTip>
+        </Left>
+        <Right>
+          {configOptions?.version && (
+            <>
+              {t('footer.powered-by')}
+              <Logo onClick={goToVerdaccioWebsite} size="x-small" />
+              {`/ ${configOptions.version}`}
+            </>
+          )}
+        </Right>
+      </Inner>
+    </Wrapper>
+  );
+};
+
+export default Footer;
+
+const StyledEarth = styled(Earth)<{ theme?: Theme }>(({ theme }) => ({
+  margin: theme.spacing(0, 1),
+}));
+
+const Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  display: 'inline-grid',
+  gridTemplateColumns: 'repeat(8, max-content)',
+  gridGap: theme.spacing(0, 1),
+  position: 'absolute',
+  background: theme?.palette.greyAthens,
+  padding: '1px 4px',
+  borderRadius: 3,
+  height: 20,
+  alignItems: 'center',
+  visibility: 'hidden',
+  top: -2,
+  ':before': {
+    content: "''",
+    position: 'absolute',
+    top: '29%',
+    left: -4,
+    marginLeft: -5,
+    border: '5px solid',
+    borderColor: `${theme?.palette.greyAthens} transparent transparent transparent`,
+    transform: 'rotate(90deg)',
+  },
+}));
+
+const Icon = styled('div')({
+  width: '10px',
+});
+
+const ToolTip = styled('span')({
+  position: 'relative',
+  height: '18px',
+  ':hover': {
+    [`${Flags}`]: {
+      visibility: 'visible',
+    },
+  },
+});

package/src/App/Footer/__snapshots__/Footer.test.tsx.snap

@@ -0,0 +1,456 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Footer /> component should load the initial state of Footer component 1`] = `
+.emotion-0 {
+  background: #f9f9f9;
+  border-top: 1px solid #e3e3e3;
+  color: #999999;
+  font-size: 14px;
+  padding: 20px;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+@media (min-width:768px) {
+  .emotion-2 {
+    min-width: 400px;
+    max-width: 800px;
+    margin: auto;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media (min-width:1024px) {
+  .emotion-2 {
+    max-width: 1240px;
+  }
+}
+
+.emotion-4 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: none;
+}
+
+@media (min-width:768px) {
+  .emotion-4 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
+.emotion-6 {
+  color: #e25555;
+  padding: 0 5px;
+}
+
+.emotion-8 {
+  position: relative;
+  height: 18px;
+}
+
+.emotion-8:hover .emotion-14 {
+  visibility: visible;
+}
+
+.emotion-11 {
+  width: 18px;
+  height: 18px;
+  margin: 0px 8px;
+}
+
+.emotion-13 {
+  display: inline-grid;
+  grid-template-columns: repeat(8,max-content);
+  grid-gap: 0px 8px;
+  position: absolute;
+  background: #d3dddd;
+  padding: 1px 4px;
+  border-radius: 3px;
+  height: 20px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  visibility: hidden;
+  top: -2px;
+}
+
+.emotion-13:before {
+  content: '';
+  position: absolute;
+  top: 29%;
+  left: -4px;
+  margin-left: -5px;
+  border: 5px solid;
+  border-color: #d3dddd transparent transparent transparent;
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.emotion-15 {
+  width: 10px;
+}
+
+.emotion-31 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+@media (min-width:768px) {
+  .emotion-31 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
+.emotion-33 {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  background-position: center;
+  background-size: contain;
+  background-image: url([object Object]);
+  background-repeat: no-repeat;
+  width: 30px;
+  height: 30px;
+}
+
+<div
+  class="emotion-0 emotion-1"
+>
+  <div
+    class="emotion-2 emotion-3"
+  >
+    <div
+      class="emotion-4 emotion-5"
+    >
+      Made with 
+      <span
+        class="emotion-6 emotion-7"
+      >
+        ♥
+      </span>
+       on
+      <span
+        class="emotion-8 emotion-9"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root emotion-10 emotion-11 emotion-12"
+          focusable="false"
+          viewBox="0 0 45 45"
+        >
+          <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
+            clip-path="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
+            clip-path="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>
+        </svg>
+        <span
+          class="emotion-13 emotion-14"
+        >
+          <div
+            class="emotion-15 emotion-16"
+          >
+            <svg
+              viewBox="0 85.333 512 341.333"
+            >
+              <path
+                d="M0 85.331h512v341.337H0z"
+                fill="#FFDA44"
+              />
+              <path
+                d="M0 85.331h512v113.775H0zm0 227.551h512v113.775H0z"
+                fill="#D80027"
+              />
+            </svg>
+          </div>
+          <div
+            class="emotion-15 emotion-16"
+          >
+            <svg
+              viewBox="0 85.333 512 341.333"
+            >
+              <path
+                d="M0 85.337h512v341.326H0z"
+                fill="#FFF"
+              />
+              <path
+                d="M0 85.337h512v113.775H0zm0 227.551h512v113.775H0z"
+                fill="#338AF3"
+              />
+              <path
+                d="M256 214.447c-22.949 0-41.553 18.603-41.553 41.553S233.05 297.553 256 297.553c22.949 0 41.553-18.603 41.553-41.553S278.949 214.447 256 214.447zm0 65.298c-13.114 0-23.745-10.631-23.745-23.745s10.631-23.745 23.745-23.745 23.745 10.631 23.745 23.745-10.631 23.745-23.745 23.745z"
+                fill="#FFDA44"
+              />
+              <path
+                d="M276.563 261.936L256 256l-20.563 5.936-6.855 11.873h54.836z"
+                fill="#0052B4"
+              />
+              <path
+                d="M256 226.32l-13.709 23.744L256 256l13.709-5.936z"
+                fill="#338AF3"
+              />
+              <path
+                d="M235.437 261.936h41.126l-6.854-11.872h-27.418z"
+                fill="#6DA544"
+              />
+            </svg>
+          </div>
+          <div
+            class="emotion-15 emotion-16"
+          >
+            <svg
+              viewBox="0 0 513 342"
+            >
+              <path
+                d="M17.3 0h478.4v342H17.3V0z"
+                fill="#181A93"
+              />
+              <path
+                d="M0 0h513v114H0V0z"
+                fill="#FFA44A"
+              />
+              <path
+                d="M0 228h513v114H0V228z"
+                fill="#1A9F0B"
+              />
+              <path
+                d="M0 114h513v114H0V114z"
+                fill="#FFF"
+              />
+              <circle
+                cx="256.5"
+                cy="171"
+                fill="#FFF"
+                r="34.2"
+              />
+              <path
+                d="M256.5 216.6c-25.1 0-45.6-20.5-45.6-45.6s20.5-45.6 45.6-45.6 45.6 20.5 45.6 45.6-20.5 45.6-45.6 45.6zm0-11.4c18.2 0 34.2-16 34.2-34.2s-15.9-34.2-34.2-34.2-34.2 16-34.2 34.2 16 34.2 34.2 34.2z"
+                fill="#181A93"
+              />
+              <circle
+                cx="256.5"
+                cy="171"
+                fill="#181A93"
+                r="22.8"
+              />
+            </svg>
+          </div>
+          <div
+            class="emotion-15 emotion-16"
+          >
+            <svg
+              viewBox="0 0 513 342"
+            >
+              <path
+                d="M0 0h513v342H0z"
+                fill="#009b3a"
+              />
+              <path
+                d="M256.5 19.3l204.9 151.4L256.5 322 50.6 170.7z"
+                fill="#fedf00"
+              />
+              <circle
+                cx="256.5"
+                cy="171"
+                fill="#FFF"
+                r="80.4"
+              />
+              <path
+                d="M215.9 165.7c-13.9 0-27.4 2.1-40.1 6 .6 43.9 36.3 79.3 80.3 79.3 27.2 0 51.3-13.6 65.8-34.3-24.9-31-63.2-51-106-51zm119 20.3c.9-5 1.5-10.1 1.5-15.4 0-44.4-36-80.4-80.4-80.4-33.1 0-61.5 20.1-73.9 48.6 10.9-2.2 22.1-3.4 33.6-3.4 46.8.1 89 19.5 119.2 50.6z"
+                fill="#002776"
+              />
+            </svg>
+          </div>
+          <div
+            class="emotion-15 emotion-16"
+          >
+            <svg
+              viewBox="0 0 513 342"
+            >
+              <path
+                d="M0 0h513v342H0z"
+                fill="#D80027"
+              />
+              <path
+                d="M226.8 239.2l-9.7-15.6-17.9 4.4 11.9-14.1-9.7-15.6 17.1 6.9 11.8-14.1-1.3 18.4 17.1 6.9-17.9 4.4zM290.6 82l-10.1 15.4 11.6 14.3-17.7-4.8-10.1 15.5-1-18.4-17.7-4.8 17.2-6.6-1-18.4 11.6 14.3zm-54.4-56.6l-2 18.3 16.8 7.6-18 3.8-2 18.3-9.2-16-17.9 3.8 12.3-13.7-9.2-15.9 16.8 7.5zm56.6 136.4l-14.9 10.9 5.8 17.5-14.9-10.8-14.9 11 5.6-17.6-14.9-10.7 18.4-.1 5.6-17.6 5.8 17.5zM115 46.3l17.3 53.5h56.2l-45.4 32.9 17.3 53.5-45.4-33-45.5 33 17.4-53.5-45.5-32.9h56.3z"
+                fill="#FFDA44"
+              />
+            </svg>
+          </div>
+          <div
+            class="emotion-15 emotion-16"
+          >
+            <svg
+              viewBox="0 0 513 342"
+            >
+              <path
+                d="M0 0h513v342H0z"
+                fill="#10338c"
+              />
+              <g
+                fill="#FFF"
+              >
+                <path
+                  d="M222.2 170.7c.3-.3.5-.6.8-.9-.2.3-.5.6-.8.9zM188 212.6l11 22.9 24.7-5.7-11 22.8 19.9 15.8-24.8 5.6.1 25.4-19.9-15.9-19.8 15.9.1-25.4-24.8-5.6 19.9-15.8-11.1-22.8 24.8 5.7zm197.9 28.5l5.2 10.9 11.8-2.7-5.3 10.9 9.5 7.5-11.8 2.6v12.2l-9.4-7.6-9.5 7.6.1-12.2-11.8-2.6 9.5-7.5-5.3-10.9 11.8 2.7zm-48.6-116l5.2 10.9 11.8-2.7-5.3 10.9 9.5 7.5-11.8 2.7v12.1l-9.4-7.6-9.5 7.6.1-12.1-11.9-2.7 9.5-7.5-5.3-10.9L332 136zm48.6-66.2l5.2 10.9 11.8-2.7-5.3 10.9 9.5 7.5-11.8 2.7v12.1l-9.4-7.6-9.5 7.6.1-12.1-11.8-2.7 9.5-7.5-5.3-10.9 11.8 2.7zm42.5 49.7l5.2 10.9 11.8-2.7-5.3 10.9 9.5 7.5-11.8 2.6V150l-9.4-7.6-9.5 7.6v-12.2l-11.8-2.6 9.5-7.5-5.3-10.9 11.8 2.7zM398 166.5l4.1 12.7h13.3l-10.8 7.8 4.2 12.7-10.8-7.9-10.8 7.9 4.1-12.7-10.7-7.8h13.3z"
+                />
+                <path
+                  d="M254.8 0v30.6l-45.1 25.1h45.1V115h-59.1l59.1 32.8v22.9h-26.7l-73.5-40.9v40.9H99v-48.6l-87.4 48.6H-1.2v-30.6L44 115H-1.2V55.7h59.1L-1.2 22.8V0h26.7L99 40.8V0h55.6v48.6L242.1 0z"
+                />
+              </g>
+              <path
+                d="M142.8 0h-32v69.3h-112v32h112v69.4h32v-69.4h112v-32h-112z"
+                fill="#D80027"
+              />
+              <path
+                d="M154.6 115l100.2 55.7v-15.8L183 115z"
+                fill="#0052B4"
+              />
+              <path
+                d="M154.6 115l100.2 55.7v-15.8L183 115z"
+                fill="#FFF"
+              />
+              <path
+                d="M154.6 115l100.2 55.7v-15.8L183 115zm-83.9 0l-71.9 39.9v15.8L99 115z"
+                fill="#D80027"
+              />
+              <path
+                d="M99 55.7L-1.2 0v15.7l71.9 40z"
+                fill="#0052B4"
+              />
+              <path
+                d="M99 55.7L-1.2 0v15.7l71.9 40z"
+                fill="#FFF"
+              />
+              <path
+                d="M99 55.7L-1.2 0v15.7l71.9 40zm84 0l71.8-40V0L154.6 55.7z"
+                fill="#D80027"
+              />
+            </svg>
+          </div>
+          <div
+            class="emotion-15 emotion-16"
+          >
+            <svg
+              viewBox="0 85.333 512 341.333"
+            >
+              <path
+                d="M0 85.331h512v341.337H0z"
+                fill="#D80027"
+              />
+              <path
+                d="M0 85.331h512v113.775H0z"
+              />
+              <path
+                d="M0 312.882h512v113.775H0z"
+                fill="#FFDA44"
+              />
+            </svg>
+          </div>
+          <div
+            class="emotion-15 emotion-16"
+          >
+            <svg
+              viewBox="0 85.333 512 341.333"
+            >
+              <path
+                d="M0 85.337h512v341.326H0z"
+                fill="#D80027"
+              />
+              <path
+                d="M0 85.337h256V256H0z"
+                fill="#0052B4"
+              />
+              <path
+                d="M186.435 170.669L162.558 181.9l12.714 23.125-25.927-4.961-3.286 26.192L128 206.993l-18.06 19.263-3.285-26.192-25.927 4.96 12.714-23.125-23.877-11.23 23.877-11.231-12.714-23.125 25.927 4.96 3.286-26.192L128 134.344l18.06-19.263 3.285 26.192 25.928-4.96-12.715 23.125z"
+                fill="#FFF"
+              />
+              <circle
+                cx="128"
+                cy="170.674"
+                fill="#0052B4"
+                r="29.006"
+              />
+              <path
+                d="M128 190.06c-10.692 0-19.391-8.7-19.391-19.391 0-10.692 8.7-19.391 19.391-19.391 10.692 0 19.391 8.7 19.391 19.391 0 10.691-8.699 19.391-19.391 19.391z"
+                fill="#FFF"
+              />
+            </svg>
+          </div>
+        </span>
+      </span>
+    </div>
+    <div
+      class="emotion-31 emotion-32"
+    >
+      Powered by
+      <div
+        class="emotion-33 emotion-34"
+      />
+      / v.1.0.0
+    </div>
+  </div>
+</div>
+`;

package/src/App/Footer/index.ts

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

package/src/App/Footer/styles.ts

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+export const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  background: theme?.palette.type === 'light' ? theme?.palette.snow : theme?.palette.cyanBlue,
+  borderTop: `1px solid ${theme?.palette.greyGainsboro}`,
+  color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.nobel01,
+  fontSize: '14px',
+  padding: '20px',
+}));
+
+export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  width: '100%',
+  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
+    minWidth: 400,
+    maxWidth: 800,
+    margin: 'auto',
+    justifyContent: 'space-between',
+  },
+  [`@media (min-width: ${theme?.breakPoints.large}px)`]: {
+    maxWidth: 1240,
+  },
+}));
+
+export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  alignItems: 'center',
+  display: 'none',
+  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
+    display: 'flex',
+  },
+}));
+
+export const Right = styled(Left)({
+  display: 'flex',
+});
+
+export const Love = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.love,
+  padding: '0 5px',
+}));