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 = [];

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"
   }
 }

platform/ui/src/components/AboutModal/__stories__/aboutModal.stories.mdx

@@ -1,4 +1,4 @@
-import AboutModal from '../AboutModal';
+import AboutModal from '../../AboutModal';
 import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
 import {
   createComponentTemplate,

platform/ui/src/components/Button/__stories__/button.stories.mdx

@@ -123,7 +123,6 @@ You can add an icon to the start of the button. It accepts an icon component.
       };
       return <Button startIcon={<Github />}>Start Icon Button</Button>;
     }}
-    }}
   </Story>
 </Canvas>
 
@@ -157,7 +156,6 @@ End Icon is the same as start icon, but for the end of the button.
         </Button>
       );
     }}
-    }}
   </Story>
 </Canvas>
 

platform/ui/src/storybook/components/heading/heading.tsx

@@ -23,14 +23,14 @@ function GitHubLogo() {
 
 export const Heading = ({ title, componentRelativePath }) => {
   return (
-    <div className="flex items-center w-full">
+    <div className="flex items-center w-full space-x-2">
       <div>
         <h1 className="text-4xl font-normal text-blue-600 font-inter">
           {title}
         </h1>
       </div>
       {componentRelativePath && (
-        <div className="ml-4">
+        <div>
           <a
             href={`https://github.com/OHIF/Viewers/blob/v3-stable/platform/ui/src/components/${componentRelativePath}`}
             className="text-sm font-normal text-blue-600"

platform/ui/tailwind.config.js

@@ -24,9 +24,6 @@ module.exports = {
       initial: 'initial',
       inherit: 'inherit',
 
-      indigo: {
-        dark: '#0b1a42',
-      },
       aqua: {
         pale: '#7bb2ce',
       },
@@ -155,6 +152,7 @@ module.exports = {
         700: '#4c51bf',
         800: '#434190',
         900: '#3c366b',
+        dark: '#0b1a42',
       },
       purple: {
         100: '#faf5ff',