@kopexa/grc 0.0.3 → 0.0.4

package/dist/index.js

@@ -597,15 +597,18 @@ function ImpactCard({
   showAuthenticity = false,
   readOnly = false,
   scale = "risk",
-  title
+  title,
+  variant = "card"
 }) {
   var _a, _b;
   const intl = (0, import_i18n6.useSafeIntl)();
+  const isInline = variant === "inline";
   const [isEditing, setIsEditing] = (0, import_react.useState)(false);
   const [editValues, setEditValues] = (0, import_react.useState)(
     value || defaultImpact
   );
-  const styles = (0, import_theme3.impactCard)({ editing: isEditing });
+  const effectiveIsEditing = isInline ? !readOnly : isEditing;
+  const styles = (0, import_theme3.impactCard)({ editing: !isInline && isEditing });
   const scaleConfig = typeof scale === "string" ? getScale(scale) : scale;
   const formatLabel = (level) => {
     const config = scaleConfig[level];
@@ -641,18 +644,28 @@ function ImpactCard({
     setEditValues(value || defaultImpact);
     setIsEditing(true);
   };
-  const currentImpact = isEditing ? editValues : value || defaultImpact;
+  const currentImpact = isInline ? value || defaultImpact : isEditing ? editValues : value || defaultImpact;
   const handleLevelChange = (key) => (level) => {
-    setEditValues((prev) => ({
-      ...prev,
+    const newValues = {
+      ...isInline ? value || defaultImpact : editValues,
       [key]: level
-    }));
+    };
+    if (isInline) {
+      onChange == null ? void 0 : onChange(newValues);
+    } else {
+      setEditValues(newValues);
+    }
   };
   const handleJustificationChange = (justification) => {
-    setEditValues((prev) => ({
-      ...prev,
+    const newValues = {
+      ...isInline ? value || defaultImpact : editValues,
       impactJustification: justification || void 0
-    }));
+    };
+    if (isInline) {
+      onChange == null ? void 0 : onChange(newValues);
+    } else {
+      setEditValues(newValues);
+    }
   };
   const highestImpact = Math.max(
     currentImpact.impactConfidentiality,
@@ -664,6 +677,87 @@ function ImpactCard({
   const justificationHint = intl.formatMessage(messages3.justification_hint, {
     level: highestLabel
   });
+  const impactRows = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ImpactItemRow,
+      {
+        label: t.confidentiality,
+        shortLabel: "C",
+        value: currentImpact.impactConfidentiality,
+        isEditing: effectiveIsEditing,
+        scale: scaleConfig,
+        formatLabel,
+        onLevelChange: handleLevelChange("impactConfidentiality")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ImpactItemRow,
+      {
+        label: t.integrity,
+        shortLabel: "I",
+        value: currentImpact.impactIntegrity,
+        isEditing: effectiveIsEditing,
+        scale: scaleConfig,
+        formatLabel,
+        onLevelChange: handleLevelChange("impactIntegrity")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ImpactItemRow,
+      {
+        label: t.availability,
+        shortLabel: "A",
+        value: currentImpact.impactAvailability,
+        isEditing: effectiveIsEditing,
+        scale: scaleConfig,
+        formatLabel,
+        onLevelChange: handleLevelChange("impactAvailability")
+      }
+    ),
+    showAuthenticity && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ImpactItemRow,
+      {
+        label: t.authenticity,
+        shortLabel: "Au",
+        value: (_b = currentImpact.impactAuthenticity) != null ? _b : 0,
+        isEditing: effectiveIsEditing,
+        scale: scaleConfig,
+        formatLabel,
+        onLevelChange: handleLevelChange("impactAuthenticity")
+      }
+    )
+  ] });
+  const justificationContent = showJustification && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles.justificationSection(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "label",
+      {
+        htmlFor: "impact-justification",
+        className: styles.justificationLabel(),
+        children: [
+          t.justification,
+          highestImpact > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.justificationHint(), children: justificationHint })
+        ]
+      }
+    ),
+    effectiveIsEditing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_sight3.Textarea,
+      {
+        id: "impact-justification",
+        value: currentImpact.impactJustification || "",
+        onChange: (e) => handleJustificationChange(e.target.value),
+        placeholder: t.justificationPlaceholder,
+        rows: 3,
+        className: "text-sm"
+      }
+    ) : currentImpact.impactJustification ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: styles.justificationText(), children: currentImpact.impactJustification }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: styles.justificationEmpty(), children: t.noJustification })
+  ] });
+  if (isInline) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles.wrapper(), children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles.inlineHeader(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sight3.Heading, { level: "h4", className: "text-sm font-medium", children: title }) }),
+      impactRows,
+      justificationContent
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sight3.Card.Root, { className: styles.root(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sight3.Card.Header, { className: "flex flex-row items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -685,78 +779,8 @@ function ImpactCard({
       ] }))
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sight3.Card.Body, { className: "space-y-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        ImpactItemRow,
-        {
-          label: t.confidentiality,
-          shortLabel: "C",
-          value: currentImpact.impactConfidentiality,
-          isEditing,
-          scale: scaleConfig,
-          formatLabel,
-          onLevelChange: handleLevelChange("impactConfidentiality")
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        ImpactItemRow,
-        {
-          label: t.integrity,
-          shortLabel: "I",
-          value: currentImpact.impactIntegrity,
-          isEditing,
-          scale: scaleConfig,
-          formatLabel,
-          onLevelChange: handleLevelChange("impactIntegrity")
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        ImpactItemRow,
-        {
-          label: t.availability,
-          shortLabel: "A",
-          value: currentImpact.impactAvailability,
-          isEditing,
-          scale: scaleConfig,
-          formatLabel,
-          onLevelChange: handleLevelChange("impactAvailability")
-        }
-      ),
-      showAuthenticity && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        ImpactItemRow,
-        {
-          label: t.authenticity,
-          shortLabel: "Au",
-          value: (_b = currentImpact.impactAuthenticity) != null ? _b : 0,
-          isEditing,
-          scale: scaleConfig,
-          formatLabel,
-          onLevelChange: handleLevelChange("impactAuthenticity")
-        }
-      ),
-      showJustification && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles.justificationSection(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          "label",
-          {
-            htmlFor: "impact-justification",
-            className: styles.justificationLabel(),
-            children: [
-              t.justification,
-              highestImpact > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.justificationHint(), children: justificationHint })
-            ]
-          }
-        ),
-        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_sight3.Textarea,
-          {
-            id: "impact-justification",
-            value: currentImpact.impactJustification || "",
-            onChange: (e) => handleJustificationChange(e.target.value),
-            placeholder: t.justificationPlaceholder,
-            rows: 3,
-            className: "text-sm"
-          }
-        ) : currentImpact.impactJustification ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: styles.justificationText(), children: currentImpact.impactJustification }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: styles.justificationEmpty(), children: t.noJustification })
-      ] })
+      impactRows,
+      justificationContent
     ] })
   ] });
 }

package/dist/index.mjs

@@ -22,7 +22,7 @@ import "./chunk-QS5S6V26.mjs";
 import "./chunk-GFABGXAO.mjs";
 import {
   ImpactCard
-} from "./chunk-TW3S4OE2.mjs";
+} from "./chunk-AGASJJ7X.mjs";
 import {
   assetScale,
   getScale,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/grc",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "GRC (Governance, Risk, Compliance) components for Kopexa",
   "sideEffects": false,
   "main": "dist/index.js",
@@ -42,15 +42,15 @@
     "react": ">=19.0.0-rc.0",
     "react-dom": ">=19.0.0-rc.0",
     "react-intl": "^7.1.14",
-    "@kopexa/theme": "17.7.0",
-    "@kopexa/sight": "17.1.1"
+    "@kopexa/theme": "17.8.0",
+    "@kopexa/sight": "17.2.0"
   },
   "dependencies": {
     "@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"
+    "@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/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>
 	);