add Mithril demo components for CLI

lib/cli/generators/MITHRIL/index.js

@@ -1,4 +1,6 @@
 import path from 'path';
+import fs from 'fs';
+import JSON5 from 'json5';
 import mergeDirs from 'merge-dirs';
 import { getVersions, getPackageJson, writePackageJson } from '../../lib/helpers';
 
@@ -9,12 +11,14 @@ export default async () => {
     linksVersion,
     addonsVersion,
     babelCoreVersion,
+    babelPluginTransformReactJsxVersion,
   ] = await getVersions(
     '@storybook/mithril',
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addons',
-    'babel-core'
+    'babel-core',
+    'babel-plugin-transform-react-jsx'
   );
 
   mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
@@ -28,10 +32,32 @@ export default async () => {
   packageJson.devDependencies['@storybook/addons'] = addonsVersion;
   packageJson.devDependencies['@storybook/mithril'] = storybookVersion;
 
-  if (!packageJson.dependencies['babel-core'] && !packageJson.devDependencies['babel-core']) {
+  // create or update .babelrc
+  let babelrc = null;
+  if (fs.existsSync('.babelrc')) {
+    const babelrcContent = fs.readFileSync('.babelrc', 'utf8');
+    babelrc = JSON5.parse(babelrcContent);
+    babelrc.plugins = babelrc.plugins || [];
+
+    if (babelrc.plugins.indexOf('babel-plugin-transform-react-jsx') < 0) {
+      babelrc.plugins.push('transform-react-jsx');
+      packageJson.devDependencies[
+        'babel-plugin-transform-react-jsx'
+      ] = babelPluginTransformReactJsxVersion;
+    }
+  } else {
+    babelrc = {
+      plugins: ['transform-react-jsx'],
+    };
+
     packageJson.devDependencies['babel-core'] = babelCoreVersion;
+    packageJson.devDependencies[
+      'babel-plugin-transform-react-jsx'
+    ] = babelPluginTransformReactJsxVersion;
   }
 
+  fs.writeFileSync('.babelrc', JSON.stringify(babelrc, null, 2), 'utf8');
+
   packageJson.scripts = packageJson.scripts || {};
   packageJson.scripts.storybook = 'start-storybook -p 6006';
   packageJson.scripts['build-storybook'] = 'build-storybook';

lib/cli/generators/MITHRIL/template/stories/Button.js

@@ -0,0 +1,23 @@
+/** @jsx m */
+
+import m from 'mithril';
+
+const style = {
+  border: '1px solid #eee',
+  borderRadius: '3px',
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: '15px',
+  padding: '3px 10px',
+  margin: '10px',
+};
+
+const Button = {
+  view: vnode => (
+    <button style={style} {...vnode.attrs}>
+      {vnode.children}
+    </button>
+  ),
+};
+
+export default Button;

lib/cli/generators/MITHRIL/template/stories/Welcome.js

@@ -0,0 +1,178 @@
+/** @jsx m */
+
+import m from 'mithril';
+import { linkTo, hrefTo } from '@storybook/addon-links';
+
+const Main = {
+  view: vnode => (
+    <article
+      style={{
+        margin: '15px',
+        maxWidth: '600px',
+        lineHeight: 1.4,
+        fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+      }}
+    >
+      {vnode.children}
+    </article>
+  ),
+};
+
+const Title = {
+  view: vnode => <h1>{vnode.children}</h1>,
+};
+
+const Note = {
+  view: vnode => (
+    <p
+      style={{
+        opacity: 0.5,
+      }}
+    >
+      {vnode.children}
+    </p>
+  ),
+};
+
+const InlineCode = {
+  view: vnode => (
+    <code
+      style={{
+        fontSize: '15px',
+        fontWeight: 600,
+        padding: '2px 5px',
+        border: '1px solid #eae9e9',
+        borderRadius: '4px',
+        backgroundColor: '#f3f2f2',
+        color: '#3a3a3a',
+      }}
+    >
+      {vnode.children}
+    </code>
+  ),
+};
+
+const Link = {
+  view: vnode => (
+    <a
+      style={{
+        color: '#1474f3',
+        textDecoration: 'none',
+        borderBottom: '1px solid #1474f3',
+        paddingBottom: '2px',
+      }}
+      {...vnode.attrs}
+    >
+      {vnode.children}
+    </a>
+  ),
+};
+
+const NavButton = {
+  view: vnode => (
+    <button
+      style={{
+        borderTop: 'none',
+        borderRight: 'none',
+        borderLeft: 'none',
+        backgroundColor: 'transparent',
+        padding: 0,
+        cursor: 'pointer',
+        font: 'inherit',
+      }}
+      {...vnode.attrs}
+    >
+      {vnode.children}
+    </button>
+  ),
+};
+
+const StoryLink = {
+  oninit: vnode => {
+    // eslint-disable-next-line no-param-reassign
+    vnode.state.href = '/';
+    // eslint-disable-next-line no-param-reassign
+    vnode.state.onclick = () => {
+      linkTo(vnode.attrs.kind, vnode.attrs.story)();
+      return false;
+    };
+    StoryLink.updateHref(vnode);
+  },
+  updateHref: async vnode => {
+    const href = await hrefTo(vnode.attrs.kind, vnode.attrs.story);
+    // eslint-disable-next-line no-param-reassign
+    vnode.state.href = href;
+    m.redraw();
+  },
+  view: vnode => (
+    <a
+      href={vnode.state.href}
+      style={{
+        color: '#1474f3',
+        textDecoration: 'none',
+        borderBottom: '1px solid #1474f3',
+        paddingBottom: '2px',
+      }}
+      onClick={vnode.state.onclick}
+    >
+      {vnode.children}
+    </a>
+  ),
+};
+
+const Welcome = {
+  view: vnode => (
+    <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{' '}
+        {vnode.attrs.showApp ? (
+          <NavButton onclick={vnode.attrs.showApp}>stories</NavButton>
+        ) : (
+          <StoryLink kind={vnode.attrs.showKind} story={vnode.attrs.showStory}>
+            stories
+          </StoryLink>
+        )}{' '}
+        for a component called <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{' '}
+        <InlineCode>src/stories/index.js</InlineCode>.)
+      </p>
+      <p>
+        Usually we create stories with smaller UI components in the app.<br />
+        Have a look at the{' '}
+        <Link
+          href="https://storybook.js.org/basics/writing-stories"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Writing Stories
+        </Link>{' '}
+        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/generators/MITHRIL/template/stories/index.stories.js

@@ -4,7 +4,8 @@ import { storiesOf } from '@storybook/mithril';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
-import { Button, Welcome } from '@storybook/mithril/demo';
+import Button from './Button';
+import Welcome from './Welcome';
 
 storiesOf('Welcome', module).add('to Storybook', () => ({
   view: () => m(Welcome, { showApp: linkTo('Button') }),

lib/cli/test/snapshots/mithril/.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "transform-react-jsx"
+  ]
+}

lib/cli/test/snapshots/mithril/package.json

@@ -16,6 +16,7 @@
     "@storybook/addon-links": "^3.4.0-rc.3",
     "@storybook/addons": "^3.4.0-rc.3",
     "@storybook/mithril": "3.4.0-rc.3",
-    "babel-core": "^6.26.0"
+    "babel-core": "^6.26.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1"
   }
 }

lib/cli/test/snapshots/mithril/stories/Button.js

@@ -0,0 +1,23 @@
+/** @jsx m */
+
+import m from 'mithril';
+
+const style = {
+  border: '1px solid #eee',
+  borderRadius: '3px',
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: '15px',
+  padding: '3px 10px',
+  margin: '10px',
+};
+
+const Button = {
+  view: vnode => (
+    <button style={style} {...vnode.attrs}>
+      {vnode.children}
+    </button>
+  ),
+};
+
+export default Button;

lib/cli/test/snapshots/mithril/stories/Welcome.js

@@ -0,0 +1,178 @@
+/** @jsx m */
+
+import m from 'mithril';
+import { linkTo, hrefTo } from '@storybook/addon-links';
+
+const Main = {
+  view: vnode => (
+    <article
+      style={{
+        margin: '15px',
+        maxWidth: '600px',
+        lineHeight: 1.4,
+        fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+      }}
+    >
+      {vnode.children}
+    </article>
+  ),
+};
+
+const Title = {
+  view: vnode => <h1>{vnode.children}</h1>,
+};
+
+const Note = {
+  view: vnode => (
+    <p
+      style={{
+        opacity: 0.5,
+      }}
+    >
+      {vnode.children}
+    </p>
+  ),
+};
+
+const InlineCode = {
+  view: vnode => (
+    <code
+      style={{
+        fontSize: '15px',
+        fontWeight: 600,
+        padding: '2px 5px',
+        border: '1px solid #eae9e9',
+        borderRadius: '4px',
+        backgroundColor: '#f3f2f2',
+        color: '#3a3a3a',
+      }}
+    >
+      {vnode.children}
+    </code>
+  ),
+};
+
+const Link = {
+  view: vnode => (
+    <a
+      style={{
+        color: '#1474f3',
+        textDecoration: 'none',
+        borderBottom: '1px solid #1474f3',
+        paddingBottom: '2px',
+      }}
+      {...vnode.attrs}
+    >
+      {vnode.children}
+    </a>
+  ),
+};
+
+const NavButton = {
+  view: vnode => (
+    <button
+      style={{
+        borderTop: 'none',
+        borderRight: 'none',
+        borderLeft: 'none',
+        backgroundColor: 'transparent',
+        padding: 0,
+        cursor: 'pointer',
+        font: 'inherit',
+      }}
+      {...vnode.attrs}
+    >
+      {vnode.children}
+    </button>
+  ),
+};
+
+const StoryLink = {
+  oninit: vnode => {
+    // eslint-disable-next-line no-param-reassign
+    vnode.state.href = '/';
+    // eslint-disable-next-line no-param-reassign
+    vnode.state.onclick = () => {
+      linkTo(vnode.attrs.kind, vnode.attrs.story)();
+      return false;
+    };
+    StoryLink.updateHref(vnode);
+  },
+  updateHref: async vnode => {
+    const href = await hrefTo(vnode.attrs.kind, vnode.attrs.story);
+    // eslint-disable-next-line no-param-reassign
+    vnode.state.href = href;
+    m.redraw();
+  },
+  view: vnode => (
+    <a
+      href={vnode.state.href}
+      style={{
+        color: '#1474f3',
+        textDecoration: 'none',
+        borderBottom: '1px solid #1474f3',
+        paddingBottom: '2px',
+      }}
+      onClick={vnode.state.onclick}
+    >
+      {vnode.children}
+    </a>
+  ),
+};
+
+const Welcome = {
+  view: vnode => (
+    <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{' '}
+        {vnode.attrs.showApp ? (
+          <NavButton onclick={vnode.attrs.showApp}>stories</NavButton>
+        ) : (
+          <StoryLink kind={vnode.attrs.showKind} story={vnode.attrs.showStory}>
+            stories
+          </StoryLink>
+        )}{' '}
+        for a component called <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{' '}
+        <InlineCode>src/stories/index.js</InlineCode>.)
+      </p>
+      <p>
+        Usually we create stories with smaller UI components in the app.<br />
+        Have a look at the{' '}
+        <Link
+          href="https://storybook.js.org/basics/writing-stories"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Writing Stories
+        </Link>{' '}
+        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/test/snapshots/mithril/stories/index.stories.js

@@ -4,7 +4,8 @@ import { storiesOf } from '@storybook/mithril';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
-import { Button, Welcome } from '@storybook/mithril/demo';
+import Button from './Button';
+import Welcome from './Welcome';
 
 storiesOf('Welcome', module).add('to Storybook', () => ({
   view: () => m(Welcome, { showApp: linkTo('Button') }),