@kopexa/grc 0.0.2 → 0.0.4

package/dist/index.mjs

@@ -1,10 +1,28 @@
 "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
-} from "./chunk-TW3S4OE2.mjs";
+} from "./chunk-AGASJJ7X.mjs";
 import {
   assetScale,
   getScale,
@@ -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.4",
   "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.8.0",
+    "@kopexa/sight": "17.2.0"
   },
   "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.14",
+    "@kopexa/shared-utils": "17.0.14",
+    "@kopexa/icons": "17.2.2",
+    "@kopexa/i18n": "17.3.0"
   },
   "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/impact/impact-card.tsx

@@ -145,6 +145,12 @@ export interface ImpactCardProps {
 	scale?: ImpactScalePreset | ImpactScaleConfig;
 	/** Custom title for the card */
 	title?: string;
+	/**
+	 * Display variant:
+	 * - `card`: Wrapped in a Card with edit/save/cancel buttons (default)
+	 * - `inline`: No card wrapper, always editable, changes propagate immediately
+	 */
+	variant?: "card" | "inline";
 }
 
 const defaultImpact: ImpactValue = {
@@ -162,14 +168,19 @@ export function ImpactCard({
 	readOnly = false,
 	scale = "risk",
 	title,
+	variant = "card",
 }: ImpactCardProps) {
 	const intl = useSafeIntl();
+	const isInline = variant === "inline";
 	const [isEditing, setIsEditing] = useState(false);
 	const [editValues, setEditValues] = useState<ImpactValue>(
 		value || defaultImpact,
 	);
 
-	const styles = impactCard({ editing: isEditing });
+	// For inline variant, always show as editing (form mode)
+	const effectiveIsEditing = isInline ? !readOnly : isEditing;
+
+	const styles = impactCard({ editing: !isInline && isEditing });
 
 	// Resolve scale config
 	const scaleConfig: ImpactScaleConfig =
@@ -218,7 +229,12 @@ export function ImpactCard({
 		setIsEditing(true);
 	};
 
-	const currentImpact = isEditing ? editValues : value || defaultImpact;
+	// In inline mode, always use value; in card mode, use editValues when editing
+	const currentImpact = isInline
+		? value || defaultImpact
+		: isEditing
+			? editValues
+			: value || defaultImpact;
 
 	const handleLevelChange =
 		(
@@ -229,17 +245,29 @@ export function ImpactCard({
 				| "impactAuthenticity",
 		) =>
 		(level: ImpactLevel) => {
-			setEditValues((prev) => ({
-				...prev,
+			const newValues = {
+				...(isInline ? value || defaultImpact : editValues),
 				[key]: level,
-			}));
+			};
+			if (isInline) {
+				// Inline mode: propagate changes immediately
+				onChange?.(newValues);
+			} else {
+				setEditValues(newValues);
+			}
 		};
 
 	const handleJustificationChange = (justification: string) => {
-		setEditValues((prev) => ({
-			...prev,
+		const newValues = {
+			...(isInline ? value || defaultImpact : editValues),
 			impactJustification: justification || undefined,
-		}));
+		};
+		if (isInline) {
+			// Inline mode: propagate changes immediately
+			onChange?.(newValues);
+		} else {
+			setEditValues(newValues);
+		}
 	};
 
 	// Calculate highest impact for justification hint
@@ -255,6 +283,100 @@ export function ImpactCard({
 		level: highestLabel,
 	});
 
+	// Shared content for both variants
+	const impactRows = (
+		<>
+			<ImpactItemRow
+				label={t.confidentiality}
+				shortLabel="C"
+				value={currentImpact.impactConfidentiality}
+				isEditing={effectiveIsEditing}
+				scale={scaleConfig}
+				formatLabel={formatLabel}
+				onLevelChange={handleLevelChange("impactConfidentiality")}
+			/>
+			<ImpactItemRow
+				label={t.integrity}
+				shortLabel="I"
+				value={currentImpact.impactIntegrity}
+				isEditing={effectiveIsEditing}
+				scale={scaleConfig}
+				formatLabel={formatLabel}
+				onLevelChange={handleLevelChange("impactIntegrity")}
+			/>
+			<ImpactItemRow
+				label={t.availability}
+				shortLabel="A"
+				value={currentImpact.impactAvailability}
+				isEditing={effectiveIsEditing}
+				scale={scaleConfig}
+				formatLabel={formatLabel}
+				onLevelChange={handleLevelChange("impactAvailability")}
+			/>
+			{showAuthenticity && (
+				<ImpactItemRow
+					label={t.authenticity}
+					shortLabel="Au"
+					value={currentImpact.impactAuthenticity ?? 0}
+					isEditing={effectiveIsEditing}
+					scale={scaleConfig}
+					formatLabel={formatLabel}
+					onLevelChange={handleLevelChange("impactAuthenticity")}
+				/>
+			)}
+		</>
+	);
+
+	const justificationContent = showJustification && (
+		<div className={styles.justificationSection()}>
+			<label
+				htmlFor="impact-justification"
+				className={styles.justificationLabel()}
+			>
+				{t.justification}
+				{highestImpact > 0 && (
+					<span className={styles.justificationHint()}>
+						{justificationHint}
+					</span>
+				)}
+			</label>
+			{effectiveIsEditing ? (
+				<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>
+	);
+
+	// Inline variant: no card wrapper, always editable
+	if (isInline) {
+		return (
+			<div className={styles.wrapper()}>
+				{title && (
+					<div className={styles.inlineHeader()}>
+						<Heading level="h4" className="text-sm font-medium">
+							{title}
+						</Heading>
+					</div>
+				)}
+				{impactRows}
+				{justificationContent}
+			</div>
+		);
+	}
+
+	// Card variant: wrapped in Card with edit/save/cancel
 	return (
 		<Card.Root className={styles.root()}>
 			<Card.Header className="flex flex-row items-center justify-between">
@@ -290,77 +412,8 @@ export function ImpactCard({
 					))}
 			</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>
-				)}
+				{impactRows}
+				{justificationContent}
 			</Card.Body>
 		</Card.Root>
 	);

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",
+	},
+});