hale-commenting-system 2.2.0 → 2.2.1

package/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run type-check:*)"
+    ]
+  }
+}

package/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.snap]
+max_line_length = off
+trim_trailing_whitespace = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.eslintrc.js

@@ -0,0 +1,75 @@
+module.exports = {
+  // tells eslint to use the TypeScript parser
+  "parser": "@typescript-eslint/parser",
+  // tell the TypeScript parser that we want to use JSX syntax
+  "parserOptions": {
+    "tsx": true,
+    "jsx": true,
+    "js": true,
+    "useJSXTextNode": true,
+    "project": "./tsconfig.json",
+    "tsconfigRootDir": "."
+  },
+  // we want to use the recommended rules provided from the typescript plugin
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "globals": {
+    "window": "readonly",
+    "describe": "readonly",
+    "test": "readonly",
+    "expect": "readonly",
+    "it": "readonly",
+    "process": "readonly",
+    "document": "readonly",
+    "insights": "readonly",
+    "shallow": "readonly",
+    "render": "readonly",
+    "mount": "readonly"
+  },
+  "overrides": [
+    {
+      "files": ["src/**/*.ts", "src/**/*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["@typescript-eslint"],
+      "extends": ["plugin:@typescript-eslint/recommended"],
+      "rules": {
+        "react/prop-types": "off",
+        "@typescript-eslint/no-unused-vars": "error"
+      },
+    },
+  ],
+  "settings": {
+    "react": {
+      "version": "^16.11.0"
+    }
+  },
+  // includes the typescript specific rules found here: https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules
+  "plugins": [
+    "@typescript-eslint",
+    "react-hooks",
+    "eslint-plugin-react-hooks"
+  ],
+  "rules": {
+    "sort-imports": [
+      "error",
+      {
+        "ignoreDeclarationSort": true
+      }
+    ],
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/interface-name-prefix": "off",
+    "prettier/prettier": "off",
+    "import/no-unresolved": "off",
+    "import/extensions": "off",
+    "react/prop-types": "off"
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  }
+}

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,23 @@
+---
+name: Bug report
+about: Create a report to help us improve the react seed
+title: ''
+labels: needs triage
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.

package/.github/workflows/ci.yaml

@@ -0,0 +1,51 @@
+name: CI
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+      - release*
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm install
+      - name: Run eslint
+        run: npm run lint
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm install
+      - name: Run tests
+        run: npm run test
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm install
+      - name: Attempt a build
+        run: npm run build

package/.prettierignore

@@ -0,0 +1 @@
+package.json

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "printWidth": 120
+}

package/GITHUB_OAUTH_ENV_TEMPLATE.md

@@ -0,0 +1,53 @@
+## GitHub OAuth + Issue Sync env vars (local dev)
+
+This project uses `dotenv-webpack`, which **inlines environment variables into the frontend bundle**.
+
+### Create a local `.env` file
+
+Create `patternfly-react-seed/.env` (this file is already in `.gitignore`):
+
+```sh
+# GitHub OAuth (client-side; safe to expose)
+VITE_GITHUB_CLIENT_ID=YOUR_GITHUB_OAUTH_CLIENT_ID
+
+# Target repo for Issues/Comments
+VITE_GITHUB_OWNER=JustinXHale
+VITE_GITHUB_REPO=pfseed-commenting-system
+```
+
+### Server-only secret (local dev)
+
+Create `patternfly-react-seed/.env.server` (also gitignored) and add:
+
+```sh
+GITHUB_CLIENT_SECRET=YOUR_GITHUB_OAUTH_CLIENT_SECRET
+```
+
+## Jira (issues.redhat.com) env vars (local dev)
+
+### Client-safe `.env`
+
+Add:
+
+```sh
+VITE_JIRA_BASE_URL=https://issues.redhat.com
+```
+
+### Server-only `.env.server`
+
+Add:
+
+```sh
+JIRA_EMAIL=YOUR_JIRA_ACCOUNT_EMAIL
+JIRA_API_TOKEN=YOUR_JIRA_API_TOKEN
+```
+
+### Important: do NOT put secrets in `.env`
+
+Do **NOT** put your GitHub OAuth **client secret** in `.env`.
+
+Because webpack injects these variables into the browser bundle, any secret placed in `.env` would be exposed to end users.
+
+When we wire up the OAuth code exchange step, the **client secret must live server-side** (Netlify/Vercel function environment variables, etc.).
+
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Red Hat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,38 +1,109 @@
-# Hale Commenting System
+# Patternfly Seed
 
-A commenting system for PatternFly Seed projects with GitHub and Jira integration.
+Patternfly Seed is an open source build scaffolding utility for web apps. The primary purpose of this project is to give developers a jump start when creating new projects that will use patternfly. A secondary purpose of this project is to serve as a reference for how to configure various aspects of an application that uses patternfly, webpack, react, typescript, etc.
 
