@gxp-dev/tools 2.0.5

package/template/src/stores/test-data.json

@@ -0,0 +1,173 @@
+{
+  "pluginVars": {
+    "primary_color": "#FFD600",
+    "projectId": 39,
+    "apiPageAuthId": "46|j7vCLmx2KG70Ig8R5mtUcNMFcHExvFPZEOv31kKGe1033f2b",
+    "apiBaseUrl": "https://api.efcloud.app",
+    "idle_timeout": "30",
+    "background_color": "#ffffff",
+    "text_color": "#333333",
+    "start_background_color": "#000596",
+    "start_text_color": "#FFFFFF",
+    "final_background_color": "#4CAF50",
+    "final_text_color": "#ffffff",
+    "loading_spinner_color": "#dedede",
+    "loading_spinner_accent_color": "#000596",
+    "error_modal_background_color": "#FFFFFF",
+    "error_modal_text_color": "#000596",
+    "line_1": "Welcome to Your App!",
+    "line_2": "Touch to begin your experience",
+    "line_3": "Get started by touching the button below"
+  },
+  "stringsList": {
+    "line_1": "Welcome to Your App!",
+    "line_2": "Touch to begin your experience",
+    "line_3": "Get started by touching the button below",
+    "start_line_one": "Welcome to Your App!",
+    "start_line_two": "Touch to begin your experience",
+    "start_touch_start": "Get started by touching the button below",
+    "final_line_one": "Thank You!",
+    "final_line_two": "Your experience has been completed successfully",
+    "final_line_three": "Touch anywhere to start over",
+    "welcome_text": "Hello World",
+    "loading_text": "Loading...",
+    "error_title": "Oops!",
+    "error_message": "Something went wrong. Please try again.",
+    "continue_button": "Continue",
+    "back_button": "Back",
+    "retry_button": "Try Again"
+  },
+  "assetList": {
+    "main_logo": "/dev-assets/images/logo-placeholder.png",
+    "background_image": "/dev-assets/images/background-placeholder.jpg",
+    "product_image": "/dev-assets/images/product-placeholder.jpg",
+    "avatar_placeholder": "/dev-assets/images/avatar-placeholder.png",
+    "icon_placeholder": "/dev-assets/images/icon-placeholder.png",
+    "thumbnail": "/dev-assets/images/thumbnail-placeholder.jpg",
+    "banner_image": "/dev-assets/images/banner-placeholder.jpg"
+  },
+  "dependencyList": [
+    {
+      "model": "AiInterface",
+      "events": {
+        "created": "AiSessionMessageCreated",
+        "updated": "AiSessionMessageUpdated"
+      },
+      "identifier": "ai_interface_background_remover",
+      "permissions": [
+        "manage_ai_interfaces",
+        "view_ai_interfaces",
+        "view_ai_sessions",
+        "view_ai_session_messages"
+      ]
+    },
+    {
+      "model": "AiInterface",
+      "events": {
+        "created": "AiSessionMessageCreated",
+        "updated": "AiSessionMessageUpdated"
+      },
+      "identifier": "ai_interface_background_generator",
+      "permissions": [
+        "manage_ai_interfaces",
+        "view_ai_interfaces",
+        "view_ai_sessions",
+        "view_ai_session_messages"
+      ]
+    },
+    {
+      "model": "AiInterface",
+      "events": {
+        "created": "AiSessionMessageCreated",
+        "updated": "AiSessionMessageUpdated"
+      },
+      "identifier": "ai_interface",
+      "permissions": [
+        "manage_ai_interfaces",
+        "view_ai_interfaces",
+        "view_ai_sessions",
+        "view_ai_session_messages"
+      ]
+    },
+    {
+      "model": "SocialStream",
+      "events": {
+        "created": "SocialStreamPostCreated",
+        "deleted": "SocialStreamPostDeleted",
+        "updated": "SocialStreamPostUpdated",
+        "variantCompleted": "SocialStreamPostVariantCompleted"
+      },
+      "identifier": "social_stream",
+      "permissions": [
+        "view_social_streams",
+        "view_social_stream_posts",
+        "create_social_stream_posts",
+        "manage_social_stream_posts"
+      ]
+    },
+    {
+      "model": "SocialStreamPost",
+      "identifier": "social_stream_posts",
+      "permissions": [
+        "view_social_stream_posts:viewAny"
+      ]
+    },
+    {
+      "key": "slug",
+      "model": "Group",
+      "events": [],
+      "identifier": "groups",
+      "permissions": [
+        "view_groups",
+        "view_attendees"
+      ]
+    },
+    {
+      "model": "Attendee",
+      "identifier": "attendees",
+      "permissions": [
+        "create_attendees:viewAny",
+        "view_attendees:viewAny"
+      ]
+    }
+  ],
+  "permissionFlags": [
+    "can_access_camera",
+    "can_save_data",
+    "can_share_content"
+  ],
+  "auth": {
+    "token": "test-token-12345",
+    "user_id": "test-user-67890",
+    "expires_at": "2024-12-31T23:59:59Z"
+  },
+  "userSession": {
+    "session_id": "session-abc123",
+    "started_at": "2024-01-01T00:00:00Z",
+    "ip_address": "127.0.0.1",
+    "user_agent": "Test Browser"
+  },
+  "pluginData": {
+    "plugin_id": "test-plugin-123",
+    "version": "1.0.0",
+    "environment": "development"
+  },
+  "portalAssets": {
+    "favicon": "/portal/favicon.ico",
+    "logo": "/portal/logo.png",
+    "theme_css": "/portal/theme.css"
+  },
+  "portal": {
+    "name": "Test Portal",
+    "theme_colors": {
+      "primary": "#FFD600",
+      "secondary": "#000596",
+      "accent": "#4CAF50"
+    },
+    "custom_settings": {
+      "allow_guest_access": true,
+      "session_timeout": 1800,
+      "max_file_size": "10MB"
+    }
+  }
+} 

