Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/b2wads/grimorio-ui
Grimório✨ | UI just like magic
https://github.com/b2wads/grimorio-ui
css-modules css-variables react uikit
Last synced: 4 days ago
JSON representation
Grimório✨ | UI just like magic
- Host: GitHub
- URL: https://github.com/b2wads/grimorio-ui
- Owner: b2wads
- License: mit
- Created: 2019-05-28T18:00:14.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-04T12:41:38.000Z (almost 1 year ago)
- Last Synced: 2024-08-09T08:26:36.150Z (about 2 months ago)
- Topics: css-modules, css-variables, react, uikit
- Language: JavaScript
- Homepage: https://b2wads.github.io/grimorio-ui/
- Size: 36.6 MB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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!
[](https://www.npmjs.com/package/@b2wads/grimorio-ui)
[](https://github.com/b2wads/grimorio-ui/issues)
[](https://github.com/b2wads/grimorio-ui/graphs/contributors)
[](https://b2wads.github.io/grimorio-ui/)
[](https://github.com/b2wads/grimorio-ui/actions?query=workflow%3A%22Jest+Tests%22)
# 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](https://github.com/facebook/react/blob/main/CHANGELOG.md#1820-june-14-2022) 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](https://github.com/facebook/react/blob/main/CHANGELOG.md#16140-october-14-2020) 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](https://www.npmjs.com/package/@b2wads/grimorio-ui/v/12.0.0-beta?activeTab=versions).
# 📦 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:
```bash
yarn add @b2wads/grimorio-ui@
```
```bash
npm i @b2wads/grimorio-ui
```
```js
// 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!
```js
// 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✨.
```js
// 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](https://developer.mozilla.org/pt-BR/docs/Web/CSS/var). Veja o [guia de personalização](https://github.com/b2wads/grimorio-ui/wiki/_advanced-css)
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](https://github.com/b2wads/grimorio-ui/wiki/Migra%C3%A7%C3%B5es).
# 🕹 Desenvolvimento
Antes de começar a contribuir com o Grimório✨, leia nosso [guia de contribuição](./CONTRIBUTING.md).
### 📘 Visualização com Storybook
Para visualizar e interagir com os componentes do Grimório✨, basta rodar localmente o `storybook`.
```bash
yarn storybook
```
### ⛏️ Build e Pack
Para chamar a build e gerar o pacote, o comando é:
```bash
yarn pack:dist
```
### 📋 Copiar
Remove o pacote antigo do repositório `APP` e copia o novo
```bash
APP=[path/to/app]/your-webapp yarn cp:pack
```
### 🧪 Rodando testes
```bash
yarn test
```
### 💻 CLI
Temos um script sh que fica encarregado por criar a estrutura de arquivos e pastas dos componentes.
```sh
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](https://github.com/b2wads/grimorio-ui/wiki/Docs)