Make @codesandbox/icons size smaller (#4099)

codesandbox · May 12, 2020 · 256dc54 · 256dc54
1 parent 1789147
commit 256dc54
Show file tree

Hide file tree

Showing 86 changed files with 5,170 additions and 329 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -18,6 +18,7 @@ aliases:
       - packages/executors/dist
       - packages/node-services/lib
       - packages/notifications/lib
+      - packages/template-icons/lib
       - packages/sse-hooks/dist
       - standalone-packages/codesandbox-browserfs/dist
       - standalone-packages/codesandbox-browserfs/build
@@ -26,18 +27,19 @@ aliases:
 
   - &restore_deps_cache
     keys:
-      - v34-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
-      - v34-dependency-cache-{{ .Branch }}
-      - v34-dependency-cache
+      - v36-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+      - v36-dependency-cache-{{ .Branch }}
+      - v36-dependency-cache
 
   - &save_deps_cache
-    key: v34-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+    key: v36-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
     paths:
       - node_modules
       - packages/app/node_modules
       - packages/chrome-extension/node_modules
       - packages/codesandbox-api/node_modules
       - packages/components/node_modules
+      - packages/template-icons/node_modules
       - packages/common/node_modules
       - packages/dynamic-pages/node_modules
       - packages/deps/node_modules
@@ -51,51 +53,51 @@ aliases:
 
   - &restore_standalone_deps_cache
     keys:
-      - v34-standalone-dependency-cache-{{ .Branch }}-{{ checksum
+      - v36-standalone-dependency-cache-{{ .Branch }}-{{ checksum
         "standalone-packages/codesandbox-browserfs/yarn.lock" }}
-      - v34-standalone-dependency-cache-{{ .Branch }}
-      - v34-standalone-dependency-cache
+      - v36-standalone-dependency-cache-{{ .Branch }}
+      - v36-standalone-dependency-cache
 
   - &save_standalone_deps_cache
     key:
-      v34-standalone-dependency-cache-{{ .Branch }}-{{ checksum
+      v36-standalone-dependency-cache-{{ .Branch }}-{{ checksum
       "standalone-packages/codesandbox-browserfs/yarn.lock" }}
     paths:
       - standalone-packages/codesandbox-browserfs/node_modules
 
   - &restore_prod_homepage_cache
-    key: v34-prod-homepage-build-cache-master
+    key: v36-prod-homepage-build-cache-master
 
   - &restore_prod_result
     key:
-      v34-prod-build-result-{{ .Environment.CIRCLE_BRANCH
+      v36-prod-build-result-{{ .Environment.CIRCLE_BRANCH
       }}-{{.Environment.CIRCLE_SHA1 }}
 
   - &save_prod_build_cache
     key:
-      v34-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
+      v36-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
       }}-{{.Environment.CIRCLE_SHA1 }}
     paths:
       - packages/app/node_modules/.cache
 
   - &restore_prod_build_cache
     keys:
-      - v34-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
+      - v36-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
         }}-{{.Environment.CIRCLE_SHA1 }}
-      - v34-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-
-      - v34-prod-build-cache-master-
+      - v36-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-
+      - v36-prod-build-cache-master-
 
   # To persist the images built by sharp
   - &save_prod_homepage_cache
     key:
-      v34-prod-homepage-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{
+      v36-prod-homepage-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{
       .Environment.CIRCLE_SHA1 }}
     paths:
       - ./packages/homepage/public
 
   - &save_prod_result
     key:
-      v34-prod-build-result-{{ .Environment.CIRCLE_BRANCH }}-{{
+      v36-prod-build-result-{{ .Environment.CIRCLE_BRANCH }}-{{
       .Environment.CIRCLE_SHA1 }}
     paths:
       - ./www
@@ -141,14 +143,14 @@ commands:
     steps:
       - restore_cache:
           keys:
-            - v34-source-cache-{{ .Branch }}-{{ .Revision }}
-            - v34-source-cache-{{ .Branch }}-
-            - v34-source-cache-
+            - v36-source-cache-{{ .Branch }}-{{ .Revision }}
+            - v36-source-cache-{{ .Branch }}-
+            - v36-source-cache-
 
       - checkout
 
       - save_cache:
-          key: v34-source-cache-{{ .Branch }}-{{ .Revision }}
+          key: v36-source-cache-{{ .Branch }}-{{ .Revision }}
           paths:
             - '.git'
   build_deps:

diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,4 @@
 **/cra-files/*.*
 **/eslint-lint.js
 **/stories/*.*
+**/lib/*.*
diff --git a/contributor-docs/adding-template.md b/contributor-docs/adding-template.md
@@ -92,7 +92,7 @@ in order to
 ### 1. Add template logo
 
 Add the logo for your template in the
-[templates repo](https://github.com/codesandbox/codesandbox-templates/tree/master/packages/template-icons/src)
+[templates repo](https://github.com/codesandbox/codesandbox-client/tree/master/packages/template-icons/src)
 (`codesandbox-templates/packages/template-icons/src`).
 
 #### SVG logos
@@ -102,8 +102,8 @@ content. If your template's name is "Banana", name your logo file "BananaIcon".
 
 Examples:
 
-- [Vue logo](https://github.com/codesandbox/codesandbox-templates/blob/master/packages/template-icons/src/VueIcon.tsx)
-- [React logo](https://github.com/codesandbox/codesandbox-templates/blob/master/packages/template-icons/src/ReactIcon.tsx)
+- [Vue logo](https://github.com/codesandbox/codesandbox-client/tree/master/packages/template-icons/src/VueIcon.tsx)
+- [React logo](https://github.com/codesandbox/codesandbox-client/tree/master/packages/template-icons/src/ReactIcon.tsx)
 
 ### 2. Add template definition
 

diff --git a/package.json b/package.json
@@ -23,7 +23,8 @@
       "packages/dynamic-pages",
       "packages/notifications",
       "packages/deps",
-      "packages/executors"
+      "packages/executors",
+      "packages/template-icons"
     ],
     "nohoist": [
       "**/react-codemirror2",

diff --git a/packages/app/config/webpack.common.js b/packages/app/config/webpack.common.js
@@ -184,6 +184,7 @@ module.exports = {
           new RegExp(`${sepRe}node_modules${sepRe}.*gsap`),
           new RegExp(`${sepRe}node_modules${sepRe}.*babel-plugin-macros`),
           new RegExp(`sandbox-hooks`),
+          new RegExp(`template-icons`),
           new RegExp(
             `${sepRe}node_modules${sepRe}vue-template-es2015-compiler`
           ),

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -77,7 +77,6 @@
     "@babel/preset-env": "^7.5.5",
     "@codesandbox/components": "0.0.1",
     "@codesandbox/executors": "^0.1.0",
-    "@codesandbox/template-icons": "^1.1.0",
     "@emmetio/codemirror-plugin": "^0.3.5",
     "@sentry/webpack-plugin": "^1.8.0",
     "@styled-system/css": "^5.0.23",

diff --git a/packages/app/src/app/components/CreateNewSandbox/CreateSandbox/SandboxCard/SandboxCard.tsx b/packages/app/src/app/components/CreateNewSandbox/CreateSandbox/SandboxCard/SandboxCard.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Icons } from '@codesandbox/template-icons';
-import getColorIcons from '@codesandbox/common/lib/templates/icons';
 import { TemplateType } from '@codesandbox/common/lib/templates';
+import { getTemplateIcon } from '@codesandbox/common/lib/utils/getTemplateIcon';
 
 import {
   Container,
@@ -44,11 +43,8 @@ export const SandboxCard: React.FC<ISandboxCardProps> = ({
   DetailComponent,
   owner,
 }) => {
-  const UserIcon: React.FunctionComponent =
-    iconUrl && Icons[iconUrl] ? Icons[iconUrl] : getColorIcons(environment);
-  const OfficialIcon: React.FunctionComponent = getColorIcons(environment);
-
   const elRef = React.useRef<HTMLButtonElement>();
+  const { OfficialIcon, UserIcon } = getTemplateIcon(iconUrl, environment);
 
   React.useEffect(() => {
     const inputHasFocus =

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/Summary.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/Summary.tsx
@@ -8,8 +8,7 @@ import {
   githubRepoUrl,
 } from '@codesandbox/common/lib/utils/url-generator';
 import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import { Icons } from '@codesandbox/template-icons';
-import getIcon from '@codesandbox/common/lib/templates/icons';
+import { getTemplateIcon } from '@codesandbox/common/lib/utils/getTemplateIcon';
 
 import {
   Element,
@@ -168,8 +167,9 @@ export const Summary = () => {
 };
 
 const TemplateIcon = ({ iconUrl, environment }) => {
-  const Icon = Icons[iconUrl] || getIcon(environment);
-  return <Icon />;
+  const { UserIcon } = getTemplateIcon(iconUrl, environment);
+
+  return <UserIcon />;
 };
 
 const Divider = props => (

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary.tsx
@@ -25,8 +25,7 @@ import {
   githubRepoUrl,
 } from '@codesandbox/common/lib/utils/url-generator';
 import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import { Icons } from '@codesandbox/template-icons';
-import getIcon from '@codesandbox/common/lib/templates/icons';
+import { getTemplateIcon } from '@codesandbox/common/lib/utils/getTemplateIcon';
 
 import css from '@styled-system/css';
 import { TemplateConfig } from './TemplateConfig';
@@ -219,8 +218,9 @@ export const Summary = () => {
 };
 
 const TemplateIcon = ({ iconUrl, environment }) => {
-  const Icon = Icons[iconUrl] || getIcon(environment);
-  return <Icon />;
+  const { UserIcon } = getTemplateIcon(iconUrl, environment);
+
+  return <UserIcon />;
 };
 
 const Divider = props => (

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/TemplateConfig.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/TemplateConfig.tsx
@@ -4,7 +4,7 @@ import { useOvermind } from 'app/overmind';
 import { ListAction, Text, Element } from '@codesandbox/components';
 import styled, { css } from 'styled-components';
 import getIcon from '@codesandbox/common/lib/templates/icons';
-import { ColorIcons as Icons } from '@codesandbox/template-icons';
+import { ColorIcons as Icons } from '@codesandbox/common/lib/utils/getTemplateIcon';
 import { Popover, usePopoverState, PopoverDisclosure } from 'reakit/Popover';
 
 const buttonStyles = css`

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -47,7 +47,6 @@
     "@babel/polyfill": "^7.4.4",
     "@codesandbox/components": "^0.0.2",
     "@codesandbox/notifications": "^1.0.6",
-    "@codesandbox/template-icons": "^1.1.0",
     "@sentry/browser": "^5.11.2",
     "@styled-system/css": "^5.0.23",
     "@tippy.js/react": "^3.1.1",
@@ -69,12 +68,13 @@
     "react-icons": "^2.2.7",
     "react-input-autosize": "2.2.1",
     "react-router-dom": "^5.0.1",
-    "react-spring": "^8.0.25",
     "react-scrollbars-custom": "^4.0.20",
+    "react-spring": "^8.0.25",
     "react-textarea-autosize": "^6.1.0",
     "semver": "^5.6.0",
     "sha1": "^1.1.1",
     "styled-components": "^4.2.0",
+    "template-icons": "^1.0.0",
     "typeface-inter": "^3.10.0"
   },
   "devDependencies": {

diff --git a/packages/common/src/components/Template/UserTemplate.tsx b/packages/common/src/components/Template/UserTemplate.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColorIcons as Icons } from '@codesandbox/template-icons';
+import { ColorIcons as Icons } from 'template-icons';
 import { Template } from '../../types/index';
 import getIcon from '../../templates/icons';
 import { ENTER } from '../../utils/keycodes';

diff --git a/packages/common/src/templates/icons.ts b/packages/common/src/templates/icons.ts
@@ -25,7 +25,7 @@ import {
   JavaScriptIcon,
   VuePressIcon,
   UnibitIcon,
-} from '@codesandbox/template-icons';
+} from 'template-icons';
 
 import {
   adonis,