diff --git a/package.json b/package.json index 5fa62e44c1d..74b82c5f46c 100644 --- a/package.json +++ b/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", diff --git a/packages/common/.gitignore b/packages/common/.gitignore index a65b41774ad..232c27dee80 100644 --- a/packages/common/.gitignore +++ b/packages/common/.gitignore @@ -1 +1,2 @@ lib +storybook-static diff --git a/packages/common/.storybook/addons.js b/packages/common/.storybook/addons.js new file mode 100644 index 00000000000..ec96a8e05da --- /dev/null +++ b/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'; diff --git a/packages/common/.storybook/config.js b/packages/common/.storybook/config.js new file mode 100644 index 00000000000..f1be80056eb --- /dev/null +++ b/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 => {story()}); + +configure(loadStories, module); +addDecorator(withKnobs); +addDecorator(withA11y); diff --git a/packages/common/.storybook/consts.js b/packages/common/.storybook/consts.js new file mode 100644 index 00000000000..3f6940bb526 --- /dev/null +++ b/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: + '\n\n\n\n\t\n\t\n\t\n\tStatic Template\n\n\n\n\t

This is a static template, there is no bundler or bundling involved!

\n\n\n', + }, + { + 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: 'sara@codesandbox.io', + 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', + }, +}; diff --git a/packages/common/.storybook/preview-head.html b/packages/common/.storybook/preview-head.html new file mode 100644 index 00000000000..0388eecb815 --- /dev/null +++ b/packages/common/.storybook/preview-head.html @@ -0,0 +1,8 @@ + + diff --git a/packages/common/.storybook/theme.js b/packages/common/.storybook/theme.js new file mode 100644 index 00000000000..67dddc1aaae --- /dev/null +++ b/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', +}); diff --git a/packages/common/.storybook/webpack.config.js b/packages/common/.storybook/webpack.config.js new file mode 100644 index 00000000000..5a3af637a4d --- /dev/null +++ b/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; +}; diff --git a/packages/common/now.json b/packages/common/now.json new file mode 100644 index 00000000000..46c3c4c6a30 --- /dev/null +++ b/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" + } + } + ] +} diff --git a/packages/common/package.json b/packages/common/package.json index 9a13d12d87d..ed49e650584 100644 --- a/packages/common/package.json +++ b/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", diff --git a/packages/common/src/components/AutosizeInput/index.stories.js b/packages/common/src/components/AutosizeInput/index.stories.js new file mode 100644 index 00000000000..12681d850e6 --- /dev/null +++ b/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', () => ( + +)); diff --git a/packages/common/src/components/AutosizeTextArea/index.stories.js b/packages/common/src/components/AutosizeTextArea/index.stories.js new file mode 100644 index 00000000000..1bf88085829 --- /dev/null +++ b/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', () => ( + +)); diff --git a/packages/common/src/components/Button/index.stories.js b/packages/common/src/components/Button/index.stories.js new file mode 100644 index 00000000000..3e20a9ba1e2 --- /dev/null +++ b/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', () => ( + + )) + .add('Small', () => ( + + )) + .add('Block (Full width)', () => ( + + )) + .add('Secondary', () => ( + + )) + .add('Disabled', () => ( + + )) + .add('Danger', () => ( + + )) + .add('Red', () => ( + + )); diff --git a/packages/common/src/components/CommunityBadges/index.stories.js b/packages/common/src/components/CommunityBadges/index.stories.js new file mode 100644 index 00000000000..6fb7ba69726 --- /dev/null +++ b/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 }) => ( +
+ +
+); + +templates.map(t => + storiesOf('Community Badge/Gold', module).add(t, () => ( + + )) +); + +templates.map(t => + storiesOf('Community Badge/Silver', module).add(t, () => ( + + )) +); diff --git a/packages/common/src/components/ContributorsBadge/index.stories.js b/packages/common/src/components/ContributorsBadge/index.stories.js new file mode 100644 index 00000000000..d0d0c86679b --- /dev/null +++ b/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', () => ( + +)); diff --git a/packages/common/src/components/Footer.stories.js b/packages/common/src/components/Footer.stories.js new file mode 100644 index 00000000000..4550832bada --- /dev/null +++ b/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', () =>