@gama-academy/smash
TypeScript icon, indicating that this package has built-in type declarations

0.0.39 • Public • Published

gamastation

🚧 Design System da Gama Academy 🚧

Tabela de conteúdos

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:

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!

Readme

Keywords

none

Package Sidebar

Install

npm i @gama-academy/smash

Weekly Downloads

2

Version

0.0.39

License

MIT

Unpacked Size

3.11 MB

Total Files

893

Last publish

Collaborators

  • gama-academy-user
  • rferro