Skip to content
Flexible components html + css + react using BEM convention. May be, you can call it "Design System" !
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode fix(publish) design system website (#209) May 3, 2019
__mocks__ first commit Nov 12, 2018
examples chore(release): publish v1.2.8 [ci skip] Jul 9, 2019
packages fix: omit props and display errors (#309) Jul 10, 2019
scripts fix(publish) design system website (#209) May 3, 2019
storybook chore(release): publish v1.2.8 [ci skip] Jul 9, 2019
.babelrc first commit Nov 12, 2018
.editorconfig first commit Nov 12, 2018
.eslintignore first commit Nov 12, 2018
.eslintrc first commit Nov 12, 2018
.gitattributes first commit Nov 12, 2018
.gitignore fix(publish) design system website (#209) May 3, 2019
.mergify.yml chore(mergify) adapt mergify configuration (#97) Feb 28, 2019
.prettierignore first commit Nov 12, 2018
.prettierrc first commit Nov 12, 2018
CHANGELOG.md docs(changelog) update to new 1.2.8 Jul 9, 2019
CODE_OF_CONDUCT.md doc: Adding imports documentation for badge (#63) Feb 8, 2019
CONTRIBUTING.md feature(table) migrate table component to typescript (#96) Feb 28, 2019
ISSUE_TEMPLATE.md fix(doc) grammar corrections + add pull request template file Feb 8, 2019
LICENSE first commit Nov 12, 2018
PULL_REQUEST_TEMPLATE.md fix(doc) grammar corrections + add pull request template file Feb 8, 2019
README.md
azure-pipelines.yml Design system (#168) May 2, 2019
changelog-template.hbs chore(latest) manage lastest docs + fix readme management (#36) Jan 18, 2019
gulpfile.js first commit Nov 12, 2018
jest.config.json chore(latest) manage lastest docs + fix readme management (#36) Jan 18, 2019
lerna.json chore(release): publish v1.2.8 [ci skip] Jul 9, 2019
package-lock.json feat: design for file input #305 (#306) Jul 5, 2019
package.json
tsconfig.dev.json first commit Nov 12, 2018
tsconfig.json first commit Nov 12, 2018
tsconfig.test.json first commit Nov 12, 2018
tslint.json feature(table) migrate table component to typescript (#96) Feb 28, 2019

README.md

@axa-fr/react-toolkit

Build status Quality Gate Reliability Security Code Corevage lerna

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

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

Roadmap

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

Demo

alt text

You can’t perform that action at this time.