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

# 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 Para garantir o funcionamento adequado dos componentes, é necessário importar os estilos principais no ponto de entrada da aplicação:

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

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

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

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

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

Dica: Estamos utilizando o padrão de composição de componentes. Se você quiser aprender mais sobre esse padrão, confira este artigo.

Contribuição

Nosso modelo de contribuição é baseado no conceito de 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 para mais informações.

Licença

Para detalhes sobre o uso deste pacote, leia a licença completa disponível aqui.