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

@@ -1,17 +1,35 @@
-const path = require('path');
+import path from 'path';
+import remarkGfm from 'remark-gfm';
+import type { StorybookConfig } from '@storybook/react-webpack5';
 
-module.exports = {
+const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(mdx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-google-analytics',
+    // Other addons go here
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
   ],
-  core: {
-    builder: 'webpack5',
+  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, { configType }) => {
+  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.
@@ -73,3 +91,5 @@ module.exports = {
     return config;
   },
 };
+
+export default config;

platform/ui/.storybook/manager.js

@@ -2,16 +2,14 @@
 
 import { addons } from '@storybook/addons';
 import ohifTheme from './OHIFTheme';
-import favicon from '/static/favicon.png';
 
 const link = document.createElement('link');
 link.setAttribute('rel', 'shortcut icon');
-link.setAttribute('href', favicon);
 document.head.appendChild(link);
 
 addons.setConfig({
   theme: ohifTheme,
 });
 
-window.STORYBOOK_GA_ID = "G-3S63CTHNP6"
-window.STORYBOOK_REACT_GA_OPTIONS = {}
+window.STORYBOOK_GA_ID = 'G-3S63CTHNP6';
+window.STORYBOOK_REACT_GA_OPTIONS = {};

platform/ui/.storybook/preview.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { addParameters } from '@storybook/react';
 import { DocsPage, DocsContainer } from '@storybook/addon-docs';
 import {
   Heading,
@@ -13,7 +12,8 @@ import '../src/tailwind.css';
 import './custom.css';
 
 // https://github.com/mondaycom/monday-ui-react-core/tree/master/.storybook
-addParameters({
+
+export const parameters = {
   docs: {
     inlineStories: true,
     container: ({ children, context }) => (
@@ -78,6 +78,6 @@ addParameters({
       order: ['Welcome', 'Contribute', 'Foundations', 'Modals', '*'],
     },
   },
-});
+};
 
 export const decorators = [];