naveteam / saturn Goto Github PK

View Code? Open in Web Editor NEW

27.0 16.0 14.0 11.29 MB

Repositório de componentes React baseado no design system da Nave.

Home Page: https://saturn.nave.rs

License: MIT License

JavaScript 100.00%

react design-system styled-component styled-system saturn-system

saturn's Introduction

Repositório de componentes React baseado no design system da Nave.

❗️ Motivação

Diversas vezes precisamos prototipar rapidamente novas aplicações e sempre precisamos recorrer à libs de componentes de layout como Material UI ou Ant Design.

A criação de um design system próprio pode aumentar a familiaridade da equipe com determinado padrão de código, fazendo com que gradativamente esses protótipos sejam criados de forma mais rápida e homogênea, abstraindo a necessidade de se preocupar com o layout que a aplicação terá.

🛠 Tecnologias utilizadas

Baseamos nosso desenvolvimento em:

🚀 Instalação

No terminal, execute

yarn add @naveteam/saturn
// ou npm install @naveteam/saturn

💡 Utilização

Com a lib instalada, o seguinte código já é o suficiente para iniciar o desenvolvimento da aplicação

import React from 'react'
import ReactDOM from 'react-dom'
import { ThemeProvider, TextField } from '@naveteam/saturn'

const App = () => {
  return (
    <SaturnProvider>
      <TextField name='base' label='Label' message='Message' placeholder='Placeholder' />
    </SaturnProvider>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Você pode encontrar em nosso Storybook a documentação necessária de todos os componentes disponíveis no projeto.

🤝 Contribuição

Sinta-se livre para contribuir com o projeto, criando novos componentes, abrindo PRs para ajustar bugs ou mesmo levantando dúvidas, sugestões ou pedidos de ajustes através de issues. Para contribuir com nosso projeto, por favor siga nosso guia de CONTRIBUTING.

📚 Links úteis

Figma: Onde todo o design do projeto se encontra
Chromatic: Local onde ocorre a revisão dos componentes pelo time de degisn
NPM: Acesso ao pacote NPM do projeto
Github: Repositório da lib
Storybook: Página com o projeto mais atualizado para referência
Miro: Resumo do Workflow de desenvolvimento de um componente
Roadmap: Link do projeto do GitHub com o andamento do desenvolvimento

🐛 Bugs Conhecidos

O Storybook não renderiza PropTypes passadas dinamicamente para meu componente

Isso é uma limitação do Addon do Storybook responsável por criar a tela de Docs. Esse comportamento já foi reportado e existe uma issue aberta para tratar essa questão aqui. Enquanto esse problema não é resolvido, você pode declarar as PropTypes do Styled System de forma estática, ou informar na descrição do componente quais módulos do Design System estão importados no componente.

Contribuidores ✨

Obrigado a essas maravilhosas pessoas que contribuíram de alguma maneira para o desenvolvimento da lib (emoji key):

_{Eduardo Bittencourt} 📖 💻 🤔 🚧 👀 🐛 💡 🚇 📢	_{Daniel Pôrto Nuñez} 💻 🐛 📖 💡 🤔 🚧 👀 🔬 📆	_{Matheus Figueiredo} 💻 🤔 🚧 👀	_{Gabriel Do Couto Santos} 📖	_{Caio Silva} 🐛 📖 🖋	_{Thiago Nunes Batista} 💻 📖 💡	_{Rafael Schumacher} 💻 📖 💡 👀
_{Juliano Reis} 👀	_{Ítalo Nolasco} 💻 🚧 📢 📆 👀 💡 🤔	_{Matheus Cruz} 💻 📖 💡 🚧 👀 💼 🤔 📆 📢 🚇 🔬 🐛	_{Vítor Tavares} 💻 🚧 👀 📖	_{Mariana Coelho} 💻 📖	_{Eduarda Eisfeld Conde} 💻 📖	_{João Pedro Bretanha} 💻 📖 🤔 🚧 🐛
_{Glauber Brack} 💻 🚧 🐛	_Giuliane 🚧 🐛	_{Igor Casconi de Oliveira} 💻 📖 👀 📆 🚧 🔬 🤔 🐛	_{Gustavo Pinho} 💻 📖 👀 🚧 🤔 🐛	_{Ricky Almeida} 👀	_{Gabriel Oliveira Carrilhos} 💻 🚧 👀	_{Gabriel Ribeiro} 💻 🚧 👀
_{William Porto} 💻 🚧 👀	_{Samanta Tessmer} 💻 🚧 👀	_{Felipe Frantz Zanini} 💻 🚧 👀	_{Yuri Farnesio} 💻 🚧 🐛	_{Matheus do É Santos} 💻 🚧 🐛

Esse projeto segue a especificação de all-contributors. Qualquer tipo de contribuição será bem-vinda!

Licença

MIT © Nave Team

saturn's People

Contributors

Stargazers

Watchers

Forkers

julianoddreis eduardaconde thaua97 jeanrantunes damassa ericogrehs gleider crcunha sblucas97 caaiosb cristianojr9 tessmer matheusdoenave

saturn's Issues

[Componente] Iconografia

[Componente] Select

[Core] Select single

[docs] add more details in the TextField Documentation

Is your feature request related to a problem? Please describe.
Yes, the TextField documentation is missing a lot of things.

Describe the solution you'd like
An update in the docs

[Component] List

Figma

[Componente] Autocomplete

[Componente] Barra de progresso

Figma

[Componente] Tabela

[component] TextField With Masks

Feature
TextField with masks

Figma

[Componente] Grid

[Componente] Divider

[Componente] TextArea

Adicionar styled-system

Colocar o Styled-system facilitando o uso de modificadores dentro dos componentes

[Componente] Menu lateral

[Componente] Header

[Componente] Upload Input

[Core] Upload em formato de botão com os attachments em baixo

Add new members

[Componente] Modal/Dialog

[Componente] Input

[Core] Input com todos os estados e possibilidade de adicionar prefixo e sufixo

[Componente] Paginação

Comportamento Esperado: O comportamento completo do componente está disponível na Documentação

Critérios de Aceite:

O componente está seguindo os padrões de design definidos no Figma do projeto;

O componente está seguindo os padrões de código definidos pelo Nave Guides;

O componente precisa utilizar as propriedades definidas na Descrição do Componente;

Descrição do Componente:

Esse componente geralmente andará junto com o componente de tabela, mas pode ser aplicado também em páginas completas ou qualquer outra estrutura que receba uma paginação. A ideia do componente Pagination é entender (juntamente com o back-end) como a paginação é retornada por padrão pelo boilerplate de back da Nave e fazer com que o controle de paginação no front seja condizente com esse padrão. Ele vai possuir duas variants, uma apenas com botões com a numeração das páginas e outra com um input onde o usuário pode digitar a página que ele quiser

Propriedades necessárias para definição do componente: As seguintes props devem existir no componente

page

pageSize

onPageChange

onPageSizeChange

variant

[Componente] Abas

[README]Update all-contributors

Issue for update all-contributors

[Componente] Breadcrumb

[component] Alert

Feature request
Create the Alert component present in the Figma

Figma

[Componente] Botão

Remover todos os testes para fácil contribuição da comunidade

Remover todos os testes e scripts de execução

[Componente] Link

Comportamento Esperado: O comportamento completo do componente está disponível na Documentação

Critérios de Aceite:

O componente está seguindo os padrões de design definidos no Figma do projeto;

O componente está seguindo os padrões de código definidos pelo Nave Guides;

O componente precisa utilizar as propriedades definidas na Descrição do Componente;

Descrição do Componente:

O componente de Link é uma das variações do componente de Typography, com um grande diferencial: ele precisa ser utilizado com qualquer tipo de link, seja ele um a, ou um Link do Gatsby ou do Next. Pra isso, o importante é criarmos a estilização desse componente dentro do Design System, e passarmos qual componente deve ser renderizado com essa estilização. Para isso, teremos:

Propriedades necessárias para definição do componente: As seguintes props devem existir no componente

component: Essa prop receberá o componente que deve ser renderizado (por exemplo, o Link do Gatsby). Por default, o link renderizado será uma tag a, mas caso ele receba algum componente nessa prop, o comportamento deverá ser sobrescrito.

path: A prop path definirá para onde o link deve redirecionar (similar ao href da tag a e ao to do componente Link).

propPath: Essa prop será necessária para que o componente saiba qual propriedade deve receber o valor de path. (para a tag a, o valor de propPath deve ser href, por exemplo, indicando que o valor que for passado para path será aplicado em href ao final da criação do componente).

Por se tratar de uma variação do componente Typography, é importante que as demais props de estilização sejam passadas adiante para ele, para que todas as mudanças de tamanho de fonte, cor, e etc. sejam aplicadas

[Component] Step Indicator

Figma

[Componente] Radio Button

[component] Label + Text

Feature
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Create Label + Text component

Figma

[Componente] Checkbox

[Componente] Tipografia

Inconsistência no README.md

Descrição do problema
Link da documentação errado no README.md

Para reproduzir
Passos para reproduzir o erro

Clique aqui
Em "💡 Utilizaçã" clique em Storybook
Veja o erro

Comportamento esperado
Provavelmente deveriamos ser redirecionados a este link (https://naveteam.github.io/saturn) e não "https://naveteam.github.io/saturn-system"

Screenshots

Desktop

OS: Linux Deepin
Browser: Google Chrome
Version: 83.0.4103.116 (Versão oficial) 64 bits

[docs] Add documentation for more props in the Select component

Foram adicionadas algumas props no componente de select que não foram documentadas no storybook. É importante que se mantenha a documentação atualizada para que os próximos devs que forem usar o saturn terem noção do poder do componente. Atualmente ele está recebendo as seguintes props:

{
      clearValue,
      onClearSelect,
      name,
      label,
      options,
      optionLabel,
      optionValue,
      onOptionSelected,
      placeholder,
      caption,
      error,
      disabled,
      quiet,
      defaultValue,
      resetValue,
}

O que está documentado é:

É necessário que seja adicionado as novas props e que também seja documentado com um exemplo e descrição a funcionalidade de cada uma.

Inconsistência no README.md

Descrição da inconsistência
Saturn não possuí mais o elemento Input, o mesmo é TextField, e no README.md está alegando que deve ser utilizado o Input

Para reproduzir
Siga as etapas a seguir: