{"id":15022127,"url":"https://github.com/axafrance/react-toolkit","last_synced_at":"2025-05-15T18:03:54.943Z","repository":{"id":33058117,"uuid":"157184922","full_name":"AxaFrance/react-toolkit","owner":"AxaFrance","description":"Flexible components html + css + react using BEM convention. Maybe, you can call it \"Design System\" !","archived":false,"fork":false,"pushed_at":"2024-11-15T09:16:52.000Z","size":62886,"stargazers_count":97,"open_issues_count":87,"forks_count":62,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-15T18:03:46.994Z","etag":null,"topics":["axa","bem-convention","design-system","front-end-development","javascript","reactjs","software","storybook","tools"],"latest_commit_sha":null,"homepage":"https://axafrance.github.io/design-system/","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/AxaFrance.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2018-11-12T09:04:01.000Z","updated_at":"2024-11-15T09:16:55.000Z","dependencies_parsed_at":"2023-12-27T11:24:23.088Z","dependency_job_id":"c17ecb98-2df8-49ad-a542-2712e26d74ef","html_url":"https://github.com/AxaFrance/react-toolkit","commit_stats":{"total_commits":621,"total_committers":60,"mean_commits":10.35,"dds":0.8035426731078905,"last_synced_commit":"e6a77ba89e8e99a36ca11f0d22c6b7874166f7b2"},"previous_names":["AxaGuilDEv/react-toolkit","axaguildev/react-toolkit"],"tags_count":98,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxaFrance%2Freact-toolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxaFrance%2Freact-toolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxaFrance%2Freact-toolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxaFrance%2Freact-toolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AxaFrance","download_url":"https://codeload.github.com/AxaFrance/react-toolkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254394720,"owners_count":22063984,"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":["axa","bem-convention","design-system","front-end-development","javascript","reactjs","software","storybook","tools"],"created_at":"2024-09-24T19:57:29.842Z","updated_at":"2025-05-15T18:03:54.892Z","avatar_url":"https://github.com/AxaFrance.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @axa-fr/react-toolkit\n\n[![Build status](https://dev.azure.com/axaguildev/react-toolkit/_apis/build/status/AxaFrance.react-toolkit?branch=master)](https://dev.azure.com/axaguildev/react-toolkit)\n[![Quality Gate](https://sonarcloud.io/api/project_badges/measure?project=AxaGuilDEv_react-toolkit\u0026metric=alert_status)](https://sonarcloud.io/dashboard?id=AxaGuilDEv_react-toolkit) [![Reliability](https://sonarcloud.io/api/project_badges/measure?project=AxaGuilDEv_react-toolkit\u0026metric=reliability_rating)](https://sonarcloud.io/component_measures?id=AxaGuilDEv_react-toolkit\u0026metric=reliability_rating) [![Security](https://sonarcloud.io/api/project_badges/measure?project=AxaGuilDEv_react-toolkit\u0026metric=security_rating)](https://sonarcloud.io/component_measures?id=AxaGuilDEv_react-toolkit\u0026metric=security_rating) [![Code Corevage](https://sonarcloud.io/api/project_badges/measure?project=AxaGuilDEv_react-toolkit\u0026metric=coverage)](https://sonarcloud.io/component_measures?id=AxaGuilDEv_react-toolkit\u0026metric=Coverage)\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/) [![Twitter](https://img.shields.io/twitter/follow/GuildDEvOpen?style=social)](https://twitter.com/intent/follow?screen_name=GuildDEvOpen)\n\n- [About](#about)\n- [Getting Started](#getting-started)\n- [Packages](#packages)\n- [Concept](#concept)\n- [How Does It Work](#how-does-it-work)\n- [List of supported browsers](#list-of-supported-browsers)\n- [Contribute](#contribute)\n- [Roadmap](#roadmap)\n\n## About\n\nA set of independent components. Awesome library based on HTML and CSS using BEM convention with the JavaScript ReactJS implementation. Each component is autonomous and extensible. Pick and use only what you need!\n\n**How _React-toolkit_ does CSS isolation?**\n\nOnly by using [BEM (Block Element Modifier)](http://getbem.com) CSS convention. No need for intricate technologies, just pragmatism.\n\nComponents are simple to use (just drag and drop it), simple to customize (by using CSS modifier) to your own need. Each component may evaluate internally (HTML, CSS, JS) and minimize any impact on your application.\n\nYou can easily build a new app from scratch or integrate some components into an existing application.\n\n[html+css documentation website](https://axafrance.github.io?target=react_toolkit_storybook)\n[react storybook website](https://axafrance.github.io?target=react_toolkit_design)\n\n## Getting Started\n\nMake you sure that [sass](https://www.npmjs.com/package/sass) and [bootstrap](https://www.npmjs.com/package/bootstrap) modules are installed :\n\n```sh\nnpm install -D sass\nnpm install bootstrap@4.3.1\n```\n\nAfter installing bootstrap, add these css imports in the root file of your components tree :\n\n```js\nimport 'bootstrap/scss/bootstrap-grid.scss';\nimport 'bootstrap/scss/bootstrap-reboot.scss';\n```\n\nYou can either install everything and use only what you need. If you do that you will be able to use tree shaking to have a smaller bundle.\nHowever, you will need to import all the styles and not only the style related to your component.\n\n```sh\nnpm install @axa-fr/react-toolkit-all --save\n```\n\n```javascript\nimport React from 'react';\nimport { Alert } from '@axa-fr/react-toolkit-all';\n\nimport '@axa-fr/react-toolkit-all/dist/style/af-toolkit-core.scss';\n\nconst MyAlertComponent = () =\u003e \u003cAlert icon=\"ok\" title=\"This is an alert\" /\u003e;\n```\n\nOr you can install only the components you need:\n\n```sh\nnpm install @axa-fr/react-toolkit-alert --save\n```\n\n```javascript\nimport React from 'react';\nimport Alert from '@axa-fr/react-toolkit-alert';\nimport '@axa-fr/react-toolkit-alert/dist/alert.scss';\n\nconst MyAlertComponent = () =\u003e \u003cAlert icon=\"ok\" title=\"This is an alert\" /\u003e;\n```\n\n## Packages\n\n- [@axa-fr/react-toolkit-all](./packages/all/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-all?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-all)\n- [@axa-fr/react-toolkit-action](./packages/action/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-action?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-action)\n- [@axa-fr/react-toolkit-alert](./packages/alert/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-alert?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-alert)\n- [@axa-fr/react-toolkit-badge](./packages/badge/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-badge?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-badge)\n- [@axa-fr/react-toolkit-button](./packages/button/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-button?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-button)\n- [@axa-fr/react-toolkit-collapse](./packages/collapse/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-collapse?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-collapse)\n- [@axa-fr/react-toolkit-core](./packages/core/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-core?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-core)\n- [@axa-fr/react-toolkit-form-core](./packages/Form/core/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-core?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-core)\n- [@axa-fr/react-toolkit-form-filter](./packages/Form/filter/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-filter?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-filter)\n- [@axa-fr/react-toolkit-form-filter-inline](./packages/Form/filter-inline/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-filter-inline?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-filter-inline)\n- [@axa-fr/react-toolkit-form-input-card](./packages/Form/Input/card/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-input-card?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-input-card)\n- [@axa-fr/react-toolkit-form-input-checkbox](./packages/Form/Input/checkbox/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-input-checkbox?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-input-checkbox)\n- [@axa-fr/react-toolkit-form-input-choice](./packages/Form/Input/choice/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-input-choice?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-input-choice)\n- [@axa-fr/react-toolkit-form-input-date](./packages/Form/Input/date/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-input-date?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-input-date)\n- [@axa-fr/react-toolkit-form-input-file](./packages/Form/Input/file/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-input-file?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-input-file)\n- [@axa-fr/react-toolkit-form-input-number](./packages/Form/Input/number/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-input-number?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-input-number)\n- [@axa-fr/react-toolkit-form-input-pass](./packages/Form/Input/pass/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-input-pass?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-input-pass)\n- [@axa-fr/react-toolkit-form-input-radio](./packages/Form/Input/radio/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-input-radio?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-input-radio)\n- [@axa-fr/react-toolkit-form-input-select](./packages/Form/Input/select/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-input-select?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-input-select)\n- [@axa-fr/react-toolkit-form-input-select-multi](./packages/Form/Input/select-multi/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-input-select-multi?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-input-select-multi)\n- [@axa-fr/react-toolkit-form-input-slider](./packages/Form/Input/slider/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-input-slider?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-input-slider)\n- [@axa-fr/react-toolkit-form-input-switch](./packages/Form/Input/switch/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-input-switch?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-input-switch)\n- [@axa-fr/react-toolkit-form-input-text](./packages/Form/Input/text/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-input-text?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-input-text)\n- [@axa-fr/react-toolkit-form-input-textarea](./packages/Form/Input/textarea/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-input-textarea?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-input-textarea)\n- [@axa-fr/react-toolkit-form-steps](./packages/Form/steps/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-steps?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-steps)\n- [@axa-fr/react-toolkit-form-summary](./packages/Form/summary/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-form-summary?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-form-summary)\n- [@axa-fr/react-toolkit-help](./packages/help/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-help?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-help)\n- [@axa-fr/react-toolkit-icon](./packages/icon/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-icon?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-icon)\n- [@axa-fr/react-toolkit-layout-footer](./packages/Layout/footer/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-layout-footer?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-layout-footer)\n- [@axa-fr/react-toolkit-layout-footer-client](./packages/Layout/footer-client/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-layout-footer-client?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-layout-footer-client)\n- [@axa-fr/react-toolkit-layout-header](./packages/Layout/header/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-layout-header?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-layout-header)\n- [@axa-fr/react-toolkit-link](./packages/link/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-link?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-link)\n- [@axa-fr/react-toolkit-loader](./packages/loader/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-loader?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-loader)\n- [@axa-fr/react-toolkit-modal-boolean](./packages/Modal/boolean/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-modal-boolean?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-modal-boolean)\n- [@axa-fr/react-toolkit-modal-default](./packages/Modal/default/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-modal-default?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-modal-default)\n- [@axa-fr/react-toolkit-panel](./packages/panel/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-panel?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-panel)\n- [@axa-fr/react-toolkit-popover](./packages/popover/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-popover?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-popover)\n- [@axa-fr/react-toolkit-restitution](./packages/restitution/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-restitution?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-restitution)\n- [@axa-fr/react-toolkit-table](./packages/table/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-table?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-table)\n- [@axa-fr/react-toolkit-tabs](./packages/tabs/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-tabs?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-tabs)\n- [@axa-fr/react-toolkit-title](./packages/title/README.md) [![npm version](https://img.shields.io/npm/v/@axa-fr/react-toolkit-title?style=flat)](https://www.npmjs.com/package/@axa-fr/react-toolkit-title)\n\n## Concept\n\nEach component should be autonomous (HTML + CSS + JS) and extensible.\n\n## How Does It Work\n\n- HTML/CSS :\n\n  - BEM convention is used in order to break CSS cascading problem\n  - SCSS and CSS files are avalaible for every component and can be overrided or extended\n  - [HTML/CSS Documentation](https://axafrance.github.io?target=react_toolkit_storybook)\n\n- React :\n  - Components are stateless by default\n  - Some Higher-Order Components (HOC) are stateful but feel free to use the stateless one if it fits your use case\n  - [React documentation](https://axafrance.github.io?target=react_toolkit_design)\n\n## List of supported browsers\n\nHere is the list of browsers we tested this toolkit on:\n\n- Chrome 84+\n- Firefox 79+\n- Microsoft Edge 85+\n- Internet Explorer 11\n- Safari 13.1+\n- Opera 71+\n\n## Contribute\n\n- [How to run the solution and to contribute](./CONTRIBUTING.md)\n- [Please respect our code of conduct](./CODE_OF_CONDUCT.md)\n\n## Roadmap\n\n- Update general documentation\n- Migrating to TypeScript all components\n- Fix the issues and clean code. Make it simpler, faster, lighter\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxafrance%2Freact-toolkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faxafrance%2Freact-toolkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxafrance%2Freact-toolkit/lists"}