antoineblancke / react-toolkit

Flexible components html + css + react using BEM convention. Maybe, you can call it "Design System" !

@axa-fr/react-toolkit

• About
• Getting Started
• Packages
• Concept
• How Does It Work
• Contribute
• Roadmap
• Demo

About

A set of independent components. Awesome library based on HTML and CSS using BEM convention with the JavaScript ReactJS implementation. Each components are autonomous and extensible. Pick and use only what you need!

How React-toolkit does CSS isolation?

Only by using BEM (Block Element Modifier) CSS convention. No need of the intricate technologies, just pragatism.

Components are simple to use (just drag and drog it), simple to customize (by using CSS modifier) to your own need. Each component may evaluate internally (HTML, CSS, JS) and minimize an impact on your application.

You can easily build a new app from scratch or integrate some component into existing application.

html+css documentation website react storybook website

Getting Started

Install what you need

npm install @axa-fr/react-toolkit-alert --save

Use only what you need

import React from 'react';
import Alert from '@axa-fr/react-toolkit-alert';
import '@axa-fr/react-toolkit-alert/dist/alert.scss';

const MyAlertComponent => () => (
<Alert
    icon="ok"
    title="This is an alert"
  />
)

Packages

• @axa-fr/react-toolkit-all
• @axa-fr/react-toolkit-action
• @axa-fr/react-toolkit-alert
• @axa-fr/react-toolkit-badge
• @axa-fr/react-toolkit-button
• @axa-fr/react-toolkit-collapse
• @axa-fr/react-toolkit-core
• @axa-fr/react-toolkit-form-core
• @axa-fr/react-toolkit-form-filter
• @axa-fr/react-toolkit-form-filter-inline
• @axa-fr/react-toolkit-form-input-card
• @axa-fr/react-toolkit-form-input-checkbox
• @axa-fr/react-toolkit-form-input-choice
• @axa-fr/react-toolkit-form-input-date
• @axa-fr/react-toolkit-form-input-date-phone
• @axa-fr/react-toolkit-form-input-file
• @axa-fr/react-toolkit-form-input-number
• @axa-fr/react-toolkit-form-input-pass
• @axa-fr/react-toolkit-form-input-radio
• @axa-fr/react-toolkit-form-input-select
• @axa-fr/react-toolkit-form-input-select-multi
• @axa-fr/react-toolkit-form-input-slider
• @axa-fr/react-toolkit-form-input-switch
• @axa-fr/react-toolkit-form-input-text
• @axa-fr/react-toolkit-form-input-textarea
• @axa-fr/react-toolkit-form-steps
• @axa-fr/react-toolkit-form-summary
• @axa-fr/react-toolkit-help
• @axa-fr/react-toolkit-highlight
• @axa-fr/react-toolkit-icon
• @axa-fr/react-toolkit-layout-footer
• @axa-fr/react-toolkit-layout-footer-client
• @axa-fr/react-toolkit-layout-header
• @axa-fr/react-toolkit-link
• @axa-fr/react-toolkit-list
• @axa-fr/react-toolkit-loader
• @axa-fr/react-toolkit-modal-boolean
• @axa-fr/react-toolkit-modal-default
• @axa-fr/react-toolkit-panel
• @axa-fr/react-toolkit-popover
• @axa-fr/react-toolkit-restitution
• @axa-fr/react-toolkit-status
• @axa-fr/react-toolkit-table
• @axa-fr/react-toolkit-tabs
• @axa-fr/react-toolkit-title

Concept

Each component should be autonomous (HTML + CSS + JS) and extensible.

How Does It Work

• HTML/CSS :

  • BEM convention is used in order to break CSS cascading problem
  • SCSS and CSS files are avalaible for every component and can be overrided or extended
  • HTML/CSS Documentation

• React :

  • Components are stateless by default
  • Some Higher Order Components (HOC) are stateful but feel free to use the stateless one if it fits your use case
  • React documentation

Contribute

• How to run the solution and to contribute
• Please respect our code of conduct

Roadmap

• Update general documentation
• Migrating to TypeScript all components
• Fix the issues and clean code. Make it simpler, faster, lighter