@gama-academy/smash
v0.0.39
Published
- 📌 [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
Downloads
38
Readme
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:
- 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
📦 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 :wave: Get in touch!