@kopexa/grc 0.0.2

package/dist/vendor/index.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/vendor/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/vendor/index.js

@@ -0,0 +1,19 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vendor/index.ts
+var vendor_exports = {};
+module.exports = __toCommonJS(vendor_exports);

package/dist/vendor/index.mjs

@@ -0,0 +1 @@
+"use client";

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@kopexa/grc",
+  "version": "0.0.2",
+  "description": "GRC (Governance, Risk, Compliance) components for Kopexa",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kopexa-grc/sight.git",
+    "directory": "packages/grc"
+  },
+  "keywords": [
+    "kopexa",
+    "grc",
+    "governance",
+    "risk",
+    "compliance",
+    "react",
+    "components"
+  ],
+  "author": "Kopexa GmbH",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kopexa-grc/sight/issues"
+  },
+  "homepage": "https://github.com/kopexa-grc/sight#readme",
+  "peerDependencies": {
+    "react": ">=19.0.0-rc.0",
+    "react-dom": ">=19.0.0-rc.0",
+    "react-intl": "^7.1.14",
+    "@kopexa/theme": "17.6.0",
+    "@kopexa/sight": "17.1.0"
+  },
+  "dependencies": {
+    "@kopexa/react-utils": "17.0.12",
+    "@kopexa/shared-utils": "17.0.12",
+    "@kopexa/icons": "17.2.0",
+    "@kopexa/i18n": "17.1.0"
+  },
+  "clean-package": "../../clean-package.config.json",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "i18n:extract": "formatjs extract \"src/**/*.{ts,tsx}\" --ignore \"**/*.test.*\" \"**/*.stories.*\" --format simple --out-file ../core/i18n/tmp/$npm_package_name.en.json"
+  }
+}

package/src/asset/index.ts

@@ -0,0 +1,4 @@
+// Asset management components
+// TODO: Add components as they are extracted from the demo
+
+export {};

package/src/common/compliance/compliance-badge.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { useSafeIntl } from "@kopexa/i18n";
+import { DORAIcon, NIS2Icon } from "@kopexa/icons";
+import { Tooltip } from "@kopexa/sight";
+import { complianceBadge } from "@kopexa/theme";
+import { messages } from "./messages";
+
+// ============================================
+// Types
+// ============================================
+
+export interface DoraBadgeProps {
+	/** Custom tooltip content */
+	tooltip?: string;
+	/** Icon size */
+	iconSize?: number;
+	/** Additional class names */
+	className?: string;
+}
+
+export interface Nis2BadgeProps {
+	/** Custom tooltip content */
+	tooltip?: string;
+	/** Icon size */
+	iconSize?: number;
+	/** Additional class names */
+	className?: string;
+}
+
+export interface ComplianceBadgesProps {
+	/** Show DORA Critical badge */
+	doraCritical?: boolean;
+	/** Show NIS2 Significant badge */
+	nis2Significant?: boolean;
+	/** Icon size for badges */
+	iconSize?: number;
+	/** Additional class names for container */
+	className?: string;
+}
+
+// ============================================
+// DORA Badge Component
+// ============================================
+
+export function DoraBadge({
+	tooltip,
+	iconSize = 12,
+	className,
+}: DoraBadgeProps) {
+	const intl = useSafeIntl();
+	const styles = complianceBadge({ color: "dora" });
+
+	const tooltipContent = tooltip ?? intl.formatMessage(messages.dora_tooltip);
+	const label = intl.formatMessage(messages.dora_label);
+
+	return (
+		<Tooltip content={tooltipContent}>
+			<span className={styles.root({ className })}>
+				<DORAIcon size={iconSize} className={styles.icon()} />
+				<span className={styles.label()}>{label}</span>
+			</span>
+		</Tooltip>
+	);
+}
+
+// ============================================
+// NIS2 Badge Component
+// ============================================
+
+export function Nis2Badge({
+	tooltip,
+	iconSize = 12,
+	className,
+}: Nis2BadgeProps) {
+	const intl = useSafeIntl();
+	const styles = complianceBadge({ color: "nis2" });
+
+	const tooltipContent = tooltip ?? intl.formatMessage(messages.nis2_tooltip);
+	const label = intl.formatMessage(messages.nis2_label);
+
+	return (
+		<Tooltip content={tooltipContent}>
+			<span className={styles.root({ className })}>
+				<NIS2Icon size={iconSize} className={styles.icon()} />
+				<span className={styles.label()}>{label}</span>
+			</span>
+		</Tooltip>
+	);
+}
+
+// ============================================
+// Combined Compliance Badges Component
+// ============================================
+
+export function ComplianceBadges({
+	doraCritical,
+	nis2Significant,
+	iconSize = 12,
+	className,
+}: ComplianceBadgesProps) {
+	if (!doraCritical && !nis2Significant) return null;
+
+	return (
+		<div className={className ?? "flex items-center gap-1"}>
+			{doraCritical && <DoraBadge iconSize={iconSize} />}
+			{nis2Significant && <Nis2Badge iconSize={iconSize} />}
+		</div>
+	);
+}

