# @rdsaude/pulso-react-components

A biblioteca de componentes React do **Pulso Design System** da RD Saúde oferece uma coleção de componentes consistentes e de alto desempenho, totalmente alinhados com os padrões da companhia. Ela é ideal para o desenvolvimento de aplicações modernas, acessíveis e escaláveis, que atendam tanto às bandeiras Raia e Drogasil quanto aos sistemas internos.

## Instalação

Para começar a usar a biblioteca, certifique-se de que a versão do React em seu projeto seja **>= 18**. Caso esteja tudo certo, siga os passos abaixo para adicionar o pacote ao seu projeto:

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

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

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

## Como utilizar?

1. **Importação dos estilos essenciais**<br>
   Para garantir o funcionamento adequado dos componentes, é necessário importar os estilos principais no ponto de entrada da aplicação:

```tsx
import "@rdsaude/pulso-react-components/styles.css";
```
Essa importação é fundamental para que a biblioteca aplique corretamente a estilização em todos os componentes.

2. **Definindo o tema da aplicação**<br>
   A biblioteca oferece uma maneira para você definir o tema da aplicação:

- Você pode envolver toda a aplicação com o `ThemeProvider`, passando o tema desejado via a propriedade `theme`:

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

export function App() {
  return (
    <ThemeProvider theme="drogasil">
      {/* your-application */}
    </ThemeProvider>
  );
}
```

3. **Começando a utilizar os componentes**<br>
   Após configurar os estilos e o tema, você já pode importar e utilizar os componentes da biblioteca. Exemplo de como fazer isso:

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

Você também pode importar o componente de forma isolada. Exemplo de como fazer isso:

```tsx
import { ComponentA } from "@rdsaude/pulso-react-components/component-a";
```

**Dica**: Estamos utilizando o padrão de composição de componentes. Se você quiser aprender mais sobre esse padrão, confira este [artigo](https://www.patterns.dev/react/compound-pattern/).

## Contribuição

Nosso modelo de contribuição é baseado no conceito de **[Inner Source](https://en.wikipedia.org/wiki/Inner_source)**, o que significa que apenas colaboradores da RD Saúde podem contribuir diretamente para o projeto. Se você faz parte da equipe, consulte a [documentação de contribuição](https://gitlab.com/raiadrogasil/rd/designsystem/pulso-design-system/-/blob/main/CONTRIBUTING.md) para mais informações.

## Licença

Para detalhes sobre o uso deste pacote, leia a licença completa disponível [aqui](https://gitlab.com/raiadrogasil/rd/designsystem/pulso-design-system/-/blob/main/LICENSE).