@reflow-js/templates 0.1.0

package/mfe-vue/src/components/Welcome.vue

@@ -0,0 +1,307 @@
+<template>
+  <div class="rf-card">
+    <div class="rf-glow"></div>
+    <div class="rf-card__top-bar"></div>
+    <div class="rf-card__inner">
+      <div class="rf-card__header">
+        <div class="rf-icon-wrap">
+          <svg viewBox="0 0 128 128" width="24" height="24">
+            <path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110H78.8z"/>
+            <path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z"/>
+          </svg>
+        </div>
+        <span class="rf-badge">Vue MFE</span>
+      </div>
+      
+      <h1 class="rf-card__title">{{ title }}</h1>
+      <p class="rf-card__desc">{{ description }}</p>
+      
+      <div class="rf-divider"></div>
+
+      <div class="rf-greeting">
+        <div class="rf-avatar">{{ name.charAt(0) }}</div>
+        <span class="rf-greeting__text">Hola, <strong class="rf-greeting__name">{{ name }}</strong></span>
+      </div>
+
+      <div class="rf-actions">
+        <button class="rf-btn rf-btn--primary" @click="onPrimary">
+          <svg class="rf-btn__ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
+          Acción del MFE
+        </button>
+        <button class="rf-btn rf-btn--ghost" @click="onSecondary">
+          <svg class="rf-btn__ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+          Shadow DOM
+        </button>
+      </div>
+
+      <div class="rf-chips">
+        <span class="rf-chip rf-chip--green">Vue 3.3+</span>
+        <span class="rf-chip rf-chip--muted">Reflow-js Core</span>
+        <span class="rf-chip rf-chip--outline">Encapsulated</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'Welcome',
+  props: {
+    title: { type: String, default: 'demo-vue Vue MFE' },
+    description: { type: String, default: 'Componente Vue encapsulado con Shadow DOM por Reflow-js.' },
+    name: { type: String, default: 'Developer' }
+  },
+  methods: {
+    onPrimary() {
+      console.log('[Reflow] Welcome primary action triggered');
+    },
+    onSecondary() {
+      alert(`¡Shadow DOM activo! Estilos de "${this.title}" están totalmente aislados.`);
+    }
+  }
+});
+</script>
+
+<style scoped>
+/* ── Color Palette (Vue Premium Green) ── */
+:host {
+  --rf-vue-primary: #42b883;
+  --rf-vue-secondary: #35495e;
+  --rf-bg-dark: #0f172a;
+  --rf-surface: rgba(30, 41, 59, 0.7);
+  --rf-text-main: #F8FAFC;
+  --rf-text-muted: #94A3B8;
+  --rf-border: rgba(66, 184, 131, 0.3);
+  --rf-glow: rgba(66, 184, 131, 0.25);
+  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 400px;
+}
+
+/* ── Card Container ── */
+.rf-card {
+  position: relative;
+  width: 100%;
+  max-width: 540px;
+  border-radius: 1.5rem;
+  background: var(--rf-surface);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid var(--rf-border);
+  box-shadow: 
+    0 20px 50px rgba(0, 0, 0, 0.3),
+    0 0 100px var(--rf-glow);
+  overflow: hidden;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: var(--rf-text-main);
+  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.rf-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 
+    0 30px 60px rgba(0, 0, 0, 0.6),
+    0 0 150px rgba(66, 184, 131, 0.35);
+  border-color: rgba(66, 184, 131, 0.5);
+}
+
+/* ── Ambient Effects ── */
+.rf-glow {
+  position: absolute;
+  top: -40%;
+  right: -40%;
+  width: 80%;
+  height: 80%;
+  background: radial-gradient(circle, var(--rf-vue-primary) 0%, transparent 60%);
+  opacity: 0.15;
+  filter: blur(60px);
+  z-index: 0;
+  pointer-events: none;
+}
+
+.rf-card__top-bar {
+  height: 4px;
+  background: linear-gradient(90deg, var(--rf-vue-primary), var(--rf-vue-secondary));
+  width: 100%;
+}
+
+/* ── Content ── */
+.rf-card__inner {
+  position: relative;
+  padding: 2.5rem;
+  z-index: 1;
+}
+
+.rf-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.rf-icon-wrap {
+  width: 52px;
+  height: 52px;
+  background: linear-gradient(135deg, rgba(66, 184, 131, 0.15), rgba(53, 73, 94, 0.15));
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.rf-badge {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--rf-vue-primary);
+  background: rgba(66, 184, 131, 0.1);
+  padding: 0.4rem 1rem;
+  border-radius: 100px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  border: 1px solid rgba(66, 184, 131, 0.2);
+}
+
+.rf-card__title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0 0 0.75rem 0;
+  color: #fff;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+
+.rf-card__desc {
+  font-size: 1.05rem;
+  color: var(--rf-text-muted);
+  margin: 0 0 2rem 0;
+  line-height: 1.6;
+}
+
+.rf-divider {
+  height: 1px;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
+  margin: 2rem 0;
+}
+
+/* ── Greeting ── */
+.rf-greeting {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.rf-avatar {
+  width: 42px;
+  height: 42px;
+  background: linear-gradient(135deg, var(--rf-vue-primary), #2C3E50);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 700;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  font-size: 1.1rem;
+}
+
+.rf-greeting__text {
+  font-size: 0.95rem;
+  color: var(--rf-text-muted);
+}
+
+.rf-greeting__name {
+  color: var(--rf-vue-primary);
+  font-weight: 600;
+}
+
+/* ── Buttons ── */
+.rf-actions {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.rf-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.9rem 1rem;
+  border-radius: 12px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  border: none;
+  font-family: inherit;
+}
+
+.rf-btn--primary {  
+  color: rgba(83, 36, 36, 0.86);
+  background: #50D495;
+  box-shadow: 0 4px 15px rgba(66, 184, 131, 0.3);
+}
+
+.rf-btn--primary:hover {
+  background: var(--rf-vue-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(66, 184, 131, 0.4);
+}
+
+.rf-btn--ghost {
+  background: rgba(15, 23, 42, 0.35);
+  color: #F8FAFC;
+  border: 1px solid rgba(248, 250, 252, 0.18);
+}
+
+.rf-btn--ghost:hover {
+  background: rgba(15, 23, 42, 0.55);
+  border-color: rgba(248, 250, 252, 0.3);
+}
+
+.rf-btn__ico {
+  width: 18px;
+  height: 18px;
+}
+
+/* ── Chips ── */
+.rf-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.rf-chip {
+  font-size: 0.75rem;
+  padding: 0.4rem 0.85rem;
+  border-radius: 8px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+
+.rf-chip--green {
+  background: rgba(66, 184, 131, 0.15);
+  color: #0f5132;
+  border: 1px solid rgba(66, 184, 131, 0.2);
+}
+
+.rf-chip--muted {
+  background: rgba(255, 255, 255, 0.04);
+  color: #94A3B8;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.rf-chip--outline {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: #CBD5E1;
+}
+</style>

package/mfe-vue/src/index.css

@@ -0,0 +1,5 @@
+/* Global styles for Vue MFE */
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}

package/mfe-vue/src/index.ts

@@ -0,0 +1,16 @@
+import { Reflow } from '@reflow-js/core';
+import * as Vue from 'vue';
+import Welcome from './components/Welcome.vue';
+
+// IMPORTANT: Registering Vue as a dependency for Reflow.
+// This allows the Reflow Core to mount Vue components within the Shadow DOM
+// by using the same instance of Vue that is available in the MFE.
+Reflow.setDependency('vue', Vue);
+
+/**
+ * Registering the Vue component as a Reflow Web Component.
+ * Shadow DOM will be handled automatically by Reflow.
+ */
+Reflow.define('welcome-card', Welcome);
+
+console.log('[Reflow-Vue] MFE Initialized');

package/mfe-vue/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@reflow-js/templates",
+  "version": "0.1.0",
+  "description": "Project scaffolding templates consumed by @reflow-js/cli",
+  "license": "MIT",
+  "files": [
+    "mfe",
+    "mfe-angular",
+    "mfe-react",
+    "mfe-react-tailwind",
+    "mfe-vue",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "reflow",
+    "templates",
+    "scaffold"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}