🔨 Cleanup components package

packages/app/package.json

@@ -75,7 +75,7 @@
     "@apollo/react-hooks": "^3.1.3",
     "@babel/plugin-transform-destructuring": "^7.5.0",
     "@babel/preset-env": "^7.5.5",
-    "@codesandbox/components": "0.0.2",
+    "@codesandbox/components": "^0.0.3",
     "@codesandbox/executors": "^0.1.0",
     "@emmetio/codemirror-plugin": "^0.3.5",
     "@sentry/webpack-plugin": "^1.8.0",

packages/common/package.json

@@ -45,7 +45,7 @@
   "dependencies": {
     "@babel/plugin-transform-flow-strip-types": "^7.0.0",
     "@babel/polyfill": "^7.4.4",
-    "@codesandbox/components": "^0.0.2",
+    "@codesandbox/components": "^0.0.3",
     "@codesandbox/notifications": "^1.0.6",
     "@sentry/browser": "^5.17.0",
     "@styled-system/css": "^5.0.23",

packages/components/.eslintignore

@@ -1 +1 @@
-src/stories
+lib

packages/components/.gitignore

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

packages/components/.storybook/addons.ts

@@ -1,6 +1,6 @@
 import '@storybook/addon-actions/register';
+import '@storybook/addon-a11y/register';
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-storysource/register';
 import '@storybook/addon-viewport/register';
-import '@storybook/addon-a11y/register';
-import './storybook-addon-styled-component-theme/register.js';
+import './storybook-addon-styled-component-theme/register';

packages/components/.storybook/config.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
-import isChromatic from 'chromatic/isChromatic';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withA11y } from '@storybook/addon-a11y';
 import { addDecorator, addParameters, configure } from '@storybook/react';
 import { themes } from '@storybook/theming';
+import isChromatic from 'chromatic/isChromatic';
+import React from 'react';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
+
 import { makeTheme, getThemes } from '../src/components/ThemeProvider';
