Merge pull request #7 from kadirahq/better-default-stories

Add better default stories

bin/generate.js

@@ -34,24 +34,22 @@ var projectType;
 
 var done = commandLog('Detecting project type');
 try {
-  projectType = detect();
+  projectType = detect({
+    force: program.force,
+  });
 } catch (ex) {
   done(ex.message);
   process.exit(1);
 }
 done();
 
 switch (projectType) {
-  /* eslint-disable no-fallthrough */
   case types.ALREADY_HAS_STORYBOOK:
-    if (!program.force) {
-      logger.log();
-      paddedLog('There seems to be a storybook already available in this project.');
-      paddedLog('Apply following command to force:\n');
-      codeLog(['getstorybook -f']);
-      break;
-    }
-  /* eslint-enable no-fallthrough */
+    logger.log();
+    paddedLog('There seems to be a storybook already available in this project.');
+    paddedLog('Apply following command to force:\n');
+    codeLog(['getstorybook -f']);
+    break;
   case types.REACT_SCRIPTS:
     done = commandLog('Adding storybook support to your "Create React App" based project');
     require('../generators/REACT_SCRIPTS');

generators/REACT/template/stories/Button.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const buttonStyles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+const Button = ({ children, onClick }) => (
+  <button
+    style={buttonStyles}
+    onClick={onClick}
+  >
+    {children}
+  </button>
+);
+
+Button.propTypes = {
+  children: React.PropTypes.string.isRequired,
+  onClick: React.PropTypes.func,
+};
+
+export default Button;

generators/REACT/template/stories/Welcome.js

@@ -0,0 +1,73 @@
+import React from 'react';
+
+const styles = {
+  main: {
+    margin: 15,
+    maxWidth: 600,
+    lineHeight: 1.4,
+    fontFamily: '-apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif',
+  },
+
+  logo: {
+    width: 200,
+  },
+
+  link: {
+    color: '#1474f3',
+    textDecoration: 'none',
+    borderBottom: '1px solid #1474f3',
+    paddingBottom: 2,
+  },
+
+  code: {
+    fontSize: 15,
+    fontWeight: 600,
+    padding: "2px 5px",
+    border: "1px solid #eae9e9",
+    borderRadius: 4,
+    backgroundColor: '#f3f2f2',
+    color: '#3a3a3a',
+  },
+};
+
+export default class Welcome extends React.Component {
+  showApp(e) {
+    e.preventDefault();
+    if(this.props.showApp) this.props.showApp();
+  }
+
+  render() {
+    return (
+      <div style={styles.main}>
+        <h1>Welcome to Storybook</h1>
+        <img style={styles.logo} src="https://cdn.rawgit.com/kadirahq/react-storybook/master/docs/logo.png" />
+        <p>
+          This is a UI component dev environment for your app.
+        </p>
+        <p>
+          We've added some basic stories inside the <code style={styles.code}>src/stories</code> directory.
+          <br/>
+          A story is a single state of one or more UI components. You can have as many stories as you want.
+          <br/>
+          (Basically a story is like a visual test case.)
+        </p>
+        <p>
+          See these sample <a style={styles.link} href='#' onClick={this.showApp.bind(this)}>stories</a> for a component called <code style={styles.code}>Button</code>.
+        </p>
+        <p>
+          Just like that, you can add your own components as stories.
+          <br />
+          You can also edit those components and see changes right away.
+          <br />
+          (Try editing the <code style={styles.code}>Button</code> component
+          located at <code style={styles.code}>src/stories/Button.js</code>.)
+        </p>
+        <p>
+          This is just one thing you can do with Storybook.
+          <br/>
+          Have a look at the <a style={styles.link} href="https://github.com/kadirahq/react-storybook" target="_blank">React Storybook</a> repo for more information.
+        </p>
+      </div>
+    );
+  }
+}

generators/REACT/template/stories/index.js

@@ -1,10 +1,17 @@
 import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
+import { storiesOf, action, linkTo } from '@kadira/storybook';
+import Button from './Button';
+import Welcome from './Welcome';
+
+storiesOf('Welcome', module)
+  .add('to Storybook', () => (
+    <Welcome showApp={linkTo('Button')}/>
+  ));
 
 storiesOf('Button', module)
   .add('with text', () => (
-    <button onClick={action('clicked')}>My First Button</button>
+    <Button onClick={action('clicked')}>Hello Button</Button>
   ))
-  .add('with no text', () => (
-    <button></button>
+  .add('with some emojies', () => (
+    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
   ));

generators/REACT_SCRIPTS/template/src/stories/Button.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const buttonStyles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+const Button = ({ children, onClick }) => (
+  <button
+    style={buttonStyles}
+    onClick={onClick}
+  >
+    {children}
+  </button>
+);
+
+Button.propTypes = {
+  children: React.PropTypes.string.isRequired,
+  onClick: React.PropTypes.func,
+};
+
+export default Button;

generators/REACT_SCRIPTS/template/src/stories/Welcome.js

@@ -0,0 +1,73 @@
+import React from 'react';
+
+const styles = {
+  main: {
+    margin: 15,
+    maxWidth: 600,
+    lineHeight: 1.4,
+    fontFamily: '-apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif',
+  },
+
+  logo: {
+    width: 200,
+  },
+
+  link: {
+    color: '#1474f3',
+    textDecoration: 'none',
+    borderBottom: '1px solid #1474f3',
+    paddingBottom: 2,
+  },
+
+  code: {
+    fontSize: 15,
+    fontWeight: 600,
+    padding: "2px 5px",
+    border: "1px solid #eae9e9",
+    borderRadius: 4,
+    backgroundColor: '#f3f2f2',
+    color: '#3a3a3a',
+  },
+};
+
+export default class Welcome extends React.Component {
+  showApp(e) {
+    e.preventDefault();
+    if(this.props.showApp) this.props.showApp();
+  }
+
+  render() {
+    return (
+      <div style={styles.main}>
+        <h1>Welcome to Storybook</h1>
+        <img style={styles.logo} src="https://cdn.rawgit.com/kadirahq/react-storybook/master/docs/logo.png" />
+        <p>
+          This is a UI component dev environment for your app.
+        </p>
+        <p>
+          We've added some basic stories inside the <code style={styles.code}>src/stories</code> directory.
+          <br/>
+          A story is a single state of one or more UI components. You can have as many stories as you want.
+          <br/>
+          (Basically a story is like a visual test case.)
+        </p>
+        <p>
+          See these sample <a style={styles.link} href='#' onClick={this.showApp.bind(this)}>stories</a> for a component called <code style={styles.code}>Button</code>.
+        </p>
+        <p>
+          Just like that, you can add your own components as stories.
+          <br />
+          You can also edit those components and see changes right away.
+          <br />
+          (Try editing the <code style={styles.code}>Button</code> component
+          located at <code style={styles.code}>src/stories/Button.js</code>.)
+        </p>
+        <p>
+          This is just one thing you can do with Storybook.
+          <br/>
+          Have a look at the <a style={styles.link} href="https://github.com/kadirahq/react-storybook" target="_blank">React Storybook</a> repo for more information.
+        </p>
+      </div>
+    );
+  }
+}

generators/REACT_SCRIPTS/template/src/stories/index.js

@@ -1,8 +1,17 @@
 import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
-import App from '../App';
+import { storiesOf, action, linkTo } from '@kadira/storybook';
+import Button from './Button';
+import Welcome from './Welcome';
 
-storiesOf('App', module)
-  .add('Default View', () => (
-    <App />
+storiesOf('Welcome', module)
+  .add('to Storybook', () => (
+    <Welcome showApp={linkTo('Button')}/>
+  ));
+
+storiesOf('Button', module)
+  .add('with text', () => (
+    <Button onClick={action('clicked')}>Hello Button</Button>
+  ))
+  .add('with some emojies', () => (
+    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
   ));

lib/detect.js

@@ -1,13 +1,14 @@
 var types = require('./project_types.js');
 var helpers = require('./helpers');
 
-module.exports = function detect() {
+module.exports = function detect(options = { force: false }) {
   var packageJson = helpers.getPackageJson();
   if (!packageJson) {
     return types.UNDETECTED;
   }
 
   if (
+    !options.force &&
     packageJson.devDependencies &&
     (
       packageJson.devDependencies['@kadira/storybook'] ||