Change alias imports

Merge pull request #3466 from incubateur-ademe/backend-ts-vitest-config

.vscode/settings.json

@@ -1,9 +1,8 @@
 {
-    "editor.codeActionsOnSave": {
-        "source.organizeImports": "explicit"
-    },
-    "[typescript]": {
-        "editor.formatOnSave": true
-    },
-    "typescript.preferences.importModuleSpecifier": "relative",
-}
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit"
+  },
+  "[typescript]": {
+    "editor.formatOnSave": true
+  }
+}

Earthfile

@@ -536,12 +536,12 @@ package-ui-storybook-test:
 
     FROM +front-deps
     RUN pnpm exec playwright install --with-deps chromium
-    RUN pnpm nx build-storybook @tet/ui --quiet
+    RUN pnpm nx build-storybook ui --quiet
     EXPOSE $PORT
 
     RUN pnpx concurrently -k -s first -n "SB,TEST" \
       "pnpx http-server $UI_DIR/storybook-static --port $PORT --silent" \
-      "pnpx wait-on tcp:127.0.0.1:$PORT && pnpm nx test-storybook @tet/ui --url http://127.0.0.1:$PORT" || true
+      "pnpx wait-on tcp:127.0.0.1:$PORT && pnpm nx test-storybook ui --url http://127.0.0.1:$PORT" || true
 
 
 curl-test-build:

README.md

@@ -166,42 +166,32 @@ earthly --push +deploy-test
 
 Aujourd'hui le `business` et le `client` sont déployés chez [Scalingo](https://scalingo.com/), le `data layer` est chez [Supabase](https://supabase.com/) en mode BaaS.
 
-## Workspaces NPM
+## Apps et libs
 
-Les [workspaces NPM](https://docs.npmjs.com/cli/v10/using-npm/workspaces) sont utilisés pour partager du code entre différents modules _front_ du projet (`ui`, `app` et `site`).
+Pour lancer les apps en local :
 
-Tous les modules du projet utilisent l'espace de nommage `@tet` (exemple: `@tet/app` pour l'application).
+```sh
+# Lance toutes les apps en parallèle
+pnpm dev
 
-Les chemins des workspaces sont listés dans la propriétés `workspaces` du fichier `package.json` à la racine du dépôt.
+# Lance les apps nécessaire à l'app principale (app, auth, backend)
+pnpm dev:app
 
-Dans ce contexte les différentes commandes NPM habituelles peuvent être lancées depuis le répertoire racine en précisant avec l'option `-w` (ou `--workspace`) le(s) workspace(s) dans le(s)quel(s) la commande doit s'exécuter.
-
-Exemples :
-
-- Installer les dépendances pour les modules `ui` et `site` : `npm i -w @tet/ui -w @tet/site`
-
-- Ajouter une dépendance externe dans le module `app` : `npm i <nom-module-npm-externe> -w @tet/app`
-
-- Ajouter une dépendance interne dans le module `app` : `npm i @tet/<nom-module-interne> -w @tet/app`
-
-- Lancer le serveur de développement du module `ui` : `npm run dev -w @tet/ui`
-
-Les modules `site` et `app` étant dépendants du module partagé `ui`, des commandes permettant de lancer en parallèle les serveurs de développement sont disponibles à la racine du projet.
-
-- Démarrer les serveurs de dev `ui` et `app` : `npm run dev:app`
-
-- Démarrer les serveurs de dev `ui` et `site` : `npm run dev:site`
-
-- Démarrer les serveurs de dev `ui`, `app` et `site` : `npm run dev`
-
-De la même manière pour faire le build de production du site et de l'app il faut aussi faire le build des modules partagés.
+# Lance uniquement l'app backend
+pnpm dev:backend
+```
 
-- Faire le build de production de `app` : `npm run build:app`
+Se référer au README des différents dossiers pour plus de détails.
 
-- Faire le build de production de `site` : `npm run build:site`
+Pour nos apps :
 
-Enfin pour faire le build depuis Scalingo la variable d'environnement `SCALINGO_BUILD` est attendue pour contrôler le fonctionnement de la commande `npm run build`.
+- `app` dans `./app.territoiresentransitions.react`
+- `backend` dans `./backend`
+- `auth` dans `./packages/auth`
+- `panier` dans `./packages/panier`
+- `site` dans `./packages/site`
 
-- Lorsque la variable est renseignée, les dépendances nécessaires au build sont installées.
+Pour nos libs :
 
-- Lorsque la variable vaut `site`, la commande `build:site` est lancée, et sinon la commande `build:app`.
+- `ui` dans `./packages/ui`
+- `api` dans `./packages/api`

app.territoiresentransitions.react/project.json

@@ -1,10 +1,10 @@
 {
-  "name": "@tet/app",
+  "name": "app",
   "$schema": "../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "app.territoiresentransitions.react",
   "projectType": "application",
   "tags": [],
-  "implicitDependencies": ["@tet/ui", "@tet/api"],
-  "// targets": "to see all targets run: nx show project @tet/app --web",
+  "implicitDependencies": ["ui", "api"],
+  "// targets": "to see all targets run: nx show project app --web",
   "targets": {}
 }

