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:

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.

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:

import { Heading } from @paciente360/p360-ui;

function App() {
  <Heading as="h2">
    Título h2
  </Heading>
}

export default App;

Como contribuir

Clone o projeto

git clone https://github.com/paciente360/p360-components-ui-front.git

Instale as dependências

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:

git pull origin main

Crie um novo branch para desenvolver os componentes

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:

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.