@dropi/ui-components 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Dropi UI Components - Framework-agnostic Web Components library built with Angular Elements",
   "keywords": [
     "web-components",
@@ -12,55 +12,34 @@
   "author": "Dropi Team",
   "license": "UNLICENSED",
   "private": false,
-  "main": "index.js",
-  "module": "fesm2022/dropi-ui-elements.mjs",
-  "types": "index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/dropi-ui-elements.mjs",
-      "esm": "./esm2022/dropi-ui-elements.mjs",
-      "default": "./fesm2022/dropi-ui-elements.mjs"
-    },
-    "./dropi-tokens.css": "./dropi-tokens.css"
-  },
-  "files": [
-    "**/*",
-    "dropi-tokens.css",
-    "README.md"
-  ],
   "scripts": {
     "build": "ng-packagr -p ng-package.json",
     "copy:tokens": "cp src/styles.scss ../dist/dropi-tokens.css",
-    "build:complete": "npm run build && npm run copy:tokens",
-    "watch": "ng-packagr -p ng-package.json -w",
-    "test": "echo \"Tests coming soon\"",
-    "prepublishOnly": "npm run build:complete"
+    "build:complete": "npm run build && npm run copy:tokens"
   },
   "peerDependencies": {
-    "@angular/common": "^19.0.0",
-    "@angular/core": "^19.0.0",
-    "@angular/elements": "^19.0.0"
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0",
+    "@angular/elements": "^18.2.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.0.0",
-    "@angular/cli": "^19.0.0",
-    "@angular/compiler": "^19.2.18",
-    "@angular/compiler-cli": "^19.0.0",
-    "ng-packagr": "^19.0.0",
+    "@angular-devkit/build-angular": "^18.2.0",
+    "@angular/cli": "^18.2.0",
+    "@angular/compiler-cli": "^18.2.0",
+    "ng-packagr": "^18.2.1",
     "tslib": "^2.3.0",
-    "typescript": "~5.6.2",
-    "zone.js": "~0.15.0"
+    "typescript": "~5.5.4",
+    "zone.js": "~0.14.10"
   },
   "dependencies": {
     "@ngx-translate/core": "^15.0.0"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/dropi/ui-components.git"
+    "url": "https://github.com/mauriciocarvajal-tech/ui-components.git"
   },
   "bugs": {
-    "url": "https://github.com/dropi/ui-components/issues"
+    "url": "https://github.com/mauriciocarvajal-tech/ui-components/issues"
   },
-  "homepage": "https://ui.dropi.co"
+  "homepage": "https://github.com/mauriciocarvajal-tech/ui-components#readme"
 }

package/publish-npm.sh

@@ -0,0 +1,81 @@
+#!/bin/bash
+# Script para publicar @dropi/ui-components a NPM
+# Ubicación: ~/Desktop/dropi-ui-components/publish-npm.sh
+
+set -e
+
+echo "📦 Publicación de @dropi/ui-components a NPM"
+echo "============================================"
+echo ""
+
+# Verificar login
+if ! npm whoami &> /dev/null; then
+    echo "⚠️  No estás logueado en NPM"
+    echo ""
+    echo "Pasos para crear cuenta NPM (si no tienes):"
+    echo "1. Ir a: https://www.npmjs.com/signup"
+    echo "2. Crear cuenta gratuita"
+    echo ""
+    echo "Ejecuta: npm login"
+    echo "  Username: tu_usuario_npm"
+    echo "  Password: tu_contraseña"
+    echo "  Email: tu_email@example.com"
+    echo ""
+    exit 1
+fi
+
+echo "✅ Usuario NPM: $(npm whoami)"
+echo ""
+
+# Verificar directorio
+if [ ! -f "package.json" ]; then
+    echo "❌ Error: No se encuentra package.json"
+    echo "   Ejecuta desde ~/Desktop/dropi-ui-components"
+    exit 1
+fi
+
+# Build
+echo "🔨 Building package..."
+npm run build:complete
+
+if [ ! -d "../dist" ]; then
+    echo "❌ Error: Build falló"
+    exit 1
+fi
+
+echo "✅ Build completado"
+echo ""
+
+# Verificar package.json en dist
+cd ../dist
+
+echo "📋 Información del paquete:"
+echo "  Nombre: $(node -p "require('./package.json').name")"
+echo "  Versión: $(node -p "require('./package.json').version")"
+echo ""
+
+read -p "¿Publicar a NPM? (y/n): " CONFIRM
+
+if [ "$CONFIRM" != "y" ] && [ "$CONFIRM" != "Y" ]; then
+    echo "❌ Publicación cancelada"
+    exit 0
+fi
+
+read -p "¿Paquete público? (y/n): " PUBLIC
+
+if [ "$PUBLIC" = "y" ] || [ "$PUBLIC" = "Y" ]; then
+    echo "📤 Publicando como paquete público..."
+    npm publish --access public
+else
+    echo "📤 Publicando como paquete privado..."
+    npm publish
+fi
+
+echo ""
+echo "✅ Paquete publicado exitosamente!"
+echo ""
+echo "Verificar en: https://www.npmjs.com/package/@dropi/ui-components"
+echo ""
+echo "Para instalar:"
+echo "  npm install @dropi/ui-components"
+echo ""

package/src/components-source/dropi-button/dropi-button.component.ts

