website refactor

apps/website/eslint-rules/index.js

@@ -45,6 +45,7 @@ const cleanErrorHandling = require('./clean-error-handling');
 const servicesImplementContract = require('./services-implement-contract');
 const serverActionsReturnResult = require('./server-actions-return-result');
 const serverActionsInterface = require('./server-actions-interface');
+const noDisplayObjectsInUi = require('./no-display-objects-in-ui');
 
 module.exports = {
   rules: {
@@ -78,6 +79,7 @@ module.exports = {
     // Display Object Rules
     'display-no-domain-models': displayObjectRules['no-io-in-display-objects'],
     'display-no-business-logic': displayObjectRules['no-non-class-display-exports'],
+    'no-display-objects-in-ui': noDisplayObjectsInUi,
     
     // Page Query Rules
     'page-query-no-null-returns': pageQueryRules['no-null-returns-in-page-queries'],
@@ -207,6 +209,7 @@ module.exports = {
         // Display Objects
         'gridpilot-rules/display-no-domain-models': 'error',
         'gridpilot-rules/display-no-business-logic': 'error',
+        'gridpilot-rules/no-display-objects-in-ui': 'error',
         
         // Page Queries
         'gridpilot-rules/page-query-no-null-returns': 'error',

apps/website/eslint-rules/no-display-objects-in-ui.js

@@ -0,0 +1,40 @@
+/**
+ * ESLint rule: Forbid DisplayObject imports in components and templates
+ * 
+ * Architecture:
+ * - DisplayObjects are for Builders and ViewModels
+ * - Components and Templates must receive already-formatted data
+ */
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Forbid DisplayObject imports in components and templates',
+      category: 'Architecture',
+      recommended: true,
+    },
+    messages: {
+      noDisplayObjectsInUi: 'DisplayObjects cannot be used in components or templates. Use ViewData Builders or View Models to format data before passing it to the UI. See docs/architecture/website/DISPLAY_OBJECTS.md',
+    },
+  },
+
+  create(context) {
+    const filename = context.getFilename();
+    const isUiFile = filename.includes('/components/') || filename.includes('/templates/');
+    
+    if (!isUiFile) return {};
+
+    return {
+      ImportDeclaration(node) {
+        const importPath = node.source.value;
+        if (importPath.includes('/lib/display-objects/')) {
+          context.report({
+            node,
+            messageId: 'noDisplayObjectsInUi',
+          });
+        }
+      },
+    };
+  },
+};