Merge pull request #1288 from storybooks/1220-cra-kitchensink-reboot

Redo CRA kitchen sink work from scratch

examples/cra-storybook/.storybook/addons.js → examples/cra-kitchen-sink/.storybook/addons.js

@@ -1,3 +1,6 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-events/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-options/register';
+import '@storybook/addon-knobs/register';

examples/cra-kitchen-sink/.storybook/config.js

@@ -0,0 +1,22 @@
+import { configure, setAddon } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
+import infoAddon from '@storybook/addon-info';
+
+setOptions({
+  name: 'CRA Kitchen Sink',
+  url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink',
+  goFullScreen: false,
+  showLeftPanel: true,
+  showDownPanel: true,
+  showSearchBox: false,
+  downPanelInRight: true,
+  sortStoriesByKind: false,
+})
+
+setAddon(infoAddon);
+
+function loadStories() {
+  require('../src/stories');
+}
+
+configure(loadStories, module);

examples/cra-storybook/package.json → examples/cra-kitchen-sink/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "cra-storybook",
+  "name": "cra-kitchen-sink",
   "version": "1.0.0",
   "scripts": {
     "build": "react-scripts build",
@@ -20,8 +20,13 @@
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.0.0",
-    "@storybook/addon-links": "^3.0.0",
+    "@storybook/addon-centered": "^3.0.0",
     "@storybook/addon-events": "^3.0.0",
+    "@storybook/addon-knobs": "^3.0.0",
+    "@storybook/addon-info": "^3.0.0",
+    "@storybook/addon-links": "^3.0.0",
+    "@storybook/addon-notes": "^3.0.0",
+    "@storybook/addon-options": "^3.0.0",
     "@storybook/addons": "^3.0.0",
     "@storybook/react": "^3.0.0",
     "react-scripts": "1.0.1"

examples/cra-storybook/src/stories/index.js → examples/cra-kitchen-sink/src/stories/index.js

@@ -1,11 +1,13 @@
 import React from 'react';
-
 import EventEmiter from 'eventemitter3';
 
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 import WithEvents from '@storybook/addon-events';
+import { WithNotes } from '@storybook/addon-notes';
+import { withKnobs, text, number } from '@storybook/addon-knobs';
+import centered from '@storybook/addon-centered';
 
 import Button from './Button';
 import Welcome from './Welcome';
@@ -25,12 +27,32 @@ const emit = emiter.emit.bind(emiter);
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
 storiesOf('Button', module)
+  .addDecorator(withKnobs)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
+  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>)
+  .add('with notes', () =>
+    <WithNotes notes={'A very simple button'}>
+      <Button>Check my notes in the notes panel</Button>
+    </WithNotes>
+  )
+  .add('with knobs', () => {
+    const label = text('Label', 'Edit me in knobs panel');
+    const num = number('Number', 1);
+    const content = `I am ${label} and I'm ${num} years old.`;
+
+    return <Button>{content}</Button>;
+  })
+  .addWithInfo(
+    'with some info',
+    'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its painful API.',
+    () => <Button>click the "?" in top right for info</Button>
+  );
+
+storiesOf('App', module).add('full app', () => <App />);
 
-storiesOf('App', module)
-  .add('with text', () => <App />)
-  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
+storiesOf('Centered Button', module)
+  .addDecorator(centered)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
 
 storiesOf('WithEvents', module)
   .addDecorator(getStory =>

examples/package.json

@@ -4,7 +4,7 @@
   "description": "A set of examples of how to use storybook, also used for regression testing",
   "main": "index.js",
   "scripts": {
-    "test:automated-cra-storybook": "node scripts/automated-cra-storybook.js"
+    "test:automated-cra-getstorybook": "node scripts/automated-cra-getstorybook.js"
   },
   "license": "ISC",
   "dependencies": {

examples/scripts/automated-cra-storybook.js → examples/scripts/automated-cra-getstorybook.js

@@ -6,7 +6,7 @@
 const { exec } = require('child-process-promise');
 const rimraf = require('rimraf');
 
-const targetFolder = 'automated-cra-storybook';
+const targetFolder = 'automated-cra-getstorybook';
 
 const cleanDir = () => new Promise(resolve => rimraf(`./${targetFolder}`, resolve));
 

jest.config.js

@@ -10,7 +10,7 @@ module.exports = {
     '<rootDir>/addons',
     '<rootDir>/app',
     '<rootDir>/lib',
-    '<rootDir>/examples/cra-storybook',
+    '<rootDir>/examples/cra-kitchen-sink',
     '<rootDir>/examples/test-cra',
   ],
   testPathIgnorePatterns: ['/node_modules/'],

lerna.json

@@ -9,7 +9,7 @@
     },
     "publish": {
       "ignore": [
-        "cra-storybook",
+        "cra-kitchen-sink",
         "test-cra",
         "react-native-vanilla"
       ]