Refactor: Icon Component: replace styled components by makestyles (MUI)

package.json

@@ -17,6 +17,7 @@
     "@material-ui/icons": "3.0.2",
     "@material-ui/styles": "3.0.0-alpha.10",
     "@octokit/rest": "16.23.2",
+    "@types/classnames": "2.2.7",
     "@types/lodash": "4.14.123",
     "@types/material-ui": "0.21.6",
     "@types/node": "12.0.0",
@@ -151,5 +152,8 @@
     "type": "opencollective",
     "url": "https://opencollective.com/verdaccio",
     "logo": "https://opencollective.com/verdaccio/logo.txt"
+  },
+  "dependencies": {
+    "classnames": "2.2.6"
   }
 }

src/webui/components/Footer/Footer.tsx

@@ -4,19 +4,20 @@
 
 import React from 'react';
 
-import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';
+import { Wrapper, Left, Right, Flags, Love, Inner, ToolTip } from './styles';
 import { goToVerdaccioWebsite } from '../../utils/windows';
+import Icon from '../Icon';
 
 const renderTooltip = () => (
   <ToolTip>
-    <Earth name="earth" size="md" />
+    <Icon icon="earth" padding="0 10px" size="md" />
     <Flags>
-      <Flag name="spain" size="md" />
-      <Flag name="nicaragua" size="md" />
-      <Flag name="india" size="md" />
-      <Flag name="brazil" size="md" />
-      <Flag name="china" size="md" />
-      <Flag name="austria" size="md" />
+      <Icon icon="spain" padding="0 5px" size="md" />
+      <Icon icon="nicaragua" padding="0 5px" size="md" />
+      <Icon icon="india" padding="0 5px" size="md" />
+      <Icon icon="brazil" padding="0 5px" size="md" />
+      <Icon icon="china" padding="0 5px" size="md" />
+      <Icon icon="austria" padding="0 5px" size="md" />
     </Flags>
   </ToolTip>
 );
