Coder Social home page Coder Social logo

djedje72 / react-toolkit Goto Github PK

View Code? Open in Web Editor NEW

This project forked from axafrance/react-toolkit

0.0 0.0 0.0 57.6 MB

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

Home Page: https://axaguildev.github.io/design-system/

License: MIT License

JavaScript 4.16% TypeScript 65.02% CSS 2.49% HTML 0.14% Handlebars 0.10% SCSS 28.09%

react-toolkit's Introduction

@axa-fr/react-toolkit

Build status Quality Gate Reliability Security Code Corevage lerna Twitter

About

A 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!

How React-toolkit does CSS isolation?

Only by using BEM (Block Element Modifier) CSS convention. No need for intricate technologies, just pragmatism.

Components 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.

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

html+css documentation website react storybook website

Getting Started

You 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. However, you will need to import all the styles and not only the style related to your component.

npm install @axa-fr/react-toolkit-all --save
import React from 'react';

// Load only the component alert (smaller bundle size)
import { Alert } from '@axa-fr/react-toolkit-all/component/alert';

// Load all the toolkit (bigger bundle size)
import { Alert } from '@axa-fr/react-toolkit-all';

import '@axa-fr/react-toolkit-all/dist/style/af-toolkit-core.scss';

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

Or you can install only the components you need:

npm install @axa-fr/react-toolkit-alert --save
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

List of supported browsers

Here is the list of browsers we tested this toolkit on:

  • Chrome 84+
  • Firefox 79+
  • Microsoft Edge 85+
  • Internet Explorer 11
  • Safari 13.1+
  • Opera 71+

Contribute

Roadmap

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

react-toolkit's People

Contributors

arnaudforaison avatar xballoy avatar guillaumechervetaxa avatar samuel-gomez-axa avatar dependabot-preview[bot] avatar guillaume-chervet avatar gcruchon avatar julienbirgand avatar martinweb avatar cleclemi28 avatar barry-thierno avatar youf-olivier avatar johnmeunier avatar vharny avatar oussamahamdaoui avatar jlou avatar triathete23 avatar dependabot[bot] avatar danneelssophie avatar hakan-orak avatar jforatier avatar hamzahamidi avatar cyril-lakech avatar vincent-ducrocq-axa avatar croquet-mickael avatar andriamiravaka-rado avatar tbmc avatar samuel-gomez avatar debaerdm avatar jmittelette avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.