@sector.siit/mlz-components 1.0.0-rc.202508072114

package/README.md

@@ -0,0 +1,176 @@
+# 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
+
+## 🤝 Contribuir
+
+1. Fork el proyecto
+2. Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`)
+3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)
+4. Push a la rama (`git push origin feature/AmazingFeature`)
+5. Abre un Pull Request
+
+## 📈 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/components/Input/Input.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Variante visual del input */
+    variant?: 'default' | 'error' | 'success';
+    /** Tamaño del input */
+    size?: 'sm' | 'md' | 'lg';
+    /** Si el input tiene un label */
+    label?: string;
+    /** Texto de ayuda debajo del input */
+    helperText?: string;
+    /** Texto de error */
+    errorText?: string;
+    /** Si el input es de ancho completo */
+    fullWidth?: boolean;
+}
+/**
+ * Componente Input básico con diferentes variantes y tamaños
+ */
+export declare const Input: React.FC<InputProps>;
+export default Input;
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3F,gCAAgC;IAChC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC1C,uBAAuB;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA4HtC,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,84 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Input").InputProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+        };
+        size: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+        };
+        label: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        placeholder: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        helperText: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        errorText: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        fullWidth: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithHelperText: Story;
+export declare const WithError: Story;
+export declare const Success: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const Disabled: Story;
+export declare const FullWidth: Story;
+export declare const Password: Story;
+export declare const Email: Story;
+export declare const Number: Story;
+export declare const AllVariants: Story;
+export declare const AllSizes: Story;
+//# sourceMappingURL=Input.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAuBtB,CAAC"}

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

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

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

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

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+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>;
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Variante visual del input */
+    variant?: 'default' | 'error' | 'success';
+    /** Tamaño del input */
+    size?: 'sm' | 'md' | 'lg';
+    /** Si el input tiene un label */
+    label?: string;
+    /** Texto de ayuda debajo del input */
+    helperText?: string;
+    /** Texto de error */
+    errorText?: string;
+    /** Si el input es de ancho completo */
+    fullWidth?: boolean;
+}
+/**
+ * Componente Input básico con diferentes variantes y tamaños
+ */
+declare const Input: React.FC<InputProps>;
+
+export { Button, Input };
+export type { ButtonProps, InputProps };

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;AAEvD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC"}