{"id":14483424,"url":"https://github.com/sneko/dsfr-connect","last_synced_at":"2025-08-01T22:42:45.374Z","repository":{"id":168424642,"uuid":"644095376","full_name":"sneko/dsfr-connect","owner":"sneko","description":"This library themes your favorite UI framework to look like the official DSFR as much as possible","archived":false,"fork":false,"pushed_at":"2024-04-05T15:49:33.000Z","size":3124,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"dev","last_synced_at":"2025-06-27T20:07:44.067Z","etag":null,"topics":["ant-design","antd","bootstrap","bulma","chakra-ui","chakraui","design-system","dsfr","foundation","headlessui","mui","semantic-ui","tailwind","tailwindcss","theme","theming","vuetify","vuetifyjs"],"latest_commit_sha":null,"homepage":"https://dsfr-connect.rame.fr","language":"SCSS","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/sneko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2023-05-22T20:03:44.000Z","updated_at":"2024-11-27T10:34:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"e68c79eb-b507-4f3b-b522-d1966ad1981e","html_url":"https://github.com/sneko/dsfr-connect","commit_stats":null,"previous_names":["sneko/dsfr-connect"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/sneko/dsfr-connect","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sneko%2Fdsfr-connect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sneko%2Fdsfr-connect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sneko%2Fdsfr-connect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sneko%2Fdsfr-connect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sneko","download_url":"https://codeload.github.com/sneko/dsfr-connect/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sneko%2Fdsfr-connect/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267534804,"owners_count":24103187,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["ant-design","antd","bootstrap","bulma","chakra-ui","chakraui","design-system","dsfr","foundation","headlessui","mui","semantic-ui","tailwind","tailwindcss","theme","theming","vuetify","vuetifyjs"],"created_at":"2024-09-03T00:01:45.593Z","updated_at":"2025-08-01T22:42:45.352Z","avatar_url":"https://github.com/sneko.png","language":"SCSS","funding_links":[],"categories":["SCSS"],"sub_categories":[],"readme":"# dsfr-connect\n\n[![npm package][npm-img]][npm-url]\n[![Build Status][build-img]][build-url]\n[![Downloads][downloads-img]][downloads-url]\n[![Issues][issues-img]][issues-url]\n[![Code Coverage][codecov-img]][codecov-url]\n[![Commitizen Friendly][commitizen-img]][commitizen-url]\n[![Semantic Release][semantic-release-img]][semantic-release-url]\n\nThis library will help you in theming your favorite UI framework to look like the official DSFR as much as possible (https://github.com/GouvernementFR/dsfr). Our Storybook expands on how to integrate this library but also why using main UI frameworks can help. Also, it shows a real preview of each framework components themed:\n\n🎨 https://dsfr-connect.rame.fr\n\n## Contribute\n\nThis monorepository is managed with `pnpm`, have it installed and run:\n\n```\npnpm install\n```\n\n### Improve themes\n\nThen you can launch all framework Storybooks with:\n\n```bash\ncd apps/docs\npnpm cli prepare\npnpm cli dev\n```\n\n_(if you want to launch just the raw DSFR and a specific framework you can use `pnpm cli dev -f bootstrap-v5`)_\n\nSince technically we were required to have each framework version in a separate NPM package (and so a separate Storybook), we have developed the `apps/docs/scripts/cli.ts` script to manage all actions at once easily.\n\n### Add a new framework or a new major framework version\n\nTry to mimic what's already done for the frameworks in place, roughly the logic is the same for all:\n\n1. download the framework documentation _(see `apps/docs/scripts/*/` to reuse some logic)_\n2. extract all code sections\n3. transform them to stories thanks to templating\n4. provide the theme through files like:\n   - `.scss` and `.css` if the framework styling is done this way (the `.css` version will help people who have websites like Wordpress or so, when they cannot use preprocessing)\n   - `.ts` for theme getters for framework to be styled through JavaScript\n   - `.json` that should be a raw result of the `.ts` getters so people in other languages (Python...) would be able to parse it easily\n\nThey must be shipped into the final bundle so people can easily use a service like https://www.unpkg.com/ to access files as a CDN without much burden.\n\n_Note: if your framework has a dark mode version, don't forget to theme it! Note that our Storybooks has an addon to switch the dark mode._\n\n### Any doubt?\n\nPost an issue or contact us through the livechat module on our Storybook.\n\n## Technical setup of this repository\n\n### Apps \u0026 Actions\n\n- [CodeCov](https://github.com/marketplace/codecov): code coverage reports _(we have CodeQL in addition in the CI/CD... pick just one in the future)_\n\n#### Environments\n\nYou must configure 2 environments in the CI/CD settings:\n\n- `global` (to restrict to `dev` and `main` branches only)\n- `dev` (to restrict to `dev` branch only)\n- `prod` (to restrict to `main` branch only)\n\n### Secrets\n\nThe following ones must be repository secrets (not environment ones):\n\n- `NPM_TOKEN`: [SECRET]\n- `NETLIFY_AUTH_TOKEN`: [SECRET]\n- `NETLIFY_SITE_ID`: [SECRET]\n- `CRISP_WEBSITE_ID`: [SECRET]\n\n### Default branch\n\nThe default branch is `dev`.\n\n### Branch protection rules\n\n1.  Pattern: `main`\n    Checked:\n\n    - Require status checks to pass before merging\n    - Do not allow bypassing the above settings\n\n2.  Pattern: `dev`\n    Checked:\n\n    - Require linear history\n    - Do not allow bypassing the above settings\n    - Allow force pushes (+ \"Specify who can force push\" and leave for administrators)\n\n### Hosting \u0026 domain\n\nWe managed to have all Storybooks static in the same folder and we chose Netlify to host it. Just configure the 2 environments variables you can find from the Netlify interface and you're good to go!\n\n_Note: you can add a custom domain easily_\n\n### Crisp\n\nCrisp is used as a livechat to facilitate communication with people not used to GitHub issues.\n\nFrom their interface we create a website named: `dsfr-connect`\n\nThen upload as the icon the one used for the DSFR website (usually `apple-touch-icon.png` has enough quality).\n\nInto the `Chatbox \u0026 Email settings` section go to `Chat Appearance` and set:\n\n- Color theme (chatbot color): `Red`\n- Chatbox background (message texture): `Default (No background)`\n\nThen go to `Chatbox Security` and enable `Lock the chatbox to website domain (and subdomains)` (not need to enable it inside the development environment).\n\n### IDE\n\nSince the most used IDE as of today is Visual Studio Code we decided to go we it. Using it as well will make you benefit from all the settings we set for this project.\n\n#### Manual steps\n\nEvery settings should work directly when opening the project with `vscode`, except for TypeScript.\n\nEven if your project uses a TypeScript program located inside your `node_modules`, the IDE generally uses its own. Which may imply differences since it's not the same version. We do recommend using the exact same, for this it's simple:\n\n1. Open a project TypeScript file\n2. Open the IDE command input\n3. Type `TypeScript` and click on the item `TypeScript: Select TypeScript Version...`\n4. Then select `Use Workspace Version`\n\nIn addition, using the workspace TypeScript will load `compilerOptions.plugins` specified in your `tsconfig.json` files, which is not the case otherwise. Those plugins will bring more confort while developing!\n\n[build-img]: https://github.com/sneko/dsfr-connect/actions/workflows/release.yml/badge.svg\n[build-url]: https://github.com/sneko/dsfr-connect/actions/workflows/release.yml\n[downloads-img]: https://img.shields.io/npm/dt/dsfr-connect\n[downloads-url]: https://www.npmtrends.com/dsfr-connect\n[npm-img]: https://img.shields.io/npm/v/dsfr-connect\n[npm-url]: https://www.npmjs.com/package/dsfr-connect\n[issues-img]: https://img.shields.io/github/issues/sneko/dsfr-connect\n[issues-url]: https://github.com/sneko/dsfr-connect/issues\n[codecov-img]: https://codecov.io/gh/sneko/dsfr-connect/branch/main/graph/badge.svg\n[codecov-url]: https://codecov.io/gh/sneko/dsfr-connect\n[semantic-release-img]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\n[semantic-release-url]: https://github.com/semantic-release/semantic-release\n[commitizen-img]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg\n[commitizen-url]: http://commitizen.github.io/cz-cli/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsneko%2Fdsfr-connect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsneko%2Fdsfr-connect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsneko%2Fdsfr-connect/lists"}