@sector.siit/mlz-components

v1.0.22

Published

4 days ago

Una librería de componentes React con Tailwind CSS y variables CSS customizables

Downloads

1,838

0High
0Medium
0Low

plugo

react components tailwind typescript ui-library

MLZ Components

Una librería moderna de componentes React con Tailwind CSS y variables CSS customizables.

🚀 Características

⚛️ React 18 - Componentes modernos con TypeScript
🎨 Tailwind CSS - Sistema de diseño utility-first
🎯 Variables CSS - Personalización completa desde tu proyecto
📚 Storybook - Documentación interactiva
📦 Tree-shakeable - Importa solo lo que necesitas
🔧 TypeScript - Tipado completo
✅ Probado - Tests unitarios incluidos

📦 Instalación

npm install @sector.siit/mlz-components
# o
yarn add @sector.siit/mlz-components
# o
bun add @sector.siit/mlz-components

🎯 Uso Básico

En React / Vite

import { Button } from '@sector.siit/mlz-components';
import '@sector.siit/mlz-components/styles.css';

function App() {
  return (
    <Button variant="primary" size="md">
      ¡Hola Mundo!
    </Button>
  );
}

En Next.js 13+ (App Router)

Los componentes están configurados con "use client" y funcionan directamente en Next.js:

// app/page.tsx
import { Button } from '@sector.siit/mlz-components';
import '@sector.siit/mlz-components/styles.css';

export default function Home() {
  return (
    <main>
      <Button variant="primary" size="md">
        ¡Hola Mundo!
      </Button>
    </main>
  );
}

Configuración de Tailwind en Next.js

Si usas Tailwind CSS en tu proyecto Next.js, asegúrate de incluir los componentes en tu tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@sector.siit/mlz-components/dist/**/*.{js,jsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Importar Variables CSS

Para personalizar los componentes, importa el archivo de variables en tu layout principal:

// app/layout.tsx
import '@sector.siit/mlz-components/styles.css';
import '@sector.siit/mlz-components/variables.css';
import './globals.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="es">
      <body>{children}</body>
    </html>
  );
}

🎨 Personalización con Variables CSS

La librería utiliza variables CSS que puedes sobrescribir en tu proyecto:

/* En tu archivo CSS global */
:root {
  /* Colores primarios */
  --mlz-primary-500: #10b981;
  --mlz-primary-600: #059669;
  --mlz-primary-700: #047857;
  
  /* Espaciado */
  --mlz-spacing-sm: 0.75rem;
  --mlz-spacing-md: 1.25rem;
  --mlz-spacing-lg: 2rem;
  
  /* Border radius */
  --mlz-border-radius-md: 0.5rem;
  
  /* Tamaños de fuente */
  --mlz-font-size-base: 1.125rem;
}

Variables Disponibles

Colores

--mlz-primary-[50-950]: Paleta de colores primarios
--mlz-secondary-[50-950]: Paleta de colores secundarios

Espaciado

--mlz-spacing-xs: 0.25rem (por defecto)
--mlz-spacing-sm: 0.5rem (por defecto)
--mlz-spacing-md: 1rem (por defecto)
--mlz-spacing-lg: 1.5rem (por defecto)
--mlz-spacing-xl: 2rem (por defecto)
--mlz-spacing-2xl: 3rem (por defecto)

Border Radius

--mlz-border-radius-sm: 0.25rem (por defecto)
--mlz-border-radius-md: 0.375rem (por defecto)
--mlz-border-radius-lg: 0.5rem (por defecto)
--mlz-border-radius-xl: 0.75rem (por defecto)

Tamaños de Fuente

--mlz-font-size-xs: 0.75rem (por defecto)
--mlz-font-size-sm: 0.875rem (por defecto)
--mlz-font-size-base: 1rem (por defecto)
--mlz-font-size-lg: 1.125rem (por defecto)
--mlz-font-size-xl: 1.25rem (por defecto)

📚 Componentes

Button

Un componente de botón versatil con múltiples variantes y tamaños.

Props

| Prop | Tipo | Default | Descripción | | ---------- | -------------------------------------------------------- | ----------- | ------------------------- | | variant | 'primary' \| 'secondary' \| 'outline-solid' \| 'ghost' | 'primary' | Variante visual del botón | | size | 'sm' \| 'md' \| 'lg' | 'md' | Tamaño del botón | | children | React.ReactNode | - | Contenido del botón | | disabled | boolean | false | Estado deshabilitado | | onClick | (event: MouseEvent) => void | - | Función de click |

Ejemplos

// Variantes
<Button variant="primary">Primario</Button>
<Button variant="secondary">Secundario</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

// Tamaños
<Button size="sm">Pequeño</Button>
<Button size="md">Mediano</Button>
<Button size="lg">Grande</Button>

// Estados
<Button disabled>Deshabilitado</Button>

Input

Componente de input con validación, estados y personalización completa.

Props

| Prop | Tipo | Default | Descripción | | ------------ | ----------------------------------- | ----------- | --------------------------------------- | | variant | 'default' \| 'error' \| 'success' | 'default' | Estado visual del input | | size | 'sm' \| 'md' \| 'lg' | 'md' | Tamaño del input | | label | string | - | Texto del label | | helperText | string | - | Texto de ayuda | | errorText | string | - | Texto de error (sobrescribe helperText) | | fullWidth | boolean | false | Si el input ocupa todo el ancho |

