Bliblioteca de compoenntes React que seguem o design system do DER/RO
npm install der-componentesdesign system do DER/RO.
bash
npm install der-componentes
`
$3
No seu arquivo principal .css (main.css, app.css, index.css, etc), adicione:
`css
@import "tailwindcss";
@source "../node_modules/der-componentes";
...
`
Isto faz com que o tailwind reconheça as classes utilitárias utilizadas nos componentes da biblioteca e aplique a estilização corretamente.
$3
Em qualquer arquivo .js, .ts, .jsx ou .tsx, basta importar o componente ou hook que deseja utilizar.
Ex.:
`js
import { PrimaryButton, useData } from "der-componentes";
`
`js
const [data, setData] = useData({
foo: "bar"
});
return (
setData("foo", "bar2")}>Enviar
)
`
4. Componentes
Botões:
- PrimaryButton
- SecondaryButton
- DeleteButton
Inputs:
- Checkbox
- InputLabel
- InputText
- Select
Icons:
- MapPinIcon
- PhoneIcon
- ClockIcon
- XIcon
- ArrowLeftIcon
- ArrowRightIcon
- ArrowDownIcon
- ListIcon
Hooks:
- useData
- useBreadcrumbs
Interface:
- Header
- Footer
- Card
- Modal
- Table
- TableHead
- TabelaRow
- TableData
- TableFoot
- Menu
- Sidebar
5. Contribuindo
Para realizar contribuições, alterações, melhorias ou adição de novos componentes na biblioteca, recomenda-se que utilize o padrão de desenvolvimento sugerido.
1. Clone o projeto no seu ambiente local
2. Abra uma nova Issue no [Gitlab]() do projeto
3. Crie uma nova Branch apartir da Issue criada
4. Inicie o desenvolvimento
5. Teste suas alterações
6. Commite seu código
7. Publique as alterações no npm
6. Publicando
Para publicar uma nova versão da biblioteca:
1. Tenha certeza que os seus componentes estão sendo devidamente exportados no src/index.ts
2. Realize o build do código TypeScript com o comando:
`bash
npm run build
`
3. Altere a propriedade "version" no arquivo package.json de forma semântica, seguindo os padrões de Major, Minor, Path, etc.
(siga o padrão KeepAChangeLog)
4. Publique as alterações no npmjs.com com o comando:
`bash
npm publish
``