`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.
<<<<<<< HEAD
-
Here is it's definition from the SIG: systeme-de-design.gouv.fr/elements-d-interface/composants/alerte (Pro tip: the real source of tuth for DSFR component is here)
- Here is it's definition from the SIG: systeme-de-design.gouv.fr/elements-d-interface/composants/alerte (Pro tip: the real source of tuth for DSFR component is here)
d5eb7390b1656914484b05eba861c2bdf4764ed7
- 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-dsfrand the implementation of france connect. - 🔗 Use the component returned by
useLink()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().
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.)