refactor: new prettier import config

.prettierrc

@@ -1,5 +1,8 @@
 {
   "semi": false,
   "singleQuote": true,
-  "plugins": ["prettier-plugin-organize-imports"]
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": ["^react$", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }

__mocks__/i18nifty.js

@@ -0,0 +1,26 @@
+const useMock = [(k) => k, { changeLanguage: () => new Promise(() => {}) }]
+useMock.t = (k, opts) => {
+  if (!opts) {
+    return k
+  }
+  return `${k} ${JSON.stringify(opts)}`
+}
+useMock.i18n = { changeLanguage: () => new Promise(() => {}) }
+
+function createI18nApi() {
+  return function () {
+    const i18nApi = {
+      useTranslation: () => useMock,
+    }
+
+    return i18nApi
+  }
+}
+
+function declareComponentKeys() {
+  return function () {
+    return { i18n: () => {} }
+  }
+}
+
+export { createI18nApi, declareComponentKeys }

package.json

@@ -48,6 +48,7 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/he": "^1.2.3",
     "@types/node": "^22.7.3",
     "@types/react": "^18.3.9",
@@ -64,7 +65,6 @@
     "lint-staged": "^15.2.10",
     "orval": "^7.0.1",
     "prettier": "^3.3.3",
-    "prettier-plugin-organize-imports": "^4.0.0",
     "tsx": "^4.17.0",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.2.0",

src/App.tsx

@@ -1,16 +1,17 @@
-import { TelemetryProvider } from '@/contexts/TelemetryContext'
-import { OidcProvider } from '@/oidc'
-import { routeTree } from '@/router/router'
 import { MuiDsfrThemeProvider } from '@codegouvfr/react-dsfr/mui'
 import { startReactDsfr } from '@codegouvfr/react-dsfr/spa'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import {
   Link,
+  type LinkProps,
   RouterProvider,
   createRouter,
-  type LinkProps,
 } from '@tanstack/react-router'
 
+import { TelemetryProvider } from '@/contexts/TelemetryContext'
+import { OidcProvider } from '@/oidc'
+import { routeTree } from '@/router/router'
+
 startReactDsfr({
   defaultColorScheme: 'system',
   Link,

src/api/01-integrations.ts

@@ -11,6 +11,7 @@ import type {
   UseMutationResult,
 } from '@tanstack/react-query'
 import { useMutation } from '@tanstack/react-query'
+
 import type {
   IntegrateContextBody,
   IntegrateXmlContextBody,

src/api/02-campaigns.ts

@@ -18,6 +18,7 @@ import type {
   UseQueryResult,
 } from '@tanstack/react-query'
 import { useMutation, useQuery } from '@tanstack/react-query'
+
 import type {
   CampaignCreation,
   CampaignCreationV2,

src/api/03-questionnaires.ts

@@ -18,6 +18,7 @@ import type {
   UseQueryResult,
 } from '@tanstack/react-query'
 import { useMutation, useQuery } from '@tanstack/react-query'
+
 import type {
   GetQuestionnaireData200,
   QuestionnaireModelCreation,

src/api/04-nomenclatures.ts

@@ -18,6 +18,7 @@ import type {
   UseQueryResult,
 } from '@tanstack/react-query'
 import { useMutation, useQuery } from '@tanstack/react-query'
+
 import type { NomenclatureCreation } from '../models/api'
 import type { SchemaNomenclature } from '../models/api/schema.nomenclature'
 import { stromaeInstance } from './axiosInstance'

src/api/05-metadata.ts

@@ -15,6 +15,7 @@ import type {
   UseQueryResult,
 } from '@tanstack/react-query'
 import { useQuery } from '@tanstack/react-query'
+
 import type { SchemaMetadata } from '../models/api/schema.metadata'
 import { stromaeInstance } from './axiosInstance'
 

src/api/06-survey-units.ts

@@ -18,6 +18,7 @@ import type {
   UseQueryResult,
 } from '@tanstack/react-query'
 import { useMutation, useQuery } from '@tanstack/react-query'
+
 import type {
   GetCommentBySurveyUnit200,
   SetCommentBody,

src/api/07-paradata-events.ts

@@ -11,6 +11,7 @@ import type {
   UseMutationResult,
 } from '@tanstack/react-query'
 import { useMutation } from '@tanstack/react-query'
+
 import type { AddParadataBody } from '../models/api'
 import { stromaeInstance } from './axiosInstance'
 

src/api/08-survey-units-in-temp-zone.ts

@@ -18,6 +18,7 @@ import type {
   UseQueryResult,
 } from '@tanstack/react-query'
 import { useMutation, useQuery } from '@tanstack/react-query'
+
 import type { SurveyUnitTempZone } from '../models/api'
 import type { SchemaSurveyUnitTempZone } from '../models/api/schema.survey-unit-temp-zone'
 import { stromaeInstance } from './axiosInstance'

src/api/09-healthcheck.ts

@@ -15,6 +15,7 @@ import type {
   UseQueryResult,
 } from '@tanstack/react-query'
 import { useQuery } from '@tanstack/react-query'
+
 import { stromaeInstance } from './axiosInstance'
 
 type SecondParameter<T extends (...args: any) => any> = Parameters<T>[1]

src/api/10-create-data-set.ts

@@ -11,6 +11,7 @@ import type {
   UseMutationResult,
 } from '@tanstack/react-query'
 import { useMutation } from '@tanstack/react-query'
+
 import { stromaeInstance } from './axiosInstance'
 
 type SecondParameter<T extends (...args: any) => any> = Parameters<T>[1]

src/api/axiosInstance.ts

@@ -1,6 +1,7 @@
-import { getOidc } from '@/oidc'
 import axios, { type AxiosRequestConfig } from 'axios'
 
+import { getOidc } from '@/oidc'
+
 const axiosInstance = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
 })

src/api/visualizeQueryOptions.ts

@@ -1,12 +1,13 @@
+import type { LunaticSource } from '@inseefr/lunatic'
+import { queryOptions } from '@tanstack/react-query'
+import axios, { type AxiosRequestConfig } from 'axios'
+import { ZodError } from 'zod'
+
 import { ZodErrorWithName } from '@/components/error/ZodErrorWithName'
 import type { Nomenclature } from '@/components/orchestrator/utils/lunaticType'
 import type { Metadata } from '@/models/Metadata'
 import type { SurveyUnitData } from '@/models/SurveyUnitData'
 import { surveyUnitMetadataSchema } from '@/models/metadataSchema'
-import type { LunaticSource } from '@inseefr/lunatic'
-import { queryOptions } from '@tanstack/react-query'
-import axios, { type AxiosRequestConfig } from 'axios'
-import { ZodError } from 'zod'
 
 function axiosGet<T>(url: string, options?: AxiosRequestConfig) {
   return axios.get<T>(url, options).then(({ data }) => data)

src/components/Container.tsx

@@ -1,6 +1,7 @@
-import { fr } from '@codegouvfr/react-dsfr'
 import { type PropsWithChildren } from 'react'
 
+import { fr } from '@codegouvfr/react-dsfr'
+
 export function Container(props: PropsWithChildren) {
   const { children } = props
   return (

src/components/Grid.tsx

@@ -1,6 +1,7 @@
-import { fr } from '@codegouvfr/react-dsfr'
 import { type PropsWithChildren } from 'react'
 
+import { fr } from '@codegouvfr/react-dsfr'
+
 export function Grid(props: PropsWithChildren) {
   const { children } = props
   return (

src/components/Toast.tsx

@@ -1,9 +1,11 @@
-import { isMobileScreen } from '@/utils/isMobileScreen'
+import type { ComponentProps, ReactNode } from 'react'
+
 import { fr } from '@codegouvfr/react-dsfr'
 import Alert from '@codegouvfr/react-dsfr/Alert'
-import type { ComponentProps, ReactNode } from 'react'
 import { toast } from 'react-hot-toast'
 
+import { isMobileScreen } from '@/utils/isMobileScreen'
+
 type Params = {
   severity: ComponentProps<typeof Alert>['severity']
   title: NonNullable<ReactNode>

src/components/error/ErrorComponent.tsx

@@ -1,14 +1,14 @@
 import { fr } from '@codegouvfr/react-dsfr'
 import Button from '@codegouvfr/react-dsfr/Button'
 import ArtWorkBackground from '@codegouvfr/react-dsfr/dsfr/artwork/background/ovoid.svg'
+import TechnicalError from '@codegouvfr/react-dsfr/dsfr/artwork/pictograms/system/technical-error.svg'
 import ArtWork from '@codegouvfr/react-dsfr/dsfr/artwork/system.svg'
+import { useNavigate, useSearch } from '@tanstack/react-router'
 
 import { Container } from '@/components/Container'
 import { errorNormalizer } from '@/components/error/errorNormalizer'
 import { useDocumentTitle } from '@/hooks/useDocumentTitle'
 import { declareComponentKeys, useTranslation } from '@/i18n'
-import TechnicalError from '@codegouvfr/react-dsfr/dsfr/artwork/pictograms/system/technical-error.svg'
-import { useNavigate, useSearch } from '@tanstack/react-router'
 
 type Props = {
   error: unknown

src/components/error/errorNormalizer.tsx

@@ -1,8 +1,10 @@
-import { declareComponentKeys, getTranslation } from '@/i18n'
 import type { ReactNode } from '@tanstack/react-router'
 import { AxiosError } from 'axios'
+
+import { declareComponentKeys, getTranslation } from '@/i18n'
+
+import { type ZodErrorName, ZodErrorWithName } from './ZodErrorWithName'
 import { NotFoundError } from './notFoundError'
-import { ZodErrorWithName, type ZodErrorName } from './ZodErrorWithName'
 
 type ErrorNormalized = {
   title: string

src/components/layout/AutoLogoutCountdown.tsx

@@ -1,7 +1,9 @@
+import { useEffect, useState } from 'react'
+
+import { declareComponentKeys } from 'i18nifty'
+
 import { useTranslation } from '@/i18n'
 import { useOidc } from '@/oidc'
-import { declareComponentKeys } from 'i18nifty'
-import { useEffect, useState } from 'react'
 
 export function AutoLogoutCountdown() {
   const { isUserLoggedIn, subscribeToAutoLogoutCountdown } = useOidc()

src/components/layout/Footer.tsx

@@ -1,3 +1,6 @@
+import { fr } from '@codegouvfr/react-dsfr'
+import { Footer as DSFRFooter } from '@codegouvfr/react-dsfr/Footer'
+
 import { MODE_TYPE } from '@/constants/mode'
 import { useMode } from '@/hooks/useMode'
 import {
@@ -9,8 +12,7 @@ import type { Logo } from '@/models/Metadata'
 import { NavigationAssistancePage } from '@/pages/navigationAssistance/NavigationAssistancePage'
 import { SecurityPage } from '@/pages/security/SecurityPage'
 import { useMetadataStore } from '@/stores/useMetadataStore'
-import { fr } from '@codegouvfr/react-dsfr'
-import { Footer as DSFRFooter } from '@codegouvfr/react-dsfr/Footer'
+
 import { Header } from './Header'
 
 const transformLogo = (

src/components/layout/Header.test.tsx

@@ -1,12 +1,14 @@
+import { waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { expect } from 'vitest'
+
 import { MODE_TYPE } from '@/constants/mode'
 import { TELEMETRY_EVENT_TYPE } from '@/constants/telemetry'
 import { TelemetryContext } from '@/contexts/TelemetryContext'
 import { useMode } from '@/hooks/useMode'
 import { OidcProvider } from '@/oidc'
 import { renderWithRouter } from '@/utils/tests'
-import { waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { expect } from 'vitest'
+
 import { Header } from './Header'
 
 vi.mock('@/hooks/useMode')

src/components/layout/Header.tsx

@@ -1,3 +1,7 @@
+import { headerFooterDisplayItem } from '@codegouvfr/react-dsfr/Display'
+import { Header as DsfrHeader } from '@codegouvfr/react-dsfr/Header'
+import { useSearch } from '@tanstack/react-router'
+
 import { MODE_TYPE } from '@/constants/mode'
 import { TELEMETRY_EVENT_EXIT_SOURCE } from '@/constants/telemetry'
 import { useTelemetry } from '@/contexts/TelemetryContext'
@@ -12,9 +16,6 @@ import { useOidc } from '@/oidc'
 import { collectPath } from '@/pages/collect/route'
 import { useMetadataStore } from '@/stores/useMetadataStore'
 import { computeContactSupportEvent, computeExitEvent } from '@/utils/telemetry'
-import { headerFooterDisplayItem } from '@codegouvfr/react-dsfr/Display'
-import { Header as DsfrHeader } from '@codegouvfr/react-dsfr/Header'
-import { useSearch } from '@tanstack/react-router'
 
 export function Header() {
   const { t } = useTranslation({ Header })

src/components/orchestrator/Orchestrator.test.tsx

@@ -1,10 +1,12 @@
+import { act, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { expect } from 'vitest'
+
 import { MODE_TYPE } from '@/constants/mode'
 import { TELEMETRY_EVENT_TYPE } from '@/constants/telemetry'
 import { TelemetryContext } from '@/contexts/TelemetryContext'
 import { renderWithRouter } from '@/utils/tests'
-import { act, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { expect } from 'vitest'
+
 import { Orchestrator } from './Orchestrator'
 
 describe('Orchestrator', () => {

src/components/orchestrator/Orchestrator.tsx

@@ -1,3 +1,16 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import { fr } from '@codegouvfr/react-dsfr'
+import {
+  type LunaticChangesHandler,
+  LunaticComponents,
+  type LunaticData,
+  type LunaticError,
+  type LunaticSource,
+  useLunatic,
+} from '@inseefr/lunatic'
+import { useNavigate } from '@tanstack/react-router'
+
 import { MODE_TYPE } from '@/constants/mode'
 import { PAGE_TYPE } from '@/constants/page'
 import { useTelemetry } from '@/contexts/TelemetryContext'
@@ -13,17 +26,8 @@ import {
   computeInputEvent,
   computeNewPageEvent,
 } from '@/utils/telemetry'
-import { fr } from '@codegouvfr/react-dsfr'
-import {
-  LunaticComponents,
-  useLunatic,
-  type LunaticChangesHandler,
-  type LunaticData,
-  type LunaticError,
-  type LunaticSource,
-} from '@inseefr/lunatic'
-import { useNavigate } from '@tanstack/react-router'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import { SurveyContainer } from './SurveyContainer'
 import { EndPage } from './customPages/EndPage'
 import { ValidationModal } from './customPages/ValidationModal'
 import { ValidationPage } from './customPages/ValidationPage'
@@ -34,7 +38,6 @@ import { useRefSync } from './hooks/useRefSync'
 import { useStromaeNavigation } from './hooks/useStromaeNavigation'
 import { useUpdateEffect } from './hooks/useUpdateEffect'
 import { slotComponents } from './slotComponents'
-import { SurveyContainer } from './SurveyContainer'
 import { computeLunaticComponents } from './utils/components'
 import { isBlockingError } from './utils/controls'
 import { trimCollectedData } from './utils/data'

src/components/orchestrator/SequenceHeader.tsx

@@ -1,6 +1,8 @@
+import { fr } from '@codegouvfr/react-dsfr'
+
 import { useSequenceTitle } from '@/hooks/useDocumentTitle'
 import { declareComponentKeys, useTranslation } from '@/i18n'
-import { fr } from '@codegouvfr/react-dsfr'
+
 import type { LunaticOverview } from './utils/lunaticType'
 
 type SequenceHeaderProps = {

src/components/orchestrator/SurveyContainer.tsx

@@ -1,10 +1,13 @@
+import { type PropsWithChildren, type ReactNode, useState } from 'react'
+
+import { fr } from '@codegouvfr/react-dsfr'
+import Button from '@codegouvfr/react-dsfr/Button'
+
 import { MODE_TYPE } from '@/constants/mode'
 import { PAGE_TYPE } from '@/constants/page'
 import { declareComponentKeys, useTranslation } from '@/i18n'
 import type { InternalPageType } from '@/models/Page'
-import { fr } from '@codegouvfr/react-dsfr'
-import Button from '@codegouvfr/react-dsfr/Button'
-import { useState, type PropsWithChildren, type ReactNode } from 'react'
+
 import type { OrchestratorProps } from './Orchestrator'
 import { SequenceHeader } from './SequenceHeader'
 import type { LunaticOverview } from './utils/lunaticType'