UI just like magic

Grimório✨ é uma coleção de componentes de interface do usuário prontos para serem utilizados em projetos feitos com React ⚛️. São 40 componentes inspirados pelo Material Design com personalização através de Variáveis CSS!

Versão estável X versão BETA

Para manter o nosso projeto compatível com novas versões do React nós lançamentos a versão 13.x.x-beta. Essa versão será a responsável por tratar das atualizações referentes ao React 18 e suas atualizações.

Caso você esteja buscando por uma versão estável, utilize a nossa versão LTS que deve se manter na versão 16.14 do React.

NOTA

A versão 13.x.x-beta trata apenas de atualização do React, para ter atualização de componentes utilize a versão com a tag -lts.

Para ver todas as versões disponíveis acesse o NPM.

📦 Instalação

Importe o CSS do Grimório✨ no seu arquivo de entrada ou na lista de entrypoints do seu Webpack:

Primeiro, instale o pacote vindo do npm:

yarn add @b2wads/grimorio-ui@<versão desejada>

npm i @b2wads/grimorio-ui<versão desejada>

// import the CSS on js

import '[path/to/node_modules]/@b2wads/grimorio-ui/lib/css/grimorio-ui.min.css';

// or

{ 
  //...webpack configs
  entry: {
    'your-app': [
      '[path/to/node_modules]/@b2wads/grimorio-ui/lib/css/grimorio-ui.min.css',
      'index.js',
    ],
  },
}

E então, é só usar!

// component.js

import { Alert } from '@b2wads/grimorio-ui';

Caso seu webpack ignore o node_modules na hora de gerar o build de CSS, é necessário criar uma regra para incluir o CSS do Grimório✨.

// exemplo de exceção no webpack 3.X.X
{
  test: /\.css$/,
  include: path.resolve(__dirname, '[path/to/node_modules]/@b2wads/grimorio-ui/css/grimorio-ui.min.css'),
  use: ['style-loader', 'css-loader', { ... }],
},

💅 Personalização

Caso seja necessário mudar as cores principais do Grimório✨ é possível através de variáveis CSS. Veja o guia de personalização para entender como.

🕰 Migração de versões antigas

Para migrar vindo de versões anteriores do Grimório✨, basta procurar o guia correspondente a sua versão no nosso guia de migração.

🕹 Desenvolvimento

Antes de começar a contribuir com o Grimório✨, leia nosso guia de contribuição.

📘 Visualização com Storybook

Para visualizar e interagir com os componentes do Grimório✨, basta rodar localmente o storybook.

yarn storybook

⛏️ Build e Pack

Para chamar a build e gerar o pacote, o comando é:

yarn pack:dist

📋 Copiar

Remove o pacote antigo do repositório APP e copia o novo

APP=[path/to/app]/your-webapp yarn cp:pack

🧪 Rodando testes

yarn test

💻 CLI

Temos um script sh que fica encarregado por criar a estrutura de arquivos e pastas dos componentes.

yarn create:comp nome-do-componente

Esse comando será capaz de criar as pastas e arquivos corretamente para iniciar o desenvolvimento de um componente.

📜 Docs

Mais informações sobre deploy, code style e referências pode ser encontrado nas docs a wiki