Storybook

package.json

@@ -16,8 +16,9 @@
     "start:fast": "lerna run start --scope app --stream",
     "start:vscode": "VSCODE=1 yarn start:fast & cd standalone-packages/monaco-editor && yarn simpleserver & cd standalone-packages/vscode && yarn watch",
     "start:dynamic": "lerna run dev --scope dynamic-pages --stream",
-    "start:common": "lerna run start --scope common --stream",
+    "start:common": "lerna run start --scope @codesandbox/common --stream",
     "start:home": "lerna run start --scope homepage --stream",
+    "start:storybook": "lerna run storybook --scope @codesandbox/common --stream",
     "start:test": "lerna run start:test --scope app --stream",
     "start:dev_api": "lerna run start:dev_api --scope app --stream",
     "test": "lerna run test --ignore codesandbox-browserfs",

packages/common/.gitignore

@@ -1 +1,2 @@
 lib
+storybook-static

packages/common/.storybook/addons.js

@@ -0,0 +1,4 @@
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-viewport/register';
+import '@storybook/addon-a11y/register';
+import '@storybook/addon-actions/register';

packages/common/.storybook/config.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { configure, addDecorator, addParameters } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { withA11y } from '@storybook/addon-a11y';
+import { ThemeProvider } from 'styled-components';
+import theme from '../src/theme.ts';
+import storybookTheme from './theme';
+import '../src/global.css';
+
+addParameters({
+  options: {
+    theme: storybookTheme,
+  },
+});
+
+addParameters({ viewport: INITIAL_VIEWPORTS });
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../src/components/', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+addDecorator(story => <ThemeProvider theme={theme}>{story()}</ThemeProvider>);
+
+configure(loadStories, module);
+addDecorator(withKnobs);
+addDecorator(withA11y);

packages/common/.storybook/consts.js

@@ -0,0 +1,93 @@
+export const sandbox = {
+  id: 'jp64y1jl15',
+  view_count: 385,
+  version: 5,
+  user_liked: false,
+  updated_at: '2019-02-28T19:58:25.869808',
+  title: 'LOOOL',
+  template: 'static',
+  team: null,
+  tags: [],
+  source_id: '4baffb72-2355-42d1-a1f3-0c835dc5af5d',
+  screenshot_url: 'https://screenshots.codesandbox.io/jp64y1jl15.png',
+  room_id: null,
+  privacy: 0,
+  picks: [],
+  owned: false,
+  original_git_commit_sha: '319fd59bb6e454810d7b609bc108f88cd88cf654',
+  original_git: {
+    username: 'codesandbox-app',
+    repo: 'static-template',
+    path: '',
+    commit_sha: '319fd59bb6e454810d7b609bc108f88cd88cf654',
+    branch: 'master',
+  },
+  npm_dependencies: {},
+  modules: [
+    {
+      updated_at: '2019-02-28T19:58:25.905520',
+      title: 'package.json',
+      source_id: '4baffb72-2355-42d1-a1f3-0c835dc5af5d',
+      shortid: 'H1gwPDrw2X',
+      is_binary: false,
+      inserted_at: '2019-02-07T12:26:05.570784',
+      id: 'de57f27e-7c0b-45db-b1bd-441ffd5af72c',
+      directory_shortid: null,
+      code:
+        '{\n  "name": "loool",\n  "version": "1.0.0",\n  "description": "LOOOK ATR ME MOM",\n  "main": "index.html",\n  "scripts": {\n    "test": "echo \\"Error: no test specified\\" && exit 1"\n  },\n  "repository": {\n    "type": "git",\n    "url": "git+https://github.com/codesandbox-app/static-template.git"\n  },\n  "keywords": [],\n  "author": "Ives van Hoorne",\n  "license": "MIT",\n  "bugs": {\n    "url": "https://github.com/codesandbox-app/static-template/issues"\n  },\n  "homepage": "https://github.com/codesandbox-app/static-template#readme"\n}',
+    },
+    {
+      updated_at: '2019-02-07T12:26:07.153183',
+      title: 'index.html',
+      source_id: '4baffb72-2355-42d1-a1f3-0c835dc5af5d',
+      shortid: 'B1wvPBw37',
+      is_binary: false,
+      inserted_at: '2019-02-07T12:26:05.573708',
+      id: '71cfc161-436f-41a9-89a3-e511781f84fa',
+      directory_shortid: null,
+      code:
+        '<!DOCTYPE html>\n<html lang="en">\n\n<head>\n\t<meta charset="UTF-8">\n\t<meta name="viewport" content="width=device-width, initial-scale=1.0">\n\t<meta http-equiv="X-UA-Compatible" content="ie=edge">\n\t<title>Static Template</title>\n</head>\n\n<body>\n\t<h1>This is a static template, there is no bundler or bundling involved!</h1>\n</body>\n\n</html>',
+    },
+    {
+      updated_at: '2019-02-07T12:26:05.563147',
+      title: 'sandbox.config.json',
+      source_id: '4baffb72-2355-42d1-a1f3-0c835dc5af5d',
+      shortid: 'HkbPvvHDnX',
+      is_binary: false,
+      inserted_at: '2019-02-07T12:26:05.563128',
+      id: '8cc9c3e0-cbe1-45be-8695-d9aa72c76e01',
+      directory_shortid: null,
+      code: '{\n  "template": "static"\n}\n',
+    },
+  ],
+  like_count: 0,
+  is_sse: false,
+  is_frozen: false,
+  git: null,
+  fork_count: 0,
+  external_resources: [],
+  entry: 'index.html',
+  directories: [],
+  description: 'LOOOK ATR ME MOM',
+  collection: false,
+  author: {
+    view_count: 26337,
+    username: 'SaraVieira',
+    twitter: 'NikkitaFTW',
+    subscription_since: '2018-03-01T16:00:18.032858Z',
+    showcased_sandbox_shortid: 'jp64y1jl15',
+    sandbox_count: 329,
+    received_like_count: 57,
+    profile_email: '[email protected]',
+    name: 'Sara Vieira',
+    inserted_at: '2017-07-18T23:49:53.950233',
+    id: '8d35d7c1-eecb-4aad-87b0-c22d30d12081',
+    given_like_count: 29,
+    forked_count: 981,
+    featured_sandboxes: [],
+    curator_at: '2018-11-25T18:51:34.542902Z',
+    bio: 'I am sara',
+    badges: [{ visible: true, name: 'Patron II', id: 'patron_2' }],
+    avatar_url: 'https://avatars0.githubusercontent.com/u/1051509?v=4',
+  },
+};