+
 import { withThemesProvider } from './storybook-addon-styled-component-theme';
 
 type Theme = {
@@ -35,8 +37,6 @@ const viewports = {
 // new globals based on theme?
 // using sidebar as the styles for body for now 🤷
 const GlobalStyle = createGlobalStyle`
-
-
   html body {
     font-family: 'Inter', sans-serif;
     -webkit-font-smoothing: auto;
@@ -64,45 +64,43 @@ const GlobalStyle = createGlobalStyle`
     a {
       color: #40a9f3;
     }
-
   }
 `;
-const allThemes = getThemes();
-const vsCodeThemes = allThemes.map(b => makeTheme(b, b.name));
+const allThemes: Theme[] = getThemes();
+const vsCodeThemes: Theme[] = allThemes.map(b => makeTheme(b, b.name));
 
-const blackCodesandbox = vsCodeThemes.find(
-  (theme: Theme) => theme.name === 'CodeSandbox Black'
+const CodeSandboxBlack = vsCodeThemes.find(
+  ({ name }) => name === 'CodeSandbox Black'
 );
 
-if (!isChromatic()) {
-  const withGlobal = (cb: any) => (
-    <>
+if (isChromatic()) {
+  const withGlobal = (story: any) => (
+    <ThemeProvider theme={makeTheme(CodeSandboxBlack, 'default')}>
       <GlobalStyle />
-      {cb()}
-    </>
-  );
 
-  const rest = vsCodeThemes.filter(
-    (theme: Theme) => theme.name !== 'CodeSandbox Black'
+      {story()}
+    </ThemeProvider>
   );
+
   addDecorator(withGlobal);
-  addDecorator(withThemesProvider([blackCodesandbox, ...rest]));
 } else {
-  const withGlobal = (cb: any) => (
-    <ThemeProvider theme={makeTheme(blackCodesandbox, 'default')}>
+  const withGlobal = (story: any) => (
+    <>
       <GlobalStyle />
-      {cb()}
-    </ThemeProvider>
+
+      {story()}
+    </>
   );
 
+  const rest = vsCodeThemes.filter(({ name }) => name !== 'CodeSandbox Black');
   addDecorator(withGlobal);
+  addDecorator(withThemesProvider([CodeSandboxBlack, ...rest]));
 }
 addDecorator(withA11y);
 addDecorator(withKnobs);
-addParameters({ viewport: { viewports } });
 
-// Option defaults.
+addParameters({ viewport: { viewports } });
 addParameters({ options: { theme: themes.dark } });
 
-// automatically import all files ending in *.stories.js
+// automatically import all files ending in *.stories.tsx
 configure(require.context('../src', true, /\.stories\.tsx$/), module);

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

@@ -1,5 +1,4 @@
 import addons from '@storybook/addons';
-import { List } from 'immutable';
 import * as React from 'react';
 import {
   branch,

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

@@ -1,3 +1,3 @@
-export { ThemesProvider } from './ThemesProvider';
 export { Themes } from './Themes';
+export { ThemesProvider } from './ThemesProvider';
 export { withThemesProvider } from './withThemesProvider';

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

@@ -1,20 +1,19 @@
 import addons from '@storybook/addons';
 import React from 'react';
+
 import { Themes } from './Themes';
 
 addons.register('storybook/themes', api => {
   // Also need to set a unique name to the panel.
   addons.addPanel('storybook/themes/panel', {
     title: 'Themes',
-    render: ({ active }) => {
-      return (
-        <Themes
-          key="storybook-theme-addon"
-          channel={addons.getChannel()}
-          api={api}
-          active={active}
-        />
-      );
-    },
+    render: ({ active }) => (
+      <Themes
+        key="storybook-theme-addon"
+        channel={addons.getChannel()}
+        api={api}
+        active={active}
+      />
+    ),
   });
 });

packages/components/.storybook/webpack.config.js

@@ -1,20 +1,35 @@
-module.exports = ({ config }) => {
-  config.module.rules.push({
-    test: /\.(ts|tsx)$/,
-    use: [
+module.exports = ({
+  config: {
+    module: { rules, ...module },
+    resolve: { extensions, ...resolve },
+    ...config
+  },
+}) => ({
+  ...config,
+  module: {
+    ...module,
+    rules: [
+      ...rules,
       {
-        loader: require.resolve('babel-loader'),
-        options: {
-          presets: [require.resolve('babel-preset-react-app')],
-        },
+        test: /\.(ts|tsx)$/,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              presets: [require.resolve('babel-preset-react-app')],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.stories\.jsx?$/,
+        loaders: [require.resolve('@storybook/addon-storysource/loader')],
+        enforce: 'pre',
       },
     ],
-  });
-  config.module.rules.push({
-    test: /\.stories\.jsx?$/,
-    loaders: [require.resolve('@storybook/addon-storysource/loader')],
-    enforce: 'pre',
-  });
-  config.resolve.extensions.push('.ts', '.tsx');
-  return config;
-};
+  },
+  resolve: {
+    ...resolve,
+    extensions: [...extensions, '.ts', '.tsx'],
+  },
+});

packages/components/package.json

@@ -1,72 +1,79 @@
 {
   "name": "@codesandbox/components",
-  "version": "0.0.2",
+  "version": "0.0.3",
+  "main": "lib/index",
+  "source": true,
+  "contributors": [
+    "Sara Vieira <sara@codesandbox.io> (https://iamsaravieira.com)",
+    "Siddharth Kshetrapal <sid@codesandbox.io> (https://sid.st)"
+  ],
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/codesandbox/codesandbox-client",
     "directory": "packages/components"
   },
+  "bugs": {
+    "url": "https://github.com/codesandbox/codesandbox-client/issues"
+  },
+  "homepage": "https://github.com/codesandbox/codesandbox-client#readme",
   "files": [
     "lib"
   ],
-  "main": "lib/index",
-  "source": true,
   "scripts": {
     "build": "yarn build:lib",
     "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",
-    "lint": "eslint --ext .js,.ts,.tsx src",
-    "start": "yarn tsc --watch",
-    "start:storybook": "start-storybook",
-    "typecheck": "tsc --noEmit --pretty",
     "chromatic": "(if-env CIRCLE_BRANCH=master && yarn chromatic:master) || yarn chromatic:branch",
     "chromatic:base": "./node_modules/.bin/chromatic --build-script-name=build:storybook --exit-zero-on-changes --project-token=nffds42ndde",
-    "chromatic:master": "yarn chromatic:base --auto-accept-changes",
     "chromatic:branch": "(!(git diff master...HEAD --quiet ./src) && yarn chromatic:base) || echo 'Not running Chromatic...'",
-    "prepublish": "yarn build"
+    "chromatic:master": "yarn chromatic:base --auto-accept-changes",
+    "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.10.5",
+    "@reach/menu-button": "0.10.5",
+    "@reach/skip-nav": "^0.10.5",
+    "@reach/tooltip": "0.10.5",
+    "@reach/visually-hidden": "0.10.4",
     "@styled-system/css": "^5.1.4",
-    "chromatic": "^4.0.2",
-    "codesandbox-api": "0.0.24",
+    "chromatic": "^4.0.3",
     "color": "3.1.2",
-    "date-fns": "^2.8.1",
     "deepmerge": "^4.2.2",
     "dot-object": "^2.1.3",
-    "react-router-dom": "^5.2.0",
     "react-tagsinput": "^3.19.0",
-    "styled-components": "^5.1.0",
-    "typeface-inter": "^3.11.2"
+    "styled-components": "^5.1.1"
   },
   "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",
+    "@storybook/addon-a11y": "^5.3.19",
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-knobs": "^5.3.19",
+    "@storybook/addon-storysource": "^5.3.19",
+    "@storybook/addon-viewport": "^5.3.19",
+    "@storybook/react": "^5.3.19",
+    "@types/color": "^3.0.1",
+    "@types/dot-object": "^2.1.1",
+    "@types/react-tagsinput": "^3.19.7",
     "@types/styled-components": "^5.1.0",
     "babel-preset-react-app": "^9.1.2",
-    "cpx": "^1.5.0",
     "if-env": "^1.0.4",
-    "np": "^5.2.1",
-    "postinstall-postinstall": "^2.1.0",
-    "rimraf": "^3.0.0",
+    "rimraf": "^3.0.2",
     "storybook-addon-styled-component-theme": "^1.3.0",
     "typescript": "3.7.4"
   },
   "peerDependencies": {
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
+  },
+  "engines": {
+    "node": ">=10.13.0",
+    "npm": ">=6.0.0",
+    "yarn": "^1.0.0"
   }
 }

packages/components/src/index.ts

@@ -5,39 +5,37 @@ export * from './components/ThemeProvider';
 // atoms
 export * from './components/Avatar';
 export * from './components/Button';
+export * from './components/Checkbox';
 export * from './components/Icon';
 export * from './components/IconButton';
 export * from './components/Input';
-export * from './components/Radio';
 export * from './components/Label';
 export * from './components/Link';
+export * from './components/Radio';
 export * from './components/SearchInput';
 export * from './components/Select';
-export * from './components/Stats';
-export * from './components/Menu';
 export * from './components/SkeletonText';
+export * from './components/SkipNav';
+export * from './components/Stats';
 export * from './components/Switch';
 export * from './components/Text';
 export * from './components/Textarea';
-export * from './components/FormField';
-export * from './components/Checkbox';
-export * from './components/SkipNav';
 
 // molecules
 export * from './components/Collapsible';
+export * from './components/FormField';
 export * from './components/Integration';
 export * from './components/List';
-export * from './components/FormField';
+export * from './components/Menu';
+export * from './components/TagInput';
 export * from './components/Tags';
 export * from './components/Tags/Tag';
-export * from './components/TagInput';
-export * from './components/Menu';
 export * from './components/Tooltip';
 
 // layout
 export * from './components/Grid';
-export * from './components/Stack';
 export * from './components/SidebarRow';
+export * from './components/Stack';
 
 // design language
 export * from './design-language';

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

@@ -49,7 +49,7 @@ const polyfillTheme = vsCodeTheme => {
 
   // Step 2: Fill missing values from existing values or codesandbox dark/light
 
-  const codesandboxColors = ['dark', 'lc'].includes(type)
+  const codesandboxColors: any = ['dark', 'lc'].includes(type)
     ? object(codesandboxBlack.colors)
     : object(codesandboxLight.colors);
 

packages/notifications/package.json

@@ -15,7 +15,7 @@
     "start": "tsc --watch"
   },
   "dependencies": {
-    "@codesandbox/components": "0.0.2",
+    "@codesandbox/components": "^0.0.3",
     "react-spring": "^8.0.25",
     "styled-components": "^5.1.0",
     "uuid": "^3.3.2"