Doc et clean
Johan Girod
parent
01ee29e223
commit
42ea5b593e
210
CONTRIBUTING.md
210
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 `<Trans>`, 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
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
```
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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://<PR-NUMBER>--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 `<Trans>`, 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.
|
||||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,92 @@ export type Situation = Partial<
|
|||
Record<DottedName, PublicodesExpression | ASTNode>
|
||||
>
|
||||
|
||||
/**
|
||||
* 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: <string> }
|
||||
*
|
||||
*/
|
||||
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
|
||||
|
|
|
|||
Loading…
Reference in New Issue