cli: colocate stories and components, centralize main.js

addons/essentials/src/index.ts

@@ -35,6 +35,6 @@ export function addons(options: PresetOptions = {}) {
   const main = requireMain(options.configDir);
   return ['actions', 'docs', 'backgrounds', 'viewport']
     .filter((key) => (options as any)[key] !== false)
-    .map((key) => `@storybook/addon-${key}`)
+    .map((key) => require.resolve(`@storybook/addon-${key}`))
     .filter((addon) => !checkInstalled(addon, main));
 }

app/angular/src/demo/welcome.component.ts

@@ -51,11 +51,9 @@ import { Component, Output, EventEmitter } from '@angular/core';
         font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
         background-color: #ffffff;
       }
-
       .note {
         opacity: 0.5;
       }
-
       .inline-code {
         font-size: 15px;
         font-weight: 600;
@@ -65,7 +63,6 @@ import { Component, Output, EventEmitter } from '@angular/core';
         background-color: #f3f2f2;
         color: #3a3a3a;
       }
-
       a {
         color: #1474f3;
         text-decoration: none;

examples/aurelia-kitchen-sink/src/stories/mdx.stories.mdx

@@ -1,10 +1,10 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { CoolButton } from '../cool-button/cool-button';
-import { Button } from '@storybook/aurelia/demo';
 import { addComponents } from '@storybook/aurelia';
-import { text, withKnobs, } from '@storybook/addon-knobs';
+import { text, withKnobs } from '@storybook/addon-knobs';
+import Button from './button';
 
-<Meta title="Welcome" component={CoolButton} decorators={[withKnobs]}/>
+<Meta title="Welcome" component={CoolButton} decorators={[withKnobs]} />
 
 # Welcome
 
@@ -15,10 +15,8 @@ This is a test document written in MDX that defines a `CoolButton` story wrapped
     {{
       template: `<cool-button text.bind="testText"></cool-button>`,
       state: {
-        testText: text('asfdafds', 'asasfdsa')
-      }
+        testText: text('asfdafds', 'asasfdsa'),
+      },
     }}
   </Story>
 </Preview>
-
-

lib/cli/.babelrc.json

@@ -12,6 +12,7 @@
     ]
   ],
   "ignore": [
+    "./src/frameworks",
     "./src/generators/**/template",
     "./src/generators/**/template-csf",
     "./src/generators/**/template-csf-ts",

lib/cli/src/generators/.eslintrc.js → lib/cli/src/.eslintrc.js

@@ -3,16 +3,17 @@ const ignore = 0;
 module.exports = {
   overrides: [
     {
-      files: '*/template[-?]*/**',
+      files: '**/template[-?]*/**',
       env: {
         browser: true,
       },
       rules: {
         'react/no-this-in-sfc': ignore,
         'import/no-unresolved': ignore,
+        'react/react-in-jsx-scope': ignore,
         'import/no-extraneous-dependencies': ignore,
         'global-require': ignore,
-        'react/react-in-jsx-scope': ignore,
+        'no-redeclare': ignore,
       },
     },
     {
@@ -21,5 +22,18 @@ module.exports = {
         browser: false,
       },
     },
+    {
+      files: 'frameworks/**/*',
+      env: {
+        browser: true,
+      },
+      rules: {
+        'jsx-a11y/anchor-is-valid': ignore,
+        'import/no-unresolved': ignore,
+        'react/prop-types': ignore,
+        'react/react-in-jsx-scope': ignore,
+        'import/no-extraneous-dependencies': ignore,
+      },
+    },
   ],
 };

lib/cli/src/generators/AURELIA/template-csf/src/stories/0-Welcome.stories.ts → lib/cli/src/frameworks/angular/0-Welcome.stories.ts

@@ -1,4 +1,4 @@
-import { Welcome } from '@storybook/aurelia/demo';
+import Welcome from './welcome.component';
 
 export default {
   title: 'Welcome',

lib/cli/src/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts → lib/cli/src/frameworks/angular/1-Button.stories.ts

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
-import { Button } from '@storybook/angular/demo';
+import Button from './button.component';
 
 export default {
   title: 'Button',

lib/cli/src/frameworks/angular/button.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'storybook-button-component',
+  template: ` <button (click)="onClick.emit($event)">{{ text }}</button> `,
+  styles: [
+    `
+      button {
+        border: 1px solid #eee;
+        border-radius: 3px;
+        background-color: #ffffff;
+        cursor: pointer;
+        font-size: 15px;
+        padding: 3px 10px;
+        margin: 10px;
+      }
+    `,
+  ],
+})
+export default class ButtonComponent {
+  @Input()
+  text = '';
+
+  @Output()
+  onClick = new EventEmitter<any>();
+}

lib/cli/src/frameworks/angular/welcome.component.ts

@@ -0,0 +1,81 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'storybook-welcome-component',
+  template: `
+    <main>
+      <h1>Welcome to storybook</h1>
+      <p>This is a UI component dev environment for your app.</p>
+      <p>
+        We've added some basic stories inside the
+        <span class="inline-code">src/stories</span> 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 (click)="showApp.emit($event)" role="button" tabIndex="0">stories</a> for a component
+        called <span class="inline-code">Button</span> .
+      </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 <span class="inline-code">Button</span> stories located at
+        <span class="inline-code">src/stories/index.js</span>.)
+      </p>
+      <p>
+        Usually we create stories with smaller UI components in the app.<br />
+        Have a look at the
+        <a
+          href="https://storybook.js.org/basics/writing-stories"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Writing Stories
+        </a>
+        section in our documentation.
+      </p>
+      <p class="note">
+        <b>NOTE:</b> <br />
+        Have a look at the <span class="inline-code">.storybook/webpack.config.js</span> to add
+        webpack loaders and plugins you are using in this project.
+      </p>
+    </main>
+  `,
+  styles: [
+    `
+      main {
+        padding: 15px;
+        line-height: 1.4;
+        font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+        background-color: #ffffff;
+      }
+
+      .note {
+        opacity: 0.5;
+      }
+
+      .inline-code {
+        font-size: 15px;
+        font-weight: 600;
+        padding: 2px 5px;
+        border: 1px solid #eae9e9;
+        border-radius: 4px;
+        background-color: #f3f2f2;
+        color: #3a3a3a;
+      }
+
+      a {
+        color: #1474f3;
+        text-decoration: none;
+        border-bottom: 1px solid #1474f3;
+        padding-bottom: 2px;
+      }
+    `,
+  ],
+})
+export default class WelcomeComponent {
+  @Output()
+  showApp = new EventEmitter<any>();
+}

