@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!

    Keywords

    none

    Install

    npm i @gama-academy/smash

    DownloadsWeekly Downloads

    34

    Version

    0.0.39

    License

    MIT

    Unpacked Size

    3.11 MB

    Total Files

    893

    Last publish

    Collaborators

    • rferro