Merge pull request #1079 from InseeFr/feat/typescript-path

Create a typescript path for components library

package.json

@@ -18,8 +18,11 @@
 		"start": "npm run pre-script vite",
 		"build": "npm run pre-script cross-env VITE_INSEE=true vite build && npm run create-zip",
 		"create-zip": "cd build && bestzip build.zip *",
-		"pre-push": "npm run lint && npm run test:coverage",
-		"prepare": "husky"
+		"pre-push": "npm run format:check && npm run lint && npm run test:coverage",
+		"prepare": "husky",
+		"_format": "prettier 'src/**/*.{ts,tsx,js,jsx,json,md}'",
+		"format": "npm run _format -- --write",
+		"format:check": "npm run _format -- --list-different"
 	},
 	"browserslist": [
 		">0.2%",
@@ -32,8 +35,6 @@
 		"react-dom": "18.3.1",
 		"react-router-dom": "5.2.0",
 		"@babel/traverse": "7.24.1",
-		"immer": "9.0.21",
-		"ejs": "3.1.9",
 		"loader-utils": "2.0.4",
 		"shell-quote": "1.8.1",
 		"typescript": "5.5.3"
@@ -48,6 +49,7 @@
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/react": "^16.0.1",
 		"@testing-library/user-event": "^14.5.2",
+		"@trivago/prettier-plugin-sort-imports": "^4.3.0",
 		"@types/dompurify": "^3.0.5",
 		"@types/file-saver": "^2.0.7",
 		"@types/node": "^22.9.0",
@@ -71,6 +73,7 @@
 		"typescript-eslint": "^8.13.0",
 		"vite": "^5.4.11",
 		"vite-envs": "^4.4.5",
+		"vite-tsconfig-paths": "^5.1.2",
 		"vitest": "^2.1.5"
 	},
 	"dependencies": {
@@ -103,8 +106,18 @@
 	},
 	"prettier": {
 		"bracketSpacing": true,
+		"importOrderSeparation": true,
+		"importOrder": [
+			"^@components/(.*)$",
+			"^@sdk/(.*)$",
+			"^@utils/(.*)$",
+			"^[./]"
+		],
 		"semi": true,
 		"singleQuote": true,
-		"useTabs": true
+		"useTabs": true,
+		"plugins": [
+			"@trivago/prettier-plugin-sort-imports"
+		]
 	}
 }

src/dev-tools/dev-tools.jsx

@@ -1,4 +1,7 @@
+import { createRoot } from 'react-dom/client';
 import { Provider, useDispatch, useSelector } from 'react-redux';
