npm - @dropi/ui-components - Versions diffs - 1.0.0 - Mend

@dropi/ui-components 1.0.0

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 (393) hide show

package/.gitignore ADDED Viewed

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

package/CONTRIBUTING.md ADDED Viewed

@@ -0,0 +1,188 @@
+# 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 ADDED Viewed

@@ -0,0 +1,39 @@
+# 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 ADDED Viewed

@@ -0,0 +1,97 @@
+# ✅ 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 ADDED Viewed

@@ -0,0 +1,108 @@
+# 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/README.md ADDED Viewed

@@ -0,0 +1,146 @@
+# @dropi/ui-components
+> Framework-agnostic Web Components library built with Angular Elements
+[![npm version](https://img.shields.io/npm/v/@dropi/ui-components.svg)](https://www.npmjs.com/package/@dropi/ui-components)
+[![License](https://img.shields.io/npm/l/@dropi/ui-components.svg)](./LICENSE)
+## 📦 Installation
+```bash
+npm install @dropi/ui-components
+# or
+yarn add @dropi/ui-components
+```
+## 🚀 Quick Start
+### HTML / Vanilla JS
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      href="node_modules/@dropi/ui-components/dropi-tokens.css"
+    />
+    <script
+      src="node_modules/@dropi/ui-components/index.js"
+      type="module"
+    ></script>
+  </head>
+  <body>
+    <dropi-button type="primary" text="Click Me"></dropi-button>
+    <dropi-alert state="success" message="Success!"></dropi-alert>
+  </body>
+</html>
+```
+### React
+```jsx
+import "@dropi/ui-components/dropi-tokens.css";
+import "@dropi/ui-components";
+function App() {
+  return (
+    <>
+      <dropi-button type="primary" text="React Button" />
+      <dropi-alert state="info" message="Works in React!" />
+    </>
+  );
+}
+```
+### Vue 3
+```vue
+<template>
+  <dropi-button type="primary" text="Vue Button" />
+  <dropi-alert state="success" message="Works in Vue!" />
+</template>
+<script setup>
+import "@dropi/ui-components/dropi-tokens.css";
+import "@dropi/ui-components";
+</script>
+```
+**vite.config.js:**
+```javascript
+export default {
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.startsWith("dropi-"),
+        },
+      },
+    }),
+  ],
+};
+```
+### Angular
+```typescript
+// main.ts or app.module.ts
+import '@dropi/ui-components/dropi-tokens.css';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+```
+## 📚 Components
+- `<dropi-button>` - Button with variants
+- `<dropi-alert>` - Alerts (success/info/warning/error)
+- `<dropi-tag>` - Tags with colors
+- `<dropi-input>` - Text input with validation
+- `<dropi-search>` - Search input
+- `<dropi-switch>` - Toggle switch
+- [See all 33 components →](https://ui.dropi.co)
+## ⚠️ Important
+Always import `dropi-tokens.css` **before** the JavaScript:
+```javascript
+// ✅ CORRECT
+import "@dropi/ui-components/dropi-tokens.css"; // First
+import "@dropi/ui-components"; // Second
+```
+## 📖 Documentation
+- [Full Documentation](https://ui.dropi.co)
+- [Storybook](https://ui.dropi.co)
+- [Migration Guide](./MIGRATION.md)
+## 🛠️ Development
+```bash
+# Install dependencies
+npm install
+# Build library
+npm run build:complete
+# Watch mode
+npm run watch
+```
+## 📄 License
+Proprietary - Dropi
+## 🤝 Contributing
+This is a private package for Dropi projects. For issues or questions, contact the UI team.
+# ui-components
+# ui-components
+# ui-components

package/jest.config.ts ADDED Viewed

@@ -0,0 +1,21 @@
+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 ADDED Viewed

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

package/package.json ADDED Viewed

@@ -0,0 +1,66 @@
+{
+  "name": "@dropi/ui-components",
+  "version": "1.0.0",
+  "description": "Dropi UI Components - Framework-agnostic Web Components library built with Angular Elements",
+  "keywords": [
+    "web-components",
+    "angular-elements",
+    "ui-library",
+    "dropi",
+    "framework-agnostic"
+  ],
+  "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"
+  },
+  "peerDependencies": {
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/elements": "^19.0.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",
+    "tslib": "^2.3.0",
+    "typescript": "~5.6.2",
+    "zone.js": "~0.15.0"
+  },
+  "dependencies": {
+    "@ngx-translate/core": "^15.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dropi/ui-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dropi/ui-components/issues"
+  },
+  "homepage": "https://ui.dropi.co"
+}