chore: enforce vscode import preference in settings (#2008)

.vscode/settings.json

@@ -7,5 +7,7 @@
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
     ["tw\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   ],
-  "eslint.useFlatConfig": true
+  "eslint.useFlatConfig": true,
+  "javascript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.preferences.importModuleSpecifier": "non-relative",
 }

src/App.tsx

@@ -9,11 +9,10 @@ import { ErrorBoundary } from '~/components/ErrorBoundary'
 import { RouteWrapper } from '~/components/RouteWrapper'
 import { UserIdentifier } from '~/components/UserIdentifier'
 import { envGlobalVar, initializeApolloClient, initializeTranslations } from '~/core/apolloClient'
+import { AppEnvEnum } from '~/core/constants/globalTypes'
 import { initializeYup } from '~/formValidation/initializeYup'
 import { theme } from '~/styles'
 
-import { AppEnvEnum } from './core/constants/globalTypes'
-
 const App = () => {
   const [client, setClient] = useState<ApolloClient<NormalizedCacheObject> | null>(null)
   const { appEnv } = envGlobalVar()

src/components/GenericPlaceholder.tsx

@@ -1,10 +1,8 @@
 import { ReactNode } from 'react'
 
+import { Button, ButtonVariant, Typography } from '~/components/designSystem'
 import { tw } from '~/styles/utils'
 
-import { Button, ButtonVariant } from './designSystem/Button'
-import { Typography } from './designSystem/Typography'
-
 export interface GenericPlaceholderProps {
   className?: string
   title?: string

src/components/__tests__/WarningDialog.test.tsx

@@ -1,10 +1,9 @@
 import { act, cleanup, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
+import { WarningDialog } from '~/components/WarningDialog'
 import { render } from '~/test-utils'
 
-import { WarningDialog } from '../WarningDialog'
-
 const onContinueMock = jest.fn()
 
 async function prepare() {

src/components/auth/GoogleAuthButton.tsx

@@ -3,14 +3,13 @@ import { Stack } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
+import { Alert, Button, Typography } from '~/components/designSystem'
 import { hasDefinedGQLError } from '~/core/apolloClient'
 import { DOCUMENTATION_ENV_VARS } from '~/core/constants/externalUrls'
 import { addValuesToUrlState } from '~/core/utils/urlUtils'
 import { LagoApiError, useGetGoogleAuthUrlLazyQuery } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 
-import { Alert, Button, Typography } from '../designSystem'
-
 export type GoogleAuthModeEnum = 'login' | 'signup' | 'invite'
 
 const getErrorKey = (errorCode: string): string => {

src/components/coupons/__tests__/CouponCaption.test.tsx

@@ -1,10 +1,9 @@
 import { act, cleanup, screen } from '@testing-library/react'
 
+import { CouponCaption, CouponMixedType } from '~/components/coupons/CouponCaption'
 import { CouponFrequency, CurrencyEnum } from '~/generated/graphql'
 import { render } from '~/test-utils'
 
-import { CouponCaption, CouponMixedType } from '../CouponCaption'
-
 const amountCurrency = CurrencyEnum.Usd
 
 const couponsDataSet = [

src/components/creditNote/CreditNotesTable.tsx

@@ -4,7 +4,21 @@ import { generatePath } from 'react-router-dom'
 import styled, { css } from 'styled-components'
 
 import CreditNoteBadge from '~/components/creditNote/CreditNoteBadge'
+import {
+  VoidCreditNoteDialog,
+  VoidCreditNoteDialogRef,
+} from '~/components/customers/creditNotes/VoidCreditNoteDialog'
+import {
+  ActionItem,
+  InfiniteScroll,
+  Skeleton,
+  Table,
+  TableColumn,
+  TableContainerSize,
+  Typography,
+} from '~/components/designSystem'
 import { AvailableFiltersEnum, Filters } from '~/components/designSystem/Filters'
+import { GenericPlaceholder } from '~/components/GenericPlaceholder'
 import { addToast } from '~/core/apolloClient'
 import { intlFormatNumber } from '~/core/formats/intlFormatNumber'
 import { CUSTOMER_INVOICE_CREDIT_NOTE_DETAILS_ROUTE } from '~/core/router'
@@ -27,21 +41,6 @@ import EmptyImage from '~/public/images/maneki/empty.svg'
 import { BaseListItem, theme } from '~/styles'
 import { tw } from '~/styles/utils'
 
-import {
-  VoidCreditNoteDialog,
-  VoidCreditNoteDialogRef,
-} from '../customers/creditNotes/VoidCreditNoteDialog'
-import {
-  ActionItem,
-  InfiniteScroll,
-  Skeleton,
-  Table,
-  TableColumn,
-  TableContainerSize,
-  Typography,
-} from '../designSystem'
-import { GenericPlaceholder } from '../GenericPlaceholder'
-
 gql`
   fragment CreditNoteTableItem on CreditNote {
     id

src/components/creditNote/__tests__/utils.test.ts

@@ -1,16 +1,14 @@
-import { CurrencyEnum } from '~/generated/graphql'
-
 import {
   addOnFeeMock,
   addonMockFormatedForEstimate,
   feeMockFormatedForEstimate,
   feesMock,
-} from './fixtures'
-
+} from '~/components/creditNote/__tests__/fixtures'
 import {
   creditNoteFormCalculationCalculation,
   CreditNoteFormCalculationCalculationProps,
-} from '../utils'
+} from '~/components/creditNote/utils'
+import { CurrencyEnum } from '~/generated/graphql'
 
 const prepare = ({
   addonFees = undefined,

src/components/customers/CustomerCreditNotesList.tsx

@@ -4,6 +4,7 @@ import CreditNotesTable from '~/components/creditNote/CreditNotesTable'
 import { Avatar, Icon, Typography } from '~/components/designSystem'
 import { GenericPlaceholder } from '~/components/GenericPlaceholder'
 import { PageSectionTitle } from '~/components/layouts/Section'
+import { SearchInput } from '~/components/SearchInput'
 import { intlFormatNumber } from '~/core/formats/intlFormatNumber'
 import { deserializeAmount } from '~/core/serializers/serializeAmount'
 import {
@@ -16,8 +17,6 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useDebouncedSearch } from '~/hooks/useDebouncedSearch'
 import ErrorImage from '~/public/images/maneki/error.svg'
 
-import { SearchInput } from '../SearchInput'
-
 gql`
   query getCustomerCreditNotes($customerId: ID!, $page: Int, $limit: Int, $searchTerm: String) {
     creditNotes(customerId: $customerId, page: $page, limit: $limit, searchTerm: $searchTerm) {

src/components/customers/CustomerInvoicesList.tsx

@@ -2,7 +2,18 @@ import { FetchMoreQueryOptions, gql } from '@apollo/client'
 import { FC, useRef } from 'react'
 import { generatePath, useNavigate } from 'react-router-dom'
 
+import { createCreditNoteForInvoiceButtonProps } from '~/components/creditNote/utils'
 import { Chip, InfiniteScroll, Status, Table, Tooltip, Typography } from '~/components/designSystem'
+import {
+  UpdateInvoicePaymentStatusDialog,
+  UpdateInvoicePaymentStatusDialogRef,
+} from '~/components/invoices/EditInvoicePaymentStatusDialog'
+import {
+  FinalizeInvoiceDialog,
+  FinalizeInvoiceDialogRef,
+} from '~/components/invoices/FinalizeInvoiceDialog'
+import { VoidInvoiceDialog, VoidInvoiceDialogRef } from '~/components/invoices/VoidInvoiceDialog'
+import { PremiumWarningDialog, PremiumWarningDialogRef } from '~/components/PremiumWarningDialog'
 import { addToast, hasDefinedGQLError } from '~/core/apolloClient'
 import { CustomerInvoiceDetailsTabsOptionsEnum } from '~/core/constants/NavigationEnum'
 import { invoiceStatusMapping, paymentStatusMapping } from '~/core/constants/statusInvoiceMapping'
@@ -32,15 +43,6 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useCurrentUser } from '~/hooks/useCurrentUser'
 import { usePermissions } from '~/hooks/usePermissions'
 
-import { createCreditNoteForInvoiceButtonProps } from '../creditNote/utils'
-import {
-  UpdateInvoicePaymentStatusDialog,
-  UpdateInvoicePaymentStatusDialogRef,
-} from '../invoices/EditInvoicePaymentStatusDialog'
-import { FinalizeInvoiceDialog, FinalizeInvoiceDialogRef } from '../invoices/FinalizeInvoiceDialog'
-import { VoidInvoiceDialog, VoidInvoiceDialogRef } from '../invoices/VoidInvoiceDialog'
-import { PremiumWarningDialog, PremiumWarningDialogRef } from '../PremiumWarningDialog'
-
 gql`
   fragment InvoiceListItem on Invoice {
     id

src/components/customers/CustomerInvoicesTab.tsx

@@ -4,6 +4,7 @@ import { generatePath } from 'react-router-dom'
 import { CustomerOverview } from '~/components/customers/overview/CustomerOverview'
 import { ButtonLink, Skeleton, Typography } from '~/components/designSystem'
 import { PageSectionTitle } from '~/components/layouts/Section'
+import { SearchInput } from '~/components/SearchInput'
 import { CUSTOMER_DRAFT_INVOICES_LIST_ROUTE } from '~/core/router'
 import {
   CurrencyEnum,
@@ -18,8 +19,6 @@ import { useDebouncedSearch } from '~/hooks/useDebouncedSearch'
 
 import { CustomerInvoicesList } from './CustomerInvoicesList'
 
-import { SearchInput } from '../SearchInput'
-
 const DRAFT_INVOICES_ITEMS_COUNT = 4
 
 gql`

src/components/customers/CustomerSettings.tsx

@@ -1,10 +1,42 @@
 import { gql } from '@apollo/client'
 import { useRef } from 'react'
 
+import {
+  DeleteCustomerDocumentLocaleDialog,
+  DeleteCustomerDocumentLocaleDialogRef,
+} from '~/components/customers/DeleteCustomerDocumentLocaleDialog'
 import {
   DeleteCustomerFinalizeZeroAmountInvoiceDialog,
   DeleteCustomerFinalizeZeroAmountInvoiceDialogRef,
 } from '~/components/customers/DeleteCustomerFinalizeZeroAmountInvoiceDialog'
+import {
+  DeleteCustomerGracePeriodeDialog,
+  DeleteCustomerGracePeriodeDialogRef,
+} from '~/components/customers/DeleteCustomerGracePeriodeDialog'
+import {
+  DeleteOrganizationNetPaymentTermDialog,
+  DeleteOrganizationNetPaymentTermDialogRef,
+} from '~/components/customers/DeleteCustomerNetPaymentTermDialog'
+import {
+  DeleteCustomerVatRateDialog,
+  DeleteCustomerVatRateDialogRef,
+} from '~/components/customers/DeleteCustomerVatRateDialog'
+import {
+  EditCustomerDocumentLocaleDialog,
+  EditCustomerDocumentLocaleDialogRef,
+} from '~/components/customers/EditCustomerDocumentLocaleDialog'
+import {
+  EditCustomerDunningCampaignDialog,
+  EditCustomerDunningCampaignDialogRef,
+} from '~/components/customers/EditCustomerDunningCampaignDialog'
+import {
+  EditCustomerInvoiceCustomSectionsDialog,
+  EditCustomerInvoiceCustomSectionsDialogRef,
+} from '~/components/customers/EditCustomerInvoiceCustomSectionsDialog'
+import {
+  EditCustomerInvoiceGracePeriodDialog,
+  EditCustomerInvoiceGracePeriodDialogRef,
+} from '~/components/customers/EditCustomerInvoiceGracePeriodDialog'
 import {
   EditCustomerVatRateDialog,
   EditCustomerVatRateDialogRef,
@@ -21,6 +53,13 @@ import {
   Typography,
 } from '~/components/designSystem'
 import { GenericPlaceholder } from '~/components/GenericPlaceholder'
+import {
+  SettingsListItem,
+  SettingsListItemHeader,
+  SettingsListItemLoadingSkeleton,
+  SettingsListWrapper,
+  SettingsPaddedContainer,
+} from '~/components/layouts/Settings'
 import { PremiumWarningDialog, PremiumWarningDialogRef } from '~/components/PremiumWarningDialog'
 import {
   EditFinalizeZeroAmountInvoiceDialog,
@@ -54,47 +93,6 @@ import ErrorImage from '~/public/images/maneki/error.svg'
 import { MenuPopper } from '~/styles'
 import { tw } from '~/styles/utils'
 
-import {
-  DeleteCustomerDocumentLocaleDialog,
-  DeleteCustomerDocumentLocaleDialogRef,
-} from './DeleteCustomerDocumentLocaleDialog'
-import {
-  DeleteCustomerGracePeriodeDialog,
-  DeleteCustomerGracePeriodeDialogRef,
-} from './DeleteCustomerGracePeriodeDialog'
-import {
-  DeleteOrganizationNetPaymentTermDialog,
-  DeleteOrganizationNetPaymentTermDialogRef,
-} from './DeleteCustomerNetPaymentTermDialog'
-import {
-  DeleteCustomerVatRateDialog,
-  DeleteCustomerVatRateDialogRef,
-} from './DeleteCustomerVatRateDialog'
-import {
-  EditCustomerDocumentLocaleDialog,
-  EditCustomerDocumentLocaleDialogRef,
-} from './EditCustomerDocumentLocaleDialog'
-import {
-  EditCustomerDunningCampaignDialog,
-  EditCustomerDunningCampaignDialogRef,
-} from './EditCustomerDunningCampaignDialog'
-import {
-  EditCustomerInvoiceCustomSectionsDialog,
-  EditCustomerInvoiceCustomSectionsDialogRef,
-} from './EditCustomerInvoiceCustomSectionsDialog'
-import {
-  EditCustomerInvoiceGracePeriodDialog,
-  EditCustomerInvoiceGracePeriodDialogRef,
-} from './EditCustomerInvoiceGracePeriodDialog'
-
-import {
-  SettingsListItem,
-  SettingsListItemHeader,
-  SettingsListItemLoadingSkeleton,
-  SettingsListWrapper,
-  SettingsPaddedContainer,
-} from '../layouts/Settings'
-
 gql`
   fragment CustomerAppliedTaxRatesForSettings on Customer {
     id

src/components/customers/DeleteCustomerVatRateDialog.tsx

@@ -2,6 +2,7 @@ import { gql } from '@apollo/client'
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 
 import { DialogRef } from '~/components/designSystem'
+import { WarningDialog } from '~/components/WarningDialog'
 import { addToast } from '~/core/apolloClient'
 import {
   CustomerAppliedTaxRatesForSettingsFragmentDoc,
@@ -11,8 +12,6 @@ import {
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 
-import { WarningDialog } from '../WarningDialog'
-
 gql`
   fragment CustomerForDeleteVatRateDialog on Customer {
     id

src/components/customers/EditCustomerDunningCampaignDialog.tsx

@@ -4,6 +4,7 @@ import { forwardRef } from 'react'
 import { mixed, object, string } from 'yup'
 
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
+import { ComboBoxField, RadioField } from '~/components/form'
 import { addToast } from '~/core/apolloClient'
 import {
   EditCustomerDunningCampaignFragment,
@@ -13,8 +14,6 @@ import {
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 
-import { ComboBoxField, RadioField } from '../form'
-
 gql`
   fragment EditCustomerDunningCampaign on Customer {
     id

src/components/customers/EditCustomerInvoiceCustomSectionsDialog.tsx

@@ -4,6 +4,7 @@ import { forwardRef } from 'react'
 import { array, mixed, object, string } from 'yup'
 
 import { Button, Dialog, DialogRef } from '~/components/designSystem'
+import { MultipleComboBox, RadioField } from '~/components/form'
 import { addToast } from '~/core/apolloClient'
 import {
   CustomerAppliedInvoiceCustomSectionsFragmentDoc,
@@ -14,8 +15,6 @@ import {
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 
-import { MultipleComboBox, RadioField } from '../form'
-
 gql`
   fragment EditCustomerInvoiceCustomSection on Customer {
     id

src/components/customers/__tests__/EditCustomerVatRateDialog.test.tsx

@@ -1,6 +1,7 @@
 import { act, cleanup, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
+import { EditCustomerVatRateDialog } from '~/components/customers/EditCustomerVatRateDialog'
 import {
   MUI_INPUT_BASE_ROOT_CLASSNAME,
   SEARCH_TAX_INPUT_FOR_CUSTOMER_CLASSNAME,
@@ -9,8 +10,6 @@ import { CREATE_TAX_ROUTE } from '~/core/router'
 import { GetTaxRatesForEditCustomerDocument } from '~/generated/graphql'
 import { render, TestMocksType } from '~/test-utils'
 
-import { EditCustomerVatRateDialog } from '../EditCustomerVatRateDialog'
-
 const membershipWithPermissions = {
   id: '2',
   organization: {