+import Select from 'react-select';
+
 import {
 	ADMIN,
 	COLLECTIONS_CREATOR,
@@ -11,9 +14,7 @@ import {
 	CODELIST_CONTRIBUTOR,
 	STRUCTURE_CONTRIBUTOR,
 } from '../packages/auth/roles';
-import Select from 'react-select';
 import D from '../packages/deprecated-locales';
-import { createRoot } from 'react-dom/client';
 import { CHECK_AUTH } from '../packages/redux/users';
 
 const options = [

src/index.tsx

@@ -1,17 +1,20 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
+
+import { ApplicationTitle } from '@components/application-title';
+
+import { GeneralApi } from '@sdk/general-api';
+
+import loadDevTools from './dev-tools/load';
+import { AppContextProvider } from './packages/application/app-context';
 import Root from './packages/application/router';
-import configureStore from './packages/redux/configure-store';
+import { OidcProvider } from './packages/auth/create-oidc';
+import BackToTop from './packages/components/back-to-top';
 import D from './packages/deprecated-locales';
-import { ApplicationTitle } from './packages/components';
-import { AppContextProvider } from './packages/application/app-context';
-import { createRoot } from 'react-dom/client';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import loadDevTools from './dev-tools/load';
+import configureStore from './packages/redux/configure-store';
 import './packages/styles/main.scss';
-import { GeneralApi } from './packages/sdk/general-api';
 import { getLang } from './packages/utils/dictionnary';
-import BackToTop from './packages/components/back-to-top';
-import { OidcProvider } from './packages/auth/create-oidc';
 
 const queryClient = new QueryClient({
 	defaultOptions: {

src/packages/application/app-context.spec.tsx

@@ -1,6 +1,6 @@
+import { render, screen, fireEvent } from '@testing-library/react';
 import { vi } from 'vitest';
 
-import { render, screen, fireEvent } from '@testing-library/react';
 import {
 	AppContextProvider,
 	AppProperties,

src/packages/application/app.tsx

@@ -1,10 +1,12 @@
+import 'primereact/resources/themes/lara-light-blue/theme.css';
 import { Link } from 'react-router-dom';
+
+import { useTitle } from '@utils/hooks/useTitle';
+
 import D from '../deprecated-locales';
-import 'primereact/resources/themes/lara-light-blue/theme.css';
 import '../styles/bootstrap.scss';
-import './app.scss';
-import { useTitle } from '../utils/hooks/useTitle';
 import { useAppContext } from './app-context';
+import './app.scss';
 
 const App = () => {
 	useTitle();

src/packages/application/router/index.spec.tsx

@@ -2,6 +2,7 @@ import { fireEvent, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Mock, vi } from 'vitest';
+
 import { RBACLink } from '.';
 import { useOidc } from '../../auth/create-oidc';
 import D from '../../i18n';

src/packages/application/router/index.tsx

@@ -1,13 +1,14 @@
-import { useLocation } from 'react-router-dom';
-import Routes from './routes';
 import { PropsWithChildren } from 'react';
 import 'react-app-polyfill/stable';
+import { useLocation } from 'react-router-dom';
+
 import bauhausLogo from '../../../img/logo_noir.svg';
 import Auth from '../../auth/components/auth';
+import { useOidc } from '../../auth/create-oidc';
 import { ADMIN } from '../../auth/roles';
 import D from '../../i18n';
 import { useAppContext } from '../app-context';
-import { useOidc } from '../../auth/create-oidc';
+import Routes from './routes';
 
 export const RBACLink = ({ children }: PropsWithChildren<unknown>) => {
 	const { isUserLoggedIn, logout } = useOidc();

src/packages/application/router/module-home-page.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
-import { NotFound, UnderMaintenance } from '../../components';
+
+import { NotFound, UnderMaintenance } from '@components/not-found';
 
 type ModuleHomePage = {
 	pageName: string;

src/packages/application/router/routes.tsx

@@ -6,10 +6,13 @@ import {
 	RouterProvider,
 } from 'react-router-dom';
 
-import auth from '../../auth/hoc';
+import { Loading } from '@components/loading';
+import { NotFound, UnderMaintenance } from '@components/not-found';
 
 import { RBACLink } from '.';
-import { Loading, NotFound, UnderMaintenance } from '../../components';
+import { useOidc } from '../../auth/create-oidc';
+import auth from '../../auth/hoc';
+import D from '../../i18n';
 import { routes as ClassificationsRoutes } from '../../modules-classifications/routes/index';
 import { routes as CodelistsRoutes } from '../../modules-codelists/routes/index';
 import { routes as ConceptsRoutes } from '../../modules-concepts/routes/index';
@@ -18,8 +21,6 @@ import { routes as OperationsRoutes } from '../../modules-operations/routes/inde
 import { routes as StructuresRoutes } from '../../modules-structures/routes/index';
 import App from '../app';
 import { useAppContext } from '../app-context';
-import { useOidc } from '../../auth/create-oidc';
-import D from '../../i18n';
 import './routes.scss';
 
 const HomePage = () => {

src/packages/auth/components/auth.spec.tsx

@@ -1,8 +1,9 @@
 import { render } from '@testing-library/react';
-import { AuthDumb } from './auth';
-import configureStore from '../../redux/configure-store';
 import { Provider } from 'react-redux';
 
+import configureStore from '../../redux/configure-store';
+import { AuthDumb } from './auth';
+
 describe('AuthDumb', () => {
 	it('should return the fallback if the user is not authorized', () => {
 		const store = configureStore({

src/packages/auth/components/auth.ts

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { useSelector } from 'react-redux';
+
 import { ReduxModel } from '../../redux/model';
 import { getPermission } from '../../redux/selectors';
 

src/packages/auth/hoc.tsx

@@ -1,12 +1,13 @@
 import { connect } from 'react-redux';
+
+import { ReduxModel } from '../redux/model';
+import { getPermission } from '../redux/selectors';
+import { NO_AUTH, OPEN_ID_CONNECT_AUTH } from './constants';
+import { useOidc } from './create-oidc';
 import LoginNoAuth from './no-auth/login';
 import LoggedInWrapper, {
 	LoginComponent,
 } from './open-id-connect-auth/use-oidc';
-import { NO_AUTH, OPEN_ID_CONNECT_AUTH } from './constants';
-import { getPermission } from '../redux/selectors';
-import { ReduxModel } from '../redux/model';
-import { useOidc } from './create-oidc';
 
 const auth = (WrappedComponent: () => JSX.Element) => {
 	const AuthComponent = ({

src/packages/auth/no-auth/login.tsx

@@ -1,6 +1,9 @@
 import { useEffect } from 'react';
 import { connect } from 'react-redux';
-import { Loading } from '../../components';
+
+import { Loading } from '@components/loading';
+
+import { checkAuth } from '../../redux/users';
 import {
 	ADMIN,
 	CODELIST_CONTRIBUTOR,
@@ -9,7 +12,6 @@ import {
 	SERIES_CONTRIBUTOR,
 	STRUCTURE_CONTRIBUTOR,
 } from '../roles';
-import { checkAuth } from '../../redux/users';
 
 type LoginNoAuthTypes = {
 	checkAuth: (option: { stamp: string; roles: string[] }) => void;

src/packages/auth/open-id-connect-auth/use-oidc.tsx

@@ -1,8 +1,10 @@
+import { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
+
+import { UsersApi } from '@sdk/users-api';
+
 import { saveUserProps } from '../../redux/users';
 import { useOidc } from '../create-oidc';
-import { useEffect, useState } from 'react';
-import { UsersApi } from '../../sdk/users-api';
 
 type OidcWrapperTypes = {
 	WrappedComponent: any;

src/packages/components/action-toolbar/index.tsx

@@ -1,6 +1,7 @@
-import './index.scss';
 import { PropsWithChildren } from 'react';
 
+import './index.scss';
+
 export const ActionToolbar = ({
 	children,
 }: Readonly<PropsWithChildren<unknown>>) => (

src/packages/components/advanced-search/controls.spec.tsx

@@ -1,6 +1,7 @@
-import { AdvancedSearchControls } from './controls';
 import { fireEvent, render, screen } from '@testing-library/react';
 
+import { AdvancedSearchControls } from './controls';
+
 describe('concepts-advanced-search-controls', () => {
 	const mockOnClickReturn = vi.fn();
 	const mockInitializeState = vi.fn();

src/packages/components/advanced-search/home.tsx

@@ -1,7 +1,10 @@
 import { PropsWithChildren, useState } from 'react';
-import { PageTitle, Pagination } from '../../components';
-import { AdvancedSearchControls } from './controls';
+
+import { PageTitle } from '@components/page-title';
+import { Pagination } from '@components/pagination';
+
 import { NumberResults } from '../number-results';
+import { AdvancedSearchControls } from './controls';
 
 type AdvancedSearchListTypes = {
 	title: string;

src/packages/components/application-title/index.tsx

@@ -1,6 +1,7 @@
+import { createAllDictionary } from '@utils/dictionnary';
+
 import bauhausLogo from '../../../img/logo.svg';
 import './index.scss';
-import { createAllDictionary } from '../../utils/dictionnary';
 
 const { D } = createAllDictionary({
 	welcome: {

src/packages/components/back-to-top/index.tsx

@@ -1,6 +1,8 @@
 import { useCallback } from 'react';
+
+import { createAllDictionary } from '@utils/dictionnary';
+
 import './index.scss';
-import { createAllDictionary } from '../../utils/dictionnary';
 
 const className = 'sticky-top';
 

src/packages/components/buttons/add.tsx

@@ -1,5 +1,7 @@
 import { ComponentProps } from 'react';
-import { createAllDictionary } from '../../utils/dictionnary';
+
+import { createAllDictionary } from '@utils/dictionnary';
+
 import { AddLogo } from '../logo/logo-add';
 
 const { D } = createAllDictionary({

src/packages/components/buttons/button.tsx

@@ -1,6 +1,7 @@
+import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
+
 import { Link } from '../link';
 import './button.scss';
-import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
 
 const DEFAULT_CLASSES: string[] = [];
 

src/packages/components/buttons/buttons-with-icons.tsx

@@ -1,8 +1,10 @@
-import { Button } from './button';
-import { createAllDictionary } from '../../utils/dictionnary';
-import { useGoBack } from '../../utils/hooks/useGoBack';
 import { ComponentProps } from 'react';
 
+import { createAllDictionary } from '@utils/dictionnary';
+import { useGoBack } from '@utils/hooks/useGoBack';
+
+import { Button } from './button';
+
 const { D } = createAllDictionary({
 	btnReturn: {
 		fr: 'Retour',

src/packages/components/buttons/see.spec.tsx

@@ -1,5 +1,6 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import { SeeButton } from './see'; // Chemin d'accès au fichier du composant
+
+import { SeeButton } from './see';
 
 describe('SeeButton', () => {
 	it('renders the button with the correct attributes and icon', () => {

src/packages/components/check-second-lang/index.tsx

@@ -1,6 +1,7 @@
-import { useSecondLang } from '../../utils/hooks/second-lang';
-import './index.scss';
+import { useSecondLang } from '@utils/hooks/second-lang';
+
 import { createAllDictionary } from '../../utils/dictionnary';
+import './index.scss';
 
 const { D } = createAllDictionary({
 	displayLg2: {

src/packages/components/code-display/code-display.spec.tsx

@@ -1,6 +1,7 @@
 import { render } from '@testing-library/react';
-import { CodeDisplay } from './';
+
 import { Code, CodesList } from '../../model/CodesList';
+import { CodeDisplay } from './';
 
 describe('CodeDisplay Component', () => {
 	it('renders the correct label when a matching code is found', () => {

src/packages/components/confirmation-delete/index.tsx

@@ -1,4 +1,5 @@
 import Modal from 'react-modal';
+
 import { createAllDictionary } from '../../utils/dictionnary';
 import { ActionToolbar } from '../action-toolbar';
 import { Button } from '../buttons/button';

src/packages/components/contributors/contributors.tsx

@@ -1,8 +1,9 @@
-import D, { D1 } from '../i18n';
-import { convertToArrayIfDefined } from '../../utils/array-utils';
+import { convertToArrayIfDefined } from '@utils/array-utils';
+
 import { Options } from '../../model/SelectOption';
-import { Select } from '../select-rmes';
+import D, { D1 } from '../i18n';
 import LabelRequired from '../label-required';
+import { Select } from '../select-rmes';
 
 export const ContributorsVisualisation = ({
 	contributors,

src/packages/components/creation-update-items/index.tsx

@@ -1,5 +1,5 @@
-import { createAllDictionary } from '../../utils/dictionnary';
-import { stringToDate } from '../../utils/date-utils';
+import { stringToDate } from '@utils/date-utils';
+import { createAllDictionary } from '@utils/dictionnary';
 
 const { D } = createAllDictionary({
 	createdDateTitle: {