lint(curly): consistent use of curly brackets in codebase (#3584)

platform/ui/src/components/DateRange/DateRange.tsx

@@ -45,7 +45,7 @@ const renderYearsOptions = () => {
   return options;
 };
 
-const DateRange = (props) => {
+const DateRange = props => {
   const { id, onChange, startDate, endDate } = props;
   const [focusedInput, setFocusedInput] = useState(null);
   const renderYearsOptionsCallback = useCallback(renderYearsOptions, []);
@@ -81,15 +81,15 @@ const DateRange = (props) => {
       onYearSelect: PropTypes.func,
     };
 
-    const handleMonthChange = (event) => {
+    const handleMonthChange = event => {
       onMonthSelect(month, event.target.value);
     };
 
-    const handleYearChange = (event) => {
+    const handleYearChange = event => {
       onYearSelect(month, event.target.value);
     };
 
-    const handleOnBlur = () => { };
+    const handleOnBlur = () => {};
 
     return (
       <div className="flex justify-center">
@@ -136,10 +136,10 @@ const DateRange = (props) => {
         onChange({
           startDate: newStartDate ? newStartDate.format('YYYYMMDD') : undefined,
           endDate: newEndDate ? newEndDate.format('YYYYMMDD') : undefined,
-        })
+        });
       }}
       focusedInput={focusedInput}
-      onFocusChange={(updatedVal) => setFocusedInput(updatedVal)}
+      onFocusChange={updatedVal => setFocusedInput(updatedVal)}
       /** OPTIONAL */
       renderCalendarInfo={renderDatePresets}
       renderMonthElement={renderMonthElement}
@@ -149,7 +149,7 @@ const DateRange = (props) => {
         closeDatePicker: 'Close',
         clearDates: 'Clear dates',
       }}
-      isOutsideRange={(day) => !isInclusivelyBeforeDay(day, moment())}
+      isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
       hideKeyboardShortcutsPanel={true}
       numberOfMonths={1}
       showClearDates={false}

platform/ui/src/components/HotkeyField/HotkeyField.tsx

@@ -15,7 +15,14 @@ import { getKeys, formatKeysForInput } from './utils';
  * @param {string} props.className input classes
  * @param {Array[]} props.modifierKeys
  */
-const HotkeyField = ({ disabled, keys, onChange, className, modifierKeys, hotkeys }) => {
+const HotkeyField = ({
+  disabled,
+  keys,
+  onChange,
+  className,
+  modifierKeys,
+  hotkeys,
+}) => {
   const inputValue = formatKeysForInput(keys);
 
   const onInputKeyDown = event => {
@@ -55,11 +62,11 @@ HotkeyField.propTypes = {
     unpause: PropTypes.func.isRequired,
     startRecording: PropTypes.func.isRequired,
     record: PropTypes.func.isRequired,
-  }).isRequired
+  }).isRequired,
 };
 
 HotkeyField.defaultProps = {
-  disabled: false
+  disabled: false,
 };
 
 export default HotkeyField;

platform/ui/src/components/HotkeyField/utils.js

@@ -25,7 +25,4 @@ const getKeys = ({ sequence, modifierKeys }) => {
   return [...modifiers, ...keys];
 };
 
-export {
-  getKeys,
-  formatKeysForInput
-};
+export { getKeys, formatKeysForInput };

platform/ui/src/components/HotkeysPreferences/hotkeysValidators.js

@@ -72,7 +72,9 @@ const disallowedValidator = ({ pressedKeys = [] }) => {
 
   if (hasDisallowedCombinations) {
     return {
-      error: `"${formatPressedKeys(pressedKeys)}" shortcut combination is not allowed`,
+      error: `"${formatPressedKeys(
+        pressedKeys
+      )}" shortcut combination is not allowed`,
     };
   }
 };

platform/ui/src/components/Input/Input.tsx

@@ -13,8 +13,8 @@ const transparentClasses = {
 
 const smallInputClasses = {
   true: 'input-small',
-  false: ''
-}
+  false: '',
+};
 
 const Input = ({
   id,

platform/ui/src/components/InputNumber/InputNumber.tsx

@@ -82,45 +82,46 @@ const InputNumber: React.FC<{
   );
 
   return (
-  <div className={'flex flex-col flex-1'}>
+    <div className={'flex flex-col flex-1'}>
       {label && <Label className={labelClassName} text={label}></Label>}
-    <div
-      className={`flex items-center bg-black border-2 px-1 overflow-hidden justify-center border-secondary-light rounded-md ${sizesClasses[size]
+      <div
+        className={`flex items-center bg-black border-2 px-1 overflow-hidden justify-center border-secondary-light rounded-md ${
+          sizesClasses[size]
         } ${className ? className : ''}`}
-    >
-      <div className="flex">
-        <input
-          type="text"
-          value={numberValue}
-          onChange={handleChange}
-          className={`bg-black text-white text-[12px] w-full text-center input-number`}
-        />
+      >
+        <div className="flex">
+          <input
+            type="text"
+            value={numberValue}
+            onChange={handleChange}
+            className={`bg-black text-white text-[12px] w-full text-center input-number`}
+          />
 
-        <div className="up-arrowsize flex flex-col items-center justify-around">
-          <IconButton
-            id={'down-arrow-icon'}
-            variant="text"
-            color="inherit"
-            size="initial"
-            className="text-[#726f7e] transform rotate-180"
-            onClick={handleIncrement}
-          >
-            <Icon name="ui-arrow-down" />
-          </IconButton>
-          <IconButton
-            id={'down-arrow-icon'}
-            variant="text"
-            color="inherit"
-            size="initial"
-            className="text-[#726f7e]"
-            onClick={handleDecrement}
-          >
-            <Icon name="ui-arrow-down" />
-          </IconButton>
+          <div className="up-arrowsize flex flex-col items-center justify-around">
+            <IconButton
+              id={'down-arrow-icon'}
+              variant="text"
+              color="inherit"
+              size="initial"
+              className="text-[#726f7e] transform rotate-180"
+              onClick={handleIncrement}
+            >
+              <Icon name="ui-arrow-down" />
+            </IconButton>
+            <IconButton
+              id={'down-arrow-icon'}
+              variant="text"
+              color="inherit"
+              size="initial"
+              className="text-[#726f7e]"
+              onClick={handleDecrement}
+            >
+              <Icon name="ui-arrow-down" />
+            </IconButton>
+          </div>
         </div>
       </div>
     </div>
-  </div>
   );
 };
 

platform/ui/src/components/LayoutSelector/LayoutSelector.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-function LayoutSelector({ onSelection, rows, columns}) {
+function LayoutSelector({ onSelection, rows, columns }) {
   const [hoveredIndex, setHoveredIndex] = useState();
   const hoverX = hoveredIndex % columns;
   const hoverY = Math.floor(hoveredIndex / columns);
@@ -12,7 +12,7 @@ function LayoutSelector({ onSelection, rows, columns}) {
     return x <= hoverX && y <= hoverY;
   };
 
-  const gridSize = '20px '
+  const gridSize = '20px ';
   return (
     <div
       style={{
@@ -23,27 +23,31 @@ function LayoutSelector({ onSelection, rows, columns}) {
       }}
       className="p-2"
     >
-      {Array.apply(null, Array(rows*columns)).map(function (_, i) {return i;}).map(index => (
-        <div
-          key={index}
-          style={{
-            border: '1px solid white',
-            backgroundColor: isHovered(index) ? '#5acce6' : '#0b1a42',
-          }}
-          className="cursor-pointer"
-          onClick={() => {
-            const x = index % columns;
-            const y = Math.floor(index / columns);
+      {Array.apply(null, Array(rows * columns))
+        .map(function(_, i) {
+          return i;
+        })
+        .map(index => (
+          <div
+            key={index}
+            style={{
+              border: '1px solid white',
+              backgroundColor: isHovered(index) ? '#5acce6' : '#0b1a42',
+            }}
+            className="cursor-pointer"
+            onClick={() => {
+              const x = index % columns;
+              const y = Math.floor(index / columns);
 
-            onSelection({
-              numRows: y + 1,
-              numCols: x + 1,
-            });
-          }}
-          onMouseEnter={() => setHoveredIndex(index)}
-          onMouseLeave={() => setHoveredIndex(-1)}
-        ></div>
-      ))}
+              onSelection({
+                numRows: y + 1,
+                numCols: x + 1,
+              });
+            }}
+            onMouseEnter={() => setHoveredIndex(index)}
+            onMouseLeave={() => setHoveredIndex(-1)}
+          ></div>
+        ))}
     </div>
   );
 }
@@ -51,7 +55,7 @@ function LayoutSelector({ onSelection, rows, columns}) {
 LayoutSelector.defaultProps = {
   onSelection: () => {},
   columns: 3,
-  rows: 3
+  rows: 3,
 };
 
 LayoutSelector.propTypes = {

platform/ui/src/components/ListMenu/ListMenu.tsx

@@ -12,11 +12,17 @@ const ListMenu = ({ items = [], renderer, onClick }) => {
     const onClickHandler = () => {
       setSelectedIndex(index);
       onClick({ item, selectedIndex: index });
-      if (item.onClick) item.onClick({ ...item, index, isSelected });
+      if (item.onClick) {
+        item.onClick({ ...item, index, isSelected });
+      }
     };
 
     return (
-      <div className={classnames(flex, theme, 'cursor-pointer')} onClick={onClickHandler} data-cy={item.id}>
+      <div
+        className={classnames(flex, theme, 'cursor-pointer')}
+        onClick={onClickHandler}
+        data-cy={item.id}
+      >
         {renderer && renderer({ ...item, index, isSelected })}
       </div>
     );
@@ -38,16 +44,16 @@ const ListMenu = ({ items = [], renderer, onClick }) => {
   );
 };
 
-const noop = () => { };
+const noop = () => {};
 
 ListMenu.propTypes = {
   items: PropTypes.array.isRequired,
   renderer: PropTypes.func.isRequired,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
 };
 
 ListMenu.defaultProps = {
-  onClick: noop
+  onClick: noop,
 };
 
 export default ListMenu;

platform/ui/src/components/TableHead/TableHead.tsx

@@ -26,9 +26,9 @@ TableHead.defaultProps = {
 };
 
 TableHead.propTypes = {
-  children: function (props, propName, componentName) {
+  children: function(props, propName, componentName) {
     const elements = React.Children.toArray(props.children);
-    const isString = elements.some((child) => typeof child === 'string');
+    const isString = elements.some(child => typeof child === 'string');
 
     if (isString) {
       return new Error(
@@ -37,7 +37,7 @@ TableHead.propTypes = {
     }
 
     const isInvalidElement = elements.some(
-      (child) => !React.isValidElement(child)
+      child => !React.isValidElement(child)
     );
 
     if (isInvalidElement) {

platform/ui/src/components/Viewport/Viewport.tsx

@@ -43,7 +43,9 @@ const Viewport = ({
             },
           ]}
           onSubmit={value => {
-            if (typeof window !== 'undefined') window.alert(value);
+            if (typeof window !== 'undefined') {
+              window.alert(value);
+            }
           }}
         />
       </div>

platform/ui/src/components/WindowLevelMenuItem/WindowLevelMenuItem.tsx

@@ -4,18 +4,21 @@ import classNames from 'classnames';
 
 const WindowLevelMenuItem = ({ title, subtitle, isSelected, index }) => (
   <>
-    <div className={classNames(
-      'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
-      isSelected && 'bg-primary-dark'
-    )}
+    <div
+      className={classNames(
+        'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
+        isSelected && 'bg-primary-dark'
+      )}
     >
-      <span className='text-common-bright mr-2 text-base whitespace-nowrap'>
+      <span className="text-common-bright mr-2 text-base whitespace-nowrap">
         {title}
       </span>
-      <span className='flex-1 text-aqua-pale font-light text-sm whitespace-nowrap'>
+      <span className="flex-1 text-aqua-pale font-light text-sm whitespace-nowrap">
         {subtitle}
       </span>
-      <span className='text-primary-active ml-5 text-sm whitespace-nowrap'>{index + 1}</span>
+      <span className="text-primary-active ml-5 text-sm whitespace-nowrap">
+        {index + 1}
+      </span>
     </div>
   </>
 );

platform/ui/src/contextProviders/CineProvider.tsx

@@ -27,7 +27,9 @@ export default function CineProvider({ children, service }) {
         const { id, frameRate, isPlaying = undefined } = action.payload;
         const cines = state.cines;
 
-        if (!cines[id]) cines[id] = { id, ...DEFAULT_CINE };
+        if (!cines[id]) {
+          cines[id] = { id, ...DEFAULT_CINE };
+        }
         cines[id].frameRate = frameRate || cines[id].frameRate;
         cines[id].isPlaying =
           isPlaying !== undefined ? isPlaying : cines[id].isPlaying;

platform/ui/src/contextProviders/ViewportDialogProvider.tsx

@@ -19,7 +19,7 @@ const DEFAULT_STATE = {
     console.log('btn value?');
   },
   onOutsideClick: () => {
-    console.warn('default: onOutsideClick')
+    console.warn('default: onOutsideClick');
   },
   onDismiss: () => {
     console.log('dismiss? -1');

platform/ui/src/contextProviders/ViewportGridProvider.tsx

@@ -135,7 +135,9 @@ export function ViewportGridProvider({ children, service }) {
         // Have the initial id set contain all viewports not updated here
         const viewportIdSet = new Set();
         viewports.forEach((viewport, index) => {
-          if (!viewport.viewportId) return;
+          if (!viewport.viewportId) {
+            return;
+          }
           const isUpdated = payload.find(
             newViewport => newViewport.viewportIndex === index
           );
@@ -228,7 +230,9 @@ export function ViewportGridProvider({ children, service }) {
               activeViewportIndexToSet = pos;
             }
             const viewport = findOrCreateViewport(pos, positionId, options);
-            if (!viewport) continue;
+            if (!viewport) {
+              continue;
+            }
             viewport.positionId = positionId;
             // Create a new viewport object as it is getting updated here
             // and it is part of the read only state

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

@@ -6,7 +6,7 @@ export const LinkComponent = ({
   target: originalTarget,
   rel,
 }) => {
-  const onClick = (event) => {
+  const onClick = event => {
     if (originalTarget) {
       return;
     }

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

@@ -32,7 +32,9 @@ export function createStoryMetaSettings({
     }
   });
 
-  if (component === Avatar) console.log(argTypes);
+  if (component === Avatar) {
+    console.log(argTypes);
+  }
 
   // set icon allowed values inside argsTypes object
   iconPropNamesArray?.forEach(propName => {