diff --git a/app/react/src/server/framework-preset-react-docgen.test.ts b/app/react/src/server/framework-preset-react-docgen.test.ts index 33bde8f2862e..0a1ea3f32af1 100644 --- a/app/react/src/server/framework-preset-react-docgen.test.ts +++ b/app/react/src/server/framework-preset-react-docgen.test.ts @@ -1,9 +1,10 @@ +import ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin'; import * as preset from './framework-preset-react-docgen'; describe('framework-preset-react-docgen', () => { const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen'); - it('should return the config with the extra plugin', () => { + it('should return the babel config with the extra plugin', () => { const babelConfig = { babelrc: false, presets: ['env', 'foo-preset'], @@ -33,4 +34,46 @@ describe('framework-preset-react-docgen', () => { ], }); }); + + it('should return the webpack config with the extra plugin', () => { + const webpackConfig = { + plugins: [], + }; + + const config = preset.webpackFinal(webpackConfig, { + typescriptOptions: { check: false, reactDocgen: 'react-docgen-typescript' }, + }); + + expect(config).toEqual({ + plugins: [expect.any(ReactDocgenTypescriptPlugin)], + }); + }); + + it('should not add any extra plugins', () => { + const babelConfig = { + babelrc: false, + presets: ['env', 'foo-preset'], + plugins: ['foo-plugin'], + }; + + const webpackConfig = { + plugins: [], + }; + + const outputBabelconfig = preset.babel(babelConfig, { + typescriptOptions: { check: false, reactDocgen: false }, + }); + const outputWebpackconfig = preset.webpackFinal(webpackConfig, { + typescriptOptions: { check: false, reactDocgen: false }, + }); + + expect(outputBabelconfig).toEqual({ + babelrc: false, + presets: ['env', 'foo-preset'], + plugins: ['foo-plugin'], + }); + expect(outputWebpackconfig).toEqual({ + plugins: [], + }); + }); }); diff --git a/app/react/src/server/framework-preset-react-docgen.ts b/app/react/src/server/framework-preset-react-docgen.ts index 406c7853659d..cb81309a0063 100644 --- a/app/react/src/server/framework-preset-react-docgen.ts +++ b/app/react/src/server/framework-preset-react-docgen.ts @@ -6,6 +6,10 @@ import ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin'; export function babel(config: TransformOptions, { typescriptOptions }: StorybookOptions) { const { reactDocgen } = typescriptOptions; + if (reactDocgen === false) { + return config; + } + return { ...config, overrides: [ diff --git a/docs/configure/typescript.md b/docs/configure/typescript.md index 27a6854fefed..210ce20f51de 100644 --- a/docs/configure/typescript.md +++ b/docs/configure/typescript.md @@ -30,9 +30,9 @@ The following code snippets shows the fields for you to use with TypeScript: -| Field | Framework | Description | Type | -| :------------------------------- | :-------- | :--------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------- | -| **check** | All | Optionally run fork-ts-checker-webpack-plugin | boolean | -| **checkOptions** | All | Options to pass to fork-ts-checker-webpack-plugin if it's enabled | [See docs](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) | -| **reactDocgen** | React | Which react docgen processor to run: `react-docgen-typescript`, `react-docgen`, `none` | string | -| **reactDocgenTypescriptOptions** | React | Options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled. | [See docs](https://github.com/hipstersmoothie/react-docgen-typescript-plugin) | +| Field | Framework | Description | Type | +| :------------------------------- | :-------- | :-------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------- | +| **check** | All | Optionally run fork-ts-checker-webpack-plugin | boolean | +| **checkOptions** | All | Options to pass to fork-ts-checker-webpack-plugin if it's enabled | [See docs](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) | +| **reactDocgen** | React | Which react docgen processor to run: `"react-docgen-typescript"`, `"react-docgen"`, `false` | string or false | +| **reactDocgenTypescriptOptions** | React | Options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled. | [See docs](https://github.com/hipstersmoothie/react-docgen-typescript-plugin) |