hale-commenting-system 2.0.3 → 2.0.4

package/README.md

@@ -1,16 +1,6 @@
-# hale-commenting-system
+# Hale Commenting System
 
-A local-first React commenting system with localStorage persistence. Perfect for prototypes, design reviews, and local development.
-
-## Features
-
-- 📌 **Visual Comment Pins** - Click anywhere on your app to add comment threads
-- 💾 **LocalStorage Persistence** - Comments persist across page refreshes
-- 🔄 **Threaded Conversations** - Add multiple replies to each comment pin
-- 📦 **Version Management** - Filter comments by prototype version
-- 🎨 **PatternFly UI** - Built with PatternFly React components
-- 🧙 **CLI Wizard** - Automated setup with `npx hale-commenting-system init`
-- 🚀 **Zero Configuration** - No backend, no auth, no setup hassle
+A commenting system for PatternFly Seed projects with GitHub and Jira integration.
 
 ## Installation
 
@@ -18,212 +8,31 @@ A local-first React commenting system with localStorage persistence. Perfect for
 npm install hale-commenting-system
 ```
 
-## Quick Start
-
-Run the interactive setup wizard:
-
-```bash
-npx hale-commenting-system init
-```
+After installation, the onboarding flow will automatically start to help you configure GitHub OAuth and Jira integration.
 
-This will:
-1. Detect your React project
-2. Auto-integrate the commenting system into your App component
-3. You're done! Start your dev server and click anywhere to add comments
+## Features
 
-## How It Works
+- **GitHub Integration**: Comments sync to GitHub Issues
+- **Jira Integration**: Link Jira tickets to pages/sections
+- **Details Tab**: Store design goals and context
+- **Floating Widget**: Draggable commenting interface
+- **PatternFly Seed**: Auto-detects and integrates with PF Seed projects
 
-All comments are stored locally in your browser's localStorage. They persist across:
-- Page refreshes
-- Browser restarts
-- Dev server restarts
+## Requirements
 
-Perfect for:
-- Local prototyping
-- Design reviews
-- Quick feedback sessions
-- Testing before adding a backend
+- PatternFly Seed project
+- GitHub account with OAuth app
+- Jira access (Red Hat Jira: issues.redhat.com)
 
 ## Usage
 
-Once installed, the commenting system provides two modes:
-
-### View Mode (Default)
-- Click the "Show Pins" toggle to see existing comment pins
-- Click on pins to view threads and replies
-- Read-only, no editing
-
-### Comment Mode
-- Click "Enable Commenting" to enter edit mode
-- Your cursor becomes a crosshair
-- Click anywhere to create a new comment thread
-- Click pins to add replies, edit, or delete
-
-### Keyboard Shortcuts
-- Press `Enter` in the comment textarea to submit
-- Press `Esc` to close the comment drawer
-
-## Manual Integration
-
-If the CLI doesn't work for your project, you can manually integrate:
-
-```tsx
-import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
-import {
-  CommentProvider,
-  CommentOverlay,
-  CommentDrawer,
-  VersionProvider
-} from 'hale-commenting-system';
-
-function App() {
-  const [selectedThreadId, setSelectedThreadId] = React.useState<string | null>(null);
-
-  return (
-    <Router>
-      <VersionProvider>
-        <CommentProvider>
-          <CommentDrawer 
-            selectedThreadId={selectedThreadId} 
-            onThreadSelect={setSelectedThreadId}
-          >
-            <CommentOverlay 
-              selectedThreadId={selectedThreadId} 
-              onThreadSelect={setSelectedThreadId}
-            />
-            {/* Your app content */}
-          </CommentDrawer>
-        </CommentProvider>
-      </VersionProvider>
-    </Router>
-  );
-}
-```
-
-## API
-
-### `<CommentProvider>`
-Root provider that manages comment state and localStorage persistence.
-
-### `<CommentOverlay>`
-Invisible overlay that handles click events for creating new comments.
-
-**Props:**
-- `selectedThreadId: string | null` - Currently selected thread ID
-- `onThreadSelect: (id: string | null) => void` - Callback when a thread is selected
-
-### `<CommentDrawer>`
-Sidebar drawer that displays the selected thread and its replies.
+The package will automatically guide you through setup on installation. For manual setup, run:
 
-**Props:**
-- `selectedThreadId: string | null` - Thread to display
-- `onThreadSelect: (id: string | null) => void` - Callback to close the drawer
-- `children: React.ReactNode` - Your app content
-
-### `useComments()` Hook
-
-Access comment state and actions:
-
-```tsx
-import { useComments } from 'hale-commenting-system';
-
-function MyComponent() {
-  const {
-    threads,              // All comment threads
-    showPins,             // Whether pins are visible
-    enableCommenting,     // Whether commenting mode is active
-    toggleShowPins,       // Toggle pin visibility
-    toggleEnableCommenting, // Toggle commenting mode
-    addThread,            // Create a new thread
-    addReply,             // Add a reply to a thread
-    updateComment,        // Update a comment
-    deleteComment,        // Delete a comment
-    deleteThread,         // Delete a thread
-    clearAllThreads,      // Clear all comments
-    getThreadsForRoute    // Get comments for current route
-  } = useComments();
-}
-```
-
-## Version Management
-
-The system supports filtering comments by version (useful for iterating on prototypes):
-
-```tsx
-import { VersionProvider, useVersion } from 'hale-commenting-system';
-
-function App() {
-  return (
-    <VersionProvider>
-      <CommentProvider>
-        {/* Your app */}
-      </CommentProvider>
-    </VersionProvider>
-  );
-}
-
-// In your component
-function MyComponent() {
-  const { currentVersion, setCurrentVersion } = useVersion();
-  
-  // Comments are automatically filtered by version
-  return (
-    <select value={currentVersion} onChange={(e) => setCurrentVersion(e.target.value)}>
-      <option value="1">Version 1</option>
-      <option value="2">Version 2</option>
-      <option value="3">Version 3 (current)</option>
-    </select>
-  );
-}
-```
-
-## TypeScript
-
-The package includes full TypeScript definitions:
-
-```tsx
-import type { Thread, Comment } from 'hale-commenting-system';
-
-interface Thread {
-  id: string;
-  x: number;
-  y: number;
-  route: string;
-  comments: Comment[];
-  version?: string;
-}
-
-interface Comment {
-  id: string;
-  author?: string;
-  text: string;
-  createdAt: string;
-}
+```bash
+npx hale-commenting-system init
 ```
 
