Web Components Aulapp

Biblioteca de Web Components React com shadcn/ui, incluindo o WordSplitter e outros componentes.

Instalação

# Usando npm
npm install web-components-aulapp

# Usando pnpm
pnpm add web-components-aulapp

# Usando yarn
yarn add web-components-aulapp

Componentes disponíveis

WordSplitter

Um componente para separar palavras em letras individuais, com recursos avançados:

• Exibe cada letra em um quadrado individual
• Suporta múltiplas palavras
• Verificação ortográfica em tempo real
• Botões de ação (adicionar imagem, excluir palavra)

Uso

Importando os estilos

Primeiro, importe o arquivo CSS:

import 'web-components-aulapp/dist/web-components-aulapp.css';

Usando Web Components

<!-- Em seu arquivo HTML -->
<word-splitter></word-splitter>

<!-- No JavaScript antes do uso -->
<script type="module">
  import 'web-components-aulapp';
</script>

Usando em React

import 'web-components-aulapp';

function App() {
  return (
    <div>
      <word-splitter></word-splitter>
    </div>
  );
}

Componentes em detalhe

WordSplitter

Este componente permite adicionar palavras e exibi-las com cada letra em um quadrado separado. O componente:

• Mostra a palavra sendo digitada em tempo real
• Permite adicionar múltiplas palavras
• Verifica a ortografia em tempo real
• Possui botões para adicionar imagem e excluir palavra

Desenvolvimento

Para contribuir com o desenvolvimento:

# Instalar dependências
pnpm install

# Iniciar servidor de desenvolvimento
pnpm dev

# Compilar para produção
pnpm build

Tecnologias

• React 18
• TypeScript
• Tailwind CSS
• shadcn/ui
• Vite

Licença

MIT