chore(prettier): full repo linting and code reformatting once and for all (#3627)

platform/ui/src/storybook/color/color.tsx

@@ -2,5 +2,10 @@ import React from 'react';
 
 // Create a square box with a given color
 export const Color = ({ color }) => {
-  return <div className="w-8 h-8" style={{ backgroundColor: color }} />;
+  return (
+    <div
+      className="h-8 w-8"
+      style={{ backgroundColor: color }}
+    />
+  );
 };

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

@@ -5,28 +5,27 @@ import { Color } from './color/color';
 
 ## Overview
 
-Below you can see the color palette of the application and the className to use
-for each color.
+Below you can see the color palette of the application and the className to use for each color.
 
 <br />
 
 ### Primary Colors
 
-<div className="grid grid-cols-4 gap-4 h-auto w-full bg-gray-200 p-8">
-  <div className="flex space-x-2 items-center">
-    <div className="bg-primary-dark w-16 h-16" />
+<div className="grid h-auto w-full grid-cols-4 gap-4 bg-gray-200 p-8">
+  <div className="flex items-center space-x-2">
+    <div className="bg-primary-dark h-16 w-16" />
     <span>primary-dark</span>
   </div>
-  <div className="flex space-x-2 items-center">
-    <div className="bg-primary-light w-16 h-16" />
+  <div className="flex items-center space-x-2">
+    <div className="bg-primary-light h-16 w-16" />
     <span>primary-light</span>
   </div>
-  <div className="flex space-x-2 items-center">
-    <div className="bg-primary-main w-16 h-16" />
+  <div className="flex items-center space-x-2">
+    <div className="bg-primary-main h-16 w-16" />
     <span>primary-main</span>
   </div>
-  <div className="flex space-x-2 items-center">
-    <div className="bg-primary-active w-16 h-16" />
+  <div className="flex items-center space-x-2">
+    <div className="bg-primary-active h-16 w-16" />
     <span>primary-active</span>
   </div>
 </div>
@@ -35,8 +34,8 @@ for each color.
 
 #### Usage
 
-Therefore you can use the className to style the color of a component (using
-`bg-${color-class}`) or text (using `text-${color-class}`).
+Therefore you can use the className to style the color of a component (using `bg-${color-class}`) or
+text (using `text-${color-class}`).
 
 ```tsx
 <div className="bg-primary-main text-primary-light">OHIF UI Components</div>
@@ -51,21 +50,21 @@ to render
 
 ### Secondary Colors
 
-<div className="grid grid-cols-4 gap-4 h-auto w-full bg-gray-200 p-8">
-  <div className="flex space-x-2 items-center">
-    <div className="bg-secondary-dark w-16 h-16" />
+<div className="grid h-auto w-full grid-cols-4 gap-4 bg-gray-200 p-8">
+  <div className="flex items-center space-x-2">
+    <div className="bg-secondary-dark h-16 w-16" />
     <span>secondary-dark</span>
   </div>
-  <div className="flex space-x-2 items-center">
-    <div className="bg-secondary-light w-16 h-16" />
+  <div className="flex items-center space-x-2">
+    <div className="bg-secondary-light h-16 w-16" />
     <span>secondary-light</span>
   </div>
-  <div className="flex space-x-2 items-center">
-    <div className="bg-secondary-main w-16 h-16" />
+  <div className="flex items-center space-x-2">
+    <div className="bg-secondary-main h-16 w-16" />
     <span>secondary-main</span>
   </div>
-  <div className="flex space-x-2 items-center">
-    <div className="bg-secondary-active w-16 h-16" />
+  <div className="flex items-center space-x-2">
+    <div className="bg-secondary-active h-16 w-16" />
     <span>secondary-active</span>
   </div>
 </div>
@@ -74,25 +73,25 @@ to render
 
 ### Common Colors
 
-<div className="grid grid-cols-4 gap-4 h-auto w-full bg-gray-200 p-8">
-  <div className="flex space-x-2 items-center">
-    <div className="bg-common-bright w-16 h-16" />
+<div className="grid h-auto w-full grid-cols-4 gap-4 bg-gray-200 p-8">
+  <div className="flex items-center space-x-2">
+    <div className="bg-common-bright h-16 w-16" />
     <span>common-bright</span>
   </div>
-  <div className="flex space-x-2 items-center">
-    <div className="bg-common-light w-16 h-16" />
+  <div className="flex items-center space-x-2">
+    <div className="bg-common-light h-16 w-16" />
     <span>common-light</span>
   </div>
-  <div className="flex space-x-2 items-center">
-    <div className="bg-common-main w-16 h-16" />
+  <div className="flex items-center space-x-2">
+    <div className="bg-common-main h-16 w-16" />
     <span>common-main</span>
   </div>
-  <div className="flex space-x-2 items-center">
-    <div className="bg-common-dark w-16 h-16" />
+  <div className="flex items-center space-x-2">
+    <div className="bg-common-dark h-16 w-16" />
     <span>common-dark</span>
   </div>
-  <div className="flex space-x-2 items-center">
-    <div className="bg-common-active w-16 h-16" />
+  <div className="flex items-center space-x-2">
+    <div className="bg-common-active h-16 w-16" />
     <span>common-active</span>
   </div>
 </div>
@@ -101,17 +100,17 @@ to render
 
 ### Custom Colors
 
-<div className="grid grid-cols-4 gap-4 h-auto w-full bg-gray-200 p-8">
-  <div className="flex space-x-2 items-center">
-    <div className="bg-customgreen-100 w-16 h-16" />
+<div className="grid h-auto w-full grid-cols-4 gap-4 bg-gray-200 p-8">
+  <div className="flex items-center space-x-2">
+    <div className="bg-customgreen-100 h-16 w-16" />
     <span>customgreen-100</span>
   </div>
-  <div className="flex space-x-2 items-center">
-    <div className="bg-customblue-100 w-16 h-16" />
+  <div className="flex items-center space-x-2">
+    <div className="bg-customblue-100 h-16 w-16" />
     <span>customblue-100</span>
   </div>
-  <div className="flex space-x-2 items-center">
-    <div className="bg-customblue-200 w-16 h-16" />
+  <div className="flex items-center space-x-2">
+    <div className="bg-customblue-200 h-16 w-16" />
     <span>customblue-200</span>
   </div>
 </div>

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

@@ -3,9 +3,9 @@ import React from 'react';
 export const Footer = ({ componentRelativePath }) => {
   return (
     <div>
-      <p className="my-2 text-gray-800 font-inter">
-        We always welcome feedback and suggestions. If you are interested to add
-        additional usecases, please send us a pull request. Edit this page on{' '}
+      <p className="font-inter my-2 text-gray-800">
+        We always welcome feedback and suggestions. If you are interested to add additional
+        usecases, please send us a pull request. Edit this page on{' '}
         <a
           className="text-blue-400"
           href={`https://github.com/OHIF/Viewers/edit/master/platform/ui/src/components/${componentRelativePath}`}

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

@@ -23,11 +23,9 @@ function GitHubLogo() {
 
 export const Heading = ({ title, componentRelativePath }) => {
   return (
-    <div className="flex items-center w-full space-x-2">
+    <div className="flex w-full items-center space-x-2">
       <div>
-        <h1 className="text-4xl font-normal text-blue-600 font-inter">
-          {title}
-        </h1>
+        <h1 className="font-inter text-4xl font-normal text-blue-600">{title}</h1>
       </div>
       {componentRelativePath && (
         <div>

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

@@ -7,11 +7,4 @@ import { SectionName } from './section-name/section-name';
 import { Footer } from './footer/footer';
 import { WithImage } from './image/image';
 
-export {
-  Heading,
-  AnchorListItem,
-  LinkComponent,
-  SectionName,
-  Footer,
-  WithImage,
-};
+export { Heading, AnchorListItem, LinkComponent, SectionName, Footer, WithImage };

platform/ui/src/storybook/components/link-component/link-component.tsx

@@ -1,11 +1,6 @@
 import React from 'react';
 
-export const LinkComponent = ({
-  children,
-  href,
-  target: originalTarget,
-  rel,
-}) => {
+export const LinkComponent = ({ children, href, target: originalTarget, rel }) => {
   const onClick = event => {
     if (originalTarget) {
       return;

platform/ui/src/storybook/components/section-name/section-name.tsx

@@ -2,17 +2,14 @@ import PropTypes from 'prop-types';
 import { useMemo } from 'react';
 
 export const SectionName = ({ className, children, ...props }) => {
-  const id = useMemo(
-    () =>
-      children
-        .toLowerCase()
-        .split(' ')
-        .join('-'),
-    [children]
-  );
+  const id = useMemo(() => children.toLowerCase().split(' ').join('-'), [children]);
   // eslint-disable-next-line jsx-a11y/heading-has-content
   return (
-    <h2 id={id} {...props} className="mt-4 text-3xl text-blue-600">
+    <h2
+      id={id}
+      {...props}
+      className="mt-4 text-3xl text-blue-600"
+    >
       {children}
     </h2>
   );

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

@@ -9,9 +9,8 @@ import CodeBlock from './assets/codeblock-error.png';
 
 ## How to Contribute to the Docs
 
-We are always looking for new contributors. If you are interested in
-contributing to the docs, please follow below instructions to run the storyBook
-locally and submit your new stories.
+We are always looking for new contributors. If you are interested in contributing to the docs,
+please follow below instructions to run the storyBook locally and submit your new stories.
 
 <br />
 
@@ -29,65 +28,68 @@ Change directory to OHIF UI using `cd platform/ui` command.
 
 ### Run Storybook
 
-You can now run the storybook using `yarn storybook` command. This will open the
-storybook in your browser. You should be able to interact with Storybook and the
-already existing stories.
+You can now run the storybook using `yarn storybook` command. This will open the storybook in your
+browser. You should be able to interact with Storybook and the already existing stories.
 
-<WithImage image={StoryBook} alt={'storybook'} />
+<WithImage
+  image={StoryBook}
+  alt={'storybook'}
+/>
 
 <br />
 
 ### Writing a Story
 
-Stories for each UI component are stored in the `__stories__` folder. Stories
-are written in the `mdx` file format. You can read more about `mdx` file format
-[here](https://storybook.js.org/docs/react/api/mdx). In summary, the `mdx` file
-format is a way to write stories in a plain text format, but with the ability to
-use React components.
+Stories for each UI component are stored in the `__stories__` folder. Stories are written in the
+`mdx` file format. You can read more about `mdx` file format
+[here](https://storybook.js.org/docs/react/api/mdx). In summary, the `mdx` file format is a way to
+write stories in a plain text format, but with the ability to use React components.
 
-For Components that don't have a `mdx` file, you need to create a `mdx` file,
-Storybook automatically fetch the `mdx` file and render the story. You can use
-one of the already existing `mdx` files for the component (e.g.
-`button.stories.mdx`). If there is already a `mdx` file for the component, you
-can add you usage in the `usage` section of the `mdx` file. (again you can see
+For Components that don't have a `mdx` file, you need to create a `mdx` file, Storybook
+automatically fetch the `mdx` file and render the story. You can use one of the already existing
+`mdx` files for the component (e.g. `button.stories.mdx`). If there is already a `mdx` file for the
+component, you can add you usage in the `usage` section of the `mdx` file. (again you can see
 `button.stories.mdx` for an example).
 
 ## Potential Issues
 
-There are some potential issues that you might encounter when writing a story
-for a component. Please read the following sections carefully.
+There are some potential issues that you might encounter when writing a story for a component.
+Please read the following sections carefully.
 
 ### Wrong Code Block Formatting
 
-`mdx` is sensitive to whitespaces, so if you have a code block that has spaces
-in between the code block, it will not render correctly, and you will get an
-error. Always check the code block when you get an error.
+`mdx` is sensitive to whitespaces, so if you have a code block that has spaces in between the code
+block, it will not render correctly, and you will get an 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):
+For instance the following code block will generate the error (notice the extra vertical space in
+the code block):
 
 ```tsx
 export const TooltipTemplate = args => (
   <div className="h-16 w-full">
-    <div class="w-8 h-8 mx-auto">
+    <div class="mx-auto h-8 w-8">
       <Tooltip {...args}>
         <Icon name="clipboard" />
       </Tooltip>
-      // Imagine a whitespace here, we cannot show the extra vertical space, since
-      mdx will generate error
+      // Imagine a whitespace here, we cannot show the extra vertical space, since mdx will generate
+      error
     </div>
   </div>
 );
 ```
 
-<WithImage image={CodeBlock} alt={'codeblock'} />
+<WithImage
+  image={CodeBlock}
+  alt={'codeblock'}
+/>
 
 <br />
 
 ### Stories with the same name
 
-You should not have multiple stories with the same name. If you have multiple
-stories with the same name, it will cause an error.
+You should not have multiple stories with the same name. If you have multiple stories with the same
+name, it will cause an error.
 
 The following code block will generate an error:
 

platform/ui/src/storybook/functions/create-component-story.tsx

@@ -15,11 +15,7 @@ export function createComponentTemplate(ComponentClass) {
 //   { options: [], mapping: {} }
 // );
 
-export function createStoryMetaSettings({
-  component,
-  enumPropNamesArray,
-  iconPropNamesArray,
-}) {
+export function createStoryMetaSettings({ component, enumPropNamesArray, iconPropNamesArray }) {
   const argTypes = {};
 
   // set enum allowed values inside argsTypes object

platform/ui/src/storybook/header/header.tsx

@@ -3,6 +3,9 @@ import Header from '../assets/header.png';
 
 export const WelcomeHeader = () => (
   <div className="mb-8">
-    <img src={Header} alt="OHIF-v3 User Interface Library" />
+    <img
+      src={Header}
+      alt="OHIF-v3 User Interface Library"
+    />
   </div>
 );

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

@@ -13,8 +13,8 @@ import Code from './assets/code.png';
 
 ## Introduction
 
-OHIF-v3 UI component library is a collection of components and utilities that
-power OHIF's zero-footprint DICOM viewer ([demo](https://v3-demo.ohif.org/)). We maintain them as a separate
+OHIF-v3 UI component library is a collection of components and utilities that power OHIF's
+zero-footprint DICOM viewer ([demo](https://v3-demo.ohif.org/)). We maintain them as a separate
 component library to:
 
 - Decouple presentation from business logic
@@ -26,37 +26,46 @@ component library to:
 
 ## Storybook Introduction
 
-We use [Storybook](https://storybook.js.org/) to document and showcase our
-components. On the left side of the screen, you'll see the component tree
-categorized into different sections.
+We use [Storybook](https://storybook.js.org/) to document and showcase our components. On the left
+side of the screen, you'll see the component tree categorized into different sections.
 
-<WithImage image={ComponentTree} alt="Component tree" className="my-8" />
+<WithImage
+  image={ComponentTree}
+  alt="Component tree"
+  className="my-8"
+/>
 
 ### Getting Started
 
-Each component folder contains examples of the component variants, its state and
-a playground to test it. Note: we are actively working on the component variants
-and their state and we are adding more examples as we go. Feel free to open a
-pull request to add more examples.
+Each component folder contains examples of the component variants, its state and a playground to
+test it. Note: we are actively working on the component variants and their state and we are adding
+more examples as we go. Feel free to open a pull request to add more examples.
 
 <WithImage
   image={Button}
   alt="Button Component"
-  className="my-8 w-40 block mx-auto"
+  className="my-8 mx-auto block w-40"
 />
 
 ### Sandbox
 
-The Sandbox (Playground) section of each story is a live preview of the
-component. You can test it by clicking on the component name in the component
-tree. This section allows you to interact with the component and change its
-properties.
+The Sandbox (Playground) section of each story is a live preview of the component. You can test it
+by clicking on the component name in the component tree. This section allows you to interact with
+the component and change its properties.
 
-<WithImage image={Sandbox} alt="Sandbox" className="my-8" />
+<WithImage
+  image={Sandbox}
+  alt="Sandbox"
+  className="my-8"
+/>
 
 ### Code
 
-Finally we have the code section. This section contains the source code of the
-illustrated component. You can copy and paste the code to your own project.
+Finally we have the code section. This section contains the source code of the illustrated
+component. You can copy and paste the code to your own project.
 
-<WithImage image={Code} alt="Code" className="my-8" />
+<WithImage
+  image={Code}
+  alt="Code"
+  className="my-8"
+/>