feat(storybook): Refactor Storybook to use Typescript (#3341)

* feat(storybook): Refactor Storybook to use Typescript

This commit updates the Storybook configuration to use Typescript, including renaming `main.js` to `main.ts`, updating `core.builder` and `framework.name` to use `@storybook/builder-webpack5` and `@storybook/react-webpack5`, respectively. The code also adds options to `addon-docs` to enable adding GFM support to the generated docs. Additionally, the commit modifies `staticDir`, removes outdated addons, and makes various devDependencies and PostCSS updates to align with Storybook 7.x.x. Finally, the commit removes some unused code and relocates `Button` and `AboutModal` story files.

* apply review comments

* update yarn lock

platform/ui/.storybook/main.ts

@@ -0,0 +1,95 @@
+import path from 'path';
+import remarkGfm from 'remark-gfm';
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(mdx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    // Other addons go here
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  core: { builder: '@storybook/builder-webpack5' },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true, // see below for alternatives
+    defaultName: 'Docs', // set to change the name of generated docs entries
+  },
+  staticDirs: ['../static'],
+  webpackFinal: async (config: any, { configType }) => {
+    // `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.
+
+    // config.module.rules[0].use[0].options.plugins[1] = [
+    //   '@babel/plugin-proposal-class-properties',
+    //   { loose: true },
+    // ];
+
+    // config.module.rules[0].use[0].options.plugins[3] = [
+    //   '@babel/plugin-proposal-private-methods',
+    //   { loose: true },
+    // ];
+
+    // config.module.rules[0].use[0].options.plugins[4] = [
+    //   '@babel/plugin-proposal-private-property-in-object',
+    //   { loose: true },
+    // ];
+
+    // Make whatever fine-grained changes you need
+    config.module.rules.push({
+      test: /\.m?js/,
+      resolve: {
+        fullySpecified: false,
+      },
+    });
+
+    // Default rule for images /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
+    const fileLoaderRule = config.module.rules.find(
+      rule => rule.test && rule.test.test('.svg')
+    );
+    fileLoaderRule.exclude = /\.svg$/;
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        { loader: require.resolve('babel-loader') },
+        //        { loader: 'svg-inline-loader' },
+      ],
+    });
+
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: 'postcss-loader',
+          options: {
+            // HERE: OPTIONS
+            postcssOptions: {
+              plugins: [require('tailwindcss'), require('autoprefixer')],
+            },
+          },
+        },
+      ],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    // Return the altered config
+    return config;
+  },
+};
+
+export default config;