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/package.json

@@ -22,8 +22,9 @@
     "start": "yarn run build --watch",
     "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
     "build:package": "yarn run build",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "react": "17.0.2",
@@ -35,6 +36,8 @@
     "lodash.debounce": "4.0.8",
     "moment": "2.24.0",
     "mousetrap": "^1.6.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-dates": "^21.8.0",
     "react-dnd": "14.0.2",
     "react-dnd-html5-backend": "14.0.0",
@@ -44,25 +47,27 @@
     "react-outside-click-handler": "^1.3.0",
     "react-select": "3.0.8",
     "react-with-direction": "^1.3.1",
-    "swiper": "^8.4.2"
+    "swiper": "^8.4.2",
+    "webpack": "^5.81.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.8",
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-docs": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-google-analytics": "^6.2.9",
-    "@storybook/addon-links": "^6.4.9",
-    "@storybook/builder-webpack5": "^6.4.9",
-    "@storybook/manager-webpack5": "^6.4.9",
-    "@storybook/react": "^6.4.9",
-    "@storybook/source-loader": "^6.4.9",
-    "autoprefixer": ">=9.7.4",
-    "babel-loader": "^8.2.2",
-    "dotenv-webpack": "6.0.4",
-    "postcss": "^8.3.5",
-    "postcss-loader": "^6.1.1",
-    "prop-types": "15.7.2",
+    "@babel/core": "^7.21.4",
+    "@storybook/addon-actions": "^7.0.7",
+    "@storybook/addon-docs": "^7.0.7",
+    "@storybook/addon-essentials": "^7.0.7",
+    "@storybook/addon-links": "^7.0.7",
+    "@storybook/react": "^7.0.7",
+    "@storybook/react-webpack5": "^7.0.7",
+    "@storybook/source-loader": "^7.0.7",
+    "@storybook/cli": "^7.0.7",
+    "autoprefixer": "^10.4.14",
+    "babel-loader": "^9.1.2",
+    "dotenv-webpack": "^8.0.1",
+    "postcss": "^8.4.23",
+    "postcss-loader": "^7.2.4",
+    "prop-types": "^15.8.1",
+    "storybook": "^7.0.7",
+    "remark-gfm": "^3.0.1",
     "tailwindcss": "3.2.4"
   }
 }