@reflow-js/templates 0.1.0

package/mfe-react-tailwind/src/components/welcome/welcome.style.css

@@ -0,0 +1,224 @@
+/* welcome.style.css
+ * Estilos nativos del componente — encapsulados por Shadow DOM
+ * cuando se usa Reflow.define() con { shadow: true }
+ */
+
+/* ── Brand tokens (React Blue) ── */
+:host {
+  --rf-blue:    #0EA5E9;
+  --rf-dark:    #222A2D;
+  --rf-light:   #E6E7E8;
+  --rf-surface: #2A3438;
+  --rf-border:  rgba(14, 165, 233, 0.18);
+  --rf-muted:   rgba(230, 231, 232, 0.45);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+/* ── Card shell ── */
+.rf-card {
+  position: relative;
+  width: 100%;
+  max-width: 440px;
+  border-radius: 1.25rem;
+  background: var(--rf-surface);
+  border: 1px solid var(--rf-border);
+  box-shadow:
+    0 0 0 1px rgba(14,165,233,0.06),
+    0 24px 64px rgba(0,0,0,0.55),
+    0 4px 16px rgba(0,0,0,0.35);
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.rf-card:hover {
+  transform: translateY(-3px);
+  box-shadow:
+    0 0 0 1px rgba(14,165,233,0.14),
+    0 32px 80px rgba(0,0,0,0.6),
+    0 8px 24px rgba(14,165,233,0.12);
+}
+
+/* ambient blue glow */
+.rf-glow {
+  position: absolute;
+  top: -60px; left: 50%;
+  transform: translateX(-50%);
+  width: 260px; height: 120px;
+  background: radial-gradient(ellipse, rgba(14,165,233,0.18) 0%, transparent 70%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* top accent line */
+.rf-card__top-bar {
+  height: 3px;
+  background: linear-gradient(90deg, transparent 0%, var(--rf-blue) 40%, #06B6D4 60%, transparent 100%);
+  position: relative;
+  z-index: 1;
+}
+
+.rf-card__inner {
+  position: relative;
+  z-index: 1;
+  padding: 2rem 2rem 1.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* ── Header row ── */
+.rf-card__header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.rf-icon-wrap {
+  width: 42px; height: 42px;
+  border-radius: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 1.75rem;
+}
+
+.rf-badge {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--rf-blue);
+  background: rgba(14,165,233,0.10);
+  border: 1px solid rgba(14,165,233,0.20);
+  padding: 0.22rem 0.7rem;
+  border-radius: 999px;
+}
+
+/* ── Typography ── */
+.rf-card__title {
+  margin: 0 0 0.6rem;
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--rf-light);
+  letter-spacing: -0.03em;
+  line-height: 1.2;
+}
+
+.rf-card__desc {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--rf-muted);
+  line-height: 1.7;
+}
+
+/* ── Divider ── */
+.rf-divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(230,231,232,0.10), transparent);
+  margin: 1.5rem 0;
+}
+
+/* ── Greeting ── */
+.rf-greeting {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1.75rem;
+}
+
+.rf-avatar {
+  width: 36px; height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--rf-blue), #06B6D4);
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(14,165,233,0.40);
+}
+
+.rf-greeting__text  { font-size: 0.9rem; color: var(--rf-muted); }
+.rf-greeting__name  { color: var(--rf-light); font-weight: 700; }
+
+/* ── Buttons ── */
+.rf-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 1.75rem;
+  flex-wrap: wrap;
+}
+
+.rf-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.6rem 1.25rem;
+  border-radius: 0.65rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
+  letter-spacing: 0.01em;
+}
+
+.rf-btn__ico { width: 14px; height: 14px; flex-shrink: 0; }
+
+.rf-btn--primary {
+  background: var(--rf-blue);
+  color: #fff;
+  box-shadow: 0 4px 16px rgba(14,165,233,0.40);
+}
+
+.rf-btn--primary:hover {
+  background: #0284C7;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(14,165,233,0.50);
+}
+
+.rf-btn--primary:active { transform: translateY(0); }
+
+.rf-btn--ghost {
+  background: rgba(230,231,232,0.06);
+  color: var(--rf-light);
+  border: 1px solid rgba(230,231,232,0.14);
+}
+
+.rf-btn--ghost:hover {
+  background: rgba(230,231,232,0.10);
+  border-color: rgba(230,231,232,0.24);
+  transform: translateY(-2px);
+}
+
+.rf-btn--ghost:active { transform: translateY(0); }
+
+/* ── Chips ── */
+.rf-chips {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.rf-chip {
+  display: inline-block;
+  padding: 0.18rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.rf-chip--blue   { background: rgba(14,165,233,0.12); color: var(--rf-blue); border: 1px solid rgba(14,165,233,0.25); }
+.rf-chip--muted  { background: rgba(230,231,232,0.07); color: var(--rf-muted); border: 1px solid rgba(230,231,232,0.12); }
+.rf-chip--outline { background: transparent; color: rgba(230,231,232,0.35); border: 1px solid rgba(230,231,232,0.12); }

package/mfe-react-tailwind/src/index.css

@@ -0,0 +1,29 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ── React brand: #222A2D / #0EA5E9 / #E6E7E8 ── */
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem;
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
+  color: #E6E7E8;
+  /* Dark background with blue ambient glow */
+  background-color: #222A2D;
+  background-image:
+    radial-gradient(ellipse 600px 400px at 15% 60%, rgba(14,165,233,0.08) 0%, transparent 70%),
+    radial-gradient(ellipse 500px 300px at 85% 25%, rgba(6,182,212,0.06) 0%, transparent 65%),
+    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(34,42,45,0.8) 0%, transparent 80%);
+  background-attachment: fixed;
+}

