Core: Zero-config TypeScript loading

app/angular/src/server/framework-preset-angular.ts

@@ -51,7 +51,6 @@ export function webpack(
     },
     resolve: {
       ...config.resolve,
-      extensions: ['.ts', '.tsx', ...config.resolve.extensions],
     },
     plugins: [
       ...config.plugins,

app/react/package.json

@@ -50,6 +50,7 @@
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "react-dev-utils": "^10.0.0",
+    "react-docgen-typescript-loader": "^3.7.2",
     "regenerator-runtime": "^0.13.3",
     "semver": "^7.3.2",
     "ts-dedent": "^1.1.1",

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

@@ -1,76 +1,36 @@
-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.', () => {
+  it('should return the config with the extra plugin', () => {
     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'],
+    const config = preset.babel(babelConfig, {
+      typescriptOptions: { check: false, reactDocgen: 'react-docgen' },
     });
-  });
-
-  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,
+      plugins: ['foo-plugin'],
       presets: ['env', 'foo-preset'],
-    };
-
-    const config = preset.babel(babelConfig);
-
-    expect(config).toEqual({
-      babelrc: false,
-      plugins: [
-        [
-          babelPluginReactDocgenPath,
-          {
-            DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
-          },
-        ],
+      overrides: [
+        {
+          test: /\.(mjs|tsx?|jsx?)$/,
+          plugins: [
+            [
+              babelPluginReactDocgenPath,
+              {
+                DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+              },
+            ],
+          ],
+        },
       ],
-      presets: ['env', 'foo-preset'],
     });
   });
 });

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

@@ -1,22 +1,50 @@
-import { TransformOptions } from '@babel/core';
+import type { TransformOptions } from '@babel/core';
+import type { Configuration } from 'webpack';
+import type { StorybookOptions } from '@storybook/core/types';
 
-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'),
+export function babel(config: TransformOptions, { typescriptOptions }: StorybookOptions) {
+  const { reactDocgen } = typescriptOptions;
+  if (!reactDocgen) {
+    return config;
+  }
+  return {
+    ...config,
+    overrides: [
       {
-        DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+        test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+        plugins: [
+          [
+            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.
+export function webpackFinal(config: Configuration, { typescriptOptions }: StorybookOptions) {
+  const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions;
+  if (reactDocgen !== 'react-docgen-typescript') return config;
   return {
     ...config,
-    plugins: [].concat(babelConfigPlugins, extraPlugins),
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          test: /\.tsx?$/,
+          // include: path.resolve(__dirname, "../src"),
+          use: [
+            {
+              loader: require.resolve('react-docgen-typescript-loader'),
+              options: reactDocgenTypescriptOptions,
+            },
+          ],
+        },
+      ],
+    },
   };
 }

app/vue/package.json

@@ -41,12 +41,12 @@
     "global": "^4.3.2",
     "regenerator-runtime": "^0.13.3",
     "ts-dedent": "^1.1.1",
+    "ts-loader": "^7.0.4",
     "webpack": "^4.43.0"
   },
   "devDependencies": {
     "@types/node": "^13.13.4",
     "@types/webpack": "^4.41.12",
-    "babel-preset-vue": "^2.0.2",
     "vue": "^2.6.8",
     "vue-loader": "^15.7.0",
     "vue-template-compiler": "^2.6.8"
@@ -57,6 +57,7 @@
     "css-loader": "*",
     "react": "*",
     "react-dom": "*",
+    "ts-loader": "^7.0.4",
     "vue": "^2.6.8",
     "vue-loader": "^15.7.0",
     "vue-template-compiler": "^2.6.8"

app/vue/src/server/framework-preset-vue.ts

@@ -14,6 +14,18 @@ export function webpack(config: Configuration) {
           loader: require.resolve('vue-loader'),
           options: {},
         },
+        {
+          test: /\.tsx?$/,
+          use: [
+            {
+              loader: require.resolve('ts-loader'),
+              options: {
+                transpileOnly: true,
+                appendTsSuffixTo: [/\.vue$/],
+              },
+            },
+          ],
+        },
       ],
     },
     resolve: {
@@ -26,10 +38,3 @@ export function webpack(config: Configuration) {
     },
   };
 }
