hale-commenting-system 2.2.95 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hale-commenting-system",
-  "version": "2.2.95",
+  "version": "3.0.0",
   "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",
@@ -71,19 +71,20 @@
     "webpack-dev-server": "^5.2.1",
     "webpack-merge": "^6.0.1"
   },
+  "peerDependencies": {
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^7.0.0"
+  },
   "dependencies": {
     "@babel/generator": "^7.23.0",
     "@babel/parser": "^7.23.0",
     "@babel/traverse": "^7.23.0",
     "@babel/types": "^7.23.0",
-    "@patternfly/react-core": "^6.4.0",
-    "@patternfly/react-icons": "^6.4.0",
-    "@patternfly/react-styles": "^6.4.0",
     "inquirer": "^8.2.6",
-    "node-fetch": "^2.7.0",
-    "react": "^18",
-    "react-dom": "^18",
-    "sirv-cli": "^3.0.0"
+    "node-fetch": "^2.7.0"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/scripts/integrate.js

@@ -512,41 +512,6 @@ 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');
@@ -1035,19 +1000,13 @@ function modifyIndexTsx(filePath) {
   }
 }
 
-function modifyRoutesTsx(filePath) {
+function modifyAppLayoutTsx(filePath) {
   const content = fs.readFileSync(filePath, 'utf8');
-  
-  // Check if Comments route already exists with actual routes
-  // Use a more sophisticated check that looks for the route path
-  if (content.includes("label: 'Comments'") || content.includes('label: "Comments"')) {
-    // Check if it has routes with the /comments path
-    if (content.includes("path: '/comments'") || content.includes('path: "/comments"')) {
-      console.log('   ⚠️  Already integrated (Comments route found)');
-      return false;
-    }
-    // If Comments group exists but has no routes, continue to add them
-    console.log('   ℹ️  Comments group exists but has no routes, adding route...');
+
+  // Check if already integrated
+  if (content.includes('CommentPanel') && content.includes('CommentOverlay')) {
+    console.log('   ⚠️  Already integrated (CommentPanel and CommentOverlay found)');
+    return false;
   }
 
   try {
@@ -1056,392 +1015,87 @@ function modifyRoutesTsx(filePath) {
       plugins: ['typescript', 'jsx', 'decorators-legacy', 'classProperties']
     });
 
-    let routesArray = null;
+    let hasCommentingImport = false;
 
+    // Check if commenting system imports exist
     traverse(ast, {
-      VariableDeclarator(path) {
-        if (path.node.id.name === 'routes' && path.node.init.type === 'ArrayExpression') {
-          routesArray = path.node.init;
+      ImportDeclaration(path) {
+        const source = path.node.source.value;
+        if (source.includes('hale-commenting-system')) {
+          hasCommentingImport = true;
         }
       }
     });
 
-    if (routesArray) {
-      // 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);
-      }
-
-      // Check if Comments route group already exists
-      let existingCommentsGroup = null;
-      let existingCommentsRoutes = null;
-      
-      for (const element of routesArray.elements) {
-        if (element.type === 'ObjectExpression') {
-          const labelProp = element.properties.find(
-            prop => prop.key && prop.key.name === 'label' && 
-            prop.value && prop.value.value === 'Comments'
-          );
-          if (labelProp) {
-            existingCommentsGroup = element;
-            const routesProp = element.properties.find(
-              prop => prop.key && prop.key.name === 'routes'
-            );
-            if (routesProp && routesProp.value.type === 'ArrayExpression') {
-              existingCommentsRoutes = routesProp.value;
-            }
-            break;
-          }
+    // Add imports if missing
+    if (!hasCommentingImport) {
+      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;
 
-      // Create the Comments route item
-      const commentsRouteElement = types.jsxElement(
-        types.jsxOpeningElement(types.jsxIdentifier(commentsImportName), [], true),
-        null,
-        []
+      const commentingImport = types.importDeclaration(
+        [
+          types.importSpecifier(types.identifier('CommentPanel'), types.identifier('CommentPanel')),
+          types.importSpecifier(types.identifier('CommentOverlay'), types.identifier('CommentOverlay'))
+        ],
+        types.stringLiteral('hale-commenting-system')
       );
 
-      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'))
-      ]);
-
-      if (existingCommentsGroup && existingCommentsRoutes) {
-        // Add route to existing Comments group
-        existingCommentsRoutes.elements.push(commentsRouteItem);
-      } else {
-        // Create new Comments route group
-        const commentsRoute = types.objectExpression([
-          types.objectProperty(types.identifier('label'), types.stringLiteral('Comments')),
-          types.objectProperty(types.identifier('routes'), types.arrayExpression([commentsRouteItem]))
-        ]);
-        routesArray.elements.push(commentsRoute);
-      }
+      ast.program.body.splice(importIndex, 0, commentingImport);
     }
 
-    const output = generate(ast, {
-      retainLines: false,
-      compact: false
-    }, content);
-
-    fs.writeFileSync(filePath, output.code);
-    return true;
-  } catch (error) {
-    console.error(`   ❌ Error modifying ${filePath}:`, error.message);
-    return false;
-  }
-}
-
-function modifyAppLayoutTsx(filePath) {
-  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;
-  }
+    // Find Page component and wrap its children
+    let pageComponentFound = false;
+    traverse(ast, {
+      JSXElement(path) {
+        const openingElement = path.node.openingElement;
+        if (openingElement.name && openingElement.name.name === 'Page') {
+          pageComponentFound = true;
+          const children = path.node.children;
+
+          // Check if already wrapped
+          if (children.length > 0 &&
+              children.some(child =>
+                child.type === 'JSXElement' &&
+                child.openingElement.name.name === 'CommentPanel')) {
+            return;
+          }
 
-  try {
-    // 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'`
+          // Create CommentOverlay element
+          const commentOverlay = types.jsxElement(
+            types.jsxOpeningElement(types.jsxIdentifier('CommentOverlay'), [], true),
+            null,
+            []
           );
-        }
-      }
-    }
 
-    // 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';
-        }
-        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'`
+          // Create CommentPanel wrapping existing children
+          const commentPanel = types.jsxElement(
+            types.jsxOpeningElement(types.jsxIdentifier('CommentPanel'), []),
+            types.jsxClosingElement(types.jsxIdentifier('CommentPanel')),
+            [commentOverlay, ...children]
           );
-        }
-      }
-    }
 
-    // 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"`
-        );
-      }
-    }
-
-    // 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;
+          path.node.children = [commentPanel];
         }
