npm package: @gama-academy/smash
Description: - 📌 [O que é?](#o-que-é) - 🛠 [Tecnologias](#tecnologias) - 🚀 [Instalação](#instalação) - [Utilizando os componentes no React Native](#usando-com-react-native) - ↗️ [Publicando](#publicando) - 📁 [Estruturade de pastas](#estrutura-de-pastas) - ↗️ [Publi
Latest version: 0.0.39

<h1 align="center">
    <img alt="gamastation" title="#GamaStation" src="./assets/logo-smash-lg.png" width="250px" />
</h1>

<h4 align="center"> 
	:construction: Design System da Gama Academy :construction:
</h4>

## Tabela de conteúdos
- 📌 [O que é?](#o-que-é)
  - 🛠 [Tecnologias](#tecnologias)
- 🚀 [Instalação](#instalação)
  - [Utilizando os componentes no React Native](#usando-com-react-native)
- ↗️ [Publicando](#publicando)
- 📁 [Estruturade de pastas](#estrutura-de-pastas)
- ↗️ [Publicando](#publicando)
- 🤔 [Como contribuir](#como-contribuir)
- 📝 [Licença](#license)

## O que é?

O Smash é o projeto de Design System da Gama Academy no qual consiste todos os componentes e suas documentações.

Temos como objetivo centralizar a criação de componentes utilizados nos projetos mais atuais da Gama Academy, mantendo assim a padronização de design e código.

### Tecnologias

Utilizamos o [Storybook][storybook] como ferramenta de documentação que nos possibilita testar os componentes ao vivo.

Os componentes são criados para atender aplicações tanto web em [React][react] quanto mobile em [React Native][rn]; Ambos utilizando [TypeScript][typescript].

Para gerar o build da lib utilizamos o [React Native Builder bob][builder-bob]

## Instalação

Para clonar esta aplicação você precisará do [Git][git], [Node.js][nodejs] e [Yarn][yarn] instalados na sua máquina.

```bash
# Clonando o repositório
$ git clone https://github.com/gamaacademy/smash

# Vá até o repositório
$ cd smash

# Instale as dependências
$ yarn install

# Inicie o storybook
$ yarn storybook

# Iniciará na porta 6006
```
Acessará uma página similar a essa:
<center>
  <img src=".github/storybook-example.gif" width="50%" />
</center>

### Usando com React Native

Será necessário aplicar um link das fontes utilizadas no projeto, para que a aplicação consiga lê-las de forma correta.

Para linkar as fontes ao projeto RN, crie um arquivo chamado `react-native.config.js` na raiz do projeto com o seguinte conteúdo:

```javascript
module.exports = {
  assets: ["./assets/fonts/"], // path de onde os arquivos de fonte estão localizados
};
```

Em seguida rode o comando:

```bash
$ npx react-native link
```
É uma alternativa para vincular manualmente a dependência em seu projeto. Funciona tanto para Android quanto para iOS.

Para mais informações poderá acessar o
[Guia completo para link de fontes][guia-links-fontes].

## Components

Os componentes a serem desenvolvidos, foram mapeados e categorizados, de forma
que tais categorias influenciarão na organização das pastas do projeto.
Lembre-se de seguir os [padrões de desenvolvimento][padroes-de-desenvolvimento] durante a criação do componente.

#### Buttons
Categoria utilizada para qualquer tipo de elemento que possua uma interação (click) e feedback ao usuário.

##### Componentes:

- button
- social button

#### Cards
Cards são componentes simples, normalmente utilizados por outros componentes e nunca sozinho.

##### Componentes:
- card

#### Forms

Todo e qualquer tipo de componente que seja referente à um formulário.  
A ideia aqui, é que exista um input, o `input-base` e os demais sejam uma derivativa deste componente

##### Componentes:

- input-base
- input
- input-password
- input-email
- input-search
- select
- flat-checkbox
- checkbox

#### Icones

A categoria de icones está dividida em três componentes: `icon`, `gama` e `material`.

Tanto `gama` quanto `material` são duas famílias de icones (como famílias de fontes por exemplo).

**Importante:** Na hora de usar este componente, sempre será chamado somente o componente `icon`, que será o componente central, que irá consumir os icones de `gama` e `material`

##### Componentes:

- icon
- gama • componentes em svg
- material • componentes em svg

#### Images

Quaisquer componentes que sejam controladores ou possuam algum padrão de estilo em imagens

##### Componentes:

- avatar

#### Loadings

Componentes utilizados para dar um feedback visual ao usuário que algum elemento (ou tela inteira) esteja carregando.

##### Componentes:

- loader  
    imagem animada, como por exemplo, o logo da gama
- spinner  
    efeito de spin (bolinha girando) - utilizar o ActivityIndicator do React Native
- skeleton  
    [Skeletons][skeletons-lib] são loaders de placeholder, ou seja: um loading na mesma estrutura de um componente
    ou página. [veja esta lib][skeletons-lib]   
    <img src="https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/main.gif" width="150" />

#### Layout

Componentes utilizados para montagem e controle das telas no aplicativo final.

##### Componentes:

- screen
- scrollview
- view

#### Navigation

Componentes referentes à navegação entre páginas dentro do aplicativo.

##### Componentes:

- horizontal-scroll


#### Progress

Elementos que indiquem algum tipo de progresso, seja em porcentagem, dots, timeline e etc.
##### Componentes:

- <a href="https://i.imgur.com/2bC7art.png" target="_blank">progress-bar</a>
- <a href="https://i.imgur.com/tNPBlKg.png" target="_blank">timeline</a>

#### Typography

Todos os elementos referentes à exibição de texto ou controle de fontes

##### Componentes:

- text
- badge

## Estrutura de pastas

Veja abaixo, um exemplo de como deve ficar a estrutura do projeto, com seus componentes devidamente categorizados

<details>
<summary>árvore de componentes</summary>

```
📦 smash
 ┣ 📂 src
 ┃ ┣ 📂 components
 ┃ ┃ ┣ 📂 buttons
 ┃ ┃ ┃ ┣ 📂 button
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜button.comp.tsx
 ┃ ┃ ┃ ┃ 
 ┃ ┃ ┃ ┣ 📂 social-button
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜social-button.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┗ 📜index.ts 
 ┃ ┃ ┃
 ┃ ┃ ┣ 📂 cards
 ┃ ┃ ┃ ┣ 📂 card
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜card.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┗  📜index.ts
 ┃ ┃ ┃   
 ┃ ┃ ┣ 📂 forms
 ┃ ┃ ┃ ┣ 📂 input-base
 ┃ ┃ ┃ ┃ ┗ 📜input-base.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 input
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜input.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 input-password
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜input-password.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 input-email
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜input-email.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 input-search
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜input-search.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 select
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜select.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 flat-checkbox
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜flat-checkbox.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 checkbox
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜checkbox.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┗ 📜index.ts
 ┃ ┃ ┃
 ┃ ┃ ┣ 📂 icons
 ┃ ┃ ┃ ┣ 📂 gama
 ┃ ┃ ┃ ┃ ┗ 📜...
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 icon
 ┃ ┃ ┃ ┃ ┗ 📜 ...
 ┃ ┃ ┃ ┃ ┗ 📜icon.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 material
 ┃ ┃ ┃ ┃ ┗ 📜...
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┗ 📜index.ts
 ┃ ┃ ┃
 ┃ ┃ ┣ 📂 images
 ┃ ┃ ┃ ┣ 📂 avatar
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜avatar.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┗ 📜index.ts
 ┃ ┃ ┃
 ┃ ┃ ┣ 📂 loadings
 ┃ ┃ ┃ ┣ 📂 loader
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜loader.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 spinner
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜spinner.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 skeleton
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜skeleton.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┗ 📜index.ts
 ┃ ┃ ┃ 
 ┃ ┃ ┣ 📂 layout
 ┃ ┃ ┃ ┣ 📂 screen
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜screen.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 scrollview
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜scrollview.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 view
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜view.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┗ 📜index.ts
 ┃ ┃ ┃
 ┃ ┃ ┣ 📂 navigations
 ┃ ┃ ┃ ┣ 📂 horizontal-scroll
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜horizontal-scroll.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┗ 📜index.ts
 ┃ ┃ ┃
 ┃ ┃ ┣ 📂 progress
 ┃ ┃ ┃ ┣ 📂 progress-bar
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜progress-bar.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 time-line
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜time-line.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┗ 📜index.ts
 ┃ ┃ ┃
 ┃ ┃ ┣ 📂 typography
 ┃ ┃ ┃ ┣ 📂 text
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜text.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┣ 📂 badge
 ┃ ┃ ┃ ┃ ┣ 📜...
 ┃ ┃ ┃ ┃ ┗ 📜badge.comp.tsx
 ┃ ┃ ┃ ┃
 ┃ ┃ ┃ ┗ 📜index.ts
 ┃ ┃ ┃
 ┃ ┃ ┗ 📜 index.ts
 ┃ ┃
 ┃ ┣ 📂 theme
 ┃ ┗ 📂 utils
 ┃
 ┗ 📜 ...

```
</details>

<hr/>

## Publicando

```sh
yarn version --patch # --major or --minor
git push --tags
```

##  Como contribuir

- Faça um Fork do projeto
- Crie uma Branch para sua Feature `git checkout -b feature/FeatureIncrivel`
- Adicione suas mudanças `git add .`
- Comite suas mudanças `git commit -m 'Adicionando uma Feature incrível!`
- Faça o Push da Branch `git push origin feature/FeatureIncrivel`
- Abra um Pull Request

## Referências

[git]: https://git-scm.com
[storybook]: https://storybook.js.org/
[react]: https://pt-br.reactjs.org/
[rn]: https://facebook.github.io/react-native/
[yarn]: https://yarnpkg.com/
[nodejs]: https://nodejs.org/
[typescript]: https://www.typescriptlang.org/
[builder-bob]: https://github.com/callstack/react-native-builder-bob
[guia-links-fontes]: https://mehrankhandev.medium.com/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4
[padroes-de-desenvolvimento]: https://github.com/gamaacademy/smash/blob/contributing-guide/CONTRIBUTING.md
[skeletons-lib]: https://www.npmjs.com/package/react-native-skeleton-content
[environment-setting-up]: https://reactnative.dev/docs/environment-setup
[gama-academy]: https://github.com/gamaacademy

## License

This project is under the MIT license. See the [LICENSE](https://github.com/gamaacademy/smash/blob/master/LICENSE) for details.

Made with ♥ by [Gama Academy - Tech Team][gama-academy] :wave: [Get in touch!](tech@gama.academy)