cli: colocate stories and components, centralize main.js

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,16 @@ 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,
       },
     },
     {
@@ -21,5 +21,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/WEBPACK_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',

lib/cli/src/generators/REACT/template-csf/stories/1-Button.stories.js → lib/cli/src/frameworks/react/js/1-Button.stories.js

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

lib/cli/src/frameworks/react/js/Button.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const styles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+const Button = ({ children, onClick }) => (
+  <button onClick={onClick} style={styles} type="button">
+    {children}
+  </button>
+);
+
+export default Button;

lib/cli/src/frameworks/react/js/Welcome.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+
+const Main = (props) => (
+  <article
+    {...props}
+    style={{
+      padding: 15,
+      lineHeight: 1.4,
+      fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+      backgroundColor: '#fff',
+      color: '#000',
+    }}
+  />
+);
+
+const Title = ({ children, ...props }) => <h1 {...props}>{children}</h1>;
+
+const Note = (props) => (
+  <p
+    {...props}
+    style={{
+      opacity: 0.5,
+    }}
+  />
+);
+
+const InlineCode = (props) => (
+  <code
+    {...props}
+    style={{
+      fontSize: 15,
+      fontWeight: 600,
+      padding: '2px 5px',
+      border: '1px solid #eae9e9',
+      borderRadius: 4,
+      backgroundColor: '#f3f2f2',
+      color: '#3a3a3a',
+    }}
+  />
+);
+
+const Link = ({ children, href, target, rel, ...props }) => (
+  <a
+    href={href}
+    {...props}
+    target={target}
+    rel={rel}
+    style={{
+      color: '#1474f3',
+      textDecoration: 'none',
+      borderBottom: '1px solid #1474f3',
+      paddingBottom: 2,
+    }}
+  >
+    {children}
+  </a>
+);
+
+const NavButton = ({ children, onClick, ...props }) => (
+  <button
+    {...props}
+    type="button"
+    onClick={onClick}
+    style={{
+      color: '#1474f3',
+      textDecoration: 'none',
+      borderBottom: '1px solid #1474f3',
+      paddingBottom: 2,
+      borderTop: 'none',
+      borderRight: 'none',
+      borderLeft: 'none',
+      backgroundColor: 'transparent',
+      padding: 0,
+      cursor: 'pointer',
+      font: 'inherit',
+    }}
+  >
+    {children}
+  </button>
+);
+
+const Welcome = ({ showApp }) => (
+  <Main>
+    <Title>Welcome to storybook</Title>
+    <p>This is a UI component dev environment for your app.</p>
+    <p>
+      We've added some basic stories inside the <InlineCode>src/stories</InlineCode> 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 <NavButton onClick={showApp}>stories</NavButton> for a component called&nbsp;
+      <InlineCode>Button</InlineCode>.
+    </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 <InlineCode>Button</InlineCode> stories located at&nbsp;
+      <InlineCode>src/stories/1-Button.stories.js</InlineCode>
+      .)
+    </p>
+    <p>
+      Usually we create stories with smaller UI components in the app.
+      <br />
+      Have a look at the&nbsp;
+      <Link
+        href="https://storybook.js.org/basics/writing-stories"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Writing Stories
+      </Link>
+      &nbsp;section in our documentation.
+    </p>
+    <Note>
+      <b>NOTE:</b>
+      <br />
+      Have a look at the <InlineCode>.storybook/webpack.config.js</InlineCode> to add webpack
+      loaders and plugins you are using in this project.
+    </Note>
+  </Main>
+);
+
+export default Welcome;

lib/cli/src/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx → lib/cli/src/frameworks/react/ts/0-Welcome.stories.tsx

@@ -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',

lib/cli/src/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js → lib/cli/src/frameworks/react/ts/1-Button.stories.tsx

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

lib/cli/src/frameworks/react/ts/Button.tsx

@@ -0,0 +1,20 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+
+const styles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+type Props = Pick<HTMLAttributes<HTMLButtonElement>, 'onClick'>;
+const Button: FunctionComponent<Props> = ({ children, onClick }) => (
+  <button onClick={onClick} style={styles} type="button">
+    {children}
+  </button>
+);
+
+export default Button;