@rdsaude/pulso-react-components/README.md

Biblioteca de componentes React do Pulso Design System da RD Saúde oferece componentes consistentes e de alto desempenho, alinhados com os padrões da RDSaúde. Ideal para desenvolver aplicações modernas e acessíveis.

# @rdsaude/pulso-react-components

A **biblioteca de componentes React do Pulso Design System** da RD Saúde oferece uma coleção robusta de componentes acessíveis, escaláveis e alinhados com os padrões de design e usabilidade da companhia. Ela foi projetada para atender com consistência os produtos das bandeiras **Raia**, **Drogasil** e demais sistemas internos.

## 🚀 Instalação

Antes de instalar, certifique-se de que o seu projeto utiliza o **React 18 ou superior**.

### Usando o gerenciador de pacotes de sua preferência:

```bash
# npm
npm install @rdsaude/pulso-react-components

# yarn
yarn add @rdsaude/pulso-react-components

# pnpm
pnpm add @rdsaude/pulso-react-components
```

## ⚙️ Configuração

### 1. Importação dos estilos globais

Para garantir o funcionamento visual dos componentes, importe os estilos base no ponto de entrada da sua aplicação:

```tsx
import "@rdsaude/pulso-react-components/styles.css";
```

> ℹ️ Esta etapa é essencial para que os estilos da biblioteca sejam aplicados corretamente.

### 2. Definindo o tema

Utilize o `ThemeProvider` para aplicar o tema da marca desejada:

```tsx
import { ThemeProvider } from "@rdsaude/pulso-react-components";

export function App() {
  return (
    <ThemeProvider theme="drogasil">
      {/* Sua aplicação aqui */}
    </ThemeProvider>
  );
}
```

## 🧰 Utilização dos componentes

Após configurar os estilos e o tema, você já pode importar e usar os componentes:

```tsx
import { Button, InputText } from "@rdsaude/pulso-react-components";
```

Ou, se preferir uma importação mais específica:

```tsx
import { Button } from "@rdsaude/pulso-react-components/button";
```

> 💡 A biblioteca segue o padrão de composição de componentes. Para entender melhor esse modelo, recomendamos a leitura deste [artigo sobre o Compound Pattern](https://www.patterns.dev/react/compound-pattern/).

## 🤝 Contribuindo

Este projeto segue o modelo de **[Inner Source](https://en.wikipedia.org/wiki/Inner_source)**, ou seja, as contribuições estão restritas aos colaboradores da RD Saúde.

Se você faz parte do time, acesse a [documentação de contribuição](https://gitlab.com/raiadrogasil/rd/designsystem/pulso-design-system/-/blob/main/CONTRIBUTING.md) para saber como participar.

## 📄 Licença

Para mais detalhes sobre o uso e redistribuição deste pacote, consulte a [licença completa aqui](https://gitlab.com/raiadrogasil/rd/designsystem/pulso-design-system/-/blob/main/LICENSE).