-## Browser Compatibility
-
-Works in all modern browsers that support:
-- localStorage
-- React 18+
-- ES2020+
-
-## Roadmap
-
-This is the MVP (local-only) version. Future enhancements:
-- [ ] Backend sync (GitHub Issues, GitLab, custom)
-- [ ] OAuth authentication
-- [ ] Real-time collaboration
-- [ ] Export/import comments
-- [ ] Comment notifications
-- [ ] Rich text editing
-- [ ] File attachments
-
 ## License
 
 MIT
 
-## Author
-
-Justin Hale

package/bin/detect.d.ts

@@ -0,0 +1 @@
+export declare function detectPatternFlySeed(): boolean;

package/bin/detect.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.detectPatternFlySeed = detectPatternFlySeed;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+function detectPatternFlySeed() {
+    const cwd = process.cwd();
+    // Check for webpack config files
+    const hasWebpack = fs.existsSync(path.join(cwd, 'webpack.config.js')) ||
+        fs.existsSync(path.join(cwd, 'webpack.dev.js')) ||
+        fs.existsSync(path.join(cwd, 'webpack.common.js'));
+    // Check for src/app directory
+    const hasAppDir = fs.existsSync(path.join(cwd, 'src', 'app'));
+    // Check for PatternFly dependencies in package.json
+    let hasPatternFly = false;
+    try {
+        const packageJsonPath = path.join(cwd, 'package.json');
+        if (fs.existsSync(packageJsonPath)) {
+            const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+            const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+            hasPatternFly = !!(deps['@patternfly/react-core'] ||
+                deps['@patternfly/react-icons']);
+        }
+    }
+    catch {
+        // Ignore errors
+    }
+    return hasWebpack && hasAppDir && hasPatternFly;
+}

package/bin/generators.d.ts

