Merge pull request #10816 from storybookjs/10790-fix-react-docgen-preset

Fix react-docgen handling in zero-config typescript preset

app/react/src/server/framework-preset-react-docgen.ts

@@ -1,15 +1,27 @@
 import { TransformOptions } from '@babel/core';
 import { Configuration } from 'webpack';
+import type { StorybookOptions } from '@storybook/core/types';
+
+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,
-  { typescript: { docgen = 'react-docgen-typescript' } = {} } = {}
+  { typescriptOptions }: StorybookOptions = { typescriptOptions: {} }
 ) {
+  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'),
@@ -25,17 +37,25 @@ export function babel(
 
 export function webpackFinal(
   config: Configuration,
-  { typescript: { docgen = 'react-docgen-typescript' } } = { typescript: {} }
+  { typescriptOptions }: StorybookOptions = { typescriptOptions: {} }
 ) {
-  if (docgen !== 'react-docgen-typescript') return config;
+  const reactDocgen = getDocgen(typescriptOptions);
+  if (reactDocgen !== 'react-docgen-typescript') return config;
   return {
     ...config,
     module: {
       ...config.module,
       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,
+            },
+          ],
         },
       ],
     },

examples/react-ts/main.js

@@ -1,7 +1,12 @@
 module.exports = {
   stories: ['./src/*.stories.*'],
+  addons: ['@storybook/addon-essentials'],
   typescript: {
     check: true,
     checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      propFilter: (prop) => ['label', 'disabled'].includes(prop.name),
+    },
   },
 };

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",

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 = () => <Button label="Click me" />;
+export const WithArgs = argsStory({ label: 'With args' });
+export const Basic = () => <Button label="Click me" />;

examples/react-ts/src/button.tsx

@@ -1,7 +1,14 @@
 import React, { FC, ButtonHTMLAttributes } from 'react';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * A label to show on the button
+   */
   label: string;
 }
 
-export const Button = ({ label }: ButtonProps) => <button type="button">{label}</button>;
+export const Button = ({ label, disabled }: ButtonProps) => (
+  <button type="button" disabled={disabled}>
+    {label}
+  </button>
+);

examples/vue-kitchen-sink/src/stories/components/__snapshots__/button-ts.stories.storyshot

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button (Typescript) Button Ts Story 1`] = `
+<button
+  class="button"
+>
+  Storybook has builtin Typescript support for Vue components
+</button>
+`;

lib/core/package.json

@@ -20,6 +20,7 @@
   "files": [
     "dist/**/*",
     "dll/**/*",
+    "types/**/*",
     "README.md",
     "*.js",
     "*.d.ts",

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',

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;
+  };
+}