-## Installation
+Out of the box you'll get an app layout with chrome (header/sidebar), routing, build pipeline, test suite, and some code quality tools. Basically, all the essentials.
+
+<img width="1058" alt="Out of box dashboard view of patternfly seed" src="https://github.com/user-attachments/assets/0227b366-67f1-4df8-8d92-e8e95d6e08b3" />
+
+## Quick-start
 
 ```bash
-npm install hale-commenting-system
+git clone https://github.com/patternfly/patternfly-react-seed
+cd patternfly-react-seed
+npm install && npm run start:dev
 ```
+## Development scripts
+```sh
+# Install development/build dependencies
+npm install
 
-After installation, the onboarding flow will automatically start to help you configure GitHub OAuth and Jira integration.
+# Start the development server
+npm run start:dev
 
-## Features
+# Run a production build (outputs to "dist" dir)
+npm run build
 
-- **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
+# Run the test suite
+npm run test
 
-## Requirements
+# Run the test suite with coverage
+npm run test:coverage
 
-- PatternFly Seed project with PatternFly v6+ (`@patternfly/react-core` ^6.0.0)
-- GitHub account with OAuth app
-- Jira access (Red Hat Jira: issues.redhat.com)
+# Run the linter
+npm run lint
 
-## Usage
+# Run the code formatter
+npm run format
 
-The package will automatically guide you through setup on installation. For manual setup, run:
+# Launch a tool to inspect the bundle size
+npm run bundle-profile:analyze
 
-```bash
-npx hale-commenting-system init
+# Start the express server (run a production build first)
+npm run start
+```
+
+## Configurations
+* [TypeScript Config](./tsconfig.json)
+* [Webpack Config](./webpack.common.js)
+* [Jest Config](./jest.config.js)
+* [Editor Config](./.editorconfig)
+
+## Raster image support
+
+To use an image asset that's shipped with PatternFly core, you'll prefix the paths with "@assets". `@assets` is an alias for the PatternFly assets directory in node_modules.
+
+For example:
+```js
+import imgSrc from '@assets/images/g_sizing.png';
+<img src={imgSrc} alt="Some image" />
+```
+
+You can use a similar technique to import assets from your local app, just prefix the paths with "@app". `@app` is an alias for the main src/app directory.
+
+```js
+import loader from '@app/assets/images/loader.gif';
+<img src={loader} alt="Content loading" />
 ```
 
-## License
+## Vector image support
+Inlining SVG in the app's markup is also possible.
+
+```js
+import logo from '@app/assets/images/logo.svg';
+<span dangerouslySetInnerHTML={{__html: logo}} />
+```
+
+You can also use SVG when applying background images with CSS. To do this, your SVG's must live under a `bgimages` directory (this directory name is configurable in [webpack.common.js](./webpack.common.js#L5)). This is necessary because you may need to use SVG's in several other context (inline images, fonts, icons, etc.) and so we need to be able to differentiate between these usages so the appropriate loader is invoked.
+```css
+body {
+  background: url(./assets/bgimages/img_avatar.svg);
+}
+```
+
+## Adding custom CSS
+When importing CSS from a third-party package for the first time, you may encounter the error `Module parse failed: Unexpected token... You may need an appropriate loader to handle this file typ...`. You need to register the path to the stylesheet directory in [stylePaths.js](./stylePaths.js). We specify these explicitly for performance reasons to avoid webpack needing to crawl through the entire node_modules directory when parsing CSS modules.
+
+## Code quality tools
+* For accessibility compliance, we use [react-axe](https://github.com/dequelabs/react-axe)
+* To keep our bundle size in check, we use [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
+* To keep our code formatting in check, we use [prettier](https://github.com/prettier/prettier)
+* To keep our code logic and test coverage in check, we use [jest](https://github.com/facebook/jest)
+* To ensure code styles remain consistent, we use [eslint](https://eslint.org/)
+
+## Multi environment configuration
+This project uses [dotenv-webpack](https://www.npmjs.com/package/dotenv-webpack) for exposing environment variables to your code. Either export them at the system level like `export MY_ENV_VAR=http://dev.myendpoint.com && npm run start:dev` or simply drop a `.env` file in the root that contains your key-value pairs like below:
+
+```sh
+ENV_1=http://1.myendpoint.com
+ENV_2=http://2.myendpoint.com
+```
+
+
+With that in place, you can use the values in your code like `console.log(process.env.ENV_1);`
+
+### GitHub OAuth / Issues env vars (local dev)
 
-MIT
+For the commenting system, see `GITHUB_OAUTH_ENV_TEMPLATE.md`.
 
+**Important:** because webpack injects `.env` values into the browser bundle, do **not** put secrets (like OAuth client secrets) into `.env`.

package/package.json