-
-export function babelDefault(config: any) {
-  return {
-    ...config,
-    presets: [...config.presets, require.resolve('babel-preset-vue')],
-  };
-}

examples/react-ts/README.md

@@ -0,0 +1,3 @@
+# Storybook TS example
+
+This Storybook demonstrates support for TypeScript in Storybook without additional configuration.

examples/react-ts/main.ts

@@ -0,0 +1,13 @@
+import type { StorybookConfig } from '@storybook/core/types';
+
+module.exports = {
+  stories: ['./src/*.stories.*'],
+  addons: ['@storybook/addon-essentials'],
+  typescript: {
+    check: true,
+    checkOptions: {},
+    reactDocgenTypescriptOptions: {
+      propFilter: (prop) => ['label', 'disabled'].includes(prop.name),
+    },
+  },
+} as StorybookConfig;

examples/react-ts/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@storybook/example-react-ts",
+  "version": "6.0.0-beta.8",
+  "private": true,
+  "scripts": {
+    "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
+    "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-dll",
+    "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.8",
+    "@storybook/react": "6.0.0-beta.8",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "prop-types": "15.7.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "typescript": "^3.9.2",
+    "webpack": "^4.43.0"
+  }
+}

examples/react-ts/src/button.stories.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { argsStory } from '@storybook/react';
+import { Button } from './button';
+
+export default { component: Button, title: 'Examples / Button' };
+
+export const WithArgs = argsStory({ label: 'With args' });
+export const Basic = () => <Button label="Click me" />;

examples/react-ts/src/button.tsx

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

examples/react-ts/src/emoji-button.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const EmojiButton = ({ label, ...props }) => (
+  <button type="button" {...props}>
+    ⚠️ {label}
+  </button>
+);
+
+EmojiButton.propTypes = {
+  /**
+   * A label to show on the button
+   */
+  label: PropTypes.string,
+};
+
+EmojiButton.defaultProps = {
+  label: 'Hello',
+};

examples/react-ts/src/emoji-button.stories.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { argsStory } from '@storybook/react';
+import { EmojiButton } from './emoji-button';
+
+export default { component: EmojiButton, title: 'Examples / Emoji Button' };
+
+export const WithArgs = argsStory({ label: 'With args' });
+export const Basic = () => <EmojiButton label="Click me" />;

examples/react-ts/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "include": ["src/*", "main.ts"]
+}

examples/vue-cli/.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.stories.(ts|js|mdx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-storysource', '@storybook/preset-scss'],
+};

examples/vue-cli/.storybook/preview.js

@@ -0,0 +1,6 @@
+export const parameters = {
+  passArgsFirst: true,
+  docs: {
+    iframeHeight: '60px',
+  },
+};

examples/vue-cli/README.md

@@ -0,0 +1,8 @@
+# Storybook Demo
+
+This is a demo app to test Vue-CLI integration with Storybook.
+Please check vue-kitchen-sink for more examples of different ways to integrate with Storybook.
+
+Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook.
+
+You can also try `yarn serve` to see that vue-cli service also works.

examples/vue-cli/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset'],
+};

examples/vue-cli/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "vue-cli-example",
+  "version": "6.0.0-beta.8",
+  "private": true,
+  "scripts": {
+    "build": "vue-cli-service build",
+    "build-storybook": "build-storybook -s public",
+    "serve": "vue-cli-service serve",
+    "storybook": "start-storybook -p 9009 -s public"
+  },
+  "dependencies": {
+    "core-js": "^3.6.4",
+    "vue": "^2.6.8",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^8.4.1"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "6.0.0-beta.8",
+    "@storybook/preset-scss": "^1.0.2",
+    "@storybook/source-loader": "6.0.0-beta.8",
+    "@storybook/vue": "6.0.0-beta.8",
+    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-typescript": "~4.3.0",
+    "@vue/cli-service": "~4.3.0",
+    "typescript": "^3.8.3",
+    "vue-template-compiler": "^2.6.11"
+  }
+}