Ajouter une documentation qui aide les contributeurs à comprendre le code et les fonctionnalités

[garronej]

Unse suggéstion de ce qui pourrais être ajouter pour comprendre les différents éléments qui constitue la stack technique de sill-web:

⚙️ sill-web Technical stack

To find your way in Onyxia, the best approach is to start by getting a surface-level understanding of the libraries that are leveraged in the project.

For working on what the end user 👁

Anything contained in the src/ui directory.

react-dsfr

{% embed url="https://github.com/codegouvfr/react-dsfr" %}

The UI toolkit used in the project it's a react toolit for the DSFR.

MUI integration

react-dsfr is fully compatible with MUI.

react-dsfr offers a library of reusable components but you can also use MUI components in the project, their aspect will automatically be adapted to blend in with the theme. Read more here

tss-react

{% embed url="https://www.tss-react.dev/" %}

The library we created for styling. It's reused in Jitsi, Apollo and more.

Rules of thumbs when it comes to styling:

• Every component should accept an optional classNameprop it should always overwrite the internal styles.
• A component should not size or position itself. It should always be the responsibility of the parent component to do it. In other words, you should never have height, width, top, left, right, bottom or margin in the root styles of your components.
• You should never have a color or a dimension. Use fr.spacing , and fr.colors.

Storybook

{% embed url="https://storybook.js.org" %}

It enables us to test the graphical components in isolation.

To launch Storybook locally run the following command:

yarn storybook

Keycloakify

{% embed url="https://github.com/InseeFrLab/keycloakify" %}

It's a build tool that enables to implement the login and register pages that users see when they are redirected to Keycloak for authentication.

If the app is being run on Keycloak the kcContext isn't undefined and it means shat we should render the login/register pages.

If you want to test, uncomment this line and run yarn start. You can also test the login pages in a local keycloak container by running yarn keycloak. All the instructions will be printed on the console.

The keycloak-theme.jar file is automatically build and uploaded as a GitHub release asset by the CI.

type-routes

{% embed url="https://github.com/typehero/type-route" %}

The library we use for routing. It's like react-router but type safe.

i18nifty

{% embed url="https://www.i18nifty.dev" %}

For internalization and translation.

For working on 🧠 of the App

Anything contained in the src/core directory.

clean-architecture

{% embed url="https://github.com/garronej/clean-architecture" %}

The framework used to implement strict separation of concern betwen the UI and the Core and high modularity of the code.

There is a snake game (the classic nokia game) example for helping you understand the clean architecture framework.

Snake game for understanding the clean-architecture framwork

oidc-spa

{% embed url="https://github.com/garronej/oidc-spa" %}

For everything related to user authentication.

Meta

General purpose tools and project lifecycle management.

tsafe

{% embed url="https://www.tsafe.dev" %}

We also heavily rely on tsafe. It's a collection of utilities that help write cleaner TypeScript code. It is crutial to understand at least assert, id, Equals and symToStr to be able to contribute on the codebase.

TS-CI

{% embed url="https://github.com/garronej/ts-ci" %}

We try, whenever we see an opportunity for it, to publish as standalone NPM module chunks of the code we write for Onyxia-web. It help keep the complexity in check. We use TS-CI as a starter for everything we publish on NPM.

EVT

{% embed url="https://www.evt.land" %}

EVT is an event management library (like RxJS is).

A lot of the things we do is powered under the hood by EVT. You don't need to know EVT to work on onyxia-web however, in order to demystify the parts of the codes that involve it, here are the key ideas to take away:

• If we need to perform particular actions when a value gets changed, we useStatefullEvt.
• We use Ctxto detaches event handlers when we no longer need them. (See line 108 on this playground)
• In React, we use the useEvt hook to work with DOM events.

[bzg]

Fermé depuis ton https://github.com/codegouvfr/sill-web/issues/109