npm package: @stardust-ds/react-native
Description: Stardust Design System developed by Ubistart
Latest version: 0.9.0

# Stardust - React Native

Seja bem vindo a sua library UI de React Native desenvolvido pelo time mobile da Ubistart!

Essa library foi desenvolvida para agilizar o processo de criação de aplicativos em React Native e extrair o máximo de complexidade do lado do desenvolvedor para que o processo seja mais ágil.

## Componentes

- [Badge](./src/components/Badge/badge.tsx)
- [Button](./src/components/Button/button.tsx)
- [Checkbox](./src/components/Checkbox/checkbox.tsx)
- [DatePicker](./src/components/DatePicker/datePicker.tsx)
- [Input](./src/components/Input/input.tsx)
- [Radio](./src/components/Radio/radio.tsx)
- [Select](./src/components/Select/select.tsx)
- [Switch](./src/components/Switch/switch.tsx)
- [Tag](./src/components/Tag/tag.tsx)
- [Typography](./src/components/Typography/typography.tsx)
- [Link](./src/components/Link/Link.tsx)
- [Toast](./src/components/Toast/Toast.tsx)
- [Skeleton](./src/components/Skeleton/skeleton.tsx)

## Como utilizar o @stardust-ds/react-native?

Nossa __library__ faz uso de algumas dependências e configurações padrões que são necessárias para o nosso funcionamento __default__ que segue o nosso *Design System*.

Essas dependências são:

### SVG

 Necessário configurar duas __libraries__:
  - 1. [react-native-animatable](https://github.com/oblador/react-native-animatable)

    <code>yarn add react-native-animatable</code>

  - 2. [react-native-svg](https://github.com/react-native-svg/react-native-svg)

    <code>yarn add react-native-svg</code>

    - 2.1 caso esteja utilizando Typescript (o que recomendamos), precisará criar um arquivo, ou adicionar caso exista um, para que o typescript reconheça os imports dos svgs:
    ```custom.d.ts```:

    ```js
    declare module '*.svg' {
      const content: any;
      export default content;
    }
    ```

  - 3. [react-native-svg-transformer](https://github.com/kristerkari/react-native-svg-transformer)

    <code>yarn add react-native-svg-transformer</code>

    - 3.1 Para podermos manipular as cores dos svg que eventualmente usará, precisamos criar um arquivo para a configuração desses svgs.
    ```.svgrrc```

    ```js
      {
        "replaceAttrValues": {
          "#000000": "{props.fill}",
          "black": "{props.fill}"
        }
      }
    ```

    > ⚠️ Tenha **ATENÇÃO** que caso a cor do seu svg não for um dos valores '#000000' ou 'black', a cor do mesmo não será alterada. Para isso, ou mude as cores do svg para tais cores mencionadas ou adicione uma nova propriedade no 'replaceAttrValues' com a cor que quer substituir. exemplo: "red": "{props.fill}"


### Tipografia - customizada ([Poppins](./src/assets/fonts/))

  - 1. É necessário criar um arquivo chamado de ```react-native.config.js``` caso o teu projeto não possua.
  - 2. Criar uma pasta ```assets/fonts``` e colocar os arquivos de fontes dentro.

  - 3. ```react-native.config.js```:

    ```js
      module.exports = {
        assets: ['./assets/fonts'],
      };
    ```

  - 4. Então execute o comando

    >= 0.69
    ```bash
    npx react-native-asset
    ```

    < 0.69
    ```bash
    npx react-native link
    ```

    Para maior entendimento da utilização do Typography em diferentes sistemas operacionais, consulte a documentação específica [aqui](./Typography.md)

### Instalando a library

Após as configurações acima, temos que instalar a nossa __library__ como uma dependência no vosso projeto.

```bash
yarn add @stardust-ds/react-native #ou npm install @stardust-ds/react-native
```

```bash
cd ios
```

```bash
pod install
```

Agora precisamos fazer algumas configurações para podermos utilizar os recursos dentro do projeto.

Precisamos encapsular o seu __APP__ no ```ThemeManager``` para o tema ser acessível em toda a aplicação:

```js
import { ThemeManager } from '@stardust-ds/react-native';

const App = () => (
 <ThemeManager>
   <SeuAppAqui />
 </ThemeManager>
);
```

Com essa configuração já será possível fazer a utilização dos componentes disponíveis na *library*.

## Utilizando os componentes

```js
import { ThemeManager, Button } from '@stardust-ds/react-native';


const App = () => (
 <ThemeManager>
   <Button label="Stardust" onPress={() => console.log("Stardust button"!)} />
 </ThemeManager>
);

```

## Styling - Customizando o Tema da library

Nossa *library* tem a possibilidade de sobrescrever os estilos definidos por padrão, usados no nosso __Design System__.

Para isso, utilize a função ```extendTheme()``` para inserir as propriedades do seu tema, ou sobrescrever as já existentes, como por exemplo:

```js
import { ThemeManager, extendTheme } from '@stardust-ds/react-native';

const theme = {
 color: {
  ubistart: "blue",
 },
}

const customTheme = extendTheme(theme);

const App = () => (
 <ThemeManager theme={customTheme}>
   <SeuAppAqui />
 </ThemeManager>
);
```

Após essa definição, já estará disponível para utilização a propriedade ```theme.brand.color.ubistart```

Para acessar essa propriedade temos que invocar o nosso *custom hook* de tema e utilizar a propriedade theme dele.

```js
import { useTheme, Button } from '@stardust-ds/react-native';

const CustomButton = () => {
 const theme = useTheme();
 //theme.brand.color.ubistart já é acessível aqui.

 return <Button bgColor={theme.brand.color.ubistart}>

};

export default CustomButton;

```

### Typing theme - dizendo para seu tema como agir

Se estiver utilizando Typescript (altamente recomendado), para que seu projeto identifique as propriedades sobrescritas no tema, deve criar um arquivo de tipos para sobrescrever o type da library também.

como por exemplo:

```type.d.ts```

```js
import { customTheme } from './App'; // lembre de exportar essa informação no seu App ou onde quer que tenha definido ela e importe aqui

type Theme = typeof customTheme;

declare module '@stardust-ds/react-native' {
  export interface StardustTheme extends Theme {}
  export function useTheme(): Theme;
}
```

Isso irá fazer com que seu typescript identifique as propriedades novas que passares para o ThemeManager e te ajudará na hora do desenvolvimento.

Caso esteja utilizando o styled components, deve fazer a etapa a seguir para que o DefaultTheme seja sobrescrito:

```js
...
import {StardustTheme} from '@stardust-ds/react-native'

...

declare module 'styled-components' {
  export interface DefaultTheme extends StardustTheme
}
```

Para finalizar, adicione o arquivo ```type.d.ts``` na propriedade ```include``` do seu arquivo tsconfig.

exemplo:

```js
...
"include": [
    "src", "type.d.ts"
  ],
...
```