open-index/open-npm huggingface dataset:
npm package: @rds/components
Description: [![npm version](https://badge.fury.io/js/%40rds%2Fcomponents.svg)](https://badge.fury.io/js/%40rds%2Fcomponents)
Latest version: 1.16.3

# Rich Data Service Component Library for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40rds%2Fcomponents.svg)](https://badge.fury.io/js/%40rds%2Fcomponents)

## Installation

The latest release of the library can be installed from npm

`npm install @rds/components`
npm package: @rds/rds-base
Description: [![npm version](https://badge.fury.io/js/%40rds%2Frds-base.svg)](https://badge.fury.io/js/%40rds%2Frds-base)
Latest version: 1.2.0

# RDS-Base for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40rds%2Frds-base.svg)](https://badge.fury.io/js/%40rds%2Frds-base)

## Installation

The latest release of the library can be installed from npm

`npm install @rds/rds-base`
npm package: @rds/rds-metadata
Description: [![npm version](https://badge.fury.io/js/%40rds%2Frds-metadata.svg)](https://badge.fury.io/js/%40rds%2Frds-metadata)
Latest version: 1.3.0

# RDS-Metadata for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40rds%2Frds-metadata.svg)](https://badge.fury.io/js/%40rds%2Frds-metadata)

## Installation

The latest release of the library can be installed from npm

`npm install @rds/rds-metadata`
npm package: @rds/rds-packaging
Description: [![npm version](https://badge.fury.io/js/%40rds%2Frds-packaging.svg)](https://badge.fury.io/js/%40rds%2Frds-packaging)
Latest version: 1.2.0

# RDS-Packaging for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40rds%2Frds-packaging.svg)](https://badge.fury.io/js/%40rds%2Frds-packaging)

## Installation

The latest release of the library can be installed from npm

`npm install @rds/rds-packaging`
npm package: @rds/rds-reader-manager
Description: [![npm version](https://badge.fury.io/js/%40rds%2Frds-reader-manager.svg)](https://badge.fury.io/js/%40rds%2Frds-reader-manager)
Latest version: 1.1.1

# RDS-Reader-Manager for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40rds%2Frds-reader-manager.svg)](https://badge.fury.io/js/%40rds%2Frds-reader-manager)

## Installation

The latest release of the library can be installed from npm

`npm install @rds/rds-reader-manager`
npm package: @rds/shared-api
Description: [![npm version](https://badge.fury.io/js/%40rds%2Fshared-api.svg)](https://badge.fury.io/js/%40rds%2Fshared-api)
Latest version: 1.16.3

# @rds/shared-api Library for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40rds%2Fshared-api.svg)](https://badge.fury.io/js/%40rds%2Fshared-api)

## Installation

The latest release of the library can be installed from npm

`npm install @rds/shared-api`
npm package: @rds/shared-common
Description: [![npm version](https://badge.fury.io/js/%40rds%2Fshared-common.svg)](https://badge.fury.io/js/%40rds%2Fshared-common)
Latest version: 0.3.4

# @rds/shared-common Library for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40rds%2Fshared-common.svg)](https://badge.fury.io/js/%40rds%2Fshared-common)

## Installation

The latest release of the library can be installed from npm

`npm install @rds/shared-common`
npm package: @rds/shared-ng-common
Description: [![npm version](https://badge.fury.io/js/%40rds%2Fshared-ng-common.svg)](https://badge.fury.io/js/%40rds%2Fshared-ng-common)
Latest version: 1.16.3

# @rds/shared-ng-common Library for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40rds%2Fshared-ng-common.svg)](https://badge.fury.io/js/%40rds%2Fshared-ng-common)

## Installation

The latest release of the library can be installed from npm

`npm install @rds/shared-ng-common`
npm package: @rdsaude/pulso-react-components
Description: 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.
Author: RD Saúde
Latest version: 3.19.1

# @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).
npm package: @rdsaude/pulso-react-native-components
Description: Biblioteca de componentes React Native 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.
Author: RD Saúde
Latest version: 2.20.0

# @rdsaude/pulso-react-native-components

A biblioteca de componentes React Native do Pulso Design System da RD Saúde oferece componentes consistentes e de alto desempenho, alinhados com os padrões da companhia. Ela é ideal para desenvolver aplicações modernas e acessíveis que atendam às bandeiras da Raia, Drogasil e sistemas internos.

## Instalação

Para instalar a biblioteca em seu projeto, é necessário que você tenha `React >= 18` e `React Native >= 73` já instalados. Após garantir essas versões, siga os passos abaixo para adicionar a biblioteca ao seu projeto:

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

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

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

## Como utilizar?

1. No ponto de entrada do seu projeto, importe o `ThemeProvider` conforme o exemplo abaixo:

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

export default function App() {
  return (
    // Temas disponíveis: rdsaudesistemas, raia e drogasil
    <ThemeProvider theme="rdsaudesistemas">
      {/* sua-aplicação */}
    </ThemeProvider>
  );
}
```

Substitua `sua-aplicação` pelo conteúdo da sua aplicação dentro do `ThemeProvider` para aplicar o tema desejado.

2. Na sua página, comece importando um dos nossos componentes. No exemplo abaixo, importamos o componente `Button`. Para conhecer todos os nossos componentes e como utilizá-los, acesse nossa [documentação oficial](https://pulso-react-native.rd.com.br/v2/) no Storybook.

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

export function Home() {
  return (
    <View>
      <Text>Home</Text>
      <Button>
        <Button.Text>Button</Button.Text>
      </Button>
    </View>
  );
}
```

Observe que estamos utilizando um padrão de composição. Para saber mais sobre esse padrão, veja este [artigo](https://www.patterns.dev/react/compound-pattern/).

3. Agora você está pronto para começar a trabalhar utilizando o nosso Design System. Explore todas as possibilidades e componentes disponíveis para criar uma interface rica e consistente.

## Contribuição

Nosso modelo de contribuição é [Inner Source](https://en.wikipedia.org/wiki/Inner_source), ou seja, apenas colaboradores da RD Saúde podem contribuir. Se você é um desses colaboradores, acesse a [documentação de contribuição](https://gitlab.com/raiadrogasil/rd/designsystem/pulso-design-system/-/blob/main/CONTRIBUTING.md).

## Licença

Para utilizar este pacote, leia a licença completa acessando o [link](https://gitlab.com/raiadrogasil/rd/designsystem/pulso-design-system/-/blob/main/LICENSE).​