@jmruthers/pace-core 0.6.6 → 0.6.7

package/{src/eslint-rules/rules/compliance.cjs → dist/eslint-rules/rules/01-pace-core-compliance.cjs}

@@ -1,12 +1,22 @@
 /**
- * General compliance rules
+ * pace-core Compliance Rules (Standard 1)
  * @package @jmruthers/pace-core
- * @module ESLintRules/rules/compliance
+ * @module ESLintRules/rules/pace-core-compliance
+ * 
+ * Enforces pace-core usage patterns from Standard 1:
+ * - Use pace-core components instead of native HTML or custom implementations
+ * - Use pace-core hooks instead of custom hooks
+ * - Use pace-core utilities instead of custom utilities
+ * - Block restricted imports (libraries wrapped by pace-core)
+ * - Prefer pace-core Form component
+ * - Prevent component duplication
+ * 
+ * Reference: packages/core/docs/standards/1-pace-core-compliance-standards.md
  */
 
 const path = require('path');
-const { getPaceCoreComponents, getPaceCoreHooks, getPaceCoreUtils } = require('../utils/manifest-loader.cjs');
-const { isPaceCoreSourceFile } = require('../utils/helpers.cjs');
+const { getPaceCoreComponents, getPaceCoreHooks, getPaceCoreUtils, getRestrictedImports } = require('../utils/manifest-loader.cjs');
+const { getPaceCoreAlternative, isPaceCoreSourceFile } = require('../utils/helpers.cjs');
 
 module.exports = {
   rules: {
@@ -19,7 +29,8 @@ module.exports = {
         docs: {
           description: 'Suggest using pace-core components instead of native HTML elements',
           category: 'Best Practices',
-          recommended: true
+          recommended: true,
+          url: 'https://github.com/jmruthers/pace-core/blob/main/packages/core/docs/standards/1-pace-core-compliance-standards.md'
         },
         hasSuggestions: true,
         messages: {
@@ -94,7 +105,8 @@ module.exports = {
         docs: {
           description: 'Suggest using pace-core hooks instead of custom implementations',
           category: 'Best Practices',
-          recommended: true
+          recommended: true,
+          url: 'https://github.com/jmruthers/pace-core/blob/main/packages/core/docs/standards/1-pace-core-compliance-standards.md'
         },
         messages: {
           preferPaceCoreHook: "Consider using '{{hook}}' from '@jmruthers/pace-core' instead of custom hook '{{customHook}}'"
@@ -155,7 +167,8 @@ module.exports = {
         docs: {
           description: 'Suggest using pace-core utilities instead of custom implementations',
           category: 'Best Practices',
-          recommended: true
+          recommended: true,
+          url: 'https://github.com/jmruthers/pace-core/blob/main/packages/core/docs/standards/1-pace-core-compliance-standards.md'
         },
         messages: {
           preferPaceCoreUtil: "Consider using '{{util}}' from '@jmruthers/pace-core' instead of custom function '{{customUtil}}'"
@@ -243,7 +256,8 @@ module.exports = {
         docs: {
           description: 'Disallow local components with names matching pace-core components',
           category: 'Best Practices',
-          recommended: true
+          recommended: true,
+          url: 'https://github.com/jmruthers/pace-core/blob/main/packages/core/docs/standards/1-pace-core-compliance-standards.md'
         },
         messages: {
           duplicateComponent: "Component '{{componentName}}' conflicts with pace-core component. Use '@jmruthers/pace-core' instead of creating a local version."
@@ -301,20 +315,23 @@ module.exports = {
     },
 
     /**
-     * Disallow inline styles
+     * Block direct imports of libraries wrapped by pace-core
      */
-    'no-inline-styles': {
+    'no-restricted-imports': {
       meta: {
         type: 'problem',
         docs: {
-          description: 'Disallow inline styles. Use pace-core components or Tailwind classes instead.',
+          description: 'Disallow direct imports of libraries that pace-core wraps',
           category: 'Best Practices',
-          recommended: true
+          recommended: true,
+          url: 'https://github.com/jmruthers/pace-core/blob/main/packages/core/docs/standards/1-pace-core-compliance-standards.md'
         },
+        fixable: 'code',
+        hasSuggestions: true,
         messages: {
-          inlineStyle: 'Inline style detected. Use pace-core components or Tailwind classes instead.'
-        },
-        hasSuggestions: true
+          restrictedImport: '{{message}} Import from {{alternative}} instead.',
+          restrictedImportWithReason: '{{message}} {{reason}}'
+        }
       },
       create(context) {
         const filename = context.getFilename();
@@ -324,20 +341,165 @@ module.exports = {
           return {};
         }
         
+        const restrictedImports = getRestrictedImports();
+        const restrictedModules = restrictedImports.map(imp => imp.module);
+        
+        // Also catch @radix-ui/* patterns
+        const radixPattern = /^@radix-ui\//;
+        
         return {
-          JSXAttribute(node) {
-            if (node.name && node.name.name === 'style') {
+          ImportDeclaration(node) {
+            const importSource = node.source.value;
+            
+            // Check exact matches
+            const restricted = restrictedImports.find(imp => imp.module === importSource);
+            if (restricted) {
               context.report({
-                node,
-                messageId: 'inlineStyle',
+                node: node.source,
+                messageId: 'restrictedImportWithReason',
+                data: {
+                  message: `Direct import of '${importSource}' is not allowed.`,
+                  reason: restricted.reason
+                },
                 suggest: [{
-                  desc: 'Remove inline style and use pace-core component styling or Tailwind utility classes',
+                  desc: `Use pace-core alternative: ${restricted.reason}`,
                   fix(fixer) {
-                    // Remove the style attribute
-                    return fixer.remove(node);
+                    // Suggest importing from pace-core instead
+                    const paceCoreAlternative = getPaceCoreAlternative(importSource);
+                    if (paceCoreAlternative) {
+                      return fixer.replaceText(
+                        node.source,
+                        `'@jmruthers/pace-core${paceCoreAlternative}'`
+                      );
+                    }
+                    return null;
                   }
                 }]
               });
+              return;
+            }
+            
+            // Check @radix-ui/* pattern
+            if (radixPattern.test(importSource) && !restrictedModules.includes(importSource)) {
+              context.report({
+                node: node.source,
+                messageId: 'restrictedImport',
+                data: {
+                  message: `Direct import of '${importSource}' is not allowed.`,
+                  alternative: '@jmruthers/pace-core'
+                },
+                suggest: [{
+                  desc: 'Use pace-core component instead',
+                  fix(fixer) {
+                    return fixer.replaceText(
+                      node.source,
+                      "'@jmruthers/pace-core'"
+                    );
+                  }
+                }]
+              });
+            }
+          }
+        };
+      }
+    },
+
+    /**
+     * Prefer pace-core Form component over plain form tags and direct react-hook-form usage
+     */
+    'prefer-pace-core-form': {
+      meta: {
+        type: 'problem',
+        docs: {
+          description: 'Disallow plain <form> tags and direct react-hook-form imports. Use pace-core Form component instead.',
+          category: 'Best Practices',
+          recommended: true,
+          url: 'https://github.com/jmruthers/pace-core/blob/main/packages/core/docs/standards/1-pace-core-compliance-standards.md'
+        },
+        messages: {
+          plainFormTag: "Plain <form> tag detected. Use pace-core Form component instead.",
+          reactHookFormImport: "Direct import from 'react-hook-form' detected: {{imports}}. Use pace-core Form component instead. useFormContext is allowed when Form is imported from pace-core."
+        },
+        hasSuggestions: true
+      },
+      create(context) {
+        const filename = context.getFilename();
+        
+        // Exclude pace-core source files - these rules are for consuming apps
+        if (isPaceCoreSourceFile(filename)) {
+          return {};
+        }
+        
+        let hasPaceCoreForm = false;
+        const problematicImports = ['useForm', 'FormProvider', 'Controller', 'useWatch', 'useFieldArray', 'useController'];
+        
+        return {
+          ImportDeclaration(node) {
+            const importSource = node.source.value;
+            
+            // Check if Form is imported from pace-core
+            if (importSource === '@jmruthers/pace-core' || 
+                importSource === '@jmruthers/pace-core/components') {
+              const hasForm = node.specifiers.some(spec => {
+                if (spec.type === 'ImportSpecifier') {
+                  return spec.imported.name === 'Form';
+                }
+                return false;
+              });
+              if (hasForm) {
+                hasPaceCoreForm = true;
+              }
+            }
+            
+            // Check for react-hook-form imports
+            if (importSource === 'react-hook-form') {
+              const importedItems = node.specifiers
+                .filter(spec => spec.type === 'ImportSpecifier')
+                .map(spec => spec.imported.name);
+              
+              const foundProblematic = importedItems.filter(item => problematicImports.includes(item));
+              
+              // Allow useFormContext when Form is imported from pace-core
+              const isAcceptable = hasPaceCoreForm && 
+                                  foundProblematic.length === 1 && 
+                                  foundProblematic[0] === 'useFormContext';
+              
+              if (foundProblematic.length > 0 && !isAcceptable) {
+                context.report({
+                  node: node.source,
+                  messageId: 'reactHookFormImport',
+                  data: {
+                    imports: foundProblematic.join(', ')
+                  },
+                  suggest: [{
+                    desc: 'Use pace-core Form component instead',
+                    fix(fixer) {
+                      return fixer.remove(node);
+                    }
+                  }]
+                });
+              }
+            }
+          },
+          
+          JSXOpeningElement(node) {
+            // Check for plain <form> tags (lowercase, not Form component)
+            if (node.name.type === 'JSXIdentifier') {
+              const elementName = node.name.name;
+              // Check if it's lowercase 'form' (not 'Form' component)
+              if (elementName === 'form') {
+                context.report({
+                  node,
+                  messageId: 'plainFormTag',
+                  suggest: [{
+                    desc: 'Replace with pace-core Form component',
+                    fix(fixer) {
+                      // This is complex to auto-fix, so we'll just report
+                      return null;
+                    }
+                  }]
+                });
+              }
             }
           }
         };
@@ -345,4 +507,3 @@ module.exports = {
     }
   }
 };
-

package/dist/eslint-rules/rules/04-code-quality.cjs

@@ -0,0 +1,290 @@
+/**
+ * Code Quality Rules (Standard 4)
+ * @package @jmruthers/pace-core
+ * @module ESLintRules/rules/code-quality
+ * 
+ * Enforces code quality patterns from Standard 4:
+ * - Naming conventions (hooks: use*, providers: *Provider)
+ * - TypeScript best practices
+ * 
+ * Reference: packages/core/docs/standards/4-code-quality-standards.md
+ */
+
+const { isPaceCoreSourceFile } = require('../utils/helpers.cjs');
+
+module.exports = {
+  rules: {
+    /**
+     * Enforce naming conventions for hooks and providers
+     */
+    'naming-convention': {
+      meta: {
+        type: 'suggestion',
+        docs: {
+          description: 'Enforce naming conventions: hooks must start with "use", providers must end with "Provider"',
+          category: 'Best Practices',
+          recommended: true,
+          url: 'https://github.com/jmruthers/pace-core/blob/main/packages/core/docs/standards/4-code-quality-standards.md'
+        },
+        messages: {
+          hookNaming: "Hook '{{name}}' must start with 'use' (e.g., useEventData, useUserProfile)",
+          providerNaming: "Provider '{{name}}' must end with 'Provider' (e.g., AuthProvider, OrganisationProvider)"
+        },
+        hasSuggestions: true
+      },
+      create(context) {
+        const filename = context.getFilename();
+        
+        // Exclude pace-core source files - these rules are for consuming apps
+        if (isPaceCoreSourceFile(filename)) {
+          return {};
+        }
+        
+        return {
+          FunctionDeclaration(node) {
+            if (!node.id) return;
+            
+            const functionName = node.id.name;
+            if (!functionName) return;
+            
+            // Check for hooks (functions that use React hooks)
+            const sourceCode = context.getSourceCode();
+            const functionText = sourceCode.getText(node.body);
+            const usesReactHooks = /use(State|Effect|Callback|Memo|Ref|Context|Reducer|LayoutEffect|ImperativeHandle|DebugValue)/.test(functionText);
+            
+            // Check if function is a hook (starts with 'use' or uses React hooks)
+            if (usesReactHooks || functionName.startsWith('use')) {
+              if (!functionName.startsWith('use')) {
+                context.report({
+                  node: node.id,
+                  messageId: 'hookNaming',
+                  data: { name: functionName },
+                  suggest: [{
+                    desc: `Rename to use${functionName.charAt(0).toUpperCase() + functionName.slice(1)}`,
+                    fix(fixer) {
+                      return null; // Complex rename
+                    }
+                  }]
+                });
+              }
+            }
+            
+            // Check for providers (components that return JSX and have Provider in name or return Provider-like structure)
+            const returnsJSX = functionText.includes('return') && (functionText.includes('<') || functionText.includes('createElement'));
+            const hasProviderPattern = functionName.includes('Provider') || 
+                                      functionText.includes('Provider') ||
+                                      functionText.includes('Context.Provider');
+            
+            if (returnsJSX && hasProviderPattern && !functionName.endsWith('Provider')) {
+              context.report({
+                node: node.id,
+                messageId: 'providerNaming',
+                data: { name: functionName },
+                suggest: [{
+                  desc: `Rename to ${functionName}Provider`,
+                  fix(fixer) {
+                    return null; // Complex rename
+                  }
+                }]
+              });
+            }
+          },
+          
+          VariableDeclarator(node) {
+            if (!node.id || node.id.type !== 'Identifier') return;
+            if (!node.init) return;
+            
+            const varName = node.id.name;
+            if (!varName) return;
+            
+            // Check for hook variables (arrow functions that use React hooks)
+            if (node.init.type === 'ArrowFunctionExpression' || node.init.type === 'FunctionExpression') {
+              const sourceCode = context.getSourceCode();
+              const functionText = sourceCode.getText(node.init);
+              const usesReactHooks = /use(State|Effect|Callback|Memo|Ref|Context|Reducer|LayoutEffect|ImperativeHandle|DebugValue)/.test(functionText);
+              
+              if (usesReactHooks && !varName.startsWith('use')) {
+                context.report({
+                  node: node.id,
+                  messageId: 'hookNaming',
+                  data: { name: varName },
+                  suggest: [{
+                    desc: `Rename to use${varName.charAt(0).toUpperCase() + varName.slice(1)}`,
+                    fix(fixer) {
+                      return null; // Complex rename
+                    }
+                  }]
+                });
+              }
+            }
+          }
+        };
+      }
+    },
+
+    /**
+     * Enforce component naming: PascalCase
+     */
+    'component-naming': {
+      meta: {
+        type: 'suggestion',
+        docs: {
+          description: 'Enforce component naming: components must use PascalCase',
+          category: 'Best Practices',
+          recommended: true,
+          url: 'https://github.com/jmruthers/pace-core/blob/main/packages/core/docs/standards/4-code-quality-standards.md'
+        },
+        messages: {
+          componentNaming: "Component '{{name}}' must use PascalCase (e.g., EventCard, UserProfile)"
+        },
+        hasSuggestions: true
+      },
+      create(context) {
+        const filename = context.getFilename();
+        
+        // Exclude pace-core source files - these rules are for consuming apps
+        if (isPaceCoreSourceFile(filename)) {
+          return {};
+        }
+        
+        const isComponentFile = filename.match(/(components|Components)\//);
+        if (!isComponentFile) {
+          return {};
+        }
+        
+        return {
+          FunctionDeclaration(node) {
+            if (!node.id) return;
+            
+            const functionName = node.id.name;
+            if (!functionName) return;
+            
+            // Check if it's a component (returns JSX)
+            const sourceCode = context.getSourceCode();
+            const functionText = sourceCode.getText(node.body);
+            const returnsJSX = functionText.includes('return') && (functionText.includes('<') || functionText.includes('createElement'));
+            
+            if (returnsJSX) {
+              // Check if it's PascalCase
+              const isPascalCase = /^[A-Z][a-zA-Z0-9]*$/.test(functionName);
+              if (!isPascalCase) {
+                context.report({
+                  node: node.id,
+                  messageId: 'componentNaming',
+                  data: { name: functionName },
+                  suggest: [{
+                    desc: `Rename to ${functionName.charAt(0).toUpperCase() + functionName.slice(1).replace(/[^a-zA-Z0-9]/g, '')}`,
+                    fix(fixer) {
+                      return null; // Complex rename
+                    }
+                  }]
+                });
+              }
+            }
+          },
+          
+          VariableDeclarator(node) {
+            if (!node.id || node.id.type !== 'Identifier') return;
+            if (!node.init) return;
+            
+            const varName = node.id.name;
+            if (!varName) return;
+            
+            // Check for component variables (arrow functions that return JSX)
+            if (node.init.type === 'ArrowFunctionExpression' || node.init.type === 'FunctionExpression') {
+              const sourceCode = context.getSourceCode();
+              const functionText = sourceCode.getText(node.init);
+              const returnsJSX = functionText.includes('return') && (functionText.includes('<') || functionText.includes('createElement'));
+              
+              if (returnsJSX) {
+                const isPascalCase = /^[A-Z][a-zA-Z0-9]*$/.test(varName);
+                if (!isPascalCase) {
+                  context.report({
+                    node: node.id,
+                    messageId: 'componentNaming',
+                    data: { name: varName },
+                    suggest: [{
+                      desc: `Rename to ${varName.charAt(0).toUpperCase() + varName.slice(1).replace(/[^a-zA-Z0-9]/g, '')}`,
+                      fix(fixer) {
+                        return null; // Complex rename
+                      }
+                    }]
+                  });
+                }
+              }
+            }
+          }
+        };
+      }
+    },
+
+    /**
+     * Enforce type/interface naming: PascalCase
+     */
+    'type-naming': {
+      meta: {
+        type: 'suggestion',
+        docs: {
+          description: 'Enforce type/interface naming: types and interfaces must use PascalCase',
+          category: 'Best Practices',
+          recommended: true,
+          url: 'https://github.com/jmruthers/pace-core/blob/main/packages/core/docs/standards/4-code-quality-standards.md'
+        },
+        messages: {
+          typeNaming: "Type/interface '{{name}}' must use PascalCase (e.g., EventStatus, UserProfile)"
+        },
+        hasSuggestions: true
+      },
+      create(context) {
+        const filename = context.getFilename();
+        
+        // Exclude pace-core source files - these rules are for consuming apps
+        if (isPaceCoreSourceFile(filename)) {
+          return {};
+        }
+        
+        return {
+          TSInterfaceDeclaration(node) {
+            const interfaceName = node.id.name;
+            if (!interfaceName) return;
+            
+            const isPascalCase = /^[A-Z][a-zA-Z0-9]*$/.test(interfaceName);
+            if (!isPascalCase) {
+              context.report({
+                node: node.id,
+                messageId: 'typeNaming',
+                data: { name: interfaceName },
+                suggest: [{
+                  desc: `Rename to ${interfaceName.charAt(0).toUpperCase() + interfaceName.slice(1).replace(/[^a-zA-Z0-9]/g, '')}`,
+                  fix(fixer) {
+                    return null; // Complex rename
+                  }
+                }]
+              });
+            }
+          },
+          
+          TSTypeAliasDeclaration(node) {
+            const typeName = node.id.name;
+            if (!typeName) return;
+            
+            const isPascalCase = /^[A-Z][a-zA-Z0-9]*$/.test(typeName);
+            if (!isPascalCase) {
+              context.report({
+                node: node.id,
+                messageId: 'typeNaming',
+                data: { name: typeName },
+                suggest: [{
+                  desc: `Rename to ${typeName.charAt(0).toUpperCase() + typeName.slice(1).replace(/[^a-zA-Z0-9]/g, '')}`,
+                  fix(fixer) {
+                    return null; // Complex rename
+                  }
+                }]
+              });
+            }
+          }
+        };
+      }
+    }
+  }
+};

package/dist/eslint-rules/rules/05-styling.cjs

@@ -0,0 +1,61 @@
+/**
+ * Styling Rules (Standard 5)
+ * @package @jmruthers/pace-core
+ * @module ESLintRules/rules/styling
+ * 
+ * Enforces styling patterns from Standard 5:
+ * - No inline styles (use pace-core components or Tailwind classes)
+ * 
+ * Reference: packages/core/docs/standards/5-styling-standards.md
+ */
+
+const { isPaceCoreSourceFile } = require('../utils/helpers.cjs');
+
+module.exports = {
+  rules: {
+    /**
+     * Disallow inline styles
+     */
+    'no-inline-styles': {
+      meta: {
+        type: 'problem',
+        docs: {
+          description: 'Disallow inline styles. Use pace-core components or Tailwind classes instead.',
+          category: 'Best Practices',
+          recommended: true,
+          url: 'https://github.com/jmruthers/pace-core/blob/main/packages/core/docs/standards/5-styling-standards.md'
+        },
+        messages: {
+          inlineStyle: 'Inline style detected. Use pace-core components or Tailwind classes instead.'
+        },
+        hasSuggestions: true
+      },
+      create(context) {
+        const filename = context.getFilename();
+        
+        // Exclude pace-core source files - these rules are for consuming apps
+        if (isPaceCoreSourceFile(filename)) {
+          return {};
+        }
+        
+        return {
+          JSXAttribute(node) {
+            if (node.name && node.name.name === 'style') {
+              context.report({
+                node,
+                messageId: 'inlineStyle',
+                suggest: [{
+                  desc: 'Remove inline style and use pace-core component styling or Tailwind utility classes',
+                  fix(fixer) {
+                    // Remove the style attribute
+                    return fixer.remove(node);
+                  }
+                }]
+              });
+            }
+          }
+        };
+      }
+    }
+  }
+};