@crownpeak/dqm-react-component 1.0.1 → 1.2.0

package/DEVELOPMENT.md

@@ -1,339 +0,0 @@
-# Development Guide
-
-## Running the Complete Stack
-
-### Start Development (Frontend + Backend)
-
-```bash
-npm run dev
-```
-
-This runs both servers concurrently:
-- **Frontend (Vite)**: http://localhost:5173
-- **Backend (Express)**: http://localhost:3001
-
-### Start Individual Servers
-
-```bash
-# Frontend only
-npm run dev:client
-
-# Backend only
-npm run dev:server
-```
-
-## Project Structure
-
-```
-crownpeak-dqm-react-component/
-├── src/                          # React component source
-│   ├── components/
-│   │   ├── auth/                # Authentication components
-│   │   ├── sidebar/             # Sidebar UI components
-│   │   ├── cards/               # Analysis result cards
-│   │   ├── renderers/           # HTML rendering
-│   │   └── common/              # Shared components
-│   ├── utils/                   # Utilities
-│   ├── types.ts                 # TypeScript types
-│   ├── DQMSidebar.tsx          # Main component
-│   ├── index.ts                # Library entry point
-│   ├── App.tsx                 # Dev test harness
-│   └── main.tsx                # Dev app entry
-│
-├── server/                      # Backend API
-│   ├── routes/                 # API endpoints
-│   │   ├── auth.ts            # Authentication
-│   │   └── dqm.ts             # DQM proxy
-│   ├── services/              # Business logic
-│   │   ├── sessionStore.ts   # Session management
-│   │   └── dqmClient.ts      # DQM API client
-│   ├── middleware/            # Express middleware
-│   ├── config.ts              # Configuration
-│   ├── types.ts               # TypeScript types
-│   └── index.ts               # Express app
-│
-├── dist/                       # Build output
-│   ├── index.js               # Library ESM
-│   ├── index.cjs              # Library CommonJS
-│   ├── index.d.ts             # Type declarations
-│   └── server/                # Compiled server code
-│
-├── vite.config.ts             # Vite configuration
-├── tsconfig.json              # TypeScript base config
-├── tsconfig.lib.json          # Library build config
-├── tsconfig.server.json       # Server build config
-└── package.json               # Dependencies & scripts
-```
-
-## Authentication Modes
-
-The component supports two modes:
-
-### 1. Backend Mode (Recommended for Production)
-
-```tsx
-<DQMSidebar
-  config={{
-    authBackendUrl: 'http://localhost:3001',
-    useLocalStorage: true,
-  }}
-/>
-```
-
-- All API calls proxied through backend
-- Session token stored in localStorage
-- Real credentials never exposed to client
-
-### 2. Direct Mode (Development/Staging)
-
-```tsx
-<DQMSidebar
-  config={{
-    apiKey: 'YOUR_API_KEY',
-    websiteId: 'YOUR_WEBSITE_ID',
-  }}
-/>
-```
-
-- Direct communication with Crownpeak DQM API
-- Credentials in props or localStorage
-- No backend required
-
-## Testing Both Modes
-
-### Test Backend Mode
-
-1. Start both servers: `npm run dev`
-2. Open http://localhost:5173
-3. Click "Login" and enter credentials
-4. Backend validates and issues session token
-5. All API calls go through http://localhost:3001
-
-### Test Direct Mode
-
-1. Update `src/App.tsx`:
-```tsx
-<DQMSidebar
-  config={{
-    apiKey: 'YOUR_API_KEY',
-    websiteId: 'YOUR_WEBSITE_ID',
-  }}
-/>
-```
-
-2. Start frontend only: `npm run dev:client`
-3. No backend needed, direct API calls
-
-## Building for Production
-
-### Build Library
-
-```bash
-npm run build:lib
-```
-
-Output: `dist/index.{js,cjs,d.ts}`
-
-### Build Server
-
-```bash
-npm run build:server
-```
-
-Output: `dist/server/`
-
-### Test Library Build
-
-```bash
-npm pack
-# Creates: crownpeak-dqm-react-component-1.0.0.tgz
-```
-
-## Environment Configuration
-
-### Frontend (.env)
-
-```env
-VITE_BACKEND_URL=http://localhost:3001
-```
-
-### Backend (.env)
-
-```env
-PORT=3001
-CORS_ORIGINS=http://localhost:5173,http://localhost:3000
-DQM_API_BASE_URL=https://api.crownpeak.net/dqm-cms/v1
-JWT_SECRET=your-secret-key
-```
-
-## API Testing with cURL
-
-### Login
-
-```bash
-curl -X POST http://localhost:3001/auth/login \
-  -H "Content-Type: application/json" \
-  -d '{
-    "apiKey": "YOUR_API_KEY",
-    "websiteId": "YOUR_WEBSITE_ID"
-  }'
-```
-
-Response:
-```json
-{
-  "sessionToken": "abc123...",
-  "websiteId": "YOUR_WEBSITE_ID"
-}
-```
-
-### Start Analysis
-
-```bash
-curl -X POST http://localhost:3001/dqm/assets \
-  -H "Authorization: Bearer YOUR_SESSION_TOKEN" \
-  -H "Content-Type: application/json" \
-  -d '{
-    "html": "<html><body><h1>Test</h1></body></html>",
-    "url": "https://example.com"
-  }'
-```
-
-### Get Results
-
-```bash
-curl -X GET http://localhost:3001/dqm/assets/ASSET_ID \
-  -H "Authorization: Bearer YOUR_SESSION_TOKEN"
-```
-
-## Debugging
-
-### Enable Verbose Logging
-
-Backend logs all requests automatically. Check terminal output:
-
-```
-[2025-10-31T10:00:00.000Z] POST /auth/login
-[Auth] User logged in successfully (websiteId: test_id)
-[SessionStore] Created session: abc12345... (expires in 1440 minutes)
-```
-
-### Check Session Status
-
-```bash
-curl -X GET http://localhost:3001/auth/session \
-  -H "Authorization: Bearer YOUR_SESSION_TOKEN"
-```
-
-### View Active Sessions (Dev Only)
-
-Add to `server/routes/auth.ts`:
-
-```typescript
-authRouter.get('/sessions/count', (req, res) => {
-  res.json({ count: sessionStore.count() });
-});
-```
-
-## Common Issues
-
-### CORS Errors
-
-**Problem:** Frontend can't reach backend
-
-**Solution:** Add frontend URL to `CORS_ORIGINS` in `.env`:
-```env
-CORS_ORIGINS=http://localhost:5173,http://localhost:3000
-```
-
-### Port Already in Use
-
-**Problem:** `Error: listen EADDRINUSE: address already in use :::3001`
-
-**Solution:** Kill process or change port:
-```bash
-lsof -ti:3001 | xargs kill -9
-# or change PORT in .env
-```
-
-### Session Expired
-
-**Problem:** 401 Unauthorized after some time
-
-**Solution:** Session TTL is 24 hours. Login again or extend TTL in `server/config.ts`:
-```typescript
-session: {
-  ttl: 48 * 60 * 60 * 1000, // 48 hours
-}
-```
-
-### TypeScript Errors
-
-**Problem:** Type errors in server code
-
-**Solution:** Ensure @types packages installed:
-```bash
-npm install --save-dev @types/express @types/cors @types/node
-```
-
-## Production Deployment
-
-### Deploy Backend
-
-1. Build server: `npm run build:server`
-2. Copy `dist/server/` to production
-3. Set environment variables
-4. Install production dependencies only
-5. Start: `node dist/server/index.js`
-
-### Use Redis for Sessions
-
-Replace `server/services/sessionStore.ts` with Redis:
-
-```typescript
-import { createClient } from 'redis';
-
-const redis = createClient({
-  url: process.env.REDIS_URL
-});
-
-await redis.connect();
-
-export const sessionStore = {
-  create: async (apiKey, websiteId) => {
-    const token = generateToken();
-    await redis.setEx(`session:${token}`, 86400, JSON.stringify({
-      apiKey, websiteId, createdAt: Date.now()
-    }));
-    return token;
-  },
-  get: async (token) => {
-    const data = await redis.get(`session:${token}`);
-    return data ? JSON.parse(data) : null;
-  },
-  delete: async (token) => {
-    await redis.del(`session:${token}`);
-  }
-};
-```
-
-### Add Rate Limiting
-
-```bash
-npm install express-rate-limit
-```
-
-```typescript
-import rateLimit from 'express-rate-limit';
-
-const limiter = rateLimit({
-  windowMs: 15 * 60 * 1000, // 15 minutes
-  max: 100 // limit each IP to 100 requests per windowMs
-});
-
-app.use('/auth/login', limiter);
-```
-
-## License
-
-MIT

