<p align="center">
  <br/>
  <img alt="Maga Components" src="https://cdn.jsdelivr.net/npm/maga-components@0.19.3/dist/assets/images/logo-maga-components-blue.png" width="auto" height="150" />
  <br/>
  <h1 align="center">Maga Components</h1>
  <br/>
</p>

<h4 align="center">Biblioteca de components React genéricos e flexiveis do Magazine Luiza</h4>

<p align="center">
  <a href="https://badge.fury.io/js/maga-components">
    <img src="https://badge.fury.io/js/maga-components.svg"
         alt="Gitter">
  </a>
  
</p>

## 🤔 Conceito

Centralização de todos os conjuntos de componentes **React** implementados para padronização de interface dos Sistemas do **Magazine Luiza**.

## ⚡ Maga Components

São componentes personalizados que podem mesclar componentes de terceiros, do semantic ou originais para atender de maneira abstrata, genérica e encapsulada as necessidade de interface do negócio.

## 😍 Base - Semantic UI React

Utilizamos como base todos os componentes da lib [Semantic UI React](https://react.semantic-ui.com/)

## 🌈 MagaFront ↔️ MagaComponents

O **BoilerPlate** Magafront utiliza apenas os componentes do MagaComponents.

## 💾 Instalação

### com yarn

```sh
yarn add maga-components
```

### com npm

```sh
npm install maga-components
```

## 🚀 Utilização

    import { MagaForm } from 'maga-components'

## 📙 Docs

### Dev

```sh
yarn/ npm run docz:dev
```

### Build

```sh
yarn/ npm build
```

### Deploy

```sh
npm publish .
```

## 🔥 Gif Demo

<img alt="MagaForm" src="https://cdn.jsdelivr.net/npm/maga-components@0.19.5/dist/assets/images/sample.gif" />