package/template/theme-layouts/PrivateLayout.vue

@@ -0,0 +1,39 @@
+<template>
+	<slot />
+</template>
+
+<style scoped>
+
+</style>
+
+<script setup>
+import { ref } from "vue";
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = defineProps({
+    usrLang: {
+        type: String,
+        required: true,
+    },
+	portalSettings: {
+		type: Object,
+		required: true,
+	},
+	portalLanguage: {
+		type: Object,
+		required: true,
+	},
+	portalNavigation: {
+		type: Array,
+		required: true,
+	},
+	portalAssets: {
+		type: Object,
+		required: true,
+	},
+});
+
+</script>
+

package/template/theme-layouts/PublicLayout.vue

@@ -0,0 +1,39 @@
+<template>
+	<slot />
+</template>
+
+<style scoped>
+
+</style>
+
+<script setup>
+import { ref } from "vue";
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = defineProps({
+    usrLang: {
+        type: String,
+        required: true,
+    },
+	portalSettings: {
+		type: Object,
+		required: true,
+	},
+	portalLanguage: {
+		type: Object,
+		required: true,
+	},
+	portalNavigation: {
+		type: Array,
+		required: true,
+	},
+	portalAssets: {
+		type: Object,
+		required: true,
+	},
+});
+
+</script>
+

package/template/theme-layouts/SystemLayout.vue

@@ -0,0 +1,39 @@
+<template>
+	<slot />
+</template>
+
+<style scoped>
+
+</style>
+
+<script setup>
+import { ref } from "vue";
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = defineProps({
+    usrLang: {
+        type: String,
+        required: true,
+    },
+	portalSettings: {
+		type: Object,
+		required: true,
+	},
+	portalLanguage: {
+		type: Object,
+		required: true,
+	},
+	portalNavigation: {
+		type: Array,
+		required: true,
+	},
+	portalAssets: {
+		type: Object,
+		required: true,
+	},
+});
+
+</script>
+

package/template/vite.config.js