@@ -1,73 +1,75 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IconComponent } from '../icon/icon.component';
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { IconComponent } from "../icon/icon.component";
 
 export type ButtonType =
-  | 'legacy'
-  | 'default'
-  | 'success'
-  | 'info'
-  | 'error'
-  | 'warning'
-  | 'dropdown';
-export type ButtonSeverity = 'primary' | 'secondary' | 'tertiary';
-export type ButtonSize = 'large' | 'normal' | 'small';
-export type ButtonState = 'default' | 'disabled' | 'loading';
+  | "legacy"
+  | "default"
+  | "success"
+  | "info"
+  | "error"
+  | "warning"
+  | "dropdown";
+export type ButtonSeverity = "primary" | "secondary" | "tertiary";
+export type ButtonSize = "large" | "normal" | "small";
+export type ButtonState = "default" | "disabled" | "loading";
 
 // @figma-node 2-381
 @Component({
-  selector: 'dropi-button',
+  selector: "dropi-wc-button",
   standalone: true,
   imports: [CommonModule, IconComponent],
-  templateUrl: './dropi-button.component.html',
-  styleUrls: ['./dropi-button.component.scss'],
-  host: { 'data-figma-node': '2-381' },
+  templateUrl: "./dropi-button.component.html",
+  styleUrls: ["./dropi-button.component.scss"],
+  host: { "data-figma-node": "2-381" },
 })
 export class ButtonComponent {
-  @Input() type: ButtonType = 'default';
-  @Input() severity: ButtonSeverity = 'primary';
-  @Input() size: ButtonSize = 'normal';
-  @Input() state: ButtonState = 'default';
-  @Input() preIcon: string = '';
-  @Input() postIcon: string = '';
-  @Input() text: string = '';
+  @Input() type: ButtonType = "default";
+  @Input() severity: ButtonSeverity = "primary";
+  @Input() size: ButtonSize = "normal";
+  @Input() state: ButtonState = "default";
+  @Input() preIcon: string = "";
+  @Input() postIcon: string = "";
+  @Input() text: string = "";
   @Output() onClick = new EventEmitter<Event>();
 
-  colorload = 'var(--Primary-Primary-500)';
+  colorload = "var(--Primary-Primary-500)";
 
   colorMap: { [key: string]: string } = {
-    default: 'Primary-Primary-',
-    success: 'Success-Success-',
-    error: 'Error-Error-',
-    info: 'Info-Info-',
-    legacy: 'Secondary-Secondary-',
-    warning: 'Warning-Warning-',
+    default: "Primary-Primary-",
+    success: "Success-Success-",
+    error: "Error-Error-",
+    info: "Info-Info-",
+    legacy: "Secondary-Secondary-",
+    warning: "Warning-Warning-",
   };
 
   get iconSize(): string {
     switch (this.size) {
-      case 'large':
-        return '24px';
-      case 'small':
-        return '16px';
+      case "large":
+        return "24px";
+      case "small":
+        return "16px";
       default:
-        return '18px'; // Tamaño por defecto (normal)
+        return "18px"; // Tamaño por defecto (normal)
     }
   }
 
   get color() {
-    let intensity = this.state === 'disabled' ? '300' : '500';
+    let intensity = this.state === "disabled" ? "300" : "500";
     return this.colorMap[this.type] + intensity;
   }
 
   get fontColor(): string {
     switch (this.severity) {
-      case 'tertiary':
-        return this.type === 'default' || this.type === 'legacy' ? 'Gray-Gray-500' : this.color;
-      case 'secondary':
+      case "tertiary":
+        return this.type === "default" || this.type === "legacy"
+          ? "Gray-Gray-500"
+          : this.color;
+      case "secondary":
         return this.color;
       default:
-        return 'Neutral-White';
+        return "Neutral-White";
     }
   }
 
@@ -75,7 +77,7 @@ export class ButtonComponent {
     return `var(--${this.fontColor})`;
   }
   handleClick(event: Event) {
-    if (this.state !== 'disabled' && this.state !== 'loading') {
+    if (this.state !== "disabled" && this.state !== "loading") {
       this.onClick.emit(event);
     }
   }

package/src/index.ts

@@ -1,9 +1,10 @@
 /**
  * Public API Surface de @dropi/ui-components
- *
- * Este archivo exporta la API pública de la librería para uso externo
  */
 
+// Exportar componentes individuales desde components-source
+export { ButtonComponent } from "./components-source/dropi-button/dropi-button.component";
+
 // Exportar el módulo de elementos
 export { DropiElementsModule } from "./lib/elements.module";
 
@@ -15,17 +16,3 @@ export {
 
 // Información de versión
 export const DROPI_ELEMENTS_VERSION = "1.0.0";
-
-/**
- * README: Cómo usar esta librería
- *
- * Los estilos CSS (dropi-tokens.css) deben importarse por separado
- * en tu aplicación. No se pueden bundlear en el JavaScript.
- *
- * Ejemplo:
- * ```typescript
- * // En tu aplicación
- * import '@dropi/ui-components/dropi-tokens.css';  // CSS tokens
- * import '@dropi/ui-components';                    // Web Components
- * ```
- */

package/.gitignore

@@ -1,13 +0,0 @@
-# Dropi UI Components
-
-node_modules/
-dist/
-*.log
-.DS_Store
-*.tgz
-coverage/
-.nyc_output/
-.angular/
-.nx/
-tmp/
-temp/