@@ -0,0 +1,18 @@
+interface GitHubConfig {
+    clientId: string;
+    clientSecret: string;
+    owner: string;
+    repo: string;
+}
+interface JiraConfig {
+    baseUrl: string;
+    apiToken: string;
+    email?: string;
+}
+interface Config {
+    github: GitHubConfig;
+    jira: JiraConfig;
+}
+export declare function generateFiles(config: Config): Promise<void>;
+export declare function integrateIntoProject(): Promise<void>;
+export {};

package/bin/generators.js

@@ -0,0 +1,193 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateFiles = generateFiles;
+exports.integrateIntoProject = integrateIntoProject;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+async function generateFiles(config) {
+    const cwd = process.cwd();
+    // Generate .env file (client-safe)
+    const envPath = path.join(cwd, '.env');
+    const envContent = `# GitHub OAuth (client-side; safe to expose)
+VITE_GITHUB_CLIENT_ID=${config.github.clientId}
+
+# Target repo for Issues/Comments
+VITE_GITHUB_OWNER=${config.github.owner}
+VITE_GITHUB_REPO=${config.github.repo}
+
+# Jira Base URL
+VITE_JIRA_BASE_URL=${config.jira.baseUrl}
+`;
+    // Check if .env exists and append or create
+    if (fs.existsSync(envPath)) {
+        const existing = fs.readFileSync(envPath, 'utf-8');
+        // Only add if not already present
+        if (!existing.includes('VITE_GITHUB_CLIENT_ID')) {
+            fs.appendFileSync(envPath, '\n' + envContent);
+            console.log('   ✅ Updated .env file');
+        }
+        else {
+            console.log('   ⚠️  .env already contains commenting system config');
+        }
+    }
+    else {
+        fs.writeFileSync(envPath, envContent);
+        console.log('   ✅ Created .env file');
+    }
+    // Generate .env.server file (secrets)
+    const envServerPath = path.join(cwd, '.env.server');
+    let envServerContent = `# GitHub OAuth Client Secret (server-only)
+GITHUB_CLIENT_SECRET=${config.github.clientSecret}
+
+# Jira API Token (server-only)
+JIRA_API_TOKEN=${config.jira.apiToken}
+`;
+    if (config.jira.email) {
+        envServerContent += `JIRA_EMAIL=${config.jira.email}\n`;
+    }
+    if (fs.existsSync(envServerPath)) {
+        const existing = fs.readFileSync(envServerPath, 'utf-8');
+        if (!existing.includes('GITHUB_CLIENT_SECRET')) {
+            fs.appendFileSync(envServerPath, '\n' + envServerContent);
+            console.log('   ✅ Updated .env.server file');
+        }
+        else {
+            console.log('   ⚠️  .env.server already contains commenting system config');
+        }
+    }
+    else {
+        fs.writeFileSync(envServerPath, envServerContent);
+        console.log('   ✅ Created .env.server file');
+    }
+    // Ensure .env.server is in .gitignore
+    const gitignorePath = path.join(cwd, '.gitignore');
+    if (fs.existsSync(gitignorePath)) {
+        const gitignore = fs.readFileSync(gitignorePath, 'utf-8');
+        if (!gitignore.includes('.env.server')) {
+            fs.appendFileSync(gitignorePath, '\n.env.server\n');
+            console.log('   ✅ Added .env.server to .gitignore');
+        }
+    }
+    else {
+        fs.writeFileSync(gitignorePath, '.env.server\n');
+        console.log('   ✅ Created .gitignore with .env.server');
+    }
+}
+async function integrateIntoProject() {
+    const cwd = process.cwd();
+    const webpackDevPath = path.join(cwd, 'webpack.dev.js');
+    if (!fs.existsSync(webpackDevPath)) {
+        console.error('   ❌ webpack.dev.js not found. Cannot auto-integrate.');
+        return;
+    }
+    // Read webpack.dev.js
+    let webpackContent = fs.readFileSync(webpackDevPath, 'utf-8');
+    // Check if already integrated
+    if (webpackContent.includes('/api/github-oauth-callback') || webpackContent.includes('/api/jira-issue')) {
+        console.log('   ⚠️  webpack.dev.js already appears to have commenting system integration');
+        return;
+    }
+    // Read the template
+    // In compiled output, templates will be in the package root
+    const packageRoot = path.resolve(__dirname, '../../..');
+    const templatePath = path.join(packageRoot, 'templates', 'webpack-middleware.js');
+    if (!fs.existsSync(templatePath)) {
+        console.log('   ⚠️  Template file not found. Manual integration required.');
+        console.log('   See README for webpack.dev.js integration instructions.\n');
+        return;
+    }
+    const templateContent = fs.readFileSync(templatePath, 'utf-8');
+    // Find the setupMiddlewares function and inject our code
+    // Look for: setupMiddlewares: (middlewares, devServer) => {
+    const setupMiddlewaresRegex = /(setupMiddlewares\s*:\s*\([^)]+\)\s*=>\s*\{)/;
+    const match = webpackContent.match(setupMiddlewaresRegex);
+    if (!match) {
+        console.log('   ⚠️  Could not find setupMiddlewares in webpack.dev.js');
+        console.log('   📋 Manual integration required. See templates/webpack-middleware.js\n');
+        return;
+    }
+    // Find where to inject (after express.json() setup, before return middlewares)
+    const expressJsonMatch = webpackContent.match(/devServer\.app\.use\(express\.json\(\)\);/);
+    if (expressJsonMatch) {
+        // Inject after express.json()
+        const insertIndex = expressJsonMatch.index + expressJsonMatch[0].length;
+        const before = webpackContent.substring(0, insertIndex);
+        const after = webpackContent.substring(insertIndex);
+        // Extract just the middleware code from template (skip comments)
+        const middlewareCode = templateContent
+            .replace(/^\/\/.*$/gm, '') // Remove comment lines
+            .trim()
+            .split('\n')
+            .filter(line => line.trim() && !line.trim().startsWith('//'))
+            .join('\n');
+        webpackContent = before + '\n\n' + middlewareCode + '\n' + after;
+        fs.writeFileSync(webpackDevPath, webpackContent);
+        console.log('   ✅ Updated webpack.dev.js with server middleware');
+    }
+    else {
+        // Try to inject at the beginning of setupMiddlewares
+        const insertIndex = match.index + match[0].length;
+        const before = webpackContent.substring(0, insertIndex);
+        const after = webpackContent.substring(insertIndex);
+        // Add dotenv loading and express setup if not present
+        let middlewareCode = templateContent.trim();
+        // Check if dotenv is already loaded
+        if (!webpackContent.includes('dotenv.config')) {
+            middlewareCode = `// Load env vars for local OAuth/token exchange
+try {
+  const dotenv = require('dotenv');
+  dotenv.config({ path: path.resolve(__dirname, '.env') });
+  dotenv.config({ path: path.resolve(__dirname, '.env.server'), override: true });
+} catch (e) {
+  // no-op
+}
+
+const express = require('express');
+devServer.app.use(express.json());
+
+` + middlewareCode;
+        }
+        else if (!webpackContent.includes('express.json()')) {
+            middlewareCode = `const express = require('express');
+devServer.app.use(express.json());
+
+` + middlewareCode;
+        }
+        webpackContent = before + '\n\n' + middlewareCode + '\n' + after;
+        fs.writeFileSync(webpackDevPath, webpackContent);
+        console.log('   ✅ Updated webpack.dev.js with server middleware');
+    }
+}

package/bin/hale-commenting.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+require('./index.js');
+

package/bin/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/bin/index.js

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const detect = __importStar(require("./detect"));
+const onboarding = __importStar(require("./onboarding"));
+const args = process.argv.slice(2);
+const command = args[0] || 'init';
+async function main() {
+    if (command === 'init') {
+        // Check if we're in a PatternFly Seed project
+        const isPFSeed = detect.detectPatternFlySeed();
+        if (!isPFSeed) {
+            console.error('❌ Error: This package is designed for PatternFly Seed projects.');
+            console.error('Please run this command from a PatternFly Seed project directory.');
+            process.exit(1);
+        }
+        console.log('🚀 Hale Commenting System - Onboarding\n');
+        await onboarding.runOnboarding();
+    }
+    else {
+        console.log('Usage: hale-commenting-system [init]');
+        process.exit(1);
+    }
+}
+main().catch((error) => {
+    console.error('❌ Error:', error.message);
+    process.exit(1);
+});

package/bin/onboarding.d.ts

@@ -0,0 +1 @@
+export declare function runOnboarding(): Promise<void>;