astro-tractstack 2.0.0-rc.7 → 2.0.0-rc.70

package/templates/custom/with-examples/ProductCard.astro

@@ -0,0 +1,29 @@
+---
+import type { ResourceNode } from '@/types/compositorTypes';
+
+export interface Props {
+  product?: ResourceNode;
+}
+
+const { product } = Astro.props;
+---
+
+<div class="rounded-lg border bg-white p-6 shadow-sm">
+  <h2 class="mb-4 text-xl font-bold text-gray-900">
+    Product Card (Parameter Dump)
+  </h2>
+
+  {
+    product ? (
+      <pre class="whitespace-pre-wrap rounded-md bg-gray-50 p-4 text-xs text-gray-700">
+        {JSON.stringify(product, null, 2)}
+      </pre>
+    ) : (
+      <div class="rounded-md bg-red-50 p-4 text-center">
+        <p class="font-bold text-red-800">
+          Error: ProductCard component received no product data.
+        </p>
+      </div>
+    )
+  }
+</div>

package/templates/custom/with-examples/ProductCardWrapper.astro

@@ -0,0 +1,43 @@
+---
+import type { ResourceNode } from '@/types/compositorTypes';
+import ProductCard from './ProductCard.astro';
+
+export interface Props {
+  options?: {
+    params?: {
+      options?: string;
+    };
+  };
+  resourcesPayload?: Record<string, ResourceNode[]>;
+}
+
+const { options, resourcesPayload } = Astro.props;
+
+let product: ResourceNode | undefined = undefined;
+let parsedOptions: { slug?: string } = {};
+
+if (options?.params?.options && typeof options.params.options === 'string') {
+  try {
+    parsedOptions = JSON.parse(options.params.options);
+  } catch (e) {
+    console.error('Failed to parse ProductCard options JSON:', e);
+  }
+}
+
+const targetSlug = parsedOptions?.slug;
+
+if (targetSlug && resourcesPayload) {
+  for (const key in resourcesPayload) {
+    const resourceArray = resourcesPayload[key] as ResourceNode[];
+    const found = resourceArray.find(
+      (resource) => resource.slug === targetSlug
+    );
+    if (found) {
+      product = found;
+      break;
+    }
+  }
+}
+---
+
+<ProductCard product={product} />

package/templates/custom/with-examples/ProductGrid.astro

@@ -0,0 +1,64 @@
+---
+import type { ResourceNode } from '@/types/compositorTypes';
+import ProductCard from './ProductCard.astro';
+
+export interface Props {
+  options?: {
+    params?: {
+      options?: string;
+    };
+  };
+  resourcesPayload?: Record<string, ResourceNode[]>;
+}
+
+const { options, resourcesPayload } = Astro.props;
+
+let productsToDisplay: ResourceNode[] = [];
+let allFetchedProducts: ResourceNode[] = [];
+let parsedOptions: { productType?: string; category?: string; slugs?: string } =
+  {};
+
+if (options?.params?.options && typeof options.params.options === 'string') {
+  try {
+    parsedOptions = JSON.parse(options.params.options);
+  } catch (e) {
+    console.error('Failed to parse ProductGrid options JSON:', e);
+  }
+}
+
+if (resourcesPayload) {
+  for (const key in resourcesPayload) {
+    allFetchedProducts = resourcesPayload[key] as ResourceNode[];
+    break;
+  }
+}
+
+if (parsedOptions?.productType) {
+  productsToDisplay = allFetchedProducts.filter(
+    (product) =>
+      product.optionsPayload?.productType === parsedOptions.productType
+  );
+} else {
+  productsToDisplay = allFetchedProducts;
+}
+---
+
+<div class="space-y-6">
+  {
+    productsToDisplay.length > 0 ? (
+      <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+        {productsToDisplay.map((product) => (
+          <ProductCard product={product} />
+        ))}
+      </div>
+    ) : (
+      <div class="rounded-lg border bg-yellow-50 p-6 text-center shadow-sm">
+        <p class="font-medium text-yellow-800">No products to display.</p>
+        <p class="mt-1 text-sm text-yellow-700">
+          Check the grid configuration or ensure products match the specified
+          filters.
+        </p>
+      </div>
+    )
+  }
+</div>

package/templates/custom/with-examples/pages/Collections.astro

@@ -1,110 +1,70 @@
 ---
-import Layout from '@/layouts/Layout.astro';
-//import type { MenuNode } from '@/types/tractstack';
+import CustomRoutes, { routes } from '@/custom/CustomRoutes.astro';
+import { preHealthCheck } from '@/utils/backend';
+//import type { ResourceNode } from '@/types/compositorTypes';
 
-export interface Props {
-  route: string;
-  slug: string;
-  variation?: string;
-  resources: any[];
+const tenantId =
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+
+const healthCheckRedirect = await preHealthCheck(tenantId);
+if (healthCheckRedirect !== undefined) {
+  return healthCheckRedirect;
 }
 
-const { route, slug, resources } = Astro.props;
+const { param1 } = Astro.params;
+// this needs to match the url path
+const route = `collections`;
 
-// uncomment if you add a menu id
-//
-//let menuPayload: MenuNode | null = null;
-//const hardcodedMenuId = '';
-//const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
-//try {
-//  const menuResponse = await fetch(`${goBackend}/api/v1/nodes/menus/${hardcodedMenuId}`);
-//  if (menuResponse.ok) {
-//    menuPayload = await menuResponse.json();
-//  }
-//} catch (error) {
-//  console.error('Error fetching menu:', error);
-//}
+// Check if route is enabled
+if (!param1 || !routes[route]) {
+  return new Response(null, {
+    status: 404,
+    statusText: 'Not Found',
+  });
+}
 
-const targetSlug = `${route}-${slug}`;
-const categoryResources = resources || [];
-const activeResource = categoryResources.find(
-  (resource: any) => resource.slug === targetSlug
-);
+// include all resource categories here
+const CATEGORIES = [`collections`];
 
-const pageTitle = `${route}=${slug}`;
----
+let resources = [];
+const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
 
-<Layout title={pageTitle}>
-  <div class="border-b bg-gray-100 p-4">
-    <h1 class="text-2xl font-bold">{pageTitle}</h1>
-    <p class="text-sm text-gray-600">
-      Collections page - slug: {slug}
-    </p>
-  </div>
+try {
+  const resourcesResponse = await fetch(`${goBackend}/api/v1/nodes/resources`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
+    body: JSON.stringify({ categories: CATEGORIES }),
+  });
 
-  <main id="main-content" class="min-h-screen w-full">
-    <div class="bg-white p-8">
-      {
-        slug ? (
-          <div class="mx-auto max-w-4xl">
-            <h2 class="mb-4 text-xl font-bold">
-              Collection: {route}={slug}
-            </h2>
+  if (resourcesResponse.ok) {
+    const responseData = await resourcesResponse.json();
+    if (responseData.resources) {
+      resources = responseData.resources;
+    }
+  }
+} catch (error) {
+  console.error('Error fetching resources:', error);
+  return new Response(null, {
+    status: 500,
+    statusText: 'Internal Server Error',
+  });
+}
 
-            {activeResource ? (
-              <div class="mb-6 rounded-lg bg-blue-50 p-6">
-                <h3 class="mb-2 text-lg font-bold text-blue-900">
-                  {activeResource.title}
-                </h3>
-                <p class="mb-2 text-blue-800">{activeResource.oneliner}</p>
-                <div class="text-sm text-blue-600">
-                  <p>ID: {activeResource.id}</p>
-                  <p>Slug: {activeResource.slug}</p>
-                  <p>Category: {activeResource.categorySlug || 'none'}</p>
-                </div>
-              </div>
-            ) : (
-              <div class="mb-6 rounded-lg bg-yellow-50 p-6">
-                <p class="text-yellow-800">
-                  No active resource found for slug: {targetSlug}
-                </p>
-              </div>
-            )}
+/*
+if (!resources.length) {
+  return new Response(null, {
+    status: 404,
+    statusText: 'Not Found',
+  });
+}
+*/
 
-            <div class="rounded-lg bg-gray-50 p-6">
-              <h3 class="mb-4 text-lg font-bold">
-                All Resources in Category ({categoryResources.length})
-              </h3>
-              {categoryResources.length > 0 ? (
-                <div class="grid gap-4 md:grid-cols-2">
-                  {categoryResources.map((resource: any) => (
-                    <div class="rounded border bg-white p-4">
-                      <h4 class="font-bold text-gray-900">{resource.title}</h4>
-                      <p class="mt-1 text-sm text-gray-600">
-                        {resource.oneliner}
-                      </p>
-                      <div class="mt-2 text-xs text-gray-500">
-                        <p>Slug: {resource.slug}</p>
-                        {resource.categorySlug && (
-                          <p>Category: {resource.categorySlug}</p>
-                        )}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <p class="text-gray-500">
-                  No resources found in this category.
-                </p>
-              )}
-            </div>
-          </div>
-        ) : null
-      }
-    </div>
-  </main>
+const pageTitle = `${route} collection`;
+---
 
-  <div class="border-t bg-gray-100 p-4">
-    <p class="text-sm text-gray-600">Collections footer</p>
-  </div>
-</Layout>
+<div class="border-b bg-gray-100 p-4">
+  <h1 class="text-2xl font-bold">{pageTitle}</h1>
+  <p class="text-sm text-gray-600">
+    Collections page - slug: {param1}
+  </p>
+</div>

package/templates/gitignore

@@ -0,0 +1,42 @@
+# Build output
+dist/
+*.tgz
+#*.d.ts
+
+# Dependencies
+node_modules/
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# Temporary folders
+tmp/
+temp/

package/templates/prettierignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.astro/
+templates/css/
+templates/fonts/

package/templates/prettierrc

@@ -0,0 +1,19 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": [
+    "prettier-plugin-astro",
+    "prettier-plugin-tailwindcss"
+  ],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

package/templates/src/client/app.js

@@ -0,0 +1,127 @@
+/**
+ * TractStack Singleton Application Manager
+ *
+ * This script is loaded with `is:persist` and runs only once per session.
+ * Its purpose is to manage long-lived application state and services,
+ * primarily the Server-Sent Events (SSE) connection. It provides a stable
+ * API on `window.TractStackApp` for transient view scripts to interact with.
+ * It is completely decoupled from the DOM and HTMX.
+ */
+
+const VERBOSE = false;
+
+function log(message, ...args) {
+  if (VERBOSE) console.log('✅ SINGLETON [app.js]:', message, ...args);
+}
+
+function logError(message, ...args) {
+  if (VERBOSE) console.error('❌ SINGLETON [app.js]:', message, ...args);
+}
+
+if (!window.TractStackApp) {
+  log('INITIALIZING SINGLETON for the first time.');
+
+  const TractStackApp = {
+    config: {},
+    eventSource: null,
+
+    initialize(config) {
+      log('Initializing with config from first page load.', config);
+      this.config = config;
+      if (config.sessionId && !this.eventSource) {
+        this.startSSE();
+      } else {
+        log(
+          'SSE connection not started: missing sessionId or already connected.'
+        );
+      }
+    },
+
+    updateConfig(newConfig) {
+      const oldStoryfragmentId = this.config.storyfragmentId;
+      this.config = { ...this.config, ...newConfig };
+      log('Configuration updated due to page navigation.', {
+        newConfig,
+        storyfragmentIdChanged:
+          oldStoryfragmentId !== newConfig.storyfragmentId,
+      });
+
+      if (this.config.sessionId && !this.eventSource) {
+        log(
+          'Session ID became available after navigation. Starting SSE connection.'
+        );
+        this.startSSE();
+      }
+    },
+
+    getConfig() {
+      return this.config;
+    },
+
+    startSSE() {
+      if (this.eventSource) {
+        log('Closing existing SSE connection before starting a new one.');
+        this.eventSource.close();
+      }
+
+      const { backendUrl, sessionId, storyfragmentId, tenantId } = this.config;
+      if (!sessionId || !tenantId) {
+        logError('Cannot start SSE connection: missing sessionId or tenantId.');
+        return;
+      }
+
+      const sseUrl = `${backendUrl}/api/v1/auth/sse?sessionId=${sessionId}&storyfragmentId=${storyfragmentId}&tenantId=${tenantId}`;
+      log('Attempting to establish SSE connection...', { url: sseUrl });
+
+      this.eventSource = new EventSource(sseUrl);
+
+      this.eventSource.onopen = () => {
+        log('SSE Connection opened successfully.');
+      };
+
+      this.eventSource.onerror = (error) => {
+        logError('SSE Connection error occurred.', error);
+        this.eventSource.close();
+        this.eventSource = null;
+      };
+
+      this.eventSource.addEventListener('panes_updated', (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          log('Received `panes_updated` event from server.', data);
+
+          log(
+            'Dispatching `tractstack:panes-updated` CustomEvent to the window.'
+          );
+          window.dispatchEvent(
+            new CustomEvent('tractstack:panes-updated', { detail: data })
+          );
+        } catch (error) {
+          logError('Failed to parse `panes_updated` event data.', {
+            error,
+            rawData: event.data,
+          });
+        }
+      });
+    },
+  };
+
+  window.TractStackApp = TractStackApp;
+
+  if (window.TRACTSTACK_CONFIG) {
+    window.TractStackApp.initialize(window.TRACTSTACK_CONFIG);
+  } else {
+    logError('Initial config not found at singleton creation time.');
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    log('`astro:page-load` detected. Updating internal config.');
+    if (window.TRACTSTACK_CONFIG) {
+      window.TractStackApp.updateConfig(window.TRACTSTACK_CONFIG);
+    } else {
+      logError(
+        '`astro:page-load` fired, but `window.TRACTSTACK_CONFIG` was not found!'
+      );
+    }
+  });
+}