fix: storybook with typescript (#2926)

* fix storybook for typescript

* fix babel

babel.config.js

@@ -8,8 +8,10 @@ module.exports = {
   ],
   plugins: [
     'inline-react-svg',
-    '@babel/plugin-proposal-class-properties',
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
     '@babel/plugin-transform-typescript',
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
   ],
   env: {
     test: {

package.json

@@ -66,6 +66,7 @@
   "devDependencies": {
     "@babel/core": "^7.17.8",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-arrow-functions": "^7.16.7",

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>

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

@@ -20,7 +20,7 @@ export const aboutTemplate = args => (
 
 <Heading
   title="About Modal"
-  componentRelativePath="AboutModal/AboutModal.jsx"
+  componentRelativePath="AboutModal/AboutModal.tsx"
 />
 
 - [Overview](#overview)

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

@@ -14,22 +14,20 @@ export const argTypes = {
 
 export const buttonTemplate = createComponentTemplate(Button);
 
-<Heading title="Button" componentRelativePath="Button/Button.jsx"/>
+<Heading title="Button" componentRelativePath="Button/Button.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)
 - [Usage](#usage)
 - [Contribute](#contribute)
 
-
 ## Overview
 
-You can use the button component to create a button. It can be used in different ways, the default
+You can use the button component to create a button. It can be used in different
-button is a simple button with a text.
+ways, the default button is a simple button with a text.
 
 <Canvas>
-  <Story name="Overview"
+  <Story name="Overview" args={{ children: 'Button', color: 'default' }}>
-         args={{children: "Button", color:"default"}}>
     {buttonTemplate.bind({})}
   </Story>
 </Canvas>
@@ -39,13 +37,14 @@ button is a simple button with a text.
 <ArgsTable of={Button} />
 
 ## Usage
-### Variants
-There can be different variants of buttons: `text`, `outlined`,
-`contained`, and `disabled`.
 
+### Variants
+
+There can be different variants of buttons: `text`, `outlined`, `contained`, and
+`disabled`.
 
 <Canvas>
-  <Story name="Variants" >
+  <Story name="Variants">
     <div className="flex space-x-2">
       <Button variant="text">Text Button</Button>
       <Button variant="outlined">Outlined Button</Button>
@@ -55,13 +54,13 @@ There can be different variants of buttons: `text`, `outlined`,
   </Story>
 </Canvas>
 
-
 ### Colors
-There are different colors for the button: `default`, `primary`, `secondary`, `white`, `black`, `inherit`, `light`.
 
+There are different colors for the button: `default`, `primary`, `secondary`,
+`white`, `black`, `inherit`, `light`.
 
 <Canvas>
-  <Story name="Colors" >
+  <Story name="Colors">
     <div className="flex space-x-2">
       <Button color="default">Default Button</Button>
       <Button color="primary">Primary Button</Button>
@@ -75,30 +74,33 @@ There are different colors for the button: `default`, `primary`, `secondary`, `w
 </Canvas>
 
 ### Mixing props
+
 You can mix different props together to create a button.
 
 <Canvas>
-  <Story name="Custom" >
+  <Story name="Custom">
-      <Button color="secondary" variant="outlined">Custom Button</Button>
+    <Button color="secondary" variant="outlined">
+      Custom Button
+    </Button>
   </Story>
 </Canvas>
 
 ### Disabled
+
 You can disable the button by setting the variant to `disabled`.
 
 <Canvas>
-  <Story name="Disabled" >
+  <Story name="Disabled">
     <Button variant="disabled">Disabled Button</Button>
   </Story>
 </Canvas>
 
-
 ### Start/End Icons
+
 You can add an icon to the start of the button. It accepts an icon component.
 
-
 <Canvas>
-  <Story name="Start Icon" >
+  <Story name="Start Icon">
     {() => {
       // svg icon for github
       const Github = () => {
@@ -117,8 +119,8 @@ You can add an icon to the start of the button. It accepts an icon component.
           >
             <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
           </svg>
-          )
+        );
-        }
+      };
       return <Button startIcon={<Github />}>Start Icon Button</Button>;
     }}
     }}
@@ -127,9 +129,8 @@ You can add an icon to the start of the button. It accepts an icon component.
 
 End Icon is the same as start icon, but for the end of the button.
 
-
 <Canvas>
-  <Story name="End Icon" >
+  <Story name="End Icon">
     {() => {
       // svg icon for github
       const Github = () => {
@@ -148,23 +149,30 @@ End Icon is the same as start icon, but for the end of the button.
           >
             <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
           </svg>
-          )
+        );
-        }
+      };
-        return <Button startIcon={<Github />} endIcon={<Github />}>Start and End Icon Button</Button>;
+      return (
+        <Button startIcon={<Github />} endIcon={<Github />}>
+          Start and End Icon Button
+        </Button>
+      );
     }}
     }}
   </Story>
 </Canvas>
 
-
 ### Full width
+
 You can make the button full width by setting the `fullWidth` prop to `true`.
 
 <Canvas>
-  <Story name="Full Width" >
+  <Story name="Full Width">
-      <Button fullWidth color="secondary">Full Width Button</Button>
+    <Button fullWidth color="secondary">
+      Full Width Button
+    </Button>
   </Story>
 </Canvas>
 
 ## Contribute
-<Footer componentRelativePath="Button/__stories__/button.stories.mdx"/>
+
+<Footer componentRelativePath="Button/__stories__/button.stories.mdx" />

platform/ui/src/components/ButtonGroup/__stories__/buttonGroup.stories.mdx

@@ -23,7 +23,7 @@ export const buttonGroupTemplate = args => (
 
 <Heading
   title="ButtonGroup"
-  componentRelativePath="ButtonGroup/ButtonGroup.jsx"
+  componentRelativePath="ButtonGroup/ButtonGroup.tsx"
 />
 
 - [Overview](#overview)

platform/ui/src/components/CinePlayer/__stories__/cinePlayer.stories.mdx

@@ -11,7 +11,7 @@ export const argTypes = {
 
 export const cineTemplate = createComponentTemplate(CinePlayer);
 
-<Heading title="CinePlayer" componentRelativePath="CinePlayer/CinePlayer.jsx" />
+<Heading title="CinePlayer" componentRelativePath="CinePlayer/CinePlayer.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)

platform/ui/src/components/ContextMenu/__stories__/contextMenu.stories.mdx

@@ -13,7 +13,7 @@ export const contextMenueTemplate = createComponentTemplate(ContextMenu);
 
 <Heading
   title="ContextMenu"
-  componentRelativePath="ContextMenu/ContextMenu.jsx"
+  componentRelativePath="ContextMenu/ContextMenu.tsx"
 />
 
 - [Overview](#overview)
@@ -34,7 +34,7 @@ on user right click.
         {
           label: 'Delete measurement',
           actionType: 'Delete',
-          action: (item) => {
+          action: item => {
             window.alert(`${item.label} clicked`);
           },
           value: {},
@@ -42,7 +42,7 @@ on user right click.
         {
           label: 'Add Label',
           actionType: 'setLabel',
-          action: (item) => {
+          action: item => {
             window.alert(`${item.label} clicked`);
           },
           value: {},

platform/ui/src/components/DateRange/__stories__/dateRange.stories.mdx

@@ -8,13 +8,13 @@ export const argTypes = {
 
 <Meta title="Components/DateRange" component={DateRange} />
 
-export const DateRangeTemplate = (args) => (
+export const DateRangeTemplate = args => (
   <div className="h-96">
     <DateRange {...args} />
   </div>
 );
 
-<Heading title="DateRange" componentRelativePath="DateRange/DateRange.jsx" />
+<Heading title="DateRange" componentRelativePath="DateRange/DateRange.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)

platform/ui/src/components/Dialog/__stories__/dialog.stories.mdx

@@ -11,7 +11,7 @@ export const argTypes = {
 
 export const DialogTemplate = createComponentTemplate(Dialog);
 
-<Heading title="Dialog" componentRelativePath="Dialog/Dialog.jsx" />
+<Heading title="Dialog" componentRelativePath="Dialog/Dialog.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)

platform/ui/src/components/Dropdown/__stories__/dropdown.stories.mdx

@@ -9,14 +9,14 @@ export const argTypes = {
 
 <Meta title="Components/Dropdown" component={Dropdown} />
 
-export const DropdownTemplate = (args) => (
+export const DropdownTemplate = args => (
   // Todo: this should not set a background
   <div className="flex h-32">
     <Dropdown {...args} />
   </div>
 );
 
-<Heading title="Dropdown" componentRelativePath="Dropdown/Dropdown.jsx" />
+<Heading title="Dropdown" componentRelativePath="Dropdown/Dropdown.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)

platform/ui/src/components/Header/__stories__/Header.stories.mdx

@@ -11,7 +11,7 @@ export const argTypes = {
 
 export const HeaderTemplate = createComponentTemplate(Header);
 
-<Heading title="Header" componentRelativePath="Header/Header.jsx" />
+<Heading title="Header" componentRelativePath="Header/Header.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)

platform/ui/src/components/Icon/__stories__/icon.stories.mdx

@@ -11,14 +11,14 @@ export const argTypes = {
 
 <Meta title="Components/Icon" component={Icon} />
 
-export const IconTemplate = (args) => (
+export const IconTemplate = args => (
   // Todo: Icon colors
   <div className="w-8 h-8">
     <Icon {...args} />
   </div>
 );
 
-<Heading title="Icon" componentRelativePath="Icon/Icon.jsx" />
+<Heading title="Icon" componentRelativePath="Icon/Icon.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)
@@ -56,8 +56,8 @@ icons.
       return (
         <div className="flex flex-wrap">
           {icons
-            .filter((ic) => ic !== 'magnifier')
+            .filter(ic => ic !== 'magnifier')
-            .map((icon) => (
+            .map(icon => (
               <div className="m-4 flex flex-col justify-center items-center">
                 <div class="w-8 h-8">
                   <Icon name={icon} />

platform/ui/src/components/Input/__stories__/input.stories.mdx

@@ -12,7 +12,7 @@ export const argTypes = {
 
 export const InputTemplate = createComponentTemplate(Input);
 
-<Heading title="Input" componentRelativePath="Input/Input.jsx" />
+<Heading title="Input" componentRelativePath="Input/Input.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)

platform/ui/src/components/LayoutSelector/__stories__/layoutSelector.stories.mdx

@@ -14,7 +14,7 @@ export const LayoutSelectorTemplate = createComponentTemplate(LayoutSelector);
 
 <Heading
   title="LayoutSelector"
-  componentRelativePath="LayoutSelector/LayoutSelector.jsx"
+  componentRelativePath="LayoutSelector/LayoutSelector.tsx"
 />
 
 - [Overview](#overview)

platform/ui/src/components/MeasurementTable/__stories__/measurementTable.stories.mdx

@@ -10,7 +10,7 @@ export const argTypes = {
 
 <Meta title="Components/MeasurementTable" component={MeasurementTable} />
 
-export const MeasurementTableTemplate = (args) => (
+export const MeasurementTableTemplate = args => (
   <div className="w-64 h-64 bg-primary-dark">
     <MeasurementTable {...args} />
   </div>
@@ -18,7 +18,7 @@ export const MeasurementTableTemplate = (args) => (
 
 <Heading
   title="MeasurementTable"
-  componentRelativePath="MeasurementTable/MeasurementTable.jsx"
+  componentRelativePath="MeasurementTable/MeasurementTable.tsx"
 />
 
 - [Overview](#overview)

platform/ui/src/components/Notification/__stories__/notification.stories.mdx

@@ -14,7 +14,7 @@ export const NotificationTemplate = createComponentTemplate(Notification);
 
 <Heading
   title="Notification"
-  componentRelativePath="Notification/Notification.jsx"
+  componentRelativePath="Notification/Notification.tsx"
 />
 
 - [Overview](#overview)

platform/ui/src/components/SegmentationTable/__stories__/segmentationTable.stories.mdx

@@ -10,7 +10,7 @@ export const argTypes = {
 
 <Meta title="Components/SegmentationTable" component={SegmentationTable} />
 
-export const SegmentationTableTemplate = (args) => (
+export const SegmentationTableTemplate = args => (
   <div className="w-64 h-96 bg-primary-dark">
     <SegmentationTable {...args} />
   </div>
@@ -18,7 +18,7 @@ export const SegmentationTableTemplate = (args) => (
 
 <Heading
   title="SegmentationTable"
-  componentRelativePath="SegmentationTable/SegmentationTable.jsx"
+  componentRelativePath="SegmentationTable/SegmentationTable.tsx"
 />
 
 - [Overview](#overview)

platform/ui/src/components/SidePanel/__stories__/sidePanel.stories.mdx

@@ -10,13 +10,13 @@ export const argTypes = {
 
 <Meta title="Components/SidePanel" component={SidePanel} />
 
-export const SidePanelTemplate = (args) => (
+export const SidePanelTemplate = args => (
   <div className="w-96">
     <SidePanel {...args} />
   </div>
 );
 
-<Heading title="SidePanel" componentRelativePath="SidePanel/SidePanel.jsx" />
+<Heading title="SidePanel" componentRelativePath="SidePanel/SidePanel.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)

platform/ui/src/components/SplitButton/__stories__/splitButton.stories.mdx

@@ -10,7 +10,7 @@ export const argTypes = {
 
 <Meta title="Components/SplitButton" component={SplitButton} />
 
-export const SplitButtonTemplate = (args) => (
+export const SplitButtonTemplate = args => (
   <div className="h-32 bg-primary-dark">
     <SplitButton {...args} />
   </div>
@@ -18,7 +18,7 @@ export const SplitButtonTemplate = (args) => (
 
 <Heading
   title="SplitButton"
-  componentRelativePath="SplitButton/SplitButton.jsx"
+  componentRelativePath="SplitButton/SplitButton.tsx"
 />
 
 - [Overview](#overview)

platform/ui/src/components/StudyBrowser/__stories__/studyBrowser.stories.mdx

@@ -10,7 +10,7 @@ export const argTypes = {
 
 <Meta title="Components/StudyBrowser" component={StudyBrowser} />
 
-export const StudyBrowserTemplate = (args) => (
+export const StudyBrowserTemplate = args => (
   <div className="w-96">
     <StudyBrowser {...args} />
   </div>
@@ -18,7 +18,7 @@ export const StudyBrowserTemplate = (args) => (
 
 <Heading
   title="StudyBrowser"
-  componentRelativePath="StudyBrowser/StudyBrowser.jsx"
+  componentRelativePath="StudyBrowser/StudyBrowser.tsx"
 />
 
 - [Overview](#overview)

platform/ui/src/components/StudyItem/__stories__/studyItem.stories.mdx

@@ -10,13 +10,13 @@ export const argTypes = {
 
 <Meta title="Components/StudyItem" component={StudyItem} />
 
-export const StudyItemTemplate = (args) => (
+export const StudyItemTemplate = args => (
   <div className="w-96">
     <StudyItem {...args} />
   </div>
 );
 
-<Heading title="StudyItem" componentRelativePath="StudyItem/StudyItem.jsx" />
+<Heading title="StudyItem" componentRelativePath="StudyItem/StudyItem.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)

platform/ui/src/components/Viewport/__stories__/Viewport.stories.mdx

@@ -1,22 +1,22 @@
-import Viewport from "../Viewport";
+import Viewport from '../Viewport';
 
-import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
-import { createComponentTemplate } from "../../../storybook/functions/create-component-story";
+import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
 
 export const argTypes = {
   component: Viewport,
-  title: "Components/Viewport",
+  title: 'Components/Viewport',
 };
 
 <Meta title="Components/Viewport" component={Viewport} />
 
-export const ViewportTemplate = (args) => (
+export const ViewportTemplate = args => (
   <div className="h-40 bg-primary-dark">
     <Viewport {...args} />
   </div>
 );
 
-<Heading title="Viewport" componentRelativePath="Viewport/Viewport.jsx" />
+<Heading title="Viewport" componentRelativePath="Viewport/Viewport.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)
@@ -31,25 +31,25 @@ Viewport is a component that renders the Viewport action bar.
     name="Overview"
     args={{
       viewportIndex: 0,
-      onSeriesChange: (direction) => alert(`Annotation ${direction}`),
+      onSeriesChange: direction => alert(`Annotation ${direction}`),
       studyData: {
-        label: "A",
+        label: 'A',
         isTracked: true,
         isLocked: false,
         isRehydratable: false,
-        studyDate: "07-Sep-2011",
+        studyDate: '07-Sep-2011',
         currentSeries: 1,
         seriesDescription:
-          "Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ",
+          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
-        modality: "CT",
+        modality: 'CT',
         patientInformation: {
-          patientName: "Smith, Jane",
+          patientName: 'Smith, Jane',
-          patientSex: "F",
+          patientSex: 'F',
-          patientAge: "59",
+          patientAge: '59',
-          MRN: "10000001",
+          MRN: '10000001',
-          thickness: "5.0mm",
+          thickness: '5.0mm',
-          spacing: "1.25mm",
+          spacing: '1.25mm',
-          scanner: "Aquilion",
+          scanner: 'Aquilion',
         },
       },
     }}

platform/ui/src/storybook/colors.stories.mdx

@@ -38,7 +38,7 @@ for each color.
 Therefore you can use the className to style the color of a component (using
 `bg-${color-class}`) or text (using `text-${color-class}`).
 
-```jsx
+```tsx
 <div className="bg-primary-main text-primary-light">OHIF UI Components</div>
 ```
 

platform/ui/src/storybook/contribute.stories.mdx

@@ -66,8 +66,8 @@ error. Always check the code block when you get an error.
 For instance the following code block will generate the error (notice the extra
 vertical space in the code block):
 
-```jsx
+```tsx
-export const TooltipTemplate = (args) => (
+export const TooltipTemplate = args => (
   <div className="h-16 w-full">
     <div class="w-8 h-8 mx-auto">
       <Tooltip {...args}>
@@ -91,7 +91,7 @@ stories with the same name, it will cause an error.
 
 The following code block will generate an error:
 
-```jsx
+```tsx
 <Canvas>
   <Story name="Variants">
     <Typography variant="h1" color="initial">