@rdsaude/pulso-react-native-components
Version:
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.
68 lines (47 loc) • 2.76 kB
Markdown
# @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).