npm package: @paciente360/p360-ui
Description: Este projeto é uma biblioteca de componentes React, que visa fornecer componentes padronizados para os projetos frontend do Paciente360, com o objetivo de promover a consistência e a reutilização.
Latest version: 0.1.32

# React UI Components for Paciente360

Este projeto é uma biblioteca de componentes React, que visa fornecer componentes padronizados para os projetos frontend do Paciente360, com o objetivo de promover a consistência e a reutilização.

## Como usar esta lib em um projeto

Na raiz do projeto que você deseja instalar, abra o terminal e digite:

```bash
npm install @paciente360/p360-ui
```

Em seguida va para parte superior na hierarquia do seu aplicativo React, normalmente em `main.tsx` e envolva a sua aplicação com o `P360UiProvider`.

```jsx
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App.tsx"
import "./index.css"
import { P360UiProvider } from "@paciente360/p360-ui";

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <P360UiProvider>
      <App />
    </P360UiProvider>
  </React.StrictMode>,
)
```

Exemplo de uso de um componente:

```jsx
import { Heading } from @paciente360/p360-ui;

function App() {
  <Heading as="h2">
    Título h2
  </Heading>
}

export default App;
```

## Como contribuir

Clone o projeto

```bash
git clone https://github.com/paciente360/p360-components-ui-front.git
```

Instale as dependências

```bash
npm install
```

Sempre é uma boa prática garantir que seu repositório esteja atualizado antes de criar um novo branch. Você pode fazer isso com:

```bash
git pull origin main
```

Crie um novo branch para desenvolver os componentes

```bash
git checkout -b nome-do-branch
```

Todos os componentes devem ser criados dentro da pasta `lib/components` e exportados em `lib/main.ts`. Durante o desenvolvimento você pode importar o componente dentro AppDev.tsx e executar `npm run dev` para subir o servidor de desenvolvimento, não se deve fazer commit das mudanças nesse arquivo, pois está disponível apenas para fins de desenvolvimento.

Alternativamente você pode criar o stories com o `Storybook` e ir testando o componente mas é um processo mais demorado.

## Testando

Você pode criar stories para os componentes que criar, para testar e documentar as suas funcionalidades da seguinte forma:

// TODO

Além disso depois terminar de construir o componente, é uma boa prática executar `npm run build` para transpilar o código do componente de typescript para javascript e gerar os arquivos finais da biblioteca. Em seguida importar os componentes dentro de `lib/AppDev.tsx`, e verificar se o componente é renderizado corretamente, usando o seguinte padrão:

```javascript
import { Heading } from "../";

function AppDev() {
  return (
    <div className="w-screen h-screen flex justify-center pt-8 bg-slate-700">
      <div className="w-full max-w-lg flex flex-col gap-4">
        <Heading as="h1">Título H1</Heading>
      </div>
    </div>
  );
}

export default AppDev;
```

Isso será o mesmo que `import { Heading } from "@paciente360/p360-ui"` quando esta biblioteca estiver instalada em um projeto, assim você estará importando o componente que está dentro da pasta `dist`.