-
-        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);
       }
-    }
-
-    // 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;
-            }
-          }
-        }
-
-        // 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};
-  };`;
+    });
 
-        // Replace the old function with the new one
-        content = content.slice(0, funcStart) + newFunction + content.slice(endPos);
-      }
+    if (!pageComponentFound) {
+      console.error('   ❌ Could not find Page component in AppLayout.tsx');
+      return false;
     }
 
-    // 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);
-        }
-      }
-    }
+    const output = generate(ast, {
+      retainLines: false,
+      compact: false
+    }, content);
 
-    fs.writeFileSync(filePath, content);
+    fs.writeFileSync(filePath, output.code);
     return true;
   } catch (error) {
     console.error(`   ❌ Error modifying ${filePath}:`, error.message);
@@ -1821,15 +1475,13 @@ async function main() {
 
   // Step 5: Integrate into project
   console.log('\n🔧 Step 5: Integrating into PatternFly Seed project...\n');
-  
+
   console.log('This will modify the following files:');
   console.log('  • src/app/index.tsx');
-  console.log('  • src/app/routes.tsx');
   console.log('  • src/app/AppLayout/AppLayout.tsx');
   console.log('  • webpack.dev.js\n');
 
   const indexPath = findFile('index.tsx');
-  const routesPath = findFile('routes.tsx');
   const appLayoutPath = findFile('AppLayout/AppLayout.tsx') || findFile('AppLayout.tsx');
 
   if (!indexPath) {
@@ -1837,11 +1489,6 @@ async function main() {
     rl.close();
     process.exit(1);
   }
-  if (!routesPath) {
-    console.error('❌ Could not find src/app/routes.tsx');
-    rl.close();
-    process.exit(1);
-  }
   if (!appLayoutPath) {
     console.error('❌ Could not find src/app/AppLayout/AppLayout.tsx');
     rl.close();
@@ -1862,19 +1509,6 @@ 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)) {
-    console.log('   ✅ Added Comments route');
-    successCount++;
-  } else {
-    skippedCount++;
-  }
-
   // Modify AppLayout.tsx
   console.log(`\n📝 ${appLayoutPath}`);
   if (modifyAppLayoutTsx(appLayoutPath)) {

package/src/app/commenting-system/components/CommentOverlay.tsx

@@ -16,7 +16,7 @@ export const CommentOverlay: React.FunctionComponent = () => {
   const handlePageClick = (e: MouseEvent) => {
     if (!commentsEnabled) return;
 
-    // Check if clicking on a pin or any interactive element
+    // Check if clicking on a pin or any interactive element (including FloatingWidget)
     const target = e.target as HTMLElement;
     if (
       target.closest('button') ||
@@ -26,9 +26,10 @@ export const CommentOverlay: React.FunctionComponent = () => {
       target.closest('textarea') ||
       target.closest('[role="button"]') ||
       target.closest('[data-comment-controls]') ||
-      target.closest('[data-comment-pin]')
+      target.closest('[data-comment-pin]') ||
+      target.closest('[data-floating-widget]')
     ) {
-      return; // Don't create pin if clicking interactive elements
+      return; // Don't create pin if clicking interactive elements or floating widget
     }
 
     // Get the overlay container dimensions (accounts for drawer being open)