fix: storybook with typescript (#2926)

* fix storybook for typescript * fix babel
2022-09-13 08:57:22 -04:00 · 2022-09-13 08:57:22 -04:00 · f9449e97df
commit f9449e97df
parent 1b30ff83a5
38 changed files with 153 additions and 130 deletions
--- a/babel.config.js
+++ b/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: {
--- a/package.json
+++ b/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",
--- a/platform/ui/.storybook/main.js
+++ b/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: [
--- a/platform/ui/.storybook/preview.tsx
+++ b/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>
--- a/platform/ui/src/components/AboutModal/stories/aboutModal.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/Button/stories/button.stories.mdx
+++ b/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
-button is a simple button with a text.
+You can use the button component to create a button. It can be used in different
+ways, the default button is a simple button with a text.

 <Canvas>
-  <Story name="Overview"
-         args={{children: "Button", color:"default"}}>
+  <Story name="Overview" 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,96 +74,105 @@ 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" >
-      <Button color="secondary" variant="outlined">Custom Button</Button>
+  <Story name="Custom">
+    <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" >
-      <Button variant="disabled">Disabled Button</Button>
+  <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" >
-      {() => {
-        // svg icon for github
-        const Github = () => {
-          return (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="feather feather-github"
-            >
-              <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>;
-      }}
+  <Story name="Start Icon">
+    {() => {
+      // svg icon for github
+      const Github = () => {
+        return (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="feather feather-github"
+          >
+            <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>;
+    }}
    }}
  </Story>
 </Canvas>

 End Icon is the same as start icon, but for the end of the button.

-
 <Canvas>
-  <Story name="End Icon" >
-      {() => {
-        // svg icon for github
-        const Github = () => {
-          return (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="feather feather-github"
-            >
-              <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>;
-      }}
+  <Story name="End Icon">
+    {() => {
+      // svg icon for github
+      const Github = () => {
+        return (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="feather feather-github"
+          >
+            <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>
+      );
+    }}
    }}
  </Story>
 </Canvas>

-
 ### Full width
+
 You can make the button full width by setting the `fullWidth` prop to `true`.

 <Canvas>
-  <Story name="Full Width" >
-      <Button fullWidth color="secondary">Full Width Button</Button>
+  <Story name="Full Width">
+    <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" />
--- a/platform/ui/src/components/ButtonGroup/stories/buttonGroup.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/CinePlayer/stories/cinePlayer.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/ContextMenu/stories/contextMenu.stories.mdx
+++ b/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: {},
--- a/platform/ui/src/components/DateRange/stories/dateRange.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/Dialog/stories/dialog.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/Dropdown/stories/dropdown.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/Header/stories/Header.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/Icon/stories/icon.stories.mdx
+++ b/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')
-            .map((icon) => (
+            .filter(ic => ic !== 'magnifier')
+            .map(icon => (
              <div className="m-4 flex flex-col justify-center items-center">
                <div class="w-8 h-8">
                  <Icon name={icon} />
--- a/platform/ui/src/components/IconButton/IconButton.stories.tsx
+++ b/platform/ui/src/components/IconButton/IconButton.stories.tsx
--- a/platform/ui/src/components/Input/stories/input.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/LayoutSelector/stories/layoutSelector.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/MeasurementTable/stories/measurementTable.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/Notification/stories/notification.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/SegmentationTable/stories/segmentationTable.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/SidePanel/stories/sidePanel.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/SplitButton/stories/splitButton.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/StudyBrowser/stories/studyBrowser.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/StudyItem/stories/studyItem.stories.mdx
+++ b/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)
--- a/platform/ui/src/components/Viewport/stories/Viewport.stories.mdx
+++ b/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 { createComponentTemplate } from "../../../storybook/functions/create-component-story";
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+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 ",
-        modality: "CT",
+          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
+        modality: 'CT',
        patientInformation: {
-          patientName: "Smith, Jane",
-          patientSex: "F",
-          patientAge: "59",
-          MRN: "10000001",
-          thickness: "5.0mm",
-          spacing: "1.25mm",
-          scanner: "Aquilion",
+          patientName: 'Smith, Jane',
+          patientSex: 'F',
+          patientAge: '59',
+          MRN: '10000001',
+          thickness: '5.0mm',
+          spacing: '1.25mm',
+          scanner: 'Aquilion',
        },
      },
    }}
--- a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.stories.tsx
+++ b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.stories.tsx
--- a/platform/ui/src/storybook/color/color.tsx
+++ b/platform/ui/src/storybook/color/color.tsx
--- a/platform/ui/src/storybook/colors.stories.mdx
+++ b/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>
 ```

--- a/platform/ui/src/storybook/components/anchor-list-item/anchor-list-item.tsx
+++ b/platform/ui/src/storybook/components/anchor-list-item/anchor-list-item.tsx
--- a/platform/ui/src/storybook/components/footer/footer.tsx
+++ b/platform/ui/src/storybook/components/footer/footer.tsx
--- a/platform/ui/src/storybook/components/heading/heading.tsx
+++ b/platform/ui/src/storybook/components/heading/heading.tsx
--- a/platform/ui/src/storybook/components/image/image.tsx
+++ b/platform/ui/src/storybook/components/image/image.tsx
--- a/platform/ui/src/storybook/components/index.tsx
+++ b/platform/ui/src/storybook/components/index.tsx
--- a/platform/ui/src/storybook/components/link-component/link-component.tsx
+++ b/platform/ui/src/storybook/components/link-component/link-component.tsx
--- a/platform/ui/src/storybook/components/section-name/section-name.tsx
+++ b/platform/ui/src/storybook/components/section-name/section-name.tsx
--- a/platform/ui/src/storybook/contribute.stories.mdx
+++ b/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
-export const TooltipTemplate = (args) => (
+```tsx
+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">
--- a/platform/ui/src/storybook/functions/create-component-story.tsx
+++ b/platform/ui/src/storybook/functions/create-component-story.tsx
--- a/platform/ui/src/storybook/header/header.tsx
+++ b/platform/ui/src/storybook/header/header.tsx