@@ -0,0 +1,333 @@
+import { defineConfig, loadEnv } from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+import fs from "fs";
+import externalGlobals from "rollup-plugin-external-globals";
+
+// Environment URL configuration for API proxy
+const ENVIRONMENT_URLS = {
+	production: "https://api.gramercy.cloud",
+	staging: "https://api.efz-staging.env.eventfinity.app",
+	testing: "https://api.zenith-develop-testing.env.eventfinity.app",
+	develop: "https://api.zenith-develop.env.eventfinity.app",
+	local: "https://dashboard.eventfinity.test",
+};
+
+/**
+ * Get the API proxy target URL based on environment
+ */
+function getApiProxyTarget(env) {
+	const apiEnv = env.API_ENV || "mock";
+
+	// Custom URL takes precedence
+	if (env.API_BASE_URL) {
+		return env.API_BASE_URL;
+	}
+
+	// Mock uses local mock-api server (no proxy needed, handled separately)
+	if (apiEnv === "mock") {
+		return null;
+	}
+
+	// Look up environment URL
+	return ENVIRONMENT_URLS[apiEnv] || ENVIRONMENT_URLS.production;
+}
+
+/**
+ * Get the library name from package.json
+ */
+function getLibName() {
+	try {
+		const packageJsonPath = path.resolve(process.cwd(), "package.json");
+		if (fs.existsSync(packageJsonPath)) {
+			const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+			// Convert package name to a valid JS identifier
+			// e.g., "@company/my-plugin" -> "MyPlugin"
+			const name = packageJson.name || "Plugin";
+			return name
+				.replace(/[@\/\-]/g, " ")
+				.replace(/\b\w/g, (l) => l.toUpperCase())
+				.replace(/\s/g, "");
+		}
+	} catch (error) {
+		console.warn("Could not read package.json, using default lib name");
+	}
+	return "Plugin";
+}
+
+/**
+ * Setup HTTPS configuration if certificates are available
+ */
+function getHttpsConfig(env) {
+	const useHttps = env.USE_HTTPS === "true";
+	const certPath = env.CERT_PATH;
+	const keyPath = env.KEY_PATH;
+
+	if (!useHttps || !certPath || !keyPath) {
+		return false;
+	}
+
+	// Resolve paths relative to project root
+	const resolvedCertPath = path.resolve(process.cwd(), certPath);
+	const resolvedKeyPath = path.resolve(process.cwd(), keyPath);
+
+	// Check if certificate files exist
+	if (!fs.existsSync(resolvedCertPath) || !fs.existsSync(resolvedKeyPath)) {
+		console.warn("⚠ SSL certificate files not found, falling back to HTTP");
+		return false;
+	}
+
+	try {
+		return {
+			key: fs.readFileSync(resolvedKeyPath),
+			cert: fs.readFileSync(resolvedCertPath),
+		};
+	} catch (error) {
+		console.warn("⚠ Failed to read SSL certificates, falling back to HTTP");
+		return false;
+	}
+}
+
+/**
+ * Find the gx-devtools package directory (works for both local and global installs)
+ */
+function findToolkitPath() {
+	const packageName = "@gramercytech/gx-devtools";
+
+	// Try local node_modules first
+	const localPath = path.resolve(process.cwd(), "node_modules", packageName);
+	if (fs.existsSync(localPath)) {
+		return localPath;
+	}
+
+	// Try to find via require.resolve
+	try {
+		const pkgPath = require.resolve(`${packageName}/package.json`);
+		return path.dirname(pkgPath);
+	} catch (e) {
+		// Fallback: assume we're in the toolkit itself during development
+		return process.cwd();
+	}
+}
+
+// Dynamically import the inspector plugin from the toolkit
+let gxpInspectorPlugin;
+let gxpSourceTrackerPlugin;
+try {
+	const toolkitPathForPlugin = findToolkitPath();
+	const pluginPath = path.join(
+		toolkitPathForPlugin,
+		"runtime/vite-inspector-plugin.js"
+	);
+	if (fs.existsSync(pluginPath)) {
+		const pluginModule = await import(pluginPath);
+		gxpInspectorPlugin = pluginModule.gxpInspectorPlugin;
+	}
+	// Load source tracker plugin for injecting data-gxp-source attributes
+	const trackerPath = path.join(
+		toolkitPathForPlugin,
+		"runtime/vite-source-tracker-plugin.js"
+	);
+	if (fs.existsSync(trackerPath)) {
+		const trackerModule = await import(trackerPath);
+		gxpSourceTrackerPlugin = trackerModule.gxpSourceTrackerPlugin;
+	}
+} catch (e) {
+	console.warn("Could not load GxP Inspector plugin:", e.message);
+}
+
+export default defineConfig(({ mode }) => {
+	// Load environment variables
+	const env = loadEnv(mode, process.cwd(), "");
+
+	// Get lib name from package.json
+	const libName = getLibName();
+
+	// Find the toolkit path for runtime imports
+	const toolkitPath = findToolkitPath();
+
+	// Determine if HTTPS is enabled
+	const useHttps = getHttpsConfig(env) !== false;
+
+	// Get API proxy target for non-mock environments
+	const apiProxyTarget = getApiProxyTarget(env);
+	if (apiProxyTarget) {
+		console.log(`🔀 API Proxy: /api-proxy -> ${apiProxyTarget}`);
+	}
+
+	return {
+		// Expose environment variables to the browser
+		define: {
+			"import.meta.env.VITE_API_ENV": JSON.stringify(env.API_ENV || "mock"),
+			"import.meta.env.VITE_API_BASE_URL": JSON.stringify(
+				env.API_BASE_URL || ""
+			),
+			"import.meta.env.VITE_API_KEY": JSON.stringify(env.API_KEY || ""),
+			"import.meta.env.VITE_API_PROJECT_ID": JSON.stringify(
+				env.API_PROJECT_ID || ""
+			),
+			"import.meta.env.VITE_USE_HTTPS": JSON.stringify(
+				useHttps ? "true" : "false"
+			),
+			"import.meta.env.VITE_NODE_PORT": JSON.stringify(env.NODE_PORT || "3060"),
+			"import.meta.env.VITE_SOCKET_IO_PORT": JSON.stringify(
+				env.SOCKET_IO_PORT || "3069"
+			),
+		},
+		plugins: [
+			// Source tracker must come before vue() to transform templates before compilation
+			...(gxpSourceTrackerPlugin ? [gxpSourceTrackerPlugin()] : []),
+			vue(),
+			// GxP Inspector plugin for browser extension integration (if available)
+			...(gxpInspectorPlugin ? [gxpInspectorPlugin()] : []),
+			externalGlobals(
+				{
+					vue: "Vue",
+					pinia: "Pinia",
+					"@/stores/gxpPortalConfigStore":
+						"(window.useGxpStore || (() => { console.warn('useGxpStore not found on window, using fallback'); return {}; }))",
+				},
+				{
+					include: ["src/**"],
+				}
+			),
+			// Custom request logging and CORS plugin
+			{
+				name: "request-logger-cors",
+				configureServer(server) {
+					server.middlewares.use((req, res, next) => {
+						const start = Date.now();
+						const originalEnd = res.end;
+
+						// Add CORS headers to all responses
+						res.setHeader("Access-Control-Allow-Origin", "*");
+						res.setHeader(
+							"Access-Control-Allow-Methods",
+							"GET, POST, PUT, DELETE, OPTIONS"
+						);
+						res.setHeader("Access-Control-Allow-Headers", "*");
+						res.setHeader("Access-Control-Allow-Credentials", "false");
+
+						// Handle preflight requests
+						if (req.method === "OPTIONS") {
+							res.statusCode = 200;
+							res.end();
+							return;
+						}
+
+						res.end = function (...args) {
+							const duration = Date.now() - start;
+							const status = res.statusCode;
+							const method = req.method;
+							const url = req.url;
+							const referer = req.headers.referer || "direct";
+							const origin = req.headers.origin || "unknown";
+
+							console.log(
+								`[${new Date().toISOString()}] ${method} ${url} ${status} (${duration}ms) - Origin: ${origin} - Referer: ${referer}`
+							);
+							originalEnd.apply(this, args);
+						};
+
+						next();
+					});
+				},
+			},
+		],
+		logLevel: env.NODE_LOG_LEVEL || "error",
+		clearScreen: false,
+		server: {
+			port: parseInt(env.NODE_PORT) || 3060,
+			strictPort: true,
+			https: getHttpsConfig(env),
+			cors: {
+				origin: "*",
+				methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
+				allowedHeaders: ["*"],
+				credentials: false,
+			},
+			hmr: {
+				clientPort:
+					parseInt(env.CLIENT_PORT) || parseInt(env.NODE_PORT) || 3060,
+			},
+			host: true, // Allow access from network
+			// API proxy for non-mock environments
+			proxy: apiProxyTarget
+				? {
+						"/api-proxy": {
+							target: apiProxyTarget,
+							changeOrigin: true,
+							rewrite: (path) => path.replace(/^\/api-proxy/, ""),
+							secure: false,
+							configure: (proxy, options) => {
+								proxy.on("proxyReq", (proxyReq, req) => {
+									// Forward the API key as Authorization header if set
+									const apiKey = env.API_KEY;
+									if (apiKey) {
+										proxyReq.setHeader("Authorization", `Bearer ${apiKey}`);
+									}
+									console.log(
+										`[API Proxy] ${req.method} ${
+											req.url
+										} -> ${apiProxyTarget}${req.url.replace(
+											/^\/api-proxy/,
+											""
+										)}`
+									);
+								});
+								proxy.on("proxyRes", (proxyRes, req) => {
+									console.log(
+										`[API Proxy] ${req.method} ${req.url} <- ${proxyRes.statusCode}`
+									);
+								});
+								proxy.on("error", (err, req) => {
+									console.error(`[API Proxy] Error: ${err.message}`);
+								});
+							},
+						},
+				  }
+				: {},
+		},
+		build: {
+			lib: {
+				entry: [env.COMPONENT_PATH || "./src/Plugin.vue"],
+				name: libName,
+				fileName: (format) => `plugin.${format}.js`,
+				formats: ["es"],
+			},
+			rollupOptions: {
+				// Make sure Vue and Pinia are treated as external dependencies
+				external: ["vue", "pinia"],
+				output: {
+					globals: {
+						vue: "Vue",
+						pinia: "Pinia",
+					},
+				},
+			},
+		},
+		resolve: {
+			alias: {
+				// Client project's source directory
+				"@": path.resolve(process.cwd(), "src"),
+				// Theme layouts in client project
+				"@layouts": path.resolve(process.cwd(), "theme-layouts"),
+				// GxP Toolkit runtime (PortalContainer, etc.) - from node_modules
+				"@gx-runtime": path.resolve(toolkitPath, "runtime"),
+				// Ensure single Vue and Pinia instances
+				vue: path.resolve(process.cwd(), "node_modules/vue"),
+				pinia: path.resolve(process.cwd(), "node_modules/pinia"),
+			},
+			// Dedupe Vue and Pinia to ensure only one instance is used
+			dedupe: ["vue", "pinia"],
+		},
+		// Force Vite to pre-bundle these dependencies to ensure single instances
+		optimizeDeps: {
+			include: ["vue", "pinia"],
+		},
+		// SSR configuration to handle externals properly
+		ssr: {
+			external: ["vue", "pinia"],
+		},
+	};
+});

package/tsconfig.tui.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "bundler",
+    "lib": ["ES2020"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "./dist/tui",
+    "rootDir": "./bin/lib/tui",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "resolveJsonModule": true
+  },
+  "include": ["bin/lib/tui/**/*.ts", "bin/lib/tui/**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}