Hubbi UI

Hubbi UI é uma biblioteca de componentes React reutilizáveis construída com Tailwind CSS e Storybook, desenvolvida para garantir consistência visual, escalabilidade e produtividade em aplicações baseadas no ecossistema React.

📦 Instalação

Antes de começar, certifique-se de que seu projeto utiliza React 18.

Instalação local

No projeto hubbi-ui

npm i
npm run build
npm link

No projeto que será utilizado o hubbi-ui

npm link hubbi-ui

Instale o hubbi-ui via npm:

npm install hubbi-ui

ou com Yarn:

yarn add hubbi-ui

🧩 Requisitos

Este pacote utiliza peer dependencies, então certifique-se de que as seguintes dependências estejam instaladas no seu projeto:

npm install react react-dom react-router-dom@5 clsx phosphor-react

Observação: É necessário usar react-router-dom@^5.2.0 (versão 5).

🎨 Estilos

A biblioteca depende do arquivo styles.css gerado pelo Tailwind CSS. Você deve importar este CSS no entry point da sua aplicação (por exemplo, main.tsx ou index.tsx):

import "hubbi-ui/styles.css"

🚀 Uso Básico

import { Text } from "hubbi-ui"

export default function App() {
  return (
    <Text variant="h1" color="primary">
      Olá, Hubbi!
    </Text>
  )
}

🧾 Componentes

A biblioteca expõe diversos componentes prontos para uso. Para mais informações, exemplos e personalizações, utilize o Storybook local:

npm run storybook

📦 Scripts Disponíveis

| Comando | Descrição | | ------------------- | ------------------------------------------- | | npm run build | Compila TypeScript e Tailwind para produção | | npm run storybook | Inicia o Storybook com Watch do Tailwind |

📁 Estrutura de Exportação

Este pacote usa exports modernos:

• ESM: ./dist/hubbi-ui.es.js
• UMD: ./dist/hubbi-ui.umd.js
• Tipos TypeScript: ./dist/hubbi-ui.es.d.ts
• Estilos: ./dist/styles.css

🛠 Tecnologias Utilizadas

• React 18
• TypeScript
• Tailwind CSS
• Vite
• Storybook

📌 Observações

• O CSS precisa obrigatoriamente ser importado manualmente.
• O build gera os arquivos de estilos e tipos para garantir compatibilidade e reutilização.