@@ -1,61 +1,85 @@
 {
   "name": "hale-commenting-system",
-  "version": "2.2.0",
-  "description": "Commenting system for PatternFly Seed projects with GitHub and Jira integration",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "version": "2.2.1",
+  "description": "An open source build scaffolding utility for web apps.",
+  "repository": "https://github.com/patternfly/patternfly-react-seed.git",
+  "homepage": "https://patternfly-react-seed.surge.sh",
+  "license": "MIT",
   "bin": {
-    "hale-commenting": "./bin/hale-commenting.js"
+    "hale-commenting-system": "./scripts/integrate.js"
   },
-  "files": [
-    "dist",
-    "bin",
-    "templates",
-    "README.md"
-  ],
   "scripts": {
-    "build": "tsc && npm run build:cli && npm run build:postinstall",
-    "build:cli": "tsc --project tsconfig.cli.json",
-    "build:postinstall": "tsc --project tsconfig.postinstall.json",
+    "prebuild": "npm run type-check && npm run clean",
+    "build": "webpack --config webpack.prod.js",
+    "start": "sirv dist --cors --single --host --port 8080",
+    "start:dev": "webpack serve --color --progress --config webpack.dev.js",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "eslint": "eslint --ext .tsx,.js ./src/",
+    "lint": "npm run eslint",
+    "format": "prettier --check --write ./src/**/*.{tsx,ts}",
     "type-check": "tsc --noEmit",
-    "prepublishOnly": "npm run build"
-  },
-  "postinstall": "node bin/postinstall.js",
-  "keywords": [
-    "commenting",
-    "feedback",
-    "patternfly",
-    "github",
-    "jira",
-    "uxd"
-  ],
-  "author": "Justin X. Hale",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/JustinXHale/pfseed-commenting-system.git"
+    "ci-checks": "npm run type-check && npm run lint && npm run test:coverage",
+    "build:bundle-profile": "webpack --config webpack.prod.js --profile --json > stats.json",
+    "bundle-profile:analyze": "npm run build:bundle-profile && webpack-bundle-analyzer ./stats.json",
+    "clean": "rimraf dist"
   },
-  "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": "^6.0.0 || ^7.0.0"
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "dotenv-webpack": "^8.1.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "html-webpack-plugin": "^5.6.3",
+    "imagemin": "^9.0.0",
+    "jsdom": "^25.0.1",
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "prop-types": "^15.8.1",
+    "raw-loader": "^4.0.2",
+    "react-axe": "^3.5.4",
+    "react-router-dom": "^7.1.0",
+    "regenerator-runtime": "^0.14.1",
+    "rimraf": "^6.0.1",
+    "style-loader": "^4.0.0",
+    "svg-url-loader": "^8.0.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "ts-loader": "^9.5.1",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "url-loader": "^4.1.1",
+    "vite": "^6.4.1",
+    "vitest": "^4.0.5",
+    "webpack": "^5.97.0",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.2.1",
+    "webpack-merge": "^6.0.1",
+    "@babel/core": "^7.23.0",
+    "@babel/traverse": "^7.23.0",
+    "@babel/generator": "^7.23.0",
+    "@babel/types": "^7.23.0"
   },
   "dependencies": {
-    "chalk": "^4.1.2",
-    "inquirer": "^9.3.8",
-    "node-fetch": "^2.7.0"
-  },
-  "devDependencies": {
-    "@types/inquirer": "^9.0.9",
-    "@types/node": "^20.19.27",
-    "@types/node-fetch": "^2.6.13",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
-    "typescript": "^5.9.3"
+    "@patternfly/react-core": "^6.4.0",
+    "@patternfly/react-icons": "^6.4.0",
+    "@patternfly/react-styles": "^6.4.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "sirv-cli": "^3.0.0"
   },
-  "engines": {
-    "node": ">=16.0.0"
-  }
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/scripts/README.md

@@ -0,0 +1,42 @@
+# Hale Commenting System - Integration Script
+
+This script automatically integrates the Hale Commenting System into a PatternFly React Seed project.
+
+## Usage
+
+After installing the package:
+
+```bash
+npm install hale-commenting-system
+npx hale-commenting-system init
+```
+
+## What it does
+
+The script automatically modifies three files:
+
+1. **src/app/index.tsx**
+   - Adds imports for `CommentProvider` and `GitHubAuthProvider`
+   - Wraps the Router with the providers
+
+2. **src/app/routes.tsx**
+   - Adds a "Comments" route group to the navigation
+
+3. **src/app/AppLayout/AppLayout.tsx**
+   - Adds imports for `CommentPanel` and `CommentOverlay`
+   - Wraps the Page content with CommentPanel and CommentOverlay
+
+## Requirements
+
+The script requires the following Babel packages (should be in devDependencies):
+- `@babel/core`
+- `@babel/traverse`
+- `@babel/generator`
+- `@babel/types`
+
+## Notes
+
+- The script is idempotent - it can be run multiple times safely
+- It detects if integration is already complete and skips those files
+- No backups are created (users should use git for version control)
+