We need to add a linter to the i18n package, we are mainly
interested by the jest linting rules so we create
a jest eslint config pluggable our other configs and to the
i18n eslint config.
We install Jest to test our i18n package.
We tests:
- the extraction of the translations on the Desk app fo crowdin
- the formatings of the translations from crowdin to the app
- we check that all the translations are present in the app
We connect the tests to the CI.
We create a package i18n to manage the translations of the project.
It help us to extract the translations from the frontend to
be deployed to crowdin.
It also help us to format the translations from crowdin to
be used by the frontend apps.
Add styled-components to the app-desk, it will help us to create
easily styled components.
We create 2 components, Box and Text, it is 2 generic components
that we help us to style quickly html elements. They use
the power of styled-components and Cunningham's design system.
We export the app in the out folder. This is a static export,
so our app can be deployed and hosted
on any web server that can serve HTML/CSS/JS static assets.
Create a fetch wrapper for the API calls, it will handle:
- add correct basename on the api request
- add Bearer automatically on the api request
- logout automatically on 401 request
Add test-e2e to people.yml, it will run e2e tests on every PR.
Steps:
- set env vars for e2e tests
- build and start docker servers
(backend, keycloak, DB)
- install playwright
- build apps
- run e2e tests
- save reports
Install playwright, adapt the config file and add a scripts to
run the tests.
e2e testing will monitor all our frontend applications,
so we install it in the frontend folder.
It configures the base of our monorepo.
- Adapt the tests to use React-Query
- Install fetch-mock to mock the fetch requests with Jest.
- Create a test to show how to mock the fetch requests
with fetch-mock
As a prove of concept, to check the full process of our token,
we create a basic feature Teams.
This feature can create a team and list all teams.
We use react-query to manage the cache and the request to the API.
Integrate keycloak with the frontend.
We use the keycloak-js library to handle the
authentication and authorization.
We installed Zustand to handle the states of the
application.
We store the token and auth process in authStore.
eslint is not enough for css, so we need a css linter too.
This commit adds stylelint to the project, we configure it
with prettier and add a check during the build process.
Integrate cunningham design system into app desk.
It comes with some boilerplate code that will have to be
adapted to our needs when we will get the design.