Ejemplos

// Básico
<Input placeholder="Ingresa tu nombre" />

// Con label y ayuda
<Input 
  label="Email"
  placeholder="[email protected]"
  helperText="Te enviaremos notificaciones aquí"
/>

// Con error
<Input 
  label="Password"
  type="password"
  variant="error"
  errorText="La contraseña debe tener al menos 8 caracteres"
/>

// Tamaños
<Input size="sm" placeholder="Input pequeño" />
<Input size="lg" placeholder="Input grande" />

// Ancho completo
<Input fullWidth placeholder="Ocupa todo el ancho" />

🛠️ Desarrollo

# Instalar dependencias
npm install

# Desarrollo con Storybook
npm run storybook

# Build de la librería
npm run build

# Lint
npm run lint

# Type check
npm run typecheck

🚀 CI/CD & Deployments

El proyecto incluye un sistema completo de CI/CD automatizado:

📦 Releases Automáticos

Production Releases (main)

Trigger: Push a main con cambio de versión en package.json
Outputs:
- 📦 NPM package publicado
- 📚 Storybook actualizado en GitHub Pages
- 🚀 GitHub Release con changelog
- 🏷️ Git tag automático

Release Candidates (develop)

Trigger: Cualquier push a develop
Outputs:
- 🧪 NPM package con tag @rc
- 📋 GitHub Prerelease
- 📊 Assets descargables (build + storybook)

🎯 Instalación de Versiones

# Última versión estable
npm install @sector.siit/mlz-components

# Última release candidate
npm install @sector.siit/mlz-components@rc

# Versión específica de RC
npm install @sector.siit/[email protected]

⚡ Quick Releases

Para cambios solo de documentación, el sistema detecta automáticamente y ejecuta un pipeline optimizado de ~2 minutos.

📋 Configuración Requerida

NPM Token: Agregar NPM_TOKEN a GitHub Secrets
GitHub Pages: Habilitar en configuración del repositorio

Ver documentación completa de CI/CD para más detalles.

📄 Licencia

MIT

🚀 Release Process

📦 Stable Releases (main branch)

Cuando haces push a main con una nueva versión en package.json:

Publicación automática a NPM como @sector.siit/mlz-components
GitHub Release creado con tag (v1.0.0, v1.0.1, etc.)
Storybook desplegado a GitHub Pages
Release notes generadas automáticamente

🧪 Release Candidates (develop branch)

Cuando haces push a develop:

Release Candidate creado con timestamp (v1.0.0-rc.202408071234)
Artifacts incluidos: dist files + Storybook build
Pre-release marcado para testing
NO se publica a NPM (solo para testing)

🔄 Workflow de desarrollo:

# Para nuevas features
git checkout develop
# ... desarrolla tu feature ...
git push origin develop  # ✨ Crea RC automáticamente

# Para release estable
git checkout main
git merge develop
# Actualiza version en package.json
git push origin main     # 🚀 Publica a NPM + GitHub Release

🤝 Contribuir

Fork el proyecto
Crea una rama para tu feature desde develop (git checkout -b feature/AmazingFeature)
Commit tus cambios (git commit -m 'Add some AmazingFeature')
Push a tu rama (git push origin feature/AmazingFeature)
Abre un Pull Request hacia develop

📋 Guías de Contribución

🛠️ Developer Guide - Guía completa para desarrolladores
🚀 CI/CD Documentation - Sistema de deployments automatizados
⚡ Next.js Integration Guide - Guía completa para usar en Next.js

👥 Contributors

¡Gracias a todas las personas que han contribuido a este proyecto!

📊 Estadísticas de Contribuciones

Para ver estadísticas detalladas de contribuciones, consulta CONTRIBUTORS_STATS.md.

📈 Roadmap

[x] ✅ Componente Button con variantes y tamaños
[x] ✅ Componente Input con validación y estados
[x] ✅ Sistema de CI/CD automatizado
[x] ✅ Release Candidates con NPM
[x] ✅ Documentación completa con Storybook
[ ] 🔄 Componente Card
[ ] 🔄 Componente Modal
[ ] 🔄 Componente Dropdown
[ ] 🔄 Sistema de themes predefinidos
[ ] 🔄 Componentes de formulario avanzados
[ ] 🔄 Componentes de navegación
[ ] 🔄 Componente DatePicker
[ ] 🔄 Componente DataTable

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

MLZ Components

🚀 Características

📦 Instalación

🎯 Uso Básico

En React / Vite

En Next.js 13+ (App Router)

Configuración de Tailwind en Next.js

Importar Variables CSS

🎨 Personalización con Variables CSS

Variables Disponibles

Colores

Espaciado

Border Radius

Tamaños de Fuente

📚 Componentes

Button

Props

Ejemplos

Input

Props

Ejemplos

🛠️ Desarrollo

🚀 CI/CD & Deployments

📦 Releases Automáticos

Production Releases (main)

Release Candidates (develop)

🎯 Instalación de Versiones

⚡ Quick Releases

📋 Configuración Requerida

📄 Licencia

🚀 Release Process

📦 Stable Releases (main branch)

🧪 Release Candidates (develop branch)

🔄 Workflow de desarrollo:

🤝 Contribuir

📋 Guías de Contribución

👥 Contributors

📊 Estadísticas de Contribuciones

📈 Roadmap