hale-commenting-system 2.2.5 → 2.2.8

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "hale-commenting-system",
-  "version": "2.2.5",
-  "description": "An open source build scaffolding utility for web apps.",
+  "version": "2.2.8",
+  "description": "A commenting system for PatternFly React applications that allows designers and developers to add comments directly on design pages, sync with GitHub Issues, and link Jira tickets.",
   "repository": "https://github.com/patternfly/patternfly-react-seed.git",
-  "homepage": "https://patternfly-react-seed.surge.sh",
+  "homepage": "https://www.npmjs.com/package/hale-commenting-system",
   "license": "MIT",
   "main": "src/app/commenting-system/index.ts",
   "types": "src/app/commenting-system/index.ts",

package/scripts/integrate.js

@@ -141,6 +141,15 @@ async function prompt(questions) {
 }
 
 function findFile(filename, startDir = process.cwd()) {
+  // For index.tsx, prioritize src/app/index.tsx over src/index.tsx
+  // because src/app/index.tsx contains the App component with Router
+  if (filename === 'index.tsx') {
+    const appIndexPath = path.join(startDir, 'src', 'app', filename);
+    if (fs.existsSync(appIndexPath)) {
+      return appIndexPath;
+    }
+  }
+  
   const possiblePaths = [
     path.join(startDir, filename),
     path.join(startDir, 'src', filename),
@@ -503,6 +512,41 @@ JIRA_API_TOKEN=
   }
 }
 
