<h1 align="center">
  <img alt="React Native" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1280px-React-icon.svg.png" width="150px" />
</h1>

## Projeto

Solução de compartilhamento de código entre múltiplas plataformas, através de uma biblioteca de componentes acessíveis e customizáveis, utilizando React Native Web, Atomic Design, Storybook e Typescript.

## Stack

Esse projeto foi desenvolvido com as seguintes tecnologias:

- [React](https://reactjs.org)
- [React Native](https://facebook.github.io/react-native/)
- [React Native Web](https://necolas.github.io/react-native-web/)
- [Storybook](https://storybook.js.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Styled Components](https://styled-components.com/)
- [Styled System](https://styled-system.com/)

## Instalação em outro projeto

1. Instale a bibliteca em seu projeto React/React Native/Expo:

```bash
yarn add @yuriazevedo/rnw-components
```

2. Instale a dependência nativa (utilize `expo install` caso seja um projeto Expo):

```bash
yarn add react-native-vector-icons
```

3. Agora instale as dependências:

```bash
yarn add styled-components styled-system
```

4. Caso seu projeto utilize Typescript, instale as seguintes tipagens:

```bash
yarn add @types/styled-components @types/styled-components-react-native @types/styled-system -D
```

5. Configurações extras para a Web

- Exemplo da propriedade `module.rules` dentro do webpack config:

```js
{
  test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
  loader: 'file-loader',
},
{
  test: /\.(ts|js)x?$/,
  exclude: /node_modules[/\\](?!react-native-vector-icons)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        ['@babel/preset-env', { useBuiltIns: 'usage' }],
        '@babel/preset-react',
        "@babel/preset-typescript"
      ],
      plugins: [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-object-rest-spread'
      ],
    },
  },
},
```

## Utilizando o projeto

1. Clone o repositório utilizando:

```bash
git@github.com:yuriazevedo11/monografia.git
```

2. Entre na pasta do repositório:

```bash
cd monografia
```

3. Agora é só instalar as dependências do projeto:

```bash
yarn # Equivalente a yarn install
yarn pod # Caso esteja rodando em um ambiente MacOS
```

## Utilizando o Storybook

### Ambiente Web

1. Basta rodar o comando :

```bash
yarn storybook-web
```

### Ambiente Android e iOS

1. Inicie o Storybook com:

```bash
yarn storybook
```

2. Em seguida inicie o Metro do React Native:

```bash
yarn start
```

3. Agora rode o comando de acordo com a plataforma desejada:

```bash
yarn android
yarn ios # É necessário um ambiente MacOS
```

4. Caso o Storybook não esteja reconhendo os emuladores basta rodar o comando:

```bash
yarn reverse
```

OBS: Os emuladores costumam abrir sozinhos após passo 3, caso seu ambiente esteja configurado corretamente com Android Studio ou Xcode (no caso de MacOS). Se ele não abrir sozinho, basta abrir o emulador antes de rodar o comando anterior.