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

platform/ui/src/components/MeasurementTable/MeasurementItem.tsx

@@ -4,16 +4,7 @@ import classnames from 'classnames';
 
 import Icon from '../Icon';
 
-const MeasurementItem = ({
-  uid,
-  index,
-  label,
-  displayText,
-  isActive,
-  onClick,
-  onEdit,
-  item,
-}) => {
+const MeasurementItem = ({ uid, index, label, displayText, isActive, onClick, onEdit, item }) => {
   const [isHovering, setIsHovering] = useState(false);
 
   const onEditHandler = event => {
@@ -29,9 +20,9 @@ const MeasurementItem = ({
   return (
     <div
       className={classnames(
-        'group flex cursor-pointer bg-black border outline-none border-transparent transition duration-300',
+        'group flex cursor-pointer border border-transparent bg-black outline-none transition duration-300',
         {
-          'rounded overflow-hidden border-primary-light': isActive,
+          'border-primary-light overflow-hidden rounded': isActive,
         }
       )}
       onMouseEnter={onMouseEnter}
@@ -42,30 +33,27 @@ const MeasurementItem = ({
       data-cy={'measurement-item'}
     >
       <div
-        className={classnames(
-          'text-center w-6 py-1 text-base transition duration-300',
-          {
-            'bg-primary-light text-black active': isActive,
-            'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
-          }
-        )}
+        className={classnames('w-6 py-1 text-center text-base transition duration-300', {
+          'bg-primary-light active text-black': isActive,
+          'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
+        })}
       >
         {index}
       </div>
-      <div className="relative flex flex-col flex-1 px-2 py-1">
-        <span className="mb-1 text-base text-primary-light">{label}</span>
+      <div className="relative flex flex-1 flex-col px-2 py-1">
+        <span className="text-primary-light mb-1 text-base">{label}</span>
         {displayText.map((line, i) => (
           <span
             key={i}
-            className="pl-2 text-base text-white border-l border-primary-light"
+            className="border-primary-light border-l pl-2 text-base text-white"
             dangerouslySetInnerHTML={{ __html: line }}
           ></span>
         ))}
         <Icon
           className={classnames(
-            'text-white w-4 absolute cursor-pointer transition duration-300',
-            { 'invisible opacity-0 mr-2': !isActive && !isHovering },
-            { 'visible opacity-1': !isActive && isHovering }
+            'absolute w-4 cursor-pointer text-white transition duration-300',
+            { 'invisible mr-2 opacity-0': !isActive && !isHovering },
+            { 'opacity-1 visible': !isActive && isHovering }
           )}
           name="pencil"
           style={{
@@ -81,10 +69,7 @@ const MeasurementItem = ({
 };
 
 MeasurementItem.propTypes = {
-  uid: PropTypes.oneOfType([
-    PropTypes.number.isRequired,
-    PropTypes.string.isRequired,
-  ]),
+  uid: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]),
   index: PropTypes.number.isRequired,
   label: PropTypes.string,
   displayText: PropTypes.array.isRequired,

platform/ui/src/components/MeasurementTable/MeasurementTable.tsx

@@ -5,36 +5,25 @@ import { useTranslation } from 'react-i18next';
 
 import MeasurementItem from './MeasurementItem';
 
-const MeasurementTable = ({
-  data,
-  title,
-  onClick,
-  onEdit,
-  servicesManager,
-}) => {
+const MeasurementTable = ({ data, title, onClick, onEdit, servicesManager }) => {
   servicesManager = servicesManager as ServicesManager;
   const { customizationService } = servicesManager.services;
   const { t } = useTranslation('MeasurementTable');
   const amount = data.length;
 
-  const itemCustomization = customizationService.getCustomization(
-    'MeasurementItem',
-    {
-      content: MeasurementItem,
-      contentProps: {},
-    }
-  );
+  const itemCustomization = customizationService.getCustomization('MeasurementItem', {
+    content: MeasurementItem,
+    contentProps: {},
+  });
   const CustomMeasurementItem = itemCustomization.content;
 
   return (
     <div>
-      <div className="flex justify-between px-2 py-1 bg-secondary-main">
-        <span className="text-base font-bold tracking-widest text-white uppercase">
-          {t(title)}
-        </span>
+      <div className="bg-secondary-main flex justify-between px-2 py-1">
+        <span className="text-base font-bold uppercase tracking-widest text-white">{t(title)}</span>
         <span className="text-base font-bold text-white">{amount}</span>
       </div>
-      <div className="overflow-hidden ohif-scrollbar max-h-112">
+      <div className="ohif-scrollbar max-h-112 overflow-hidden">
         {data.length !== 0 &&
           data.map((measurementItem, index) => (
             <CustomMeasurementItem
@@ -50,10 +39,10 @@ const MeasurementTable = ({
             />
           ))}
         {data.length === 0 && (
-          <div className="flex transition duration-300 bg-black border border-transparent cursor-default group">
-            <div className="w-6 py-1 text-base text-center transition duration-300 bg-primary-dark text-primary-light group-hover:bg-secondary-main"></div>
-            <div className="flex items-center justify-between flex-1 px-2 py-4">
-              <span className="flex items-center flex-1 mb-1 text-base text-primary-light">
+          <div className="group flex cursor-default border border-transparent bg-black transition duration-300">
+            <div className="bg-primary-dark text-primary-light group-hover:bg-secondary-main w-6 py-1 text-center text-base transition duration-300"></div>
+            <div className="flex flex-1 items-center justify-between px-2 py-4">
+              <span className="text-primary-light mb-1 flex flex-1 items-center text-base">
                 {t('No tracked measurements')}
               </span>
             </div>

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

@@ -8,10 +8,13 @@ export const argTypes = {
   title: 'Components/MeasurementTable',
 };
 
-<Meta title="Components/MeasurementTable" component={MeasurementTable} />
+<Meta
+  title="Components/MeasurementTable"
+  component={MeasurementTable}
+/>
 
 export const MeasurementTableTemplate = args => (
-  <div className="w-64 h-64 bg-primary-dark">
+  <div className="bg-primary-dark h-64 w-64">
     <MeasurementTable {...args} />
   </div>
 );
@@ -38,7 +41,7 @@ MeasurementTable is a component that renders the MeasurementTables.
         services: {
           customizationService: {
             getCustomization: (title, data) => data.content,
-          }
+          },
         },
       },
     }}
@@ -73,7 +76,7 @@ With data
         services: {
           customizationService: {
             getCustomization: (title, data) => data,
-          }
+          },
         },
       },
     }}