React - DER/RO Componentes

Bliblioteca de compoenntes React que seguem o design system do DER/RO.

Pré-requisitos

Possuir um projeto React; Ter instalado e configurado Tailwindcss;

1. Instalação

Instale a biblioteca no seu projeto utilizando o seguinte comando:

    npm install der-componentes

2. Configuração

No seu arquivo principal .css (main.css, app.css, index.css, etc), adicione:

    @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. Uso

Em qualquer arquivo .js, .ts, .jsx ou .tsx, basta importar o componente ou hook que deseja utilizar.

Ex.:

    import { PrimaryButton, useData } from "der-componentes";

    const [data, setData] = useData({
        foo: "bar"
    });

    return (
        <PrimaryButton onClick={() => setData("foo", "bar2")}>Enviar</PrimaryButton>
    )

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:

       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:

       npm publish