Morpheus UI

Lib com a configuração UI do Aprova

Instalação

yarn add morpheus-ui

Como usar

Importando CSS base

Importe no seu arquivo index.ts o CSS base do Morpheus UI

import 'morpheus-ui/dist/index.css';

Esse arquivo contém a importação do Tailwind CSS e a declaração de fontes.

A fonte principal é a Noto Sans e secundária é a Poppins, ambas importadas do Google Fonts.

Configurando o tema

Variáveis exportadas

O Morpheus UI exporta as seguintes variáveis:

const Theme = {
  colors: colors,
  fontFamily: family,
  fontSize: fontSizes,
  gaps: gaps,
  screens: screens,
  borderRadius: borderRadius,
  borderWidth: borderWidth
}

Configurando o tailwind.config.js

Ao construir seu arquivo tailwind.config.js, você pode importar essas variáveis e usá-las para estender as configurações do Tailwind CSS de acordo com o uso de cada aplicação.

import Theme from "morpheus-ui"

module.exports = {
  // Demais configurações do Tailwind CSS
  theme: {
    extend: {
      fontSize: Theme.fontSize,
      gap: Theme.gaps,
      colors: Theme.colors,
    },
    screens: Theme.screens,
    fontFamily: Theme.fontFamily,
    borderRadius: Theme.borderRadius,
    borderWidth: Theme.borderWidth,
  },
};

Documentação

Para visualizar a documentação completa do tema mantenha atualizado o arquivo tailwind.config.js presente na raiz desse projeto. Estando atualizado execute no seu terminal o seguinte comando:

 yarn run doc

Deverá abrir uma página no seu navegador com a documentação completa do tema.

Testando localmente sem publicar no NPM

Use o yarn link para criar um link local para o Morpheus-UI:

yarn link

Criado o link, navegue até o projeto onde queira usar o Morpheus-UI, exemplo: Vá para o diretório do seu projeto Morpheus:

cd /caminho/do/seu/projeto/morpheus

Use yarn link morpheus-ui para criar um link para o Morpheus-UI em seu projeto Morpheus:

yarn link morpheus-ui

Pronto! Agora você pode usar o Morpheus-UI no seu projeto sem precisar publicar no NPM.

Desfazendo o link

Se precisar desfazer o link, execute:

yarn unlink morpheus-ui
yarn unlink

Publicando no NPM

Se não tiver configurado o NPM, execute no terminal o seguinte comando:

npm login

Feita a autenticação, para publicar um pacote altere no package.json o número da versão de acordo com o Semantic Versioning e execute no terminal o seguinte comando:

npm publish