diff --git a/.babelrc.js b/.babelrc.js index e2ad875ee3b6..9728d7cbea9b 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -62,7 +62,6 @@ module.exports = { 'babel-plugin-macros', ['emotion', { sourceMap: true, autoLabel: true }], '@babel/plugin-transform-react-constant-elements', - 'babel-plugin-add-react-displayname', ], env: { test: withTests, diff --git a/addons/a11y/src/components/Report/HighlightToggle.tsx b/addons/a11y/src/components/Report/HighlightToggle.tsx index 80ad7ed4654a..64c4d0cb7123 100644 --- a/addons/a11y/src/components/Report/HighlightToggle.tsx +++ b/addons/a11y/src/components/Report/HighlightToggle.tsx @@ -184,7 +184,4 @@ class HighlightToggle extends Component { } } -export default connect( - mapStateToProps, - mapDispatchToProps -)(HighlightToggle); +export default connect(mapStateToProps, mapDispatchToProps)(HighlightToggle); diff --git a/addons/contexts/src/manager/components/ToolBar.test.tsx b/addons/contexts/src/manager/components/ToolBar.test.tsx index b5a09c187e19..35caba83f2c6 100644 --- a/addons/contexts/src/manager/components/ToolBar.test.tsx +++ b/addons/contexts/src/manager/components/ToolBar.test.tsx @@ -27,7 +27,10 @@ describe('Tests on addon-contexts component: ToolBar', () => { icon: 'box' as const, nodeId: 'Some Context B', options: { cancelable: true, deep: false, disable: false }, - params: [{ name: 'Some Param X', props: {} }, { name: 'Some Param Y', props: {} }], + params: [ + { name: 'Some Param X', props: {} }, + { name: 'Some Param Y', props: {} }, + ], title: 'Some Context B', }, ]; diff --git a/addons/contexts/src/manager/components/ToolBarControl.test.tsx b/addons/contexts/src/manager/components/ToolBarControl.test.tsx index c0131fd4a47f..975f420dc27f 100644 --- a/addons/contexts/src/manager/components/ToolBarControl.test.tsx +++ b/addons/contexts/src/manager/components/ToolBarControl.test.tsx @@ -9,7 +9,10 @@ describe('Tests on addon-contexts component: ToolBarControl', () => { icon: 'box' as const, nodeId: 'Some Context', options: { cancelable: true, deep: false, disable: false }, - params: [{ name: 'A', props: {} }, { name: 'B', props: {} }], + params: [ + { name: 'A', props: {} }, + { name: 'B', props: {} }, + ], title: 'Some Context', selected: '', setSelected: jest.fn, diff --git a/addons/docs/package.json b/addons/docs/package.json index aba72ae149c6..f30975ad26da 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -57,6 +57,8 @@ "acorn": "^7.1.0", "acorn-jsx": "^5.1.0", "acorn-walk": "^7.0.0", + "babel-plugin-add-react-displayname": "^0.0.5", + "babel-plugin-react-docgen": "^4.1.0", "core-js": "^3.0.1", "doctrine": "^3.0.0", "escodegen": "^1.12.0", diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/frameworks/common/preset.ts index f1c5764d6508..c1dbca067ea8 100644 --- a/addons/docs/src/frameworks/common/preset.ts +++ b/addons/docs/src/frameworks/common/preset.ts @@ -2,6 +2,7 @@ import createCompiler from '@storybook/addon-docs/mdx-compiler-plugin'; import remarkSlug from 'remark-slug'; import remarkExternalLinks from 'remark-external-links'; +import { TransformOptions } from '@babel/core'; function createBabelOptions(babelOptions?: any, configureJSX?: boolean) { if (!configureJSX) { @@ -9,6 +10,7 @@ function createBabelOptions(babelOptions?: any, configureJSX?: boolean) { } const babelPlugins = (babelOptions && babelOptions.plugins) || []; + return { ...babelOptions, // for frameworks that are not working with react, we need to configure @@ -18,6 +20,29 @@ function createBabelOptions(babelOptions?: any, configureJSX?: boolean) { }; } +// eslint-disable-next-line no-shadow +export function babel(config: TransformOptions) { + // Ensure plugins are defined or fallback to an array to avoid empty values. + const babelConfigPlugins = config.plugins || []; + + const extraPlugins = [ + [ + 'babel-plugin-react-docgen', + { + DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', + }, + 'babel-plugin-add-react-displayname', + ], + ]; + + // If `babelConfigPlugins` is not an `Array`, calling `concat` will inject it + // as a single value, if it is an `Array` it will spread. + return { + ...config, + plugins: [].concat(babelConfigPlugins, extraPlugins), + }; +} + export function webpack(webpackConfig: any = {}, options: any = {}) { const { module = {} } = webpackConfig; // it will reuse babel options that are already in use in storybook diff --git a/app/react/package.json b/app/react/package.json index 6f981dd1ac70..fc781abb1eb4 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -41,9 +41,7 @@ "@storybook/node-logger": "5.3.7", "@svgr/webpack": "^4.0.3", "@types/webpack-env": "^1.15.0", - "babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-named-asset-import": "^0.3.1", - "babel-plugin-react-docgen": "^4.0.0", "core-js": "^3.0.1", "global": "^4.3.2", "lodash": "^4.17.15", diff --git a/app/react/src/server/framework-preset-react-docgen.test.ts b/app/react/src/server/framework-preset-react-docgen.test.ts deleted file mode 100644 index 1b1f0e27ca87..000000000000 --- a/app/react/src/server/framework-preset-react-docgen.test.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { TransformOptions } from '@babel/core'; -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 plugins when `plugins` is an array.', () => { - const babelConfig = { - babelrc: false, - presets: ['env', 'foo-preset'], - plugins: ['foo-plugin'], - }; - - const config = preset.babel(babelConfig); - - expect(config).toEqual({ - babelrc: false, - plugins: [ - 'foo-plugin', - [ - babelPluginReactDocgenPath, - { - DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', - }, - ], - ], - presets: ['env', 'foo-preset'], - }); - }); - - it('should return the config with the extra plugins when `plugins` is not an array.', () => { - const babelConfig: TransformOptions = { - babelrc: false, - presets: ['env', 'foo-preset'], - plugins: ['bar-plugin'], - }; - - const config = preset.babel(babelConfig); - - expect(config).toEqual({ - babelrc: false, - plugins: [ - 'bar-plugin', - [ - babelPluginReactDocgenPath, - { - DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', - }, - ], - ], - presets: ['env', 'foo-preset'], - }); - }); - - it('should return the config only with the extra plugins when `plugins` is not present.', () => { - const babelConfig = { - babelrc: false, - presets: ['env', 'foo-preset'], - }; - - const config = preset.babel(babelConfig); - - expect(config).toEqual({ - babelrc: false, - plugins: [ - [ - babelPluginReactDocgenPath, - { - DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', - }, - ], - ], - presets: ['env', 'foo-preset'], - }); - }); -}); diff --git a/app/react/src/server/framework-preset-react-docgen.ts b/app/react/src/server/framework-preset-react-docgen.ts deleted file mode 100644 index fae63672c360..000000000000 --- a/app/react/src/server/framework-preset-react-docgen.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { TransformOptions } from '@babel/core'; - -export function babel(config: TransformOptions) { - // Ensure plugins are defined or fallback to an array to avoid empty values. - const babelConfigPlugins = config.plugins || []; - - const extraPlugins = [ - [ - require.resolve('babel-plugin-react-docgen'), - { - DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', - }, - ], - ]; - - // If `babelConfigPlugins` is not an `Array`, calling `concat` will inject it - // as a single value, if it is an `Array` it will spread. - return { - ...config, - plugins: [].concat(babelConfigPlugins, extraPlugins), - }; -} diff --git a/app/react/src/server/framework-preset-react.ts b/app/react/src/server/framework-preset-react.ts index 23d9151b636b..ab302f7122ce 100644 --- a/app/react/src/server/framework-preset-react.ts +++ b/app/react/src/server/framework-preset-react.ts @@ -11,7 +11,6 @@ export function babelDefault(config: TransformOptions) { plugins: [ ...(config.plugins || []), require.resolve('@babel/plugin-transform-react-constant-elements'), - require.resolve('babel-plugin-add-react-displayname'), ], }; } diff --git a/app/react/src/server/options.ts b/app/react/src/server/options.ts index 5e16a0eaee5b..3db6e58d6b12 100644 --- a/app/react/src/server/options.ts +++ b/app/react/src/server/options.ts @@ -6,6 +6,5 @@ export default { frameworkPresets: [ require.resolve('./framework-preset-react.js'), require.resolve('./framework-preset-cra.js'), - require.resolve('./framework-preset-react-docgen.js'), ], }; diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.js b/examples/cra-ts-kitchen-sink/.storybook/main.js index 04b6bba21210..78b840d8d818 100644 --- a/examples/cra-ts-kitchen-sink/.storybook/main.js +++ b/examples/cra-ts-kitchen-sink/.storybook/main.js @@ -3,23 +3,7 @@ const path = require('path'); module.exports = { stories: ['../src/**/*.stories.(mdx|[tj]sx?)'], addons: [ - { - name: '@storybook/preset-create-react-app', - options: { - tsDocgenLoaderOptions: { - tsconfigPath: path.resolve(__dirname, '../tsconfig.json'), - shouldExtractLiteralValuesFromEnum: true, - propFilter: prop => { - // Currently not working, prop.parent is always null. - if (prop.parent) { - return !prop.parent.fileName.includes('node_modules/@types/react/'); - } - - return true; - }, - }, - }, - }, + '@storybook/preset-create-react-app', '@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links', diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json index 3112b8a25b4f..f87334002c4a 100644 --- a/examples/cra-ts-kitchen-sink/package.json +++ b/examples/cra-ts-kitchen-sink/package.json @@ -36,6 +36,7 @@ "devDependencies": { "@storybook/addon-a11y": "5.3.7", "@storybook/addon-actions": "5.3.7", + "@storybook/addon-docs": "5.3.7", "@storybook/addon-info": "5.3.7", "@storybook/addon-knobs": "5.3.7", "@storybook/addon-links": "5.3.7", @@ -50,7 +51,6 @@ "enzyme-adapter-react-16": "^1.9.1", "enzyme-to-json": "^3.4.1", "fork-ts-checker-webpack-plugin": "^3.0.1", - "react-docgen-typescript-loader": "^3.3.0", "react-moment-proptypes": "^1.7.0", "react-scripts": "^3.0.1", "tslint": "^5.14.0", diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx index c1d1467a9a91..ca1193f17044 100644 --- a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx +++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx @@ -128,6 +128,5 @@ interface TypeScriptHtmlComponentProps { text: string; } -export const TypeScriptHtmlComponent: FC< - React.HTMLAttributes & TypeScriptHtmlComponentProps -> = () =>
My HTML component
; +export const TypeScriptHtmlComponent: FC & + TypeScriptHtmlComponentProps> = () =>
My HTML component
; diff --git a/lib/components/src/tooltip/TooltipMessage.stories.tsx b/lib/components/src/tooltip/TooltipMessage.stories.tsx index 747b4790d055..79e4589cab3e 100644 --- a/lib/components/src/tooltip/TooltipMessage.stories.tsx +++ b/lib/components/src/tooltip/TooltipMessage.stories.tsx @@ -29,7 +29,10 @@ storiesOf('basics/Tooltip/TooltipMessage', module) )) .add('minimal message', () => ( diff --git a/lib/components/src/tooltip/WithTooltip.tsx b/lib/components/src/tooltip/WithTooltip.tsx index c9e21ebf04a4..950544c0b3d0 100644 --- a/lib/components/src/tooltip/WithTooltip.tsx +++ b/lib/components/src/tooltip/WithTooltip.tsx @@ -100,11 +100,9 @@ WithTooltipPure.defaultProps = { tooltipShown: false, }; -const WithToolTipState: FunctionComponent< - WithTooltipPureProps & { - startOpen?: boolean; - } -> = ({ startOpen, ...rest }) => { +const WithToolTipState: FunctionComponent = ({ startOpen, ...rest }) => { const [tooltipShown, onVisibilityChange] = useState(startOpen || false); useEffect(() => { diff --git a/lib/core/package.json b/lib/core/package.json index e29d4960b9b1..20f739cbcd34 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -45,7 +45,6 @@ "airbnb-js-shims": "^2.2.1", "ansi-to-html": "^0.6.11", "autoprefixer": "^9.7.2", - "babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-emotion": "^10.0.20", "babel-plugin-macros": "^2.7.0", "babel-preset-minify": "^0.5.0 || 0.6.0-alpha.5", diff --git a/package.json b/package.json index dae554476c8d..19e89ec85bb3 100644 --- a/package.json +++ b/package.json @@ -154,7 +154,6 @@ "babel-eslint": "^10.0.1", "babel-jest": "^24.7.1", "babel-loader": "^8.0.5", - "babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-dynamic-import-node": "^2.2.0", "babel-plugin-emotion": "^10.0.20", "babel-plugin-macros": "^2.7.0", diff --git a/yarn.lock b/yarn.lock index 7ac800448e17..f618af2e4240 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6793,10 +6793,10 @@ babel-plugin-named-asset-import@^0.3.1, babel-plugin-named-asset-import@^0.3.2, resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz#4a8fc30e9a3e2b1f5ed36883386ab2d84e1089bd" integrity sha512-S6d+tEzc5Af1tKIMbsf2QirCcPdQ+mKUCY2H1nJj1DyA1ShwpsoxEOAwbWsG5gcXNV/olpvQd9vrUWRx4bnhpw== -babel-plugin-react-docgen@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.0.0.tgz#1be997bc135b2a0eec54364202d01ed0f15f0098" - integrity sha512-6vdky/CRaq0zE64ZRR1fOjUfFS3kX7USMuC6mAH/ASYt/EGY9Ms1F5uLwHhmBhaOGKiJJHvhKz16wX9IBWBLKg== +babel-plugin-react-docgen@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.1.0.tgz#1dfa447dac9ca32d625a123df5733a9e47287c26" + integrity sha512-vzpnBlfGv8XOhJM2zbPyyqw2OLEbelgZZsaaRRTpVwNKuYuc+pUg4+dy7i9gCRms0uOQn4osX571HRcCJMJCmA== dependencies: lodash "^4.17.15" react-docgen "^5.0.0" @@ -26300,7 +26300,7 @@ react-devtools-core@^3.4.2, react-devtools-core@^3.6.0: shell-quote "^1.6.1" ws "^3.3.1" -react-docgen-typescript-loader@^3.3.0, react-docgen-typescript-loader@^3.6.0: +react-docgen-typescript-loader@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/react-docgen-typescript-loader/-/react-docgen-typescript-loader-3.6.0.tgz#5515f03f869e66d49e287c5f1e7ec10f2084f7bb" integrity sha512-+uEsM3VYCdlcBGxF3tBqI5XWL1phvrh8dkiIfdpciKlM1BDHW+d82kKJI9hX6zk9H8TL+3Th/j/JAEaKb5FFNw==