From 0a357bef3dfd183b8f9b5ba071e7ccebfab7e344 Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 2 Sep 2019 01:11:07 -0400 Subject: [PATCH 01/90] added prop mdxSource to .mdx when there is no --- addons/docs/src/blocks/Preview.tsx | 7 +++ addons/docs/src/mdx/mdx-compiler-plugin.js | 47 +++++++++++++++++++ .../stories/addon-docs/addon-docs.stories.mdx | 4 ++ 3 files changed, 58 insertions(+) diff --git a/addons/docs/src/blocks/Preview.tsx b/addons/docs/src/blocks/Preview.tsx index 19276cccb3b..40dbb5d41f3 100644 --- a/addons/docs/src/blocks/Preview.tsx +++ b/addons/docs/src/blocks/Preview.tsx @@ -17,6 +17,7 @@ const getPreviewProps = ( { withSource = SourceState.CLOSED, children, + mdxSource, ...props }: PreviewProps & { children?: React.ReactNode }, { mdxStoryNameToId, storyStore }: DocsContextProps @@ -24,6 +25,12 @@ const getPreviewProps = ( if (withSource === SourceState.NONE && !children) { return props; } + if (mdxSource) { + return { + ...props, + withSource: getSourceProps({ code: decodeURI(mdxSource) }, { storyStore }), + }; + } const childArray: ReactNodeArray = Array.isArray(children) ? children : [children]; const stories = childArray.filter( (c: React.ReactElement) => c.props && (c.props.id || c.props.name) diff --git a/addons/docs/src/mdx/mdx-compiler-plugin.js b/addons/docs/src/mdx/mdx-compiler-plugin.js index 5414993eac8..86c1fc33ccf 100644 --- a/addons/docs/src/mdx/mdx-compiler-plugin.js +++ b/addons/docs/src/mdx/mdx-compiler-plugin.js @@ -189,7 +189,54 @@ function stringifyMeta(meta) { return result; } +const hasStoryChild = node => { + if (node.openingElement && node.openingElement.name.name === 'Story') { + return node; + } + if (node.children && node.children.length > 0) { + return node.children.find(child => hasStoryChild(child)); + } + return null; +}; + function extractExports(node, options) { + node.children.forEach(child => { + if (child.type === 'jsx') { + const ast = parser.parseExpression(child.value, { plugins: ['jsx'] }); + if ( + ast.openingElement && + ast.openingElement.type === 'JSXOpeningElement' && + ast.openingElement.name.name === 'Preview' && + !hasStoryChild(ast) + ) { + const previewAst = ast.openingElement; + previewAst.attributes.push({ + type: 'JSXAttribute', + name: { + type: 'JSXIdentifier', + name: 'mdxSource', + }, + value: { + type: 'StringLiteral', + value: encodeURI(generate(ast, {}).code), + /* ast.children + .map( + el => + generate(el, { + quotes: 'double', + }).code + ) + .join('\n') + ), + */ + }, + }); + } + const { code } = generate(ast, {}); + // eslint-disable-next-line no-param-reassign + child.value = code; + } + }); // we're overriding default export const defaultJsx = mdxToJsx.toJSX(node, {}, { ...options, skipExport: true }); const storyExports = []; diff --git a/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx b/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx index 5fc45bc20c1..9f200967827 100644 --- a/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx +++ b/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx @@ -90,6 +90,10 @@ export const nonStory2 = () => ; // another one + + + + ## Configurable height From 3ec475b67778c6ae0816013720609624aa0ced16 Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 2 Sep 2019 11:26:50 -0400 Subject: [PATCH 02/90] code to use only the children of the generate(el, { @@ -228,7 +228,6 @@ function extractExports(node, options) { ) .join('\n') ), - */ }, }); } From 668f6c22d8a2520649986d1ca743ed66c1c286ae Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 2 Sep 2019 11:37:19 -0400 Subject: [PATCH 03/90] add mdxSource to PreviewProps --- addons/docs/src/blocks/Preview.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/addons/docs/src/blocks/Preview.tsx b/addons/docs/src/blocks/Preview.tsx index 40dbb5d41f3..b6220891e49 100644 --- a/addons/docs/src/blocks/Preview.tsx +++ b/addons/docs/src/blocks/Preview.tsx @@ -11,6 +11,7 @@ export enum SourceState { type PreviewProps = PurePreviewProps & { withSource?: SourceState; + mdxSource?: string; }; const getPreviewProps = ( From 890440973e604b13d38adbf1da6d84e3d89b00e8 Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 2 Sep 2019 12:19:35 -0400 Subject: [PATCH 04/90] added test for preview without a story --- addons/docs/src/mdx/__testfixtures__/previews.mdx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/addons/docs/src/mdx/__testfixtures__/previews.mdx b/addons/docs/src/mdx/__testfixtures__/previews.mdx index b56d1bcbf3b..8ec8874d102 100644 --- a/addons/docs/src/mdx/__testfixtures__/previews.mdx +++ b/addons/docs/src/mdx/__testfixtures__/previews.mdx @@ -17,3 +17,10 @@ Previews can contain normal components, stories, and story references + + +Preview wthout a story + + + + \ No newline at end of file From 6ec9e5b3fb03325753eb629106e26d70ab24ad55 Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 2 Sep 2019 13:30:43 -0400 Subject: [PATCH 05/90] update snapshot --- .../src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap b/addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap index 519c6c08745..098d5b201db 100644 --- a/addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap +++ b/addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap @@ -338,6 +338,10 @@ function MDXContent({ components, ...props }) { +

{\`Preview wthout a story\`}

+ + + ); } From dd6dc202df5d5d0f7a4afd749c9f1bb162f97b72 Mon Sep 17 00:00:00 2001 From: atanasster Date: Sat, 7 Sep 2019 14:51:35 +0300 Subject: [PATCH 06/90] withSource="none" remove code button --- addons/docs/src/blocks/Preview.tsx | 2 +- .../stories/addon-docs/addon-docs.stories.mdx | 12 ++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/addons/docs/src/blocks/Preview.tsx b/addons/docs/src/blocks/Preview.tsx index b6220891e49..e250f3da03b 100644 --- a/addons/docs/src/blocks/Preview.tsx +++ b/addons/docs/src/blocks/Preview.tsx @@ -23,7 +23,7 @@ const getPreviewProps = ( }: PreviewProps & { children?: React.ReactNode }, { mdxStoryNameToId, storyStore }: DocsContextProps ): PurePreviewProps => { - if (withSource === SourceState.NONE && !children) { + if (withSource === SourceState.NONE) { return props; } if (mdxSource) { diff --git a/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx b/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx index 9f200967827..5b05b81f962 100644 --- a/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx +++ b/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx @@ -117,3 +117,15 @@ export const nonStory2 = () => ; // another one Flow types are not officially supported + +### withSource="none" + + +

no source

+ + + + + + + \ No newline at end of file From 85dc7173784f4a73e6621d2131f44ad5d8eb4eeb Mon Sep 17 00:00:00 2001 From: atanasster Date: Sun, 8 Sep 2019 02:46:40 +0300 Subject: [PATCH 07/90] mdx-js parsing issue with empty lines --- addons/docs/src/mdx/mdx-compiler-plugin.js | 77 +++++++++++++--------- 1 file changed, 46 insertions(+), 31 deletions(-) diff --git a/addons/docs/src/mdx/mdx-compiler-plugin.js b/addons/docs/src/mdx/mdx-compiler-plugin.js index 121842b64f6..3b7bbb4d3ea 100644 --- a/addons/docs/src/mdx/mdx-compiler-plugin.js +++ b/addons/docs/src/mdx/mdx-compiler-plugin.js @@ -202,38 +202,53 @@ const hasStoryChild = node => { function extractExports(node, options) { node.children.forEach(child => { if (child.type === 'jsx') { - const ast = parser.parseExpression(child.value, { plugins: ['jsx'] }); - if ( - ast.openingElement && - ast.openingElement.type === 'JSXOpeningElement' && - ast.openingElement.name.name === 'Preview' && - !hasStoryChild(ast) - ) { - const previewAst = ast.openingElement; - previewAst.attributes.push({ - type: 'JSXAttribute', - name: { - type: 'JSXIdentifier', - name: 'mdxSource', - }, - value: { - type: 'StringLiteral', - value: encodeURI( - ast.children - .map( - el => - generate(el, { - quotes: 'double', - }).code - ) - .join('\n') - ), - }, - }); + try { + const ast = parser.parseExpression(child.value, { plugins: ['jsx'] }); + if ( + ast.openingElement && + ast.openingElement.type === 'JSXOpeningElement' && + ast.openingElement.name.name === 'Preview' && + !hasStoryChild(ast) + ) { + const previewAst = ast.openingElement; + previewAst.attributes.push({ + type: 'JSXAttribute', + name: { + type: 'JSXIdentifier', + name: 'mdxSource', + }, + value: { + type: 'StringLiteral', + value: encodeURI( + ast.children + .map( + el => + generate(el, { + quotes: 'double', + }).code + ) + .join('\n') + ), + }, + }); + } + const { code } = generate(ast, {}); + // eslint-disable-next-line no-param-reassign + child.value = code; + } catch { + /** catch erroneous child.value string where the babel parseExpression makes exception + * https://github.com/mdx-js/mdx/issues/767 + * eg + * generates error + * 1. child.value =` + + + + + 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..32bb7c2870d 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,7 +82,7 @@ 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); From d014129ae30d1c786f3462cf5180d52ea75578e1 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 11 Oct 2019 09:09:58 +0800 Subject: [PATCH 12/90] Fix missing import --- .../template-mdx/src/stories/0-Welcome.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 1d604609acb..15e55744b61 100644 --- 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 @@ -1,4 +1,4 @@ -import { Meta, Story } from '@storybook/addon-docs/blocks'; +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { linkTo } from '@storybook/addon-links'; import { Welcome } from '@storybook/react/demo'; From be1ab5988b0e48fe1b00a9b0b9f8809824f1ca6b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 11 Oct 2019 09:21:53 +0800 Subject: [PATCH 13/90] Remove unused import --- lib/cli/generators/REACT_SCRIPTS/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/cli/generators/REACT_SCRIPTS/index.js b/lib/cli/generators/REACT_SCRIPTS/index.js index 5a321097a7a..0690ed2d3ff 100644 --- a/lib/cli/generators/REACT_SCRIPTS/index.js +++ b/lib/cli/generators/REACT_SCRIPTS/index.js @@ -2,13 +2,12 @@ import path from 'path'; import fs from 'fs'; import semver from 'semver'; import { - getVersions, getPackageJson, + getVersionedPackages, writePackageJson, getBabelDependencies, installDependencies, copyTemplate, - getVersionedPackages, } from '../../lib/helpers'; export default async (npmOptions, { storyFormat = 'csf' }) => { From ad96cb01a9be0059e283857e845706101e2bf626 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 11 Oct 2019 09:25:40 +0800 Subject: [PATCH 14/90] CLI: Angular MDX template --- lib/cli/generators/ANGULAR/index.js | 40 ++++++--------- .../.storybook/addons.js | 0 .../.storybook/config.js | 0 .../.storybook/tsconfig.json | 0 .../.storybook/typings.d.ts | 0 .../src/stories/0-Welcome.stories.ts | 0 .../src/stories/1-Button.stories.ts | 0 .../ANGULAR/template-mdx/.storybook/addons.js | 3 ++ .../ANGULAR/template-mdx/.storybook/config.js | 4 ++ .../template-mdx/.storybook/presets.js | 1 + .../template-mdx/.storybook/tsconfig.json | 9 ++++ .../template-mdx/.storybook/typings.d.ts | 4 ++ .../src/stories/0-Welcome.stories.mdx | 17 +++++++ .../src/stories/1-Button.stories.mdx | 49 +++++++++++++++++++ lib/cli/lib/initiate.js | 2 +- 15 files changed, 104 insertions(+), 25 deletions(-) rename lib/cli/generators/ANGULAR/{template => template-csf}/.storybook/addons.js (100%) rename lib/cli/generators/ANGULAR/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/ANGULAR/{template => template-csf}/.storybook/tsconfig.json (100%) rename lib/cli/generators/ANGULAR/{template => template-csf}/.storybook/typings.d.ts (100%) rename lib/cli/generators/ANGULAR/{template => template-csf}/src/stories/0-Welcome.stories.ts (100%) rename lib/cli/generators/ANGULAR/{template => template-csf}/src/stories/1-Button.stories.ts (100%) create mode 100644 lib/cli/generators/ANGULAR/template-mdx/.storybook/addons.js create mode 100644 lib/cli/generators/ANGULAR/template-mdx/.storybook/config.js create mode 100644 lib/cli/generators/ANGULAR/template-mdx/.storybook/presets.js create mode 100644 lib/cli/generators/ANGULAR/template-mdx/.storybook/tsconfig.json create mode 100644 lib/cli/generators/ANGULAR/template-mdx/.storybook/typings.d.ts create mode 100644 lib/cli/generators/ANGULAR/template-mdx/src/stories/0-Welcome.stories.mdx create mode 100644 lib/cli/generators/ANGULAR/template-mdx/src/stories/1-Button.stories.mdx 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..b9f8d0322eb --- /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$/), 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/lib/initiate.js b/lib/cli/lib/initiate.js index 32bb7c2870d..47ef37dbf59 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -143,7 +143,7 @@ const installStorybook = (projectType, options) => { .then(end); case types.ANGULAR: - return angularGenerator(npmOptions) + return angularGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Angular" app')) .then(end); From d82a63d4d03db87203f67d2292e83c293b98abdb Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 11 Oct 2019 22:41:33 +0800 Subject: [PATCH 15/90] CLI: Ember story-format refactor --- lib/cli/generators/EMBER/index.js | 5 +++-- .../EMBER/{template => template-csf}/.storybook/addons.js | 0 .../EMBER/{template => template-csf}/.storybook/config.js | 0 .../{template => template-csf}/stories/0-Welcome.stories.js | 0 .../{template => template-csf}/stories/1-Button.stories.js | 0 lib/cli/lib/initiate.js | 2 +- 6 files changed, 4 insertions(+), 3 deletions(-) rename lib/cli/generators/EMBER/{template => template-csf}/.storybook/addons.js (100%) rename lib/cli/generators/EMBER/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/EMBER/{template => template-csf}/stories/0-Welcome.stories.js (100%) rename lib/cli/generators/EMBER/{template => template-csf}/stories/1-Button.stories.js (100%) diff --git a/lib/cli/generators/EMBER/index.js b/lib/cli/generators/EMBER/index.js index cc4316c4c4f..53a33279690 100644 --- a/lib/cli/generators/EMBER/index.js +++ b/lib/cli/generators/EMBER/index.js @@ -6,9 +6,10 @@ import { 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 +18,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/lib/initiate.js b/lib/cli/lib/initiate.js index 47ef37dbf59..a5fea1ad9ed 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -148,7 +148,7 @@ const installStorybook = (projectType, options) => { .then(end); case types.EMBER: - return emberGenerator(npmOptions) + return emberGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Ember" app')) .then(end); From 70525002002eee56485f84a2d632cd773c8fa485 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 08:51:19 +0800 Subject: [PATCH 16/90] CLI: HTML story-format refactor --- lib/cli/generators/HTML/index.js | 12 +++++++----- .../{template => template-csf}/.storybook/config.js | 0 .../stories/index.stories.js | 0 3 files changed, 7 insertions(+), 5 deletions(-) rename lib/cli/generators/HTML/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/HTML/{template => template-csf}/stories/index.stories.js (100%) diff --git a/lib/cli/generators/HTML/index.js b/lib/cli/generators/HTML/index.js index bef0abdc484..b178f7acf5f 100755 --- a/lib/cli/generators/HTML/index.js +++ b/lib/cli/generators/HTML/index.js @@ -2,16 +2,18 @@ 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); + copyTemplate(__dirname, storyFormat); let packageJson = getPackageJson(); if (!packageJson) { @@ -30,5 +32,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 From 4cca15662984741ffd4f3d2fe6af427648ea4c47 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 08:51:39 +0800 Subject: [PATCH 17/90] New template directory pattern --- lib/cli/generators/.eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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, }, From 67fbb24c6a6a07e0dd7c50302b8d52c181608d25 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 09:17:42 +0800 Subject: [PATCH 18/90] CLI: Backwards compatibility for async fs.rename --- lib/codemod/src/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 }) { From 452429b5d912de2b0562cd77cc9277e4caa313bc Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 09:24:52 +0800 Subject: [PATCH 19/90] CLI: HTML template for MDX --- lib/cli/generators/HTML/index.js | 6 ++++-- .../HTML/template-mdx/.storybook/config.js | 4 ++++ .../HTML/template-mdx/.storybook/presets.js | 8 +++++++ .../template-mdx/stories/index.stories.mdx | 21 +++++++++++++++++++ 4 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 lib/cli/generators/HTML/template-mdx/.storybook/config.js create mode 100644 lib/cli/generators/HTML/template-mdx/.storybook/presets.js create mode 100644 lib/cli/generators/HTML/template-mdx/stories/index.stories.mdx diff --git a/lib/cli/generators/HTML/index.js b/lib/cli/generators/HTML/index.js index b178f7acf5f..e67c31d2d21 100755 --- a/lib/cli/generators/HTML/index.js +++ b/lib/cli/generators/HTML/index.js @@ -1,5 +1,3 @@ -import fse from 'fs-extra'; -import path from 'path'; import npmInit from '../../lib/npm_init'; import { getVersionedPackages, @@ -13,6 +11,10 @@ import { 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(); 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..055d4e30181 --- /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$/), 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..bd5d86e6e96 --- /dev/null +++ b/lib/cli/generators/HTML/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/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; + }} + From d2376bfb7cf77e9bd83b3b4caf77b9095b4d5069 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 09:25:24 +0800 Subject: [PATCH 20/90] CLI: Marko template CSF refactor --- lib/cli/generators/MARKO/index.js | 7 +++---- .../MARKO/{template => template-csf}/.storybook/addons.js | 0 .../MARKO/{template => template-csf}/.storybook/config.js | 0 .../stories/components/welcome/index.marko | 0 .../{template => template-csf}/stories/index.stories.js | 0 lib/cli/lib/initiate.js | 4 ++-- 6 files changed, 5 insertions(+), 6 deletions(-) rename lib/cli/generators/MARKO/{template => template-csf}/.storybook/addons.js (100%) rename lib/cli/generators/MARKO/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/MARKO/{template => template-csf}/stories/components/welcome/index.marko (100%) rename lib/cli/generators/MARKO/{template => template-csf}/stories/index.stories.js (100%) 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/lib/initiate.js b/lib/cli/lib/initiate.js index a5fea1ad9ed..d4f73448936 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -163,12 +163,12 @@ const installStorybook = (projectType, options) => { .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); From fb2e60780c8f9a66e27c7ac6287422220890c7b5 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 09:28:08 +0800 Subject: [PATCH 21/90] CLI: Meteor template CSF refactor --- lib/cli/generators/METEOR/index.js | 7 +++---- .../METEOR/{template => template-csf}/.storybook/addons.js | 0 .../METEOR/{template => template-csf}/.storybook/config.js | 0 .../stories/0-Welcome.stories.js | 0 .../{template => template-csf}/stories/1-Button.stories.js | 0 lib/cli/lib/initiate.js | 2 +- 6 files changed, 4 insertions(+), 5 deletions(-) rename lib/cli/generators/METEOR/{template => template-csf}/.storybook/addons.js (100%) rename lib/cli/generators/METEOR/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/METEOR/{template => template-csf}/stories/0-Welcome.stories.js (100%) rename lib/cli/generators/METEOR/{template => template-csf}/stories/1-Button.stories.js (100%) 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/lib/initiate.js b/lib/cli/lib/initiate.js index d4f73448936..6ba8d2043d4 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -118,7 +118,7 @@ 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); From 539181b4ffabdeb965f83968d2ca0f45d552491a Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 09:29:51 +0800 Subject: [PATCH 22/90] CLI: Mithril template CSF refactor --- lib/cli/generators/MITHRIL/index.js | 7 +++---- .../{template => template-csf}/.storybook/addons.js | 0 .../{template => template-csf}/.storybook/config.js | 0 .../stories/0-Welcome.stories.js | 0 .../{template => template-csf}/stories/1-Button.stories.js | 0 .../MITHRIL/{template => template-csf}/stories/Button.js | 0 .../MITHRIL/{template => template-csf}/stories/Welcome.js | 0 lib/cli/lib/initiate.js | 2 +- 8 files changed, 4 insertions(+), 5 deletions(-) rename lib/cli/generators/MITHRIL/{template => template-csf}/.storybook/addons.js (100%) rename lib/cli/generators/MITHRIL/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/MITHRIL/{template => template-csf}/stories/0-Welcome.stories.js (100%) rename lib/cli/generators/MITHRIL/{template => template-csf}/stories/1-Button.stories.js (100%) rename lib/cli/generators/MITHRIL/{template => template-csf}/stories/Button.js (100%) rename lib/cli/generators/MITHRIL/{template => template-csf}/stories/Welcome.js (100%) 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/lib/initiate.js b/lib/cli/lib/initiate.js index 6ba8d2043d4..70974f2becf 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -158,7 +158,7 @@ const installStorybook = (projectType, options) => { .then(end); case types.MITHRIL: - return mithrilGenerator(npmOptions) + return mithrilGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Mithril" app')) .then(end); From 996b7df30a21a60558bfe13e90687276ba824171 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 09:32:28 +0800 Subject: [PATCH 23/90] CLI: Polymer template CSF refactor --- lib/cli/generators/POLYMER/index.js | 7 +++---- .../{template => template-csf}/.storybook/config.js | 0 .../src/stories/index.stories.js | 0 lib/cli/lib/initiate.js | 2 +- 4 files changed, 4 insertions(+), 5 deletions(-) rename lib/cli/generators/POLYMER/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/POLYMER/{template => template-csf}/src/stories/index.stories.js (100%) 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/lib/initiate.js b/lib/cli/lib/initiate.js index 70974f2becf..26be7a2d546 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -153,7 +153,7 @@ const installStorybook = (projectType, options) => { .then(end); case types.POLYMER: - return polymerGenerator(npmOptions) + return polymerGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Polymer" app')) .then(end); From 256556fcc621faafff013c5f27b729a8c7b49c9a Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 09:34:04 +0800 Subject: [PATCH 24/90] CLI: Preact template CSF refactor --- lib/cli/generators/PREACT/index.js | 7 +++---- .../PREACT/{template => template-csf}/.storybook/addons.js | 0 .../PREACT/{template => template-csf}/.storybook/config.js | 0 .../stories/0-Welcome.stories.js | 0 .../{template => template-csf}/stories/1-Button.stories.js | 0 .../PREACT/{template => template-csf}/stories/Button.js | 0 .../PREACT/{template => template-csf}/stories/Welcome.js | 0 lib/cli/lib/initiate.js | 2 +- 8 files changed, 4 insertions(+), 5 deletions(-) rename lib/cli/generators/PREACT/{template => template-csf}/.storybook/addons.js (100%) rename lib/cli/generators/PREACT/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/PREACT/{template => template-csf}/stories/0-Welcome.stories.js (100%) rename lib/cli/generators/PREACT/{template => template-csf}/stories/1-Button.stories.js (100%) rename lib/cli/generators/PREACT/{template => template-csf}/stories/Button.js (100%) rename lib/cli/generators/PREACT/{template => template-csf}/stories/Welcome.js (100%) 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/lib/initiate.js b/lib/cli/lib/initiate.js index 26be7a2d546..a9ff81a7ce1 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -178,7 +178,7 @@ const installStorybook = (projectType, options) => { .then(end); case types.PREACT: - return preactGenerator(npmOptions) + return preactGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Preact" app')) .then(end); From 038629815b9ce895a5eae6154423778a49ecca69 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 09:36:22 +0800 Subject: [PATCH 25/90] CLI: RAX template CSF refactor --- lib/cli/generators/RAX/index.js | 7 +++---- .../RAX/{template => template-csf}/.storybook/addons.js | 0 .../RAX/{template => template-csf}/.storybook/config.js | 0 .../stories/0-Welcome.stories.js | 0 .../{template => template-csf}/stories/1-Button.stories.js | 0 .../RAX/{template => template-csf}/stories/Welcome.js | 0 lib/cli/lib/initiate.js | 2 +- 7 files changed, 4 insertions(+), 5 deletions(-) rename lib/cli/generators/RAX/{template => template-csf}/.storybook/addons.js (100%) rename lib/cli/generators/RAX/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/RAX/{template => template-csf}/stories/0-Welcome.stories.js (100%) rename lib/cli/generators/RAX/{template => template-csf}/stories/1-Button.stories.js (100%) rename lib/cli/generators/RAX/{template => template-csf}/stories/Welcome.js (100%) 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/lib/initiate.js b/lib/cli/lib/initiate.js index a9ff81a7ce1..4eb4e0e52ee 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -188,7 +188,7 @@ const installStorybook = (projectType, options) => { .then(end); case types.RAX: - return raxGenerator(npmOptions) + return raxGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Rax" app')) .then(end); From 277d6c50a2e8e8c816a75eb538d6afaa76571cbe Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 09:41:23 +0800 Subject: [PATCH 26/90] CLI: REACT template CSF refactor --- lib/cli/generators/REACT/index.js | 24 +++++++------------ .../.storybook/addons.js | 0 .../.storybook/config.js | 0 .../stories/0-Welcome.stories.js | 0 .../stories/1-Button.stories.js | 0 lib/cli/lib/initiate.js | 2 +- 6 files changed, 10 insertions(+), 16 deletions(-) rename lib/cli/generators/REACT/{template => template-csf}/.storybook/addons.js (100%) rename lib/cli/generators/REACT/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/REACT/{template => template-csf}/stories/0-Welcome.stories.js (100%) rename lib/cli/generators/REACT/{template => template-csf}/stories/1-Button.stories.js (100%) diff --git a/lib/cli/generators/REACT/index.js b/lib/cli/generators/REACT/index.js index 31dbea118bb..a38635234f6 100644 --- a/lib/cli/generators/REACT/index.js +++ b/lib/cli/generators/REACT/index.js @@ -1,23 +1,23 @@ -import path from 'path'; -import fse from 'fs-extra'; import { getVersions, 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', + ]; - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + const versionedPackages = await getVersions(npmOptions, ...packages); + + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson(); @@ -32,11 +32,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/lib/initiate.js b/lib/cli/lib/initiate.js index 4eb4e0e52ee..74280487951 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -87,7 +87,7 @@ const installStorybook = (projectType, options) => { .then(end); case types.REACT: - return reactGenerator(npmOptions) + return reactGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "React" app')) .then(end); From a979df3773f860c63d97f843df0c9c780d79f210 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 09:44:44 +0800 Subject: [PATCH 27/90] CLI: REACT template MDX support --- lib/cli/generators/REACT/index.js | 3 +++ .../REACT/template-mdx/.storybook/addons.js | 2 ++ .../REACT/template-mdx/.storybook/config.js | 4 ++++ .../stories/0-Welcome.stories.mdx | 15 +++++++++++++ .../template-mdx/stories/1-Button.stories.mdx | 21 +++++++++++++++++++ 5 files changed, 45 insertions(+) create mode 100644 lib/cli/generators/REACT/template-mdx/.storybook/addons.js create mode 100644 lib/cli/generators/REACT/template-mdx/.storybook/config.js create mode 100644 lib/cli/generators/REACT/template-mdx/stories/0-Welcome.stories.mdx create mode 100644 lib/cli/generators/REACT/template-mdx/stories/1-Button.stories.mdx diff --git a/lib/cli/generators/REACT/index.js b/lib/cli/generators/REACT/index.js index a38635234f6..2b67588aa50 100644 --- a/lib/cli/generators/REACT/index.js +++ b/lib/cli/generators/REACT/index.js @@ -14,6 +14,9 @@ export default async (npmOptions, { storyFormat = 'csf' }) => { '@storybook/addon-links', '@storybook/addons', ]; + if (storyFormat === 'mdx') { + packages.push('@storybook/addon-docs'); + } const versionedPackages = await getVersions(npmOptions, ...packages); diff --git a/lib/cli/generators/REACT/template-mdx/.storybook/addons.js b/lib/cli/generators/REACT/template-mdx/.storybook/addons.js new file mode 100644 index 00000000000..6aed412d04a --- /dev/null +++ b/lib/cli/generators/REACT/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/REACT/template-mdx/.storybook/config.js b/lib/cli/generators/REACT/template-mdx/.storybook/config.js new file mode 100644 index 00000000000..0603ed51131 --- /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$/), module); 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: + + + + + + + + From cb1e01e2eb9d813d4303cb6ee313483fe5874ec8 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 09:46:40 +0800 Subject: [PATCH 28/90] CLI: REACT_NATIVE template CSF refactor --- lib/cli/generators/REACT_NATIVE/index.js | 8 +++----- .../{template => template-csf}/storybook/addons.js | 0 .../{template => template-csf}/storybook/index.js | 0 .../{template => template-csf}/storybook/rn-addons.js | 0 .../storybook/stories/Button/index.android.js | 0 .../storybook/stories/Button/index.ios.js | 0 .../storybook/stories/CenterView/index.js | 0 .../storybook/stories/CenterView/style.js | 0 .../storybook/stories/Welcome/index.js | 0 .../{template => template-csf}/storybook/stories/index.js | 0 lib/cli/lib/initiate.js | 2 +- 11 files changed, 4 insertions(+), 6 deletions(-) rename lib/cli/generators/REACT_NATIVE/{template => template-csf}/storybook/addons.js (100%) rename lib/cli/generators/REACT_NATIVE/{template => template-csf}/storybook/index.js (100%) rename lib/cli/generators/REACT_NATIVE/{template => template-csf}/storybook/rn-addons.js (100%) rename lib/cli/generators/REACT_NATIVE/{template => template-csf}/storybook/stories/Button/index.android.js (100%) rename lib/cli/generators/REACT_NATIVE/{template => template-csf}/storybook/stories/Button/index.ios.js (100%) rename lib/cli/generators/REACT_NATIVE/{template => template-csf}/storybook/stories/CenterView/index.js (100%) rename lib/cli/generators/REACT_NATIVE/{template => template-csf}/storybook/stories/CenterView/style.js (100%) rename lib/cli/generators/REACT_NATIVE/{template => template-csf}/storybook/stories/Welcome/index.js (100%) rename lib/cli/generators/REACT_NATIVE/{template => template-csf}/storybook/stories/index.js (100%) 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_NATIVE/template/storybook/addons.js b/lib/cli/generators/REACT_NATIVE/template-csf/storybook/addons.js similarity index 100% rename from lib/cli/generators/REACT_NATIVE/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/lib/initiate.js b/lib/cli/lib/initiate.js index 74280487951..3f84163cbfa 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -104,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(() => { From f6629f395c50446e4d4b0990028ee6f1f016cb45 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 09:48:14 +0800 Subject: [PATCH 29/90] CLI: RIOT template CSF refactor --- lib/cli/generators/RIOT/index.js | 7 +++---- .../RIOT/{template => template-csf}/.storybook/addons.js | 0 .../RIOT/{template => template-csf}/.storybook/config.js | 0 .../stories/0-Welcome.stories.js | 0 .../{template => template-csf}/stories/1-Button.stories.js | 0 .../RIOT/{template => template-csf}/stories/MyButton.tag | 0 .../RIOT/{template => template-csf}/stories/Welcome.tag | 0 lib/cli/lib/initiate.js | 2 +- 8 files changed, 4 insertions(+), 5 deletions(-) rename lib/cli/generators/RIOT/{template => template-csf}/.storybook/addons.js (100%) rename lib/cli/generators/RIOT/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/RIOT/{template => template-csf}/stories/0-Welcome.stories.js (100%) rename lib/cli/generators/RIOT/{template => template-csf}/stories/1-Button.stories.js (100%) rename lib/cli/generators/RIOT/{template => template-csf}/stories/MyButton.tag (100%) rename lib/cli/generators/RIOT/{template => template-csf}/stories/Welcome.tag (100%) 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/RIOT/template/.storybook/addons.js b/lib/cli/generators/RIOT/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/RIOT/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/lib/initiate.js b/lib/cli/lib/initiate.js index 3f84163cbfa..b24e689f97a 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -173,7 +173,7 @@ const installStorybook = (projectType, options) => { .then(end); case types.RIOT: - return riotGenerator(npmOptions) + return riotGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "riot.js" app')) .then(end); From dd5eb211d0f8353787e922580c6aeb817622b229 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 09:51:28 +0800 Subject: [PATCH 30/90] CLI: SFC_VUE template CSF refactor --- lib/cli/generators/SFC_VUE/index.js | 21 +++++++------------ .../.storybook/addons.js | 0 .../.storybook/config.js | 0 .../src/stories/0-Welcome.stories.js | 0 .../src/stories/1-Button.stories.js | 0 .../src/stories/MyButton.vue | 0 .../src/stories/Welcome.vue | 0 lib/cli/lib/initiate.js | 2 +- 8 files changed, 9 insertions(+), 14 deletions(-) rename lib/cli/generators/SFC_VUE/{template => template-csf}/.storybook/addons.js (100%) rename lib/cli/generators/SFC_VUE/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/SFC_VUE/{template => template-csf}/src/stories/0-Welcome.stories.js (100%) rename lib/cli/generators/SFC_VUE/{template => template-csf}/src/stories/1-Button.stories.js (100%) rename lib/cli/generators/SFC_VUE/{template => template-csf}/src/stories/MyButton.vue (100%) rename lib/cli/generators/SFC_VUE/{template => template-csf}/src/stories/Welcome.vue (100%) diff --git a/lib/cli/generators/SFC_VUE/index.js b/lib/cli/generators/SFC_VUE/index.js index 5a9ee404157..3338b926fd6 100644 --- a/lib/cli/generators/SFC_VUE/index.js +++ b/lib/cli/generators/SFC_VUE/index.js @@ -6,18 +6,19 @@ import { 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', + ]; + const versionedPackages = await getVersions(npmOptions, packages); - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson(); @@ -32,11 +33,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/SFC_VUE/template/.storybook/addons.js b/lib/cli/generators/SFC_VUE/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/SFC_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/lib/initiate.js b/lib/cli/lib/initiate.js index b24e689f97a..d3caeaa827d 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -133,7 +133,7 @@ const installStorybook = (projectType, options) => { .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); From 6fd1ce3608db0c0a62c2530f8c74a41d09f9a07e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 09:54:12 +0800 Subject: [PATCH 31/90] CLI: REACT add missing presets file --- lib/cli/generators/REACT/template-mdx/.storybook/presets.js | 1 + 1 file changed, 1 insertion(+) create mode 100644 lib/cli/generators/REACT/template-mdx/.storybook/presets.js 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..b1d463490f6 --- /dev/null +++ b/lib/cli/generators/REACT/template-mdx/.storybook/presets.js @@ -0,0 +1 @@ +module.exports = ['@storybook/addon-docs/react/preset']; From a5a402c3177310bef5afedfa4562aa8aab54bb4a Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 10:02:59 +0800 Subject: [PATCH 32/90] CLI: SFC_VUE template MDX support --- lib/cli/generators/SFC_VUE/index.js | 3 + .../SFC_VUE/template-mdx/.storybook/addons.js | 2 + .../SFC_VUE/template-mdx/.storybook/config.js | 4 + .../template-mdx/.storybook/presets.js | 1 + .../src/stories/0-Welcome.stories.mdx | 23 ++++ .../src/stories/1-Button.stories.mdx | 49 +++++++ .../template-mdx/src/stories/MyButton.vue | 29 +++++ .../template-mdx/src/stories/Welcome.vue | 120 ++++++++++++++++++ 8 files changed, 231 insertions(+) create mode 100644 lib/cli/generators/SFC_VUE/template-mdx/.storybook/addons.js create mode 100644 lib/cli/generators/SFC_VUE/template-mdx/.storybook/config.js create mode 100644 lib/cli/generators/SFC_VUE/template-mdx/.storybook/presets.js create mode 100644 lib/cli/generators/SFC_VUE/template-mdx/src/stories/0-Welcome.stories.mdx create mode 100644 lib/cli/generators/SFC_VUE/template-mdx/src/stories/1-Button.stories.mdx create mode 100644 lib/cli/generators/SFC_VUE/template-mdx/src/stories/MyButton.vue create mode 100644 lib/cli/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue diff --git a/lib/cli/generators/SFC_VUE/index.js b/lib/cli/generators/SFC_VUE/index.js index 3338b926fd6..978dc3f22be 100644 --- a/lib/cli/generators/SFC_VUE/index.js +++ b/lib/cli/generators/SFC_VUE/index.js @@ -16,6 +16,9 @@ export default async (npmOptions, { storyFormat = 'csf' }) => { '@storybook/addon-links', '@storybook/addons', ]; + if (storyFormat === 'mdx') { + packages.push('@storybook/addon-docs'); + } const versionedPackages = await getVersions(npmOptions, packages); copyTemplate(__dirname, storyFormat); 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..145eb83c09a --- /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$/), 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..ff8ddef54a9 --- /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..f18ce7dfcc8 --- /dev/null +++ b/lib/cli/generators/SFC_VUE/template-mdx/src/stories/1-Button.stories.mdx @@ -0,0 +1,49 @@ +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 three stories: + + + {() => ({ + components: { + MyButton, + }, + template: 'Hello Button', + methods: { + action: action('clicked'), + }, + })} + + + + {() => ({ + components: { + MyButton, + }, + render() { + return With JSX; + }, + methods: { + action: linkTo('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 @@ + + + + + From e9472ff611e748b889e4e503327a6cbd25249216 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 10:04:32 +0800 Subject: [PATCH 33/90] CLI: HTML template MDX use html docs preset --- .../generators/HTML/template-mdx/.storybook/presets.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/lib/cli/generators/HTML/template-mdx/.storybook/presets.js b/lib/cli/generators/HTML/template-mdx/.storybook/presets.js index bd5d86e6e96..7c4d1835bcf 100644 --- a/lib/cli/generators/HTML/template-mdx/.storybook/presets.js +++ b/lib/cli/generators/HTML/template-mdx/.storybook/presets.js @@ -1,8 +1 @@ -module.exports = [ - { - name: '@storybook/addon-docs/react/preset', - options: { - configureJSX: true, - }, - }, -]; +module.exports = ['@storybook/addon-docs/html/preset']; From ba61fb9befd120b7b774e456ea3d2460b78121fb Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 10:07:49 +0800 Subject: [PATCH 34/90] CLI: SVELTE template CSF refactor --- lib/cli/generators/SVELTE/index.js | 7 +++---- .../SVELTE/{template => template-csf}/.storybook/addons.js | 0 .../SVELTE/{template => template-csf}/.storybook/config.js | 0 .../{template => template-csf}/stories/button.svelte | 0 .../{template => template-csf}/stories/index.stories.js | 0 lib/cli/lib/initiate.js | 2 +- 6 files changed, 4 insertions(+), 5 deletions(-) rename lib/cli/generators/SVELTE/{template => template-csf}/.storybook/addons.js (100%) rename lib/cli/generators/SVELTE/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/SVELTE/{template => template-csf}/stories/button.svelte (100%) rename lib/cli/generators/SVELTE/{template => template-csf}/stories/index.stories.js (100%) 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/.storybook/addons.js b/lib/cli/generators/SVELTE/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/SVELTE/template/.storybook/addons.js rename to lib/cli/generators/SVELTE/template-csf/.storybook/addons.js 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/lib/initiate.js b/lib/cli/lib/initiate.js index d3caeaa827d..37ebfeb43c0 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -183,7 +183,7 @@ const installStorybook = (projectType, options) => { .then(end); case types.SVELTE: - return svelteGenerator(npmOptions) + return svelteGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Svelte" app')) .then(end); From 4871fc0b50148c16b8307108b216ccf10685f202 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 10:14:12 +0800 Subject: [PATCH 35/90] CLI: VUE template CSF refactor --- lib/cli/generators/VUE/index.js | 38 ++++++++----------- .../.storybook/addons.js | 0 .../.storybook/config.js | 0 .../stories/0-Welcome.stories.js | 0 .../stories/1-Button.stories.js | 0 .../stories/MyButton.js | 0 .../stories/Welcome.js | 0 lib/cli/lib/initiate.js | 2 +- 8 files changed, 16 insertions(+), 24 deletions(-) rename lib/cli/generators/VUE/{template => template-csf}/.storybook/addons.js (100%) rename lib/cli/generators/VUE/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/VUE/{template => template-csf}/stories/0-Welcome.stories.js (100%) rename lib/cli/generators/VUE/{template => template-csf}/stories/1-Button.stories.js (100%) rename lib/cli/generators/VUE/{template => template-csf}/stories/MyButton.js (100%) rename lib/cli/generators/VUE/{template => template-csf}/stories/Welcome.js (100%) diff --git a/lib/cli/generators/VUE/index.js b/lib/cli/generators/VUE/index.js index 5c3b6b543e4..27727c22129 100644 --- a/lib/cli/generators/VUE/index.js +++ b/lib/cli/generators/VUE/index.js @@ -1,33 +1,28 @@ 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', + ]; + const versionedPackages = await getVersionedPackages(npmOptions, ...packages); - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson(); @@ -41,7 +36,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 +53,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/.storybook/addons.js b/lib/cli/generators/VUE/template-csf/.storybook/addons.js similarity index 100% rename from lib/cli/generators/VUE/template/.storybook/addons.js rename to lib/cli/generators/VUE/template-csf/.storybook/addons.js 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/lib/initiate.js b/lib/cli/lib/initiate.js index 37ebfeb43c0..5560f219f38 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -138,7 +138,7 @@ const installStorybook = (projectType, options) => { .then(end); case types.VUE: - return vueGenerator(npmOptions) + return vueGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "Vue" app')) .then(end); From 3a41a0dc2bcfd19a987d2ee7cc69e7d1f8b67bdb Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 10:14:59 +0800 Subject: [PATCH 36/90] CLI: SFC_VUE fixes --- lib/cli/generators/SFC_VUE/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/cli/generators/SFC_VUE/index.js b/lib/cli/generators/SFC_VUE/index.js index 978dc3f22be..e10f37d015b 100644 --- a/lib/cli/generators/SFC_VUE/index.js +++ b/lib/cli/generators/SFC_VUE/index.js @@ -1,7 +1,7 @@ import fse from 'fs-extra'; import path from 'path'; import { - getVersions, + getVersionedPackages, getPackageJson, writePackageJson, getBabelDependencies, @@ -19,7 +19,7 @@ export default async (npmOptions, { storyFormat = 'csf' }) => { if (storyFormat === 'mdx') { packages.push('@storybook/addon-docs'); } - const versionedPackages = await getVersions(npmOptions, packages); + const versionedPackages = await getVersionedPackages(npmOptions, packages); copyTemplate(__dirname, storyFormat); From e7364a435b569506607f110d2ba6cad5db0da2f9 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 10:15:40 +0800 Subject: [PATCH 37/90] CLI: REACT fixes --- lib/cli/generators/REACT/index.js | 4 ++-- lib/cli/lib/initiate.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/cli/generators/REACT/index.js b/lib/cli/generators/REACT/index.js index 2b67588aa50..2658c779e7d 100644 --- a/lib/cli/generators/REACT/index.js +++ b/lib/cli/generators/REACT/index.js @@ -1,5 +1,5 @@ import { - getVersions, + getVersionedPackages, getPackageJson, writePackageJson, getBabelDependencies, @@ -18,7 +18,7 @@ export default async (npmOptions, { storyFormat = 'csf' }) => { packages.push('@storybook/addon-docs'); } - const versionedPackages = await getVersions(npmOptions, ...packages); + const versionedPackages = await getVersionedPackages(npmOptions, ...packages); copyTemplate(__dirname, storyFormat); diff --git a/lib/cli/lib/initiate.js b/lib/cli/lib/initiate.js index 5560f219f38..316f707d4a8 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -128,7 +128,7 @@ const installStorybook = (projectType, options) => { .then(end); case types.REACT_PROJECT: - return reactGenerator(npmOptions) + return reactGenerator(npmOptions, generatorOptions) .then(commandLog('Adding storybook support to your "React" library')) .then(end); From 0248e25511e650168b3e0fe863a453ec3a70cd03 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 10:38:41 +0800 Subject: [PATCH 38/90] CLI: VUE template MDX support --- lib/cli/generators/VUE/index.js | 3 + .../VUE/template-mdx/.storybook/addons.js | 2 + .../VUE/template-mdx/.storybook/config.js | 4 + .../stories/0-Welcome.stories.mdx | 23 ++++ .../template-mdx/stories/1-Button.stories.mdx | 48 +++++++ .../VUE/template-mdx/stories/MyButton.js | 29 +++++ .../VUE/template-mdx/stories/Welcome.js | 121 ++++++++++++++++++ 7 files changed, 230 insertions(+) create mode 100644 lib/cli/generators/VUE/template-mdx/.storybook/addons.js create mode 100644 lib/cli/generators/VUE/template-mdx/.storybook/config.js create mode 100644 lib/cli/generators/VUE/template-mdx/stories/0-Welcome.stories.mdx create mode 100644 lib/cli/generators/VUE/template-mdx/stories/1-Button.stories.mdx create mode 100644 lib/cli/generators/VUE/template-mdx/stories/MyButton.js create mode 100644 lib/cli/generators/VUE/template-mdx/stories/Welcome.js diff --git a/lib/cli/generators/VUE/index.js b/lib/cli/generators/VUE/index.js index 27727c22129..d190175ceae 100644 --- a/lib/cli/generators/VUE/index.js +++ b/lib/cli/generators/VUE/index.js @@ -20,6 +20,9 @@ export default async (npmOptions, { storyFormat = 'csf' }) => { 'babel-preset-vue', '@babel/core', ]; + if (storyFormat === 'mdx') { + packages.push('@storybook/addon-docs'); + } const versionedPackages = await getVersionedPackages(npmOptions, ...packages); copyTemplate(__dirname, storyFormat); 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..1516685de79 --- /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$/), module); 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..8cc095ce450 --- /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..ad9fec4b4bd --- /dev/null +++ b/lib/cli/generators/VUE/template-mdx/stories/1-Button.stories.mdx @@ -0,0 +1,48 @@ +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 three stories: + + + {() => ({ + components: { + MyButton, + }, + template: 'Hello Button', + methods: { + action: action('clicked'), + }, + })} + + + + {() => ({ + components: { + MyButton, + }, + render(h) { + return With JSX; + }, + methods: { + action: linkTo('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(); + }, + }, +}; From e64cecf7f162ef3452ae79681e4441f847a73656 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 10:42:43 +0800 Subject: [PATCH 39/90] CLI: WEBPACK_REACT template CSF refactor --- lib/cli/generators/WEBPACK_REACT/index.js | 25 +++++++------------ .../.storybook/config.js | 0 .../.storybook/webpack.config.js | 0 .../stories/0-Welcome.stories.js | 0 .../stories/1-Button.stories.js | 0 lib/cli/lib/initiate.js | 2 +- 6 files changed, 10 insertions(+), 17 deletions(-) rename lib/cli/generators/WEBPACK_REACT/{template => template-csf}/.storybook/config.js (100%) rename lib/cli/generators/WEBPACK_REACT/{template => template-csf}/.storybook/webpack.config.js (100%) rename lib/cli/generators/WEBPACK_REACT/{template => template-csf}/stories/0-Welcome.stories.js (100%) rename lib/cli/generators/WEBPACK_REACT/{template => template-csf}/stories/1-Button.stories.js (100%) diff --git a/lib/cli/generators/WEBPACK_REACT/index.js b/lib/cli/generators/WEBPACK_REACT/index.js index 5447ea5b585..8d850914347 100644 --- a/lib/cli/generators/WEBPACK_REACT/index.js +++ b/lib/cli/generators/WEBPACK_REACT/index.js @@ -1,23 +1,22 @@ -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', + ]; + const versionedPackages = await getVersionedPackages(npmOptions, ...packages); - fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true }); + copyTemplate(__dirname, storyFormat); const packageJson = getPackageJson(); @@ -32,11 +31,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/lib/initiate.js b/lib/cli/lib/initiate.js index 316f707d4a8..87eb2ce2889 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -123,7 +123,7 @@ const installStorybook = (projectType, options) => { .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); From b4df87267819d6f9f8630893e0e52841e8496e05 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 10:45:20 +0800 Subject: [PATCH 40/90] CLI: WEBPACK_REACT template MDX support --- lib/cli/generators/WEBPACK_REACT/index.js | 3 +++ .../template-mdx/.storybook/config.js | 4 ++++ .../template-mdx/.storybook/webpack.config.js | 18 ++++++++++++++++ .../stories/0-Welcome.stories.mdx | 15 +++++++++++++ .../template-mdx/stories/1-Button.stories.mdx | 21 +++++++++++++++++++ 5 files changed, 61 insertions(+) create mode 100644 lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/config.js create mode 100644 lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/webpack.config.js create mode 100644 lib/cli/generators/WEBPACK_REACT/template-mdx/stories/0-Welcome.stories.mdx create mode 100644 lib/cli/generators/WEBPACK_REACT/template-mdx/stories/1-Button.stories.mdx diff --git a/lib/cli/generators/WEBPACK_REACT/index.js b/lib/cli/generators/WEBPACK_REACT/index.js index 8d850914347..2fc13d684fc 100644 --- a/lib/cli/generators/WEBPACK_REACT/index.js +++ b/lib/cli/generators/WEBPACK_REACT/index.js @@ -14,6 +14,9 @@ export default async (npmOptions, { storyFormat = 'csf' }) => { '@storybook/addon-links', '@storybook/addons', ]; + if (storyFormat === 'mdx') { + packages.push('@storybook/addon-docs'); + } const versionedPackages = await getVersionedPackages(npmOptions, ...packages); copyTemplate(__dirname, storyFormat); 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..0603ed51131 --- /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$/), module); 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: + + + + + + + + From 4f8993093371ab8b719a2709f3a52322adf4386d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 11:19:25 +0800 Subject: [PATCH 41/90] CLI: Fix DeepScan warnings --- lib/cli/generators/EMBER/index.js | 2 -- lib/cli/generators/SFC_VUE/index.js | 2 -- lib/cli/generators/VUE/index.js | 2 -- 3 files changed, 6 deletions(-) diff --git a/lib/cli/generators/EMBER/index.js b/lib/cli/generators/EMBER/index.js index 53a33279690..1e279cb3107 100644 --- a/lib/cli/generators/EMBER/index.js +++ b/lib/cli/generators/EMBER/index.js @@ -1,5 +1,3 @@ -import path from 'path'; -import fse from 'fs-extra'; import { getVersions, getPackageJson, diff --git a/lib/cli/generators/SFC_VUE/index.js b/lib/cli/generators/SFC_VUE/index.js index e10f37d015b..9d2eae22ff9 100644 --- a/lib/cli/generators/SFC_VUE/index.js +++ b/lib/cli/generators/SFC_VUE/index.js @@ -1,5 +1,3 @@ -import fse from 'fs-extra'; -import path from 'path'; import { getVersionedPackages, getPackageJson, diff --git a/lib/cli/generators/VUE/index.js b/lib/cli/generators/VUE/index.js index d190175ceae..7123f93d2b8 100644 --- a/lib/cli/generators/VUE/index.js +++ b/lib/cli/generators/VUE/index.js @@ -1,5 +1,3 @@ -import fse from 'fs-extra'; -import path from 'path'; import { getVersion, getVersionedPackages, From 464041e7559eb1d2c4c93044c13c943662036aee Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Oct 2019 11:38:23 +0800 Subject: [PATCH 42/90] CLI: Fix SVC_VUE typo --- lib/cli/generators/SFC_VUE/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/cli/generators/SFC_VUE/index.js b/lib/cli/generators/SFC_VUE/index.js index 9d2eae22ff9..0fb3e5ca418 100644 --- a/lib/cli/generators/SFC_VUE/index.js +++ b/lib/cli/generators/SFC_VUE/index.js @@ -17,7 +17,7 @@ export default async (npmOptions, { storyFormat = 'csf' }) => { if (storyFormat === 'mdx') { packages.push('@storybook/addon-docs'); } - const versionedPackages = await getVersionedPackages(npmOptions, packages); + const versionedPackages = await getVersionedPackages(npmOptions, ...packages); copyTemplate(__dirname, storyFormat); From c426715d0aa9b5955b638659edcd89579ad0e06c Mon Sep 17 00:00:00 2001 From: Carolyn Stransky Date: Sat, 12 Oct 2019 17:04:33 +0200 Subject: [PATCH 43/90] Removed instances of simply --- CONTRIBUTING.md | 2 +- MIGRATION.md | 6 +++--- addons/contexts/README.md | 2 +- addons/docs/docs/mdx.md | 2 +- addons/docs/docs/recipes.md | 2 +- addons/docs/docs/theming.md | 4 ++-- addons/jest/README.md | 2 +- addons/storyshots/storyshots-core/README.md | 4 ++-- addons/storyshots/storyshots-puppeteer/README.md | 4 ++-- addons/viewport/README.md | 2 +- app/react-native/docs/manual-setup.md | 2 +- app/react-native/readme.md | 4 ++-- .../absolute-positioned-keyboard-aware-view.tsx | 2 +- docs/src/pages/addons/using-addons/index.md | 2 +- docs/src/pages/addons/writing-addons/index.md | 2 +- docs/src/pages/basics/exporting-storybook/index.md | 4 ++-- docs/src/pages/configurations/add-custom-body/index.md | 2 +- .../pages/configurations/add-custom-head-tags/index.md | 2 +- .../src/pages/configurations/custom-babel-config/index.md | 2 +- docs/src/pages/configurations/default-config/index.md | 4 ++-- .../pages/configurations/serving-static-files/index.md | 2 +- docs/src/pages/guides/guide-ember/index.md | 8 ++++---- docs/src/pages/guides/guide-react-native/index.md | 6 +++--- docs/src/pages/guides/guide-svelte/index.md | 4 ++-- docs/src/pages/presets/introduction/index.md | 4 ++-- docs/src/pages/presets/writing-presets/index.md | 2 +- docs/src/pages/testing/automated-visual-testing/index.md | 2 +- docs/src/pages/testing/react-ui-testing/index.md | 2 +- docs/src/pages/testing/structural-testing/index.md | 2 +- .../stories/addon-docs/csf-with-mdx-docs.stories.js | 2 +- lib/client-api/src/client_api.ts | 2 +- lib/core/src/client/preview/start.js | 2 +- lib/ui/README.md | 2 +- 33 files changed, 48 insertions(+), 48 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a084900bab8..960213c3707 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -299,7 +299,7 @@ Storybook is broken up into sub-projects that you can install as you need them. #### Connecting Your App To Storybook -**_Note:_** If you aren't seeing addons after linking storybook, you probably have a versioning issue which can be fixed by simply linking each addon you want to use. +**_Note:_** If you aren't seeing addons after linking storybook, you probably have a versioning issue which can be fixed by linking each addon you want to use. This applies for the kitchen sink apps as well as your own projects. _Make sure `yarn dev` is running_ diff --git a/MIGRATION.md b/MIGRATION.md index 827dd41b396..cdfdb289a85 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -77,7 +77,7 @@ Addon-storysource contains a loader, `@storybook/addon-storysource/loader`, whic @storybook/addon-storysource/loader is deprecated, please use @storybook/source-loader instead. ``` -To upgrade to `@storybook/source-loader`, simply `npm install -D @storybook/source-loader` (or use `yarn`), and replace every instance of `@storybook/addon-storysource/loader` with `@storybook/source-loader`. +To upgrade to `@storybook/source-loader`, run `npm install -D @storybook/source-loader` (or use `yarn`), and replace every instance of `@storybook/addon-storysource/loader` with `@storybook/source-loader`. ### Default viewports @@ -139,7 +139,7 @@ Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared In addition, both packages share more code with the rest of Storybook, which will reduce bugs and increase compatibility (e.g. with the latest versions of babel, etc.). -As a user with an existing 4.1.x RN setup, no migration should be necessary to your RN app. Simply upgrading the library should be enough. +As a user with an existing 4.1.x RN setup, no migration should be necessary to your RN app. Upgrading the library should be enough. If you wish to run the optional web server, you will need to do the following migration: @@ -284,7 +284,7 @@ In 5.0, we now provide recommended defaults: This means if you use the characters { `|`, `/`, `.` } in your story kinds it will triggger the story hierarchy to appear. For example `storiesOf('UI|Widgets/Basics/Button')` will create a story root called `UI` containing a `Widgets/Basics` group, containing a `Button` component. -If you wish to opt-out of this new behavior and restore the flat UI, simply set them back to `null` in your storybook config, or remove { `|`, `/`, `.` } from your story kinds: +If you wish to opt-out of this new behavior and restore the flat UI, set them back to `null` in your storybook config, or remove { `|`, `/`, `.` } from your story kinds: ```js addParameters({ diff --git a/addons/contexts/README.md b/addons/contexts/README.md index 8f51fd449d8..3362dfa6fdf 100644 --- a/addons/contexts/README.md +++ b/addons/contexts/README.md @@ -6,7 +6,7 @@ ## 💡 Why you need this? Real world users expects your application being customizable, that is why often your components are **polymorphic**: -they simply need to adapt themselves under different contextual environments. Imagine your components can speak +they need to adapt themselves under different contextual environments. Imagine your components can speak Chinese, English, or even French, and they change their skin tone under dark or light theme. Yeah, you want to make sure a component looks great in all scenarios. diff --git a/addons/docs/docs/mdx.md b/addons/docs/docs/mdx.md index e70d1ff5889..25e6e359cf2 100644 --- a/addons/docs/docs/mdx.md +++ b/addons/docs/docs/mdx.md @@ -182,7 +182,7 @@ If you don't define stories in your MDX, you can write MDX documentation and ass If you don't define a `Meta`, you can write Markdown and associate with an existing story. See ["CSF Stories with MDX Docs"](recipes.md#csf-stories-with-mdx-docs). -To get a "documentation-only story", in your UI, simply define a `` as you normally would, but don't define any stories. It will show up in your UI as a documentation node: +To get a "documentation-only story", in your UI, define a `` as you normally would, but don't define any stories. It will show up in your UI as a documentation node:
diff --git a/addons/docs/docs/recipes.md b/addons/docs/docs/recipes.md index bf14c38f94a..4a9659a5158 100644 --- a/addons/docs/docs/recipes.md +++ b/addons/docs/docs/recipes.md @@ -42,7 +42,7 @@ import { Button } from './Button'; export default { title: 'Demo/Button', component: Button, - includeStories: [], // or simply don't load this file at all + includeStories: [], // or don't load this file at all }; export const basic = () => ; diff --git a/addons/docs/docs/theming.md b/addons/docs/docs/theming.md index 3c430407c60..0aabd0b195a 100644 --- a/addons/docs/docs/theming.md +++ b/addons/docs/docs/theming.md @@ -27,7 +27,7 @@ addParameters({ The Storybook theme API is narrow by design. If you want to have fine-grained control over the CSS, all of the Docs components are tagged with class names to make this possible. This is advanced usage: use at your own risk. -The classes correspond to markdown elements (e.g. `sbdocs-h1`, `sbdocs-p`, etc.) to UI elements on the page (e.g. `sbdocs-container`, `sbdocs-content`, etc.). To see the currently available classes, simply "inspect element" in your browser. +The classes correspond to markdown elements (e.g. `sbdocs-h1`, `sbdocs-p`, etc.) to UI elements on the page (e.g. `sbdocs-container`, `sbdocs-content`, etc.). To see the currently available classes, use "inspect element" in your browser. You can style these classes in `.storybook/preview-head.html`. For example, here's how to make the content wider for UHD displays: @@ -39,7 +39,7 @@ You can style these classes in `.storybook/preview-head.html`. For example, here ``` -> NOTE: All of these elements also have the `sbdocs` class, which is simply an idiomatic way of increasing the CSS specificity so you don't have to use `!important`. +> NOTE: All of these elements also have the `sbdocs` class, which is an idiomatic way of increasing the CSS specificity so you don't have to use `!important`. ## MDX component overrides diff --git a/addons/jest/README.md b/addons/jest/README.md index 1a872c7ffd9..5670a157f17 100644 --- a/addons/jest/README.md +++ b/addons/jest/README.md @@ -96,7 +96,7 @@ storiesOf('MyComponent', module) ); ``` -Or in order to avoid importing `.jest-test-results.json` in each story, simply add the decorator in your `.storybook/config.js` and results will display for stories that you have set the `jest` parameter on: +Or in order to avoid importing `.jest-test-results.json` in each story, add the decorator in your `.storybook/config.js` and results will display for stories that you have set the `jest` parameter on: ```js import { addDecorator } from '@storybook/react'; // <- or your view layer diff --git a/addons/storyshots/storyshots-core/README.md b/addons/storyshots/storyshots-core/README.md index 65212ba913b..02d0553c2bf 100644 --- a/addons/storyshots/storyshots-core/README.md +++ b/addons/storyshots/storyshots-core/README.md @@ -96,7 +96,7 @@ First, install it: yarn add require-context.macro --dev ``` -Now, inside of your Storybook config file, simply import the macro and run it in place of `require.context`, like so: +Now, inside of your Storybook config file, import the macro and run it in place of `require.context`, like so: ```javascript import requireContext from 'require-context.macro'; @@ -587,7 +587,7 @@ Like the default, but allows you to specify a set of options for the renderer, j ### `multiSnapshotWithOptions(options)` -Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes. If you'd like the benefit of separate snapshot files, but don't have custom options to pass, simply pass an empty object. +Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes. If you'd like the benefit of separate snapshot files, but don't have custom options to pass, you can pass an empty object. If you use [Component Story Format](https://storybook.js.org/docs/formats/component-story-format/), you may also need to add an additional Jest transform to automate detecting story file names: ```js // jest.config.js diff --git a/addons/storyshots/storyshots-puppeteer/README.md b/addons/storyshots/storyshots-puppeteer/README.md index d06976d19b7..6a8d87d530d 100644 --- a/addons/storyshots/storyshots-puppeteer/README.md +++ b/addons/storyshots/storyshots-puppeteer/README.md @@ -205,7 +205,7 @@ You can find a working example of this in the [official-storybook](https://githu You have two options here, you can either: -- Simply add the storyshots configuration inside any of your `test.js` file. You must ensure you have either a running storybook or a static build available. +- Add the storyshots configuration inside any of your `test.js` file. You must ensure you have either a running storybook or a static build available. - Create a custom test file using Jest outside of the CRA scope: @@ -227,7 +227,7 @@ You have two options here, you can either: ### Reminder -An image snapshot is simply a screenshot taken by a web browser (in our case, Chrome). +An image snapshot is a screenshot taken by a web browser (in our case, Chrome). The browser opens a page (either using the static build of storybook or a running instance of Storybook) diff --git a/addons/viewport/README.md b/addons/viewport/README.md index 981dedf06a7..2d5b1939263 100644 --- a/addons/viewport/README.md +++ b/addons/viewport/README.md @@ -118,7 +118,7 @@ addParameters({ ### Use Custom Set of Devices -This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by simply calling `addParameters` with the two devices as `viewports` in `config.js` file in your `.storybook` directory. +This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by calling `addParameters` with the two devices as `viewports` in `config.js` file in your `.storybook` directory. ```js import { addParameters } from '@storybook/react'; diff --git a/app/react-native/docs/manual-setup.md b/app/react-native/docs/manual-setup.md index 8998e9d155f..5b098217bc6 100644 --- a/app/react-native/docs/manual-setup.md +++ b/app/react-native/docs/manual-setup.md @@ -79,7 +79,7 @@ export default StorybookUI; ``` If you cannot replace your entry point just make sure that the component exported from `./storybook` is displayed -somewhere in your app. `StorybookUI` is simply a RN `View` component that can be embedded anywhere in your +somewhere in your app. `StorybookUI` is a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen. ## Server support diff --git a/app/react-native/readme.md b/app/react-native/readme.md index e39a1345118..2786490b0a0 100644 --- a/app/react-native/readme.md +++ b/app/react-native/readme.md @@ -22,7 +22,7 @@ The next thing you need to do is make Storybook UI visible in your app. ### CRNA, React Native vanilla -The easiest way to use Storybook is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code: +The easiest way to use Storybook is to replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code: ```js export default from './storybook'; @@ -41,7 +41,7 @@ module.exports = __DEV__ ? StorybookUI : App; ### React Native Navigation, other complex use cases -`StorybookUI` is simply a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen. +`StorybookUI` is a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen. ## Start Storybook server (optional) diff --git a/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx b/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx index c4d1533876e..7bf42d8aba8 100644 --- a/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx +++ b/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx @@ -43,7 +43,7 @@ export default class AbsolutePositionedKeyboardAwareView extends PureComponent

{ if (Platform.OS === 'android') { const { previewWidth } = this.props; - // There is bug in RN android that keyboardDidShow event is called simply when you go from portrait to landscape. + // There is bug in RN android that keyboardDidShow event is called when you go from portrait to landscape. // To make sure that this is keyboard event we check screen width if (previewWidth === e.endCoordinates.width) { this.keyboardOpen = true; diff --git a/docs/src/pages/addons/using-addons/index.md b/docs/src/pages/addons/using-addons/index.md index cbfcb08e0ca..09a5d3d4722 100644 --- a/docs/src/pages/addons/using-addons/index.md +++ b/docs/src/pages/addons/using-addons/index.md @@ -90,7 +90,7 @@ storiesOf('Button', module).add( ## Global Configuration -Sometimes you might want to configure an addon globally, as in the case of collocating stories with components, or just simply to keep your stories file cleaner. To do that, you can add your decorators to a config file, typically in `.storybook/config.js`. Here's an example of how you might do that. +Sometimes you might want to configure an addon globally, as in the case of collocating stories with components, or to keep your stories file cleaner. To do that, you can add your decorators to a config file, typically in `.storybook/config.js`. Here's an example of how you might do that. ```js import { configure, addParameters } from '@storybook/react'; diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md index 1f2f37b0454..d344ac42446 100644 --- a/docs/src/pages/addons/writing-addons/index.md +++ b/docs/src/pages/addons/writing-addons/index.md @@ -145,7 +145,7 @@ export default makeDecorator({ wrapper: (getStory, context, { parameters }) => { const channel = addons.getChannel(); - // Our simple API above simply sets the notes parameter to a string, + // Our API above sets the notes parameter to a string, // which we send to the channel channel.emit('my/customEvent', parameters); // we can also add subscriptions here using channel.on('eventName', callback); diff --git a/docs/src/pages/basics/exporting-storybook/index.md b/docs/src/pages/basics/exporting-storybook/index.md index 3c6fc1e2a90..ea91a218600 100644 --- a/docs/src/pages/basics/exporting-storybook/index.md +++ b/docs/src/pages/basics/exporting-storybook/index.md @@ -10,7 +10,7 @@ Demos of [React Native Web](http://necolas.github.io/react-native-web/storybook/ For that, Storybook comes with a tool to export your storybook into a static web app. Then you can deploy it to GitHub pages or any static hosting service. -Simply add the following NPM script: +Add the following NPM script: ```json { @@ -35,7 +35,7 @@ npx http-server .out Additionally, you can deploy Storybook directly into GitHub pages with our [storybook-deployer](https://github.com/storybookjs/storybook-deployer) tool. -Or, you can simply export your storybook into the docs directory and use it as the root for GitHub pages. Have a look at [this guide](https://github.com/blog/2233-publish-your-project-documentation-with-github-pages) for more information. +Or, you can export your storybook into the docs directory and use it as the root for GitHub pages. Have a look at [this guide](https://github.com/blog/2233-publish-your-project-documentation-with-github-pages) for more information. ## Deploying to ZEIT Now diff --git a/docs/src/pages/configurations/add-custom-body/index.md b/docs/src/pages/configurations/add-custom-body/index.md index c2e44c08165..edd3b344c82 100644 --- a/docs/src/pages/configurations/add-custom-body/index.md +++ b/docs/src/pages/configurations/add-custom-body/index.md @@ -5,7 +5,7 @@ title: 'Add Custom Body' Sometimes, you may need to add different tags to the HTML body. This is useful for adding some custom content roots. -You can do this very easily. Simply create a file called `preview-body.html` inside the Storybook config directory and add tags like this: +You can accomplish this by creating a file called `preview-body.html` inside the Storybook config directory and add tags like this: ```html

diff --git a/docs/src/pages/configurations/add-custom-head-tags/index.md b/docs/src/pages/configurations/add-custom-head-tags/index.md index 7960160c17f..3e8d1189a7e 100644 --- a/docs/src/pages/configurations/add-custom-head-tags/index.md +++ b/docs/src/pages/configurations/add-custom-head-tags/index.md @@ -5,7 +5,7 @@ title: 'Add Custom Head Tags' Sometimes, you may need to add different tags to the HTML head. This is useful for adding web fonts or some external scripts. -You can do this very easily. Simply create a file called `preview-head.html` inside the Storybook config directory and add tags like this: +You can accomplish this by creating a file called `preview-head.html` inside the Storybook config directory and add tags like this: ```html diff --git a/docs/src/pages/configurations/custom-babel-config/index.md b/docs/src/pages/configurations/custom-babel-config/index.md index 0a5d32198dc..281fad52183 100644 --- a/docs/src/pages/configurations/custom-babel-config/index.md +++ b/docs/src/pages/configurations/custom-babel-config/index.md @@ -7,7 +7,7 @@ By default, Storybook loads your root `.babelrc` file and load those configurati But sometimes some of those options may cause Storybook to throw errors. In that case, you can provide a custom `.babelrc` just for Storybook. -For that, simply create a file called `.babelrc` file inside the Storybook config directory (by default, it's `.storybook`). +For that, create a file called `.babelrc` file inside the Storybook config directory (by default, it's `.storybook`). Then Storybook will load the Babel configuration only from that file. diff --git a/docs/src/pages/configurations/default-config/index.md b/docs/src/pages/configurations/default-config/index.md index 475da695fbb..27cb53439df 100644 --- a/docs/src/pages/configurations/default-config/index.md +++ b/docs/src/pages/configurations/default-config/index.md @@ -167,7 +167,7 @@ The webpack config [is configurable](/configurations/custom-webpack-config/), an ### CSS Support -You can simply import CSS files wherever you want, whether it's in the storybook config file, a UI component, or inside a story definition file. +You can import CSS files wherever you want, whether it's in the storybook config file, a UI component, or inside a story definition file. Basically, you can import CSS like this: @@ -228,4 +228,4 @@ storiesOf('Component', module) ## NPM Modules You can use any of the NPM modules installed on your project. -You can simply import and use them. +You can import and use them. diff --git a/docs/src/pages/configurations/serving-static-files/index.md b/docs/src/pages/configurations/serving-static-files/index.md index 9034d4d6c17..7c3d47cdb17 100644 --- a/docs/src/pages/configurations/serving-static-files/index.md +++ b/docs/src/pages/configurations/serving-static-files/index.md @@ -9,7 +9,7 @@ Storybook provides two ways to do that. ## 1. Via Imports -You can import any media assets by simply importing (or requiring) them as shown below. +You can import any media assets by importing (or requiring) them as shown below. ```js import React from 'react'; diff --git a/docs/src/pages/guides/guide-ember/index.md b/docs/src/pages/guides/guide-ember/index.md index 8d46462f270..30beda3c26f 100644 --- a/docs/src/pages/guides/guide-ember/index.md +++ b/docs/src/pages/guides/guide-ember/index.md @@ -23,7 +23,7 @@ In this guide, we will set up Storybook for your Ember project. ## Add @storybook/ember -First of all, you need to add `@storybook/ember` to your project. To do that, simply run: +First of all, you need to add `@storybook/ember` to your project. To do that, run: ```sh ember install @storybook/ember-cli-storybook @@ -57,9 +57,9 @@ Your environment will be preconfigured using `ember-cli-storybook`. This will ad Storybook can be configured in several different ways. That’s why we need a config directory. We've added a `-c` option to the above NPM script mentioning `.storybook` as the config directory. -For the basic Storybook configuration file, you don't need to do much, but simply tell Storybook where to find stories. +For the basic Storybook configuration file, you don't need to do much, but tell Storybook where to find stories. -To do that, simply create a file at `.storybook/config.js` with the following content: +To do that, create a file at `.storybook/config.js` with the following content: ```js import { configure } from '@storybook/ember'; @@ -146,7 +146,7 @@ A story is either: ## Run your Storybook -Now everything is ready. Simply run your storybook with: +Now everything is ready. Run your storybook with: ```sh npm run storybook diff --git a/docs/src/pages/guides/guide-react-native/index.md b/docs/src/pages/guides/guide-react-native/index.md index 7149883d82e..128504c84b5 100644 --- a/docs/src/pages/guides/guide-react-native/index.md +++ b/docs/src/pages/guides/guide-react-native/index.md @@ -18,7 +18,7 @@ npx -p @storybook/cli sb init --type react_native **1. Add `@storybook/react-native` to your project.** -To use React Native Storybook you need to have it as a dependency in your project. To do that, simply run: +To use React Native Storybook you need to have it as a dependency in your project. To do that, run: ```sh npm i --save-dev @storybook/react-native @@ -78,7 +78,7 @@ The easiest solution is to replace your app entry with: export default from './storybook'; ``` -If you cannot replace your entry point just make sure that the component exported from `./storybook` is displayed somewhere in your app. `StorybookUI` is simply a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen. +If you cannot replace your entry point just make sure that the component exported from `./storybook` is displayed somewhere in your app. `StorybookUI` is a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen. --- @@ -171,7 +171,7 @@ Because on device addons are inside the app, they are also rerendered on every c Storybook RN server, `@storybook/react-native-server` is a separate package that provides a standalone server that the Storybook ondevice client can connect to. -Running storybook server gives a few advantages over simply running on-device: +Running storybook server gives a few advantages over running on-device: **Websockets connection.** By using websockets connection you can create your own tools that integrate with your storybook app and control it from outside of your app. diff --git a/docs/src/pages/guides/guide-svelte/index.md b/docs/src/pages/guides/guide-svelte/index.md index c208554dd00..0082133d9f6 100644 --- a/docs/src/pages/guides/guide-svelte/index.md +++ b/docs/src/pages/guides/guide-svelte/index.md @@ -87,7 +87,7 @@ export const withEmoji = () => ({ ``` Svelte storybooks don't support using templates in a story yet. -Instead, you can create a `.svelte` file to compose components together, or simply to access all normal Svelte functionality, like slots. +Instead, you can create a `.svelte` file to compose components together, or to access all normal Svelte functionality, like slots. So you can create a story "view" file, essentially just a .svelte file to load your components into to test. @@ -98,7 +98,7 @@ So you can create a story "view" file, essentially just a .svelte file to load y ``` -In this example, the `on:click` that is heard on the `MyButton` component is simply passed up to the containing component `MyButtonView` using the svelte shorthand. +In this example, the `on:click` that is heard on the `MyButton` component is passed up to the containing component `MyButtonView` using the svelte shorthand. It's the equivalent to `on:click="fire('click', event)"`, but it's worth knowing about especially in this "component wrapper" scenario. > If your component doesn't use slots, you don't need to do this, but if it does or some other svelte functionality that requires the component to exist in a svelte view, then this is how to do that. diff --git a/docs/src/pages/presets/introduction/index.md b/docs/src/pages/presets/introduction/index.md index 18b6dec334a..d7494be1ffe 100644 --- a/docs/src/pages/presets/introduction/index.md +++ b/docs/src/pages/presets/introduction/index.md @@ -5,11 +5,11 @@ title: 'Intro to Presets' Storybook **presets** are grouped collections of `babel`, `webpack`, and `addons` configurations that support specific use cases. -For example, to write your stories in Typescript, rather than [manually configuring Storybook for typescript](../../configurations/typescript-config/) with individual [babel](../../configurations/custom-babel-config/) and [webpack](../../configurations/custom-webpack-config/) configs, you can simply use the `@storybook/preset-typescript` package, which does the heavy lifting for you. +For example, to write your stories in Typescript, rather than [manually configuring Storybook for typescript](../../configurations/typescript-config/) with individual [babel](../../configurations/custom-babel-config/) and [webpack](../../configurations/custom-webpack-config/) configs, you can use the `@storybook/preset-typescript` package, which does the heavy lifting for you. ## Basic usage -Each preset has its own installation instructions, but the idea of presets is to simply install the preset and then load it. +Each preset has its own installation instructions, but the idea of presets is to install the preset and then load it. For example, to get typescript support, first install the preset: diff --git a/docs/src/pages/presets/writing-presets/index.md b/docs/src/pages/presets/writing-presets/index.md index 142eb975c05..a5491ce9a42 100644 --- a/docs/src/pages/presets/writing-presets/index.md +++ b/docs/src/pages/presets/writing-presets/index.md @@ -81,7 +81,7 @@ export function webpackFinal(config, { configDir }) { ### Addons -The addon config `addons` allows you to add addons to Storybook from within a preset. For addons that require custom webpack/babel configuration, it is easier to simply install the preset, and it will take care of everything. +The addon config `addons` allows you to add addons to Storybook from within a preset. For addons that require custom webpack/babel configuration, it is easier to install the preset, and it will take care of everything. For example, the Storysource preset contains the following code: diff --git a/docs/src/pages/testing/automated-visual-testing/index.md b/docs/src/pages/testing/automated-visual-testing/index.md index 3ebd7d42b3e..92a4e2ca4e0 100644 --- a/docs/src/pages/testing/automated-visual-testing/index.md +++ b/docs/src/pages/testing/automated-visual-testing/index.md @@ -3,7 +3,7 @@ id: 'automated-visual-testing' title: 'Automated Visual Testing' --- -Automated Visual Testing is a quality assurance process meant to automatically verify that a UI visually appears as intended. There are many alternative names for this process, such as Visual Regression Testing, Visual Validation Testing, Visual UI Testing, or just simply Visual Testing, but in all cases we're talking about confirming the thing your users will see—the actual pixels—without caring about how it's generated. +Automated Visual Testing is a quality assurance process meant to automatically verify that a UI visually appears as intended. There are many alternative names for this process, such as Visual Regression Testing, Visual Validation Testing, Visual UI Testing, or Visual Testing, but in all cases we're talking about confirming the thing your users will see—the actual pixels—without caring about how it's generated. ## Benefits diff --git a/docs/src/pages/testing/react-ui-testing/index.md b/docs/src/pages/testing/react-ui-testing/index.md index 554bf036910..6b65d4f21b3 100644 --- a/docs/src/pages/testing/react-ui-testing/index.md +++ b/docs/src/pages/testing/react-ui-testing/index.md @@ -71,7 +71,7 @@ But since we are building UI for humans, we must also manually test them to s Another reason for manual testing is for the better user experience. We should always try to test our UI with the naked eye. -For this, we can simply use our existing Storybook. +For this, we can use our existing Storybook. This is something that we can't automate(yet) and takes time. But it would be great if we could do this once in a while (especially with a major code changes). diff --git a/docs/src/pages/testing/structural-testing/index.md b/docs/src/pages/testing/structural-testing/index.md index 139d55d7e51..1f875ef4ca2 100644 --- a/docs/src/pages/testing/structural-testing/index.md +++ b/docs/src/pages/testing/structural-testing/index.md @@ -6,7 +6,7 @@ title: 'Structural Testing' For React, [Jest's snapshot testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) is the best way to do Structural Testing. It's painless to use and maintain. We've integrated Jest's snapshot testing directly into Storybook using an addon called [StoryShots](https://github.com/storybookjs/storybook/tree/master/addons/storyshots). -Now we can simply use existing stories as the input for snapshot testing. +Now we can use existing stories as the input for snapshot testing. ## What's Snapshot Testing? diff --git a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js b/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js index 65544248511..c699766b551 100644 --- a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js +++ b/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js @@ -4,7 +4,7 @@ import { Button } from '@storybook/react/demo'; export default { title: 'Addons|Docs/csf-with-mdx-docs', component: Button, - includeStories: [], // or simply don't load this file at all + includeStories: [], // or don't load this file at all }; // eslint-disable-next-line react/prop-types diff --git a/lib/client-api/src/client_api.ts b/lib/client-api/src/client_api.ts index 4e02fb8c99c..87c230291bb 100644 --- a/lib/client-api/src/client_api.ts +++ b/lib/client-api/src/client_api.ts @@ -141,7 +141,7 @@ export default class ClientApi { this._globalDecorators = []; }; - // what are the occasions that "m" is simply a boolean, vs an obj + // what are the occasions that "m" is a boolean vs an obj storiesOf = ( kind: string, m: NodeModule diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js index 8099ea3eb22..19a6421fe76 100644 --- a/lib/core/src/client/preview/start.js +++ b/lib/core/src/client/preview/start.js @@ -433,7 +433,7 @@ export default function start(render, { decorateStory } = {}) { /** * Load a collection of stories. If it has a default export, assume that it is a module-style * file and process its named exports as stories. If not, assume it's an old-style - * storiesof file and simply require it. + * storiesof file and require it. * * @param {*} loadable a require.context `req`, an array of `req`s, or a loader function that returns void or an array of exports * @param {*} m - ES module object for hot-module-reloading (HMR) diff --git a/lib/ui/README.md b/lib/ui/README.md index 57178dd4bc2..c10faee39db 100644 --- a/lib/ui/README.md +++ b/lib/ui/README.md @@ -135,7 +135,7 @@ It's a set of modules. You can see those modules at `src/modules` directory. ### Changing UI -If you like to change the appearance of the UI, you need to look at the `ui` module. Simply change components at the `components` directory for simple UI tweaks. +If you like to change the appearance of the UI, you need to look at the `ui` module. Change components at the `components` directory for simple UI tweaks. You can also change containers(which are written with [react-komposer](https://github.com/kadirahq/react-komposer/)) to add more data from the redux state. From 7e37a123a32ccaa2c1cba4669280f17339f3398f Mon Sep 17 00:00:00 2001 From: Carolyn Stransky Date: Sat, 12 Oct 2019 17:32:44 +0200 Subject: [PATCH 44/90] Removed instances of just, easily --- CONTRIBUTING.md | 4 ++-- MIGRATION.md | 6 +++--- ROADMAP.md | 2 +- addons/contexts/README.md | 6 +++--- addons/docs/docs/docspage.md | 2 +- addons/docs/docs/faq.md | 2 +- addons/docs/docs/mdx.md | 2 +- addons/docs/docs/recipes.md | 4 ++-- addons/jest/README.md | 2 +- addons/storyshots/storyshots-core/README.md | 4 ++-- .../storyshots-core/stories/storyshot.async.test.js | 2 +- app/react-native/docs/manual-setup.md | 2 +- .../new-components/basics/tooltip/Tooltip.stories.js | 2 +- docs/src/pages/addons/addon-gallery/index.md | 2 +- docs/src/pages/addons/api/index.md | 4 ++-- docs/src/pages/addons/writing-addons/index.md | 8 ++++---- docs/src/pages/basics/faq/index.md | 2 +- docs/src/pages/basics/writing-stories/index.md | 4 ++-- .../src/pages/configurations/default-config/index.md | 2 +- .../configurations/serving-static-files/index.md | 2 +- docs/src/pages/configurations/theming/index.md | 2 +- .../pages/configurations/typescript-config/index.md | 4 ++-- .../pages/formats/component-story-format/index.md | 2 +- docs/src/pages/guides/guide-react-native/index.md | 2 +- docs/src/pages/guides/guide-riot/index.md | 2 +- docs/src/pages/guides/guide-svelte/index.md | 2 +- .../pages/testing/automated-visual-testing/index.md | 2 +- examples-native/crna-kitchen-sink/App.js | 2 +- examples/dev-kits/config.js | 2 +- lib/api/src/store.ts | 2 +- lib/cli/README.md | 2 +- lib/cli/test/fixtures/ember-cli/README.md | 2 +- lib/cli/test/fixtures/react_scripts/README.md | 12 ++++++------ .../fixtures/update_package_organisations/README.md | 10 +++++----- lib/client-api/src/story_store.ts | 2 +- lib/codemod/src/transforms/update-addon-info.js | 2 +- 36 files changed, 58 insertions(+), 58 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 960213c3707..638e1aade6f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -175,7 +175,7 @@ So the way our script works is that it: Our script leaves the local registry running, for **as long as you keep it running** you can install storybook packages from this local registry. - Navigate to your own project and then change `package.json` so the storybook packages match the version of the one you just published. -- Then just do the normal install procedure using `yarn` or `npm` +- Then you can install using `yarn` or `npm` - Start using your storybook as normally. If you've made a change to storybook's codebase and would want this change to be reflected in your app: @@ -229,7 +229,7 @@ We use the following label scheme to categorize issues: All issues should have a `type` label. `bug`/`feature`/`question`/`discussion` are self-explanatory. `dependencies` is for keeping package dependencies up to date. `maintenance` is a catch-all for any kind of cleanup or refactoring. -They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can easily see all of the issues for a particular area, and keep the total number of open issues under control. +They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can see all of the issues for a particular area, and keep the total number of open issues under control. For example, here is the list of [open, untyped issues](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20-label%3A%22bug%22%20-label%3A%22discussion%22%20-label%3A%22feature%22%20-label%3A%22maintenance%22%20-label%3A%22question%20%2F%20support%22%20-label%3A%22documentation%22%20-label%3A%22greenkeeper%22), or here is a list of [bugs that have not been modified since 2017-04-01](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3A%22bug%22%20updated%3A%3C%3D2017-04-01%20). For more info see [searching issues](https://help.github.com/articles/searching-issues/) in the Github docs. diff --git a/MIGRATION.md b/MIGRATION.md index cdfdb289a85..ada5ec601e2 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -655,7 +655,7 @@ Storybook now uses Babel 7. There's a couple of cases when it can break with you If you are using `create-react-app` (aka CRA), you may need to do some manual steps to upgrade, depending on the setup. - `create-react-app@1` may require manual migrations. - - If you're adding storybook for the first time, it should just work: `sb init` should add the correct dependencies. + - If you're adding storybook for the first time: `sb init` should add the correct dependencies. - If you're upgrading an existing project, your `package.json` probably already uses Babel 6, making it incompatible with `@storybook/react@4` which uses Babel 7. There are two ways to make it compatible, each of which is spelled out in detail in the next section: - Upgrade to Babel 7 if you are not dependent on Babel 6-specific features. - Migrate Babel 6 if you're heavily dependent on some Babel 6-specific features). @@ -748,7 +748,7 @@ This was done to support different major versions of babel. ### Base webpack config now contains vital plugins ([#1775](https://github.com/storybookjs/storybook/pull/1775)) -This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was just a recommendation, but now it [became](https://github.com/storybookjs/storybook/pull/2578) a requirement. +This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was a recommendation, but now it [became](https://github.com/storybookjs/storybook/pull/2578) a requirement. ### Refactored Knobs @@ -879,7 +879,7 @@ The new package names are: | `@kadira/storybook-addon-graphql` | `@storybook/addon-graphql` | | `@kadira/react-storybook-decorator-centered` | `@storybook/addon-centered` | -If your codebase is small, it's probably doable to just replace them by hand. (in your codebase and in `package.json`). +If your codebase is small, it's probably doable to replace them by hand (in your codebase and in `package.json`). But if you have a lot of occurrences in your codebase, you can use a [codemod we created](./lib/codemod) for you. diff --git a/ROADMAP.md b/ROADMAP.md index f9868717854..82f11931ff2 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -24,7 +24,7 @@ Doing these will be backwards compatible. ### Responsive + multi-device viewports preview. -If you're smart about it you can already view the preview on multiple devices and windows. It's just an iframe after-all. +If you're smart about it you can already view the preview on multiple devices and windows. It's an iframe after-all. But story selection and addon-settings are not synced. We want to make this much much simpler and a core feature of storybook. diff --git a/addons/contexts/README.md b/addons/contexts/README.md index 3362dfa6fdf..c781dacbe0e 100644 --- a/addons/contexts/README.md +++ b/addons/contexts/README.md @@ -25,7 +25,7 @@ once then apply it everywhere**. 1. Define a single global file for managing contextual environments (a.k.a. containers) for all of your stories declaratively. No more repetitive setups or noisy wrapping, making your stories more focused and readable. -2. Support dynamic contextual props switching from Storybook toolbar at runtime. You can easily slice into +2. Support dynamic contextual props switching from Storybook toolbar at runtime. You can slice into different environments (e.g. languages or themes ) to understand how your component is going to respond. 3. Library agnostic: no presumption on what kind of components you want to wrap around your stories. You can even use it to bridge with your favorite routing, state-management solutions, or even your own @@ -65,7 +65,7 @@ import { contexts } from './configs/contexts'; // we will define the contextual addDecorator(withContexts(contexts)); ``` -Alternatively, just like other addons, you can use this addon only for a given set of stories: +Alternatively, like other addons, you can use this addon only for a given set of stories: ```js import { storiesOf } from '@storybook/[framework]'; @@ -220,7 +220,7 @@ be shown at first in the toolbar menu in your Storybook. ## 📔 Notes -1. You can use this addon to inject any valid components, that is why `icon` and `params` can be just optional. +1. You can use this addon to inject any valid components, that is why `icon` and `params` can be optional. 2. As mentioned, extra contextual environment setups can be added at the story level. Please make sure they are passed via the second argument as `{ contexts: [{ /* extra contexts */ }}`. 3. Additional `params` can be "appended" into an existing setup at the story level too (make sure it goes with the diff --git a/addons/docs/docs/docspage.md b/addons/docs/docs/docspage.md index 900f6d6c48f..4b5bf43f908 100644 --- a/addons/docs/docs/docspage.md +++ b/addons/docs/docs/docspage.md @@ -241,7 +241,7 @@ The docs preset assumes this naming convention for its `source-loader` setup. If Due to the complex nature of writing a cross-framework utility like Storybook, the story blocks for most frameworks exist within an `