@gama-academy/smash v0.0.39
Tabela de conteรบdos
- ๐ O que รฉ?
- ๐ Tecnologias
- ๐ Instalaรงรฃo
- โ๏ธ 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
๐ฆ 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!
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago