npm - @dropi/ui-components - Versions diffs - 1.0.1 → 1.0.2 - Mend

@dropi/ui-components 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui-components",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Dropi UI Components - Framework-agnostic Web Components library built with Angular Elements",
   "keywords": [
     "web-components",
@@ -41,5 +41,23 @@
   "bugs": {
     "url": "https://github.com/mauriciocarvajal-tech/ui-components/issues"
   },
+  "main": "dist/fesm2022/dropi-ui-components.mjs",
+  "module": "dist/fesm2022/dropi-ui-components.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "esm2022": "./dist/esm2022/dropi-ui-components.mjs",
+      "esm": "./dist/esm2022/dropi-ui-components.mjs",
+      "default": "./dist/fesm2022/dropi-ui-components.mjs"
+    },
+    "./dropi-tokens.css": "./dist/dropi-tokens.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
   "homepage": "https://github.com/mauriciocarvajal-tech/ui-components#readme"
 }

package/CONTRIBUTING.md DELETED Viewed

@@ -1,188 +0,0 @@
-# Contributing to @dropi/ui-components
-## Estructura del Proyecto
-```
-dropi-ui-components/
-├── src/
-│   ├── lib/
-│   │   ├── elements-registry.ts     # Registro de Web Components
-│   │   ├── elements.module.ts       # Módulo Angular
-│   │   └── bootstrap.ts             # Inicialización
-│   ├── components-source/           # Componentes Angular originales
-│   │   ├── alert/
-│   │   ├── button/
-│   │   └── ... (33 componentes)
-│   ├── styles.scss                  # CSS tokens/variables
-│   └── index.ts                     # Entry point público
-├── dist/                            # Build output (git ignored)
-└── package.json
-```
-## Desarrollo
-### Setup Inicial
-```bash
-npm install
-npm run build:complete
-```
-### Agregar Nuevo Componente
-1. **Crear componente en `src/components-source/`**
-```bash
-mkdir src/components-source/new-component
-```
-2. **Registrar en `src/lib/elements-registry.ts`**
-```typescript
-import { NewComponent } from "../components-source/new-component/new-component.component";
-// Agregar a la lista
-const components = [
-  // ...
-  {
-    component: NewComponent,
-    selector: "dropi-new-component",
-    description: "Descripción del componente",
-  },
-];
-```
-3. **Build y probar**
-```bash
-npm run build:complete
-cd ../dist
-npm link
-# En proyecto de prueba
-npm link @dropi/ui-components
-```
-### Modificar Estilos Globales
-Editar `src/styles.scss`:
-```scss
-:root {
-  /* Agregar nuevas variables */
-  --New-Variable: #value;
-}
-```
-Luego rebuild:
-```bash
-npm run build:complete
-```
-## Testing
-### Manual Testing
-```bash
-# Crear página de prueba
-cat > test.html << 'EOF'
-<!DOCTYPE html>
-<html>
-<head>
-  <link rel="stylesheet" href="dist/dropi-tokens.css">
-  <script src="dist/fesm2022/dropi-ui-elements.mjs" type="module"></script>
-</head>
-<body>
-  <dropi-button type="primary" text="Test"></dropi-button>
-</body>
-</html>
-EOF
-# Abrir en navegador
-open test.html
-```
-## Publicación
-### Versioning
-Seguir [Semantic Versioning](https://semver.org/):
-- **MAJOR** (1.0.0 → 2.0.0): Cambios breaking
-- **MINOR** (1.0.0 → 1.1.0): Nuevas features (backwards compatible)
-- **PATCH** (1.0.0 → 1.0.1): Bug fixes
-```bash
-npm version patch -m "Fix: descripción del fix"
-npm version minor -m "Feat: nueva feature"
-npm version major -m "BREAKING: descripción del cambio"
-```
-### Proceso de Release
-```bash
-# 1. Asegurar que todo está commiteado
-git status
-# 2. Actualizar versión
-npm version patch
-# 3. Build
-npm run build:complete
-# 4. Publicar
-cd dist
-npm publish
-# 5. Push con tags
-cd ..
-git push --tags
-```
-## Guidelines
-### CSS Variables
-- Siempre usar nomenclatura `--Category-Subcategory-Value`
-- Ejemplo: `--Success-Success-500`, `--Primary-Primary-100`
-- Incluir fallbacks: `var(--Success-Success-500, #0abb87)`
-### Componentes
-- Todos los componentes deben ser standalone (sin dependencias de negocio)
-- Usar `@Input()` para todas las props
-- Usar `@Output()` para eventos
-- Documentar en Storybook
-### Commits
-Formato: `type(scope): description`
-Tipos:
-- `feat`: Nueva feature
-- `fix`: Bug fix
-- `docs`: Documentación
-- `style`: Formato/estilo
-- `refactor`: Refactoring
-- `test`: Tests
-- `chore`: Mantenimiento
-Ejemplo:
-```bash
-git commit -m "feat(button): add loading state"
-git commit -m "fix(alert): icon alignment issue"
-```
-## FAQ
-**P: ¿Cómo agrego una nueva variable CSS?**
-R: Edita `src/styles.scss`, agrega la variable en `:root`, y rebuild.
-**P: ¿Puedo usar servicios de Angular?**
-R: Sí, pero solo servicios sin estado (ej: TranslateService está OK, pero evita servicios de HTTP/negocio).
-**P: ¿Cómo actualizo un componente existente?**
-R: Edita en `src/components-source/`, rebuild, bump version, y publica.

package/MIGRATION_STEPS.md DELETED Viewed

@@ -1,39 +0,0 @@
-# Migración de UI Components a Repositorio Separado
-## Paso 1: Instalación de Dependencias ✅
-```bash
-cd ~/Desktop/dropi-ui-components
-npm install
-```
-## Paso 2: Build de la Librería
-```bash
-npm run build:complete
-```
-## Paso 3: Publicar a GitHub
-```bash
-# En GitHub.com, crear repo: dropi/ui-components
-git remote add origin https://github.com/dropi/ui-components.git
-git branch -M main
-git push -u origin main
-```
-## Paso 4: Publicar a NPM (Opcional)
-```bash
-cd dist
-npm publish --access public
-```
-## Paso 5: Consumir en dropi-core_front
-```bash
-cd ~/Documents/dropi-core_front
-npm install @dropi/ui-components
-# o desde GitHub antes de publicar a NPM:
-npm install git+https://github.com/dropi/ui-components.git
-```

package/PUBLISH_CHECKLIST.md DELETED Viewed

@@ -1,97 +0,0 @@
-# ✅ Checklist de Publicación
-## Antes de Publicar
-- [x] Build exitoso (674ms)
-- [x] npm link funcionando
-- [x] dropi-core_front integrado
-- [x] angular.json actualizado
-- [x] Documentación completa
-## Publicar a GitHub (5 minutos)
-### Paso 1: Crear Repositorio en GitHub
-1. Ir a https://github.com/new
-2. **Repository name**: `ui-components`
-3. **Owner**: Selecciona tu organización `dropi` (o personal)
-4. **Description**: `Dropi UI Components - Framework-agnostic Web Components library`
-5. **Visibility**: Privado (recommended) o Público
-6. ✅ **NO** marcar "Add a README file"
-7. ✅ **NO** marcar "Add .gitignore"
-8. ✅ **NO** marcar "Choose a license"
-9. Click "Create repository"
-### Paso 2: Ejecutar Script de Publicación
-```bash
-cd ~/Desktop/dropi-ui-components
-bash publish.sh
-```
-El script te pedirá:
-1. **URL del repositorio**: Copia la URL HTTPS que GitHub te muestra
-   - Ejemplo: `https://github.com/dropi/ui-components.git`
-2. **Publicar a NPM**: Responde `n` por ahora (lo haremos después)
-### Paso 3: Verificar Publicación
-```bash
-# Ver repo en GitHub
-git remote get-url origin
-# Verificar commits en GitHub
-# Abre la URL en el navegador
-```
-## Publicar a NPM (Opcional - Después)
-```bash
-# 1. Login a NPM
-npm login
-# 2. Build
-cd ~/Desktop/dropi-ui-components
-npm run build:complete
-# 3. Publicar
-cd ../dist
-npm publish --access public
-# 4. Verificar
-npm info @dropi/ui-components
-```
-## Verificar Integración en dropi-core_front
-El dev server ya debería estar funcionando con los nuevos tokens CSS.
-### Opción A: Verificar sin reiniciar
-Abre http://localhost:4500 y verifica que los componentes se ven bien.
-### Opción B: Reiniciar dev server
-```bash
-# Detener el servidor actual (Ctrl+C)
-# Luego:
-cd ~/Documents/dropi-core_front
-npm start
-```
-## ¿Qué Sigue?
-### Corto Plazo
-- [ ] Publicar a GitHub ✅ (hoy)
-- [ ] Verificar en localhost:4500 funciona
-- [ ] (Opcional) Publicar a NPM
-### Mediano Plazo
-- [ ] CI/CD para auto-publicar en cada release
-- [ ] Primer micro frontend consumiendo la librería
-- [ ] Storybook público en ui.dropi.co
-### Largo Plazo
-- [ ] 3+ micro frontends usando @dropi/ui-components
-- [ ] Equipo UI independiente
-- [ ] Versión 2.0 con nuevos componentes

package/QUICK_START.md DELETED Viewed

@@ -1,108 +0,0 @@
-# Guía Rápida: Publicación y Uso
-## 🚀 Para Publicar (Ejecuta UNA VEZ)
-```bash
-cd ~/Desktop/dropi-ui-components
-bash publish.sh
-```
-El script te pedirá:
-1. URL del repo GitHub (créalo primero en github.com)
-2. Si quieres publicar a NPM
-## 📖 Para Usar en dropi-core_front
-### Opción A: Desde NPM (después de publicar)
-```bash
-cd ~/Documents/dropi-core_front
-npm install @dropi/ui-components
-```
-### Opción B: Desde GitHub (antes de NPM)
-```bash
-cd ~/Documents/dropi-core_front
-npm install git+https://github.com/dropi/ui-components.git
-```
-### Opción C: npm link (desarrollo local)
-```bash
-# En ui-components
-cd ~/Desktop/dist
-npm link
-# En dropi-core_front
-cd ~/Documents/dropi-core_front
-npm link @dropi/ui-components
-```
-## 📝 Usar en el Código
-```typescript
-// src/main.ts o app.module.ts
-import "@dropi/ui-components/dropi-tokens.css"; // CSS primero
-import "@dropi/ui-components"; // Web Components
-// Ya puedes usar en HTML:
-// <dropi-button type="primary" text="Click"></dropi-button>
-```
-## 🔄 Para Nueva Versión
-```bash
-cd ~/Desktop/dropi-ui-components
-# Hacer cambios en src/...
-# Actualizar versión
-npm version patch  # 1.0.0 → 1.0.1
-npm version minor  # 1.0.1 → 1.1.0
-npm version major  # 1.1.0 → 2.0.0
-# Build y publicar
-npm run build:complete
-cd ../dist
-npm publish
-# Push git tags
-git push --tags
-```
-## 📦 Archivos Importantes
-| Archivo          | Descripción                        |
-| ---------------- | ---------------------------------- |
-| `publish.sh`     | Script automatizado de publicación |
-| `QUICK_START.md` | Esta guía                          |
-| `README.md`      | Documentación completa             |
-| `src/`           | Código fuente                      |
-| `dist/`          | Build output (no commiteado)       |
-## 🆘 Troubleshooting
-### "remote origin already exists"
-```bash
-git remote remove origin
-git remote add origin <nueva-url>
-```
-### "npm ERR! need auth"
-```bash
-npm login
-```
-### "Module not found" en dropi-core_front
-```bash
-# Verificar que instalaste el paquete
-npm list @dropi/ui-components
-# Re-instalar
-npm install @dropi/ui-components --force
-```

package/jest.config.ts DELETED Viewed

@@ -1,21 +0,0 @@
-export default {
-  displayName: 'dropi-ui-elements',
-  preset: '../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  coverageDirectory: '../../coverage/libs/dropi-ui-elements',
-  transform: {
-    '^.+\\.(ts|mjs|js|html)$': [
-      'jest-preset-angular',
-      {
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-        stringifyContentPathRegex: '\\.(html|svg)$',
-      },
-    ],
-  },
-  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
-  snapshotSerializers: [
-    'jest-preset-angular/build/serializers/no-ng-attributes',
-    'jest-preset-angular/build/serializers/ng-snapshot',
-    'jest-preset-angular/build/serializers/html-comment',
-  ],
-};

package/ng-package.json DELETED Viewed

@@ -1,8 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../dist",
-  "lib": {
-    "entryFile": "src/index.ts"
-  },
-  "allowedNonPeerDependencies": ["@ngx-translate/core"]
-}

package/project.json DELETED Viewed

@@ -1,48 +0,0 @@
-{
-  "name": "dropi-ui-elements",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/dropi-ui-elements/src",
-  "prefix": "dropi",
-  "projectType": "library",
-  "release": {
-    "version": {
-      "manifestRootsToUpdate": ["dist/{projectRoot}"],
-      "currentVersionResolver": "git-tag",
-      "fallbackCurrentVersionResolver": "disk"
-    }
-  },
-  "tags": [],
-  "targets": {
-    "build": {
-      "executor": "@nx/angular:package",
-      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
-      "options": {
-        "project": "libs/dropi-ui-elements/ng-package.json",
-        "tsConfig": "libs/dropi-ui-elements/tsconfig.lib.json"
-      },
-      "configurations": {
-        "production": {
-          "tsConfig": "libs/dropi-ui-elements/tsconfig.lib.prod.json"
-        },
-        "development": {}
-      },
-      "defaultConfiguration": "production"
-    },
-    "nx-release-publish": {
-      "options": {
-        "packageRoot": "dist/{projectRoot}"
-      }
-    },
-    "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
-      "options": {
-        "jestConfig": "libs/dropi-ui-elements/jest.config.ts",
-        "tsConfig": "libs/dropi-ui-elements/tsconfig.spec.json"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint"
-    }
-  }
-}

