{"id":24516268,"url":"https://github.com/inseefr/lunatic-dsfr","last_synced_at":"2025-06-25T15:08:12.078Z","repository":{"id":76670190,"uuid":"580335428","full_name":"InseeFr/Lunatic-DSFR","owner":"InseeFr","description":"Couche graphique pour Lunatic reposant sur le Système de Design de l'État (DSFR)","archived":false,"fork":false,"pushed_at":"2025-06-22T13:44:20.000Z","size":80545,"stargazers_count":4,"open_issues_count":12,"forks_count":6,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-06-22T14:37:49.048Z","etag":null,"topics":["component","dsfr","react","storybook","typescript"],"latest_commit_sha":null,"homepage":"https://inseefr.github.io/Lunatic-DSFR/storybook/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/InseeFr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-12-20T10:02:19.000Z","updated_at":"2025-04-25T11:57:18.000Z","dependencies_parsed_at":"2023-09-25T09:44:05.056Z","dependency_job_id":"44f67a8a-47ef-4300-a2ec-95606fb5750f","html_url":"https://github.com/InseeFr/Lunatic-DSFR","commit_stats":{"total_commits":75,"total_committers":7,"mean_commits":"10.714285714285714","dds":0.3466666666666667,"last_synced_commit":"52235c5bda20fe4c98da3dbce19c00004bf52ef6"},"previous_names":[],"tags_count":115,"template":false,"template_full_name":null,"purl":"pkg:github/InseeFr/Lunatic-DSFR","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFr%2FLunatic-DSFR","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFr%2FLunatic-DSFR/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFr%2FLunatic-DSFR/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFr%2FLunatic-DSFR/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/InseeFr","download_url":"https://codeload.github.com/InseeFr/Lunatic-DSFR/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFr%2FLunatic-DSFR/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261310673,"owners_count":23139450,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","dsfr","react","storybook","typescript"],"created_at":"2025-01-22T01:22:40.345Z","updated_at":"2025-06-25T15:08:12.051Z","avatar_url":"https://github.com/InseeFr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/InseeFr/Lunatic-DSFR/main/overview-light.png#gh-light-mode-only\" /\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/InseeFr/Lunatic-DSFR/main/overview-dark.png#gh-dark-mode-only\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://inseefr.github.io/Lunatic-DSFR/storybook/\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nLunatic-DSFR is a library of customised [Lunatic](https://github.com/InseeFr/Lunatic) components built with TypeScript and [React-DSFR](https://react-dsfr.etalab.studio/).\n\nThis library is designed to be an opt-in solution to replace the native style of Lunatic with the style of the [French Design system](https://systeme-de-design.gouv.fr/).\n\n\u003e WARNING: This Design System is only meant to be used for official French's public service websites.  \n\u003e Its main purpose is to make it easy to identify governmental websites for citizens. [See terms](https://www.systeme-de-design.gouv.fr/cgu/).\n\n### Getting Started\n\n**To visualise the Storybook**\n\nThe storybook is deployed [here](https://inseefr.github.io/Lunatic-DSFR/storybook/). In order to visualise and test the components you can launch the storybook locally. It is also recommended that any proposed changes to any components or any new components be tested in the storybook before proposing a PR.\n\nTo launch the storybook locally, ensure that you have cloned the repository.\n\n```bash\ngit clone https://github.com/InseeFr/Lunatic-DSFR.git\n```\n\nOnce you have the repository cloned locally, navigate to the folder containing the repository and ensure that the necessary packages are available.\n\n```bash\ncd lunatic-dsfr\nyarn install\nyarn storybook\n```\n\nNow you are ready to launch the storybook, which will be accessible at [localhost:6006](http://localhost:6006/)\n\n**Connect Lunatic-DSFR with Lunatic**\n\nIn any application that uses the [Lunatic components library](https://github.com/InseeFr/Lunatic), it is possible to override the native Lunatic components by injecting **Lunatic-DSFR** ones. These process is detailed in Lunatic Documentation [here](https://inseefr.github.io/Lunatic/docs/components/personnalisation).\n\nTo use Lunatic-DSFR, first install theses packages into your application :\n\n```bash\nyarn add @inseefr/lunatic-dsfr @codegouvfr/react-dsfr tss-react @emotion/react\n```\n\nImport the Lunatic-DSFR components in the file where you use `LunaticComponents`:\n\n```js\nimport { slotComponents } from \"@inseefr/lunatic-dsfr\";\n```\n\nThen inject `slotComponents` into `LunaticComponents`\n\n```js\n\u003cLunaticComponents slots={slots} /\u003e\n```\n\nIf you use `Suggester` component you will need to add these dependencies for [MUI](https://mui.com/) :\n\n```bash\nyarn add @mui/material @emotion/styled\n\n```\n\nFinally surround the `LunaticComponents` by the `MuiDsfrThemeProvider` provided by [`@codegouvfr/react-dsfr`](https://react-dsfr.codegouv.studio/mui)\n\n```js\n\u003cMuiDsfrThemeProvider\u003e\n    {/*...*/}\n    \u003cLunaticComponents slots={slots} /\u003e\n    {/*...*/}\n\u003c/MuiDsfrThemeProvider\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finseefr%2Flunatic-dsfr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finseefr%2Flunatic-dsfr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finseefr%2Flunatic-dsfr/lists"}