Design system yay (codesandbox#2295)

* add more stories

* add more

* add more

* Update packages/common/src/templates/configuration/sandbox/ui.tsx

Co-Authored-By: Ives van Hoorne <[email protected]>

* fix ts

* fix ts

* fix tests

* add now.json

Author: SaraVieira

packages/common/.gitignore

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

packages/common/.storybook/addons.ts

@@ -1,2 +1,5 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-knobs/register';
+import '@storybook/addon-storysource/register';
+import '@storybook/addon-viewport/register';
+import '@storybook/addon-a11y/register';

packages/common/.storybook/config.tsx

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 
 import { withKnobs } from '@storybook/addon-knobs';
+import { withA11y } from '@storybook/addon-a11y';
 import { addDecorator, addParameters, configure } from '@storybook/react';
 import { themes } from '@storybook/theming';
 
@@ -10,21 +11,57 @@ import { createGlobalStyle } from 'styled-components';
 
 import global from '../src/global.css';
 
+const viewports = {
+  mobile: {
+    name: 'Mobile',
+    styles: {
+      width: '375px',
+      height: '667px',
+    },
+  },
+  tablet: {
+    name: 'Tablet',
+    styles: {
+      width: '768px',
+      height: '1024px',
+    },
+  },
+  laptop: {
+    name: 'Laptop',
+    styles: {
+      width: '1366px',
+      height: '768px',
+    },
+  },
+  desktop: {
+    name: 'Desktop',
+    styles: {
+      width: '1920px',
+      height: '1080px',
+    },
+  },
+};
+
 const GlobalStyle = createGlobalStyle`
   ${global}
 `;
 
 export const withGlobal = cb => (
   <Fragment>
     <GlobalStyle />
-
     {cb()}
   </Fragment>
 );
 
+addDecorator(withA11y);
 addDecorator(withKnobs);
 addDecorator(withGlobal);
 addDecorator(ThemeDecorator);
+addParameters({
+  viewport: {
+    viewports,
+  },
+});
 
 // Option defaults.
 addParameters({

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

@@ -10,6 +10,11 @@ module.exports = ({ config }) => {
       },
     ],
   });
+  config.module.rules.push({
+    test: /\.stories\.jsx?$/,
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
+    enforce: 'pre',
+  });
   config.resolve.extensions.push('.ts', '.tsx');
   return config;
 };

packages/common/now.json

@@ -0,0 +1,5 @@
+{
+  "version": 2,
+  "name": "storybook",
+  "alias": "storybook-codesandbox"
+}

packages/common/package.json

@@ -15,14 +15,18 @@
     "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)",
     "start:storybook": "start-storybook",
-    "build-storybook": "build-storybook -c .storybook -o public",
-    "build": "yarn clean && yarn tsc && yarn babel src --out-dir lib && yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib",
+    "build:storybook": "build-storybook -c .storybook -o public",
+    "build:lib": "yarn clean && yarn tsc && yarn babel src --out-dir lib && yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib",
+    "build": "yarn build:lib && yarn build:storybook",
     "build:dev": "yarn build",
     "prepublish": "yarn build"
   },
   "dependencies": {
     "@babel/plugin-transform-flow-strip-types": "^7.0.0",
     "@sentry/browser": "^5.6.2",
+    "@babel/polyfill": "^7.4.4",
+    "@codesandbox/notifications": "^1.0.3",
+    "@codesandbox/template-icons": "^0.7.0",
     "@tippy.js/react": "^2.1.1",
     "babel-plugin-preval": "^3.0.1",
     "codesandbox-api": "^0.0.22",
@@ -50,8 +54,16 @@
   "devDependencies": {
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-async-to-generator": "^7.5.0",
+    "@babel/plugin-transform-runtime": "^7.5.5",
+    "@storybook/addon-a11y": "^5.1.11",
     "@storybook/addon-actions": "^5.1.9",
     "@storybook/addon-knobs": "^5.1.9",
+    "@storybook/addon-storysource": "^5.1.11",
+    "@storybook/addon-viewport": "^5.1.11",
     "@storybook/react": "^5.1.9",
     "@types/color": "0.12.1",
     "@types/humps": "^1.1.2",
@@ -64,6 +76,9 @@
     "@types/styled-components": "^4.1.13",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
+    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-macros": "^2.6.1",
+    "babel-plugin-system-import-transformer": "^4.0.0",
     "cpx": "^1.5.0",
     "jest": "^24.8.0",
     "rimraf": "^2.6.3",

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

@@ -1,7 +1,9 @@
-import * as React from 'react';
+import React from 'react';
 import { storiesOf } from '@storybook/react';
 import AutosizeInput from './';
 
 const stories = storiesOf('components/Input', module);
 
-stories.add('Basic AutosizeInput', () => <AutosizeInput />);
+stories.add('Basic AutosizeInput', () => (
+  <AutosizeInput value="I am a fancy input" />
+));

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

@@ -1,6 +1,8 @@
-import * as React from 'react';
+import React from 'react';
 import { storiesOf } from '@storybook/react';
 import AutosizeTextArea from './';
 
 const stories = storiesOf('components/Input', module);
-stories.add('Basic AutosizeTextArea', () => <AutosizeTextArea />);
+stories.add('Basic AutosizeTextArea', () => (
+  <AutosizeTextArea value="I am a fancy textarea" />
+));

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { text, boolean } from '@storybook/addon-knobs';

packages/common/src/components/Checkbox/index.stories.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Checkbox } from './';
 
-const stories = storiesOf('components/Input', module);
+const stories = storiesOf('components/Checkbox', module);
 
 stories
   .add('Basic Checkbox', () => (