Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/naveteam/saturn

Repositório de componentes React baseado no design system da Nave.
https://github.com/naveteam/saturn

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

Last synced: about 12 hours ago
JSON representation

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

Host: GitHub
URL: https://github.com/naveteam/saturn
Owner: naveteam
License: mit
Created: 2019-06-23T07:57:13.000Z (over 5 years ago)
Default Branch: refactor-v2
Last Pushed: 2023-01-27T08:39:08.000Z (almost 2 years ago)
Last Synced: 2024-10-13T07:53:36.947Z (about 1 month ago)
Topics: design-system, react, saturn-system, styled-component, styled-system
Language: JavaScript
Homepage: https://saturn.nave.rs
Size: 11 MB
Stars: 27
Watchers: 16
Forks: 14
Open Issues: 37
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md

Awesome Lists containing this project

README

        ![Saturn](https://github.com/naveteam/saturn/blob/assets/header.png?raw=true)

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


![stability-wip](https://img.shields.io/badge/stability-work_in_progress-lightgrey.svg)

[![NPM](https://img.shields.io/npm/v/@naveteam/saturn.svg)](https://www.npmjs.com/package/@naveteam/saturn)

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)](http://makeapullrequest.com)

![ci](https://github.com/naveteam/saturn/workflows/ci/badge.svg)

[![All Contributors](https://img.shields.io/github/all-contributors/naveteam/saturn/main)](#contributors-)

## ❗️ Motivação

Diversas vezes precisamos prototipar rapidamente novas aplicações e sempre precisamos recorrer à libs de componentes de layout como [Material UI](https://material-ui.com/pt/) ou [Ant Design](https://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:

- [React](https://reactjs.org/)

- [Styled Components](https://www.styled-components.com/)

- [Styled System](https://styled-system.com/)

- [Storybook](https://github.com/storybooks/storybook)

## 🚀 Instalação

No terminal, execute

```shell

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

```jsx

import React from 'react'

import ReactDOM from 'react-dom'

import { ThemeProvider, TextField } from '@naveteam/saturn'

const App = () => {

  return (

    

      

    

  )

}

ReactDOM.render(, document.getElementById('root'))

```

Você pode encontrar em nosso [Storybook](https://saturn.nave.rs) 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](CONTRIBUTING.md).

## 📚 Links úteis

- [Figma](https://www.figma.com/file/O3bKxIcsj2rc1FNIRclJyT/Design-System): Onde todo o design do projeto se encontra

- [Chromatic](https://www.chromatic.com/builds?appId=5ee911f58891670022043e8a): Local onde ocorre a revisão dos componentes pelo time de degisn

- [NPM](https://www.npmjs.com/package/@naveteam/saturn): Acesso ao pacote NPM do projeto

- [Github](https://github.com/naveteam/saturn): Repositório da lib

- [Storybook](https://saturn.nave.rs): Página com o projeto mais atualizado para referência

- [Miro](https://miro.com/app/board/o9J_kqytVp0=): Resumo do Workflow de desenvolvimento de um componente

- [Roadmap](https://github.com/naveteam/saturn/projects/2): 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](https://github.com/storybookjs/storybook/issues/10536). 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](https://allcontributors.org/docs/en/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](https://github.com/all-contributors/all-contributors). Qualquer tipo de contribuição será bem-vinda!

## Licença

MIT © [Nave Team](https://github.com/naveteam)