updated Storybook main.js to main.ts and included ts files (#1796)

Author: recondesigns

.storybook/main.js renamed to .storybook/main.ts

@@ -1,7 +1,11 @@
 const svgoConfig = require('../common/config/svgo');
+import type { StorybookConfig } from '@storybook/nextjs';
 
-const config = {
-  stories: ['../components/**/__stories__/*.stories.js'],
+const config: StorybookConfig = {
+  stories: [
+    '../components/**/__stories__/*.mdx',
+    '../components/**/__stories__/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
   staticDirs: ['../public'],
   addons: [
     '@storybook/addon-essentials',
@@ -13,7 +17,9 @@ const config = {
   ],
   webpackFinal: async config => {
     // Find the Storybook Webpack rule relevant to SVG files.
+    // @ts-expect-error => 'config.module' is possibly 'undefined'.ts(18048)
     const imageRule = config.module.rules.find(rule => {
+      // @ts-expect-error => 'rule' is possibly 'null' or 'undefined'.ts(18049)
       if (rule.test && rule.test.test('.svg')) {
         console.log({ rule });
         return true;
@@ -23,9 +29,11 @@ const config = {
     });
 
     // Ignore what Storybook does
+    // @ts-expect-error => 'imageRule' is possibly 'null' or 'undefined'.ts(18049)
     imageRule.exclude = /\.svg$/;
 
     // Configure .svg files to be loaded with @svgr/webpack
+    // @ts-expect-error => 'config.module' is possibly 'undefined'.ts(18048)
     config.module.rules.push({
       test: /\.svg$/,
       use: [