@kopexa/grc 0.0.2 → 0.0.3

package/dist/index.mjs

@@ -1,6 +1,24 @@
 "use client";
-import "./chunk-BFZPRJQT.mjs";
+import "./chunk-HJUSN7FD.mjs";
+import "./chunk-HI7F2CF4.mjs";
+import {
+  RiskRatingDisplay
+} from "./chunk-5TBN3JQA.mjs";
+import {
+  messages as messages2
+} from "./chunk-DC44K745.mjs";
+import {
+  getRiskLevelFromRating,
+  isRatingUnrated,
+  riskLevelConfig
+} from "./chunk-VFX3DASQ.mjs";
 import "./chunk-TICWEZUI.mjs";
+import "./chunk-CND77GVC.mjs";
+import {
+  ControlChip,
+  MappedControls
+} from "./chunk-QDYL5ABK.mjs";
+import "./chunk-QS5S6V26.mjs";
 import "./chunk-GFABGXAO.mjs";
 import {
   ImpactCard
@@ -23,13 +41,20 @@ import {
 import "./chunk-B47KDUYY.mjs";
 export {
   ComplianceBadges,
+  ControlChip,
   DoraBadge,
   ImpactCard,
+  MappedControls,
   Nis2Badge,
+  RiskRatingDisplay,
   assetScale,
+  getRiskLevelFromRating,
   getScale,
   impactLevels,
   messages as impactMessages,
+  isRatingUnrated,
   processScale,
+  riskLevelConfig,
+  messages2 as riskMessages,
   riskScale
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/grc",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "GRC (Governance, Risk, Compliance) components for Kopexa",
   "sideEffects": false,
   "main": "dist/index.js",
@@ -42,14 +42,15 @@
     "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"
+    "@kopexa/theme": "17.7.0",
+    "@kopexa/sight": "17.1.1"
   },
   "dependencies": {
-    "@kopexa/react-utils": "17.0.12",
-    "@kopexa/shared-utils": "17.0.12",
-    "@kopexa/icons": "17.2.0",
-    "@kopexa/i18n": "17.1.0"
+    "@kopexa/krn": "^1.0.1",
+    "@kopexa/react-utils": "17.0.13",
+    "@kopexa/icons": "17.2.1",
+    "@kopexa/i18n": "17.2.0",
+    "@kopexa/shared-utils": "17.0.13"
   },
   "clean-package": "../../clean-package.config.json",
   "publishConfig": {

package/src/common/control/index.ts

@@ -0,0 +1,6 @@
+export {
+	ControlChip,
+	type ControlChipProps,
+	MappedControls,
+	type MappedControlsProps,
+} from "./mapped-controls";

package/src/common/control/mapped-controls.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useSafeIntl } from "@kopexa/i18n";
+import { KRN } from "@kopexa/krn";
+import { Popover, Tooltip } from "@kopexa/sight";
+import { relatedControlChip } from "@kopexa/theme";
+import type { ComponentProps } from "react";
+import { messages } from "./messages";
+
+// ============================================
+// Types
+// ============================================
+
+export interface MappedControlsProps extends ComponentProps<"div"> {
+	/** Array of control KRN strings */
+	controls: string[];
+	/** Maximum number of chips to display before showing overflow */
+	maxVisible?: number;
+	/** Size variant */
+	size?: "sm" | "md" | "lg";
+	/** Make chips interactive (clickable) */
+	interactive?: boolean;
+	/** Callback when a control chip is clicked */
+	onControlClick?: (krn: string) => void;
+	/** Show empty state when no controls */
+	showEmpty?: boolean;
+}
+
+export interface ControlChipProps {
+	/** The KRN string */
+	krn: string;
+	/** Size variant */
+	size?: "sm" | "md" | "lg";
+	/** Make chip interactive */
+	interactive?: boolean;
+	/** Click handler */
+	onClick?: () => void;
+	/** Additional class names */
+	className?: string;
+}
+
+// ============================================
+// Helper Functions
+// ============================================
+
+/**
+ * Parse a KRN string and extract framework + control ID.
+ * Returns formatted string like "iso27001:a-7-1" or the original string if parsing fails.
+ */
+function formatControlKrn(krnString: string): {
+	framework: string | null;
+	controlId: string;
+	full: string;
+} {
+	const parsed = KRN.tryParse(krnString);
+	if (!parsed) {
+		return { framework: null, controlId: krnString, full: krnString };
+	}
+
+	const framework = parsed.tryResourceId("frameworks");
+	const control = parsed.tryResourceId("controls");
+
+	if (framework && control) {
+		return {
+			framework,
+			controlId: control,
+			full: `${framework}:${control}`,
+		};
+	}
+
+	const basename = parsed.basename();
+	return {
+		framework: null,
+		controlId: basename || krnString,
+		full: basename || krnString,
+	};
+}
+
+// ============================================
+// Control Chip Component
+// ============================================
+
+export function ControlChip({
+	krn,
+	size = "md",
+	interactive = false,
+	onClick,
+	className,
+}: ControlChipProps) {
+	const styles = relatedControlChip({ size, interactive });
+	const { controlId, full } = formatControlKrn(krn);
+
+	// Only show uppercase control ID in chip
+	const displayId = controlId.toUpperCase();
+
+	const content = <span className={styles.chipId()}>{displayId}</span>;
+
+	// Use button when interactive, span otherwise
+	const chip =
+		interactive && onClick ? (
+			<button
+				type="button"
+				className={styles.chip({ className })}
+				onClick={onClick}
+			>
+				{content}
+			</button>
+		) : (
+			<span className={styles.chip({ className })}>{content}</span>
+		);
+
+	// Wrap in tooltip with full formatted KRN (e.g., "iso27001:a-7-1")
+	return <Tooltip content={full}>{chip}</Tooltip>;
+}
+
+// ============================================
+// Mapped Controls Component
+// ============================================
+
+export function MappedControls({
+	controls,
+	maxVisible = 2,
+	size = "md",
+	interactive = false,
+	onControlClick,
+	showEmpty = false,
+	className,
+	...rest
+}: MappedControlsProps) {
+	const intl = useSafeIntl();
+	const styles = relatedControlChip({ size, interactive });
+
+	// Handle empty state
+	if (controls.length === 0) {
+		if (!showEmpty) return null;
+		return (
+			<span className="text-xs text-muted-foreground">
+				{intl.formatMessage(messages.no_controls)}
+			</span>
+		);
+	}
+
+	const visibleControls = controls.slice(0, maxVisible);
+	const hiddenCount = controls.length - maxVisible;
+
+	return (
+		<div className={styles.root({ className })} {...rest}>
+			{visibleControls.map((krn) => (
+				<ControlChip
+					key={krn}
+					krn={krn}
+					size={size}
+					interactive={interactive}
+					onClick={onControlClick ? () => onControlClick(krn) : undefined}
+				/>
+			))}
+			{hiddenCount > 0 && (
+				<Popover.Root>
+					<Popover.Trigger className={styles.overflow()}>
+						{intl.formatMessage(messages.more_controls, {
+							count: hiddenCount,
+						})}
+					</Popover.Trigger>
+					<Popover.Content
+						align="start"
+						className="p-2 max-w-xs"
+						showArrow={false}
+					>
+						<div className="text-xs font-medium text-muted-foreground mb-2">
+							{intl.formatMessage(messages.view_all, {
+								count: controls.length,
+							})}
+						</div>
+						<div className="flex flex-wrap gap-1">
+							{controls.map((krn) => (
+								<ControlChip
+									key={krn}
+									krn={krn}
+									size={size}
+									interactive={interactive}
+									onClick={
+										onControlClick ? () => onControlClick(krn) : undefined
+									}
+								/>
+							))}
+						</div>
+					</Popover.Content>
+				</Popover.Root>
+			)}
+		</div>
+	);
+}

package/src/common/control/messages.ts

@@ -0,0 +1,16 @@
+import { defineMessages } from "@kopexa/i18n";
+
+export const messages = defineMessages({
+	more_controls: {
+		id: "grc.control.mapped.more",
+		defaultMessage: "+{count} more",
+	},
+	view_all: {
+		id: "grc.control.mapped.view_all",
+		defaultMessage: "View all {count} controls",
+	},
+	no_controls: {
+		id: "grc.control.mapped.no_controls",
+		defaultMessage: "No mapped controls",
+	},
+});

package/src/common/index.ts

@@ -1,4 +1,6 @@
 // Common GRC components shared across domains
 
 export * from "./compliance";
+export * from "./control";
 export * from "./impact";
+export * from "./risk";

package/src/common/risk/index.ts

@@ -0,0 +1,12 @@
+export { messages as riskMessages } from "./messages";
+export {
+	RiskRatingDisplay,
+	type RiskRatingDisplayProps,
+} from "./risk-rating-display";
+export {
+	getRiskLevelFromRating,
+	isRatingUnrated,
+	type RiskLevel,
+	type RiskRating,
+	riskLevelConfig,
+} from "./types";

package/src/common/risk/messages.ts

@@ -0,0 +1,40 @@
+import { defineMessages } from "@kopexa/i18n";
+
+export const messages = defineMessages({
+	level_unrated: {
+		id: "grc.risk.level.unrated",
+		defaultMessage: "Not rated",
+	},
+	level_low: {
+		id: "grc.risk.level.low",
+		defaultMessage: "Low",
+	},
+	level_medium: {
+		id: "grc.risk.level.medium",
+		defaultMessage: "Medium",
+	},
+	level_high: {
+		id: "grc.risk.level.high",
+		defaultMessage: "High",
+	},
+	level_critical: {
+		id: "grc.risk.level.critical",
+		defaultMessage: "Critical",
+	},
+	likelihood: {
+		id: "grc.risk.likelihood",
+		defaultMessage: "Likelihood",
+	},
+	consequence: {
+		id: "grc.risk.consequence",
+		defaultMessage: "Consequence",
+	},
+	rating: {
+		id: "grc.risk.rating",
+		defaultMessage: "Rating",
+	},
+	not_rated_hint: {
+		id: "grc.risk.not_rated_hint",
+		defaultMessage: "Risk has not been assessed yet",
+	},
+});

package/src/common/risk/risk-rating-display.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useSafeIntl } from "@kopexa/i18n";
+import { Tooltip } from "@kopexa/sight";
+import { riskRating } from "@kopexa/theme";
+import { messages } from "./messages";
+import {
+	getRiskLevelFromRating,
+	isRatingUnrated,
+	type RiskLevel,
+	type RiskRating,
+} from "./types";
+
+export interface RiskRatingDisplayProps {
+	/** The risk rating to display */
+	rating: RiskRating | null | undefined;
+	/** Show the rating value badge */
+	showBadge?: boolean;
+	/** Show the level label text */
+	showLabel?: boolean;
+	/** Size variant */
+	size?: "sm" | "md";
+}
+
+/**
+ * Display component for risk ratings.
+ * Shows a colored badge with the rating value and level label.
+ * Handles "not rated" state gracefully.
+ */
+export function RiskRatingDisplay({
+	rating,
+	showBadge = true,
+	showLabel = true,
+	size = "md",
+}: RiskRatingDisplayProps) {
+	const intl = useSafeIntl();
+
+	// Handle unrated state
+	if (isRatingUnrated(rating)) {
+		const styles = riskRating({ size, level: "unrated" });
+		const levelLabel = intl.formatMessage(messages.level_unrated);
+
+		return (
+			<Tooltip content={intl.formatMessage(messages.not_rated_hint)}>
+				<div className={styles.base()}>
+					{showBadge && <div className={styles.badge()}>—</div>}
+					{showLabel && <span className={styles.label()}>{levelLabel}</span>}
+				</div>
+			</Tooltip>
+		);
+	}
+
+	// At this point, rating is guaranteed to be non-null with valid values
+	const ratedValue = rating as RiskRating;
+	const level = getRiskLevelFromRating(ratedValue.rating);
+	const styles = riskRating({
+		size,
+		level: level as Exclude<RiskLevel, "unrated">,
+	});
+	const levelLabelKey = `level_${level}` as keyof typeof messages;
+	const levelLabel = intl.formatMessage(messages[levelLabelKey]);
+
+	return (
+		<Tooltip
+			content={
+				<div className="text-xs space-y-1">
+					<div>
+						{intl.formatMessage(messages.likelihood)}: {ratedValue.likelihood}/5
+					</div>
+					<div>
+						{intl.formatMessage(messages.consequence)}: {ratedValue.consequence}
+						/5
+					</div>
+					{ratedValue.comment && (
+						<div className="text-muted-foreground">{ratedValue.comment}</div>
+					)}
+				</div>
+			}
+		>
+			<div className={styles.base()}>
+				{showBadge && <div className={styles.badge()}>{ratedValue.rating}</div>}
+				{showLabel && <span className={styles.label()}>{levelLabel}</span>}
+			</div>
+		</Tooltip>
+	);
+}

package/src/common/risk/types.ts

@@ -0,0 +1,91 @@
+/**
+ * RiskRating represents the risk assessment details.
+ * Aligned with backend Go struct.
+ */
+export interface RiskRating {
+	/** Likelihood of the risk occurring (1-5). 0 = not rated. */
+	likelihood: number;
+	/** Consequence/impact if the risk occurs (1-5). 0 = not rated. */
+	consequence: number;
+	/** Calculated rating: likelihood × consequence (0-25). 0 = not rated. */
+	rating: number;
+	/** Optional comment for context */
+	comment?: string;
+}
+
+export type RiskLevel = "unrated" | "low" | "medium" | "high" | "critical";
+
+/**
+ * Get risk level from rating (0-25).
+ * - 0: Unrated
+ * - 1-4: Low
+ * - 5-9: Medium
+ * - 10-16: High
+ * - 17-25: Critical
+ */
+export function getRiskLevelFromRating(rating: number): RiskLevel {
+	if (rating === 0) return "unrated";
+	if (rating <= 4) return "low";
+	if (rating <= 9) return "medium";
+	if (rating <= 16) return "high";
+	return "critical";
+}
+
+/**
+ * Check if a rating is considered "not rated"
+ */
+export function isRatingUnrated(
+	rating: RiskRating | null | undefined,
+): boolean {
+	if (!rating) return true;
+	return (
+		rating.rating === 0 || rating.likelihood === 0 || rating.consequence === 0
+	);
+}
+
+export const riskLevelConfig: Record<
+	RiskLevel,
+	{
+		label: string;
+		bgColor: string;
+		textColor: string;
+		iconBgColor: string;
+		iconTextColor: string;
+	}
+> = {
+	unrated: {
+		label: "Nicht bewertet",
+		bgColor: "bg-muted",
+		textColor: "text-muted-foreground",
+		iconBgColor: "bg-muted/50",
+		iconTextColor: "text-muted-foreground",
+	},
+	low: {
+		label: "Niedrig",
+		bgColor: "bg-success",
+		textColor: "text-success",
+		iconBgColor: "bg-success/10",
+		iconTextColor: "text-success",
+	},
+	medium: {
+		label: "Mittel",
+		bgColor: "bg-warning",
+		textColor: "text-warning",
+		iconBgColor: "bg-warning/10",
+		iconTextColor: "text-warning",
+	},
+	high: {
+		label: "Hoch",
+		bgColor: "bg-orange-500",
+		textColor: "text-orange-500",
+		iconBgColor: "bg-orange-500/10",
+		iconTextColor: "text-orange-500",
+	},
+	critical: {
+		label: "Kritisch",
+		bgColor: "bg-destructive",
+		textColor: "text-destructive",
+		iconBgColor: "bg-destructive/10",
+		iconTextColor: "text-destructive",
+	},
+};