npm package: @searchmindai/gatsby
Description: Uma biblioteca React TypeScript para uso em aplicações Gatsby
Author: Seu Nome
Latest version: 1.0.2

# SearchMind Gatsby

Uma biblioteca React TypeScript moderna para uso em aplicações Gatsby, com componentes reutilizáveis e hooks utilitários.

## 🚀 Instalação

```bash
npm install @searchmindai/gatsby
```

ou

```bash
yarn add @searchmindai/gatsby
```

## 📦 Componentes Incluídos

### Button

Um componente de botão flexível com diferentes variantes e tamanhos.

```tsx
import { Button } from '@searchmindai/gatsby';

function App() {
  return (
    <div>
      <Button variant="primary" size="medium" onClick={() => alert('Clicado!')}>
        Botão Primário
      </Button>
      
      <Button variant="outline" size="large">
        Botão Outline
      </Button>
      
      <Button variant="secondary" size="small" disabled>
        Botão Desabilitado
      </Button>
    </div>
  );
}
```

#### Props do Button

| Prop | Tipo | Padrão | Descrição |
|------|------|--------|-----------|
| `children` | `React.ReactNode` | - | Conteúdo do botão |
| `variant` | `'primary' \| 'secondary' \| 'outline'` | `'primary'` | Estilo do botão |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Tamanho do botão |
| `disabled` | `boolean` | `false` | Estado desabilitado |
| `onClick` | `() => void` | - | Função de clique |
| `className` | `string` | `''` | Classes CSS adicionais |

### Card

Um componente de card para organizar conteúdo.

```tsx
import { Card } from '@searchmindai/gatsby';

function App() {
  return (
    <Card title="Meu Card" shadow padding="large">
      <p>Este é o conteúdo do card.</p>
    </Card>
  );
}
```

#### Props do Card

| Prop | Tipo | Padrão | Descrição |
|------|------|--------|-----------|
| `children` | `React.ReactNode` | - | Conteúdo do card |
| `title` | `string` | - | Título do card |
| `className` | `string` | `''` | Classes CSS adicionais |
| `shadow` | `boolean` | `true` | Se deve ter sombra |
| `padding` | `'none' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Padding do card |

## 🪝 Hooks Utilitários

### useLocalStorage

Hook para gerenciar valores no localStorage de forma reativa.

```tsx
import { useLocalStorage } from '@searchmindai/gatsby';

function App() {
  const [name, setName, removeName] = useLocalStorage('user-name', {
    defaultValue: 'Usuário Anônimo'
  });

  return (
    <div>
      <p>Nome: {name}</p>
      <button onClick={() => setName('João')}>
        Definir Nome
      </button>
      <button onClick={removeName}>
        Remover Nome
      </button>
    </div>
  );
}
```

#### Parâmetros do useLocalStorage

| Parâmetro | Tipo | Descrição |
|-----------|------|-----------|
| `key` | `string` | Chave do localStorage |
| `options` | `UseLocalStorageOptions` | Opções de configuração |

#### UseLocalStorageOptions

| Prop | Tipo | Padrão | Descrição |
|------|------|--------|-----------|
| `defaultValue` | `any` | `undefined` | Valor padrão |
| `serialize` | `boolean` | `true` | Se deve fazer parsing JSON |

## 🎨 Estilização

Esta biblioteca usa classes CSS do Tailwind CSS. Para funcionar corretamente, certifique-se de que seu projeto Gatsby tenha o Tailwind CSS configurado.

### Instalação do Tailwind no Gatsby

```bash
npm install tailwindcss postcss autoprefixer gatsby-plugin-postcss
npx tailwindcss init -p
```

Adicione ao seu `gatsby-config.js`:

```javascript
module.exports = {
  plugins: [
    'gatsby-plugin-postcss',
    // outros plugins...
  ],
}
```

Configure o `tailwind.config.js`:

```javascript
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@searchmindai/gatsby/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

## 🛠️ Desenvolvimento

### Scripts Disponíveis

```bash
# Build da biblioteca
npm run build

# Desenvolvimento com watch
npm run dev

# Linting
npm run lint

# Fix de linting
npm run lint:fix

# Testes
npm run test
```

### Estrutura do Projeto

```text
src/
├── components/           # Componentes React
│   ├── Button.tsx
│   └── Card.tsx
├── utils/               # Hooks e utilitários
│   └── useLocalStorage.ts
└── index.ts            # Exports principais
```

## 📝 Changelog

### v1.0.0

- ✨ Componente Button com variantes e tamanhos

## 📝 Changelog

### v1.0.0

- ✨ Componente Button com variantes e tamanhos
- ✨ Componente Card com título e padding configuráveis
- ✨ Hook useLocalStorage para gerenciamento de estado local
- ✨ Configuração completa para build e publicação no npm
- ✨ Compatibilidade total com Gatsby

## 🤝 Contribuindo

1. Faça um fork do projeto
2. Crie uma branch para sua feature (`git checkout -b feature/nova-feature`)
3. Commit suas mudanças (`git commit -m 'Adiciona nova feature'`)
4. Push para a branch (`git push origin feature/nova-feature`)
5. Abra um Pull Request

## 📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.

## 🔗 Links Úteis

- [Gatsby Documentation](https://www.gatsbyjs.com/docs/)
- [React Documentation](https://reactjs.org/)
- [TypeScript Documentation](https://www.typescriptlang.org/)
- [Tailwind CSS Documentation](https://tailwindcss.com/)

---

Feito com ❤️ para a comunidade Gatsby