Metatech Components

Biblioteca de componentes UI con dos capas:

1. Showcase React para explorar patrones visuales y copiar snippets.
2. Capa Core CSS reutilizable para usar en cualquier framework (React, Vue, Angular, Svelte o HTML puro).

Objetivos del Proyecto

• Acelerar el desarrollo con componentes listos para producción.
• Mantener consistencia visual con tokens y estilos base.
• Priorizar accesibilidad y responsive design.
• Permitir adopción incremental en diferentes stacks.

Stack

• React + Wouter para el showcase.
• Tailwind CSS para utilidades y prototipado rápido.
• Vite para build y preview.

Instalación

git clone https://github.com/metatech-programmer/components_css.git
cd components_css
npm install

Scripts

npm run dev
npm run build
npm run build:strict
npm run preview

Uso Framework-Agnostic

La librería exporta estilos base y utilidades para que no dependas de React.

1. Importa la hoja core:

@import "project_css_components/core.css";

2. Usa clases universales:

<div class="mc-card mc-stack">
	<span class="mc-badge">Nuevo</span>
	<button class="mc-btn">Acción</button>
</div>

3. Si necesitas clases de showcase (estructura de demos), usa el export:

import { createShowcaseBoxStyle } from "project_css_components/showcase";

const styles = createShowcaseBoxStyle(2);

Exportaciones

• project_css_components -> API de librería.
• project_css_components/core.css -> tokens y componentes base CSS.
• project_css_components/showcase -> helper de estilos para demos.

Criterios de Producción Aplicados

• Botones con type="button" para evitar submits accidentales.
• Modal actualizado a <dialog> con controles de apertura/cierre.
• Navegación refactorizada para evitar duplicación y mejorar semántica.
• Imágenes con loading="lazy" en ejemplos visuales.
• Soporte prefers-reduced-motion para accesibilidad.
• Metadatos base SEO y Open Graph en index.html.

Contribución

1. Crea una rama: git checkout -b feature/nueva-mejora.
2. Desarrolla y valida con npm run build.
3. Abre PR describiendo cambios y motivación.

Licencia

Revisar el archivo LICENSE.