@sector.siit/mlz-components 1.0.0

package/README.md

@@ -0,0 +1,206 @@
+# 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
+
+```bash
+npm install @sector.siit/mlz-components
+# o
+yarn add @sector.siit/mlz-components
+# o
+bun add @sector.siit/mlz-components
+```
+
+## 🎯 Uso Básico
+
+```tsx
+import { Button } from '@sector.siit/mlz-components';
+
+function App() {
+  return (
+    <Button variant="primary" size="md">
+      ¡Hola Mundo!
+    </Button>
+  );
+}
+```
+
+## 🎨 Personalización con Variables CSS
+
+La librería utiliza variables CSS que puedes sobrescribir en tu proyecto:
+
+```css
+/* 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' \| '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
+
+```tsx
+// 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>
+```
+
+## 🛠️ Desarrollo
+
+```bash
+# 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
+```
+
+## 🚀 Despliegue
+
+El proyecto incluye GitHub Actions para:
+
+1. **Despliegue automático a NPM** cuando cambia la versión en `package.json`
+2. **Despliegue de Storybook a GitHub Pages** en cada push a main
+
+### Configuración necesaria:
+
+1. **NPM Token**: Añade `NPM_TOKEN` a los secrets de GitHub
+2. **GitHub Pages**: Habilita GitHub Pages en la configuración del repositorio
+
+## 📄 Licencia
+
+MIT
+
+## 🚀 Release Process
+
+### 📦 Stable Releases (main branch)
+Cuando haces push a `main` con una nueva versión en `package.json`:
+1. **Publicación automática** a NPM como `@sector.siit/mlz-components`
+2. **GitHub Release** creado con tag (`v1.0.0`, `v1.0.1`, etc.)
+3. **Storybook** desplegado a GitHub Pages
+4. **Release notes** generadas automáticamente
+
+### 🧪 Release Candidates (develop branch)
+Cuando haces push a `develop`:
+1. **Release Candidate** creado con timestamp (`v1.0.0-rc.202408071234`)
+2. **Artifacts incluidos**: dist files + Storybook build
+3. **Pre-release** marcado para testing
+4. **NO se publica** a NPM (solo para testing)
+
+### 🔄 Workflow de desarrollo:
+```bash
+# 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
+
+1. Fork el proyecto
+2. Crea una rama para tu feature desde `develop` (`git checkout -b feature/AmazingFeature`)
+3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)
+4. Push a tu rama (`git push origin feature/AmazingFeature`)
+5. Abre un Pull Request hacia `develop`
+
+## 📈 Roadmap
+
+- [ ] Componente Input
+- [ ] Componente Card
+- [ ] Componente Modal
+- [ ] Componente Dropdown
+- [ ] Sistema de themes predefenidos
+- [ ] Componentes de formulario
+- [ ] Componentes de navegación

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Contenido del botón
+     */
+    children: React.ReactNode;
+    /**
+     * Variante del botón
+     */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    /**
+     * Tamaño del botón
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const Button: React.FC<ButtonProps>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IACxD;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAeD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4BxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Button/Button.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Outline: Story;
+export declare const Ghost: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const Disabled: Story;
+export declare const AllVariants: Story;
+export declare const CustomColors: Story;
+//# sourceMappingURL=Button.stories.d.ts.map

package/dist/components/Button/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAgC7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgC1B,CAAC"}

package/dist/components/Button/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Contenido del botón
+     */
+    children: React.ReactNode;
+    /**
+     * Variante del botón
+     */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    /**
+     * Tamaño del botón
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Button: React.FC<ButtonProps>;
+
+export { Button };
+export type { ButtonProps };

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC"}