docs(Storybook): upgrade to Storybook v7 (#163)

.storybook/main.ts

@@ -1,34 +1,15 @@
-import type { StorybookConfig, Options } from '@storybook/core-common';
 import type { Configuration, RuleSetRule } from 'webpack';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
-
 import { logger } from '@storybook/node-logger';
-
 import { filterByLoaderName } from './utils/webpack-module-rules';
 
 /**
  * @see https://github.com/storybookjs/storybook/blob/main/docs/configure/overview.md#using-storybook-api
  */
-export const config: StorybookConfig = {
+export const config = {
   addons: ['@storybook/addon-essentials'],
-  core: {
-    builder: {
-      name: 'webpack5',
-      options: {
-        fsCache: false,
-        lazyCompilation: false,
-      },
-    },
-  },
-  // @see https://github.com/storybookjs/storybook/blob/main/docs/configure/overview.md#feature-flags
-  features: {
-    babelModeV7: true,
-    buildStoriesJson: true,
-    previewMdx2: true,
-    storyStoreV7: true,
-  },
   stories: [],
-  webpackFinal: async (config: Configuration, options: Options) => {
+  webpackFinal: async (config: Configuration, options) => {
     // `options.configType` 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.
@@ -42,18 +23,19 @@ export const config: StorybookConfig = {
       extensions: resolve.extensions,
       mainFields: resolve.mainFields as string[],
     });
-
     resolve.plugins ? resolve.plugins.push(tsPaths as any) : (resolve.plugins = [tsPaths] as any);
-
-    module?.rules?.forEach((rule: RuleSetRule | '...') => {
+    module!.rules!.forEach((rule: RuleSetRule | '...') => {
       // modify all 'babel-loader' occurrences by setting rootMode to 'upward'. this is needed in
       // babel 7+ to include any Nx projects having a `.babelrc.json` file to be processed. these files
       // must enable `onlyRemoveTypeImports` for stencil's 'h' module is not removed in stories.
       filterByLoaderName(rule, 'babel-loader')?.forEach(
-        (ele) => (ele.options = { ...ele.options, rootMode: 'upward' }),
+        (ele) =>
+          (ele.options = {
+            ...ele.options,
+            rootMode: 'upward',
+          }),
       );
     });
-
     const instance = (await options.presets.apply('webpackInstance')) as any;
     logger.info(`=> Running in webpack instance: ${instance?.version}`);