feat(storybook): improve webpack DX by adding proper types and jsdoc (#3454)

packages/storybook/src/schematics/configuration/lib-files/.storybook/webpack.config.js__tmpl__

@@ -1,6 +1,10 @@
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const rootWebpackConfig = require('<%= offsetFromRoot %>../.storybook/webpack.config');
-// Export a function. Accept the base config as the only param.
+/**
+ * Export a function. Accept the base config as the only param.
+ *
+ * @param {Parameters<typeof rootWebpackConfig>[0]} options
+ */
 module.exports = async ({ config, mode }) => {
   config = await rootWebpackConfig({ config, mode });
 
@@ -13,8 +17,7 @@ module.exports = async ({ config, mode }) => {
     : (config.resolve.plugins = [tsPaths])
 
   <% if(uiFramework === '@storybook/react') { %>
-  config.resolve.extensions.push('.tsx');
+  config.resolve.extensions.push('.ts', '.tsx');
-  config.resolve.extensions.push('.ts');
 
   config.module.rules.push({
     test: /\.(ts|tsx)$/,

packages/storybook/src/schematics/configuration/root-files/.storybook/webpack.config.js

@@ -1,9 +1,10 @@
-// Export a function. Accept the base config as the only param.
+/**
+ * Export a function. Accept the base config as the only param.
+ * @param {Object} options
+ * @param {Required<import('webpack').Configuration>} options.config
+ * @param {'DEVELOPMENT' | 'PRODUCTION'} options.mode - change the build configuration. 'PRODUCTION' is used when building the static version of storybook.
+ */
 module.exports = async ({ config, mode }) => {
-  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-  // You can change the configuration based on that.
-  // 'PRODUCTION' is used when building the static version of storybook.
-
   // Make whatever fine-grained changes you need
 
   // Return the altered config

packages/storybook/src/schematics/init/init.spec.ts

@@ -43,6 +43,7 @@ describe('init', () => {
       expect(
         packageJson.devDependencies['@storybook/addon-knobs']
       ).toBeDefined();
+      expect(packageJson.devDependencies['@types/webpack']).toBeDefined();
 
       // angular specific
       expect(packageJson.devDependencies['@storybook/angular']).toBeDefined();

packages/storybook/src/schematics/init/init.ts

@@ -15,6 +15,7 @@ import {
   storybookVersion,
   nxVersion,
   babelPresetTypescriptVersion,
+  webpackTypesVersion,
 } from '../../utils/versions';
 import { isFramework } from '../../utils/utils';
 import { Schema } from './schema';
@@ -28,6 +29,7 @@ function checkDependenciesInstalled(schema: Schema): Rule {
     // base deps
     devDependencies['@nrwl/storybook'] = nxVersion;
     devDependencies['@storybook/addon-knobs'] = storybookVersion;
+    devDependencies['@types/webpack'] = webpackTypesVersion;
 
     if (isFramework('angular', schema)) {
       devDependencies['@storybook/angular'] = storybookVersion;

packages/storybook/src/utils/versions.ts

@@ -3,3 +3,4 @@ export const storybookVersion = '5.3.9';
 export const babelCoreVersion = '7.9.6';
 export const babelLoaderVersion = '8.1.0';
 export const babelPresetTypescriptVersion = '7.9.0';
+export const webpackTypesVersion = '4.41.21';