lib/cli/src/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts → lib/cli/src/frameworks/aurelia/0-Welcome.stories.ts

@@ -1,4 +1,4 @@
-import { Welcome } from '@storybook/angular/demo';
+import Welcome from './welcome';
 
 export default {
   title: 'Welcome',

lib/cli/src/generators/AURELIA/template-csf/src/stories/1-Button.stories.ts → lib/cli/src/frameworks/aurelia/1-Button.stories.ts

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
-import { Button } from '@storybook/aurelia/demo';
+import Button from './button';
 
 export default {
   title: 'Button',

lib/cli/src/frameworks/aurelia/button.ts

@@ -0,0 +1,28 @@
+import { customElement, bindable } from 'aurelia';
+
+@customElement({
+  name: 'storybook-button-component',
+  template: `
+  <template>
+    <button click.delegate="onClick($event)">\${text}</button>
+    <style>
+    button {
+      border: 1px solid #eee;
+      border-radius: 3px;
+      background-color: #ffffff;
+      cursor: pointer;
+      font-size: 15px;
+      padding: 3px 10px;
+      margin: 10px;
+    }
+    </style>
+    </template>
+  `,
+})
+export default class Button {
+  @bindable()
+  text = '';
+
+  @bindable()
+  onClick: MouseEvent;
+}

lib/cli/src/generators/MARIONETTE/template/stories/index.stories.js → lib/cli/src/frameworks/marionette/index.stories.js

@@ -1,11 +1,11 @@
-import Marionette from 'backbone.marionette';
+import { View } from 'backbone.marionette';
 
 import { storiesOf } from '@storybook/marionette';
 
 storiesOf('Demo', module).add(
   'button',
   () =>
-    new Marionette.View({
+    new View({
       template: () => '<button id="my_button">some button</button>',
       ui: {
         button: '#my_button',

lib/cli/src/generators/MARKO/template-csf/stories/index.stories.js → lib/cli/src/frameworks/marko/0-Welcome.stories.js

@@ -1,4 +1,4 @@
-import Welcome from './components/welcome/index.marko';
+import Welcome from './welcome.marko';
 
 export default {
   title: 'Welcome',

lib/cli/src/frameworks/marko/welcome.marko

@@ -0,0 +1,37 @@
+
+class {
+  onCreate() {}
+}
+
+style {
+  #app {
+    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    margin-top: 60px;
+  }
+
+  h1, h2 {
+    font-weight: normal;
+  }
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  li {
+    display: inline-block;
+    margin: 0 10px;
+  }
+
+  a {
+    color: #42b983;
+  }
+}
+
+<div#app>
+  <h1>Welcome to storybook</h1>
+</div>

lib/cli/src/generators/PREACT/template-csf/stories/Button.js → lib/cli/src/frameworks/preact/Button.js

@@ -1,5 +1,5 @@
 /** @jsx h */
-/* eslint-disable react/no-unknown-property, react/prop-types */
+/* eslint-disable react/no-unknown-property */
 import { h } from 'preact';
 
 const Button = ({ children, ...props }) => (

lib/cli/src/generators/PREACT/template-csf/stories/Welcome.js → lib/cli/src/frameworks/preact/Welcome.js

@@ -13,7 +13,6 @@ const Main = (props) => (
   />
 );
 
-// eslint-disable-next-line react/prop-types
 const Title = ({ children, ...props }) => <h1 {...props}>{children}</h1>;
 
 const Note = (props) => (
@@ -40,7 +39,6 @@ const InlineCode = (props) => (
   />
 );
 
-// eslint-disable-next-line react/prop-types
 const Link = ({ children, href, ...props }) => (
   <a
     href={href}
@@ -56,7 +54,6 @@ const Link = ({ children, href, ...props }) => (
   </a>
 );
 
-// eslint-disable-next-line react/prop-types
 const NavButton = ({ children, ...props }) => (
   <button
     {...props}
@@ -79,7 +76,6 @@ const NavButton = ({ children, ...props }) => (
   </button>
 );
 
-/* eslint-disable-next-line react/prop-types */
 const Welcome = ({ showApp }) => (
   <Main>
     <Title>Welcome to storybook</Title>

lib/cli/src/generators/RAX/template-csf/stories/Welcome.js → lib/cli/src/frameworks/rax/Welcome.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types, jsx-a11y/anchor-is-valid */
 import { createElement } from 'rax';
 import View from 'rax-view';
 import Text from 'rax-text';

lib/cli/src/generators/REACT/template-csf/stories/0-Welcome.stories.js → lib/cli/src/frameworks/react/js/0-Welcome.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { linkTo } from '@storybook/addon-links';
-import { Welcome } from '@storybook/react/demo';
+import { Welcome } from './Welcome';
 
 export default {
   title: 'Welcome',