ivt/README.md

Ivt Components Library

# ivt

<!-- TODO - ROLLUP INSTRUÇÃO A FAZER -->

Uma biblioteca de componentes React da Investtools com suporte a Tailwind CSS e ícones SVG customizados.

## Índice

- [Instalação](#instalação)
- [Pré-requisitos](#pré-requisitos)
- [Uso](#uso)
- [Configuração do Tailwind CSS](#configuração-do-tailwind-css)

## Instalação

Instale a biblioteca via npm:

```bash
npm install ivt
```

Certifique-se de que as dependências necessárias estejam instaladas no seu projeto:

```bash
npm install react@^19.0.0 react-dom@^19.0.0
```

## Pré-requisitos
- React: Versão 19 ou superior.
- Tailwind CSS (opcional): Para usar os estilos fornecidos pela biblioteca, configure o Tailwind no seu projeto (veja Configuração do Tailwind CSS (#configuração-do-tailwind-css)).

## Uso
A biblioteca exporta componentes que podem ser importados diretamente. Confira eles abaixo:

[Storybook](https://choosealicense.com/licenses/mit/)


## Configuração do Tailwind CSS
A biblioteca usa Tailwind CSS para estilizar os componentes. Para garantir que os estilos funcionem e o IntelliSense do Tailwind no VSCode reconheça as classes customizadas, configure o Tailwind no seu projeto.

[Instalação TailwindCSS](https://tailwindcss.com/docs/installation/using-vite)

### Passo 1: Instale o Tailwind
```bash
npm install tailwindcss @tailwindcss/vite
```

### Passo 2: Configurar o plugin Vite
vite.config.ts
```bash
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})
```

### Passo 3: Importar Tailwind CSS
index.css
```bash
@import "tailwindcss";
```

### Passo 4: Inclua os Estilos
main.tsx
```bash
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";

import "ivt/index.css";
import "./globals.css";

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

### Passo 5: Usando o pacote
App.tsx
```bash
import { Button } from "ivt/button";

export function App() {
  return (
    <div>
      <Button>Investtools</Button>
    </div>
  );
}
);
```


### Passo 6: Inicie seu processo de construção
```bash
npm run dev
```

### Passo 7: Publicando no npm
```bash
npm login
npm run rollup
npm publish --access public
```