Saturnino UI - Design System

📋 Descrição

Saturnino UI é o Design System oficial saturnino.com.br construído para projetos React, oferecendo uma coleção de componentes reutilizáveis e estilizados com TailwindCSS. Este sistema proporciona uma base consistente para o desenvolvimento de interfaces, garantindo performance e produtividade.

🚀 Instalação e Configuração

Pré-requisitos

• Node.js (v14 ou superior)
• Projeto configurado com ReactJS (v17 ou superior)

Passo 1: Instalar o Saturnino UI

Adicione o Saturnino UI ao seu projeto com o seguinte comando, dependendo do seu gerenciador de pacotes:

• Yarn:

  yarn add saturnino-ui

• NPM:

  npm install saturnino-ui

• PNPM:

  pnpm add saturnino-ui

Passo 2: Instalar TailwindCSS no Projeto que for utilizar

Como o Saturnino UI utiliza TailwindCSS para estilização, você também precisará configurá-lo no projeto principal.

1. Instale o TailwindCSS e dependências:

• Yarn:

  yarn add -D tailwindcss postcss autoprefixer
  yarn tailwindcss init -p

• NPM:

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p

• PNPM:

  pnpm add -D tailwindcss postcss autoprefixer
  pnpm tailwindcss init -p

2. Configurar tailwind.config.js:

Edite o arquivo tailwind.config.js para incluir os caminhos dos componentes do Design System:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/saturnino-ui/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Configurar postcss.config.js:

Certifique-se de que o postcss.config.js tenha a seguinte configuração:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

4. Criar o Arquivo CSS Principal:

Crie o arquivo src/index.css e adicione as diretivas do TailwindCSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Importar o CSS no Projeto Principal:

Abra o arquivo index.tsx ou App.tsx e importe o CSS principal:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';

import './index.css';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

🎨 Uso de Componentes do Saturnino UI

Agora que o Design System e o TailwindCSS estão configurados, você pode começar a utilizar os componentes fornecidos pelo Saturnino UI.

Exemplo de Uso - Button

// App.tsx
import React from 'react';
import { Button } from 'saturnino-ui'; // Importação do componente

function App() {
  return (
    <div>
      <Button text="Clique Aqui" onClick={() => console.log('Cliquei')} />
    </div>
  );
}

export default App;

🛠️ Problemas Comuns e Soluções

1. Estilos do Tailwind não aplicados:

   • Verifique se o caminho do saturnino-ui foi corretamente incluído no tailwind.config.js.

2. Erro: Unexpected token @ ao importar CSS:

   • Confirme que o postcss está corretamente configurado.

3. Erro de dependências react e react-dom:

   • Certifique-se de que a versão do React no projeto principal seja compatível com as peerDependencies do Saturnino UI:
     • React: ^18.3.1
     • React-DOM: ^18.3.1