@gama-academy/smash

🚧 Design System da Gama Academy 🚧

Tabela de conteúdos

• 📌 O que é?
  • 🛠 Tecnologias
• 🚀 Instalação
  • Utilizando os componentes no React Native
• ↗️ Publicando
• 📁 Estruturade de pastas
• ↗️ Publicando
• 🤔 Como contribuir
• 📝 Licença

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 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 quanto mobile em React Native; Ambos utilizando TypeScript.

Para gerar o build da lib utilizamos o React Native Builder bob

Instalação

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

# 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:

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:

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

Em seguida rode o comando:

$ 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.

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 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 são loaders de placeholder, ou seja: um loading na mesma estrutura de um componente ou página. veja esta lib
  

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:

• progress-bar
• timeline

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

árvore de componentes

📦 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
 ┃
 ┗ 📜 ...

---

Publicando

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

License

This project is under the MIT license. See the LICENSE for details.

Made with ♥ by Gama Academy - Tech Team 👋 Get in touch!