chore: add jsx-curly-brace-presence (#17078)

* chore: add jsx-curly-brace-presence
Opentrons · Dec 12, 2024 · 28fa8ba · 28fa8ba
1 parent 3809a79
commit 28fa8ba
Show file tree

Hide file tree

Showing 28 changed files with 54 additions and 53 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -39,6 +39,7 @@ module.exports = {
     'no-case-declarations': 'warn',
     'prefer-regex-literals': 'warn',
     'react/prop-types': 'warn',
+    'react/jsx-curly-brace-presence': 'warn',
 
     // Enforce notification hooks
     'no-restricted-imports': [

diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx
@@ -49,7 +49,7 @@ export function AlphanumericKeyboard({
   return (
     <Keyboard
       keyboardRef={r => (keyboardRef.current = r)}
-      theme={'hg-theme-default oddTheme1 alphanumericKeyboard'}
+      theme="hg-theme-default oddTheme1 alphanumericKeyboard"
       onChange={onChange}
       onKeyPress={onKeyPress}
       layoutName={layoutName}

diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx
@@ -60,7 +60,7 @@ export function FullKeyboard({
   return (
     <Keyboard
       keyboardRef={r => (keyboardRef.current = r)}
-      theme={'hg-theme-default oddTheme1'}
+      theme="hg-theme-default oddTheme1"
       onChange={onChange}
       onKeyPress={onKeyPress}
       layoutName={layoutName}

diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx
@@ -34,7 +34,7 @@ export function IndividualKey({
      */
     <Keyboard
       keyboardRef={r => (keyboardRef.current = r)}
-      theme={'hg-theme-default oddTheme1 individual-key'}
+      theme="hg-theme-default oddTheme1 individual-key"
       onChange={onChange}
       layoutName="default"
       display={customDisplay}

diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx
@@ -36,7 +36,7 @@ export function NumericalKeyboard({
      */
     <Keyboard
       keyboardRef={r => (keyboardRef.current = r)}
-      theme={'hg-theme-default oddTheme1 numerical-keyboard'}
+      theme="hg-theme-default oddTheme1 numerical-keyboard"
       onInit={keyboard => {
         keyboard.setInput(initialValue)
       }}

diff --git a/app/src/molecules/InstrumentCard/index.tsx b/app/src/molecules/InstrumentCard/index.tsx
@@ -91,7 +91,7 @@ export function InstrumentCard(props: InstrumentCardProps): JSX.Element {
             pipetteSpecs={instrumentDiagramProps.pipetteSpecs}
             mount={instrumentDiagramProps.mount}
             transform="scale(0.3)"
-            transformOrigin={'-5% 52%'}
+            transformOrigin="-5% 52%"
           />
         </Flex>
       ) : null}

diff --git a/app/src/molecules/InterventionModal/ModalContentMixed.tsx b/app/src/molecules/InterventionModal/ModalContentMixed.tsx
@@ -152,7 +152,7 @@ function ModalContentMixedSpinner(
   return (
     <Box
       marginBottom={SPACING.spacing16}
-      width={'80px'}
+      width="80px"
       css={`
         @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
           width: 100px;

diff --git a/app/src/molecules/InterventionModal/TwoColumn.stories.tsx b/app/src/molecules/InterventionModal/TwoColumn.stories.tsx
@@ -63,7 +63,7 @@ function Image({ imageUrl }: ImageProps): JSX.Element | null {
   const hasComponent =
     imageUrl != null && imageUrl.length > 0 && imageUrl[0].length > 0
   return hasComponent ? (
-    <img src={new URL(imageUrl[0], import.meta.url).href} width={'100%'} />
+    <img src={new URL(imageUrl[0], import.meta.url).href} width="100%" />
   ) : null
 }
 

diff --git a/app/src/molecules/InterventionModal/__tests__/ModalContentOneColSimpleButtons.test.tsx b/app/src/molecules/InterventionModal/__tests__/ModalContentOneColSimpleButtons.test.tsx
@@ -17,7 +17,7 @@ describe('InterventionModal', () => {
   it('renders headline', () => {
     render(
       <ModalContentOneColSimpleButtons
-        headline={'headline'}
+        headline="headline"
         firstButton={{ label: 'first button', value: 'first' }}
         secondButton={{ label: 'second button', value: 'second' }}
       />
@@ -27,7 +27,7 @@ describe('InterventionModal', () => {
   it('renders buttons', () => {
     render(
       <ModalContentOneColSimpleButtons
-        headline={'headline'}
+        headline="headline"
         firstButton={{ label: 'first button', value: 'first' }}
         secondButton={{ label: 'second button', value: 'second' }}
         furtherButtons={[
@@ -44,7 +44,7 @@ describe('InterventionModal', () => {
   it('enforces single-item selection', () => {
     render(
       <ModalContentOneColSimpleButtons
-        headline={'headline'}
+        headline="headline"
         firstButton={{ label: 'first button', value: 'first' }}
         secondButton={{ label: 'second button', value: 'second' }}
         furtherButtons={[{ label: 'third button', value: 'third' }]}
@@ -68,11 +68,11 @@ describe('InterventionModal', () => {
   it('can start with a button selected', () => {
     render(
       <ModalContentOneColSimpleButtons
-        headline={'headline'}
+        headline="headline"
         firstButton={{ label: 'first button', value: 'first' }}
         secondButton={{ label: 'second button', value: 'second' }}
         furtherButtons={[{ label: 'third button', value: 'third' }]}
-        initialSelected={'second'}
+        initialSelected="second"
       />
     )
     expect(inputElForButtonFromButtonText('first button').checked).toBeFalsy()
@@ -84,7 +84,7 @@ describe('InterventionModal', () => {
     const onChange = vi.fn()
     render(
       <ModalContentOneColSimpleButtons
-        headline={'headline'}
+        headline="headline"
         firstButton={{
           label: 'first button',
           value: 'first',
@@ -110,7 +110,7 @@ describe('InterventionModal', () => {
     const onSelect = vi.fn()
     render(
       <ModalContentOneColSimpleButtons
-        headline={'headline'}
+        headline="headline"
         firstButton={{ label: 'first button', value: 'first' }}
         secondButton={{ label: 'second button', value: 'second' }}
         furtherButtons={[{ label: 'third button', value: 'third' }]}

diff --git a/app/src/molecules/InterventionModal/story-utils/StandIn.tsx b/app/src/molecules/InterventionModal/story-utils/StandIn.tsx
@@ -8,7 +8,7 @@ export function StandInContent({
 }): JSX.Element {
   return (
     <Box
-      border={'4px dashed #A864FFFF'}
+      border="4px dashed #A864FFFF"
       borderRadius={BORDERS.borderRadius8}
       height="104px"
       backgroundColor="#A864FF19"

diff --git a/app/src/organisms/Desktop/CalibrationTaskList/__tests__/CalibrationTaskList.test.tsx b/app/src/organisms/Desktop/CalibrationTaskList/__tests__/CalibrationTaskList.test.tsx
@@ -82,7 +82,7 @@ describe('CalibrationTaskList', () => {
     rerender(
       <MemoryRouter>
         <CalibrationTaskList
-          robotName={'otie'}
+          robotName="otie"
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
@@ -108,7 +108,7 @@ describe('CalibrationTaskList', () => {
     rerender(
       <MemoryRouter>
         <CalibrationTaskList
-          robotName={'otie'}
+          robotName="otie"
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
@@ -133,7 +133,7 @@ describe('CalibrationTaskList', () => {
     rerender(
       <MemoryRouter>
         <CalibrationTaskList
-          robotName={'otie'}
+          robotName="otie"
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
@@ -158,7 +158,7 @@ describe('CalibrationTaskList', () => {
     rerender(
       <MemoryRouter>
         <CalibrationTaskList
-          robotName={'otie'}
+          robotName="otie"
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
@@ -182,7 +182,7 @@ describe('CalibrationTaskList', () => {
     rerender(
       <MemoryRouter>
         <CalibrationTaskList
-          robotName={'otie'}
+          robotName="otie"
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
@@ -206,7 +206,7 @@ describe('CalibrationTaskList', () => {
     rerender(
       <MemoryRouter>
         <CalibrationTaskList
-          robotName={'otie'}
+          robotName="otie"
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
@@ -228,7 +228,7 @@ describe('CalibrationTaskList', () => {
     rerender(
       <MemoryRouter>
         <CalibrationTaskList
-          robotName={'otie'}
+          robotName="otie"
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
@@ -253,7 +253,7 @@ describe('CalibrationTaskList', () => {
     rerender(
       <MemoryRouter>
         <CalibrationTaskList
-          robotName={'otie'}
+          robotName="otie"
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}
@@ -281,7 +281,7 @@ describe('CalibrationTaskList', () => {
     rerender(
       <MemoryRouter>
         <CalibrationTaskList
-          robotName={'otie'}
+          robotName="otie"
           pipOffsetCalLauncher={mockPipOffsetCalLauncher}
           tipLengthCalLauncher={mockTipLengthCalLauncher}
           deckCalLauncher={mockDeckCalLauncher}

diff --git a/app/src/organisms/Desktop/ChooseProtocolSlideout/index.tsx b/app/src/organisms/Desktop/ChooseProtocolSlideout/index.tsx
@@ -492,7 +492,7 @@ export function ChooseProtocolSlideoutComponent(
                                 <LinkComponent
                                   color={COLORS.blue55}
                                   role="button"
-                                  to={''}
+                                  to=""
                                 />
                               ),
                             }}

diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx
@@ -369,8 +369,8 @@ export function AddFixtureModal({
               }}
               aria-label="back"
               paddingX={SPACING.spacing16}
-              marginTop={'1.44rem'}
-              marginBottom={'0.56rem'}
+              marginTop="1.44rem"
+              marginBottom="0.56rem"
             >
               <LegacyStyledText css={GO_BACK_BUTTON_STYLE}>
                 {t('shared:go_back')}

diff --git a/app/src/organisms/ODD/NetworkSettings/FailedToConnect.tsx b/app/src/organisms/ODD/NetworkSettings/FailedToConnect.tsx
@@ -51,7 +51,7 @@ export function FailedToConnect({
             name="ot-alert"
             size="3rem"
             color={COLORS.red50}
-            aria-label={'failed_to_connect_invalidPassword'}
+            aria-label="failed_to_connect_invalidPassword"
           />
           <Flex
             flexDirection={DIRECTION_COLUMN}
@@ -83,13 +83,13 @@ export function FailedToConnect({
       </Flex>
       <Flex gridGap={SPACING.spacing8}>
         <MediumButton
-          flex={'1'}
+          flex="1"
           buttonType="secondary"
           buttonText={t('change_network')}
           onClick={handleChangeNetwork}
         />
         <MediumButton
-          flex={'1'}
+          flex="1"
           buttonText={i18n.format(t('shared:try_again'), 'capitalize')}
           onClick={handleTryAgain}
         />

diff --git a/app/src/pages/ODD/ProtocolDashboard/__tests__/LongPressModal.test.tsx b/app/src/pages/ODD/ProtocolDashboard/__tests__/LongPressModal.test.tsx
@@ -26,7 +26,7 @@ const render = (longPress: UseLongPressResult) => {
     <MemoryRouter>
       <LongPressModal
         longpress={longPress}
-        protocolId={'mockProtocol1'}
+        protocolId="mockProtocol1"
         setShowDeleteConfirmationModal={mockFunc}
         setTargetProtocolId={mockSetTargetProtocolId}
       />

diff --git a/app/src/pages/ODD/QuickTransferDashboard/__tests__/LongPressModal.test.tsx b/app/src/pages/ODD/QuickTransferDashboard/__tests__/LongPressModal.test.tsx
@@ -26,7 +26,7 @@ const render = (longPress: UseLongPressResult) => {
     <MemoryRouter>
       <LongPressModal
         longpress={longPress}
-        transferId={'mockProtocol1'}
+        transferId="mockProtocol1"
         setShowDeleteConfirmationModal={mockFunc}
         setTargetTransferId={mockSetTargetTransferId}
       />

diff --git a/opentrons-ai-client/src/molecules/Accordion/index.tsx b/opentrons-ai-client/src/molecules/Accordion/index.tsx
@@ -79,7 +79,7 @@ export function Accordion({
           <Icon
             name={OT_CHECK}
             color={COLORS.green50}
-            size={'20px'}
+            size="1.25rem"
             data-testid={`${id}-${OT_CHECK}`}
           />
         )}

diff --git a/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx b/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx
@@ -205,14 +205,14 @@ export function ChatDisplay({ chat, chatId }: ChatDisplayProps): JSX.Element {
                 setInputFieldToCorrespondingRequest()
               }}
             >
-              <StyledIcon size={SPACING.spacing20} name={'reload'} />
+              <StyledIcon size={SPACING.spacing20} name="reload" />
             </HoverShadow>
             <HoverShadow
               onClick={() => {
                 setShowFeedbackModal(true)
               }}
             >
-              <StyledIcon size={SPACING.spacing20} name={'thumbs-down'} />
+              <StyledIcon size={SPACING.spacing20} name="thumbs-down" />
             </HoverShadow>
             <HoverShadow
               onClick={async () => {
@@ -229,7 +229,7 @@ export function ChatDisplay({ chat, chatId }: ChatDisplayProps): JSX.Element {
                 handleFileDownload()
               }}
             >
-              <StyledIcon size={SPACING.spacing20} name={'download'} />
+              <StyledIcon size={SPACING.spacing20} name="download" />
             </HoverShadow>
           </Flex>
         ) : null}

diff --git a/opentrons-ai-client/src/molecules/ControlledRadioButtonGroup/index.tsx b/opentrons-ai-client/src/molecules/ControlledRadioButtonGroup/index.tsx
@@ -48,7 +48,7 @@ export function ControlledRadioButtonGroup({
                 <RadioButton
                   key={index}
                   {...radioButton}
-                  radioButtonType={'small'}
+                  radioButtonType="small"
                   isSelected={field.value === radioButton.buttonValue}
                   onChange={e => {
                     field.onChange(e)

diff --git a/opentrons-ai-client/src/molecules/PromptPreview/PromptPreview.stories.tsx b/opentrons-ai-client/src/molecules/PromptPreview/PromptPreview.stories.tsx
@@ -13,7 +13,7 @@ const meta: Meta<typeof PromptPreview> = {
         <Flex
           backgroundColor={COLORS.grey10}
           padding={SPACING.spacing40}
-          width={'596px'}
+          width="596px"
         >
           <Story />
         </Flex>

diff --git a/opentrons-ai-client/src/molecules/PromptPreviewSection/index.tsx b/opentrons-ai-client/src/molecules/PromptPreviewSection/index.tsx
@@ -72,7 +72,7 @@ export function PromptPreviewSection({
                 key={`item-tag-${index}`}
                 itemMaxWidth={itemMaxWidth}
               >
-                <Tag text={item} type={'default'} />
+                <Tag text={item} type="default" />
               </TagItemWrapper>
             )
         )}

diff --git a/opentrons-ai-client/src/organisms/LabwareLiquidsSection/index.tsx b/opentrons-ai-client/src/organisms/LabwareLiquidsSection/index.tsx
@@ -48,7 +48,7 @@ export function LabwareLiquidsSection(): JSX.Element | null {
           setDisplayLabwareModal(true)
         }}
         text={t('add_opentrons_labware')}
-        textAlignment={'left'}
+        textAlignment="left"
         iconName="plus"
       />
 
@@ -77,7 +77,7 @@ export function LabwareLiquidsSection(): JSX.Element | null {
           setValue(LIQUIDS_FIELD_NAME, [...liquids, ''])
         }}
         text={t('add_opentrons_liquid')}
-        textAlignment={'left'}
+        textAlignment="left"
         iconName="plus"
       />
 

diff --git a/opentrons-ai-client/src/organisms/LabwareModal/index.tsx b/opentrons-ai-client/src/organisms/LabwareModal/index.tsx
@@ -144,12 +144,12 @@ export function LabwareModal({
                         <ListButton
                           key={`ListButton_${category}`}
                           type="noActive"
-                          maxWidth={'100% !important'}
+                          maxWidth="100% !important"
                           onClick={() => {
                             handleCategoryClick(category)
                           }}
                         >
-                          <Flex id={`${category}`} width={'100%'}>
+                          <Flex id={`${category}`} width="100%">
                             <ListButtonAccordion
                               mainHeadline={t(`${category}`)}
                               isExpanded={category === selectedCategory}

diff --git a/opentrons-ai-client/src/organisms/StepsSection/index.tsx b/opentrons-ai-client/src/organisms/StepsSection/index.tsx
@@ -70,7 +70,7 @@ export function StepsSection(): JSX.Element | null {
                 setValue(STEPS_FIELD_NAME, [...steps, ''])
               }}
               text={t('add_step')}
-              textAlignment={'left'}
+              textAlignment="left"
               iconName="plus"
             />
-Original file line number
+Diff line change
@@ Expand Up / @@ -492,7 +492,7 @@ export function ChooseProtocolSlideoutComponent( @@
                                     <LinkComponent
                                       color={COLORS.blue55}
                                       role="button"
-                                      to={''}
+                                      to=""
                                     />
                                   ),
                                 }}
@@ Expand Down @@