package/EXAMPLES.md

@@ -1,194 +0,0 @@
-# Example Usage
-
-This directory contains example implementations of the `@crownpeak/dqm-react-component`.
-
-## Basic React App Example
-
-```tsx
-import React, {useState} from 'react';
-import {DQMSidebar} from '@crownpeak/dqm-react-component';
-
-function App() {
-    const [sidebarOpen, setSidebarOpen] = useState(false);
-
-    // Set DQM credentials (e.g., from environment variables)
-    React.useEffect(() => {
-        localStorage.setItem('dqm_apiKey', process.env.REACT_APP_DQM_API_KEY);
-        localStorage.setItem('dqm_websiteID', process.env.REACT_APP_DQM_WEBSITE_ID);
-    }, []);
-
-    return (
-        <div>
-            <h1>My Application with DQM</h1>
-            <p>This page is monitored by Crownpeak DQM for quality assurance.</p>
-
-            <DQMSidebar
-                open={sidebarOpen}
-                onClose={() => setSidebarOpen(false)}
-                onOpen={() => setSidebarOpen(true)}
-            />
-        </div>
-    );
-}
-
-export default App;
-```
-
-## Next.js Example
-
-```tsx
-// pages/_app.tsx
-import type {AppProps} from 'next/app';
-import {useEffect, useState} from 'react';
-import {DQMSidebar} from '@crownpeak/dqm-react-component';
-import {createTheme} from '@mui/material/styles';
-
-const theme = createTheme();
-
-function MyApp({Component, pageProps}: AppProps) {
-    const [sidebarOpen, setSidebarOpen] = useState(false);
-
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            localStorage.setItem('dqm_apiKey', process.env.NEXT_PUBLIC_DQM_API_KEY!);
-            localStorage.setItem('dqm_websiteID', process.env.NEXT_PUBLIC_DQM_WEBSITE_ID!);
-        }
-    }, []);
-
-    return (
-        <>
-            <Component {...pageProps} />
-            <DQMSidebar
-                open={sidebarOpen}
-                onClose={() => setSidebarOpen(false)}
-                onOpen={() => setSidebarOpen(true)}
-            />
-        </>
-    );
-}
-
-export default MyApp;
-```
-
-## TypeScript Example with Custom Configuration
-
-```tsx
-import React, { useState, useCallback } from 'react';
-import { DQMSidebar, ErrorBoundary } from '@crownpeak/dqm-react-component';
-import type { DQMSidebarProps } from '@crownpeak/dqm-react-component';
-
-interface DQMConfig {
-  apiKey: string;
-  websiteId: string;
-  enabled: boolean;
-}
-
-const config: DQMConfig = {
-  apiKey: process.env.REACT_APP_DQM_API_KEY!,
-  websiteId: process.env.REACT_APP_DQM_WEBSITE_ID!,
-  enabled: process.env.NODE_ENV === 'production'
-};
-
-function App() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  React.useEffect(() => {
-    if (config.enabled) {
-      localStorage.setItem('dqm_apiKey', config.apiKey);
-      localStorage.setItem('dqm_websiteID', config.websiteId);
-    }
-  }, []);
-
-  const handleOpen = useCallback(() => {
-    setSidebarOpen(true);
-  }, []);
-
-  const handleClose = useCallback(() => {
-    setSidebarOpen(false);
-  }, []);
-
-  if (!config.enabled) {
-    return <div>DQM is disabled in this environment</div>;
-  }
-
-  return (
-    <ErrorBoundary>
-      <div>
-        <h1>App with DQM Quality Monitoring</h1>
-        <DQMSidebar
-          open={sidebarOpen}
-          onClose={handleClose}
-          onOpen={handleOpen}
-        />
-      </div>
-    </ErrorBoundary>
-  );
-}
-
-export default App;
-```
-
-## Conditional Rendering (Development Only)
-
-```tsx
-import React from 'react';
-import { DQMSidebar } from '@crownpeak/dqm-react-component';
-
-function App() {
-  const [sidebarOpen, setSidebarOpen] = React.useState(false);
-  const isDevelopment = process.env.NODE_ENV === 'development';
-
-  return (
-    <div>
-      <h1>My App</h1>
-      
-      {/* Only show DQM in development */}
-      {isDevelopment && (
-        <DQMSidebar
-          open={sidebarOpen}
-          onClose={() => setSidebarOpen(false)}
-          onOpen={() => setSidebarOpen(true)}
-        />
-      )}
-    </div>
-  );
-}
-```
-
-## With Custom Button Trigger
-
-```tsx
-import React, { useState } from 'react';
-import { DQMSidebar } from '@crownpeak/dqm-react-component';
-import { Button } from '@mui/material';
-import { Assessment } from '@mui/icons-material';
-
-function App() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  return (
-    <div>
-      <header>
-        <Button
-          variant="outlined"
-          startIcon={<Assessment />}
-          onClick={() => setSidebarOpen(true)}
-        >
-          Quality Check
-        </Button>
-      </header>
-
-      <main>
-        <h1>Content</h1>
-      </main>
-
-      <DQMSidebar
-        open={sidebarOpen}
-        onClose={() => setSidebarOpen(false)}
-        onOpen={() => setSidebarOpen(true)}
-      />
-    </div>
-  );
-}
-```
-

