0.0.39 โ€ข Published 4 years ago

@gama-academy/smash v0.0.39

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

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!

0.0.39

4 years ago

0.0.36

4 years ago

0.0.33

4 years ago

0.0.31

4 years ago

0.0.32

4 years ago

0.0.30

4 years ago

0.0.28

4 years ago

0.0.29

4 years ago

0.0.26

4 years ago

0.0.27

4 years ago

0.0.24

4 years ago

0.0.25

4 years ago

0.0.23

4 years ago

0.0.20

4 years ago

0.0.21

4 years ago

0.0.22

4 years ago

0.0.10

4 years ago

0.0.11

4 years ago

0.0.12

4 years ago

0.0.13

4 years ago

0.0.14

4 years ago

0.0.15

4 years ago

0.0.9

4 years ago

0.0.16

4 years ago

0.0.8

4 years ago

0.0.17

4 years ago

0.0.18

4 years ago

0.0.19

4 years ago

0.0.5

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago

0.0.4

4 years ago