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

extensions/default/src/Components/DataSourceConfigurationComponent.tsx

@@ -18,13 +18,10 @@ function DataSourceConfigurationComponent({
 
   const { customizationService } = servicesManager.services;
 
-  const [configurationAPI, setConfigurationAPI] = useState<
-    Types.BaseDataSourceConfigurationAPI
-  >();
+  const [configurationAPI, setConfigurationAPI] = useState<Types.BaseDataSourceConfigurationAPI>();
 
-  const [configuredItems, setConfiguredItems] = useState<
-    Array<Types.BaseDataSourceConfigurationAPIItem>
-  >();
+  const [configuredItems, setConfiguredItems] =
+    useState<Array<Types.BaseDataSourceConfigurationAPIItem>>();
 
   useEffect(() => {
     let shouldUpdate = true;
@@ -37,9 +34,7 @@ function DataSourceConfigurationComponent({
       }
 
       const { factory: configurationAPIFactory } =
-        customizationService.get(
-          activeDataSourceDef.configuration.configurationAPI
-        ) ?? {};
+        customizationService.get(activeDataSourceDef.configuration.configurationAPI) ?? {};
 
       if (!configurationAPIFactory) {
         return;
@@ -95,24 +90,25 @@ function DataSourceConfigurationComponent({
   }, [configurationAPI, configuredItems, showConfigurationModal]);
 
   return configuredItems ? (
-    <div className="flex text-aqua-pale overflow-hidden items-center">
+    <div className="text-aqua-pale flex items-center overflow-hidden">
       <Icon
         name="settings"
-        className="cursor-pointer shrink-0 w-3.5 h-3.5 mr-2.5"
+        className="mr-2.5 h-3.5 w-3.5 shrink-0 cursor-pointer"
         onClick={showConfigurationModal}
       ></Icon>
       {configuredItems.map((item, itemIndex) => {
         return (
-          <div key={itemIndex} className="flex overflow-hidden">
+          <div
+            key={itemIndex}
+            className="flex overflow-hidden"
+          >
             <div
               key={itemIndex}
-              className="text-ellipsis whitespace-nowrap overflow-hidden"
+              className="overflow-hidden text-ellipsis whitespace-nowrap"
             >
               {item.name}
             </div>
-            {itemIndex !== configuredItems.length - 1 && (
-              <div className="px-2.5">|</div>
-            )}
+            {itemIndex !== configuredItems.length - 1 && <div className="px-2.5">|</div>}
           </div>
         );
       })}

extensions/default/src/Components/DataSourceConfigurationModalComponent.tsx

@@ -5,8 +5,7 @@ import { Icon } from '@ohif/ui';
 import { Types } from '@ohif/core';
 import ItemListComponent from './ItemListComponent';
 
-const NO_WRAP_ELLIPSIS_CLASS_NAMES =
-  'text-ellipsis whitespace-nowrap overflow-hidden';
+const NO_WRAP_ELLIPSIS_CLASS_NAMES = 'text-ellipsis whitespace-nowrap overflow-hidden';
 
 type DataSourceConfigurationModalComponentProps = {
   configurationAPI: Types.BaseDataSourceConfigurationAPI;
@@ -21,9 +20,7 @@ function DataSourceConfigurationModalComponent({
 }: DataSourceConfigurationModalComponentProps) {
   const { t } = useTranslation('DataSourceConfiguration');
 
-  const [itemList, setItemList] = useState<
-    Array<Types.BaseDataSourceConfigurationAPIItem>
-  >();
+  const [itemList, setItemList] = useState<Array<Types.BaseDataSourceConfigurationAPIItem>>();
 
   const [selectedItems, setSelectedItems] = useState(configuredItems);
 
@@ -104,9 +101,7 @@ function DataSourceConfigurationModalComponent({
     itemIndex < selectedItems.length
       ? classNames(
           'bg-black/[.4]',
-          itemIndex !== itemLabels.length - 1
-            ? 'hover:bg-transparent active:bg-secondary-dark'
-            : ''
+          itemIndex !== itemLabels.length - 1 ? 'hover:bg-transparent active:bg-secondary-dark' : ''
         )
       : 'bg-transparent';
 
@@ -118,17 +113,15 @@ function DataSourceConfigurationModalComponent({
       : 'border border-dashed border-secondary-light';
 
   const getSelectedItemTextClasses = itemIndex =>
-    itemIndex <= selectedItems.length
-      ? 'text-primary-light'
-      : 'text-primary-active';
+    itemIndex <= selectedItems.length ? 'text-primary-light' : 'text-primary-active';
 
   const getErrorComponent = (): ReactElement => {
     return (
-      <div className="flex flex-col gap-4 min-h-[1px] grow">
+      <div className="flex min-h-[1px] grow flex-col gap-4">
         <div className="text-primary-light text-[20px]">
           {t(`Error fetching ${itemLabels[selectedItems.length]} list`)}
         </div>
-        <div className="bg-black text-[14px] grow p-4">{errorMessage}</div>
+        <div className="grow bg-black p-4 text-[14px]">{errorMessage}</div>
       </div>
     );
   };
@@ -141,7 +134,7 @@ function DataSourceConfigurationModalComponent({
             <div
               key={itemLabel}
               className={classNames(
-                'rounded-md p-3.5 flex flex-col gap-1 shrink min-w-[1px] basis-[200px]',
+                'flex min-w-[1px] shrink basis-[200px] flex-col gap-1 rounded-md p-3.5',
                 getSelectedItemCursorClasses(itemLabelIndex),
                 getSelectedItemBackgroundClasses(itemLabelIndex),
                 getSelectedItemBorderClasses(itemLabelIndex),
@@ -152,30 +145,21 @@ function DataSourceConfigurationModalComponent({
                 itemLabelIndex <= currentSelectedItemIndex
                   ? () => {
                       setShowFullConfig(false);
-                      setSelectedItems(theList =>
-                        theList.slice(0, itemLabelIndex)
-                      );
+                      setSelectedItems(theList => theList.slice(0, itemLabelIndex));
                     }
                   : undefined
               }
             >
-              <div className="flex gap-2 items-center text-">
+              <div className="text- flex items-center gap-2">
                 {itemLabelIndex < selectedItems.length ? (
                   <Icon name="status-tracked" />
                 ) : (
                   <Icon name="status-untracked" />
                 )}
-                <div className={classNames(NO_WRAP_ELLIPSIS_CLASS_NAMES)}>
-                  {t(itemLabel)}
-                </div>
+                <div className={classNames(NO_WRAP_ELLIPSIS_CLASS_NAMES)}>{t(itemLabel)}</div>
               </div>
               {itemLabelIndex < selectedItems.length ? (
-                <div
-                  className={classNames(
-                    'text-white text-[14px]',
-                    NO_WRAP_ELLIPSIS_CLASS_NAMES
-                  )}
-                >
+                <div className={classNames('text-[14px] text-white', NO_WRAP_ELLIPSIS_CLASS_NAMES)}>
                   {selectedItems[itemLabelIndex].name}
                 </div>
               ) : (
@@ -189,9 +173,9 @@ function DataSourceConfigurationModalComponent({
   };
 
   return (
-    <div className="h-[calc(100vh-300px)] flex flex-col pt-0.5 gap-4 select-none">
+    <div className="flex h-[calc(100vh-300px)] select-none flex-col gap-4 pt-0.5">
       {getSelectedItemsComponent()}
-      <div className="w-full h-0.5 shrink-0 bg-black"></div>
+      <div className="h-0.5 w-full shrink-0 bg-black"></div>
       {errorMessage ? (
         getErrorComponent()
       ) : (
@@ -200,10 +184,7 @@ function DataSourceConfigurationModalComponent({
           itemList={itemList}
           onItemClicked={item => {
             setShowFullConfig(false);
-            setSelectedItems(theList => [
-              ...theList.slice(0, currentSelectedItemIndex + 1),
-              item,
-            ]);
+            setSelectedItems(theList => [...theList.slice(0, currentSelectedItemIndex + 1), item]);
           }}
         ></ItemListComponent>
       )}

extensions/default/src/Components/ItemListComponent.tsx

@@ -1,12 +1,7 @@
 import classNames from 'classnames';
 import React, { ReactElement, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  Button,
-  Icon,
-  InputFilterText,
-  LoadingIndicatorProgress,
-} from '@ohif/ui';
+import { Button, Icon, InputFilterText, LoadingIndicatorProgress } from '@ohif/ui';
 import { Types } from '@ohif/core';
 
 type ItemListComponentProps = {
@@ -28,37 +23,35 @@ function ItemListComponent({
   }, [itemList]);
 
   return (
-    <div className="flex flex-col gap-4 min-h-[1px] grow">
-      <div className="flex justify-between items-center">
-        <div className="text-primary-light text-[20px]">
-          {t(`Select ${itemLabel}`)}
-        </div>
+    <div className="flex min-h-[1px] grow flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <div className="text-primary-light text-[20px]">{t(`Select ${itemLabel}`)}</div>
         <InputFilterText
-          className="grow max-w-[40%]"
+          className="max-w-[40%] grow"
           value={filterValue}
           onDebounceChange={setFilterValue}
           placeholder={t(`Search ${itemLabel} list`)}
         ></InputFilterText>
       </div>
-      <div className="flex flex-col relative min-h-[1px] grow text-[14px] bg-black">
+      <div className="relative flex min-h-[1px] grow flex-col bg-black text-[14px]">
         {itemList == null ? (
-          <LoadingIndicatorProgress className={'w-full h-full'} />
+          <LoadingIndicatorProgress className={'h-full w-full'} />
         ) : itemList.length === 0 ? (
-          <div className="flex flex-col h-full px-6 py-4 items-center justify-center text-primary-light">
-            <Icon name="magnifier" className="mb-4" />
+          <div className="text-primary-light flex h-full flex-col items-center justify-center px-6 py-4">
+            <Icon
+              name="magnifier"
+              className="mb-4"
+            />
             <span>{t(`No ${itemLabel} available`)}</span>
           </div>
         ) : (
           <>
-            <div className="bg-secondary-dark text-white px-3 py-1.5">
-              {t(itemLabel)}
-            </div>
-            <div className="overflow-auto ohif-scrollbar">
+            <div className="bg-secondary-dark px-3 py-1.5 text-white">{t(itemLabel)}</div>
+            <div className="ohif-scrollbar overflow-auto">
               {itemList
                 .filter(
                   item =>
-                    !filterValue ||
-                    item.name.toLowerCase().includes(filterValue.toLowerCase())
+                    !filterValue || item.name.toLowerCase().includes(filterValue.toLowerCase())
                 )
                 .map(item => {
                   const border =
@@ -66,7 +59,7 @@ function ItemListComponent({
                   return (
                     <div
                       className={classNames(
-                        'group mx-2 px-6 py-2 flex justify-between items-center hover:text-primary-light hover:bg-primary-dark',
+                        'hover:text-primary-light hover:bg-primary-dark group mx-2 flex items-center justify-between px-6 py-2',
                         border
                       )}
                       key={item.id}