CLI: MDX template support

lib/cli/bin/generate.js

@@ -20,11 +20,12 @@ if (process.argv[1].includes('getstorybook')) {
   program
     .command('init')
     .description('Initialize Storybook into your project.')
-    .option('-f --force', 'Forcely add storybook')
+    .option('-f --force', 'Force add storybook')
     .option('-s --skip-install', 'Skip installing deps')
     .option('-N --use-npm', 'Use npm to install deps')
     .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
     .option('-t --type <type>', 'Add Storybook for a specific project type')
+    .option('--story-format <csf | mdx>', 'Generate stories in a specified format')
     .option('-y --yes', 'Answer yes to all prompts')
     .action(options => initiate(options, pkg));
 
@@ -77,7 +78,7 @@ if (process.argv[1].includes('getstorybook')) {
       invalidCmd
     );
     // eslint-disable-next-line
-    const suggestion = didYouMean(invalidCmd, program.commands.map(cmd => cmd._name)); 
+    const suggestion = didYouMean(invalidCmd, program.commands.map(cmd => cmd._name));
     if (suggestion) {
       logger.log(`\n Did you mean ${suggestion}?`);
     }

lib/cli/generators/.eslintrc.js

@@ -3,7 +3,7 @@ const ignore = 0;
 module.exports = {
   overrides: [
     {
-      files: '*/template/**',
+      files: '*/template[-?]*/**',
       env: {
         browser: true,
       },

lib/cli/generators/ANGULAR/index.js

@@ -1,4 +1,3 @@
-import fse from 'fs-extra';
 import path from 'path';
 import {
   isDefaultProjectSet,
@@ -7,29 +6,29 @@ import {
   getAngularAppTsConfigPath,
 } from './angular-helpers';
 import {
-  getVersions,
   getPackageJson,
+  getVersionedPackages,
   writePackageJson,
   getBabelDependencies,
   installDependencies,
   writeFileAsJson,
+  copyTemplate,
 } from '../../lib/helpers';
 
-async function addDependencies(npmOptions) {
-  const [
-    storybookVersion,
-    notesVersion,
-    actionsVersion,
-    linksVersion,
-    addonsVersion,
-  ] = await getVersions(
-    npmOptions,
+async function addDependencies(npmOptions, { storyFormat }) {
+  const packages = [
     '@storybook/angular',
     '@storybook/addon-notes',
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/addons'
-  );
+    '@storybook/addons',
+  ];
+
+  if (storyFormat === 'mdx') {
+    packages.push('@storybook/addon-docs');
+  }
+
+  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
 
   const packageJson = getPackageJson();
 
@@ -44,14 +43,7 @@ async function addDependencies(npmOptions) {
 
   const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
 
-  installDependencies(npmOptions, [
-    `@storybook/angular@${storybookVersion}`,
-    `@storybook/addon-notes@${notesVersion}`,
-    `@storybook/addon-actions@${actionsVersion}`,
-    `@storybook/addon-links@${linksVersion}`,
-    `@storybook/addons@${addonsVersion}`,
-    ...babelDependencies,
-  ]);
+  installDependencies(npmOptions, [...versionedPackages, ...babelDependencies]);
 }
 
 function editAngularAppTsConfig() {
@@ -70,16 +62,16 @@ function editAngularAppTsConfig() {
   writeFileAsJson(getAngularAppTsConfigPath(), tsConfigJson);
 }
 
-export default async npmOptions => {
+export default async (npmOptions, { storyFormat = 'csf' }) => {
   if (!isDefaultProjectSet()) {
     throw new Error(
       'Could not find a default project in your Angular workspace. Add a project and re-run the installation.'
     );
   }
 
-  fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
+  copyTemplate(__dirname, storyFormat);
 
-  await addDependencies(npmOptions);
+  await addDependencies(npmOptions, { storyFormat });
   editAngularAppTsConfig();
   editStorybookTsConfig(path.resolve('./.storybook/tsconfig.json'));
 };

lib/cli/generators/ANGULAR/template-mdx/.storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-notes/register';

lib/cli/generators/ANGULAR/template-mdx/.storybook/config.js

@@ -0,0 +1,4 @@
+import { configure } from '@storybook/angular';
+
+// automatically import all files ending in *.stories.ts
+configure(require.context('../src/stories', true, /\.stories\.ts$/), module);

lib/cli/generators/ANGULAR/template-mdx/.storybook/presets.js

@@ -0,0 +1 @@
+module.exports = ['@storybook/addon-docs/angular/preset'];

lib/cli/generators/ANGULAR/template-mdx/.storybook/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "%SET_DURING_SB_INIT%",
+  "compilerOptions": {
+    "types": ["node"]
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
+  "include": ["../src/**/*", "../projects/**/*"],
+  "files": ["./typings.d.ts"]
+}

lib/cli/generators/ANGULAR/template-mdx/.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}

lib/cli/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx

@@ -0,0 +1,17 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { Welcome } from '@storybook/angular/demo';
+
+<Meta title="Welcome" />
+
+# Welcome
+
+This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block:
+
+<Preview withToolbar>
+  <Story name="to Storybook">
+    {{
+      component: Welcome,
+      props: {},
+    }}
+  </Story>
+</Preview>

lib/cli/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx

@@ -0,0 +1,49 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button } from '@storybook/angular/demo';
+
+<Meta title="Button" />
+
+# Button
+
+This `Button` document defines a few stories:
+
+<Story name="text">
+  {{
+    component: Button,
+    props: {
+      text: 'Hello Button',
+    },
+  }}
+</Story>
+
+<Story name="emoji">
+  {{
+    component: Button,
+    props: {
+      text: '😀 😎 👍 💯',
+    },
+  }}
+</Story>
+
+<Story name="with some emoji and action">
+  {{
+    component: Button,
+    props: {
+      text: '😀 😎 👍 💯',
+      onClick: action('This was clicked OMG'),
+    },
+  }}
+</Story>
+
+<Story name="button with link to another story">
+  {{
+    component: Button,
+    props: {
+      text: 'Go to Welcome Story',
+      onClick: linkTo('Welcome'),
+    },
+  }}
+</Story>

lib/cli/generators/EMBER/index.js

@@ -1,14 +1,13 @@
-import path from 'path';
-import fse from 'fs-extra';
 import {
   getVersions,
   getPackageJson,
   writePackageJson,
   getBabelDependencies,
   installDependencies,
+  copyTemplate,
 } from '../../lib/helpers';
 
-export default async npmOptions => {
+export default async (npmOptions, { storyFormat = 'csf' }) => {
   const [storybookVersion, linksVersion, actionsVersion, addonsVersion] = await getVersions(
     npmOptions,
     '@storybook/ember',
@@ -17,7 +16,7 @@ export default async npmOptions => {
     '@storybook/addons'
   );
 
-  fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
+  copyTemplate(__dirname, storyFormat);
 
   const packageJson = getPackageJson();
 

lib/cli/generators/HTML/index.js

@@ -1,17 +1,21 @@
-import fse from 'fs-extra';
-import path from 'path';
 import npmInit from '../../lib/npm_init';
 import {
-  getVersion,
+  getVersionedPackages,
   getPackageJson,
   writePackageJson,
   getBabelDependencies,
   installDependencies,
+  copyTemplate,
 } from '../../lib/helpers';
 
-export default async npmOptions => {
-  const storybookVersion = await getVersion(npmOptions, '@storybook/html');
-  fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
+export default async (npmOptions, { storyFormat = 'csf' }) => {
+  const packages = ['@storybook/html'];
+  const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
+  if (storyFormat === 'mdx') {
+    packages.push('@storybook/addon-docs');
+  }
+
+  copyTemplate(__dirname, storyFormat);
 
   let packageJson = getPackageJson();
   if (!packageJson) {
@@ -30,5 +34,5 @@ export default async npmOptions => {
 
   const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
 
-  installDependencies(npmOptions, [`@storybook/html@${storybookVersion}`, ...babelDependencies]);
+  installDependencies(npmOptions, [...versionedPackages, ...babelDependencies]);
 };

lib/cli/generators/HTML/template-mdx/.storybook/config.js

@@ -0,0 +1,4 @@
+import { configure } from '@storybook/html';
+
+// automatically import all files ending in *.stories.js
+configure(require.context('../stories', true, /\.stories\.js$/), module);

lib/cli/generators/HTML/template-mdx/.storybook/presets.js

@@ -0,0 +1 @@
+module.exports = ['@storybook/addon-docs/html/preset'];

lib/cli/generators/HTML/template-mdx/stories/index.stories.mdx

@@ -0,0 +1,21 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+
+# HTML MDX Demo
+
+Here's a few sample HTML stories in MDX. Enjoy!
+
+<Meta title="Demo" />
+
+<Preview withToolbar>
+  <Story name="heading">{() => '<h1>Hello World</h1>'}</Story>
+</Preview>
+
+<Story name="button">
+  {() => {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.innerText = 'Hello Button';
+    btn.addEventListener('click', e => console.log(e));
+    return btn;
+  }}
+</Story>

lib/cli/generators/MARKO/index.js

@@ -1,22 +1,21 @@
-import path from 'path';
-import fse from 'fs-extra';
 import {
   getVersions,
   getPackageJson,
   writePackageJson,
   getBabelDependencies,
   installDependencies,
+  copyTemplate,
 } from '../../lib/helpers';
 
-export default async npmOptions => {
+export default async (npmOptions, { storyFormat = 'csf' }) => {
   const [storybookVersion, addonActionVersion, addonKnobsVersion] = await getVersions(
     npmOptions,
     '@storybook/marko',
     '@storybook/addon-actions',
     '@storybook/addon-knobs'
   );
 
-  fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
+  copyTemplate(__dirname, storyFormat);
 
   const packageJson = getPackageJson();
 

lib/cli/generators/METEOR/index.js

@@ -1,16 +1,15 @@
-import path from 'path';
 import fs from 'fs';
 import JSON5 from 'json5';
-import fse from 'fs-extra';
 import {
   getVersions,
   getPackageJson,
   writePackageJson,
   getBabelDependencies,
   installDependencies,
+  copyTemplate,
 } from '../../lib/helpers';
 
-export default async npmOptions => {
+export default async (npmOptions, { storyFormat = 'csf' }) => {
   const [
     storybookVersion,
     actionsVersion,
@@ -32,7 +31,7 @@ export default async npmOptions => {
     '@babel/preset-react'
   );
 
-  fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
+  copyTemplate(__dirname, storyFormat);
 
   const packageJson = getPackageJson();
   packageJson.devDependencies = packageJson.devDependencies || {};

lib/cli/generators/MITHRIL/index.js

@@ -1,14 +1,13 @@
-import path from 'path';
-import fse from 'fs-extra';
 import {
   getVersions,
   getPackageJson,
   writePackageJson,
   getBabelDependencies,
   installDependencies,
+  copyTemplate,
 } from '../../lib/helpers';
 
-export default async npmOptions => {
+export default async (npmOptions, { storyFormat = 'csf' }) => {
   const [storybookVersion, actionsVersion, linksVersion, addonsVersion] = await getVersions(
     npmOptions,
     '@storybook/mithril',
@@ -17,7 +16,7 @@ export default async npmOptions => {
     '@storybook/addons'
   );
 
-  fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
+  copyTemplate(__dirname, storyFormat);
 
   const packageJson = getPackageJson();