fix: storybook with typescript (#2926)

* fix storybook for typescript

* fix babel

platform/ui/.storybook/main.js

@@ -2,7 +2,11 @@ const path = require('path');
 
 module.exports = {
   stories: ['../src/**/*.stories.@(mdx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-google-analytics'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-google-analytics',
+  ],
   core: {
     builder: 'webpack5',
   },
@@ -11,11 +15,22 @@ module.exports = {
     // `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/,
@@ -30,8 +45,6 @@ module.exports = {
     );
     fileLoaderRule.exclude = /\.svg$/;
 
-    // console.log(JSON.stringify(config.module.rules, null, 2));
-
     config.module.rules.push({
       test: /\.svg$/,
       use: [