CONTRIBUTING.md

`Hello friends 👋,

Would you help us implement the components?
Thank you so much to anyone that would!

To get you started you can check out the <Alert /> component.

• Here is it's definition from the SIG: systeme-de-design.gouv.fr/elements-d-interface/composants/alerte (Pro tip: the real source of truth for DSFR component is here)
• Here is its implementation src/Alert.tsx
• Here is the file that generates its documentation: stories/Alert.stories.tsx

Here are the few commands you need to run to set up your dev environment.

If you want to link your development version into your own project it's possible, just ask me how.

A few things:

• 🙏🏻 Don't be afraid to push even if you aren't 100% happy with your code or if it's still WIP.
• 📣 Let everyone know what component you are working on by oppening an issue.
• 📚 You can draw inspiration from dataesr/react-dsfr and the implementation of france connect.
• 🔗 Use the component returned by getLink() instead of <a />. Example in the <Header /> component. We want to play nice with all routing libraries.
• 🕹️ When it's relevant, try to enable components to be used either in controlled or uncontrolled mode. Example with .
• 🌎 Avoid hard coding text in JSX, use the i18n mechanism instead. Here is an example. (Don't worry about providing translations other than French.)
• 🍳 If you have to arbitrate between ease of use and customisability I'd encourage you to favor ease of use. People that would need a greater level of customizability can always fall back to making their own wrapper from the reference documentation using fr.cx().

PR Reviews

Here is a video to show you how I review PRs. Please have a look at it, it's full of valuable information that will save you and I time.

Getting TypeScript error in VSCode but the console says everything's right?

Because of how this project is setup TypeScript unaware that files have changed.
You don't need to restart VSCode, just restart the TypeScript server.

Screen.Recording.2022-12-12.at.02.25.10.mov

Assets imports error in Storybook can be solved by opening the stories/global.d.ts file:

Screen.Recording.2022-12-12.at.02.07.08.mov

Thank You Very Much ❤️

PS: If you want to contribute to the Doc website. You can edit the source Markdown or ask me for access to our GitBook. (We'll migrate to Docusaurus once we have the DSFR theme for it ready.)

Linking your local copy of @codegouvfr/react-dsfr in your project

This will enable you to see your react-dsfr changes in your main project.

cd ~/github
git clone https://github.com/ORG/YOUR-PROJECT-USING-REACT-DSFR
cd YOUR-PROJECT-USING-REACT-DSFR
yarn # or npm install or pnpm install depending of what you are using...

cd ~/github
git clone https://github.com/codegouvfr/react-dsfr
cd react-dsfr
yarn
yarn build
yarn link-external YOUR-PROJECT-USING-REACT-DSFR
npx tsc -w -p src # Leave this running if you want hot reload.

Linking a working version of @gouvfr/dsfr (For the SIG)

cd ~/github
git clone http://github.com/gouvernementfr/dsfr
cd dsfr
# git checkout my-working-branch
yarn
yarn build --clean
yarn link
cd ~/github/react-dsfr
yarn
yarn link @gouvfr/dsfr
yarn build

Now ~/github/react-dsfr/node_modules/@gouvfr/dsfr links to ~/github/@gouvfr/dsfr.