fix: Cleaned up and refactor code.

.eslintrc.js

@@ -29,7 +29,7 @@ module.exports = {
   },
   "overrides": [
     {
-      "files": ["src/**/*.ts", "src/**/*.tsx"],
+      "files": ["src/**/*.ts", "src/**/*.tsx", "demo/**/*.ts", "demo/**/*.tsx"],
       "parser": "@typescript-eslint/parser",
       "plugins": ["@typescript-eslint"],
       "extends": ["plugin:@typescript-eslint/recommended"],

.gitignore

@@ -1,5 +1,6 @@
 **/node_modules
 dist
+demo/dist
 yarn-error.log
 yarn.lock
 stats.json

.npmignore

@@ -1,47 +1,36 @@
 # Dependencies
 node_modules/
 
-# Development files  
+# Demo app (not published)
+demo/
+
+# Development files
 *.md
 !README.md
 !LICENSE
 !GITHUB_OAUTH_ENV_TEMPLATE.md
 
-# Build files
+# Build artifacts
 dist/
+demo/dist/
 build/
 stats.json
+coverage/
 
 # Development configs
 .editorconfig
 .eslintrc.js
 .prettierignore
 .prettierrc
-webpack.dev.js
-webpack.common.js
 tsconfig.json
 vitest.config.ts
-stylePaths.js
-webpack.prod.js
-
-# Source files not needed in package
-src/app/Dashboard/
-src/app/NotFound/
-src/app/Settings/
-src/app/Support/
-src/app/app.css
-src/app/app.test.tsx
-src/app/bgimages/
-src/app/utils/
-src/favicon.png
-src/index.tsx
-src/typings.d.ts
 
 # Tests
 **/*.test.ts
 **/*.test.tsx
 **/*.spec.ts
 **/*.spec.tsx
+**/__snapshots__/
 
 # Git
 .git/

README.md

@@ -207,10 +207,17 @@ npm run start:dev
 
 ## Development
 
+This repository contains two parts:
+
+- **`src/commenting-system/`** — the npm package (published to npm)
+- **`demo/`** — a PatternFly demo app for local testing (not published)
+
 ```bash
 npm install          # Install dependencies
-npm run start:dev    # Start dev server
-npm run build        # Production build
+npm run start:dev    # Start demo dev server (http://localhost:9000)
+npm run build        # Build demo app to demo/dist
+npm run type-check   # Type-check the package
+npm run type-check:demo  # Type-check the demo app
 ```
 
 ## License

src/app/AppLayout/AppLayout.tsx → demo/src/app/AppLayout/AppLayout.tsx

@@ -19,7 +19,7 @@ import {
 } from '@patternfly/react-core';
 import { IAppRoute, IAppRouteGroup, routes } from '@app/routes';
 import { BarsIcon, ExternalLinkAltIcon, GithubIcon } from '@patternfly/react-icons';
-import { CommentPanel, useComments, useGitHubAuth } from '@app/commenting-system';
+import { CommentPanel, useComments, useGitHubAuth } from '@design-comments';
 
 interface IAppLayout {
   children: React.ReactNode;

src/app/Comments/Comments.tsx → demo/src/app/Comments/Comments.tsx

@@ -12,7 +12,7 @@ import {
   Title,
 } from '@patternfly/react-core';
 import { AngleDownIcon, AngleRightIcon, SearchIcon } from '@patternfly/react-icons';
-import { useComments } from '@app/commenting-system';
+import { useComments } from '@design-comments';
 
 const Comments: React.FunctionComponent = () => {
   const navigate = useNavigate();

src/app/index.tsx → demo/src/app/index.tsx

@@ -3,8 +3,8 @@ import '@patternfly/react-core/dist/styles/base.css';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { AppLayout } from '@app/AppLayout/AppLayout';
 import { AppRoutes } from '@app/routes';
-import { CommentProvider } from '@app/commenting-system';
-import { GitHubAuthProvider } from '@app/commenting-system';
+import { CommentProvider } from '@design-comments';
+import { GitHubAuthProvider } from '@design-comments';
 import '@app/app.css';
 
 const App: React.FunctionComponent = () => (

src/test/setup.ts → demo/src/test/setup.ts

@@ -21,13 +21,13 @@ global.ResizeObserver = class ResizeObserver {
   observe = vi.fn();
   unobserve = vi.fn();
   disconnect = vi.fn();
-  constructor(callback: ResizeObserverCallback) {}
+  constructor() {}
 };
 
 // Mock IntersectionObserver
 global.IntersectionObserver = class IntersectionObserver {
   observe = vi.fn();
   unobserve = vi.fn();
   disconnect = vi.fn();
-  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {}
-} as any;
+  constructor() {}
+} as unknown as typeof IntersectionObserver;

demo/stylePaths.js

@@ -0,0 +1,17 @@
+const path = require('path');
+const repoRoot = path.resolve(__dirname, '..');
+
+module.exports = {
+  stylePaths: [
+    path.resolve(__dirname, 'src'),
+    path.resolve(repoRoot, 'src/commenting-system'),
+    path.resolve(repoRoot, 'node_modules/patternfly'),
+    path.resolve(repoRoot, 'node_modules/@patternfly/patternfly'),
+    path.resolve(repoRoot, 'node_modules/@patternfly/react-styles/css'),
+    path.resolve(repoRoot, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
+    path.resolve(repoRoot, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
+    path.resolve(repoRoot, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
+    path.resolve(repoRoot, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
+    path.resolve(repoRoot, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css'),
+  ],
+};

demo/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "paths": {
+      "@app/*": ["src/app/*"],
+      "@design-comments": ["../src/commenting-system"],
+      "@design-comments/*": ["../src/commenting-system/*"],
+      "@assets/*": ["../node_modules/@patternfly/react-core/dist/styles/assets/*"]
+    },
+    "importHelpers": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}

webpack.common.js → demo/webpack.common.js

@@ -3,13 +3,17 @@
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
 const BG_IMAGES_DIRNAME = 'bgimages';
 const ASSET_PATH = process.env.ASSET_PATH || '/';
+const repoRoot = path.resolve(__dirname, '..');
+
 module.exports = (env) => {
   return {
+    entry: {
+      main: path.resolve(__dirname, 'src/index.tsx'),
+    },
     module: {
       rules: [
         {
@@ -20,21 +24,20 @@ module.exports = (env) => {
               options: {
                 transpileOnly: true,
                 experimentalWatchApi: true,
+                configFile: path.resolve(__dirname, 'tsconfig.json'),
               },
             },
           ],
         },
         {
           test: /\.(svg|ttf|eot|woff|woff2)$/,
           type: 'asset/resource',
-          // only process modules with this loader
-          // if they live under a 'fonts' or 'pficon' directory
           include: [
-            path.resolve(__dirname, 'node_modules/patternfly/dist/fonts'),
-            path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/fonts'),
-            path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/pficon'),
-            path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/fonts'),
-            path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/pficon'),
+            path.resolve(repoRoot, 'node_modules/patternfly/dist/fonts'),
+            path.resolve(repoRoot, 'node_modules/@patternfly/react-core/dist/styles/assets/fonts'),
+            path.resolve(repoRoot, 'node_modules/@patternfly/react-core/dist/styles/assets/pficon'),
+            path.resolve(repoRoot, 'node_modules/@patternfly/patternfly/assets/fonts'),
+            path.resolve(repoRoot, 'node_modules/@patternfly/patternfly/assets/pficon'),
           ],
         },
         {
@@ -53,15 +56,11 @@ module.exports = (env) => {
         },
         {
           test: /\.svg$/,
-          // only process SVG modules with this loader if they live under a 'bgimages' directory
-          // this is primarily useful when applying a CSS background using an SVG
           include: (input) => input.indexOf(BG_IMAGES_DIRNAME) > -1,
           type: 'asset/inline',
         },
         {
           test: /\.svg$/,
-          // only process SVG modules with this loader when they don't live under a 'bgimages',
-          // 'fonts', or 'pficon' directory, those are handled with other loaders
           include: (input) =>
             input.indexOf(BG_IMAGES_DIRNAME) === -1 &&
             input.indexOf('fonts') === -1 &&
@@ -76,20 +75,21 @@ module.exports = (env) => {
           test: /\.(jpg|jpeg|png|gif)$/i,
           include: [
             path.resolve(__dirname, 'src'),
-            path.resolve(__dirname, 'node_modules/patternfly'),
-            path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/images'),
-            path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css/assets/images'),
-            path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/images'),
+            path.resolve(repoRoot, 'src/commenting-system'),
+            path.resolve(repoRoot, 'node_modules/patternfly'),
+            path.resolve(repoRoot, 'node_modules/@patternfly/patternfly/assets/images'),
+            path.resolve(repoRoot, 'node_modules/@patternfly/react-styles/css/assets/images'),
+            path.resolve(repoRoot, 'node_modules/@patternfly/react-core/dist/styles/assets/images'),
             path.resolve(
-              __dirname,
+              repoRoot,
               'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images'
             ),
             path.resolve(
-              __dirname,
+              repoRoot,
               'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images'
             ),
             path.resolve(
-              __dirname,
+              repoRoot,
               'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images'
             ),
           ],
@@ -113,18 +113,13 @@ module.exports = (env) => {
     },
     plugins: [
       new HtmlWebpackPlugin({
-        template: path.resolve(__dirname, 'src', 'index.html'),
+        template: path.resolve(__dirname, 'src/index.html'),
       }),
       new Dotenv({
-        // IMPORTANT: do not inline system env vars into the browser bundle.
-        // Keep `.env` for public/client-side config only (e.g. VITE_GITHUB_CLIENT_ID).
-        // Server-side secrets should be provided via server runtime env (functions) instead.
+        path: path.resolve(repoRoot, '.env'),
         systemvars: false,
         silent: true,
       }),
-      new CopyPlugin({
-        patterns: [{ from: './src/favicon.png', to: 'images' }],
-      }),
       new webpack.DefinePlugin({
         'process.env.SUMMARIZE_API_URL': JSON.stringify(process.env.SUMMARIZE_API_URL || ''),
       }),
@@ -133,7 +128,7 @@ module.exports = (env) => {
       extensions: ['.js', '.ts', '.tsx', '.jsx'],
       plugins: [
         new TsconfigPathsPlugin({
-          configFile: path.resolve(__dirname, './tsconfig.json'),
+          configFile: path.resolve(__dirname, 'tsconfig.json'),
         }),
       ],
       symlinks: false,

webpack.dev.js → demo/webpack.dev.js

@@ -6,6 +6,7 @@ const common = require('./webpack.common.js');
 const { stylePaths } = require('./stylePaths');
 const HOST = process.env.HOST || 'localhost';
 const PORT = process.env.PORT || '9000';
+const repoRoot = path.resolve(__dirname, '..');
 
 module.exports = merge(common('development'), {
   mode: 'development',
@@ -32,9 +33,9 @@ module.exports = merge(common('development'), {
       try {
         // eslint-disable-next-line global-require
         const dotenv = require('dotenv');
-        const envResult = dotenv.config({ path: path.resolve(__dirname, '.env') });
+        const envResult = dotenv.config({ path: path.resolve(repoRoot, '.env') });
         // IMPORTANT: allow server-only secrets to override anything accidentally present in `.env` or the shell env.
-        const envServerResult = dotenv.config({ path: path.resolve(__dirname, '.env.server'), override: true });
+        const envServerResult = dotenv.config({ path: path.resolve(repoRoot, '.env.server'), override: true });
         if (envServerResult.error && envServerResult.error.code !== 'ENOENT') {
           // eslint-disable-next-line no-console
           console.warn('[Commenting System] Warning loading .env.server:', envServerResult.error.message);