fix: storybook with typescript (#2926)

* fix storybook for typescript * fix babel
2022-09-13 08:57:22 -04:00
1 parent 1b30ff83a5
commit f9449e97df
@@ -20,7 +20,7 @@ export const aboutTemplate = args => (

 <Heading
  title="About Modal"
-  componentRelativePath="AboutModal/AboutModal.jsx"
+  componentRelativePath="AboutModal/AboutModal.tsx"
 />

 - [Overview](#overview)
@@ -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" />
@@ -23,7 +23,7 @@ export const buttonGroupTemplate = args => (

 <Heading
  title="ButtonGroup"
-  componentRelativePath="ButtonGroup/ButtonGroup.jsx"
+  componentRelativePath="ButtonGroup/ButtonGroup.tsx"
 />

 - [Overview](#overview)
@@ -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)
@@ -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: {},
@@ -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)
@@ -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)
@@ -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)
@@ -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)
@@ -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} />
@@ -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)
@@ -14,7 +14,7 @@ export const LayoutSelectorTemplate = createComponentTemplate(LayoutSelector);

 <Heading
  title="LayoutSelector"
-  componentRelativePath="LayoutSelector/LayoutSelector.jsx"
+  componentRelativePath="LayoutSelector/LayoutSelector.tsx"
 />

 - [Overview](#overview)
@@ -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)
@@ -14,7 +14,7 @@ export const NotificationTemplate = createComponentTemplate(Notification);

 <Heading
  title="Notification"
-  componentRelativePath="Notification/Notification.jsx"
+  componentRelativePath="Notification/Notification.tsx"
 />

 - [Overview](#overview)
@@ -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)
@@ -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)
@@ -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)
@@ -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)
@@ -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)
@@ -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',
        },
      },
    }}
@@ -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>
 ```

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