app.territoiresentransitions.react/src/app/Layout/Footer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { FooterTeT } from '@tet/ui';
+import { FooterTeT } from '@/ui';
 
 const Footer = () => {
   return <FooterTeT id="footer" className="mt-8" />;

app.territoiresentransitions.react/src/app/Layout/Header/AccesPanierAction.tsx

@@ -1,11 +1,10 @@
-import { useQuery } from 'react-query';
-import { PanierAPI } from '@tet/api';
-import { Button } from '@tet/ui';
+import { PanierAPI } from '@/api';
+import { makeCollectivitePanierUrl } from '@/app/paths';
+import { Button } from '@/ui';
+import classNames from 'classnames';
 import { supabaseClient } from 'core-logic/api/supabase';
 import { useCollectiviteId } from 'core-logic/hooks/params';
-import { ENV } from 'environmentVariables';
-import classNames from 'classnames';
-import { makeCollectivitePanierUrl } from '@tet/app/paths';
+import { useQuery } from 'react-query';
 
 const panierAPI = new PanierAPI(supabaseClient);
 

app.territoiresentransitions.react/src/app/Layout/Header/AccesRapide.tsx

@@ -1,14 +1,14 @@
-import {signInPath, signUpPath} from 'app/paths';
-import {useFonctionTracker} from 'core-logic/hooks/useFonctionTracker';
+import { Button } from '@/ui';
+import { signInPath, signUpPath } from 'app/paths';
+import { useFonctionTracker } from 'core-logic/hooks/useFonctionTracker';
+import { AccesPanierAction } from './AccesPanierAction';
 import MenuUtilisateur from './MenuUtilisateur';
-import {HeaderPropsWithModalState} from './types';
-import {AccesPanierAction} from './AccesPanierAction';
-import {Button} from '@tet/ui';
+import { HeaderPropsWithModalState } from './types';
 
 /** liens en "accès rapide" */
 export const AccesRapide = (props: HeaderPropsWithModalState) => {
-  const {auth, setModalOpened} = props;
-  const {isConnected, user} = auth;
+  const { auth, setModalOpened } = props;
+  const { isConnected, user } = auth;
 
   return (
     <ul className="fr-btns-group">
@@ -69,7 +69,7 @@ const Aide = () => {
     // utiliser <a target="_blank"> qui empêche de mettre une icône...
     window.open('https://aide.territoiresentransitions.fr/fr/', '_blank');
 
-    await tracker({fonction: 'aide', action: 'clic'});
+    await tracker({ fonction: 'aide', action: 'clic' });
   };
 
   return (

app.territoiresentransitions.react/src/app/Layout/Header/BadgeNiveauAcces.tsx

@@ -1,6 +1,6 @@
-import {Badge} from '@tet/ui';
+import { Badge } from '@/ui';
 import classNames from 'classnames';
-import {TNiveauAcces} from 'types/alias';
+import { TNiveauAcces } from 'types/alias';
 
 type Props = {
   acces: TNiveauAcces | null;
@@ -10,7 +10,7 @@ type Props = {
 
 /** Représente le niveau d'accès à une collectivité par un badge */
 export const BadgeNiveauAcces = (props: Props) => {
-  const {acces, className} = props;
+  const { acces, className } = props;
   const displayedAcces = getLabel(props);
 
   return (
@@ -23,7 +23,7 @@ export const BadgeNiveauAcces = (props: Props) => {
   );
 };
 
-const getLabel = ({acces, isAuditeur}: Props) => {
+const getLabel = ({ acces, isAuditeur }: Props) => {
   if (isAuditeur) {
     return 'audit';
   }

app.territoiresentransitions.react/src/app/Layout/Header/MaintenanceNotice.tsx

@@ -1,5 +1,5 @@
-import {ControlledAlert as Alert} from '@tet/ui';
-import {Maintenance} from '../useMaintenance';
+import { ControlledAlert as Alert } from '@/ui';
+import { Maintenance } from '../useMaintenance';
 
 /**
  * Affiche un bandeau d'information quand une maintenance est prévue ou en cours.
@@ -9,7 +9,7 @@ export const MaintenanceNotice = ({
 }: {
   maintenance: Maintenance | null;
 }) => {
-  const {now, begins_at, ends_at} = maintenance || {};
+  const { now, begins_at, ends_at } = maintenance || {};
   if (!now || !begins_at || !ends_at) return null;
 
   const ongoing = new Date(now) > new Date(begins_at);
@@ -18,7 +18,7 @@ export const MaintenanceNotice = ({
       <Alert
         fullPageWidth
         state="error"
-        title={`Une mise en production est en cours. Merci de ne pas utiliser la plateforme 
+        title={`Une mise en production est en cours. Merci de ne pas utiliser la plateforme
         pour éviter toute perte d'informations.`}
       />
     );
@@ -32,11 +32,11 @@ export const MaintenanceNotice = ({
         formatedBeginsAt === formatedEndsAt
           ? `le ${formatedBeginsAt}`
           : `du ${formatedBeginsAt} au ${formatedEndsAt}`
-      }. 
+      }.
       Le fonctionnement de la plateforme pourra en être altéré sur ce laps de temps.`}
     />
   );
 };
 
 const formatDate = (s: string) =>
-  new Date(s).toLocaleString('fr', {dateStyle: 'short'});
+  new Date(s).toLocaleString('fr', { dateStyle: 'short' });

app.territoiresentransitions.react/src/app/Layout/Header/MenuUtilisateur.tsx

@@ -1,14 +1,14 @@
-import { Button } from '@tet/ui';
+import { Button } from '@/ui';
 import { monComptePath } from 'app/paths';
 import classNames from 'classnames';
 import { TAuthContext, UserData } from 'core-logic/api/auth/AuthProvider';
+import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { forwardRef, Ref } from 'react';
 import { useQueryClient } from 'react-query';
 import DropdownFloater from 'ui/shared/floating-ui/DropdownFloater';
 import './MenuUtilisateur.css';
 import { HeaderPropsWithModalState } from './types';
-import Link from 'next/link';
 
 /**
  * Affiche le menu associé à l'utilisateur courant

app.territoiresentransitions.react/src/app/Layout/Header/SelectCollectivite.tsx

@@ -1,9 +1,9 @@
-import classNames from 'classnames';
+import { Tooltip } from '@/ui';
 import { makeCollectiviteAccueilUrl } from 'app/paths';
+import classNames from 'classnames';
+import Link from 'next/link';
 import { BadgeNiveauAcces } from './BadgeNiveauAcces';
 import { HeaderPropsWithModalState } from './types';
-import { Tooltip } from '@tet/ui';
-import Link from 'next/link';
 
 const ID = 'SelectCollectivite';
 

app.territoiresentransitions.react/src/app/Redirector.tsx

@@ -1,4 +1,4 @@
-import { getAuthPaths } from '@tet/api';
+import { getAuthPaths } from '@/api';
 import {
   finaliserMonInscriptionUrl,
   makeCollectiviteAccueilUrl,

app.territoiresentransitions.react/src/app/VisitTracker.tsx

@@ -1,4 +1,4 @@
-import { TablesInsert } from '@tet/api';
+import { TablesInsert } from '@/api';
 import { supabaseClient } from 'core-logic/api/supabase';
 import { useCollectiviteId } from 'core-logic/hooks/params';
 import { useLocalisation } from 'core-logic/hooks/useLocalisation';

app.territoiresentransitions.react/src/app/app-providers.tsx

@@ -1,8 +1,8 @@
 'use client';
 
+import { TRPCProvider } from '@/api/utils/trpc/client';
+import { createTrackingClient, TrackingProvider } from '@/ui';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { TRPCProvider } from '@tet/api/utils/trpc/client';
-import { createTrackingClient, TrackingProvider } from '@tet/ui';
 import { ENV } from 'environmentVariables';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';

app.territoiresentransitions.react/src/app/global.css

@@ -1,5 +1,5 @@
 /* feuille de styles globale fourni par le module partagé */
-@import '@tet/ui/global.css';
+@import '@/ui/global.css';
 
 /* jeux d'icônes supplémentaires */
 @import '@gouvfr/dsfr/dist/utility/icons/icons-document/icons-document.min.css';

app.territoiresentransitions.react/src/app/pages/CollectivitesEngagees/CollectivitesEngagees.tsx

@@ -1,5 +1,5 @@
-import { getRejoindreCollectivitePath } from '@tet/api';
-import { Button, Card } from '@tet/ui';
+import { getRejoindreCollectivitePath } from '@/api';
+import { Button, Card } from '@/ui';
 import {
   finaliserMonInscriptionUrl,
   recherchesCollectivitesUrl,

app.territoiresentransitions.react/src/app/pages/CollectivitesEngagees/DecouvrirLesCollectivites.tsx

@@ -6,11 +6,11 @@ import CollectivitesView from './Views/CollectivitesView';
 import { useAuth } from 'core-logic/api/auth/AuthProvider';
 import { useSearchParams } from 'core-logic/hooks/query';
 
-import { CollectiviteEngagee, getRejoindreCollectivitePath } from '@tet/api';
+import { CollectiviteEngagee, getRejoindreCollectivitePath } from '@/api';
+import { Alert, Button } from '@/ui';
 import { recherchesCollectivitesUrl, recherchesPlansUrl } from 'app/paths';
-import { initialFilters, nameToShortNames } from './data/filters';
 import { useSansCollectivite } from 'core-logic/hooks/useOwnedCollectivites';
-import { Alert, Button } from '@tet/ui';
+import { initialFilters, nameToShortNames } from './data/filters';
 
 const DecouvrirLesCollectivites = () => {
   const auth = useAuth();