SearchMind Gatsby

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

🚀 Instalação

npm install @searchmindai/gatsby

ou

yarn add @searchmindai/gatsby

📦 Componentes Incluídos

Button

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

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.

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.

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

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

Adicione ao seu gatsby-config.js:

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

Configure o tailwind.config.js:

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

🛠️ Desenvolvimento

Scripts Disponíveis

# 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

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 para mais detalhes.

🔗 Links Úteis

• Gatsby Documentation
• React Documentation
• TypeScript Documentation
• Tailwind CSS Documentation

Feito com ❤️ para a comunidade Gatsby