+function createCommentsComponent() {
+  const cwd = process.cwd();
+  const commentsDir = path.join(cwd, 'src', 'app', 'Comments');
+  const commentsFile = path.join(commentsDir, 'Comments.tsx');
+
+  // Check if already exists
+  if (fs.existsSync(commentsFile)) {
+    return; // Already exists, skip
+  }
+
+  // Create directory if it doesn't exist
+  if (!fs.existsSync(commentsDir)) {
+    fs.mkdirSync(commentsDir, { recursive: true });
+  }
+
+  // Read the Comments component from the package and modify the import
+  // The file is in the package at src/app/Comments/Comments.tsx
+  const scriptDir = __dirname || path.dirname(require.resolve('./integrate.js'));
+  const packageCommentsFile = path.join(scriptDir, '..', 'src', 'app', 'Comments', 'Comments.tsx');
+  
+  let commentsComponentContent;
+  if (fs.existsSync(packageCommentsFile)) {
+    // Read from package and replace import path
+    commentsComponentContent = fs.readFileSync(packageCommentsFile, 'utf8')
+      .replace(/from ['"]@app\/commenting-system['"]/g, "from 'hale-commenting-system'");
+  } else {
+    // Fallback: create a minimal version (shouldn't happen if package is properly built)
+    console.log('   ⚠️  Comments component not found in package, skipping creation');
+    return;
+  }
+
+  fs.writeFileSync(commentsFile, commentsComponentContent);
+  console.log('   ✅ Created Comments component');
+}
+
 function integrateWebpackMiddleware() {
   const cwd = process.cwd();
   const webpackDevPath = path.join(cwd, 'webpack.dev.js');
@@ -750,13 +794,47 @@ function integrateWebpackMiddleware() {
 `;
 
   // Find the setupMiddlewares function and inject our code
-  const setupMiddlewaresRegex = /(setupMiddlewares\s*:\s*\([^)]+\)\s*=>\s*\{)/;
-  const match = webpackContent.match(setupMiddlewaresRegex);
+  // Try multiple patterns to match different webpack.dev.js structures
+  const setupMiddlewaresPatterns = [
+    /(setupMiddlewares\s*:\s*\([^)]+\)\s*=>\s*\{)/,  // Arrow function
+    /(setupMiddlewares\s*:\s*function\s*\([^)]+\)\s*\{)/,  // Function declaration
+    /(setupMiddlewares\s*:\s*\([^)]+\)\s*\{)/,  // Shorthand method
+  ];
+  
+  let match = null;
+  for (const pattern of setupMiddlewaresPatterns) {
+    match = webpackContent.match(pattern);
+    if (match) break;
+  }
 
   if (!match) {
-    console.log('   ⚠️  Could not find setupMiddlewares in webpack.dev.js');
-    console.log('   📋 Manual integration required. See webpack middleware documentation\n');
-    return;
+    // If setupMiddlewares doesn't exist, we need to add it to devServer config
+    // Check if devServer config exists
+    const devServerMatch = webpackContent.match(/(devServer\s*:\s*\{)/);
+    if (devServerMatch) {
+      // Add setupMiddlewares to devServer config
+      const insertIndex = devServerMatch.index + devServerMatch[0].length;
+      const before = webpackContent.substring(0, insertIndex);
+      const after = webpackContent.substring(insertIndex);
+      
+      const setupMiddlewaresCode = `
+    setupMiddlewares: (middlewares, devServer) => {
+      if (!devServer || !devServer.app) {
+        return middlewares;
+      }
+${middlewareCode}
+      return middlewares;
+    },`;
+      
+      webpackContent = before + setupMiddlewaresCode + '\n' + after;
+      fs.writeFileSync(webpackDevPath, webpackContent);
+      console.log('   ✅ Added setupMiddlewares to webpack.dev.js');
+      return;
+    } else {
+      console.log('   ⚠️  Could not find setupMiddlewares or devServer config in webpack.dev.js');
+      console.log('   📋 Manual integration required. See webpack middleware documentation\n');
+      return;
+    }
   }
 
   // Find where to inject (after express.json() setup, before return middlewares)
@@ -983,10 +1061,62 @@ function modifyRoutesTsx(filePath) {
     });
 
     if (routesArray) {
-      // Add Comments route group
+      // Check if Comments component is imported
+      let hasCommentsImport = false;
+      let commentsImportName = 'Comments';
+      
+      traverse(ast, {
+        ImportDeclaration(path) {
+          const source = path.node.source.value;
+          if (source.includes('Comments') || source.includes('@app/Comments')) {
+            hasCommentsImport = true;
+            // Get the imported name
+            path.node.specifiers.forEach(spec => {
+              if (spec.type === 'ImportSpecifier' && spec.imported.name === 'Comments') {
+                commentsImportName = spec.local.name;
+              }
+            });
+          }
+        }
+      });
+
+      // Add Comments import if missing
+      if (!hasCommentsImport) {
+        let lastImportIndex = -1;
+        for (let i = ast.program.body.length - 1; i >= 0; i--) {
+          if (ast.program.body[i].type === 'ImportDeclaration') {
+            lastImportIndex = i;
+            break;
+          }
+        }
+        const importIndex = lastImportIndex >= 0 ? lastImportIndex + 1 : 0;
+        
+        const commentsImport = types.importDeclaration(
+          [types.importSpecifier(types.identifier('Comments'), types.identifier('Comments'))],
+          types.stringLiteral('@app/Comments/Comments')
+        );
+        
+        ast.program.body.splice(importIndex, 0, commentsImport);
+      }
+
+      // Add Comments route group with a route to the Comments component
+      const commentsRouteElement = types.jsxElement(
+        types.jsxOpeningElement(types.jsxIdentifier(commentsImportName), [], true),
+        null,
+        []
+      );
+
+      const commentsRouteItem = types.objectExpression([
+        types.objectProperty(types.identifier('element'), commentsRouteElement),
+        types.objectProperty(types.identifier('exact'), types.booleanLiteral(true)),
+        types.objectProperty(types.identifier('label'), types.stringLiteral('View all')),
+        types.objectProperty(types.identifier('path'), types.stringLiteral('/comments')),
+        types.objectProperty(types.identifier('title'), types.stringLiteral('Hale Commenting System | Comments'))
+      ]);
+
       const commentsRoute = types.objectExpression([
         types.objectProperty(types.identifier('label'), types.stringLiteral('Comments')),
-        types.objectProperty(types.identifier('routes'), types.arrayExpression([]))
+        types.objectProperty(types.identifier('routes'), types.arrayExpression([commentsRouteItem]))
       ]);
 
       routesArray.elements.push(commentsRoute);
@@ -1531,6 +1661,10 @@ async function main() {
     skippedCount++;
   }
 
+  // Create Comments component first (needed for routes)
+  console.log('\n📝 Creating Comments component...');
+  createCommentsComponent();
+
   // Modify routes.tsx
   console.log(`\n📝 ${routesPath}`);
   if (modifyRoutesTsx(routesPath)) {