add vscode icons (codesandbox#1154)

* add vscode icons

* change function name

* use styled componnents instead of inline

* change to material

* fix git

* update snaps+

* really update now

* Revert "fix git"

This reverts commit 776809e.

* Revert "really update now"

This reverts commit ee3ef8d.

* Revert "update snaps+"

This reverts commit 8862e89.

* small fixes

* clean code

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/GetIconURL.js

@@ -0,0 +1,46 @@
+import folderSvg from 'common/components/icons/folder.svg';
+import folderOpenSvg from 'common/components/icons/folder-open.svg';
+import faviconSvg from 'common/components/icons/favicon.svg';
+import fileSvg from 'common/components/icons/file.svg';
+import imageSvg from 'common/components/icons/image.svg';
+import codesandboxSvg from 'common/components/icons/codesandbox.svg';
+
+function imageExists(url) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = resolve;
+    img.onerror = reject;
+    img.src = url;
+  });
+}
+
+const icons = {
+  directory: folderSvg,
+  'directory-open': folderOpenSvg,
+  favicon: faviconSvg,
+  image: imageSvg,
+  codesandbox: codesandboxSvg,
+};
+
+async function getIconURL(type) {
+  const base =
+    'https://cdn.rawgit.com/PKief/vscode-material-icon-theme/e04ab459/icons';
+
+  let url;
+
+  if (type === 'codesandbox') {
+    url = codesandboxSvg;
+  } else {
+    url = `${base}/${type}.svg`;
+  }
+
+  try {
+    await imageExists(url);
+
+    return url;
+  } catch (_) {
+    return icons[type] || fileSvg;
+  }
+}
+
+export default getIconURL;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/elements.js

@@ -1,62 +1,13 @@
 import styled from 'styled-components';
 
