{"id":15250461,"url":"https://github.com/b2wads/grimorio-ui","last_synced_at":"2025-07-02T21:05:02.507Z","repository":{"id":169826101,"uuid":"189077956","full_name":"b2wads/grimorio-ui","owner":"b2wads","description":"Grimório✨ | UI just like magic","archived":false,"fork":false,"pushed_at":"2023-10-04T12:41:38.000Z","size":38420,"stargazers_count":2,"open_issues_count":13,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-02T21:04:21.030Z","etag":null,"topics":["css-modules","css-variables","react","uikit"],"latest_commit_sha":null,"homepage":"https://b2wads.github.io/grimorio-ui/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/b2wads.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-28T18:00:14.000Z","updated_at":"2023-06-16T20:41:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"fbeda58d-8d5d-4611-8813-c700a730c2e5","html_url":"https://github.com/b2wads/grimorio-ui","commit_stats":null,"previous_names":["b2wads/grimorio-ui"],"tags_count":61,"template":false,"template_full_name":null,"purl":"pkg:github/b2wads/grimorio-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b2wads%2Fgrimorio-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b2wads%2Fgrimorio-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b2wads%2Fgrimorio-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b2wads%2Fgrimorio-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/b2wads","download_url":"https://codeload.github.com/b2wads/grimorio-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b2wads%2Fgrimorio-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263215288,"owners_count":23431893,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-modules","css-variables","react","uikit"],"created_at":"2024-09-29T16:04:57.427Z","updated_at":"2025-07-02T21:05:02.441Z","avatar_url":"https://github.com/b2wads.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Grimório✨\" src=\"internals/logo/logo-grimorio-cores.png?raw=true\"\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003e\n  UI just like magic\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  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 \u003ca href=\"https://material.io/design/\"\u003eMaterial Design\u003c/a\u003e com personalização através de \u003ca href=\"https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties\"\u003eVariáveis CSS\u003c/a\u003e!\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  [![npm version](https://img.shields.io/npm/v/@b2wads/grimorio-ui?label=npm%20package)](https://www.npmjs.com/package/@b2wads/grimorio-ui)\n  [![GitHub issues](https://img.shields.io/github/issues/b2wads/grimorio-ui)](https://github.com/b2wads/grimorio-ui/issues)\n  [![GitHub contributors](https://img.shields.io/github/contributors/b2wads/grimorio-ui)](https://github.com/b2wads/grimorio-ui/graphs/contributors)  \n  [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://b2wads.github.io/grimorio-ui/)\n  [![Jest Tests](https://github.com/b2wads/grimorio-ui/workflows/Jest%20Tests/badge.svg)](https://github.com/b2wads/grimorio-ui/actions?query=workflow%3A%22Jest+Tests%22) \n\u003c/div\u003e\n\n\n# Versão estável X versão BETA\n\nPara 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.\n\nCaso 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. \n\n#### NOTA\nA 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**.\n\nPara 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).\n\n# 📦 Instalação\n\nImporte o CSS do Grimório✨ no seu arquivo de entrada ou na lista de entrypoints do seu Webpack:\n\nPrimeiro, instale o pacote vindo do npm:\n\n```bash\nyarn add @b2wads/grimorio-ui@\u003cversão desejada\u003e\n```\n```bash\nnpm i @b2wads/grimorio-ui\u003cversão desejada\u003e\n```\n\n\n```js\n// import the CSS on js\n\nimport '[path/to/node_modules]/@b2wads/grimorio-ui/lib/css/grimorio-ui.min.css';\n\n// or\n\n{ \n  //...webpack configs\n  entry: {\n    'your-app': [\n      '[path/to/node_modules]/@b2wads/grimorio-ui/lib/css/grimorio-ui.min.css',\n      'index.js',\n    ],\n  },\n}\n\n```\n\nE então, é só usar!\n\n```js\n// component.js\n\nimport { Alert } from '@b2wads/grimorio-ui';\n```\n\nCaso 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✨.\n\n```js\n// exemplo de exceção no webpack 3.X.X\n{\n  test: /\\.css$/,\n  include: path.resolve(__dirname, '[path/to/node_modules]/@b2wads/grimorio-ui/css/grimorio-ui.min.css'),\n  use: ['style-loader', 'css-loader', { ... }],\n},\n```\n\n### 💅 Personalização\n\nCaso 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)\n para entender como.\n\n### 🕰 Migração de versões antigas\nPara 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).\n\n\n# 🕹 Desenvolvimento\n\nAntes de começar a contribuir com o Grimório✨, leia nosso [guia de contribuição](./CONTRIBUTING.md).\n\n### 📘 Visualização com Storybook\n\nPara visualizar e interagir com os componentes do Grimório✨, basta rodar localmente o `storybook`.\n\n```bash\nyarn storybook\n```\n\n### ⛏️ Build e Pack\nPara chamar a build e gerar o pacote, o comando é:\n\n```bash\nyarn pack:dist\n```\n\n### 📋 Copiar\nRemove o pacote antigo do repositório `APP` e copia o novo\n\n```bash\nAPP=[path/to/app]/your-webapp yarn cp:pack\n```\n\n### 🧪 Rodando testes\n\n```bash\nyarn test\n```\n\n### 💻 CLI\n\nTemos um script sh que fica encarregado por criar a estrutura de arquivos e pastas dos componentes.\n\n```sh\nyarn create:comp nome-do-componente\n```\n\nEsse comando será capaz de criar as pastas e arquivos corretamente para iniciar o desenvolvimento de um componente.\n\n### 📜 Docs\n\nMais informações sobre deploy, code style e referências pode ser encontrado nas [docs a wiki](https://github.com/b2wads/grimorio-ui/wiki/Docs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb2wads%2Fgrimorio-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fb2wads%2Fgrimorio-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb2wads%2Fgrimorio-ui/lists"}