@crownpeak/dqm-react-component 1.1.0 → 1.2.0

package/dist/utils/translationUtils.d.ts

@@ -0,0 +1,52 @@
+import { AnalysisData } from '../types';
+import { JsonChatClient } from './aiJsonClient';
+import { TranslationCache } from './translationCache';
+export type SummaryStats = {
+    chunked: boolean;
+    chunkCount: number;
+    totalFailed: number;
+    attempts: number;
+    emptyResponses: number;
+    fallbackUsed: 'none' | 'chunk' | 'single' | 'tiny' | 'fail';
+    modelId?: string;
+    targetLang?: string;
+    durationMs: number;
+};
+export type TranslationProgress = {
+    translatedCheckpoints: number;
+    totalCheckpoints: number;
+    isPartial: boolean;
+};
+export declare const summarizeDqmResults: (opts: {
+    client: JsonChatClient;
+    data: AnalysisData;
+    targetLanguage: string;
+    modelId?: string;
+    cache?: TranslationCache;
+    signal?: AbortSignal;
+}) => Promise<{
+    bullets: string[];
+    stats: SummaryStats;
+}>;
+export declare const translateDqmResults: (opts: {
+    client: JsonChatClient;
+    data: AnalysisData;
+    targetLanguage: string;
+    modelId: string;
+    cache?: TranslationCache;
+    computeBudgetMs?: number;
+    maxConcurrentBatches?: number;
+    maxItemsPerBatch?: number;
+    forceSerial?: boolean;
+    onProgress?: (progress: TranslationProgress) => void;
+    onBatchStatus?: (info: {
+        ids: string[];
+        status: "translating" | "done";
+    }) => void;
+    onPartialResult?: (data: AnalysisData) => void;
+    signal?: AbortSignal;
+}) => Promise<{
+    data: AnalysisData;
+    progress: TranslationProgress;
+}>;
+//# sourceMappingURL=translationUtils.d.ts.map

package/dist/utils/translationUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translationUtils.d.ts","sourceRoot":"","sources":["../../src/utils/translationUtils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,UAAU,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAQ3D,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAoPF,MAAM,MAAM,mBAAmB,GAAG;IAChC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AA0DF,eAAO,MAAM,mBAAmB,GAAU,MAAM;IAC9C,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,EAAE,YAAY,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,KAAG,OAAO,CAAC;IAAE,OAAO,EAAE,MAAM,EAAE,CAAC;IAAC,KAAK,EAAE,YAAY,CAAA;CAAE,CAgXrD,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAU,MAAM;IAC9C,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,EAAE,YAAY,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACrD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,EAAE,CAAC;QAAC,MAAM,EAAE,aAAa,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAClF,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,KAAG,OAAO,CAAC;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,QAAQ,EAAE,mBAAmB,CAAA;CAAE,CA6kBhE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crownpeak/dqm-react-component",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": false,
   "description": "A React component for Crownpeak Digital Quality Management (DQM) integration",
   "type": "module",
