hale-commenting-system 3.4.1 → 3.4.4

package/README.md

@@ -27,6 +27,8 @@ The automated integration script (`npx hale-commenting-system init`) works best
 npm install hale-commenting-system
 ```
 
+> **⚠️ Important:** This package modifies your project files during installation. Before uninstalling, always run `npx hale-commenting-system remove` to cleanly remove the integration and avoid breaking your application.
+
 ## Quick Start
 
 1. **Install the package:**
@@ -50,6 +52,53 @@ npm install hale-commenting-system
    npm run start:dev
    ```
 
+## Uninstalling
+
+**IMPORTANT:** Before uninstalling the package, you must first remove the integration to avoid breaking your application.
+
+### Clean Uninstall Process
+
+1. **Run the removal script:**
+   ```bash
+   npx hale-commenting-system remove
+   ```
+
+2. **Uninstall the package:**
+   ```bash
+   npm uninstall hale-commenting-system
+   ```
+
+3. **Restart your dev server:**
+   ```bash
+   npm run start:dev
+   ```
+
+### What the Removal Script Does
+
+The removal script will automatically:
+- Remove imports from `src/app/index.tsx`
+- Remove imports from `src/app/AppLayout/AppLayout.tsx`
+- Notify you about webpack middleware (may require manual removal)
+- Keep `.env` and `.env.server` files (you can delete manually if needed)
+
+### Manual Uninstall (If Needed)
+
+If you need to manually remove the integration:
+
+1. **In `src/app/index.tsx`**, remove:
+   ```typescript
+   import { CommentProvider, GitHubAuthProvider } from "hale-commenting-system";
+   ```
+   And remove the `<GitHubAuthProvider>` and `<CommentProvider>` wrappers.
+
+2. **In `src/app/AppLayout/AppLayout.tsx`**, remove:
+   ```typescript
+   import { CommentPanel, CommentOverlay } from "hale-commenting-system";
+   ```
+   And remove the `<CommentPanel>` and `<CommentOverlay />` components.
+
+3. **In `webpack.dev.js`**, remove the middleware configuration added for GitHub OAuth and Jira API proxying.
+
 ## Usage
 
 After running the integration script, the commenting system will be available in your PatternFly React Seed application.

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "hale-commenting-system",
-  "version": "3.4.1",
+  "version": "3.4.4",
   "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.",
   "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",
   "bin": {
-    "hale-commenting-system": "scripts/integrate.js"
+    "hale-commenting-system": "scripts/cli.js"
   },
   "files": [
     "src/app/commenting-system/",

package/scripts/cli.js

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const path = require('path');
+
+const command = process.argv[2];
+
+const scriptMap = {
+  init: 'integrate.js',
+  remove: 'remove.js',
+  uninstall: 'remove.js',
+};
+
+if (!command || command === 'init') {
+  // Default to init
+  const scriptPath = path.join(__dirname, 'integrate.js');
+  const child = spawn('node', [scriptPath], { stdio: 'inherit' });
+  child.on('exit', (code) => process.exit(code));
+} else if (scriptMap[command]) {
+  const scriptPath = path.join(__dirname, scriptMap[command]);
+  const child = spawn('node', [scriptPath], { stdio: 'inherit' });
+  child.on('exit', (code) => process.exit(code));
+} else {
+  console.log('\n╔════════════════════════════════════════════════════╗');
+  console.log('║          Hale Commenting System - CLI             ║');
+  console.log('╚════════════════════════════════════════════════════╝\n');
+  console.log('Usage:');
+  console.log('  npx hale-commenting-system init       Install and integrate the commenting system');
+  console.log('  npx hale-commenting-system remove     Remove the commenting system');
+  console.log('  npx hale-commenting-system uninstall  Remove the commenting system (alias)\n');
+  process.exit(1);
+}

package/scripts/integrate.js

@@ -1266,12 +1266,13 @@ async function main() {
       console.log(`\n✅ Detected repository: ${owner}/${repo}\n`);
     }
   } else if (projectSetup === 'cloned') {
-    console.log('\n📝 Since you cloned the repo, you\'ll need to create your own GitHub repository.\n');
-    console.log('Steps:');
+    console.log('\n📝 Since you cloned the repo, you can create your own GitHub repository to store comments.\n');
+    console.log('Note: This is optional! You can test the system locally first and add GitHub integration later.\n');
+    console.log('Steps to create a GitHub repository (optional):');
     console.log('1. Create a new repository on GitHub');
     console.log('2. Add it as a remote: git remote add origin <your-repo-url>');
     console.log('3. Push your code: git push -u origin main\n');
-    
+
     const hasCreated = await prompt([
       {
         type: 'confirm',
@@ -1282,34 +1283,36 @@ async function main() {
     ]);
 
     if (!hasCreated.created) {
-      console.log('\nPlease complete the steps above and run this setup again.');
-      rl.close();
-      return;
-    }
-
-    // Ask for owner/repo
-    const repoAnswers = await prompt([
-      {
-        type: 'input',
-        name: 'owner',
-        message: 'What is your GitHub username or organization name?',
-        validate: (input) => {
-          if (!input.trim()) return 'Owner is required';
-          return true;
-        }
-      },
-      {
-        type: 'input',
-        name: 'repo',
-        message: 'What is the name of your GitHub repository?',
-        validate: (input) => {
-          if (!input.trim()) return 'Repository name is required';
-          return true;
+      console.log('\n⏭️  No problem! You can set up the GitHub repository later.');
+      console.log('   The system will still work locally for testing.\n');
+      // Set placeholder values that can be updated later
+      owner = 'YOUR_GITHUB_USERNAME';
+      repo = 'YOUR_REPO_NAME';
+    } else {
+      // Ask for owner/repo
+      const repoAnswers = await prompt([
+        {
+          type: 'input',
+          name: 'owner',
+          message: 'What is your GitHub username or organization name?',
+          validate: (input) => {
+            if (!input.trim()) return 'Owner is required';
+            return true;
+          }
+        },
+        {
+          type: 'input',
+          name: 'repo',
+          message: 'What is the name of your GitHub repository?',
+          validate: (input) => {
+            if (!input.trim()) return 'Repository name is required';
+            return true;
+          }
         }
-      }
-    ]);
-    owner = repoAnswers.owner;
-    repo = repoAnswers.repo;
+      ]);
+      owner = repoAnswers.owner;
+      repo = repoAnswers.repo;
+    }
   } else if (projectSetup === 'unknown') {
     // Try to detect from git
     if (gitInfo && gitInfo.owner && gitInfo.repo) {
@@ -1761,6 +1764,18 @@ async function main() {
   console.log('   (If it\'s already running, restart it to load the new configuration)');
   console.log('2. The commenting system will be available in your app!\n');
 
+  // Check if placeholders were used
+  const hasPlaceholders = owner === 'YOUR_GITHUB_USERNAME' || repo === 'YOUR_REPO_NAME';
+
+  if (hasPlaceholders) {
+    console.log('⚠️  Important: Placeholder values were used for GitHub repository.');
+    console.log('   The UI will work for testing, but comments won\'t sync to GitHub until you:');
+    console.log('   1. Create a GitHub repository');
+    console.log('   2. Update VITE_GITHUB_OWNER and VITE_GITHUB_REPO in .env');
+    console.log('   3. Set up GitHub OAuth (optional - for authentication)');
+    console.log('   4. Restart your dev server\n');
+  }
+
   if (!githubConfig || !jiraConfig) {
     console.log('📝 To add integrations later:');
     if (!githubConfig) {

package/scripts/remove.js

@@ -0,0 +1,134 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+const prompt = (questions) => {
+  return new Promise((resolve) => {
+    const answers = {};
+    let currentIndex = 0;
+
+    const askNext = () => {
+      if (currentIndex >= questions.length) {
+        rl.close();
+        resolve(answers);
+        return;
+      }
+
+      const q = questions[currentIndex];
+      rl.question(q.message + ' ', (answer) => {
+        answers[q.name] = answer.trim();
+        currentIndex++;
+        askNext();
+      });
+    };
+
+    askNext();
+  });
+};
+
+console.log('\n╔════════════════════════════════════════════════════╗');
+console.log('║     Hale Commenting System - Uninstall Script      ║');
+console.log('╚════════════════════════════════════════════════════╝\n');
+
+console.log('⚠️  This will remove the Hale Commenting System from your project.\n');
+console.log('The following changes will be reverted:');
+console.log('  • Remove imports from src/app/index.tsx');
+console.log('  • Remove imports from src/app/AppLayout/AppLayout.tsx');
+console.log('  • Remove middleware from webpack.dev.js');
+console.log('  • Keep .env and .env.server files (you can delete manually if needed)\n');
+
+async function main() {
+  const confirm = await prompt([
+    {
+      name: 'proceed',
+      message: 'Do you want to proceed? (yes/no):',
+    },
+  ]);
+
+  if (confirm.proceed.toLowerCase() !== 'yes' && confirm.proceed.toLowerCase() !== 'y') {
+    console.log('\n❌ Uninstall cancelled.\n');
+    rl.close();
+    return;
+  }
+
+  console.log('\n🔧 Removing Hale Commenting System...\n');
+
+  // Find project root
+  const projectRoot = process.cwd();
+  let filesModified = 0;
+
+  // 1. Remove from src/app/index.tsx
+  const indexPath = path.join(projectRoot, 'src/app/index.tsx');
+  if (fs.existsSync(indexPath)) {
+    let content = fs.readFileSync(indexPath, 'utf8');
+    const originalContent = content;
+
+    // Remove the import
+    content = content.replace(/import\s*{\s*CommentProvider\s*,\s*GitHubAuthProvider\s*}\s*from\s*["']hale-commenting-system["'];?\s*\n?/g, '');
+
+    // Remove the providers from JSX
+    content = content.replace(/<GitHubAuthProvider>\s*/g, '');
+    content = content.replace(/<\/GitHubAuthProvider>/g, '');
+    content = content.replace(/<CommentProvider>\s*/g, '');
+    content = content.replace(/<\/CommentProvider>/g, '');
+
+    if (content !== originalContent) {
+      fs.writeFileSync(indexPath, content, 'utf8');
+      console.log('✅ Removed from src/app/index.tsx');
+      filesModified++;
+    }
+  }
+
+  // 2. Remove from src/app/AppLayout/AppLayout.tsx
+  const appLayoutPath = path.join(projectRoot, 'src/app/AppLayout/AppLayout.tsx');
+  if (fs.existsSync(appLayoutPath)) {
+    let content = fs.readFileSync(appLayoutPath, 'utf8');
+    const originalContent = content;
+
+    // Remove the import
+    content = content.replace(/import\s*{\s*CommentPanel\s*,\s*CommentOverlay\s*}\s*from\s*["']hale-commenting-system["'];?\s*\n?/g, '');
+
+    // Remove the components from JSX
+    content = content.replace(/<CommentPanel>\s*/g, '');
+    content = content.replace(/<\/CommentPanel>/g, '');
+    content = content.replace(/<CommentOverlay\s*\/>\s*/g, '');
+
+    if (content !== originalContent) {
+      fs.writeFileSync(appLayoutPath, content, 'utf8');
+      console.log('✅ Removed from src/app/AppLayout/AppLayout.tsx');
+      filesModified++;
+    }
+  }
+
+  // 3. Remove middleware from webpack.dev.js (optional - can be complex)
+  const webpackPath = path.join(projectRoot, 'webpack.dev.js');
+  if (fs.existsSync(webpackPath)) {
+    console.log('ℹ️  webpack.dev.js - You may want to manually remove the middleware configuration');
+  }
+
+  console.log('\n╔══════════════════════════════════════════════════════════╗');
+  console.log('║   ✅ Uninstall Complete!                                   ║');
+  console.log('╚══════════════════════════════════════════════════════════╝\n');
+
+  console.log(`Modified ${filesModified} file(s)\n`);
+
+  console.log('Next steps:');
+  console.log('1. Run: npm uninstall hale-commenting-system');
+  console.log('2. Restart your dev server: npm run start:dev');
+  console.log('3. (Optional) Delete .env and .env.server if no longer needed\n');
+
+  rl.close();
+}
+
+main().catch((err) => {
+  console.error('❌ Error during uninstall:', err);
+  rl.close();
+  process.exit(1);
+});

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

@@ -530,7 +530,13 @@ export const JiraTab: React.FunctionComponent = () => {
   const scopeLabel =
     source === 'page' ? 'This page' : source === 'section' ? `Section (${sectionRoute}/*)` : null;
   const key = record.jiraKey || '';
-  const url = issue?.url || (process.env.VITE_JIRA_BASE_URL ? `${process.env.VITE_JIRA_BASE_URL}/browse/${key}` : '');
+  let jiraBaseUrl: string | undefined;
+  try {
+    jiraBaseUrl = typeof process !== 'undefined' && process.env ? process.env.VITE_JIRA_BASE_URL : undefined;
+  } catch (e) {
+    jiraBaseUrl = undefined;
+  }
+  const url = issue?.url || (jiraBaseUrl ? `${jiraBaseUrl}/browse/${key}` : '');
 
   const parsedSections = parseJiraTemplateSections(issue?.description || '');
   const byTitle = new Map(parsedSections.map((s) => [s.title, s.body]));

package/src/app/commenting-system/contexts/GitHubAuthContext.tsx

@@ -40,7 +40,12 @@ export const GitHubAuthProvider: React.FunctionComponent<{ children: React.React
   }, []);
 
   const login = () => {
-    const clientId = process.env.VITE_GITHUB_CLIENT_ID;
+    let clientId: string | undefined;
+    try {
+      clientId = typeof process !== 'undefined' && process.env ? process.env.VITE_GITHUB_CLIENT_ID : undefined;
+    } catch (e) {
+      clientId = undefined;
+    }
     if (!clientId) {
       // eslint-disable-next-line no-alert
       alert('GitHub login is not configured (missing VITE_GITHUB_CLIENT_ID).');

package/src/app/commenting-system/services/githubAdapter.ts

@@ -1,3 +1,5 @@
+import { getEnv } from '../utils/env';
+
 export interface GitHubUser {
   login: string;
   avatar: string;
@@ -31,14 +33,16 @@ export const getStoredUser = (): GitHubUser | null => {
 };
 
 export const isGitHubConfigured = (): boolean => {
-  return Boolean(getStoredToken() && process.env.VITE_GITHUB_OWNER && process.env.VITE_GITHUB_REPO);
+  const owner = getEnv('VITE_GITHUB_OWNER');
+  const repo = getEnv('VITE_GITHUB_REPO');
+  return Boolean(getStoredToken() && owner && repo);
 };
 
 export const diagnoseGitHubSetup = () => {
   const token = getStoredToken();
   const user = getStoredUser();
-  const owner = process.env.VITE_GITHUB_OWNER;
-  const repo = process.env.VITE_GITHUB_REPO;
+  const owner = getEnv('VITE_GITHUB_OWNER');
+  const repo = getEnv('VITE_GITHUB_REPO');
 
   console.log('🔍 GitHub Configuration Diagnostic:');
   console.log('  Token:', token ? `Present (${token.substring(0, 10)}...)` : 'Missing ❌');
@@ -100,8 +104,8 @@ async function githubProxyRequest(method: string, endpoint: string, data?: any):
         4. Token has expired or been revoked
 
         Current config:
-        - Owner: ${process.env.VITE_GITHUB_OWNER}
-        - Repo: ${process.env.VITE_GITHUB_REPO}
+        - Owner: ${getEnv('VITE_GITHUB_OWNER')}
+        - Repo: ${getEnv('VITE_GITHUB_REPO')}
         - Endpoint: ${endpoint}
       `);
     }
@@ -153,8 +157,8 @@ export const githubAdapter = {
   }): Promise<GitHubResult<{ number: number; html_url: string }>> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
 
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
 
     try {
       const metadata = [
@@ -193,8 +197,8 @@ export const githubAdapter = {
 
   async createComment(issueNumber: number, body: string): Promise<GitHubResult> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
 
     try {
       const data = await githubProxyRequest('POST', `/repos/${owner}/${repo}/issues/${issueNumber}/comments`, { body });
@@ -210,8 +214,8 @@ export const githubAdapter = {
 
   async fetchIssuesForRouteAndVersion(route: string, version?: string): Promise<GitHubResult<any[]>> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       const data = await githubProxyRequest(
         'GET',
@@ -247,8 +251,8 @@ export const githubAdapter = {
 
   async fetchIssueComments(issueNumber: number): Promise<GitHubResult<any[]>> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       const data = await githubProxyRequest(
         'GET',
@@ -262,8 +266,8 @@ export const githubAdapter = {
 
   async updateComment(commentId: number, body: string): Promise<GitHubResult> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       const data = await githubProxyRequest('PATCH', `/repos/${owner}/${repo}/issues/comments/${commentId}`, { body });
       return { success: true, data };
@@ -274,8 +278,8 @@ export const githubAdapter = {
 
   async deleteComment(commentId: number): Promise<GitHubResult> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       await githubProxyRequest('DELETE', `/repos/${owner}/${repo}/issues/comments/${commentId}`);
       return { success: true, data: {} };
@@ -286,8 +290,8 @@ export const githubAdapter = {
 
   async closeIssue(issueNumber: number): Promise<GitHubResult> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       const data = await githubProxyRequest('PATCH', `/repos/${owner}/${repo}/issues/${issueNumber}`, { state: 'closed' });
       return { success: true, data };
@@ -298,8 +302,8 @@ export const githubAdapter = {
 
   async reopenIssue(issueNumber: number): Promise<GitHubResult> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       const data = await githubProxyRequest('PATCH', `/repos/${owner}/${repo}/issues/${issueNumber}`, { state: 'open' });
       return { success: true, data };
@@ -310,8 +314,8 @@ export const githubAdapter = {
 
   async getRepoFile(path: string): Promise<GitHubResult<{ text: string; sha: string } | null>> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       const data = await githubProxyRequest('GET', `/repos/${owner}/${repo}/contents/${encodePath(path)}`);
       const content = typeof data?.content === 'string' ? data.content.replace(/\n/g, '') : '';
@@ -335,8 +339,8 @@ export const githubAdapter = {
     sha?: string;
   }): Promise<GitHubResult<{ sha: string }>> {
     if (!isGitHubConfigured()) return { success: false, error: 'Please sign in with GitHub' };
-    const owner = process.env.VITE_GITHUB_OWNER;
-    const repo = process.env.VITE_GITHUB_REPO;
+    const owner = getEnv('VITE_GITHUB_OWNER');
+    const repo = getEnv('VITE_GITHUB_REPO');
     try {
       const payload: any = {
         message: params.message,

package/src/app/commenting-system/utils/env.ts

@@ -0,0 +1,15 @@
+/**
+ * Safely access environment variables
+ * Returns undefined if process or env vars are not available
+ */
+export const getEnv = (key: string): string | undefined => {
+  // Check if running in an environment with process.env (webpack with DefinePlugin or similar)
+  try {
+    if (typeof process !== 'undefined' && process.env) {
+      return process.env[key];
+    }
+  } catch (e) {
+    // process might be defined but accessing it throws an error
+  }
+  return undefined;
+};