refactor: migrate styled-components usage of form components

src/components/SearchInput.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react'
-import styled from 'styled-components'
 
 import { UseDebouncedSearch } from '~/hooks/useDebouncedSearch'
-import { theme } from '~/styles'
+import { tw } from '~/styles/utils'
 
 import { Icon } from './designSystem'
 import { TextInput } from './form'
@@ -17,8 +16,8 @@ export const SearchInput = ({ className, onChange, placeholder }: SearchInputPro
   const [localValue, setLocalValue] = useState<string>('')
 
   return (
-    <TextInputForSearch
-      className={className}
+    <TextInput
+      className={tw('max-w-60 [&_input]:h-10 [&_input]:!pl-3', className)}
       placeholder={placeholder}
       value={localValue}
       onChange={(value) => {
@@ -32,12 +31,3 @@ export const SearchInput = ({ className, onChange, placeholder }: SearchInputPro
     />
   )
 }
-
-const TextInputForSearch = styled(TextInput)`
-  max-width: 240px;
-
-  .MuiInputBase-inputAdornedStart {
-    height: 40px;
-    padding-left: ${theme.spacing(3)};
-  }
-`

src/components/creditNote/CreditNoteFormCalculation.tsx

@@ -410,7 +410,8 @@ export const CreditNoteFormCalculation = ({
                     _get(formikProps.errors, 'payBack.0.value') !== PayBackErrorEnum.maxRefund
                   }
                 >
-                  <StyledTextInput
+                  <AmountInputField
+                    className="max-w-38 [&_input]:text-right"
                     name="payBack.0.value"
                     currency={currency}
                     formikProps={formikProps}
@@ -518,7 +519,8 @@ export const CreditNoteFormCalculation = ({
                   _get(formikProps.errors, 'payBack.1.value') !== PayBackErrorEnum.maxRefund
                 }
               >
-                <StyledTextInput
+                <AmountInputField
+                  className="max-w-38 [&_input]:text-right"
                   name="payBack.1.value"
                   currency={currency}
                   formikProps={formikProps}
@@ -608,14 +610,6 @@ const PayBackBlock = styled.div`
   }
 `
 
-const StyledTextInput = styled(AmountInputField)`
-  max-width: 152px;
-
-  input {
-    text-align: right;
-  }
-`
-
 const InlineLabel = styled.div`
   display: flex;
   align-items: center;

src/components/designSystem/Toasts/Toast.tsx

@@ -19,7 +19,7 @@
 const AUTO_DISMISS_TIME = 6000
 
 const containerStyles = cva(
-  'mt-4 box-border flex max-h-[300px] w-fit max-w-[360px] animate-enter items-center justify-start overflow-hidden rounded-xl px-4 py-3 text-white transition-all delay-[0ms] duration-[250ms] ease-in-out',
+  'mt-4 box-border flex max-h-[300px] w-fit max-w-[360px] animate-enter items-center justify-start overflow-hidden rounded-xl px-4 py-3 text-white transition-all delay-[0ms] duration-250 ease-in-out',
   {
     variants: {
       severity: {
@@ -41,7 +41,7 @@
     (time = AUTO_DISMISS_TIME) => {
       if (!autoDismiss) return
 
       // @ts-expect-error
       timeoutRef.current = setTimeout(() => {
         setClosing(true)
       }, time)

src/components/form/ComboBox/ComboBoxInput.tsx

@@ -28,13 +28,13 @@ export const ComboBoxInput = ({
   const { inputProps, InputProps, ...restParams } = params
 
   return (
-    <StyledTextInput
+    <TextInput
       onChange={(newVal) => {
         // needed because useAutocomplete expect a DOM onChange listener...
         inputProps.onChange({ target: { value: newVal } })
         searchQuery && searchQuery(newVal)
       }}
-      className={className}
+      className={tw('group/combobox-input', className)}
       name={name}
       placeholder={placeholder}
       label={label}
@@ -56,9 +56,12 @@ export const ComboBoxInput = ({
             {!disableClearable && (
               <Button
                 // To make sure the "clear button" is displayed only on hover or focus
-                className={tw('MuiAutocomplete-clearIndicator', 'hidden', {
-                  'MuiAutocomplete-clearIndicatorDirty': inputProps?.value,
-                })}
+                className={tw(
+                  'MuiAutocomplete-clearIndicator',
+                  'hidden',
+                  inputProps?.value &&
+                    'MuiAutocomplete-clearIndicatorDirty group-hover/combobox-input:flex',
+                )}
                 disabled={restParams.disabled}
                 size="small"
                 icon="close-circle-filled"
@@ -94,14 +97,6 @@ export const ComboBoxInput = ({
   )
 }
 
-const StyledTextInput = styled(TextInput)`
-  &:hover {
-    .MuiAutocomplete-clearIndicatorDirty {
-      display: flex;
-    }
-  }
-`
-
 const StartAdornmentTypography = styled(Typography)`
   > span:first-child {
     margin-right: ${theme.spacing(2)};

src/components/form/MultipleComboBox/MultipleComboBox.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 
 import { Chip, Icon } from '~/components/designSystem'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { tw } from '~/styles/utils'
 
 import { MultipleComboBoxItem } from './MultipleComboBoxItem'
 import { MultipleComboBoxList } from './MultipleComboBoxList'
@@ -142,6 +143,11 @@ export const MultipleComboBox = ({
             )
           })
         }}
+        componentsProps={{
+          clearIndicator: {
+            className: tw('size-6 rounded-lg'),
+          },
+        }}
         clearIcon={<Icon name="close-circle-filled" />}
         popupIcon={<Icon name="chevron-up-down" />}
         noOptionsText={emptyText ?? translate('text_623b3acb8ee4e000ba87d082')}
@@ -229,7 +235,7 @@ const Container = styled.div`
 
   /* Fix the placement of the adornment elements */
   .MuiAutocomplete-endAdornment {
-    top: calc(50% - 19px);
+    top: calc(50% - 12px);
   }
 
   /* Make sure scursor is visible when overing svg */

src/components/form/TextInput/TextInput.tsx

@@ -7,6 +7,7 @@ import { ChangeEvent, forwardRef, ReactNode, useCallback, useEffect, useState }
 
 import { Button, Icon, Tooltip, Typography } from '~/components/designSystem'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { theme } from '~/styles'
 import { tw } from '~/styles/utils'
 
 export enum ValueFormatter {
@@ -34,6 +35,7 @@ export interface TextInputProps
   description?: string
   cleanable?: boolean
   password?: boolean
+  variant?: 'outlined' | 'default'
   value?: string | number
   beforeChangeFormatter?: ValueFormatterType[] | ValueFormatterType
   infoText?: string
@@ -131,6 +133,7 @@ export const TextInput = forwardRef<HTMLDivElement, TextInputProps>(
       rows,
       error,
       cleanable = false,
+      variant = 'default',
       InputProps,
       type = 'text',
       password,
@@ -248,6 +251,31 @@ export const TextInput = forwardRef<HTMLDivElement, TextInputProps>(
                 : {}),
             ...InputProps,
           }}
+          sx={
+            variant === 'outlined'
+              ? {
+                  marginBottom: 0,
+                  '& .MuiInputBase-formControl': {
+                    borderRadius: 0,
+                  },
+                  '& .MuiOutlinedInput-notchedOutline': {
+                    border: 'none',
+                  },
+                  '& .Mui-focused': {
+                    zIndex: 1,
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      border: `2px solid ${theme.palette.primary.main}`,
+                    },
+                  },
+                  '& .Mui-error': {
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      border: `2px solid ${theme.palette.error.main}`,
+                    },
+                  },
+                  ...props.sx,
+                }
+              : props.sx
+          }
           {...props}
         />
         {(helperText || error) && (

src/components/form/TextInput/TextInputField.tsx

@@ -2,7 +2,6 @@ import { FormikProps } from 'formik'
 import _get from 'lodash/get'
 import _isEqual from 'lodash/isEqual'
 import { forwardRef, memo } from 'react'
-import styled, { css } from 'styled-components'
 
 import { TextInput, TextInputProps } from './TextInput'
 
@@ -30,8 +29,7 @@ export const TextInputField = memo(
       const { values, errors, touched, handleBlur, setFieldValue } = formikProps
 
       return (
-        <StyledTextInput
-          $displayErrorText={displayErrorText}
+        <TextInput
           name={name}
           value={_get(values, name)}
           ref={ref}
@@ -67,13 +65,3 @@ export const TextInputField = memo(
 )
 
 TextInputField.displayName = 'TextInputField'
-
-const StyledTextInput = styled(TextInput)<{ $displayErrorText?: boolean }>`
-  ${({ $displayErrorText }) =>
-    !$displayErrorText &&
-    css`
-      .MuiTextField-root {
-        margin-bottom: 0 !important;
-      }
-    `}
-`

src/components/invoices/EditInvoiceDisplayName.tsx

@@ -1,13 +1,11 @@
 import { useFormik } from 'formik'
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import styled from 'styled-components'
 import { object, string } from 'yup'
 
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
 import { TextInputField } from '~/components/form'
 import { InputMaybe } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { theme } from '~/styles'
 
 type EditInvoiceDisplayNameProps = {
   invoiceDisplayName: InputMaybe<string> | undefined
@@ -76,10 +74,11 @@ export const EditInvoiceDisplayName = forwardRef<EditInvoiceDisplayNameRef>((_,
         </>
       )}
     >
-      <Input
+      <TextInputField
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus
         cleanable
+        className="mb-8"
         name="invoiceDisplayName"
         label={translate('text_65018c8e5c6b626f030bcf26')}
         placeholder={translate('text_65018c8e5c6b626f030bcf2a')}
@@ -91,7 +90,3 @@ export const EditInvoiceDisplayName = forwardRef<EditInvoiceDisplayNameRef>((_,
 })
 
 EditInvoiceDisplayName.displayName = 'forwardRef'
-
-const Input = styled(TextInputField)`
-  margin-bottom: ${theme.spacing(8)};
-`

src/components/invoices/EditInvoiceItemDescriptionDialog.tsx

@@ -6,7 +6,6 @@ import { object, string } from 'yup'
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
 import { TextInputField } from '~/components/form'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { theme } from '~/styles'
 
 const MAX_CHAR_LIMIT = 255
 
@@ -78,11 +77,12 @@ export const EditInvoiceItemDescriptionDialog = forwardRef<EditInvoiceItemDescri
           </>
         )}
       >
-        <TextArea
+        <TextInputField
           // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus
           multiline
           name="description"
+          className="mb-8 whitespace-pre-line"
           rows="3"
           label={translate('text_6453819268763979024ad011')}
           error={formikProps.errors.description}
@@ -107,14 +107,6 @@ export const EditInvoiceItemDescriptionDialog = forwardRef<EditInvoiceItemDescri
 
 EditInvoiceItemDescriptionDialog.displayName = 'forwardRef'
 
-const TextArea = styled(TextInputField)`
-  margin-bottom: ${theme.spacing(8)};
-
-  textarea:first-child {
-    white-space: pre-line;
-  }
-`
-
 const TextInputHelper = styled.div`
   display: flex;
   justify-content: space-between;

src/components/invoices/EditInvoicePaymentStatusDialog.tsx

@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client'
 import { useFormik } from 'formik'
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import styled from 'styled-components'
 import { object, string } from 'yup'
 
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
@@ -16,7 +15,6 @@ import {
   useUpdateInvoicePaymentStatusMutation,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
-import { theme } from '~/styles'
 
 gql`
   fragment InvoiceForUpdateInvoicePaymentStatus on Invoice {
@@ -120,7 +118,8 @@ export const UpdateInvoicePaymentStatusDialog = forwardRef<UpdateInvoicePaymentS
           </>
         )}
       >
-        <StyledComboBoxField
+        <ComboBoxField
+          className="mb-8"
           name="paymentStatus"
           label={translate('text_63eba8c65a6c8043feee2a0f')}
           data={Object.values(InvoicePaymentStatusTypeEnum).map((status) => ({
@@ -138,7 +137,3 @@ export const UpdateInvoicePaymentStatusDialog = forwardRef<UpdateInvoicePaymentS
 )
 
 UpdateInvoicePaymentStatusDialog.displayName = 'forwardRef'
-
-const StyledComboBoxField = styled(ComboBoxField)`
-  margin-bottom: ${theme.spacing(8)};
-`

src/components/plans/ChargeAccordion.tsx

@@ -854,7 +854,8 @@ export const ChargeAccordion = memo(
                   </Button>
                 ) : (
                   <SpendingMinimumWrapper>
-                    <SpendingMinimumInput
+                    <AmountInput
+                      className="flex-1"
                       id={`spending-minimum-input-${index}`}
                       beforeChangeFormatter={['positiveNumber', 'chargeDecimal']}
                       currency={currency}
@@ -1019,10 +1020,6 @@ const SpendingMinimumWrapper = styled.div`
   align-items: center;
 `
 
-const SpendingMinimumInput = styled(AmountInput)`
-  flex: 1;
-`
-
 const InlineTaxInputWrapper = styled.div`
   display: flex;
   align-items: center;