diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx index a220c8853c9..15f75073ceb 100644 --- a/addons/docs/src/blocks/Story.tsx +++ b/addons/docs/src/blocks/Story.tsx @@ -66,7 +66,7 @@ export const getStoryProps = ( const { storyFn = undefined, name: storyName = undefined } = data || {}; const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories; - if (storyIsInline && !prepareForInline) { + if (storyIsInline && !prepareForInline && framework !== 'react') { throw new Error( `Story '${storyName}' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!` ); diff --git a/addons/docs/src/frameworks/react/config.js b/addons/docs/src/frameworks/react/config.js index 5c515d61f27..530092ec00a 100644 --- a/addons/docs/src/frameworks/react/config.js +++ b/addons/docs/src/frameworks/react/config.js @@ -7,6 +7,6 @@ addParameters({ container: DocsContainer, page: DocsPage, // react is Storybook's "native" framework, so it's stories are inherently prepared to be rendered inline - prepareForInline: storyFn => storyFn(), + prepareForInline: storyFn => storyFn, }, }); diff --git a/lib/cli/bin/generate.js b/lib/cli/bin/generate.js index af57ceb1bf8..2ea122bb682 100644 --- a/lib/cli/bin/generate.js +++ b/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 ', 'jscodeshift parser') .option('-t --type ', 'Add Storybook for a specific project type') + .option('--story-format ', '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}?`); } diff --git a/lib/cli/generators/.eslintrc.js b/lib/cli/generators/.eslintrc.js index 4ed50ee3e4f..d7fac90c788 100644 --- a/lib/cli/generators/.eslintrc.js +++ b/lib/cli/generators/.eslintrc.js @@ -3,7 +3,7 @@ const ignore = 0; module.exports = { overrides: [ { - files: '*/template/**', + files: '*/template[-?]*/**', env: { browser: true, }, diff --git a/lib/cli/generators/ANGULAR/index.js b/lib/cli/generators/ANGULAR/index.js index ee60f1d013f..117d002c634 100644 --- a/lib/cli/generators/ANGULAR/index.js +++ b/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')); }; diff --git a/lib/cli/generators/ANGULAR/template/.storybook/addons.js b/lib/cli/generators/ANGULAR/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/ANGULAR/template/.storybook/addons.js rename to lib/cli/generators/ANGULAR/template-csf/.storybook/addons.js diff --git a/lib/cli/generators/ANGULAR/template/.storybook/config.js b/lib/cli/generators/ANGULAR/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/ANGULAR/template/.storybook/config.js rename to lib/cli/generators/ANGULAR/template-csf/.storybook/config.js diff --git a/lib/cli/generators/ANGULAR/template/.storybook/tsconfig.json b/lib/cli/generators/ANGULAR/template-csf/.storybook/tsconfig.json similarity index 100% rename from lib/cli/generators/ANGULAR/template/.storybook/tsconfig.json rename to lib/cli/generators/ANGULAR/template-csf/.storybook/tsconfig.json diff --git a/lib/cli/generators/ANGULAR/template/.storybook/typings.d.ts b/lib/cli/generators/ANGULAR/template-csf/.storybook/typings.d.ts similarity index 100% rename from lib/cli/generators/ANGULAR/template/.storybook/typings.d.ts rename to lib/cli/generators/ANGULAR/template-csf/.storybook/typings.d.ts diff --git a/lib/cli/generators/ANGULAR/template/src/stories/0-Welcome.stories.ts b/lib/cli/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts similarity index 100% rename from lib/cli/generators/ANGULAR/template/src/stories/0-Welcome.stories.ts rename to lib/cli/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts diff --git a/lib/cli/generators/ANGULAR/template/src/stories/1-Button.stories.ts b/lib/cli/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts similarity index 100% rename from lib/cli/generators/ANGULAR/template/src/stories/1-Button.stories.ts rename to lib/cli/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts diff --git a/lib/cli/generators/ANGULAR/template-mdx/.storybook/addons.js b/lib/cli/generators/ANGULAR/template-mdx/.storybook/addons.js new file mode 100644 index 00000000000..47eabe0ce40 --- /dev/null +++ b/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'; diff --git a/lib/cli/generators/ANGULAR/template-mdx/.storybook/config.js b/lib/cli/generators/ANGULAR/template-mdx/.storybook/config.js new file mode 100644 index 00000000000..f1689d243bd --- /dev/null +++ b/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|mdx)$/), module); diff --git a/lib/cli/generators/ANGULAR/template-mdx/.storybook/presets.js b/lib/cli/generators/ANGULAR/template-mdx/.storybook/presets.js new file mode 100644 index 00000000000..da117ff9853 --- /dev/null +++ b/lib/cli/generators/ANGULAR/template-mdx/.storybook/presets.js @@ -0,0 +1 @@ +module.exports = ['@storybook/addon-docs/angular/preset']; diff --git a/lib/cli/generators/ANGULAR/template-mdx/.storybook/tsconfig.json b/lib/cli/generators/ANGULAR/template-mdx/.storybook/tsconfig.json new file mode 100644 index 00000000000..28aadc68fd9 --- /dev/null +++ b/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"] +} diff --git a/lib/cli/generators/ANGULAR/template-mdx/.storybook/typings.d.ts b/lib/cli/generators/ANGULAR/template-mdx/.storybook/typings.d.ts new file mode 100644 index 00000000000..f73d61b396c --- /dev/null +++ b/lib/cli/generators/ANGULAR/template-mdx/.storybook/typings.d.ts @@ -0,0 +1,4 @@ +declare module '*.md' { + const content: string; + export default content; +} diff --git a/lib/cli/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx b/lib/cli/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx new file mode 100644 index 00000000000..f7678421d17 --- /dev/null +++ b/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'; + + + +# Welcome + +This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block: + + + + {{ + component: Welcome, + props: {}, + }} + + diff --git a/lib/cli/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx b/lib/cli/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx new file mode 100644 index 00000000000..a5f0b403a64 --- /dev/null +++ b/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'; + + + +# Button + +This `Button` document defines a few stories: + + + {{ + component: Button, + props: { + text: 'Hello Button', + }, + }} + + + + {{ + component: Button, + props: { + text: '😀 😎 👍 💯', + }, + }} + + + + {{ + component: Button, + props: { + text: '😀 😎 👍 💯', + onClick: action('This was clicked OMG'), + }, + }} + + + + {{ + component: Button, + props: { + text: 'Go to Welcome Story', + onClick: linkTo('Welcome'), + }, + }} + diff --git a/lib/cli/generators/EMBER/index.js b/lib/cli/generators/EMBER/index.js index cc4316c4c4f..1e279cb3107 100644 --- a/lib/cli/generators/EMBER/index.js +++ b/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(); diff --git a/lib/cli/generators/EMBER/template/.storybook/addons.js b/lib/cli/generators/EMBER/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/EMBER/template/.storybook/addons.js rename to lib/cli/generators/EMBER/template-csf/.storybook/addons.js diff --git a/lib/cli/generators/EMBER/template/.storybook/config.js b/lib/cli/generators/EMBER/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/EMBER/template/.storybook/config.js rename to lib/cli/generators/EMBER/template-csf/.storybook/config.js diff --git a/lib/cli/generators/EMBER/template/stories/0-Welcome.stories.js b/lib/cli/generators/EMBER/template-csf/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/EMBER/template/stories/0-Welcome.stories.js rename to lib/cli/generators/EMBER/template-csf/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/EMBER/template/stories/1-Button.stories.js b/lib/cli/generators/EMBER/template-csf/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/EMBER/template/stories/1-Button.stories.js rename to lib/cli/generators/EMBER/template-csf/stories/1-Button.stories.js diff --git a/lib/cli/generators/HTML/index.js b/lib/cli/generators/HTML/index.js index bef0abdc484..e67c31d2d21 100755 --- a/lib/cli/generators/HTML/index.js +++ b/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]); }; diff --git a/lib/cli/generators/HTML/template/.storybook/config.js b/lib/cli/generators/HTML/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/HTML/template/.storybook/config.js rename to lib/cli/generators/HTML/template-csf/.storybook/config.js diff --git a/lib/cli/generators/HTML/template/stories/index.stories.js b/lib/cli/generators/HTML/template-csf/stories/index.stories.js similarity index 100% rename from lib/cli/generators/HTML/template/stories/index.stories.js rename to lib/cli/generators/HTML/template-csf/stories/index.stories.js diff --git a/lib/cli/generators/HTML/template-mdx/.storybook/config.js b/lib/cli/generators/HTML/template-mdx/.storybook/config.js new file mode 100644 index 00000000000..0c2a58cfec2 --- /dev/null +++ b/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|mdx)$/), module); diff --git a/lib/cli/generators/HTML/template-mdx/.storybook/presets.js b/lib/cli/generators/HTML/template-mdx/.storybook/presets.js new file mode 100644 index 00000000000..7c4d1835bcf --- /dev/null +++ b/lib/cli/generators/HTML/template-mdx/.storybook/presets.js @@ -0,0 +1 @@ +module.exports = ['@storybook/addon-docs/html/preset']; diff --git a/lib/cli/generators/HTML/template-mdx/stories/index.stories.mdx b/lib/cli/generators/HTML/template-mdx/stories/index.stories.mdx new file mode 100644 index 00000000000..ee921eee61d --- /dev/null +++ b/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! + + + + + {() => '

Hello World

'} + + + + {() => { + const btn = document.createElement('button'); + btn.type = 'button'; + btn.innerText = 'Hello Button'; + btn.addEventListener('click', e => console.log(e)); + return btn; + }} + diff --git a/lib/cli/generators/MARKO/index.js b/lib/cli/generators/MARKO/index.js index 08ec019d813..448d24d76c4 100644 --- a/lib/cli/generators/MARKO/index.js +++ b/lib/cli/generators/MARKO/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, addonActionVersion, addonKnobsVersion] = await getVersions( npmOptions, '@storybook/marko', @@ -16,7 +15,7 @@ export default async npmOptions => { '@storybook/addon-knobs' ); - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson(); diff --git a/lib/cli/generators/MARKO/template/.storybook/addons.js b/lib/cli/generators/MARKO/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/MARKO/template/.storybook/addons.js rename to lib/cli/generators/MARKO/template-csf/.storybook/addons.js diff --git a/lib/cli/generators/MARKO/template/.storybook/config.js b/lib/cli/generators/MARKO/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/MARKO/template/.storybook/config.js rename to lib/cli/generators/MARKO/template-csf/.storybook/config.js diff --git a/lib/cli/generators/MARKO/template/stories/components/welcome/index.marko b/lib/cli/generators/MARKO/template-csf/stories/components/welcome/index.marko similarity index 100% rename from lib/cli/generators/MARKO/template/stories/components/welcome/index.marko rename to lib/cli/generators/MARKO/template-csf/stories/components/welcome/index.marko diff --git a/lib/cli/generators/MARKO/template/stories/index.stories.js b/lib/cli/generators/MARKO/template-csf/stories/index.stories.js similarity index 100% rename from lib/cli/generators/MARKO/template/stories/index.stories.js rename to lib/cli/generators/MARKO/template-csf/stories/index.stories.js diff --git a/lib/cli/generators/METEOR/index.js b/lib/cli/generators/METEOR/index.js index fbed7d7eaeb..7f836c75fc5 100644 --- a/lib/cli/generators/METEOR/index.js +++ b/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 || {}; diff --git a/lib/cli/generators/METEOR/template/.storybook/addons.js b/lib/cli/generators/METEOR/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/METEOR/template/.storybook/addons.js rename to lib/cli/generators/METEOR/template-csf/.storybook/addons.js diff --git a/lib/cli/generators/METEOR/template/.storybook/config.js b/lib/cli/generators/METEOR/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/METEOR/template/.storybook/config.js rename to lib/cli/generators/METEOR/template-csf/.storybook/config.js diff --git a/lib/cli/generators/METEOR/template/stories/0-Welcome.stories.js b/lib/cli/generators/METEOR/template-csf/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/METEOR/template/stories/0-Welcome.stories.js rename to lib/cli/generators/METEOR/template-csf/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/METEOR/template/stories/1-Button.stories.js b/lib/cli/generators/METEOR/template-csf/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/METEOR/template/stories/1-Button.stories.js rename to lib/cli/generators/METEOR/template-csf/stories/1-Button.stories.js diff --git a/lib/cli/generators/MITHRIL/index.js b/lib/cli/generators/MITHRIL/index.js index 37f55bdb960..59c15004f48 100644 --- a/lib/cli/generators/MITHRIL/index.js +++ b/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(); diff --git a/lib/cli/generators/MITHRIL/template/.storybook/addons.js b/lib/cli/generators/MITHRIL/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/MITHRIL/template/.storybook/addons.js rename to lib/cli/generators/MITHRIL/template-csf/.storybook/addons.js diff --git a/lib/cli/generators/MITHRIL/template/.storybook/config.js b/lib/cli/generators/MITHRIL/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/MITHRIL/template/.storybook/config.js rename to lib/cli/generators/MITHRIL/template-csf/.storybook/config.js diff --git a/lib/cli/generators/MITHRIL/template/stories/0-Welcome.stories.js b/lib/cli/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/MITHRIL/template/stories/0-Welcome.stories.js rename to lib/cli/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/MITHRIL/template/stories/1-Button.stories.js b/lib/cli/generators/MITHRIL/template-csf/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/MITHRIL/template/stories/1-Button.stories.js rename to lib/cli/generators/MITHRIL/template-csf/stories/1-Button.stories.js diff --git a/lib/cli/generators/MITHRIL/template/stories/Button.js b/lib/cli/generators/MITHRIL/template-csf/stories/Button.js similarity index 100% rename from lib/cli/generators/MITHRIL/template/stories/Button.js rename to lib/cli/generators/MITHRIL/template-csf/stories/Button.js diff --git a/lib/cli/generators/MITHRIL/template/stories/Welcome.js b/lib/cli/generators/MITHRIL/template-csf/stories/Welcome.js similarity index 100% rename from lib/cli/generators/MITHRIL/template/stories/Welcome.js rename to lib/cli/generators/MITHRIL/template-csf/stories/Welcome.js diff --git a/lib/cli/generators/POLYMER/index.js b/lib/cli/generators/POLYMER/index.js index ee07fb87bb8..6f343b31147 100755 --- a/lib/cli/generators/POLYMER/index.js +++ b/lib/cli/generators/POLYMER/index.js @@ -1,20 +1,19 @@ -import fse from 'fs-extra'; -import path from 'path'; import { getVersions, getPackageJson, writePackageJson, getBabelDependencies, installDependencies, + copyTemplate, } from '../../lib/helpers'; -export default async npmOptions => { +export default async (npmOptions, { storyFormat = 'csf' }) => { const [storybookVersion, polymerLoaderVarion] = await getVersions( npmOptions, '@storybook/polymer', 'polymer-webpack-loader' ); - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson() || {}; // Maybe we are in a bower only project, still we need a package json diff --git a/lib/cli/generators/POLYMER/template/.storybook/config.js b/lib/cli/generators/POLYMER/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/POLYMER/template/.storybook/config.js rename to lib/cli/generators/POLYMER/template-csf/.storybook/config.js diff --git a/lib/cli/generators/POLYMER/template/src/stories/index.stories.js b/lib/cli/generators/POLYMER/template-csf/src/stories/index.stories.js similarity index 100% rename from lib/cli/generators/POLYMER/template/src/stories/index.stories.js rename to lib/cli/generators/POLYMER/template-csf/src/stories/index.stories.js diff --git a/lib/cli/generators/PREACT/index.js b/lib/cli/generators/PREACT/index.js index b8e9b9c3e4a..5f68f37a458 100644 --- a/lib/cli/generators/PREACT/index.js +++ b/lib/cli/generators/PREACT/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/preact', @@ -17,7 +16,7 @@ export default async npmOptions => { '@storybook/addons' ); - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson(); diff --git a/lib/cli/generators/PREACT/template/.storybook/addons.js b/lib/cli/generators/PREACT/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/PREACT/template/.storybook/addons.js rename to lib/cli/generators/PREACT/template-csf/.storybook/addons.js diff --git a/lib/cli/generators/PREACT/template/.storybook/config.js b/lib/cli/generators/PREACT/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/PREACT/template/.storybook/config.js rename to lib/cli/generators/PREACT/template-csf/.storybook/config.js diff --git a/lib/cli/generators/PREACT/template/stories/0-Welcome.stories.js b/lib/cli/generators/PREACT/template-csf/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/PREACT/template/stories/0-Welcome.stories.js rename to lib/cli/generators/PREACT/template-csf/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/PREACT/template/stories/1-Button.stories.js b/lib/cli/generators/PREACT/template-csf/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/PREACT/template/stories/1-Button.stories.js rename to lib/cli/generators/PREACT/template-csf/stories/1-Button.stories.js diff --git a/lib/cli/generators/PREACT/template/stories/Button.js b/lib/cli/generators/PREACT/template-csf/stories/Button.js similarity index 100% rename from lib/cli/generators/PREACT/template/stories/Button.js rename to lib/cli/generators/PREACT/template-csf/stories/Button.js diff --git a/lib/cli/generators/PREACT/template/stories/Welcome.js b/lib/cli/generators/PREACT/template-csf/stories/Welcome.js similarity index 100% rename from lib/cli/generators/PREACT/template/stories/Welcome.js rename to lib/cli/generators/PREACT/template-csf/stories/Welcome.js diff --git a/lib/cli/generators/RAX/index.js b/lib/cli/generators/RAX/index.js index de4b9c9a9e4..7cf117f422b 100644 --- a/lib/cli/generators/RAX/index.js +++ b/lib/cli/generators/RAX/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, @@ -24,7 +23,7 @@ export default async npmOptions => { 'rax' ); - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson(); diff --git a/lib/cli/generators/RAX/template/.storybook/addons.js b/lib/cli/generators/RAX/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/RAX/template/.storybook/addons.js rename to lib/cli/generators/RAX/template-csf/.storybook/addons.js diff --git a/lib/cli/generators/RAX/template/.storybook/config.js b/lib/cli/generators/RAX/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/RAX/template/.storybook/config.js rename to lib/cli/generators/RAX/template-csf/.storybook/config.js diff --git a/lib/cli/generators/RAX/template/stories/0-Welcome.stories.js b/lib/cli/generators/RAX/template-csf/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/RAX/template/stories/0-Welcome.stories.js rename to lib/cli/generators/RAX/template-csf/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/RAX/template/stories/1-Button.stories.js b/lib/cli/generators/RAX/template-csf/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/RAX/template/stories/1-Button.stories.js rename to lib/cli/generators/RAX/template-csf/stories/1-Button.stories.js diff --git a/lib/cli/generators/RAX/template/stories/Welcome.js b/lib/cli/generators/RAX/template-csf/stories/Welcome.js similarity index 100% rename from lib/cli/generators/RAX/template/stories/Welcome.js rename to lib/cli/generators/RAX/template-csf/stories/Welcome.js diff --git a/lib/cli/generators/REACT/index.js b/lib/cli/generators/REACT/index.js index 31dbea118bb..2658c779e7d 100644 --- a/lib/cli/generators/REACT/index.js +++ b/lib/cli/generators/REACT/index.js @@ -1,23 +1,26 @@ -import path from 'path'; -import fse from 'fs-extra'; import { - getVersions, + getVersionedPackages, getPackageJson, writePackageJson, getBabelDependencies, installDependencies, + copyTemplate, } from '../../lib/helpers'; -export default async npmOptions => { - const [storybookVersion, actionsVersion, linksVersion, addonsVersion] = await getVersions( - npmOptions, +export default async (npmOptions, { storyFormat = 'csf' }) => { + const packages = [ '@storybook/react', '@storybook/addon-actions', '@storybook/addon-links', - '@storybook/addons' - ); + '@storybook/addons', + ]; + if (storyFormat === 'mdx') { + packages.push('@storybook/addon-docs'); + } - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + const versionedPackages = await getVersionedPackages(npmOptions, ...packages); + + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson(); @@ -32,11 +35,5 @@ export default async npmOptions => { const babelDependencies = await getBabelDependencies(npmOptions, packageJson); - installDependencies(npmOptions, [ - `@storybook/react@${storybookVersion}`, - `@storybook/addon-actions@${actionsVersion}`, - `@storybook/addon-links@${linksVersion}`, - `@storybook/addons@${addonsVersion}`, - ...babelDependencies, - ]); + installDependencies(npmOptions, [...versionedPackages, ...babelDependencies]); }; diff --git a/lib/cli/generators/REACT/template/.storybook/addons.js b/lib/cli/generators/REACT/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/REACT/template/.storybook/addons.js rename to lib/cli/generators/REACT/template-csf/.storybook/addons.js diff --git a/lib/cli/generators/REACT/template/.storybook/config.js b/lib/cli/generators/REACT/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/REACT/template/.storybook/config.js rename to lib/cli/generators/REACT/template-csf/.storybook/config.js diff --git a/lib/cli/generators/REACT/template/stories/0-Welcome.stories.js b/lib/cli/generators/REACT/template-csf/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/REACT/template/stories/0-Welcome.stories.js rename to lib/cli/generators/REACT/template-csf/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/REACT/template/stories/1-Button.stories.js b/lib/cli/generators/REACT/template-csf/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/REACT/template/stories/1-Button.stories.js rename to lib/cli/generators/REACT/template-csf/stories/1-Button.stories.js diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/addons.js b/lib/cli/generators/REACT/template-mdx/.storybook/addons.js similarity index 100% rename from lib/cli/generators/REACT_NATIVE/template/storybook/addons.js rename to lib/cli/generators/REACT/template-mdx/.storybook/addons.js diff --git a/lib/cli/generators/REACT/template-mdx/.storybook/config.js b/lib/cli/generators/REACT/template-mdx/.storybook/config.js new file mode 100644 index 00000000000..e178df98fe4 --- /dev/null +++ b/lib/cli/generators/REACT/template-mdx/.storybook/config.js @@ -0,0 +1,4 @@ +import { configure } from '@storybook/react'; + +// automatically import all files ending in *.stories.js +configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module); diff --git a/lib/cli/generators/REACT/template-mdx/.storybook/presets.js b/lib/cli/generators/REACT/template-mdx/.storybook/presets.js new file mode 100644 index 00000000000..033e53b64ba --- /dev/null +++ b/lib/cli/generators/REACT/template-mdx/.storybook/presets.js @@ -0,0 +1,6 @@ +module.exports = [ + { + name: '@storybook/addon-docs/react/preset', + options: { configureJSX: true }, + }, +]; diff --git a/lib/cli/generators/REACT/template-mdx/stories/0-Welcome.stories.mdx b/lib/cli/generators/REACT/template-mdx/stories/0-Welcome.stories.mdx new file mode 100644 index 00000000000..15e55744b61 --- /dev/null +++ b/lib/cli/generators/REACT/template-mdx/stories/0-Welcome.stories.mdx @@ -0,0 +1,15 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { linkTo } from '@storybook/addon-links'; +import { Welcome } from '@storybook/react/demo'; + + + +# Welcome + +This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block: + + + + + + diff --git a/lib/cli/generators/REACT/template-mdx/stories/1-Button.stories.mdx b/lib/cli/generators/REACT/template-mdx/stories/1-Button.stories.mdx new file mode 100644 index 00000000000..8cd965a1e07 --- /dev/null +++ b/lib/cli/generators/REACT/template-mdx/stories/1-Button.stories.mdx @@ -0,0 +1,21 @@ +import { action } from '@storybook/addon-actions'; +import { Button } from '@storybook/react/demo'; +import { Meta, Story } from '@storybook/addon-docs/blocks'; + + + +# Button + +This `Button` document defines two stories: + + + + + + + + diff --git a/lib/cli/generators/REACT_NATIVE/index.js b/lib/cli/generators/REACT_NATIVE/index.js index c289ec32636..f63d6a69b75 100644 --- a/lib/cli/generators/REACT_NATIVE/index.js +++ b/lib/cli/generators/REACT_NATIVE/index.js @@ -1,5 +1,3 @@ -import fse from 'fs-extra'; -import path from 'path'; import shell from 'shelljs'; import chalk from 'chalk'; import { @@ -9,9 +7,10 @@ import { paddedLog, getBabelDependencies, installDependencies, + copyTemplate, } from '../../lib/helpers'; -export default async (npmOptions, installServer) => { +export default async (npmOptions, installServer, { storyFormat = 'csf' }) => { const [storybookVersion, addonsVersion, actionsVersion, linksVersion] = await getVersions( npmOptions, '@storybook/react-native', @@ -20,8 +19,7 @@ export default async (npmOptions, installServer) => { '@storybook/addon-links' ); - // copy all files from the template directory to project directory - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + copyTemplate(__dirname, storyFormat); // set correct project name on entry files if possible const dirname = shell.ls('-d', 'ios/*.xcodeproj').stdout; diff --git a/lib/cli/generators/REACT_SCRIPTS/template/.storybook/addons.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/addons.js similarity index 100% rename from lib/cli/generators/REACT_SCRIPTS/template/.storybook/addons.js rename to lib/cli/generators/REACT_NATIVE/template-csf/storybook/addons.js diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/index.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/index.js similarity index 100% rename from lib/cli/generators/REACT_NATIVE/template/storybook/index.js rename to lib/cli/generators/REACT_NATIVE/template-csf/storybook/index.js diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/rn-addons.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js similarity index 100% rename from lib/cli/generators/REACT_NATIVE/template/storybook/rn-addons.js rename to lib/cli/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/Button/index.android.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.android.js similarity index 100% rename from lib/cli/generators/REACT_NATIVE/template/storybook/stories/Button/index.android.js rename to lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.android.js diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/Button/index.ios.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.ios.js similarity index 100% rename from lib/cli/generators/REACT_NATIVE/template/storybook/stories/Button/index.ios.js rename to lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Button/index.ios.js diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/CenterView/index.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/index.js similarity index 100% rename from lib/cli/generators/REACT_NATIVE/template/storybook/stories/CenterView/index.js rename to lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/index.js diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/CenterView/style.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/style.js similarity index 100% rename from lib/cli/generators/REACT_NATIVE/template/storybook/stories/CenterView/style.js rename to lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/CenterView/style.js diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/Welcome/index.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/index.js similarity index 100% rename from lib/cli/generators/REACT_NATIVE/template/storybook/stories/Welcome/index.js rename to lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/index.js diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/index.js similarity index 100% rename from lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js rename to lib/cli/generators/REACT_NATIVE/template-csf/storybook/stories/index.js diff --git a/lib/cli/generators/REACT_SCRIPTS/index.js b/lib/cli/generators/REACT_SCRIPTS/index.js index 0c139ba2454..56df4ee7451 100644 --- a/lib/cli/generators/REACT_SCRIPTS/index.js +++ b/lib/cli/generators/REACT_SCRIPTS/index.js @@ -1,32 +1,31 @@ -import fse from 'fs-extra'; import path from 'path'; import fs from 'fs'; import semver from 'semver'; import { - getVersions, getPackageJson, + getVersionedPackages, writePackageJson, getBabelDependencies, installDependencies, + copyTemplate, } from '../../lib/helpers'; -export default async npmOptions => { - const [ - storybookVersion, - presetVersion, - actionsVersion, - linksVersion, - addonsVersion, - ] = await getVersions( - npmOptions, +export default async (npmOptions, { storyFormat = 'csf' }) => { + const packages = [ '@storybook/react', '@storybook/preset-create-react-app', '@storybook/addon-actions', '@storybook/addon-links', - '@storybook/addons' - ); + '@storybook/addons', + ]; - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + if (storyFormat === 'mdx') { + packages.push('@storybook/addon-docs'); + } + + const versionedPackages = await getVersionedPackages(npmOptions, ...packages); + + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson(); @@ -53,12 +52,5 @@ export default async npmOptions => { babelDependencies = await getBabelDependencies(npmOptions, packageJson); } - installDependencies(npmOptions, [ - `@storybook/react@${storybookVersion}`, - `@storybook/preset-create-react-app@${presetVersion}`, - `@storybook/addon-actions@${actionsVersion}`, - `@storybook/addon-links@${linksVersion}`, - `@storybook/addons@${addonsVersion}`, - ...babelDependencies, - ]); + installDependencies(npmOptions, [...versionedPackages, ...babelDependencies]); }; diff --git a/lib/cli/generators/RIOT/template/.storybook/addons.js b/lib/cli/generators/REACT_SCRIPTS/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/RIOT/template/.storybook/addons.js rename to lib/cli/generators/REACT_SCRIPTS/template-csf/.storybook/addons.js diff --git a/lib/cli/generators/REACT_SCRIPTS/template/.storybook/config.js b/lib/cli/generators/REACT_SCRIPTS/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/REACT_SCRIPTS/template/.storybook/config.js rename to lib/cli/generators/REACT_SCRIPTS/template-csf/.storybook/config.js diff --git a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/0-Welcome.stories.js b/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/REACT_SCRIPTS/template/src/stories/0-Welcome.stories.js rename to lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/1-Button.stories.js b/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/REACT_SCRIPTS/template/src/stories/1-Button.stories.js rename to lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js diff --git a/lib/cli/generators/SFC_VUE/template/.storybook/addons.js b/lib/cli/generators/REACT_SCRIPTS/template-mdx/.storybook/addons.js similarity index 100% rename from lib/cli/generators/SFC_VUE/template/.storybook/addons.js rename to lib/cli/generators/REACT_SCRIPTS/template-mdx/.storybook/addons.js diff --git a/lib/cli/generators/REACT_SCRIPTS/template-mdx/.storybook/config.js b/lib/cli/generators/REACT_SCRIPTS/template-mdx/.storybook/config.js new file mode 100644 index 00000000000..f3a1df13159 --- /dev/null +++ b/lib/cli/generators/REACT_SCRIPTS/template-mdx/.storybook/config.js @@ -0,0 +1,4 @@ +import { configure } from '@storybook/react'; + +// automatically import all files ending in *.stories.js +configure(require.context('../src/stories', true, /\.stories\.(js|mdx)$/), module); diff --git a/lib/cli/generators/REACT_SCRIPTS/template-mdx/.storybook/presets.js b/lib/cli/generators/REACT_SCRIPTS/template-mdx/.storybook/presets.js new file mode 100644 index 00000000000..bd5d86e6e96 --- /dev/null +++ b/lib/cli/generators/REACT_SCRIPTS/template-mdx/.storybook/presets.js @@ -0,0 +1,8 @@ +module.exports = [ + { + name: '@storybook/addon-docs/react/preset', + options: { + configureJSX: true, + }, + }, +]; diff --git a/lib/cli/generators/REACT_SCRIPTS/template-mdx/src/stories/0-Welcome.stories.mdx b/lib/cli/generators/REACT_SCRIPTS/template-mdx/src/stories/0-Welcome.stories.mdx new file mode 100644 index 00000000000..15e55744b61 --- /dev/null +++ b/lib/cli/generators/REACT_SCRIPTS/template-mdx/src/stories/0-Welcome.stories.mdx @@ -0,0 +1,15 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { linkTo } from '@storybook/addon-links'; +import { Welcome } from '@storybook/react/demo'; + + + +# Welcome + +This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block: + + + + + + diff --git a/lib/cli/generators/REACT_SCRIPTS/template-mdx/src/stories/1-Button.stories.mdx b/lib/cli/generators/REACT_SCRIPTS/template-mdx/src/stories/1-Button.stories.mdx new file mode 100644 index 00000000000..9bbcc904f99 --- /dev/null +++ b/lib/cli/generators/REACT_SCRIPTS/template-mdx/src/stories/1-Button.stories.mdx @@ -0,0 +1,21 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { action } from '@storybook/addon-actions'; +import { Button } from '@storybook/react/demo'; + + + +# Button + +This `Button` document defines two stories: + + + + + + + + diff --git a/lib/cli/generators/RIOT/index.js b/lib/cli/generators/RIOT/index.js index 6bbb4334033..5995f5163dc 100644 --- a/lib/cli/generators/RIOT/index.js +++ b/lib/cli/generators/RIOT/index.js @@ -1,14 +1,13 @@ -import fse from 'fs-extra'; -import path from 'path'; import { getVersions, getPackageJson, writePackageJson, getBabelDependencies, installDependencies, + copyTemplate, } from '../../lib/helpers'; -export default async npmOptions => { +export default async (npmOptions, { storyFormat = 'csf' }) => { const [ storybookVersion, actionsVersion, @@ -24,7 +23,7 @@ export default async npmOptions => { 'riot-tag-loader' ); - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson(); diff --git a/lib/cli/generators/SVELTE/template/.storybook/addons.js b/lib/cli/generators/RIOT/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/SVELTE/template/.storybook/addons.js rename to lib/cli/generators/RIOT/template-csf/.storybook/addons.js diff --git a/lib/cli/generators/RIOT/template/.storybook/config.js b/lib/cli/generators/RIOT/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/RIOT/template/.storybook/config.js rename to lib/cli/generators/RIOT/template-csf/.storybook/config.js diff --git a/lib/cli/generators/RIOT/template/stories/0-Welcome.stories.js b/lib/cli/generators/RIOT/template-csf/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/RIOT/template/stories/0-Welcome.stories.js rename to lib/cli/generators/RIOT/template-csf/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/RIOT/template/stories/1-Button.stories.js b/lib/cli/generators/RIOT/template-csf/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/RIOT/template/stories/1-Button.stories.js rename to lib/cli/generators/RIOT/template-csf/stories/1-Button.stories.js diff --git a/lib/cli/generators/RIOT/template/stories/MyButton.tag b/lib/cli/generators/RIOT/template-csf/stories/MyButton.tag similarity index 100% rename from lib/cli/generators/RIOT/template/stories/MyButton.tag rename to lib/cli/generators/RIOT/template-csf/stories/MyButton.tag diff --git a/lib/cli/generators/RIOT/template/stories/Welcome.tag b/lib/cli/generators/RIOT/template-csf/stories/Welcome.tag similarity index 100% rename from lib/cli/generators/RIOT/template/stories/Welcome.tag rename to lib/cli/generators/RIOT/template-csf/stories/Welcome.tag diff --git a/lib/cli/generators/SFC_VUE/index.js b/lib/cli/generators/SFC_VUE/index.js index 5a9ee404157..0fb3e5ca418 100644 --- a/lib/cli/generators/SFC_VUE/index.js +++ b/lib/cli/generators/SFC_VUE/index.js @@ -1,23 +1,25 @@ -import fse from 'fs-extra'; -import path from 'path'; import { - getVersions, + getVersionedPackages, getPackageJson, writePackageJson, getBabelDependencies, installDependencies, + copyTemplate, } from '../../lib/helpers'; -export default async npmOptions => { - const [storybookVersion, actionsVersion, linksVersion, addonsVersion] = await getVersions( - npmOptions, +export default async (npmOptions, { storyFormat = 'csf' }) => { + const packages = [ '@storybook/vue', '@storybook/addon-actions', '@storybook/addon-links', - '@storybook/addons' - ); + '@storybook/addons', + ]; + if (storyFormat === 'mdx') { + packages.push('@storybook/addon-docs'); + } + const versionedPackages = await getVersionedPackages(npmOptions, ...packages); - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson(); @@ -32,11 +34,5 @@ export default async npmOptions => { const babelDependencies = await getBabelDependencies(npmOptions, packageJson); - installDependencies(npmOptions, [ - `@storybook/vue@${storybookVersion}`, - `@storybook/addon-actions@${actionsVersion}`, - `@storybook/addon-links@${linksVersion}`, - `@storybook/addons@${addonsVersion}`, - ...babelDependencies, - ]); + installDependencies(npmOptions, [...versionedPackages, ...babelDependencies]); }; diff --git a/lib/cli/generators/VUE/template/.storybook/addons.js b/lib/cli/generators/SFC_VUE/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/VUE/template/.storybook/addons.js rename to lib/cli/generators/SFC_VUE/template-csf/.storybook/addons.js diff --git a/lib/cli/generators/SFC_VUE/template/.storybook/config.js b/lib/cli/generators/SFC_VUE/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/SFC_VUE/template/.storybook/config.js rename to lib/cli/generators/SFC_VUE/template-csf/.storybook/config.js diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/0-Welcome.stories.js b/lib/cli/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/SFC_VUE/template/src/stories/0-Welcome.stories.js rename to lib/cli/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/1-Button.stories.js b/lib/cli/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/SFC_VUE/template/src/stories/1-Button.stories.js rename to lib/cli/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/MyButton.vue b/lib/cli/generators/SFC_VUE/template-csf/src/stories/MyButton.vue similarity index 100% rename from lib/cli/generators/SFC_VUE/template/src/stories/MyButton.vue rename to lib/cli/generators/SFC_VUE/template-csf/src/stories/MyButton.vue diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.vue b/lib/cli/generators/SFC_VUE/template-csf/src/stories/Welcome.vue similarity index 100% rename from lib/cli/generators/SFC_VUE/template/src/stories/Welcome.vue rename to lib/cli/generators/SFC_VUE/template-csf/src/stories/Welcome.vue diff --git a/lib/cli/generators/SFC_VUE/template-mdx/.storybook/addons.js b/lib/cli/generators/SFC_VUE/template-mdx/.storybook/addons.js new file mode 100644 index 00000000000..6aed412d04a --- /dev/null +++ b/lib/cli/generators/SFC_VUE/template-mdx/.storybook/addons.js @@ -0,0 +1,2 @@ +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; diff --git a/lib/cli/generators/SFC_VUE/template-mdx/.storybook/config.js b/lib/cli/generators/SFC_VUE/template-mdx/.storybook/config.js new file mode 100644 index 00000000000..08a361c9a9b --- /dev/null +++ b/lib/cli/generators/SFC_VUE/template-mdx/.storybook/config.js @@ -0,0 +1,4 @@ +import { configure } from '@storybook/vue'; + +// automatically import all files ending in *.stories.js +configure(require.context('../src/stories', true, /\.stories\.(js|mdx)$/), module); diff --git a/lib/cli/generators/SFC_VUE/template-mdx/.storybook/presets.js b/lib/cli/generators/SFC_VUE/template-mdx/.storybook/presets.js new file mode 100644 index 00000000000..a4707c74c5c --- /dev/null +++ b/lib/cli/generators/SFC_VUE/template-mdx/.storybook/presets.js @@ -0,0 +1 @@ +module.exports = ['@storybook/addon-docs/vue/preset']; diff --git a/lib/cli/generators/SFC_VUE/template-mdx/src/stories/0-Welcome.stories.mdx b/lib/cli/generators/SFC_VUE/template-mdx/src/stories/0-Welcome.stories.mdx new file mode 100644 index 00000000000..36fb42a282d --- /dev/null +++ b/lib/cli/generators/SFC_VUE/template-mdx/src/stories/0-Welcome.stories.mdx @@ -0,0 +1,23 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { linkTo } from '@storybook/addon-links'; +import Welcome from './Welcome.vue'; + + + +# Welcome + +This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block: + + + + {{ + components: { + Welcome, + }, + template: '', + methods: { + action: linkTo('Button'), + }, + }} + + diff --git a/lib/cli/generators/SFC_VUE/template-mdx/src/stories/1-Button.stories.mdx b/lib/cli/generators/SFC_VUE/template-mdx/src/stories/1-Button.stories.mdx new file mode 100644 index 00000000000..780ca5c9e88 --- /dev/null +++ b/lib/cli/generators/SFC_VUE/template-mdx/src/stories/1-Button.stories.mdx @@ -0,0 +1,35 @@ +import { Meta, Story } from '@storybook/addon-docs/blocks'; +import { action } from '@storybook/addon-actions'; +import { linkTo } from '@storybook/addon-links'; +import MyButton from './MyButton.vue'; + + + +# Button + +This `Button` documentation defines two stories: + + + {{ + components: { + MyButton, + }, + template: 'Hello Button', + methods: { + action: action('clicked'), + }, + }} + + + + {{ + components: { + MyButton, + }, + template: + '😀 😎 👍 💯', + methods: { + action: action('clicked'), + }, + }} + diff --git a/lib/cli/generators/SFC_VUE/template-mdx/src/stories/MyButton.vue b/lib/cli/generators/SFC_VUE/template-mdx/src/stories/MyButton.vue new file mode 100644 index 00000000000..4ad8ff85f08 --- /dev/null +++ b/lib/cli/generators/SFC_VUE/template-mdx/src/stories/MyButton.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/lib/cli/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue b/lib/cli/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue new file mode 100644 index 00000000000..a7bbd1c4fab --- /dev/null +++ b/lib/cli/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/lib/cli/generators/SVELTE/index.js b/lib/cli/generators/SVELTE/index.js index 25d3b80e9d4..ccc7b826a61 100644 --- a/lib/cli/generators/SVELTE/index.js +++ b/lib/cli/generators/SVELTE/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, @@ -26,7 +25,7 @@ export default async npmOptions => { 'svelte-loader' ); - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson(); diff --git a/lib/cli/generators/SVELTE/template-csf/.storybook/addons.js b/lib/cli/generators/SVELTE/template-csf/.storybook/addons.js new file mode 100644 index 00000000000..6aed412d04a --- /dev/null +++ b/lib/cli/generators/SVELTE/template-csf/.storybook/addons.js @@ -0,0 +1,2 @@ +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; diff --git a/lib/cli/generators/SVELTE/template/.storybook/config.js b/lib/cli/generators/SVELTE/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/SVELTE/template/.storybook/config.js rename to lib/cli/generators/SVELTE/template-csf/.storybook/config.js diff --git a/lib/cli/generators/SVELTE/template/stories/button.svelte b/lib/cli/generators/SVELTE/template-csf/stories/button.svelte similarity index 100% rename from lib/cli/generators/SVELTE/template/stories/button.svelte rename to lib/cli/generators/SVELTE/template-csf/stories/button.svelte diff --git a/lib/cli/generators/SVELTE/template/stories/index.stories.js b/lib/cli/generators/SVELTE/template-csf/stories/index.stories.js similarity index 100% rename from lib/cli/generators/SVELTE/template/stories/index.stories.js rename to lib/cli/generators/SVELTE/template-csf/stories/index.stories.js diff --git a/lib/cli/generators/VUE/index.js b/lib/cli/generators/VUE/index.js index 5c3b6b543e4..7123f93d2b8 100644 --- a/lib/cli/generators/VUE/index.js +++ b/lib/cli/generators/VUE/index.js @@ -1,33 +1,29 @@ -import fse from 'fs-extra'; -import path from 'path'; import { - getVersions, + getVersion, + getVersionedPackages, getPackageJson, writePackageJson, getBabelDependencies, installDependencies, addToDevDependenciesIfNotPresent, + copyTemplate, } from '../../lib/helpers'; -export default async npmOptions => { - const [ - storybookVersion, - actionsVersion, - linksVersion, - addonsVersion, - babelPresetVersion, - babelCoreVersion, - ] = await getVersions( - npmOptions, +export default async (npmOptions, { storyFormat = 'csf' }) => { + const packages = [ '@storybook/vue', '@storybook/addon-actions', '@storybook/addon-links', '@storybook/addons', 'babel-preset-vue', - '@babel/core' - ); + '@babel/core', + ]; + if (storyFormat === 'mdx') { + packages.push('@storybook/addon-docs'); + } + const versionedPackages = await getVersionedPackages(npmOptions, ...packages); - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson(); @@ -41,7 +37,11 @@ export default async npmOptions => { // installBabel below. For some reason it leads to the wrong version of @babel/core (a beta) // being installed if (packageBabelCoreVersion === '7.0.0-bridge.0') { - addToDevDependenciesIfNotPresent(packageJson, '@babel/core', babelCoreVersion); + addToDevDependenciesIfNotPresent( + packageJson, + '@babel/core', + await getVersion(npmOptions, '@babel/core') + ); } packageJson.scripts = packageJson.scripts || {}; @@ -54,12 +54,5 @@ export default async npmOptions => { // We should probably just not even be using babel-preset-vue directly // see: https://github.com/storybookjs/storybook/issues/4475#issuecomment-432141296 - installDependencies(npmOptions, [ - `@storybook/vue@${storybookVersion}`, - `@storybook/addon-actions@${actionsVersion}`, - `@storybook/addon-links@${linksVersion}`, - `@storybook/addons@${addonsVersion}`, - `babel-preset-vue@${babelPresetVersion}`, - ...babelDependencies, - ]); + installDependencies(npmOptions, [...versionedPackages, ...babelDependencies]); }; diff --git a/lib/cli/generators/VUE/template-csf/.storybook/addons.js b/lib/cli/generators/VUE/template-csf/.storybook/addons.js new file mode 100644 index 00000000000..6aed412d04a --- /dev/null +++ b/lib/cli/generators/VUE/template-csf/.storybook/addons.js @@ -0,0 +1,2 @@ +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; diff --git a/lib/cli/generators/VUE/template/.storybook/config.js b/lib/cli/generators/VUE/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/VUE/template/.storybook/config.js rename to lib/cli/generators/VUE/template-csf/.storybook/config.js diff --git a/lib/cli/generators/VUE/template/stories/0-Welcome.stories.js b/lib/cli/generators/VUE/template-csf/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/VUE/template/stories/0-Welcome.stories.js rename to lib/cli/generators/VUE/template-csf/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/VUE/template/stories/1-Button.stories.js b/lib/cli/generators/VUE/template-csf/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/VUE/template/stories/1-Button.stories.js rename to lib/cli/generators/VUE/template-csf/stories/1-Button.stories.js diff --git a/lib/cli/generators/VUE/template/stories/MyButton.js b/lib/cli/generators/VUE/template-csf/stories/MyButton.js similarity index 100% rename from lib/cli/generators/VUE/template/stories/MyButton.js rename to lib/cli/generators/VUE/template-csf/stories/MyButton.js diff --git a/lib/cli/generators/VUE/template/stories/Welcome.js b/lib/cli/generators/VUE/template-csf/stories/Welcome.js similarity index 100% rename from lib/cli/generators/VUE/template/stories/Welcome.js rename to lib/cli/generators/VUE/template-csf/stories/Welcome.js diff --git a/lib/cli/generators/VUE/template-mdx/.storybook/addons.js b/lib/cli/generators/VUE/template-mdx/.storybook/addons.js new file mode 100644 index 00000000000..6aed412d04a --- /dev/null +++ b/lib/cli/generators/VUE/template-mdx/.storybook/addons.js @@ -0,0 +1,2 @@ +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; diff --git a/lib/cli/generators/VUE/template-mdx/.storybook/config.js b/lib/cli/generators/VUE/template-mdx/.storybook/config.js new file mode 100644 index 00000000000..f770a9332fd --- /dev/null +++ b/lib/cli/generators/VUE/template-mdx/.storybook/config.js @@ -0,0 +1,4 @@ +import { configure } from '@storybook/vue'; + +// automatically import all files ending in *.stories.js +configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module); diff --git a/lib/cli/generators/VUE/template-mdx/.storybook/presets.js b/lib/cli/generators/VUE/template-mdx/.storybook/presets.js new file mode 100644 index 00000000000..a4707c74c5c --- /dev/null +++ b/lib/cli/generators/VUE/template-mdx/.storybook/presets.js @@ -0,0 +1 @@ +module.exports = ['@storybook/addon-docs/vue/preset']; diff --git a/lib/cli/generators/VUE/template-mdx/stories/0-Welcome.stories.mdx b/lib/cli/generators/VUE/template-mdx/stories/0-Welcome.stories.mdx new file mode 100644 index 00000000000..c20f9e6c688 --- /dev/null +++ b/lib/cli/generators/VUE/template-mdx/stories/0-Welcome.stories.mdx @@ -0,0 +1,23 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { linkTo } from '@storybook/addon-links'; +import Welcome from './Welcome'; + + + +# Welcome + +This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block: + + + + {{ + components: { + Welcome, + }, + template: '', + methods: { + action: linkTo('Button'), + }, + }} + + diff --git a/lib/cli/generators/VUE/template-mdx/stories/1-Button.stories.mdx b/lib/cli/generators/VUE/template-mdx/stories/1-Button.stories.mdx new file mode 100644 index 00000000000..9385d0184a9 --- /dev/null +++ b/lib/cli/generators/VUE/template-mdx/stories/1-Button.stories.mdx @@ -0,0 +1,34 @@ +import { Meta, Story } from '@storybook/addon-docs/blocks'; +import { action } from '@storybook/addon-actions'; +import { linkTo } from '@storybook/addon-links'; +import MyButton from './MyButton'; + + + +# Button + +This `Button` documentation defines two stories: + + + {{ + components: { + MyButton, + }, + template: 'Hello Button', + methods: { + action: action('clicked'), + }, + }} + + + + {{ + components: { + MyButton, + }, + template: '😀 😎 👍 💯', + methods: { + action: action('clicked'), + }, + }} + diff --git a/lib/cli/generators/VUE/template-mdx/stories/MyButton.js b/lib/cli/generators/VUE/template-mdx/stories/MyButton.js new file mode 100644 index 00000000000..7ed4b85378d --- /dev/null +++ b/lib/cli/generators/VUE/template-mdx/stories/MyButton.js @@ -0,0 +1,29 @@ +export default { + name: 'my-button', + + data() { + return { + buttonStyles: { + border: '1px solid #eee', + borderRadius: 3, + backgroundColor: '#FFFFFF', + cursor: 'pointer', + fontSize: 15, + padding: '3px 10px', + margin: 10, + }, + }; + }, + + template: ` + + `, + + methods: { + onClick() { + this.$emit('click'); + }, + }, +}; diff --git a/lib/cli/generators/VUE/template-mdx/stories/Welcome.js b/lib/cli/generators/VUE/template-mdx/stories/Welcome.js new file mode 100644 index 00000000000..d1f70b6b310 --- /dev/null +++ b/lib/cli/generators/VUE/template-mdx/stories/Welcome.js @@ -0,0 +1,121 @@ +// eslint-disable-next-line no-console +const log = () => console.log('Welcome to storybook!'); + +export default { + name: 'welcome', + + props: { + showApp: { + type: Function, + default: log, + }, + }, + + data() { + return { + main: { + padding: 15, + lineHeight: 1.4, + fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif', + backgroundColor: '#ffffff', + }, + + 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', + }, + + note: { + opacity: 0.5, + }, + }; + }, + + template: ` +
+

Welcome to STORYBOOK

+

+ This is a UI component dev environment for your app. +

+

+ We've added some basic stories inside the +
+ src/stories +
+ directory. +
+ A story is a single state of one or more UI components. You can have as many stories as + you want. +
+ (Basically a story is like a visual test case.) +

+

+ See these sample +
+ stories +
+ for a component called +
+ Button + . +

+

+ Just like that, you can add your own components as stories. +
+ You can also edit those components and see changes right away. +
+ (Try editing the Button component + located at src/stories/Button.js.) +

+

+ This is just one thing you can do with Storybook. +
+ Have a look at the +
+ + Storybook + +
+ repo for more information. +

+

+ NOTE: +
+ Have a look at the +
+ .storybook/webpack.config.js +
+ to add webpack + loaders and plugins you are using in this project. +

+
+ `, + + methods: { + onClick(event) { + event.preventDefault(); + this.showApp(); + }, + }, +}; diff --git a/lib/cli/generators/WEBPACK_REACT/index.js b/lib/cli/generators/WEBPACK_REACT/index.js index 5447ea5b585..2fc13d684fc 100644 --- a/lib/cli/generators/WEBPACK_REACT/index.js +++ b/lib/cli/generators/WEBPACK_REACT/index.js @@ -1,23 +1,25 @@ -import fse from 'fs-extra'; -import path from 'path'; import { - getVersions, + getVersionedPackages, getPackageJson, writePackageJson, getBabelDependencies, installDependencies, + copyTemplate, } from '../../lib/helpers'; -export default async npmOptions => { - const [storybookVersion, actionsVersion, linksVersion, addonsVersion] = await getVersions( - npmOptions, +export default async (npmOptions, { storyFormat = 'csf' }) => { + const packages = [ '@storybook/react', '@storybook/addon-actions', '@storybook/addon-links', - '@storybook/addons' - ); + '@storybook/addons', + ]; + if (storyFormat === 'mdx') { + packages.push('@storybook/addon-docs'); + } + const versionedPackages = await getVersionedPackages(npmOptions, ...packages); - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson(); @@ -32,11 +34,5 @@ export default async npmOptions => { const babelDependencies = await getBabelDependencies(npmOptions, packageJson); - installDependencies(npmOptions, [ - `@storybook/react@${storybookVersion}`, - `@storybook/addon-actions@${actionsVersion}`, - `@storybook/addon-links@${linksVersion}`, - `@storybook/addons@${addonsVersion}`, - ...babelDependencies, - ]); + installDependencies(npmOptions, [...versionedPackages, ...babelDependencies]); }; diff --git a/lib/cli/generators/WEBPACK_REACT/template/.storybook/config.js b/lib/cli/generators/WEBPACK_REACT/template-csf/.storybook/config.js similarity index 100% rename from lib/cli/generators/WEBPACK_REACT/template/.storybook/config.js rename to lib/cli/generators/WEBPACK_REACT/template-csf/.storybook/config.js diff --git a/lib/cli/generators/WEBPACK_REACT/template/.storybook/webpack.config.js b/lib/cli/generators/WEBPACK_REACT/template-csf/.storybook/webpack.config.js similarity index 100% rename from lib/cli/generators/WEBPACK_REACT/template/.storybook/webpack.config.js rename to lib/cli/generators/WEBPACK_REACT/template-csf/.storybook/webpack.config.js diff --git a/lib/cli/generators/WEBPACK_REACT/template/stories/0-Welcome.stories.js b/lib/cli/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/WEBPACK_REACT/template/stories/0-Welcome.stories.js rename to lib/cli/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/WEBPACK_REACT/template/stories/1-Button.stories.js b/lib/cli/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/WEBPACK_REACT/template/stories/1-Button.stories.js rename to lib/cli/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js diff --git a/lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/config.js b/lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/config.js new file mode 100644 index 00000000000..e178df98fe4 --- /dev/null +++ b/lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/config.js @@ -0,0 +1,4 @@ +import { configure } from '@storybook/react'; + +// automatically import all files ending in *.stories.js +configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module); diff --git a/lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/presets.js b/lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/presets.js new file mode 100644 index 00000000000..033e53b64ba --- /dev/null +++ b/lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/presets.js @@ -0,0 +1,6 @@ +module.exports = [ + { + name: '@storybook/addon-docs/react/preset', + options: { configureJSX: true }, + }, +]; diff --git a/lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/webpack.config.js b/lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/webpack.config.js new file mode 100644 index 00000000000..e010e2f2b81 --- /dev/null +++ b/lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/webpack.config.js @@ -0,0 +1,18 @@ +// you can use this file to add your custom webpack plugins, loaders and anything you like. +// This is just the basic way to add additional webpack configurations. +// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config + +// IMPORTANT +// When you add this file, we won't add the default configurations which is similar +// to "React Create App". This only has babel loader to load JavaScript. + +module.exports = { + plugins: [ + // your custom plugins + ], + module: { + rules: [ + // add your custom rules. + ], + }, +}; diff --git a/lib/cli/generators/WEBPACK_REACT/template-mdx/stories/0-Welcome.stories.mdx b/lib/cli/generators/WEBPACK_REACT/template-mdx/stories/0-Welcome.stories.mdx new file mode 100644 index 00000000000..15e55744b61 --- /dev/null +++ b/lib/cli/generators/WEBPACK_REACT/template-mdx/stories/0-Welcome.stories.mdx @@ -0,0 +1,15 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { linkTo } from '@storybook/addon-links'; +import { Welcome } from '@storybook/react/demo'; + + + +# Welcome + +This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block: + + + + + + diff --git a/lib/cli/generators/WEBPACK_REACT/template-mdx/stories/1-Button.stories.mdx b/lib/cli/generators/WEBPACK_REACT/template-mdx/stories/1-Button.stories.mdx new file mode 100644 index 00000000000..8cd965a1e07 --- /dev/null +++ b/lib/cli/generators/WEBPACK_REACT/template-mdx/stories/1-Button.stories.mdx @@ -0,0 +1,21 @@ +import { action } from '@storybook/addon-actions'; +import { Button } from '@storybook/react/demo'; +import { Meta, Story } from '@storybook/addon-docs/blocks'; + + + +# Button + +This `Button` document defines two stories: + + + + + + + + diff --git a/lib/cli/lib/helpers.js b/lib/cli/lib/helpers.js index fe0b3a863c7..6fe8f27f8a9 100644 --- a/lib/cli/lib/helpers.js +++ b/lib/cli/lib/helpers.js @@ -1,6 +1,7 @@ /* eslint-disable no-param-reassign */ import path from 'path'; import fs from 'fs'; +import fse from 'fs-extra'; import chalk from 'chalk'; import { sync as spawnSync } from 'cross-spawn'; import { gt, satisfies } from 'semver'; @@ -43,6 +44,14 @@ export function getVersions(npmOptions, ...packageNames) { return Promise.all(packageNames.map(packageName => getVersion(npmOptions, packageName))); } +export function getVersionedPackages(npmOptions, ...packageNames) { + return Promise.all( + packageNames.map( + async packageName => `${packageName}@${await getVersion(npmOptions, packageName)}` + ) + ); +} + export function getPackageJson() { const packageJsonPath = path.resolve('package.json'); if (!fs.existsSync(packageJsonPath)) { @@ -290,3 +299,11 @@ export function addToDevDependenciesIfNotPresent(packageJson, name, packageVersi packageJson.devDependencies[name] = packageVersion; } } + +export function copyTemplate(templateRoot, storyFormat) { + const templateDir = path.resolve(templateRoot, `template-${storyFormat}/`); + if (!fs.existsSync(templateDir)) { + throw new Error(`Unsupported story format: ${storyFormat}`); + } + fse.copySync(templateDir, '.', { overwrite: true }); +} diff --git a/lib/cli/lib/initiate.js b/lib/cli/lib/initiate.js index 26437136e30..87eb2ce2889 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -41,6 +41,10 @@ const installStorybook = (projectType, options) => { skipInstall: options.skipInstall, }; + const generatorOptions = { + storyFormat: options.storyFormat, + }; + const runStorybookCommand = useYarn ? 'yarn storybook' : 'npm run storybook'; const end = () => { @@ -78,12 +82,12 @@ const installStorybook = (projectType, options) => { .then(end); case types.REACT_SCRIPTS: - return reactScriptsGenerator(npmOptions) + return reactScriptsGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Create React App" based project')) .then(end); case types.REACT: - return reactGenerator(npmOptions) + return reactGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "React" app')) .then(end); @@ -100,7 +104,7 @@ const installStorybook = (projectType, options) => { }, ]) ) - .then(({ server }) => reactNativeGenerator(npmOptions, server)) + .then(({ server }) => reactNativeGenerator(npmOptions, server, generatorOptions)) .then(commandLog('Adding storybook support to your "React Native" app')) .then(end) .then(() => { @@ -114,77 +118,77 @@ const installStorybook = (projectType, options) => { } case types.METEOR: - return meteorGenerator(npmOptions) + return meteorGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Meteor" app')) .then(end); case types.WEBPACK_REACT: - return webpackReactGenerator(npmOptions) + return webpackReactGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Webpack React" app')) .then(end); case types.REACT_PROJECT: - return reactGenerator(npmOptions) + return reactGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "React" library')) .then(end); case types.SFC_VUE: - return sfcVueGenerator(npmOptions) + return sfcVueGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Single File Components Vue" app')) .then(end); case types.VUE: - return vueGenerator(npmOptions) + return vueGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Vue" app')) .then(end); case types.ANGULAR: - return angularGenerator(npmOptions) + return angularGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Angular" app')) .then(end); case types.EMBER: - return emberGenerator(npmOptions) + return emberGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Ember" app')) .then(end); case types.POLYMER: - return polymerGenerator(npmOptions) + return polymerGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Polymer" app')) .then(end); case types.MITHRIL: - return mithrilGenerator(npmOptions) + return mithrilGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Mithril" app')) .then(end); case types.MARKO: - return markoGenerator(npmOptions) + return markoGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Marko" app')) .then(end); case types.HTML: - return htmlGenerator(npmOptions) + return htmlGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "HTML" app')) .then(end); case types.RIOT: - return riotGenerator(npmOptions) + return riotGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "riot.js" app')) .then(end); case types.PREACT: - return preactGenerator(npmOptions) + return preactGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Preact" app')) .then(end); case types.SVELTE: - return svelteGenerator(npmOptions) + return svelteGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Svelte" app')) .then(end); case types.RAX: - return raxGenerator(npmOptions) + return raxGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Rax" app')) .then(end); diff --git a/lib/cli/test/run_tests.sh b/lib/cli/test/run_tests.sh index 8f7c0c7ad28..a6428681952 100755 --- a/lib/cli/test/run_tests.sh +++ b/lib/cli/test/run_tests.sh @@ -12,14 +12,19 @@ function cleanup { trap cleanup EXIT fixtures_dir='fixtures' +story_format='csf' # parse command-line options # '-f' sets fixtures directory -while getopts ":f:" opt; do +# '-s' sets story format to use +while getopts ":f:s:" opt; do case $opt in f) fixtures_dir=$OPTARG ;; + s) + story_format=$OPTARG + ;; esac done @@ -33,13 +38,11 @@ do cd $dir echo "Running storybook-cli in $dir" - if [ $dir == *"native"* ] + if [[ $dir =~ (react_native*|angular-cli-v6|ember-cli|marko|meteor|mithril|polymer|riot|react_babel_6) ]] then - # run @storybook/cli - yarn sb init --skip-install --yes --install-server - else - # run @storybook/cli yarn sb init --skip-install --yes + else + yarn sb init --skip-install --yes --story-format $story_format fi cd .. diff --git a/lib/codemod/src/index.js b/lib/codemod/src/index.js index 9fd86bb06b9..8a69bbd0b69 100644 --- a/lib/codemod/src/index.js +++ b/lib/codemod/src/index.js @@ -1,5 +1,6 @@ /* eslint import/prefer-default-export: "off" */ import fs from 'fs'; +import { promisify } from 'util'; import globby from 'globby'; import { sync as spawnSync } from 'cross-spawn'; @@ -19,10 +20,12 @@ export function listCodemods() { .map(fname => fname.slice(0, -3)); } +const renameAsync = promisify(fs.rename); + async function renameFile(file, from, to, { logger }) { const newFile = file.replace(from, to); logger.log(`Rename: ${file} ${newFile}`); - return fs.rename(file, newFile); + return renameAsync(file, newFile); } export async function runCodemod(codemod, { glob, logger, dryRun, rename, parser }) {