@@ -58,10 +58,10 @@
   },
   "homepage": "https://github.com/Crownpeak/dqm-react-component#readme",
   "scripts": {
-    "dev": "concurrently \"npm run dev:client\" \"npm run dev:server\"",
-    "dev:client": "vite",
-    "dev:server": "REDIS_URL=redis://localhost:6379 tsx watch server/index.ts",
-    "dev:auth-ui": "cd server-ui && vite",
+    "dev": "npm run build:auth-ui && npm run dev:client",
+    "dev:client": "vite --host 0.0.0.0",
+    "dev:server": "concurrently \"redis-server\" \"REDIS_URL=redis://localhost:6379 tsx watch server/index.ts\"",
+    "dev:auth-ui": "cd server-ui && vite --host 0.0.0.0",
     "build": "npm run build:lib && npm run build:widget && npm run build:server && npm run build:auth-ui",
     "build:lib": "tsc && vite build --mode library",
     "build:widget": "vite build --mode widget && cp src/html-pages/dqm-widget.d.ts dist/",
@@ -70,10 +70,30 @@
     "start": "npm run build && concurrently \"npm run start:server\" \"vite\"",
     "start:server": "REDIS_URL=redis://localhost:6379 node dist/server/index.js",
     "serve:widget": "npx serve -l 4173 -c serve.json",
-    "prepublishOnly": "npm run build && npm run lint",
+    "prepublishOnly": "npm run build && npm run lint && npm run test:ci",
     "lint": "eslint . || true",
-    "preview": "vite preview --host"
+    "preview": "vite preview --host",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:ci": "vitest run --reporter=verbose",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:debug": "playwright test --debug",
+    "wiki:build": "./scripts/wiki-build.sh",
+    "wiki:deploy": "./scripts/wiki-deploy.sh",
+    "setVersion": "npm version --workspaces --no-git-tag-version",
+    "licenses:generate": "generate-license-file --config .glfrc.json",
+    "licenses:check": "license-checker --onlyAllow 'MIT;ISC;Apache-2.0;BSD-2-Clause;BSD-3-Clause;0BSD;Unlicense;CC0-1.0;CC-BY-3.0;CC-BY-4.0;Python-2.0;BlueOak-1.0.0;Zlib;WTFPL' --production",
+    "licenses:check:all": "npm run licenses:check && npm run licenses:check --prefix mcp-server",
+    "licenses:check:ci": "npm run licenses:check:all || (echo 'License check failed! See above for incompatible licenses.' && exit 1)",
+    "prepare": "husky"
   },
