🔨 Cleanup components package

packages/components/.eslintignore

@@ -1,2 +1 @@
 lib
-

packages/components/.storybook/config.tsx

@@ -1,5 +1,5 @@
-import { withKnobs } from '@storybook/addon-knobs';
 import { withA11y } from '@storybook/addon-a11y';
+import { withKnobs } from '@storybook/addon-knobs';
 import { addDecorator, addParameters, configure } from '@storybook/react';
 import { themes } from '@storybook/theming';
 import isChromatic from 'chromatic/isChromatic';
@@ -67,7 +67,7 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 const allThemes: Theme[] = getThemes();
-const vsCodeThemes: Theme[] = allThemes.map(b => makeTheme(b, b.name));
+const vsCodeThemes: Theme[] = allThemes.map((b) => makeTheme(b, b.name));
 
 const CodeSandboxBlack = vsCodeThemes.find(
   ({ name }) => name === 'CodeSandbox Black'

packages/components/.storybook/storybook-addon-styled-component-theme/ThemesProvider.js

@@ -16,15 +16,15 @@ const BaseComponent = ({ theme, Provider, children }) => (
 );
 
 export const ThemesProvider = compose(
-  mapProps(props => {
+  mapProps((props) => {
     const { CustomThemeProvider } = props;
     const Provider = CustomThemeProvider ? CustomThemeProvider : ThemeProvider;
     return { ...props, Provider };
   }),
   withState('theme', 'setTheme', null),
   withHandlers({
-    onSelectTheme: ({ setTheme, themes }) => name => {
-      const theme = themes.find(th => th.name === name);
+    onSelectTheme: ({ setTheme, themes }) => (name) => {
+      const theme = themes.find((th) => th.name === name);
       setTheme(theme);
     },
   }),
@@ -41,5 +41,5 @@ export const ThemesProvider = compose(
       channel.removeListener('selectTheme', onSelectTheme);
     },
   }),
-  branch(props => !props.theme, renderNothing)
+  branch((props) => !props.theme, renderNothing)
 )(BaseComponent);

packages/components/.storybook/storybook-addon-styled-component-theme/register.js

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Themes } from './Themes';
 
-addons.register('storybook/themes', api => {
+addons.register('storybook/themes', (api) => {
   // Also need to set a unique name to the panel.
   addons.addPanel('storybook/themes/panel', {
     title: 'Themes',

packages/components/package.json

@@ -16,7 +16,7 @@
   "bugs": {
     "url": "https://github.com/codesandbox/codesandbox-client/issues"
   },
-  "homepage": "https://github.com/codesandbox/codesandbox-client#readme",
+  "homepage": "https://github.com/codesandbox/codesandbox-client/tree/master/packages/components",
   "files": [
     "lib"
   ],
@@ -25,61 +25,60 @@
     "build:dev": "yarn build",
     "build:lib": "yarn clean && yarn tsc",
     "build:storybook": "build-storybook -c .storybook -o public",
-    "clean": "rimraf lib && yarn rimraf node_modules/@types/react && yarn rimraf node_modules/@types/react-native",
-    "chromatic": "(if-env CIRCLE_BRANCH=master && yarn chromatic:master) || yarn chromatic:branch",
+    "chromatic": "yarn build:storybook && node scripts/visual-tests",
     "chromatic:base": "./node_modules/.bin/chromatic --build-script-name=build:storybook --exit-zero-on-changes --project-token=nffds42ndde",
-    "chromatic:branch": "(!(git diff master...HEAD --quiet ./src) && yarn chromatic:base) || echo 'Not running Chromatic...'",
-    "chromatic:master": "yarn chromatic:base --auto-accept-changes",
+    "clean": "rimraf lib && yarn rimraf node_modules/@types/react && yarn rimraf node_modules/@types/react-native",
     "lint": "eslint --ext .js,.ts,.tsx src",
     "prepublish": "yarn build",
     "start": "yarn tsc --watch",
     "start:storybook": "start-storybook",
     "typecheck": "tsc --noEmit --pretty"
   },
   "dependencies": {
-    "@reach/auto-id": "0.10.3",
-    "@reach/menu-button": "0.10.3",
-    "@reach/skip-nav": "^0.10.4",
-    "@reach/tooltip": "0.10.3",
-    "@reach/visually-hidden": "0.10.2",
+    "@reach/auto-id": "^0.11.2",
+    "@reach/menu-button": "^0.11.2",
+    "@reach/skip-nav": "^0.11.2",
+    "@reach/tooltip": "^0.11.2",
+    "@reach/visually-hidden": "^0.11.1",
     "@styled-system/css": "^5.1.4",
-    "chromatic": "^4.0.2",
-    "codesandbox-api": "0.0.24",
-    "color": "3.1.2",
-    "date-fns": "^2.8.1",
+    "chromatic": "^5.1.0",
+    "color": "^3.1.2",
     "deepmerge": "^4.2.2",
     "dot-object": "^2.1.3",
+    "react-is": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-tagsinput": "^3.19.0",
-    "styled-components": "^5.2.0",
-    "typeface-inter": "^3.11.2"
+    "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^5.3.18",
-    "@storybook/addon-actions": "^5.3.18",
-    "@storybook/addon-knobs": "^5.3.18",
-    "@storybook/addon-storysource": "^5.3.18",
-    "@storybook/addon-viewport": "^5.3.18",
-    "@storybook/csf": "^0.0.1",
-    "@storybook/react": "^5.3.18",
-    "@types/color": "3.0.1",
-    "@types/lodash": "^4.14.149",
-    "@types/styled-components": "^5.1.0",
+    "@storybook/addon-a11y": "^5.3.21",
+    "@storybook/addon-actions": "^5.3.21",
+    "@storybook/addon-knobs": "^5.3.21",
+    "@storybook/addon-storysource": "^5.3.21",
+    "@storybook/addon-viewport": "^5.3.21",
+    "@storybook/react": "^5.3.21",
+    "@types/color": "^3.0.1",
+    "@types/dot-object": "^2.1.2",
+    "@types/react-tagsinput": "^3.19.7",
+    "@types/styled-components": "^5.1.3",
     "babel-preset-react-app": "^9.1.2",
-    "cpx": "^1.5.0",
+    "execa": "^4.0.3",
     "if-env": "^1.0.4",
-    "np": "^5.2.1",
-    "postinstall-postinstall": "^2.1.0",
-    "rimraf": "^3.0.0",
-    "simple-git": "^2.17.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "rimraf": "^3.0.2",
+    "simple-git": "^2.20.1",
     "storybook-addon-styled-component-theme": "^1.3.0",
     "typescript": "3.7.4"
   },
   "peerDependencies": {
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "engines": {
-    "node": "^10.0.0"
+    "node": "^10.13.0"
+  },
+  "funding": {
+    "url": "https://codesandbox.io/pricing"
   }
 }

packages/components/scripts/visual-tests.js

@@ -2,14 +2,16 @@ const execa = require('execa');
 const git = require('simple-git')();
 
 const hasChanges = async () => {
-  const result = await git.diffSummary(['master...HEAD']);
-  if (result.files.length) return true;
-  return false;
+  const { files } = await git.diffSummary(['master...HEAD']);
+
+  return files.length > 0;
 };
 
 const run = autoAccept => {
   const options = ['chromatic:base'];
-  if (autoAccept) options.push('--auto-accept-changes');
+  if (autoAccept) {
+    options.push('--auto-accept-changes');
+  }
 
   execa('yarn', options).stdout.pipe(process.stdout);
 };
@@ -18,12 +20,14 @@ const start = async () => {
   const { current: currentBranch } = await git.branch();
 
   if (currentBranch === 'master') {
-    run(true);
-  } else {
-    const changes = await hasChanges();
-    if (changes) run();
-    else console.warn('No changes found in branch, skipping visual tests');
+    return run(true);
   }
+
+  if (await hasChanges()) {
+    return run();
+  }
+
+  console.warn('No changes found in branch, skipping visual tests');
 };
 
 start();

packages/components/src/utils/polyfill-theme.ts

@@ -12,7 +12,7 @@ import designLanguage from '../design-language';
 import codesandboxBlack from '../themes/codesandbox-black';
 import codesandboxLight from '../themes/codesandbox-light.json';
 
-const polyfillTheme = vsCodeTheme => {
+const polyfillTheme = (vsCodeTheme) => {
   /**
    *
    * In order of importance, this is the value we use:
@@ -232,20 +232,14 @@ const polyfillTheme = vsCodeTheme => {
 
 export default polyfillTheme;
 
-const guessType = theme => {
+const guessType = (theme) => {
   if (theme.name && theme.name.toLowerCase().includes('light')) return 'light';
   return 'dark';
 };
 
-const lighten = (color, value) =>
-  Color(color)
-    .lighten(value)
-    .hex();
+const lighten = (color, value) => Color(color).lighten(value).hex();
 
-const darken = (color, value) =>
-  Color(color)
-    .darken(value)
-    .hex();
+const darken = (color, value) => Color(color).darken(value).hex();
 
 const withContrast = (color, background, type, contrastType = 'text') => {
   const contrastRatio = { text: 4.5, icon: 1.6 };