From bb84352e2806a624819db6f0044ad36951885ad0 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 18 May 2020 10:19:44 +0800 Subject: [PATCH 1/7] Fix docgen preset --- app/react/src/server/framework-preset-react-docgen.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/react/src/server/framework-preset-react-docgen.ts b/app/react/src/server/framework-preset-react-docgen.ts index 2e9f24f39363..a70f995ed3ea 100644 --- a/app/react/src/server/framework-preset-react-docgen.ts +++ b/app/react/src/server/framework-preset-react-docgen.ts @@ -23,10 +23,9 @@ export function babel( }; } -export function webpackFinal( - config: Configuration, - { typescript: { docgen = 'react-docgen-typescript' } } = { typescript: {} } -) { +export function webpackFinal(config: Configuration, { typescript } = { typescript: {} }) { + // @ts-ignore + const docgen = typescript?.docgen || 'react-docgen-typescript'; if (docgen !== 'react-docgen-typescript') return config; return { ...config, From 322380fad5877650982f56d5dda5c73e08e45bfd Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 18 May 2020 11:40:01 +0800 Subject: [PATCH 2/7] Clean up typescriptOptions handling for docgen --- .../src/server/framework-preset-react-docgen.ts | 17 +++++++++++++---- lib/core/src/server/config.js | 4 ++-- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/app/react/src/server/framework-preset-react-docgen.ts b/app/react/src/server/framework-preset-react-docgen.ts index a70f995ed3ea..de7634d8d640 100644 --- a/app/react/src/server/framework-preset-react-docgen.ts +++ b/app/react/src/server/framework-preset-react-docgen.ts @@ -1,10 +1,17 @@ import { TransformOptions } from '@babel/core'; import { Configuration } from 'webpack'; +type Docgen = 'react-docgen' | 'react-docgen-typescript'; +interface TypescriptOptions { + typescriptOptions?: { docgen?: Docgen }; +} +const DEFAULT_DOCGEN = 'react-docgen-typescript'; + export function babel( config: TransformOptions, - { typescript: { docgen = 'react-docgen-typescript' } = {} } = {} + { typescriptOptions }: TypescriptOptions = { typescriptOptions: {} } ) { + const docgen = typescriptOptions?.docgen || DEFAULT_DOCGEN; return { ...config, overrides: [ @@ -23,9 +30,11 @@ export function babel( }; } -export function webpackFinal(config: Configuration, { typescript } = { typescript: {} }) { - // @ts-ignore - const docgen = typescript?.docgen || 'react-docgen-typescript'; +export function webpackFinal( + config: Configuration, + { typescriptOptions }: TypescriptOptions = { typescriptOptions: {} } +) { + const docgen = typescriptOptions?.docgen || DEFAULT_DOCGEN; if (docgen !== 'react-docgen-typescript') return config; return { ...config, diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js index a01816dae014..5aff0e31b297 100644 --- a/lib/core/src/server/config.js +++ b/lib/core/src/server/config.js @@ -3,10 +3,10 @@ import loadPresets from './presets'; import loadCustomPresets from './common/custom-presets'; async function getPreviewWebpackConfig(options, presets) { - const babelOptions = await presets.apply('babel', {}, options); + const typescriptOptions = await presets.apply('typescript', {}, options); + const babelOptions = await presets.apply('babel', {}, { ...options, typescriptOptions }); const entries = await presets.apply('entries', [], options); const stories = await presets.apply('stories', [], options); - const typescriptOptions = await presets.apply('typescript', {}, options); return presets.apply( 'webpack', From 267a01e18a9ac41acc74c21ed73439e2011a66a8 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 18 May 2020 11:40:50 +0800 Subject: [PATCH 3/7] Clean up `react-ts` example and addon-essentials for testing --- examples/react-ts/main.js | 2 ++ examples/react-ts/package.json | 1 + examples/react-ts/src/button.stories.tsx | 6 ++++-- examples/react-ts/src/button.tsx | 3 +++ 4 files changed, 10 insertions(+), 2 deletions(-) diff --git a/examples/react-ts/main.js b/examples/react-ts/main.js index 752ddf1f25e9..c1e1e15290eb 100644 --- a/examples/react-ts/main.js +++ b/examples/react-ts/main.js @@ -1,7 +1,9 @@ module.exports = { stories: ['./src/*.stories.*'], + addons: ['@storybook/addon-essentials'], typescript: { check: true, checkOptions: {}, + docgen: 'react-docgen', }, }; diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json index ee22103c642f..c5c9f2a57822 100644 --- a/examples/react-ts/package.json +++ b/examples/react-ts/package.json @@ -8,6 +8,7 @@ "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-dll" }, "dependencies": { + "@storybook/addon-essentials": "6.0.0-beta.7", "@storybook/react": "6.0.0-beta.7", "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", diff --git a/examples/react-ts/src/button.stories.tsx b/examples/react-ts/src/button.stories.tsx index 41ea8e4e19c0..b2350a28722f 100644 --- a/examples/react-ts/src/button.stories.tsx +++ b/examples/react-ts/src/button.stories.tsx @@ -1,6 +1,8 @@ import React from 'react'; +import { argsStory } from '@storybook/react'; import { Button } from './button'; -export default { component: Button, title: 'Examples / Button' }; +export default { component: Button, title: 'Examples/Button' }; -export const SimpleButton = () => +`; From 1e621e35e5d8065ee7a68a3b13a006e7651b1534 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 18 May 2020 17:02:17 +0800 Subject: [PATCH 6/7] Update main.js typescript docgen handling --- .../framework-preset-react-docgen.test.ts | 2 +- .../server/framework-preset-react-docgen.ts | 36 ++++++++++++------- examples/react-ts/main.js | 5 ++- examples/react-ts/src/button.tsx | 6 +++- lib/core/package.json | 1 + lib/core/types/index.ts | 10 ++++++ 6 files changed, 45 insertions(+), 15 deletions(-) create mode 100644 lib/core/types/index.ts 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 0770853daa1a..d4130c0aba30 100644 --- a/app/react/src/server/framework-preset-react-docgen.test.ts +++ b/app/react/src/server/framework-preset-react-docgen.test.ts @@ -18,7 +18,7 @@ describe('framework-preset-react-docgen', () => { presets: ['env', 'foo-preset'], overrides: [ { - test: /\.(mjs|tsx?|jsx?)$/, + test: /\.(mjs|jsx?)$/, plugins: [ [ babelPluginReactDocgenPath, diff --git a/app/react/src/server/framework-preset-react-docgen.ts b/app/react/src/server/framework-preset-react-docgen.ts index 240936a36b82..cf731c965252 100644 --- a/app/react/src/server/framework-preset-react-docgen.ts +++ b/app/react/src/server/framework-preset-react-docgen.ts @@ -1,22 +1,27 @@ import { TransformOptions } from '@babel/core'; import { Configuration } from 'webpack'; +import type { StorybookOptions } from '@storybook/core/types'; -type Docgen = 'react-docgen' | 'react-docgen-typescript'; -interface TypescriptOptions { - typescriptOptions?: { docgen?: Docgen }; -} -const DEFAULT_DOCGEN = 'react-docgen'; +const DEFAULT_DOCGEN = 'react-docgen-typescript'; + +const getDocgen = (typescriptOptions: StorybookOptions['typescriptOptions']) => { + const docgen = typescriptOptions?.reactDocgen; + return typeof docgen === 'undefined' ? DEFAULT_DOCGEN : docgen; +}; export function babel( config: TransformOptions, - { typescriptOptions }: TypescriptOptions = { typescriptOptions: {} } + { typescriptOptions }: StorybookOptions = { typescriptOptions: {} } ) { - const docgen = typescriptOptions?.docgen || DEFAULT_DOCGEN; + const reactDocgen = getDocgen(typescriptOptions); + if (!reactDocgen) { + return config; + } return { ...config, overrides: [ { - test: docgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/, + test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/, plugins: [ [ require.resolve('babel-plugin-react-docgen'), @@ -32,10 +37,10 @@ export function babel( export function webpackFinal( config: Configuration, - { typescriptOptions }: TypescriptOptions = { typescriptOptions: {} } + { typescriptOptions }: StorybookOptions = { typescriptOptions: {} } ) { - const docgen = typescriptOptions?.docgen || DEFAULT_DOCGEN; - if (docgen !== 'react-docgen-typescript') return config; + const reactDocgen = getDocgen(typescriptOptions); + if (reactDocgen !== 'react-docgen-typescript') return config; return { ...config, module: { @@ -43,7 +48,14 @@ export function webpackFinal( rules: [ ...config.module.rules, { - loader: require.resolve('react-docgen-typescript-loader'), + test: /\.tsx?$/, + // include: path.resolve(__dirname, "../src"), + use: [ + { + loader: require.resolve('react-docgen-typescript-loader'), + options: typescriptOptions?.reactDocgenTypescriptOptions, + }, + ], }, ], }, diff --git a/examples/react-ts/main.js b/examples/react-ts/main.js index c1e1e15290eb..e901e7decb65 100644 --- a/examples/react-ts/main.js +++ b/examples/react-ts/main.js @@ -4,6 +4,9 @@ module.exports = { typescript: { check: true, checkOptions: {}, - docgen: 'react-docgen', + reactDocgen: 'react-docgen-typescript', + reactDocgenTypescriptOptions: { + propFilter: (prop) => ['label', 'disabled'].includes(prop.name), + }, }, }; diff --git a/examples/react-ts/src/button.tsx b/examples/react-ts/src/button.tsx index 3115bbcbf2c9..d91f88f34b38 100644 --- a/examples/react-ts/src/button.tsx +++ b/examples/react-ts/src/button.tsx @@ -7,4 +7,8 @@ export interface ButtonProps extends ButtonHTMLAttributes { label: string; } -export const Button = ({ label }: ButtonProps) => ; +export const Button = ({ label, disabled }: ButtonProps) => ( + +); diff --git a/lib/core/package.json b/lib/core/package.json index fe53259c654c..2f05cf416e8e 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -20,6 +20,7 @@ "files": [ "dist/**/*", "dll/**/*", + "types/**/*", "README.md", "*.js", "*.d.ts", diff --git a/lib/core/types/index.ts b/lib/core/types/index.ts new file mode 100644 index 000000000000..ed98b6d293a3 --- /dev/null +++ b/lib/core/types/index.ts @@ -0,0 +1,10 @@ +type ReactDocgen = 'react-docgen' | 'react-docgen-typescript' | false; + +export interface StorybookOptions { + typescriptOptions?: { + reactDocgen?: ReactDocgen; + reactDocgenTypescriptOptions?: any; + check?: boolean; + checkOptions?: any; + }; +} From 0b5b8c8f62dedbb9260b2993d0ed77e74e10473b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 18 May 2020 17:05:57 +0800 Subject: [PATCH 7/7] Update addon-jest.testresults.json --- examples/angular-cli/addon-jest.testresults.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/angular-cli/addon-jest.testresults.json b/examples/angular-cli/addon-jest.testresults.json index c0ee4138b182..dd2a4552dbaa 100644 --- a/examples/angular-cli/addon-jest.testresults.json +++ b/examples/angular-cli/addon-jest.testresults.json @@ -1 +1 @@ -{"numFailedTestSuites":1,"numFailedTests":0,"numPassedTestSuites":0,"numPassedTests":0,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":1,"numTodoTests":0,"numTotalTestSuites":1,"numTotalTests":0,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesRemovedList":[],"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1589783494030,"success":false,"testResults":[{"assertionResults":[],"coverage":{},"endTime":1589783495323,"message":" \u001b[1m● \u001b[22mTest suite failed to run\n\n File not found: /tsconfig.spec.json (resolved as: /Users/shilman/projects/baseline/storybook/examples/angular-cli/tsconfig.spec.json)\n\n \u001b[2mat ConfigSet.resolvePath (\u001b[22m../../node_modules/ts-jest/dist/config/config-set.js\u001b[2m:696:19)\u001b[22m\n \u001b[2mat ConfigSet.get (\u001b[22m../../node_modules/ts-jest/dist/config/config-set.js\u001b[2m:213:67)\u001b[22m\n \u001b[2mat ConfigSet.tsJest (\u001b[22m../../node_modules/ts-jest/dist/util/memoize.js\u001b[2m:43:24)\u001b[22m\n \u001b[2mat ConfigSet.get (\u001b[22m../../node_modules/ts-jest/dist/config/config-set.js\u001b[2m:301:41)\u001b[22m\n \u001b[2mat ConfigSet.versions (\u001b[22m../../node_modules/ts-jest/dist/util/memoize.js\u001b[2m:43:24)\u001b[22m\n \u001b[2mat ConfigSet.get (\u001b[22m../../node_modules/ts-jest/dist/config/config-set.js\u001b[2m:571:32)\u001b[22m\n \u001b[2mat ConfigSet.jsonValue (\u001b[22m../../node_modules/ts-jest/dist/util/memoize.js\u001b[2m:43:24)\u001b[22m\n \u001b[2mat ConfigSet.get [as cacheKey] (\u001b[22m../../node_modules/ts-jest/dist/config/config-set.js\u001b[2m:586:25)\u001b[22m\n \u001b[2mat TsJestTransformer.getCacheKey (\u001b[22m../../node_modules/ts-jest/dist/ts-jest-transformer.js\u001b[2m:109:36)\u001b[22m\n \u001b[2mat ScriptTransformer._getCacheKey (\u001b[22m../../node_modules/@jest/transform/build/ScriptTransformer.js\u001b[2m:255:23)\u001b[22m\n","name":"/Users/shilman/projects/baseline/storybook/examples/angular-cli/src/app/app.component.spec.ts","startTime":1589783495323,"status":"failed","summary":""}],"wasInterrupted":false} \ No newline at end of file +{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":1,"numPassedTests":3,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTodoTests":0,"numTotalTestSuites":1,"numTotalTests":3,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesRemovedList":[],"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1588390378489,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should create the app","location":null,"status":"passed","title":"should create the app"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should have as title 'app'","location":null,"status":"passed","title":"should have as title 'app'"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should render title in a h1 tag","location":null,"status":"passed","title":"should render title in a h1 tag"}],"endTime":1588390380761,"message":"","name":"C:\\Users\\Brandon\\Desktop\\storybook\\examples\\angular-cli\\src\\app\\app.component.spec.ts","startTime":1588390379328,"status":"passed","summary":""}],"wasInterrupted":false} \ No newline at end of file