@rdsaude/pulso-react-components NPM

@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:

# 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:

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:

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:

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

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

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.