From 42ea5b593ef00351949ce4882f6c3e5ca45bae19 Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Fri, 29 Sep 2023 17:25:31 +0200 Subject: [PATCH] Doc et clean --- CONTRIBUTING.md | 210 ++---------------- exoneration-covid/README.md | 1 + modele-social/CONTRIBUTING.md | 70 ++++++ package.json | 9 +- server/package.json | 1 - site/README.md | 169 ++++++++++++++ .../integration/mon-entreprise/recherche.ts | 2 +- site/package.json | 39 ++-- .../pages/simulateurs/_configs/types.ts | 131 +++++++---- 9 files changed, 373 insertions(+), 259 deletions(-) create mode 100644 modele-social/CONTRIBUTING.md create mode 100644 site/README.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b1fb3f158..26196ff0f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -12,78 +12,25 @@ Nous utilisons GitHub pour suivre tous les bugs et discussions sur les nouvelles Si vous voulez participer au développement de nouvelles fonctionnalités, vous pouvez consulter la liste des «[🥇 good first issue](https://github.com/betagouv/mon-entreprise/issues?q=is%3Aopen+is%3Aissue+label%3A%22%F0%9F%A5%87+good+first+issue%22+) ». Ce sont des fonctionnalités intéressantes qui ne sont normalement pas trop complexe à implémenter. N'hésitez pas à poser toutes vos questions sur ces issues ! +### Descriptions des packages +- [mon-entreprise](./site/README.md) : le site mon-entreprise.urssaf.fr +- [modele-social](./modele-social/README.md) : les règles de calculs des cotisations sociales, des impôts et des droits sociaux +- [api](./api/README.md) : l'API qui expose les caluls des simulateurs de mon-entreprise +- [exoneration-covid](./exoneration-covid/README.md) (archivé) : les règles de calculs de l'exonérations de cotisations sociales liées à la crise sanitaire (2021) +- [server](./server/README.md) : un petit serveur qui gère un proxy pour les retours utilisateurs ainsi qu'un bot mattermost pour les standups de l'équipe (plus utilisé) + ### Technologies -L'application est écrite en JavaScript, elle est exécuté uniquement côté client — il n'y a pas de serveur applicatif, nous générons des fichiers `.html` statiques - Nous utilisons : - -- [TypeScript](https://www.typescriptlang.org) pour ajouter un système de typage à notre code JavaScript. Le typage n'est pas utilisé partout et il n'est pas obligatoire de le prendre en compte pour contribuer. -- [Yarn](https://yarnpkg.com) pour la gestion des dépendances (à la place de NPM qui est souvent utilisé dans les applications JavaScript) +- [Eslint](http://eslint.org) qui permet par exemple d'éviter de garder des variables inutilisées +- [Prettier](https://prettier.io/) pour formater le code source, l'idéal est de configurer votre éditeur de texte pour que les fichiers soit formatés automatiquement quand vous sauvegardez un fichier. Si vous utilisez [VS Code](https://code.visualstudio.com/) cette configuration est automatique. +- [Publicodes](https://publi.codes) pour la gestion des règles métiers - [React](https://reactjs.org) pour la gestion de l'interface utilisateur - [Redux](https://redux.js.org) pour gérer le “state” de l'application côté client -- [Prettier](https://prettier.io/) pour formater le code source, l'idéal est de configurer votre éditeur de texte pour que les fichiers soit formatés automatiquement quand vous sauvegardez un fichier. Si vous utilisez [VS Code](https://code.visualstudio.com/) cette configuration est automatique. +- [TypeScript](https://www.typescriptlang.org) pour ajouter un système de typage à notre code JavaScript. Le typage n'est pas utilisé partout et il n'est pas obligatoire de le prendre en compte pour contribuer. - [ViteJS](https://vitejs.dev) pour le “bundling” et le serveur de développement -- [Eslint](http://eslint.org) qui permet par exemple d'éviter de garder des variables inutilisées - [Vitest](https://vitest.dev) et [Cypress](https://www.cypress.io) pour les l'execution des tests. Plus d'informations dans la section consacrée aux tests. - -### Démarrage - -Si possible, assurez-vous d'avoir toutes les clés d'API nécessaires dans votre fichier -`site/.env` (un template est disponible dans `site/.env.template`). -**NB : ne vous inquiétez pas, ceci n'est pas nécessaire pour effectuer une première contribution à -la base de code !** Cependant, vous en aurez besoin pour la commande `yarn prepare` et pour les -commandes de traduction automatique français -> anglais. Si vous êtes confronté à ce type de besoin, -demandez l'aide des contributeurs du projet. - -Si l'historique des commits est trop volumineux, vous pouvez utiliser le paramètre `depth` de git pour ne télécharger que les derniers commits. - -``` -# Clone this repo on your computer -git clone --depth 100 git@github.com:betagouv/mon-entreprise.git - -# Mettre à jour votre config git locale -git config blame.ignoreRevsFile .git-blame-ignore-revs - -# Install the Javascript dependencies through Yarn -yarn install - -# Download some data -yarn prepare - -# Run the dev server for mon-entreprise -yarn start -``` - -L'application est exécutée sur http://localhost:3000/mon-entreprise pour la version française et -http://localhost:3000/infrance pour la version anglaise. - -Pour activer le traçage Redux: - -``` -REDUX_TRACE=true yarn start -``` - -### Messages de commit - -A mettre sans retenue dans les messages de commit : - -- 🎨 `:art:` pour une modification de l'UI -- 🐎 `:racehorse:` pour une amélioration de performance -- 🐛 `:bug:` pour une correction de bug -- 🔥 `:fire:` pour une suppression de code ou de fichier -- 💚 `:green_heart:` pour une correction de CI -- ✅ `:white_check_mark:` pour un ajout de test -- ⬆️ `:arrow_up:` pour une mise à jour de dépendances -- ✨ `:sparkles:` pour une ré-organisation du code -- ⚙ `:gear:` pour une contribution sur le moteur publicodes -- 🔨 `:hammer:` pour une contribution à la base de règles -- 📆 `:calendar:` pour un changement de règle du à une évolution temporelle (en attendant mieux) -- 📈 `:chart_with_upwards_trend:` pour une amélioration du tracking -- 👽 `:alien:` pour ajouter des traductions -- ♿ `:wheelchair:` pour corriger les problèmes liés à l'accessibilité -- 🖋 `:fountain_pen:` pour séparer les commits liés à la modification du contenu -- 🔍 `:mag:` pour les modifications liées au référencement naturel +- [Yarn](https://yarnpkg.com) pour la gestion des dépendances (à la place de NPM qui est souvent utilisé dans les applications JavaScript) ### Tests @@ -117,142 +64,13 @@ yarn test:type --watch yarn test ``` -#### Tests de non-regression (snapshots) - -```sh -yarn test regressions -``` - -Si vous souhaitez mettre à jour les snapshots vous pouvez utiliser le paramètre `--update`, son raccourci `-u`. - -#### Tests d'integrations - -Pré-requis: - -- le browser chromium doit être installé. Les builds peuvent être trouvés sur - le [site de Cypress](https://chromium.cypress.io/) -- le serveur doit être lancé via `yarn start` - -```sh -yarn workspace site test:dev-e2e:mon-entreprise -yarn workspace site test:dev-e2e:mycompanyinfrance -``` - -### Traduction 👽 - -Le site est disponible en français, et en anglais sur https://mycompanyinfrance.urssaf.fr - -Les traductions se trouvent dans le répertoire `site/source/locales`. - -La librairie utilisée pour la traduction de l'UI est -[react-i18next](https://react.i18next.com/). - -Lorsque l'on introduit une nouvelle chaîne de caractère dans l'UI il faut -systématiquement penser à gérer sa traduction, via un composant ``, ou -via la fonction `t` - -Le circle-ci fait une analyse statique du code pour repérer les chaînes non -traduites, dans le moteur et l'UI : - -```sh -yarn run i18n:check -``` - -Pour traduire automatiquement les chaînes manquantes via l'api Deepl : - -```sh -cd site -yarn run i18n:rules:translate -yarn run i18n:ui:translate - -# ou bien pour les deux commandes d'un coup -yarn run i18n:translate -``` - -N'oubliez pas de vérifier sur le diff que rien n'est choquant. ### CI/CD -- Nous utilisons des [Github actions](https://github.com/features/actions) pour faire tourner les builds et - tests. +- Nous utilisons des [Github actions](https://github.com/features/actions) pour faire tourner les builds et les tests. - [Netlify](https://www.netlify.com/), s'occupe de l’hébergement du site sur Internet avec gestion des DNS. +- L'API est quand à elle hebergée sur [Scalingo](https://scalingo.com/) -### Prévisualisation - -Il est possible de simuler localement le comportement de l'application après le build complet, y compris le pré-rendu statique et les redirection Netlify, avec les commandes suivantes (à éxécuter dans le répertoire `site`): - -```sh -yarn run build:preview -``` - -```sh -yarn preview:mon-entreprise -yarn preview:infrance -``` - -### Tests - -Pour tester les règles, il est recommandé de: - -- faire tourner un simulateur et vérifier à la main l'adéquation des règles avec les normes - traduites ; -- créer des cas de tests de non-régression sous la forme de nouveaux snapshots (cf. - `site/test/regressions`). - -En local, le moteur de recherche n'est pas mis à jour automatiquement et la liste des règles -est exposée ici: http://localhost:8080/mon-entreprise/documentation/dev - -## Publicodes - -### Documentation - -La documentation de publicodes est disponible sur https://publi.codes. - -Un wiki contenant des informations intéressantes sur publicodes et le -raisonnement ayant abouti à ce langage sont dispos sur le repository -[betagouv/publicodes](https://github.com/betagouv/publicodes/wiki) - -Pour se familiariser avec les règles, vous pouvez jeter un œil aux fichiers -contenant les règles elles-mêmes (dans le dossier `modele-social`) mais cela -peut s'avérer assez abrupt. - -Essayez plutôt de jeter un œil [aux tests](https://github.com/betagouv/publicodes/tree/master/core/test/m%C3%A9canismes) -dans un premier temps, et pourquoi pas à [à l'implémentation des mécanismes](https://github.com/betagouv/publicodes/tree/master/core/source/mecanisms). - -### Traduction des normes (lois) en règles Publicodes - -Checklist: - -- [ ] Lire les articles de vulgarisation (sur le site de l'URSSAF, des impôts, etc.). -- [ ] Utiliser un moteur de recherche spécialisé, comme [RFPaye](https://rfpaye.grouperf.com/). -- [ ] [Lire les normes][wiki normes] et noter leurs référence dans les règles Publicodes. - -[wiki normes]: https://github.com/betagouv/mon-entreprise/wiki/Comment-lire-les-normes-(la-loi)-efficacement-pour-r%C3%A9diger-des-r%C3%A8gles-Publicodes%3F - -### Développement simultané de Publicodes et de mon-entreprise - -Il est parfois utile de tester des évolutions de publicodes sur mon-entreprise. C'est possible de la manière suivante : - -- cloner les deux dépôts -- sur le dépôt `publicodes` lancer un `yarn build --watch` pour avoir du rechargement à chaud -- sur le dépôt `mon-entreprise` lancer un `yarn link ../publicodes --all` pour lier dynamiquement les paquets `publicodes` et `publicodes-react` - -La commande yarn link prend en paramètre un chemin relatif au dépôt courant, et fonctionne uniquement en local. - -Pour revenir au paquet publié sur NPM il faut utiliser - -```sh -yarn unlink --all -``` - -Pour déployer une version preview de mon-entreprise utilisant une version de publicodes non publiée sur NPM il est possible de référencer un commit ou une branche dans l'attribut résolution du `package.json` : - -```json -{ - "publicodes": "betagouv/publicodes#head=refacto&workspace=publicodes", - "publicodes-react": "betagouv/publicodes#head=refacto&workspace=publicodes-react" -} -``` ## Retours utilisateurs diff --git a/exoneration-covid/README.md b/exoneration-covid/README.md index 9971d5e66..1ecf2cfdd 100644 --- a/exoneration-covid/README.md +++ b/exoneration-covid/README.md @@ -1,4 +1,5 @@ # Covid : exonération de cotisation sociale pour les indépendants +***Archivé*** Ce paquet contient les règles [publicodes](https://publi.codes) utilisées sur https://mon-entreprise.urssaf.fr pour le calcul de l'exonération covid 2021. diff --git a/modele-social/CONTRIBUTING.md b/modele-social/CONTRIBUTING.md new file mode 100644 index 000000000..dcc6e2851 --- /dev/null +++ b/modele-social/CONTRIBUTING.md @@ -0,0 +1,70 @@ + + + +### Documentation et apprentissage + +La documentation de publicodes est disponible sur https://publi.codes. + +Un wiki contenant des informations intéressantes sur publicodes et le +raisonnement ayant abouti à ce langage sont dispos sur le repository +[betagouv/publicodes](https://github.com/betagouv/publicodes/wiki) + +Pour se familiariser avec les règles, vous pouvez jeter un œil aux fichiers +contenant les règles elles-mêmes (dans le dossier `modele-social`) mais cela +peut s'avérer assez abrupt. + +Essayez plutôt de jeter un œil [aux tests](https://github.com/betagouv/publicodes/tree/master/core/test/m%C3%A9canismes) +dans un premier temps, et pourquoi pas à [à l'implémentation des mécanismes](https://github.com/betagouv/publicodes/tree/master/core/source/mecanisms). + +### Traduction des normes (lois) en règles Publicodes + +Checklist : + +- [ ] Lire les articles de vulgarisation (sur le site de l'URSSAF, des impôts, etc.). +- [ ] Utiliser un moteur de recherche spécialisé, comme [RFPaye](https://rfpaye.grouperf.com/). +- [ ] Lire les normes et noter leurs références dans les règles Publicodes. + +### Développement de modele-social et de mon-entreprise + +Pour développer les règles de `modele-social` et tester en temps réel sur les simulateurs de mon-entreprise, il vous faut lancer la commande suivantes : + + ```sh + yarn start + ``` + +Les règles s'actualiseront automatiquement et le site se rechargera à chaque modification. + + +### Tests + +Pour tester les règles, il est recommandé de : + +- faire tourner un simulateur et vérifier à la main l'adéquation des règles avec les normes + traduites ; +- créer des cas de tests de non-régression sous la forme de nouveaux snapshots (cf. + `site/test/regressions`). + +### Développement simultané de Publicodes et de mon-entreprise + +Il est parfois utile de tester des évolutions de publicodes sur mon-entreprise. C'est possible de la manière suivante : + +- cloner les deux dépôts +- sur le dépôt `publicodes` lancer un `yarn build --watch` pour avoir du rechargement à chaud +- sur le dépôt `mon-entreprise` lancer un `yarn link ../publicodes --all` pour lier dynamiquement les paquets `publicodes` et `publicodes-react` + +La commande yarn link prend en paramètre un chemin relatif au dépôt courant, et fonctionne uniquement en local. + +Pour revenir au paquet publié sur NPM il faut utiliser : + +```sh +yarn unlink --all +``` + +Pour déployer une version preview de mon-entreprise utilisant une version de publicodes non publiée sur NPM il est possible de référencer un commit ou une branche dans l'attribut résolution du `package.json` : + +```json +{ + "publicodes": "betagouv/publicodes#head=refacto&workspace=publicodes", + "publicodes-react": "betagouv/publicodes#head=refacto&workspace=publicodes-react" +} +``` \ No newline at end of file diff --git a/package.json b/package.json index 530122d95..28a4e8321 100644 --- a/package.json +++ b/package.json @@ -16,24 +16,19 @@ ], "scripts": { "scalingo-postbuild": "echo \"$APP_DIR\" ; CI=true ; yarn test:type && yarn \"build:$APP_DIR\" && yarn workspaces focus \"$APP_DIR\" --production", - "build:api": "yarn workspaces focus api && yarn workspace api run build && yarn workspaces focus --all && yarn test", - "build:server": "yarn workspaces focus server && yarn workspace server run build", "lint:eslintrc": "npx eslint-config-prettier .eslintrc.cjs", "lint:eslint": "NODE_OPTIONS='--max-old-space-size=4096' eslint .", "lint:eslint:fix": "yarn lint:eslint --fix", "lint:prettier": "yarn run prettier --check \"**/*.{js,jsx,ts,tsx,yaml,yml}\"", "lint:prettier:fix": "yarn lint:prettier --write", "lint:fix": "yarn lint:eslint:fix ; yarn lint:prettier:fix", - "lint:quiet": "yarn lint:eslintrc && yarn lint:eslint --quiet && yarn lint:prettier", "lint": "yarn lint:eslintrc && yarn lint:eslint && yarn lint:prettier", "postinstall": "yarn workspaces foreach -piv --exclude site run prepack", "test": "CI=true yarn workspaces foreach run test", "test:type": "yarn workspaces foreach -pi run tsc --skipLibCheck --noEmit", "clean": "yarn workspaces foreach run clean && rimraf node_modules", - "start": "yarn workspaces foreach -piv --exclude site run start & yarn workspace site run start", - "moso:up": "yarn workspace modele-social up && yarn workspace exoneration-covid up && yarn workspace site upgrade modele-social", - "i18n:check": "yarn workspace site i18n:check", - "i18n:translate": "yarn workspace site i18n:translate" + "build:api": "yarn workspaces focus api && yarn workspace api run build && yarn workspaces focus --all && yarn test", + "build:server": "yarn workspaces focus server && yarn workspace server run build" }, "devDependencies": { "@actions/core": "^1.10.1", diff --git a/server/package.json b/server/package.json index 7dcd194bf..64942d0b0 100644 --- a/server/package.json +++ b/server/package.json @@ -12,7 +12,6 @@ "type": "module", "scripts": { "build": "yarn tsc", - "start": "nodemon -e \"js,ts\" -x 'NODE_OPTIONS=\"--loader ts-node/esm\" node ./source/index.ts'", "start:prod": "NODE_ENV=production nodemon -d 500ms -w ./dist/index.js -x 'node ./dist/index.js || touch ./dist/index.js'" }, "dependencies": { diff --git a/site/README.md b/site/README.md new file mode 100644 index 000000000..f6c24a537 --- /dev/null +++ b/site/README.md @@ -0,0 +1,169 @@ + +# [mon-entreprise.urssaf.fr](https://mon-entreprise.urssaf.fr) + +Site 100 % statique, en Typescript, développé avec [React](https://reactjs.org/). + + +## Démarrage +### Cloner le projet +```sh +# Clone this repo on your computer +git clone --depth 100 git@github.com:betagouv/mon-entreprise.git + +# Mettre à jour votre config git locale +git config blame.ignoreRevsFile .git-blame-ignore-revs +``` +Si l'historique des commits est trop volumineux, vous pouvez utiliser le paramètre `depth` de git pour ne télécharger que les derniers commits. + +### Fichier .env +Si possible, assurez-vous d'avoir toutes les clés d'API nécessaires dans votre fichier +`site/.env` (un template est disponible dans `site/.env.template`). + +> [!NOTE] +> Pas d'inquiétude, ceci n'est pas nécessaire pour effectuer une première contribution à la base de code** +> Cependant, vous en aurez besoin pour la commande `yarn postinstall` et pour les commandes de traduction automatique français -> anglais. +>Si vous êtes confronté à ce type de besoin, demandez l'aide des contributeurs du projet. + +### Installation des dépendances +```sh + +# Install the Javascript dependencies through Yarn +yarn install + +# Optional : fetch API data (stats, releases, etc.) +yarn postinstall + +# Run the dev server for mon-entreprise +yarn start +``` + +## Tests +### Test unitaires / non regression + +Nous utilisons [vitest](https://vitest.dev/) pour les tests. + +Les règles publicodes de `modele-social` sont testées dans le dossier `[./test/regression]` avec des [snapshots](https://vitest.dev/guide/snapshot.html). + +```sh + yarn test +``` + +#### Mise à jour des snapshots + +Nous testons un grand nombre de situations sur chaque simulateur, pour vérifier que les modification de règles suite à un changement de législation ou à l'implémentation d'un nouveau dispositif n'entrainent pas de résultats inattendus. + +Si les changements apportés sont attendus, il est possible de mettre à jour les snapshots avec la commande suivante : +```sh + yarn test -u +``` + + +### Tests d'integrations + +Nous utilisons [Cypress](https://www.cypress.io/) pour les tests d'intégration. +Pré-requis: + +```sh +yarn start & +yarn test:cypress +``` +Pour tester la version anglaise : +``` +yarn test:cypress:mycompanyinfrance +``` + +Nous utilisons des [fixtures](./cypress/fixtures) pour simuler les appels API. Pour les mettre à jour, il faut lancer le serveur de dev et lancer la commande suivante : + +```sh +test:cypress:record-http +``` + +## Déploiement + +Le site est déployé sur Netlify, à chaque push sur la branche `master`. Par ailleurs, toutes les PR sont automatiquement déployées sur des URL de type `https://--mon-entreprise.netlify.app`. + +### Prerender + +La plupart des pages sont pré-rendues statiquement lors du déploiement, pour améliorer les performances et le SEO. Un [script]('./site/build/prerender.ts') se charge de générer les pages statiques grâce à `renderToReadableStream`, et de les placer dans le dossier `site/dist/prerender`. + +Pour ajouter des pages à pré-rendre, il faut les ajouter dans le fichier `site/build/prerender.ts`. + + +*A noter : nous n'utilisons pas `nextJS` pour des raisons historiques, mais il serait souhaitable de migre l'application à l'avenir* + + +## FAQ + +### Comment ajouter un nouveau simulateur ? + +Pour ajouter un nouveau simulateur, il faut : + +- Créer un nouveau dossier dans `site/source/pages/simulateurs/` (ou `/assistant` si il s'agit d'un outil avec un parcours sur plusieurs pages). +- Créer un fichier `config.tsx` dans ce dossier, qui contient informations reliées au simulateur (nom, description, icône, etc.). Le type est [PageConfig](./source/pages/simulateurs/_configs/types.ts). **[Voir un exemple](./source/pages/simulateurs/salarié/config.ts)** +- Créer la config de simulation dans le fichier `simulationConfig.ts`. Cette dernière contient la situation Publicodes et les paramètres pour configurer le simulateur. **[Voir un exemple](./source/pages/simulateurs/salarié/simulationConfig.ts)** +- Ajouter le simulateur sur la page /simulateurs-et-assistants, dans le fichier `site/source/pages/simulateurs-et-assistants/index.tsx`** +- Ajouter une route pour le simulateur dans le fichier `sitePaths`, avec la version anglaise également. + + +### Redirections + +Les redirections sont gérées par netlify, via le fichier [`netlify.base.toml`](./netlify.base.toml). + +C'est également dans ce fichier que sont définies les `Content-Security-Policy`. + +### Traduction 👽 + +Le site est disponible en français, et en anglais sur https://mycompanyinfrance.urssaf.fr + +Les traductions se trouvent dans le répertoire `site/source/locales`. + +La librairie utilisée pour la traduction de l'UI est +[react-i18next](https://react.i18next.com/). + +Lorsque l'on introduit une nouvelle chaîne de caractère dans l'UI il faut +systématiquement penser à gérer sa traduction, via un composant ``, ou +via la fonction `t` + +Le CI fait une analyse statique du code pour repérer les chaînes non +traduites, dans le moteur et l'UI : + +```sh +yarn run i18n:check +``` + +Pour traduire automatiquement les chaînes manquantes via l'api [Deepl](https://www.deepl.com/en/docs-api) : + + +```sh +yarn run i18n:translate +``` + +N'oubliez pas de vérifier sur le diff que les traductions vous paraissent correctes. + + +### Prévisualisation locale + +Il est possible de simuler localement le comportement de l'application après le build complet, y compris le pré-rendu statique et les redirection Netlify, avec les commandes suivantes: + +```sh +yarn run build:preview +``` + +```sh +yarn preview + +# pour la version anglaise +yarn preview:en +``` + +### Statistiques + +Nous utilisons ATInternet pour le reccueil des usages. La hierarchie des pages est organisée en 3 chapitre et un nom de page. Seul le chapitre 1 et le nom sont obligatoires. + +- Chapitre 1 : par exemple `simulateurs` ou `assistant`. La liste est définie dans le fichier `source/components/ATInternetTracking/index.tsx` +- Chapitre 2 : le nom du simulateur / de l'assistant / de la famille de simulateur +- Chapitre 3 : le nom du simulateur si il n'est pas dans le chapitre 2 + +On utilise le nom de la page pour signifier les étapes dans le parcours de l'utilisateur. Par exemple, pour la plupart des simulateurs, on a les pages suivantes `accueil`, `simulation_commencée` `simulation_terminée`. Quand bien même il n'y a qu'une seule et même URL. + +Cela permet de suivre le parcours des utilisateurs dans les simulateurs, et de voir les taux de completion facilement. Ces données sont ensuites compilées pour afficher la page /stats. \ No newline at end of file diff --git a/site/cypress/integration/mon-entreprise/recherche.ts b/site/cypress/integration/mon-entreprise/recherche.ts index b8d1f7e2a..e89b329e1 100644 --- a/site/cypress/integration/mon-entreprise/recherche.ts +++ b/site/cypress/integration/mon-entreprise/recherche.ts @@ -15,7 +15,7 @@ describe('Recherche globales', { testIsolation: false }, function () { cy.contains('Fermer').focus() // eslint-disable-next-line cypress/unsafe-to-chain-command - cy.focused().tab().should('have.attr', 'type', 'search') + cy.get('input[type=search]').should('be.focused') cy.contains('Simulateurs') .next() diff --git a/site/package.json b/site/package.json index 48d8969a7..51bf7639e 100644 --- a/site/package.json +++ b/site/package.json @@ -18,31 +18,38 @@ "not ie < 11" ], "scripts": { - "start": "vite dev", - "start:axe-debugging": "VITE_AXE_CORE_ENABLED=true vite dev", - "start:netlify": "sed 's|:SITE_EN|/infrance|g' netlify.base.toml | sed 's|:SITE_FR|/mon-entreprise|g' | sed 's|:API_URL|http://localhost:3004|g' | sed 's|\\[\\[redirects\\]\\]|\\[\\[redirects\\]\\]\\n force = true|g' > netlify.toml && HMR_CLIENT_PORT=8888 netlify dev", - "start:storybook": "storybook dev -p 6006", "postinstall": "node scripts/prepare.js", + + "start": "vite dev", + "start:storybook": "storybook dev -p 6006", + "start:axe-debugging": "VITE_AXE_CORE_ENABLED=true vite dev", + + "preview": "sed 's|:SITE_EN|_|g' netlify.preview.toml | sed 's|:SITE_FR||g' | sed 's|:API_URL|http://localhost:3004|g' > dist/netlify.toml && cd dist && netlify dev -d ./ -p 8888", + "preview:infrance": "sed 's|:SITE_EN||g' netlify.preview.toml | sed 's|:SITE_FR|_|g' | sed 's|:API_URL|http://localhost:3004|g' > dist/netlify.toml && cd dist && netlify dev -d ./ -p 8889", + + "test": "vitest", + "test:cypress": "cypress open --e2e", + "test:cypress:preview": "cypress open --e2e --config \"baseUrl=http://localhost:8888\"", + "test:cypress:preview:en": "cypress open --e2e --config \"baseUrl=http://localhost:8889,specPattern=cypress/integration/mon-entreprise/english/**/*.{js,jsx,ts,tsx}\" --env language=en", + "test:cypress:record-http": "cypress run --env record_http=", + + "build": "NODE_OPTIONS='--max-old-space-size=6144'; yarn build:sitemap && yarn build:simulator-data && vite build && yarn build:iframe-script", - "build:iframe-script": "NODE_OPTIONS='--max-old-space-size=4096'; vite build --config build/vite-iframe-script.config.ts", - "build:prerender": "ts-node-esm build/prerender.ts", "build:preview": "VITE_FR_BASE_URL=http://localhost:8888; VITE_EN_BASE_URL=http://localhost:8889; yarn build && yarn build:ssr && cp ./netlify.base.toml ./netlify.preview.toml && yarn build:prerender --dev --netlify-toml-path ./netlify.preview.toml", + "build:storybook": "NODE_OPTIONS='--max-old-space-size=6144'; storybook build", + + "i18n:translate": "yarn i18n:rules:translate && yarn i18n:ui:translate", + "i18n:check": "yarn i18n:rules:check && yarn i18n:ui:check", + + "start:netlify": "sed 's|:SITE_EN|/infrance|g' netlify.base.toml | sed 's|:SITE_FR|/mon-entreprise|g' | sed 's|:API_URL|http://localhost:3004|g' | sed 's|\\[\\[redirects\\]\\]|\\[\\[redirects\\]\\]\\n force = true|g' > netlify.toml && HMR_CLIENT_PORT=8888 netlify dev", + "build:iframe-script": "NODE_OPTIONS='--max-old-space-size=4096'; vite build --config build/vite-iframe-script.config.ts", "build:simulator-data": "vite build --config build/vite-build-simulation-data.config.ts", + "build:prerender": "ts-node-esm build/prerender.ts", "build:sitemap": "ts-node-esm build/build-sitemap.ts", "build:ssr": "NODE_OPTIONS='--max-old-space-size=4096'; vite build --ssr ./source/entries/entry-server.tsx --outDir ./dist/ssr --emptyOutDir && echo '{\"type\": \"module\"}' > dist/package.json", - "build:storybook": "NODE_OPTIONS='--max-old-space-size=6144'; storybook build", "build:yaml-to-dts": "ts-node-esm build/build-yaml-to-dts.ts", - "preview:mon-entreprise": "sed 's|:SITE_EN|_|g' netlify.preview.toml | sed 's|:SITE_FR||g' | sed 's|:API_URL|http://localhost:3004|g' > dist/netlify.toml && cd dist && netlify dev -d ./ -p 8888", - "preview:infrance": " sed 's|:SITE_EN||g' netlify.preview.toml | sed 's|:SITE_FR|_|g' | sed 's|:API_URL|http://localhost:3004|g' > dist/netlify.toml && cd dist && netlify dev -d ./ -p 8889", - "typecheck:watch": "tsc --skipLibCheck --noEmit --watch", - "test": "vitest", - "test:dev-e2e:mon-entreprise": "cypress open --e2e --config \"baseUrl=http://localhost:8888\"", - "test:dev-e2e:mycompanyinfrance": "cypress open --e2e --config \"baseUrl=http://localhost:8889,specPattern=cypress/integration/mon-entreprise/english/**/*.{js,jsx,ts,tsx}\" --env language=en", - "test:record-http-calls:mon-entreprise": "cypress run --env record_http=", "algolia:clean": "node scripts/search/clean.js", "algolia:update": "yarn build:simulator-data && ts-node-esm ./scripts/search/update-data.ts", - "i18n:check": "yarn i18n:rules:check && yarn i18n:ui:check", - "i18n:translate": "yarn i18n:rules:translate && yarn i18n:ui:translate", "i18n:rules:check": "node scripts/i18n/check-missing-rule-translation.js", "i18n:rules:translate": "node scripts/i18n/translate-rules.js", "i18n:ui:check": "i18next -c scripts/i18n/parser.config.js && node scripts/i18n/check-missing-UI-translation.js", diff --git a/site/source/pages/simulateurs/_configs/types.ts b/site/source/pages/simulateurs/_configs/types.ts index 542075dc9..75ba44d05 100644 --- a/site/source/pages/simulateurs/_configs/types.ts +++ b/site/source/pages/simulateurs/_configs/types.ts @@ -8,6 +8,92 @@ export type Situation = Partial< Record > +/** + * Configuration d'une page de simulateur ou d'assistant + */ +export interface PageConfig { + /** Identifiant unique de la page + */ + id: string + + /** Chemin de la page + * Ce dernier doit exister dans le fichier sitePaths.ts */ + path?: string + + /** Chemin de l'iframe */ + iframePath: string + + /** Le chemin dans l'objet `absoluteSitePath` + * @example 'simulateurs.salarié' + */ + pathId: string + + /** Icône de la page (emoji) */ + icône: string + + /** Nom court du simulateur + * + * Il sera utilisé dans la carte générée par le composant `SimulateurCard` + * */ + shortName: string + + /** Titre H1 de la page du simulateur */ + title: string + + /** Configuration du tracking */ + tracking: Tracking + + /** Métadonnées de la page */ + meta: { + /** Titre de la page pour les moteurs de recherche */ + title: string + /** Description de la page pour les moteurs de recherche */ + description: string + /** Description Open Graph de la page */ + ogDescription?: string + /** Titre Open Graph de la page */ + ogTitle?: string + /** Image Open Graph de la page */ + ogImage?: string + } + + /** Indique si le simulateur est privé + * + * Si c'est le cas, il n'apparaîtra pas dans la recherche et ne sera + * pas référencé dans les stats ou dans la page d'intégration + */ + private?: boolean + + /** Indique si la page est en version bêta (affiche un petit bandeau) */ + beta?: boolean + + /** Texte d'information */ + tooltip?: string + + /** ID des pages de simulateur ou assistant à faire apparaître dans la + * section « Ressources utiles » en bas de page. + */ + nextSteps?: string[] | false + + /** Configuration de la simulation */ + simulation?: SimulationConfig + + /** Indique si la dernière simulation doit être chargée automatiquement à l'arrivée + * sur la page + */ + autoloadLastSimulation?: boolean + + /** Composant React de la page + * + * Note : Le nom du composant doit être en un seul mot pour que le script `yarn build:simulator-data` marche + * example: `component: MyComponent,` + */ + component?: () => JSX.Element + + /** Composant React pour les explications SEO, qui apparaissent en dessous du simulateur */ + seoExplanations?: () => JSX.Element +} + export type SimulationConfig = Partial<{ /** * Objectifs exclusifs de la simulation : si une règle change dans la situation @@ -28,7 +114,7 @@ export type SimulationConfig = Partial<{ questions: { /** - * Question non prioritaires + * Question non prioritaires, elles aparraitront en fin de simulation */ 'non prioritaires'?: DottedName[] @@ -55,7 +141,12 @@ export type SimulationConfig = Partial<{ 'unité par défaut'?: string }> - +/** + * Les informations liées au tracking, utilisées pour les statistiques. + * + * Si seul une string est utilisée, alors elle équivaut à { chapter1: 'simulateurs', chapter2: } + * + */ type Tracking = | string | { @@ -64,42 +155,6 @@ type Tracking = chapter3?: string } -export interface PageConfig { - id: string - path?: string - iframePath: string - pathId: string - icône: string - shortName: string - title: string - tracking: Tracking - meta: { - title: string - description: string - ogDescription?: string - ogTitle?: string - ogImage?: string - color?: string - } - /** - * Hides the simulator in the iframe integration page - */ - private?: boolean - beta?: boolean - tooltip?: string - nextSteps?: string[] | false - - simulation?: SimulationConfig - autoloadLastSimulation?: boolean - - /** - * `component` must be followed by a one-word component for the `yarn build:simulator-data` script to work - * example: `component: MyComponent,` - */ - component?: () => JSX.Element - seoExplanations?: () => JSX.Element -} - export interface SimulatorsDataParams { t: TFunction sitePaths: AbsoluteSitePaths