packages/common/.storybook/preview-head.html

@@ -0,0 +1,8 @@
+<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
+<script>
+  WebFont.load({
+    google: {
+      families: ['Source Code Pro:500', 'Roboto:300,400,500,700', 'Poppins:300,400,600,700']
+    }
+  });
+</script>

packages/common/.storybook/theme.js

@@ -0,0 +1,10 @@
+import { create } from '@storybook/theming';
+import theme from '../src/theme.ts';
+
+export default create({
+  base: 'dark',
+  brandTitle: 'CodeSandbox Storybook',
+  brandUrl: 'https://codesandbox.io',
+  brandImage:
+    'https://pbs.twimg.com/profile_images/990658498940751873/Ri8HxX9d_400x400.jpg',
+});

packages/common/.storybook/webpack.config.js

@@ -0,0 +1,11 @@
+module.exports = ({ config, mode }) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [['react-app', { flow: false, typescript: true }]],
+    },
+  });
+  config.resolve.extensions.push('.ts', '.tsx');
+  return config;
+};

packages/common/now.json

@@ -0,0 +1,14 @@
+{
+  "version": 2,
+  "name": "codesandbox-storybook",
+  "alias": "codesandbox-storybook",
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@now/static-build",
+      "config": {
+        "distDir": "storybook-static"
+      }
+    }
+  ]
+}

packages/common/package.json