package/mfe-react-tailwind/src/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import * as ReactDOM from 'react-dom/client';
+// @ts-ignore
+import { Reflow } from '@reflow-js/core';
+// @ts-ignore
+import { Welcome } from './components/welcome/welcome.component';
+import './index.css';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {      
+      'welcome-card': any; // Usamos el tag definido en el registry del MFE
+    }
+  }
+}
+
+// Inicializa Reflow inyectando las dependencias de React
+// Esto evita múltiples instancias de React entre host y MFEs
+Reflow.init({
+  propertiesFile: 'application.json',
+  react: React,
+  reactDom: ReactDOM,
+}).then(() => {
+  console.log('[Reflow] ✅ Inicializado correctamente');
+
+  /**
+   * Reflow.define() convierte un componente React en un Custom Element.
+   *
+   * Firma: Reflow.define(tagName, Component, defaultProps, options)
+   *
+   * options.shadow: true → Shadow DOM activo → estilos encapsulados
+   * Las props se pueden pasar como atributos HTML: <welcome-card title="Hola">
+   */
+  Reflow.define('welcome-card', Welcome, { name: 'User' }, { shadow: true });
+
+  console.log('[Reflow] 🧩 welcome-card registrado como Web Component');
+}).catch((e: any) => {
+  console.error('[Reflow] ❌ Error en inicialización', e);
+});

package/mfe-react-tailwind/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./public/index.html",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/mfe-react-tailwind/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/mfe-vue/README.md

@@ -0,0 +1,14 @@
+# Plantilla Vue MFE + Reflow-js
+
+Esta plantilla muestra cómo consumir un Web Component generado por Reflow-js en una aplicación Vue.
+
+## Uso básico
+
+1. Asegúrate de que el bundle de tu microfrontend (MFE) de Reflow-js esté disponible y cargado en tu `index.html` (por ejemplo, vía `<script src="/dist/mi-mfe/registry/registry.js"></script>`).
+2. Usa el Web Component directamente en tus templates Vue:
+
+```html
+<welcome-card title="¡Hola desde Vue!" description="Este componente es un Web Component generado por Reflow-js." />
+```
+
+No necesitas wrappers ni librerías adicionales. Los eventos y propiedades funcionan como atributos estándar de HTML.

package/mfe-vue/public/application.json

@@ -0,0 +1,7 @@
+{
+  "reflow": {
+    "vue": {
+      "mfe": true
+    }
+  }
+}

package/mfe-vue/public/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vue MFE + Reflow-js</title>
+  <!-- Ejemplo: cargar el script con src apuntando al registry.js generado -->
+</head>
+<body>
+  <!--
+    Reflow registra 'welcome-card' en src/index.ts:
+      Reflow.define('welcome-card', Welcome, defaultProps, { shadow: true, framework: 'vue' })
+    Las props se pasan como atributos HTML.
+  -->
+  <welcome-card
+    title="{{name}} corriendo"
+    description="Componente Vue encapsulado con Shadow DOM por Reflow-js."
+    name="Developer">
+  </welcome-card>
+</body>
+</html>

package/mfe-vue/reflow.config.json

@@ -0,0 +1,23 @@
+{
+  "name": "{{name}}",
+  "version": "1.0.0",
+  "buildEngine": "webpack",
+  "bundler": {
+    "input": "src/index.ts",
+    "output": "dist",
+    "format": "umd",
+    "minify": false,
+    "sourcemap": true
+  },
+  "components": {
+    "srcDir": "src/components",
+    "outDir": "dist/components",
+    "prefix": "mfe",
+    "registry": "dist/registry/registry.js"
+  },
+  "dev": {
+    "port": 3003,
+    "hotReload": true,
+    "open": true
+  }
+}

package/mfe-vue/src/App.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Vue MFE + Reflow-js</h1>
+    <welcome-card title="¡Hola desde Vue!" description="Este componente es un Web Component generado por Reflow-js." />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  mounted() {
+    // Asegúrate de que el bundle de tu MFE esté cargado antes de usar el componente
+    // Ejemplo: usando tag script con src="/dist/mi-mfe/registry/registry.js"
+  }
+}
+</script>