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: [

platform/ui/.storybook/preview.tsx

@@ -1,6 +1,6 @@
-import { parameters } from '@storybook/addon-docs/dist/esm/frameworks/react/config';
+import React from 'react';
 import { addParameters } from '@storybook/react';
-import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs';
 import {
   Heading,
   SectionName,
@@ -15,7 +15,6 @@ import './custom.css';
 // https://github.com/mondaycom/monday-ui-react-core/tree/master/.storybook
 addParameters({
   docs: {
-    ...parameters.docs,
     inlineStories: true,
     container: ({ children, context }) => (
       <DocsContainer context={context}>{children}</DocsContainer>