package/src/common/compliance/index.ts

@@ -0,0 +1,8 @@
+export {
+	ComplianceBadges,
+	type ComplianceBadgesProps,
+	DoraBadge,
+	type DoraBadgeProps,
+	Nis2Badge,
+	type Nis2BadgeProps,
+} from "./compliance-badge";

package/src/common/compliance/messages.ts

@@ -0,0 +1,20 @@
+import { defineMessages } from "@kopexa/i18n";
+
+export const messages = defineMessages({
+	dora_label: {
+		id: "grc.compliance.dora.label",
+		defaultMessage: "DORA",
+	},
+	dora_tooltip: {
+		id: "grc.compliance.dora.tooltip",
+		defaultMessage: "DORA Critical - Affects critical ICT functions",
+	},
+	nis2_label: {
+		id: "grc.compliance.nis2.label",
+		defaultMessage: "NIS2",
+	},
+	nis2_tooltip: {
+		id: "grc.compliance.nis2.tooltip",
+		defaultMessage: "NIS2 Significant - All-hazards risk",
+	},
+});

package/src/common/impact/impact-card.tsx

@@ -0,0 +1,367 @@
+"use client";
+
+import { useSafeIntl } from "@kopexa/i18n";
+import { EditIcon } from "@kopexa/icons";
+import { Button, Card, Chip, Heading, Select, Textarea } from "@kopexa/sight";
+import { impactCard } from "@kopexa/theme";
+import { useState } from "react";
+import { messages } from "./messages";
+import {
+	getScale,
+	type ImpactLevel,
+	type ImpactScaleConfig,
+	type ImpactScalePreset,
+	impactLevels,
+} from "./scales";
+
+// ============================================
+// Types (aligned with Go ImpactMixin schema)
+// ============================================
+
+export interface ImpactValue {
+	/** Rating 0-5. Vertraulichkeit (Confidentiality). */
+	impactConfidentiality: ImpactLevel;
+	/** Rating 0-5. Integrität (Integrity). */
+	impactIntegrity: ImpactLevel;
+	/** Rating 0-5. Verfügbarkeit (Availability) - DORA Critical! */
+	impactAvailability: ImpactLevel;
+	/** Rating 0-5. Authentizität (Authenticity/Accountability). */
+	impactAuthenticity?: ImpactLevel;
+	/** Human-readable explanation for the chosen impact scores. Focus on the highest score. */
+	impactJustification?: string;
+}
+
+// ============================================
+// Impact Item Row Component
+// ============================================
+
+interface ImpactItemRowProps {
+	label: string;
+	shortLabel: string;
+	value: ImpactLevel;
+	isEditing: boolean;
+	scale: ImpactScaleConfig;
+	formatLabel: (level: ImpactLevel) => string;
+	onLevelChange: (level: ImpactLevel) => void;
+}
+
+function ImpactItemRow({
+	label,
+	shortLabel,
+	value,
+	isEditing,
+	scale,
+	formatLabel,
+	onLevelChange,
+}: ImpactItemRowProps) {
+	const config = scale[value];
+	const isUnrated = value === 0;
+	const percentage = isUnrated ? 0 : (value / 5) * 100;
+	const styles = impactCard({ unrated: isUnrated });
+
+	return (
+		<div className={styles.row()}>
+			<div className={styles.rowContent()}>
+				{/* Icon */}
+				<span className={styles.rowIcon()}>{shortLabel}</span>
+
+				{/* Content */}
+				<div className={styles.rowBody()}>
+					<div className={styles.rowHeader()}>
+						<span className={styles.rowLabel()}>{label}</span>
+						{isEditing ? (
+							<Select
+								value={String(value)}
+								onValueChange={(val) =>
+									onLevelChange(Number(val) as ImpactLevel)
+								}
+								size="sm"
+							>
+								<Select.Trigger className="w-36">
+									<Select.Value />
+								</Select.Trigger>
+								<Select.Content>
+									{impactLevels.map((level) => (
+										<Select.Item key={level} value={String(level)}>
+											<span className="flex items-center gap-2">
+												<span className="text-xs text-muted-foreground w-3">
+													{level}
+												</span>
+												{formatLabel(level)}
+											</span>
+										</Select.Item>
+									))}
+								</Select.Content>
+							</Select>
+						) : (
+							<div className={styles.rowValue()}>
+								{!isUnrated && (
+									<span className={styles.rowValueNumber()}>{value}</span>
+								)}
+								<span
+									className={styles.rowValueBadge({
+										className: isUnrated
+											? undefined
+											: `${config.color} ${config.bgColor}`,
+									})}
+								>
+									{formatLabel(value)}
+								</span>
+							</div>
+						)}
+					</div>
+
+					{/* Progress Bar */}
+					{!isUnrated && !isEditing && (
+						<div className={styles.progressContainer()}>
+							<div
+								className={styles.progressBar({ className: config.barColor })}
+								style={{ width: `${percentage}%` }}
+							/>
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+// ============================================
+// Impact Card Component
+// ============================================
+
+export interface ImpactCardProps {
+	/** The impact data */
+	value?: ImpactValue;
+	/** Callback when the impact changes */
+	onChange?: (impact: ImpactValue) => void;
+	/** Show justification field */
+	showJustification?: boolean;
+	/** Show authenticity as 4th dimension (CIAA) */
+	showAuthenticity?: boolean;
+	/** Make the component read-only */
+	readOnly?: boolean;
+	/** Scale preset or custom scale config */
+	scale?: ImpactScalePreset | ImpactScaleConfig;
+	/** Custom title for the card */
+	title?: string;
+}
+
+const defaultImpact: ImpactValue = {
+	impactConfidentiality: 0,
+	impactIntegrity: 0,
+	impactAvailability: 0,
+	impactAuthenticity: 0,
+};
+
+export function ImpactCard({
+	value,
+	onChange,
+	showJustification = false,
+	showAuthenticity = false,
+	readOnly = false,
+	scale = "risk",
+	title,
+}: ImpactCardProps) {
+	const intl = useSafeIntl();
+	const [isEditing, setIsEditing] = useState(false);
+	const [editValues, setEditValues] = useState<ImpactValue>(
+		value || defaultImpact,
+	);
+
+	const styles = impactCard({ editing: isEditing });
+
+	// Resolve scale config
+	const scaleConfig: ImpactScaleConfig =
+		typeof scale === "string" ? getScale(scale) : scale;
+
+	// i18n helper for scale labels
+	const formatLabel = (level: ImpactLevel): string => {
+		const config = scaleConfig[level];
+		return intl.formatMessage(config.message);
+	};
+
+	// i18n labels
+	const t = {
+		titleCia: intl.formatMessage(messages.title_cia),
+		titleCiaa: intl.formatMessage(messages.title_ciaa),
+		confidentiality: intl.formatMessage(messages.confidentiality),
+		integrity: intl.formatMessage(messages.integrity),
+		availability: intl.formatMessage(messages.availability),
+		authenticity: intl.formatMessage(messages.authenticity),
+		justification: intl.formatMessage(messages.justification),
+		justificationPlaceholder: intl.formatMessage(
+			messages.justification_placeholder,
+		),
+		noJustification: intl.formatMessage(messages.no_justification),
+		edit: intl.formatMessage(messages.edit),
+		cancel: intl.formatMessage(messages.cancel),
+		save: intl.formatMessage(messages.save),
+	};
+
+	// Derive default title based on authenticity
+	const defaultTitle = showAuthenticity ? t.titleCiaa : t.titleCia;
+	const cardTitle = title ?? defaultTitle;
+
+	const handleSave = () => {
+		onChange?.(editValues);
+		setIsEditing(false);
+	};
+
+	const handleCancel = () => {
+		setEditValues(value || defaultImpact);
+		setIsEditing(false);
+	};
+
+	const handleStartEdit = () => {
+		setEditValues(value || defaultImpact);
+		setIsEditing(true);
+	};
+
+	const currentImpact = isEditing ? editValues : value || defaultImpact;
+
+	const handleLevelChange =
+		(
+			key:
+				| "impactConfidentiality"
+				| "impactIntegrity"
+				| "impactAvailability"
+				| "impactAuthenticity",
+		) =>
+		(level: ImpactLevel) => {
+			setEditValues((prev) => ({
+				...prev,
+				[key]: level,
+			}));
+		};
+
+	const handleJustificationChange = (justification: string) => {
+		setEditValues((prev) => ({
+			...prev,
+			impactJustification: justification || undefined,
+		}));
+	};
+
+	// Calculate highest impact for justification hint
+	const highestImpact = Math.max(
+		currentImpact.impactConfidentiality,
+		currentImpact.impactIntegrity,
+		currentImpact.impactAvailability,
+		currentImpact.impactAuthenticity ?? 0,
+	) as ImpactLevel;
+
+	const highestLabel = formatLabel(highestImpact);
+	const justificationHint = intl.formatMessage(messages.justification_hint, {
+		level: highestLabel,
+	});
+
+	return (
+		<Card.Root className={styles.root()}>
+			<Card.Header className="flex flex-row items-center justify-between">
+				<div className="flex items-center gap-2">
+					<Heading level="h4" className="text-sm font-medium">
+						{cardTitle}
+					</Heading>
+					{isEditing && (
+						<Chip size="sm" color="primary">
+							{t.edit}
+						</Chip>
+					)}
+				</div>
+				{!readOnly &&
+					(!isEditing ? (
+						<button
+							type="button"
+							onClick={handleStartEdit}
+							className={styles.editButton()}
+							aria-label={t.edit}
+						>
+							<EditIcon className="size-4" />
+						</button>
+					) : (
+						<div className="flex items-center gap-2">
+							<Button variant="ghost" size="sm" onClick={handleCancel}>
+								{t.cancel}
+							</Button>
+							<Button size="sm" onClick={handleSave}>
+								{t.save}
+							</Button>
+						</div>
+					))}
+			</Card.Header>
+			<Card.Body className="space-y-3">
+				<ImpactItemRow
+					label={t.confidentiality}
+					shortLabel="C"
+					value={currentImpact.impactConfidentiality}
+					isEditing={isEditing}
+					scale={scaleConfig}
+					formatLabel={formatLabel}
+					onLevelChange={handleLevelChange("impactConfidentiality")}
+				/>
+				<ImpactItemRow
+					label={t.integrity}
+					shortLabel="I"
+					value={currentImpact.impactIntegrity}
+					isEditing={isEditing}
+					scale={scaleConfig}
+					formatLabel={formatLabel}
+					onLevelChange={handleLevelChange("impactIntegrity")}
+				/>
+				<ImpactItemRow
+					label={t.availability}
+					shortLabel="A"
+					value={currentImpact.impactAvailability}
+					isEditing={isEditing}
+					scale={scaleConfig}
+					formatLabel={formatLabel}
+					onLevelChange={handleLevelChange("impactAvailability")}
+				/>
+				{showAuthenticity && (
+					<ImpactItemRow
+						label={t.authenticity}
+						shortLabel="Au"
+						value={currentImpact.impactAuthenticity ?? 0}
+						isEditing={isEditing}
+						scale={scaleConfig}
+						formatLabel={formatLabel}
+						onLevelChange={handleLevelChange("impactAuthenticity")}
+					/>
+				)}
+
+				{/* Justification - single field for all dimensions */}
+				{showJustification && (
+					<div className={styles.justificationSection()}>
+						<label
+							htmlFor="impact-justification"
+							className={styles.justificationLabel()}
+						>
+							{t.justification}
+							{highestImpact > 0 && (
+								<span className={styles.justificationHint()}>
+									{justificationHint}
+								</span>
+							)}
+						</label>
+						{isEditing ? (
+							<Textarea
+								id="impact-justification"
+								value={currentImpact.impactJustification || ""}
+								onChange={(e) => handleJustificationChange(e.target.value)}
+								placeholder={t.justificationPlaceholder}
+								rows={3}
+								className="text-sm"
+							/>
+						) : currentImpact.impactJustification ? (
+							<p className={styles.justificationText()}>
+								{currentImpact.impactJustification}
+							</p>
+						) : (
+							<p className={styles.justificationEmpty()}>{t.noJustification}</p>
+						)}
+					</div>
+				)}
+			</Card.Body>
+		</Card.Root>
+	);
+}

package/src/common/impact/index.ts

@@ -0,0 +1,14 @@
+export type { ImpactCardProps, ImpactValue } from "./impact-card";
+export { ImpactCard } from "./impact-card";
+export { messages as impactMessages } from "./messages";
+export {
+	assetScale,
+	getScale,
+	type ImpactLevel,
+	type ImpactLevelConfig,
+	type ImpactScaleConfig,
+	type ImpactScalePreset,
+	impactLevels,
+	processScale,
+	riskScale,
+} from "./scales";