website refactor

apps/website/eslint-rules/filename-rules.js

@@ -54,10 +54,53 @@ module.exports = {
         FunctionDeclaration(node) {
           const filename = context.getFilename();
           if (filename.includes('/lib/services/') && filename.endsWith('.ts')) {
-            const expectedFunctionName = filename.split('/').pop().replace('.ts', '');
-            const actualFunctionName = node.id?.name;
+            const expectedClassName = filename.split('/').pop().replace('.ts', '');
+            const actualClassName = node.id?.name;
             
-            if (actualFunctionName && actualFunctionName !== expectedFunctionName) {
+            if (actualClassName && actualClassName !== expectedClassName) {
+              context.report({
+                node,
+                messageId: 'message',
+              });
+            }
+          }
+        },
+      };
+    },
+  },
+
+  // Rule 3: Display filename must end with Display.tsx and match class name
+  'display-filename-must-end-with-display-tsx': {
+    meta: {
+      type: 'problem',
+      docs: {
+        description: 'Enforce display filename ends with Display.tsx and matches class name',
+        category: 'Filename',
+      },
+      messages: {
+        message: 'Display filenames must end with Display.tsx and the class name must match (e.g., RatingDisplay.tsx contains class RatingDisplay). Displays must be reusable, not screen-specific.',
+      },
+    },
+    create(context) {
+      return {
+        ClassDeclaration(node) {
+          const filename = context.getFilename();
+          if (filename.includes('/lib/display-objects/') && filename.endsWith('.tsx')) {
+            // Check if filename ends with Display.tsx
+            if (!filename.endsWith('Display.tsx')) {
+              context.report({
+                node,
+                messageId: 'message',
+              });
+              return;
+            }
+            
+            // Extract expected class name from filename (remove path and Display.tsx suffix)
+            const filenameOnly = filename.split('/').pop();
+            const expectedClassName = filenameOnly.replace('.tsx', '');
+            const actualClassName = node.id?.name;
+            
+            if (actualClassName && actualClassName !== expectedClassName) {
               context.report({
                 node,
                 messageId: 'message',