hale-commenting-system 2.2.92 → 2.2.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hale-commenting-system",
-  "version": "2.2.92",
+  "version": "2.2.95",
   "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://www.npmjs.com/package/hale-commenting-system",

package/scripts/integrate.js

@@ -1170,115 +1170,282 @@ function modifyRoutesTsx(filePath) {
 }
 
 function modifyAppLayoutTsx(filePath) {
-  const content = fs.readFileSync(filePath, 'utf8');
-  
-  // Check if already integrated
-  if (content.includes('CommentPanel') && content.includes('CommentOverlay')) {
-    console.log('   ⚠️  Already integrated (CommentPanel/CommentOverlay found)');
+  let content = fs.readFileSync(filePath, 'utf8');
+
+  // Check if already integrated - look for the comprehensive integration
+  if (content.includes('useComments') && content.includes('useGitHubAuth') &&
+      content.includes('setCommentsEnabled') && content.includes('setFloatingWidgetMode')) {
+    console.log('   ⚠️  Already integrated (full commenting system controls found)');
     return false;
   }
 
   try {
-    const ast = parser(content, {
-      sourceType: 'module',
-      plugins: ['typescript', 'jsx', 'decorators-legacy', 'classProperties']
-    });
-
-    let hasCommentImport = false;
-    let pageElement = null;
-
-    // Check imports and find Page element
-    traverse(ast, {
-      ImportDeclaration(path) {
-        const source = path.node.source.value;
-        if (source.includes('commenting-system') || source.includes('@app/commenting-system') || source.includes('hale-commenting-system')) {
-          hasCommentImport = true;
-          // Check if components are imported
-          const specifiers = path.node.specifiers || [];
-          const hasCommentPanel = specifiers.some(s => 
-            s.imported && (s.imported.name === 'CommentPanel' || s.local.name === 'CommentPanel')
-          );
-          const hasCommentOverlay = specifiers.some(s => 
-            s.imported && (s.imported.name === 'CommentOverlay' || s.local.name === 'CommentOverlay')
+    // Step 1: Add imports using string manipulation (more reliable for complex imports)
+
+    // Check and add PatternFly imports
+    const patternflyImportRegex = /from\s+['"]@patternfly\/react-core['"]/;
+    const patternflyMatch = content.match(patternflyImportRegex);
+
+    if (patternflyMatch) {
+      // Find the import statement
+      const importMatch = content.match(/import\s+\{([^}]+)\}\s+from\s+['"]@patternfly\/react-core['"]/);
+      if (importMatch) {
+        const imports = importMatch[1];
+        // Add Switch if not present
+        if (!imports.includes('Switch')) {
+          const newImports = imports.trim() + ',\n  Switch';
+          content = content.replace(
+            /import\s+\{([^}]+)\}\s+from\s+['"]@patternfly\/react-core['"]/,
+            `import {${newImports}\n} from '@patternfly/react-core'`
           );
+        }
+      }
+    }
 
-          if (!hasCommentPanel) {
-            specifiers.push(types.importSpecifier(types.identifier('CommentPanel'), types.identifier('CommentPanel')));
-          }
-          if (!hasCommentOverlay) {
-            specifiers.push(types.importSpecifier(types.identifier('CommentOverlay'), types.identifier('CommentOverlay')));
-          }
-          path.node.specifiers = specifiers;
+    // Check and add PatternFly icons imports
+    const iconsImportRegex = /from\s+['"]@patternfly\/react-icons['"]/;
+    const iconsMatch = content.match(iconsImportRegex);
+
+    if (iconsMatch) {
+      const importMatch = content.match(/import\s+\{([^}]+)\}\s+from\s+['"]@patternfly\/react-icons['"]/);
+      if (importMatch) {
+        const imports = importMatch[1];
+        // Add icons if not present
+        let newImports = imports.trim();
+        if (!imports.includes('ExternalLinkAltIcon')) {
+          newImports += ', ExternalLinkAltIcon';
         }
-      },
-      JSXElement(path) {
-        if (path.node.openingElement.name.name === 'Page') {
-          pageElement = path;
+        if (!imports.includes('GithubIcon')) {
+          newImports += ', GithubIcon';
+        }
+        if (newImports !== imports.trim()) {
+          content = content.replace(
+            /import\s+\{([^}]+)\}\s+from\s+['"]@patternfly\/react-icons['"]/,
+            `import { ${newImports} } from '@patternfly/react-icons'`
+          );
         }
       }
-    });
+    }
 
-    // Add imports if missing
-    if (!hasCommentImport) {
-      // Find last import declaration
-      let lastImportIndex = -1;
-      for (let i = ast.program.body.length - 1; i >= 0; i--) {
-        if (ast.program.body[i].type === 'ImportDeclaration') {
-          lastImportIndex = i;
-          break;
-        }
+    // Add commenting system imports
+    if (!content.includes('hale-commenting-system')) {
+      // Find where to insert (after other imports)
+      const lastImportMatch = content.match(/import[^;]*;(?=\s*(?:interface|const|export|function))/g);
+      if (lastImportMatch) {
+        const lastImport = lastImportMatch[lastImportMatch.length - 1];
+        const insertPos = content.indexOf(lastImport) + lastImport.length;
+        const commentingImport = `\nimport { CommentOverlay, CommentPanel, useComments, useGitHubAuth } from "hale-commenting-system";`;
+        content = content.slice(0, insertPos) + commentingImport + content.slice(insertPos);
+      }
+    } else {
+      // Update existing import to include all needed items
+      const commentingImportMatch = content.match(/import\s+\{([^}]+)\}\s+from\s+["']hale-commenting-system["']/);
+      if (commentingImportMatch) {
+        const imports = commentingImportMatch[1];
+        let newImports = imports.split(',').map(i => i.trim());
+
+        const needed = ['CommentOverlay', 'CommentPanel', 'useComments', 'useGitHubAuth'];
+        needed.forEach(item => {
+          if (!newImports.includes(item)) {
+            newImports.push(item);
+          }
+        });
+
+        content = content.replace(
+          /import\s+\{[^}]+\}\s+from\s+["']hale-commenting-system["']/,
+          `import { ${newImports.join(', ')} } from "hale-commenting-system"`
+        );
       }
-      const importIndex = lastImportIndex >= 0 ? lastImportIndex + 1 : 0;
-      
-      const componentImports = types.importDeclaration(
-        [
-          types.importSpecifier(types.identifier('CommentPanel'), types.identifier('CommentPanel')),
-          types.importSpecifier(types.identifier('CommentOverlay'), types.identifier('CommentOverlay'))
-        ],
-        types.stringLiteral('hale-commenting-system')
-      );
-      
-      ast.program.body.splice(importIndex, 0, componentImports);
     }
 
-    // Wrap Page children with CommentPanel and CommentOverlay
-    if (pageElement) {
-      const pageChildren = pageElement.node.children;
-      
-      // Check if already wrapped
-      if (pageChildren.length > 0 && 
-          pageChildren[0].type === 'JSXElement' && 
-          pageChildren[0].openingElement.name.name === 'CommentPanel') {
-        console.log('   ⚠️  Already integrated (CommentPanel found in JSX)');
-        return false;
+    // Step 2: Add hooks to the component
+    // Find the AppLayout function/component
+    const componentMatch = content.match(/(const\s+AppLayout[^=]+=\s*\([^)]*\)\s*=>\s*\{)/);
+    if (componentMatch) {
+      const componentStart = content.indexOf(componentMatch[0]);
+      const afterComponentStart = componentStart + componentMatch[0].length;
+
+      // Check if hooks are already added
+      if (!content.includes('const { commentsEnabled, setCommentsEnabled')) {
+        // Find where to insert hooks (after existing useState declarations)
+        const stateMatch = content.slice(afterComponentStart).match(/const\s+\[[^\]]+\]\s*=\s*React\.useState/);
+        let hookInsertPos;
+
+        if (stateMatch) {
+          const statePos = content.indexOf(stateMatch[0], afterComponentStart);
+          const semicolonPos = content.indexOf(';', statePos);
+          hookInsertPos = semicolonPos + 1;
+        } else {
+          hookInsertPos = afterComponentStart;
+        }
+
+        const hooks = `
+  const { commentsEnabled, setCommentsEnabled, drawerPinnedOpen, setDrawerPinnedOpen, floatingWidgetMode, setFloatingWidgetMode } = useComments();
+  const { isAuthenticated, user, login, logout } = useGitHubAuth();
+`;
+        content = content.slice(0, hookInsertPos) + hooks + content.slice(hookInsertPos);
       }
+    }
 
-      // Create CommentOverlay
-      const commentOverlay = types.jsxElement(
-        types.jsxOpeningElement(types.jsxIdentifier('CommentOverlay'), [], true),
-        null,
-        []
-      );
+    // Step 3: Add the special renderNavGroup logic
+    // Replace the simple arrow function with a block function that has special Comments handling
+    if (!content.includes("group.label === 'Comments'")) {
+      // Find the renderNavGroup function - handle both arrow expression () => (...) and block () => {...}
+      const arrowFuncMatch = content.match(/const\s+renderNavGroup\s*=\s*\(([^)]+)\)\s*=>\s*\(/);
+
+      if (arrowFuncMatch) {
+        const params = arrowFuncMatch[1];
+
+        // Find the entire function including the closing parenthesis and semicolon
+        const funcStart = content.indexOf(arrowFuncMatch[0]);
+        const afterArrow = funcStart + arrowFuncMatch[0].length;
+
+        // Find matching closing paren and semicolon
+        let depth = 1;
+        let endPos = afterArrow;
+        for (let i = afterArrow; i < content.length; i++) {
+          if (content.charAt(i) === '(') depth++;
+          if (content.charAt(i) === ')') {
+            depth--;
+            if (depth === 0) {
+              // Found the closing paren, now find the semicolon
+              endPos = i + 1;
+              while (endPos < content.length && content.charAt(endPos).trim() === '') endPos++;
+              if (content.charAt(endPos) === ';') endPos++;
+              break;
+            }
+          }
+        }
 
-      // Create CommentPanel wrapping children and CommentOverlay
-      const commentPanel = types.jsxElement(
-        types.jsxOpeningElement(types.jsxIdentifier('CommentPanel'), []),
-        types.jsxClosingElement(types.jsxIdentifier('CommentPanel')),
-        [commentOverlay, ...pageChildren]
+        // Extract the original NavExpandable JSX (we'll use it as the default case)
+        const originalBody = content.slice(funcStart + arrowFuncMatch[0].length - 1, endPos - 1); // Remove opening ( and closing );
+
+        // Create the new block function
+        const newFunction = `const renderNavGroup = (${params}) => {
+    // Special handling for Comments group
+    if (group.label === 'Comments') {
+      return (
+        <NavExpandable
+          key={\`\${group.label}-\${groupIndex}\`}
+          id={\`\${group.label}-\${groupIndex}\`}
+          title="Hale Commenting System"
+          isActive={group.routes.some((route) => route.path === location.pathname)}
+        >
+          <NavItem
+            onClick={(e) => {
+              e.stopPropagation();
+              setFloatingWidgetMode(!floatingWidgetMode);
+              if (!floatingWidgetMode) {
+                setDrawerPinnedOpen(false);
+              }
+            }}
+            style={{ cursor: 'pointer' }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+              <ExternalLinkAltIcon />
+              <span>{floatingWidgetMode ? 'Close widget' : 'Pop out'}</span>
+            </div>
+          </NavItem>
+          <NavItem>
+            <div
+              data-comment-controls
+              style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingRight: '1rem' }}
+            >
+              <span>Enable Comments</span>
+              <Switch
+                id="comments-enabled-switch"
+                isChecked={commentsEnabled}
+                onChange={(_event, checked) => {
+                  setCommentsEnabled(checked);
+                  if (checked) {
+                    setDrawerPinnedOpen(true);
+                  }
+                }}
+                aria-label="Enable or disable comments"
+              />
+            </div>
+          </NavItem>
+          <NavItem>
+            <div
+              data-comment-controls
+              style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingRight: '1rem' }}
+            >
+              <span>Page info drawer</span>
+              <Switch
+                id="page-info-drawer-switch"
+                isChecked={drawerPinnedOpen}
+                onChange={(_event, checked) => setDrawerPinnedOpen(checked)}
+                aria-label="Pin page info drawer open"
+              />
+            </div>
+          </NavItem>
+          <NavItem>
+            <div
+              data-comment-controls
+              style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingRight: '1rem' }}
+            >
+              {isAuthenticated ? (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+                    <GithubIcon />
+                    {user?.login ? \`@\${user.login}\` : 'Signed in'}
+                  </span>
+                  <Button variant="link" isInline onClick={logout}>
+                    Sign out
+                  </Button>
+                </div>
+              ) : (
+                <Button variant="link" isInline icon={<GithubIcon />} onClick={login}>
+                  Sign in with GitHub
+                </Button>
+              )}
+            </div>
+          </NavItem>
+          {group.routes.map((route, idx) => route.label && renderNavItem(route, idx))}
+        </NavExpandable>
       );
+    }
+
+    // Default handling for other groups
+    return ${originalBody};
+  };`;
 
-      pageElement.node.children = [commentPanel];
+        // Replace the old function with the new one
+        content = content.slice(0, funcStart) + newFunction + content.slice(endPos);
+      }
     }
 
-    const output = generate(ast, {
-      retainLines: false,
-      compact: false
-    }, content);
+    // Step 4: Wrap Page children if not already done
+    if (!content.includes('<CommentPanel>')) {
+      // Find the return statement with Page
+      const pageMatch = content.match(/<Page[^>]*>/);
+      if (pageMatch) {
+        const pageStart = content.indexOf(pageMatch[0]);
+        const pageEnd = content.indexOf('</Page>', pageStart);
+
+        if (pageEnd > pageStart) {
+          // Extract children between Page tags
+          const pageOpenTagEnd = content.indexOf('>', pageStart) + 1;
+          const children = content.slice(pageOpenTagEnd, pageEnd);
+
+          // Wrap with CommentPanel and add CommentOverlay
+          const wrappedChildren = `
+      <CommentPanel>
+        <CommentOverlay />
+        ${children.trim()}
+      </CommentPanel>
+    `;
+
+          content = content.slice(0, pageOpenTagEnd) + wrappedChildren + content.slice(pageEnd);
+        }
+      }
+    }
 
-    fs.writeFileSync(filePath, output.code);
+    fs.writeFileSync(filePath, content);
     return true;
   } catch (error) {
     console.error(`   ❌ Error modifying ${filePath}:`, error.message);
+    console.error(error.stack);
     return false;
   }
 }