Este projeto foi criado com Create React App.

Yapay — Design System

Nosso design system nos ajuda a trabalharmos juntos para desenvolver uma grande experiência para todos os clientes Yapay.

Começando

Essas instruções farão com que você tenha uma cópia do projeto em execução na sua máquina local para fins de desenvolvimento e teste. Veja as recomendações sobre como implantar o projeto em produção.

Pré-requisitos

Para conseguir rodar o projeto na sua máquina local, é necessário que ela tenha alguns softwares instalados, listamos abaixo as ferramentas necessárias:

• NodeJS + NPM
• Yarn
• Jest CLI
• Git
• Create React App

Com as dependências acima instaladas você já poderá editar o projeto.

Instalando as dependências do projeto

Para instalar as dependências com você pode utilizar o comando na raíz do projeto

yarn install

Para subir o servidor local

yarn start

Para rodar os testes

yarn test

Para testes com relatório de cobertura

yarn test --coverage

Para realizar o build do projeto

yarn build

Instalando os componentes

Os componentes estão disponíveis como pacotes do NPM então basta ter o Node instalado na sua máquina que você conseguirá utilizá-los.

npm install @yapay/design-system

Este comando irá criar uma pasta node_modules com todas as dependências dentro.

Importando em seu projeto

Você pode importar os componentes dentro do seu projeto da seguinte forma:

import { Button } from '@yapay/design-system'

Desta forma o componente Button já estará disponível para uso. Consulte a documentação para ver a forma de utilização dos componentes.

Importante! Tenha em mente que os componentes são construídos com React e seu funcionamento depende diretamente do JSX, então caso queira testar rapidamente o projeto você pode utilizar o create-react-app e realizar os passos acima

npx create-react-app my-app

Font-Family

Ao importar qualquer componente, será importado juntamente os estilos bases do nosso Design System. Isto inclui o carregamento da nossa família de fonte que é a Raleway.

Classes utilitárias

Você terá disponível para montagem de layouts algumas ferramentas do framework Tailwind CSS

Aqui são os módulos ativos da ferramenta

modules: {
  appearance: false,
  backgroundAttachment: false,
  backgroundColors: ['responsive', 'hover', 'focus'],
  backgroundPosition: false,
  backgroundRepeat: false,
  backgroundSize: false,
  borderCollapse: false,
  borderColors: ['responsive', 'hover', 'focus'],
  borderRadius: false,
  borderStyle: false,
  borderWidths: false,
  colors: colors,
  cursor: false,
  display: ['responsive'],
  flexbox: ['responsive'],
  float: ['responsive'],
  fonts: false,
  fontWeights: false,
  height: false,
  leading: false,
  lists: false,
  margin: ['responsive'],
  maxHeight: false,
  maxWidth: false,
  minHeight: false,
  minWidth: false,
  negativeMargin: ['responsive'],
  opacity: false,
  outline: false,
  overflow: false,
  padding: ['responsive'],
  pointerEvents: false,
  position: ['responsive'],
  resize: false,
  shadows: false,
  svgFill: [],
  svgStroke: [],
  textAlign: ['responsive'],
  textColors: ['responsive', 'hover', 'focus'],
  textSizes: ['responsive'],
  textStyle: ['responsive', 'hover', 'focus'],
  tracking: false,
  userSelect: false,
  verticalAlign: false,
  visibility: false,
  whitespace: false,
  width: ['responsive'],
  zIndex: ['responsive'],
}

Contribuindo

Caso tenha interesse em contribuir para o projeto, leia CONTRIBUTING.md as orientações de como fazer isso

Licença

Este projeto está licenciado sob a licença MIT - veja o arquivo LICENSE.md para detalhes