@@ -8,14 +8,17 @@
   "scripts": {
     "test": "jest",
     "clean": "rimraf lib && yarn rimraf node_modules/@types/react-native",
-    "start": "(yarn tsc --watch & yarn babel src --out-dir lib --watch & yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib --watch)",
-    "build": "yarn clean && yarn tsc && yarn babel src --out-dir lib && yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib",
-    "build:dev": "yarn build",
-    "prepublish": "yarn build"
+    "start": "yarn clean && (yarn tsc --watch & yarn babel src --out-dir lib --watch & yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib --watch)",
+    "build:dev": "yarn clean && yarn tsc && yarn babel src --out-dir lib && yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib",
+    "storybook": "start-storybook -p 6006",
+    "now-build": "build-storybook"
   },
   "dependencies": {
     "@babel/plugin-transform-flow-strip-types": "^7.0.0",
     "@sentry/browser": "^4.6.6",
+    "@storybook/core": "^5.0.3",
+    "@storybook/react": "^5.0.3",
+    "@storybook/theming": "^5.0.3",
     "@tippy.js/react": "^2.1.1",
     "babel-plugin-preval": "^3.0.1",
     "codesandbox-api": "^0.0.22",
@@ -42,6 +45,10 @@
   "devDependencies": {
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.3.4",
+    "@storybook/addon-a11y": "^5.0.3",
+    "@storybook/addon-actions": "^5.0.3",
+    "@storybook/addon-knobs": "^5.0.3",
+    "@storybook/addon-viewport": "^5.0.3",
     "@types/color": "0.12.1",
     "@types/humps": "^1.1.2",
     "@types/jest": "^24.0.9",
@@ -51,6 +58,7 @@
     "@types/socket.io-client": "^1.4.32",
     "@types/styled-components": "^4.1.13",
     "babel-jest": "^23.6.0",
+    "babel-loader": "8.0.2",
     "cpx": "^1.5.0",
     "jest": "^21.2.1",
     "rimraf": "^2.6.3",

packages/common/src/components/AutosizeInput/index.stories.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+
+import AutosizeInput from './index.tsx';
+
+storiesOf('AutosizeInput', module).add('Primary', () => (
+  <AutosizeInput value={text('value', 'hello')} />
+));

packages/common/src/components/AutosizeTextArea/index.stories.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+
+import AutosizeTextarea from './index.tsx';
+
+storiesOf('AutosizeTextarea', module).add('Primary', () => (
+  <AutosizeTextarea value={text('value', 'hello')} />
+));

packages/common/src/components/Button/index.stories.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { text, boolean } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { Button } from './index.tsx';
+
+storiesOf('Button', module)
+  .add('Primary', () => (
+    <Button onClick={action('clicked')}>{text('Label', 'CodeSandbox')}</Button>
+  ))
+  .add('Small', () => (
+    <Button small={boolean('small', true)} onClick={action('clicked')}>
+      {text('Label', 'CodeSandbox')}
+    </Button>
+  ))
+  .add('Block (Full width)', () => (
+    <Button block={boolean('block', true)} onClick={action('clicked')}>
+      {text('Label', 'CodeSandbox')}
+    </Button>
+  ))
+  .add('Secondary', () => (
+    <Button secondary={boolean('secondary', true)} onClick={action('clicked')}>
+      {text('Label', 'CodeSandbox')}
+    </Button>
+  ))
+  .add('Disabled', () => (
+    <Button disabled={boolean('disabled', true)} onClick={action('clicked')}>
+      {text('Label', 'CodeSandbox')}
+    </Button>
+  ))
+  .add('Danger', () => (
+    <Button danger={boolean('danger', true)} onClick={action('clicked')}>
+      {text('Label', 'CodeSandbox')}
+    </Button>
+  ))
+  .add('Red', () => (
+    <Button red={boolean('red', true)} onClick={action('clicked')}>
+      {text('Label', 'CodeSandbox')}
+    </Button>
+  ));

packages/common/src/components/CommunityBadges/index.stories.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { select } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+
+import Badge from './index.tsx';
+
+const templates = [
+  'create-react-app',
+  'vue-cli',
+  'preact-cli',
+  'svelte',
+  'create-react-app-typescript',
+  'angular-cli',
+  'parcel',
+  'cxjs',
+  '@dojo/cli-create-app',
+  'gatsby',
+  'nuxt',
+  'next',
+  'reason',
+  'apollo',
+  'sapper',
+  'nest',
+  'static',
+  'styleguidist',
+];
+
+const FrameworkBadge = ({ template, sandboxNumber = 100 }) => (
+  <div
+    style={{
+      width: 64,
+      height: 50,
+    }}
+  >
+    <Badge
+      sandboxesNumber={sandboxNumber}
+      style={{
+        width: 64,
+        height: 50,
+      }}
+      template={select('template', templates, template)}
+    />
+  </div>
+);
+
+templates.map(t =>
+  storiesOf('Community Badge/Gold', module).add(t, () => (
+    <FrameworkBadge template={t} />
+  ))
+);
+
+templates.map(t =>
+  storiesOf('Community Badge/Silver', module).add(t, () => (
+    <FrameworkBadge sandboxNumber={51} template={t} />
+  ))
+);

packages/common/src/components/ContributorsBadge/index.stories.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+
+import ContributorsBadge from './index.tsx';
+
+storiesOf('ContributorsBadge', module).add('Default', () => (
+  <ContributorsBadge username={text('username', 'SaraVieira')} />
+));

packages/common/src/components/Footer.stories.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Footer from './Footer.tsx';
+
+storiesOf('Footer', module).add('Default', () => <Footer />);

packages/common/src/components/GithubBadge/index.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+
+import GithubBadge from './index.tsx';
+
+storiesOf('GithubBadge', module).add('Default', () => (
+  <GithubBadge
+    username={text('username', 'CompuIves')}
+    repo={text('repo', 'codesandbox-client')}
+    branch={text('branch', 'storybook')}
+  />
+));

packages/common/src/components/Input/index.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+
+import Input from './index.tsx';
+
+storiesOf('Input', module)
+  .add('Primary', () => <Input value={text('value', 'hello')} />)
+  .add('Error', () => <Input error value={text('value', 'hello')} />)
+  .add('FullWidth', () => <Input fullWidth value={text('value', 'hello')} />);

packages/common/src/components/Logo.stories.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Logo from './Logo.tsx';
+
+storiesOf('Logo', module).add('Default', () => <Logo />);