package/publish-npm.sh DELETED Viewed

@@ -1,81 +0,0 @@
-#!/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/publish.sh DELETED Viewed

@@ -1,113 +0,0 @@
-#!/bin/bash
-# Script para publicar dropi-ui-components a GitHub y NPM
-# Ejecutar: bash publish.sh
-set -e  # Exit on error
-echo "🚀 Publicación de @dropi/ui-components"
-echo "========================================="
-echo ""
-# Colores
-GREEN='\033[0;32m'
-YELLOW='\033[1;33m'
-NC='\033[0m' # No Color
-# Verificar que estamos en el directorio correcto
-if [ ! -f "package.json" ]; then
-    echo "❌ Error: No se encuentra package.json"
-    echo "   Ejecuta este script desde ~/Desktop/dropi-ui-components"
-    exit 1
-fi
-echo "📍 Directorio: $(pwd)"
-echo ""
-# Paso 1: Verificar si ya hay un remote
-if git remote get-url origin &> /dev/null; then
-    echo "✅ Git remote ya configurado"
-    git remote -v
-else
-    echo "${YELLOW}⚠️  No hay remote configurado${NC}"
-    echo ""
-    echo "Por favor, crea el repositorio en GitHub primero:"
-    echo "  1. Ir a: https://github.com/new"
-    echo "  2. Nombre: ui-components"
-    echo "  3. Organización: dropi (o tu org)"
-    echo "  4. NO inicializar con README"
-    echo ""
-    read -p "URL del repositorio (ej: https://github.com/dropi/ui-components.git): " REPO_URL
-    if [ -z "$REPO_URL" ]; then
-        echo "❌ URL no proporcionada. Saliendo..."
-        exit 1
-    fi
-    git remote add origin "$REPO_URL"
-    echo "${GREEN}✅ Remote agregado${NC}"
-fi
-echo ""
-# Paso 2: Push a GitHub
-echo "📤 Haciendo push a GitHub..."
-git branch -M main
-git push -u origin main --tags
-echo "${GREEN}✅ Código publicado en GitHub${NC}"
-echo ""
-# Paso 3: Preguntar si publicar a NPM
-read -p "¿Deseas publicar a NPM ahora? (y/n): " PUBLISH_NPM
-if [ "$PUBLISH_NPM" = "y" ] || [ "$PUBLISH_NPM" = "Y" ]; then
-    echo ""
-    echo "📦 Publicando a NPM..."
-    # Verificar si hay un build
-    if [ ! -d "../dist" ]; then
-        echo "❌ No se encuentra el directorio dist/"
-        echo "   Ejecuta: npm run build:complete"
-        exit 1
-    fi
-    cd ../dist
-    # Verificar login de NPM
-    if ! npm whoami &> /dev/null; then
-        echo "${YELLOW}⚠️  No estás logueado en NPM${NC}"
-        npm login
-    fi
-    echo ""
-    echo "Usuario NPM: $(npm whoami)"
-    echo ""
-    read -p "¿Publicar como paquete público? (y/n): " PUBLIC_PKG
-    if [ "$PUBLIC_PKG" = "y" ] || [ "$PUBLIC_PKG" = "Y" ]; then
-        npm publish --access public
-    else
-        npm publish
-    fi
-    echo ""
-    echo "${GREEN}✅ Paquete publicado a NPM${NC}"
-    cd -
-else
-    echo ""
-    echo "⏭️  Publicación a NPM omitida"
-    echo "   Puedes hacerlo más tarde con:"
-    echo "   cd ~/Desktop/dist && npm publish --access public"
-fi
-echo ""
-echo "========================================="
-echo "${GREEN}🎉 Proceso completado!${NC}"
-echo ""
-echo "Comandos útiles:"
-echo "  Ver en GitHub: git remote get-url origin"
-echo "  Nueva versión: npm version patch (o minor/major)"
-echo "  Re-publicar: npm run build:complete && cd ../dist && npm publish"
-echo ""

package/tsconfig.json DELETED Viewed

@@ -1,28 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "isolatedModules": true,
-    "moduleResolution": "bundler",
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
-}

package/tsconfig.lib.json DELETED Viewed

@@ -1,18 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": [
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts",
-    "jest.config.ts",
-    "jest.config.cts",
-    "src/test-setup.ts"
-  ]
-}

package/tsconfig.lib.prod.json DELETED Viewed

@@ -1,9 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json DELETED Viewed

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "target": "es2016",
-    "types": ["jest", "node"],
-    "moduleResolution": "node10"
-  },
-  "files": ["src/test-setup.ts"],
-  "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"]
-}