+  "workspaces": [
+    "mcp-server"
+  ],
   "peerDependencies": {
     "@mui/icons-material": ">=5.0.0",
     "@mui/material": ">=5.0.0",
@@ -83,26 +103,40 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@reduxjs/toolkit": "^2.3.0",
     "@types/ioredis": "^5.0.0",
+    "@webcontainer/env": "^1.1.1",
     "axios": "^1.13.2",
     "chroma-js": "^3.2.0",
     "cors": "^2.8.5",
     "dompurify": "^3.3.0",
+    "dotenv": "^17.2.3",
     "express": "^5.2.1",
     "framer-motion": "^12.23.25",
     "helmet": "^8.1.0",
     "html-react-parser": "^5.2.10",
+    "i18next": "^23.16.8",
     "ioredis": "^5.8.2",
-    "lodash.sortby": "^4.7.0"
+    "lodash.sortby": "^4.7.0",
+    "react-i18next": "^15.1.0",
+    "react-redux": "^9.2.0"
   },
   "devDependencies": {
     "@codemirror/lang-html": "^6.4.11",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@eslint/js": "^9.39.1",
+    "generate-license-file": "^3.5.1",
+    "husky": "^9.1.7",
+    "license-checker": "^25.0.1",
     "@mui/icons-material": "^7.3.6",
     "@mui/material": "^7.3.6",
     "@mui/styled-engine": "^7.3.6",
     "@mui/system": "^7.3.6",
+    "@playwright/test": "^1.50.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
     "@types/chroma-js": "^3.1.2",
     "@types/cors": "^2.8.19",
     "@types/dompurify": "^3.2.0",
@@ -113,13 +147,16 @@
     "@types/react-dom": "^19.2.3",
     "@uiw/react-codemirror": "^4.25.3",
     "@vitejs/plugin-react-swc": "^4.2.2",
+    "@vitest/coverage-v8": "^2.1.0",
+    "@vitest/ui": "^2.1.0",
     "concurrently": "^9.2.1",
-    "dotenv": "^17.2.3",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "jsdom": "^25.0.0",
     "magic-string": "^0.30.21",
+    "msw": "^2.4.0",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "terser": "^5.44.1",
@@ -127,7 +164,8 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.1",
     "vite": "^7.2.7",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^2.1.0"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/AUTHENTICATION.md

@@ -1,281 +0,0 @@
-# DQM Authentication Configuration Examples
-
-This document shows different ways to configure authentication for the DQM Sidebar component.
-
-## 1. Direct Credentials (Simplest)
-
-Pass API credentials directly as props:
-
-```tsx
-import { DQMSidebar } from '@crownpeak/dqm-react-component';
-
-function App() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <DQMSidebar
-      open={open}
-      onClose={() => setOpen(false)}
-      onOpen={() => setOpen(true)}
-      config={{
-        apiKey: process.env.REACT_APP_DQM_API_KEY,
-        websiteId: process.env.REACT_APP_DQM_WEBSITE_ID,
-      }}
-    />
-  );
-}
-```
-
-## 2. LocalStorage (Default Behavior)
-
-If no credentials are provided via props, the component will check `localStorage` and show a login form if credentials are missing:
-
-```tsx
-import { DQMSidebar } from '@crownpeak/dqm-react-component';
-
-function App() {
-  const [open, setOpen] = useState(false);
-
-  // On first open, user will see login form
-  // Credentials are stored in localStorage after successful login
-  return (
-    <DQMSidebar
-      open={open}
-      onClose={() => setOpen(false)}
-      onOpen={() => setOpen(true)}
-      config={{
-        useLocalStorage: true, // Default: true
-      }}
-    />
-  );
-}
-```
-
-## 3. Backend Authentication (Custom Token Exchange)
-
-Use your own Express.js backend to manage credentials:
-
-```tsx
-import { DQMSidebar } from '@crownpeak/dqm-react-component';
-
-function App() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <DQMSidebar
-      open={open}
-      onClose={() => setOpen(false)}
-      onOpen={() => setOpen(true)}
-      config={{
-        authBackendUrl: 'https://api.yourcompany.com',
-        useLocalStorage: true, // Optional: cache credentials
-      }}
-      onAuthSuccess={(credentials) => {
-        console.log('Authenticated:', credentials);
-      }}
-      onAuthError={(error) => {
-        console.error('Auth failed:', error);
-      }}
-    />
-  );
-}
-```
-
-### Backend API Requirements
-
-Your backend must implement this endpoint:
-
-```typescript
-// POST /auth/token
-// Response:
-{
-  "apiKey": "your-dqm-api-key",
-  "websiteId": "your-website-id"
-}
-```
-
-## 4. OAuth2 Flow
-
-For enterprise SSO integration:
-
-```tsx
-import { DQMSidebar } from '@crownpeak/dqm-react-component';
-
-function App() {
-  const [open, setOpen] = useState(false);
-  
-  // TODO: verify that your backend supports OAuth2 token exchange
-
-  return (
-    <DQMSidebar
-      open={open}
-      onClose={() => setOpen(false)}
-      onOpen={() => setOpen(true)}
-      config={{
-        authBackendUrl: 'https://api.yourcompany.com',
-        oauth2Config: {
-          authUrl: 'https://oauth.yourcompany.com/authorize',
-          tokenUrl: 'https://oauth.yourcompany.com/token',
-          clientId: 'your-oauth-client-id',
-          redirectUri: window.location.origin + '/dqm/callback',
-          scope: 'dqm:read',
-        },
-      }}
-    />
-  );
-}
-```
-
-### OAuth2 Backend Requirements
-
-Your backend must implement:
-
-```typescript
-// POST /auth/oauth2/callback
-// Body: { code: string, redirectUri: string }
-// Response:
-{
-  "apiKey": "your-dqm-api-key",
-  "websiteId": "your-website-id"
-}
-```
-
-## 5. Hybrid Configuration
-
-Combine multiple authentication methods with priority:
-
-```tsx
-import { DQMSidebar } from '@crownpeak/dqm-react-component';
-
-function App() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <DQMSidebar
-      open={open}
-      onClose={() => setOpen(false)}
-      onOpen={() => setOpen(true)}
-      config={{
-        // Priority 1: Direct credentials (if provided)
-        apiKey: process.env.REACT_APP_DQM_API_KEY,
-        websiteId: process.env.REACT_APP_DQM_WEBSITE_ID,
-        
-        // Priority 2: LocalStorage (if no props provided)
-        useLocalStorage: true,
-        
-        // Priority 3: Backend authentication (fallback)
-        authBackendUrl: 'https://api.yourcompany.com',
-        oauth2Config: {
-          authUrl: 'https://oauth.yourcompany.com/authorize',
-          tokenUrl: 'https://oauth.yourcompany.com/token',
-          clientId: 'your-oauth-client-id',
-          redirectUri: window.location.origin + '/dqm/callback',
-        },
-      }}
-      onAuthSuccess={(credentials) => {
-        // Optional: Send to analytics
-        analytics.track('DQM Auth Success');
-      }}
-    />
-  );
-}
-```
-
-## Express.js Backend Example
-
-Here's a complete Express.js backend example:
-
-```typescript
-import express from 'express';
-import axios from 'axios';
-
-const app = express();
-app.use(express.json());
-
-// Simple token exchange (custom session-based)
-app.post('/auth/token', async (req, res) => {
-  try {
-    // Verify user session (implement your own logic)
-    if (!req.session?.userId) {
-      return res.status(401).json({ error: 'Not authenticated' });
-    }
-
-    // Fetch user's DQM credentials from your database
-    const user = await database.users.findById(req.session.userId);
-    
-    res.json({
-      apiKey: user.dqmApiKey,
-      websiteId: user.dqmWebsiteId,
-    });
-  } catch (error) {
-    res.status(500).json({ error: 'Internal server error' });
-  }
-});
-
-// OAuth2 callback handler
-app.post('/auth/oauth2/callback', async (req, res) => {
-  const { code, redirectUri } = req.body;
-
-  try {
-    // Exchange authorization code for tokens
-    const tokenResponse = await axios.post('https://oauth.yourcompany.com/token', {
-      grant_type: 'authorization_code',
-      code,
-      redirect_uri: redirectUri,
-      client_id: process.env.OAUTH_CLIENT_ID,
-      client_secret: process.env.OAUTH_CLIENT_SECRET,
-    });
-
-    const { access_token } = tokenResponse.data;
-
-    // Use access token to fetch user's DQM credentials
-    const userInfo = await axios.get('https://api.yourcompany.com/user/dqm-credentials', {
-      headers: { Authorization: `Bearer ${access_token}` },
-    });
-
-    res.json({
-      apiKey: userInfo.data.apiKey,
-      websiteId: userInfo.data.websiteId,
-    });
-  } catch (error) {
-    res.status(500).json({ error: 'OAuth2 flow failed' });
-  }
-});
-
-app.listen(3000, () => {
-  console.log('DQM Auth Backend running on port 3000');
-});
-```
-
-## Security Best Practices
-
-1. **Never expose API keys in client-side code** for production
-2. **Use HTTPS** for all authentication endpoints
-3. **Implement CSRF protection** for OAuth2 flows
-4. **Validate redirect URIs** in OAuth2 configuration
-5. **Use short-lived sessions** and implement token refresh
-6. **Log authentication events** for security monitoring
-7. **Rate limit** authentication endpoints
-
-## TypeScript Support
-
-All configuration options are fully typed:
-
-```tsx
-import type { DQMConfig, OAuth2Config } from '@crownpeak/dqm-react-component';
-
-const config: DQMConfig = {
-  apiKey: '...',
-  websiteId: '...',
-  authBackendUrl: '...',
-  oauth2Config: {
-    authUrl: '...',
-    tokenUrl: '...',
-    clientId: '...',
-    redirectUri: '...',
-    scope: 'dqm:read',
-  },
-  useLocalStorage: true,
-  apiEndpoint: 'https://api.crownpeak.net/dqm-cms/v1', // Optional: custom endpoint
-};
-```