@@ -30,7 +31,7 @@ const renderRight = (version = window.VERDACCIO_VERSION) => {
   return (
     <Right>
       {POWERED_LABEL}
-      <Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
+      <Icon icon="verdaccio" padding="0 5px" onClick={goToVerdaccioWebsite} pointer size="md" />
       {`/ ${version}`}
     </Right>
   );

src/webui/components/Footer/styles.ts

@@ -24,20 +24,20 @@ export const Inner = styled('div')`
     justify-content: flex-end;
     width: 100%;
     ${() => {
-      //@ts-ignore
-      return mq.medium(css`
+    //@ts-ignore
+    return mq.medium(css`
         min-width: 400px;
         max-width: 800px;
         margin: auto;
         justify-content: space-between;
       `);
-    }};
+  }};
     ${() => {
-      //@ts-ignore
-      return mq.large(css`
+    //@ts-ignore
+    return mq.large(css`
         max-width: 1240px;
       `);
-    }};
+  }};
   }
 `;
 
@@ -46,11 +46,11 @@ export const Left = styled('div')`
     align-items: center;
     display: none;
     ${() => {
-      //@ts-ignore
-      return mq.medium(css`
+    //@ts-ignore
+    return mq.medium(css`
         display: flex;
       `);
-    }};
+  }};
   }
 `;
 
@@ -67,12 +67,6 @@ export const ToolTip = styled('span')`
   }
 `;
 
-export const Earth = styled(Icon)`
-  && {
-    padding: 0 10px;
-  }
-`;
-
 export const Flags = styled('span')`
   && {
     position: absolute;
@@ -106,11 +100,3 @@ export const Love = styled('span')`
     padding: 0 5px;
   }
 `;
-
-export const Flag = styled(Icon)`
-  && {
-    padding: 0 5px;
-  }
-`;
-
-export const Logo = Flag;

src/webui/components/Icon/Icon.tsx

@@ -3,57 +3,74 @@
  */
 
 import React from 'react';
-import capitalize from 'lodash/capitalize';
-
-import { Svg, Img, ImgWrapper } from './styles';
-import { IProps, IIconsMap } from './types';
-
-import brazil from './img/brazil.svg';
-import china from './img/china.svg';
-import india from './img/india.svg';
-import nicaragua from './img/nicaragua.svg';
-import pakistan from './img/pakistan.svg';
-import austria from './img/austria.svg';
-import spain from './img/spain.svg';
-import earth from './img/earth.svg';
-import verdaccio from './img/verdaccio.svg';
-import filebinary from './img/filebinary.svg';
-import law from './img/law.svg';
-import license from './img/license.svg';
-import time from './img/time.svg';
-import version from './img/version.svg';
-
-export const Icons: IIconsMap = {
-  brazil,
-  spain,
-  china,
-  nicaragua,
-  pakistan,
-  india,
-  austria,
-  earth,
-  verdaccio,
-  filebinary,
-  law,
-  license,
-  time,
-  version,
-};
+import { makeStyles } from '@material-ui/styles'
+
+import getIcon from './get-icon'
+import colors from '../../utils/styles/colors';
 
-const Icon: React.FC<IProps> = ({ className, name, size = 'sm', img = false, pointer = false, ...props }) => {
-  // @ts-ignore
-  const title = capitalize(name);
-  return img ? (
-    <ImgWrapper className={className} pointer={pointer} size={size} title={title} name={name} {...props}>
-      <Img alt={title} src={Icons[name]} />
-    </ImgWrapper>
-  ) : (
-    // @ts-ignore
-    <Svg className={className} pointer={pointer} size={size} {...props}>
-      <title>{title}</title>
-      <use xlinkHref={`${Icons[name]}#${name}`} />
-    </Svg>
-  );
+const icons = {
+  brazil: 'brazil',
+  spain: 'spain',
+  china: 'china',
+  nicaragua: 'nicaragua',
+  pakistan: 'pakistan',
+  india: 'india',
+  austria: 'austria',
+  earth:'earth',
+  verdaccio: 'verdaccio',
+  filebinary: 'filebinary',
+  law: 'law',
+  license: 'license',
+  time: 'time',
+  version: 'version',
 };
 
-export default Icon;
+export type Icons = keyof typeof icons
+
+interface Props  {
+  icon: Icons
+  size?: 'md' | 'sm'
+  className?: string
+  margin?: string
+  padding?: string
+  grey?: boolean
+  pointer?: boolean
+  onClick?: (event: React.PointerEvent<Element> | React.MouseEvent<SVGSVGElement, MouseEvent>) => void
+}
+
+const useStyles = makeStyles({
+  container: {
+    // TODO => There will be a proper Flex component 
+    display: 'inline-flex',
+    alignItems: 'center',
+  },
+  icon: (({ grey, margin, padding, pointer, size }) => ({
+    // TODO => the styles below will be parrt of the theme. 
+    // As soon as it is created we will create proper style helpers and replace these kind of stuff
+    color: grey ? colors.greyLight2 : 'inherit',
+    margin,
+    padding,
+    pointer: pointer ? 'pointer' : 'auto',
+    fontSize: size === 'md' ? 18 : 14
+  }))
+})
+
+const Icon: React.FC<Props> = ({ icon, className, onClick, ...props }) => {
+  const classes = useStyles(props)
+  const Component = getIcon(icon)
+
+  return (
+    <div className={classes.container}>
+      <Component className={classes.icon} fontSize="inherit" onClick={onClick} />
+    </div>
+  )
+}
+
+Icon.defaultProps = {
+  size: 'sm',
+  grey: false,
+  pointer: false
+}
+
+export default Icon
+

src/webui/components/Icon/get-icon.ts

@@ -0,0 +1,53 @@
+
+import Austria from './icons/Austria'
+import Brazil from './icons/Brazil'
+import China from './icons/China'
+import Earth from './icons/Earth'
+import FileBinary from './icons/FileBinary'
+import India from './icons/India'
+import Law from './icons/Law'
+import License from './icons/License'
+import Nigaragua from './icons/Nigaragua'
+import Pakistan from './icons/Pakistan'
+import Spain from './icons/Spain'
+import Time from './icons/Time'
+import Verdaccio from './icons/Verdaccio'
+import Version from './icons/Version'
+
+import { Icons } from './Icon'
+
+
+function getIcon(icon: Icons) {
+    switch (icon) {
+        case 'austria':
+            return Austria
+        case 'brazil':
+            return Brazil
+        case 'china':
+            return China
+        case 'earth':
+            return Earth
+        case 'filebinary':
+            return FileBinary
+        case 'india':
+            return India
+        case 'law':
+            return Law
+        case 'license':
+            return License
+        case 'nicaragua':
+            return Nigaragua
+        case 'pakistan':
+            return Pakistan
+        case 'spain':
+            return Spain
+        case 'time':
+            return Time
+        case 'verdaccio':
+            return Verdaccio
+        case 'version':
+            return Version
+    }
+}
+
+export default getIcon

src/webui/components/Icon/icons/Austria.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import SvgIcon, { SvgIconProps } from '../../SvgIcon'
+
+const Austria: React.FC<SvgIconProps> = props => (
+  <SvgIcon viewBox="0 0 512 512" {...props}>
+    <path
+      d="M473.655 88.276H38.345C17.167 88.276 0 105.443 0 126.621v73.471h512v-73.471c0-21.178-17.167-38.345-38.345-38.345zM0 385.379c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345v-73.471H0v73.471z"
+      fill="#ff4b55"
+    />
+    <path fill="#f5f5f5" d="M0 200.09h512V311.9H0z" />
+  </SvgIcon>
+)
+
+export default Austria

src/webui/components/Icon/icons/Brazil.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import SvgIcon, { SvgIconProps } from '../../SvgIcon'
+
+const Brazil: React.FC<SvgIconProps> = props => (
+  <SvgIcon viewBox="0 0 45 45" {...props}>
+    <defs>
+      <clipPath id="prefix__a">
+        <path d="M0 36h36V0H0v36z" />
+      </clipPath>
+    </defs>
+    <g clipPath="url(#prefix__a)" transform="matrix(1.25 0 0 -1.25 0 45)">
+      <path
+        d="M36 9a4 4 0 0 0-4-4H4a4 4 0 0 0-4 4v18a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4V9z"
+        fill="#009b3a"
+      />
+      <path
+        d="M32.727 18L18 6.876 3.27 18 18 29.125 32.727 18z"
+        fill="#fedf01"
+      />
+      <path
+        d="M24.434 18.076a6.458 6.458 0 1 1-12.917 0 6.458 6.458 0 0 1 12.917 0"
+        fill="#002776"
+      />
+      <path
+        d="M12.277 21.113a6.406 6.406 0 0 1-.672-2.023c3.994.29 9.417-1.892 11.744-4.596.402.604.7 1.28.882 2.004-2.871 2.809-7.916 4.63-11.954 4.615"
+        fill="#cbe9d4"
+      />
+      <path d="M13 16.767h-1v1h1v-1zm1-2h-1v1h1v-1z" fill="#88c9f9" />
+      <path
+        d="M16 16.767h-1v1h1v-1zm2-1h-1v1h1v-1zm4-2h-1v1h1v-1zm-3-1h-1v1h1v-1zm3 6h-1v1h1v-1z"
+        fill="#55acee"
+      />
+      <path d="M20 14.767h-1v1h1v-1z" fill="#3b88c3" />
+    </g>
+  </SvgIcon>
+)
+
+export default Brazil

src/webui/components/Icon/icons/China.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import SvgIcon, { SvgIconProps } from '../../SvgIcon'
+
+const China: React.FC<SvgIconProps> = props => (
+  <SvgIcon viewBox="0 0 45 45" {...props}>
+    <defs>
+      <clipPath id="prefix__a">
+        <path d="M0 36h36V0H0v36z" />
+      </clipPath>
+    </defs>
+    <g clipPath="url(#prefix__a)" transform="matrix(1.25 0 0 -1.25 0 45)">
+      <path
+        d="M36 9a4 4 0 0 0-4-4H4a4 4 0 0 0-4 4v18a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4V9z"
+        fill="#de2910"
+      />
+      <path
+        d="M7 25.049l.929-2.67 2.826-.06-2.253-1.706.819-2.707L7 19.52l-2.321-1.615.819 2.707-2.253 1.707 2.826.059.929 2.67zm6 3.423l.34-.688.759-.11-.549-.536.129-.756-.679.357-.679-.357.13.756-.55.536.76.11.339.688zm2-4l.34-.688.759-.11-.549-.536.129-.756-.679.357-.679-.357.13.756-.55.536.76.11.339.688zm0-4l.34-.688.759-.11-.549-.536.129-.756-.679.357-.679-.357.13.756-.55.536.76.11.339.688zm-2-3.999l.34-.69.759-.11-.549-.534.129-.757-.679.357-.679-.357.13.757-.55.535.76.11.339.689z"
+        fill="#ffde02"
+      />
+    </g>
+  </SvgIcon>
+)
+
+export default China