-import jsSvg from 'common/components/icons/js.svg';
-import tsSvg from 'common/components/icons/ts.svg';
-import cssSvg from 'common/components/icons/css.svg';
-import reactSvg from 'common/components/icons/react.svg';
-import folderSvg from 'common/components/icons/folder.svg';
-import folderOpenSvg from 'common/components/icons/folder-open.svg';
-import jsonSvg from 'common/components/icons/json.svg';
-import reasonSvg from 'common/components/icons/reason.svg';
-import yarnSvg from 'common/components/icons/yarn.svg';
-import markdownSvg from 'common/components/icons/markdown.svg';
-import faviconSvg from 'common/components/icons/favicon.svg';
-import htmlSvg from 'common/components/icons/html.svg';
-import npmSvg from 'common/components/icons/npm.svg';
-import vueSvg from 'common/components/icons/vue.svg';
-import fileSvg from 'common/components/icons/file.svg';
-import svgSvg from 'common/components/icons/svg.svg';
-import imageSvg from 'common/components/icons/image.svg';
-import prettierSvg from 'common/components/icons/prettier.svg';
-import codesandboxSvg from 'common/components/icons/codesandbox.svg';
-import babelSvg from 'common/components/icons/babel.svg';
-import sassSvg from 'common/components/icons/sass.svg';
-
-const icons = {
-  directory: folderSvg,
-  'directory-open': folderOpenSvg,
-  react: reactSvg,
-  css: cssSvg,
-  json: jsonSvg,
-  yarn: yarnSvg,
-  md: markdownSvg,
-  favicon: faviconSvg,
-  html: htmlSvg,
-  npm: npmSvg,
-  vue: vueSvg,
-  js: jsSvg,
-  ts: tsSvg,
-  svg: svgSvg,
-  image: imageSvg,
-  prettier: prettierSvg,
-  codesandbox: codesandboxSvg,
-  babel: babelSvg,
-  sass: sassSvg,
-  reason: reasonSvg,
-};
-
-function getIconSvg(type) {
-  return icons[type] || fileSvg;
-}
-
 export const RedIcon = styled.span`
   color: ${props => props.theme.red};
   width: ${props => props.width}px;
   height: ${props => props.height}px;
 `;
 
 export const SVGIcon = styled.span`
-  background-image: url(${props => getIconSvg(props.type)});
+  background-image: url(${props => props.url});
   background-size: ${props => props.width}px;
   background-position: 0;
   background-repeat: no-repeat;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/index.js

@@ -1,25 +1,50 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import ErrorIcon from 'react-icons/lib/md/error';
 
 import { RedIcon, SVGIcon } from './elements';
+import getIconURL from './GetIconURL';
 
-const getIcon = (type, error, width, height) => {
-  if (error) {
-    return (
-      <RedIcon>
-        <ErrorIcon width={width} height={height} />
-      </RedIcon>
-    );
+class GetIcon extends Component {
+  state = { icon: null };
+
+  getIcon = async type => {
+    const icon = await getIconURL(type);
+
+    this.setState({
+      icon,
+    });
+  };
+
+  async componentDidMount() {
+    this.getIcon(this.props.type);
   }
 
-  return <SVGIcon type={type} width={width} height={height} />;
-};
+  async componentDidUpdate(prevProps) {
+    if (this.props.type !== prevProps.type) {
+      this.getIcon(this.props.type);
+    }
+  }
+
+  render() {
+    const { type, error, width, height } = this.props;
+    const { icon } = this.state;
+
+    if (error) {
+      return (
+        <RedIcon>
+          <ErrorIcon width={width} height={height} />
+        </RedIcon>
+      );
+    }
+    return <SVGIcon url={icon} type={type} width={width} height={height} />;
+  }
+}
 
 function EntryIcon({ type, width = 16, height = 16, error }) {
   return (
     <div style={{ display: 'inline-block', verticalAlign: 'middle' }}>
-      {getIcon(type, error, width, height)}
+      <GetIcon type={type} error={error} width={width} height={height} />
     </div>
   );
 }

packages/app/src/app/utils/get-type.js

@@ -1,76 +1,77 @@
 /* @flow */
 import isImage from 'common/utils/is-image';
 
-const reactRegex = /import.*from\s['|"]react['|"]/;
-export function hasReact(code: string) {
-  return reactRegex.test(code);
-}
-
-const cssRegex = /\.css$/;
-const sassRegex = /\.s[a|c]ss$/;
-const jsonRegex = /\.json$/;
-const htmlRegex = /\.html$/;
-const mdRegex = /\.md$/;
-const vueRegex = /\.vue$/;
 const svgRegex = /\.svg$/;
-const reasonRegex = /\.re$/;
+
+const specialCasesMap = {
+  'favicon.ico': 'favicon',
+  'yarn.lock': 'yarn',
+  'package.json': 'npm',
+  'sandbox.config.json': 'codesandbox',
+  'readme.md': 'readme',
+  'contributing.md': 'contributing',
+  'tsconfig.json': 'typescript',
+  'tslint.json': 'typescript',
+  dockerfile: 'docker',
+};
+
+const regexCasesMap = {
+  markdown: /\.md$/,
+  yaml: /\.yml$/,
+  react: /\.jsx$/,
+  reason: /\.re$/,
+  sass: /\.scss$/,
+  javascript: /\.js$/,
+  typescript: /\.tsx?$/,
+  console: /\.sh$/,
+  // STARTS WITH
+  git: /^.git/i,
+  flow: /^.flow/i,
+};
+
+const getKeyByValue = (object, value) =>
+  Object.keys(object).find(key => object[key] === value);
 
 export function getMode(title: string = '') {
-  if (title === 'favicon.ico') {
-    return 'favicon';
-  }
+  // Remove Ignore
+  const removeIgnoreTitle = title.split('ignore')[0].toLowerCase();
 
-  if (title === 'yarn.lock') {
-    return 'yarn';
-  }
+  const titleArr = removeIgnoreTitle.split('.');
 
-  if (title === 'package.json') {
-    return 'npm';
+  // RemoveTitle
+  if (removeIgnoreTitle.endsWith('rc')) {
+    return titleArr.join('').split('rc')[0];
   }
 
-  if (title === '.prettierrc') {
-    return 'prettier';
-  }
+  // Name Bases
+  const keys = Object.keys(specialCasesMap);
+  if (keys.includes(removeIgnoreTitle))
+    return specialCasesMap[removeIgnoreTitle];
 
-  if (title === 'sandbox.config.json') {
-    return 'codesandbox';
-  }
+  // TEST BASED
+  const regexValues = Object.values(regexCasesMap);
+  const match = regexValues.find(value =>
+    new RegExp(value).test(removeIgnoreTitle)
+  );
 
-  if (title === '.babelrc') {
-    return 'babel';
-  }
+  if (match) return getKeyByValue(regexCasesMap, match);
 
-  if (cssRegex.test(title)) return 'css';
-  if (jsonRegex.test(title)) return 'json';
-  if (htmlRegex.test(title)) return 'html';
-  if (mdRegex.test(title)) return 'md';
-  if (vueRegex.test(title)) return 'vue';
-  if (svgRegex.test(title)) return 'svg';
-  if (sassRegex.test(title)) return 'sass';
-  if (reasonRegex.test(title)) return 'reason';
-  if (!title.includes('.')) return 'raw';
+  // Include tests
+  if (!removeIgnoreTitle.includes('.')) return 'raw';
+  if (
+    removeIgnoreTitle.endsWith('.module.ts') ||
+    removeIgnoreTitle.endsWith('.component.ts')
+  )
+    return 'angular';
+  if (removeIgnoreTitle.includes('webpack')) return 'webpack';
 
-  if (isImage(title)) {
+  if (isImage(removeIgnoreTitle) && !svgRegex.test(removeIgnoreTitle)) {
     return 'image';
   }
 
-  return '';
-}
-
-const jsRegex = /\.jsx?$/;
-const tsRegex = /\.tsx?$/;
-function isJS(title: string) {
-  if (jsRegex.test(title)) return 'js';
-  if (tsRegex.test(title)) return 'ts';
-  return undefined;
+  return titleArr[titleArr.length - 1];
 }
 
 export default function getType(title: string) {
-  const isJSType = isJS(title);
-  if (isJSType) {
-    // if (hasReact(code || '')) return 'react';
-    return isJSType;
-  }
-
   return getMode(title);
 }