package/QUICKSTART.md

@@ -1,200 +0,0 @@
-# 🚀 Quick Start Guide
-
-## Installation
-
-```bash
-npm install
-```
-
-## Build
-
-```bash
-npm run build
-```
-
-## Start Development
-
-```bash
-npm run dev
-```
-
-This starts:
-- ✅ **Frontend**: http://localhost:5173 (Vite Dev Server)
-- ✅ **Backend**: http://localhost:3001 (Express API)
-
-## Test the Integration
-
-### 1. Open Frontend
-Navigate to http://localhost:5173
-
-### 2. Configure Backend Mode
-The test harness is already configured to use the backend:
-
-```tsx
-config={{
-  authBackendUrl: 'http://localhost:3001',
-  useLocalStorage: true,
-}}
-```
-
-### 3. Login with Credentials
-- Enter your Crownpeak DQM API Key
-- Enter your Website ID
-- Click "Continue"
-
-The backend will:
-1. Validate credentials with Crownpeak DQM API
-2. Issue a session token
-3. Store token in localStorage
-
-### 4. Analyze HTML
-- Paste HTML in the editor
-- Click "Start Analysis"
-- All requests go through `http://localhost:3001/dqm/*`
-
-## Architecture
-
-```mermaid
-graph LR
-A[React App<br/>Port 5173]
-B[Express API<br/>Port 3001]
-C[Crownpeak DQM<br/>API]
-
-    A -->|HTTP Requests| B
-    B -->|Proxied Requests| C
-    
-    A -.->|sessionToken<br/>localStorage| A
-    B -.->|apiKey + websiteId<br/>in-memory · Redis-ready| B
-    
-    subgraph Frontend
-        A
-        A1[DQMSidebar]
-        A2[Login UI]
-        A3[HTML Editor]
-    end
-    
-    subgraph Backend
-        B
-        B1[Auth Routes]
-        B2[DQM Proxy]
-        B3[Sessions]
-    end
-    
-    subgraph External
-        C
-        C1[Analysis]
-        C2[Highlights]
-        C3[Checkpoints]
-    end
-```
-
-## Two Authentication Modes
-
-### Backend Mode (Production)
-```tsx
-config={{
-  authBackendUrl: 'http://localhost:3001',
-}}
-```
-- ✅ Secure session tokens
-- ✅ API keys never exposed to client
-- ✅ Centralized access control
-
-### Direct Mode (Development)
-```tsx
-config={{
-  apiKey: 'YOUR_API_KEY',
-  websiteId: 'YOUR_WEBSITE_ID',
-}}
-```
-- ✅ No backend required
-- ✅ Quick testing
-- ✅ Props or localStorage
-
-## API Endpoints
-
-### Authentication
-- `POST /auth/login` - Login with credentials
-- `POST /auth/logout` - Invalidate session
-- `GET /auth/session` - Get session info
-
-### DQM Proxy
-- `POST /dqm/assets` - Start analysis
-- `GET /dqm/assets/:id` - Get results
-- `GET /dqm/assets/:id/pagehighlight/all` - All highlights
-- `GET /dqm/assets/:id/pagehighlight/:cpId` - Single highlight
-
-All DQM endpoints require `Authorization: Bearer <sessionToken>`
-
-## Scripts
-
-```bash
-# Development
-npm run dev              # Start both servers
-npm run dev:client       # Frontend only
-npm run dev:server       # Backend only
-
-# Build
-npm run build            # Build all
-npm run build:lib        # Build React library
-npm run build:server     # Build Express server
-
-# Production
-npm run start:server     # Run built server
-```
-
-## Environment Setup
-
-Copy `.env.example` to `.env`:
-
-```env
-PORT=3001
-CORS_ORIGINS=http://localhost:5173
-DQM_API_BASE_URL=https://api.crownpeak.net/dqm-cms/v1
-JWT_SECRET=your-secret-key
-```
-
-## Documentation
-
-- **[BACKEND-API.md](./BACKEND-API.md)** - Backend API specification
-- **[DEVELOPMENT.md](./DEVELOPMENT.md)** - Development guide
-- **[server/README.md](./server/README.md)** - Server documentation
-- **[AUTHENTICATION.md](./AUTHENTICATION.md)** - Auth flow details
-- **[EXAMPLES.md](./EXAMPLES.md)** - Integration examples
-
-## Testing
-
-### Test Backend Health
-```bash
-curl http://localhost:3001/health
-```
-
-### Test Login
-```bash
-curl -X POST http://localhost:3001/auth/login \
-  -H "Content-Type: application/json" \
-  -d '{"apiKey":"YOUR_KEY","websiteId":"YOUR_ID"}'
-```
-
-### Test Analysis
-```bash
-curl -X POST http://localhost:3001/dqm/assets \
-  -H "Authorization: Bearer YOUR_TOKEN" \
-  -H "Content-Type: application/json" \
-  -d '{"html":"<html><body>Test</body></html>"}'
-```
-
-## Features
-
-✅ **Modular Backend** - Express.js with clean architecture  
-✅ **Session Management** - In-memory store (Redis-ready)  
-✅ **DQM API Proxy** - All analysis endpoints  
-✅ **CORS & Security** - Helmet.js, CORS whitelist  
-✅ **Auto-reload** - TSX watch mode for development  
-✅ **Concurrent Servers** - Frontend + Backend in one command  
-✅ **TypeScript** - Full type safety  
-✅ **Error Handling** - Centralized middleware  
-
-## License
-
-MIT