Final review edit modals created

2026-04-20 17:57:17 -06:00
parent c08cd62872
commit a22d53e860
27 changed files with 2410 additions and 620 deletions
@@ -0,0 +1,61 @@
+"use client";
+
+/**
+ * Controlled section editor for a communication-method chip. Used by both
+ * the custom-rule `communication-methods` add-method modal and the
+ * `final-review` chip edit modal — caller owns draft state and decides when
+ * to persist or discard.
+ */
+
+import { memo, useCallback } from "react";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import ModalTextAreaField from "../ModalTextAreaField";
+import type { CommunicationMethodDetailEntry } from "../../types";
+
+export interface CommunicationMethodEditFieldsProps {
+  value: CommunicationMethodDetailEntry;
+  onChange: (_next: CommunicationMethodDetailEntry) => void;
+}
+
+const FIELDS: ReadonlyArray<keyof CommunicationMethodDetailEntry> = [
+  "corePrinciple",
+  "logisticsAdmin",
+  "codeOfConduct",
+];
+
+function CommunicationMethodEditFieldsComponent({
+  value,
+  onChange,
+}: CommunicationMethodEditFieldsProps) {
+  const m = useMessages();
+  const t = m.create.customRule.communication;
+
+  const patch = useCallback(
+    <K extends keyof CommunicationMethodDetailEntry>(
+      key: K,
+      next: CommunicationMethodDetailEntry[K],
+    ) => {
+      onChange({ ...value, [key]: next });
+    },
+    [value, onChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      {FIELDS.map((field) => (
+        <ModalTextAreaField
+          key={field}
+          label={t.sectionHeadings[field]}
+          rows={6}
+          value={value[field]}
+          onChange={(v) => patch(field, v)}
+        />
+      ))}
+    </div>
+  );
+}
+
+CommunicationMethodEditFieldsComponent.displayName =
+  "CommunicationMethodEditFields";
+
+export default memo(CommunicationMethodEditFieldsComponent);
@@ -0,0 +1,78 @@
+"use client";
+
+/**
+ * Controlled section editor for a conflict-management chip. Used by both the
+ * custom-rule `conflict-management` add-method modal and the `final-review`
+ * chip edit modal. Caller owns draft state and persistence.
+ */
+
+import { memo, useCallback } from "react";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import ModalTextAreaField from "../ModalTextAreaField";
+import ApplicableScopeField from "../ApplicableScopeField";
+import type { ConflictManagementDetailEntry } from "../../types";
+
+export interface ConflictManagementEditFieldsProps {
+  value: ConflictManagementDetailEntry;
+  onChange: (_next: ConflictManagementDetailEntry) => void;
+}
+
+function ConflictManagementEditFieldsComponent({
+  value,
+  onChange,
+}: ConflictManagementEditFieldsProps) {
+  const m = useMessages();
+  const t = m.create.customRule.conflictManagement;
+
+  const patch = useCallback(
+    <K extends keyof ConflictManagementDetailEntry>(
+      key: K,
+      next: ConflictManagementDetailEntry[K],
+    ) => {
+      onChange({ ...value, [key]: next });
+    },
+    [value, onChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      <ModalTextAreaField
+        label={t.sectionHeadings.corePrinciple}
+        value={value.corePrinciple}
+        onChange={(v) => patch("corePrinciple", v)}
+      />
+      <ApplicableScopeField
+        label={t.sectionHeadings.applicableScope}
+        addLabel={t.scopeAddButtonLabel}
+        scopes={value.applicableScope}
+        selectedScopes={value.selectedApplicableScope}
+        onToggleScope={(scope) =>
+          patch(
+            "selectedApplicableScope",
+            value.selectedApplicableScope.includes(scope)
+              ? value.selectedApplicableScope.filter((s) => s !== scope)
+              : [...value.selectedApplicableScope, scope],
+          )
+        }
+        onAddScope={(scope) =>
+          patch("applicableScope", [...value.applicableScope, scope])
+        }
+      />
+      <ModalTextAreaField
+        label={t.sectionHeadings.processProtocol}
+        value={value.processProtocol}
+        onChange={(v) => patch("processProtocol", v)}
+      />
+      <ModalTextAreaField
+        label={t.sectionHeadings.restorationFallbacks}
+        value={value.restorationFallbacks}
+        onChange={(v) => patch("restorationFallbacks", v)}
+      />
+    </div>
+  );
+}
+
+ConflictManagementEditFieldsComponent.displayName =
+  "ConflictManagementEditFields";
+
+export default memo(ConflictManagementEditFieldsComponent);
@@ -0,0 +1,57 @@
+"use client";
+
+/**
+ * Controlled meaning/signals field set for a core-value chip. Rendered both
+ * by `core-values` (custom-rule selection step) and `final-review` (chip
+ * edit modal). Holds no state — the parent owns the draft and decides when
+ * to persist (`updateState`) or discard.
+ */
+
+import { memo, useCallback } from "react";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import ModalTextAreaField from "../ModalTextAreaField";
+import type { CoreValueDetailEntry } from "../../types";
+
+export interface CoreValueEditFieldsProps {
+  value: CoreValueDetailEntry;
+  onChange: (_next: CoreValueDetailEntry) => void;
+}
+
+function CoreValueEditFieldsComponent({
+  value,
+  onChange,
+}: CoreValueEditFieldsProps) {
+  const m = useMessages();
+  const t = m.create.customRule.coreValues.detailModal;
+
+  const patch = useCallback(
+    <K extends keyof CoreValueDetailEntry>(
+      key: K,
+      next: CoreValueDetailEntry[K],
+    ) => {
+      onChange({ ...value, [key]: next });
+    },
+    [value, onChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2">
+      <ModalTextAreaField
+        label={t.meaningLabel}
+        value={value.meaning}
+        onChange={(v) => patch("meaning", v)}
+        rows={4}
+      />
+      <ModalTextAreaField
+        label={t.signalsLabel}
+        value={value.signals}
+        onChange={(v) => patch("signals", v)}
+        rows={4}
+      />
+    </div>
+  );
+}
+
+CoreValueEditFieldsComponent.displayName = "CoreValueEditFields";
+
+export default memo(CoreValueEditFieldsComponent);
@@ -0,0 +1,95 @@
+"use client";
+
+/**
+ * Controlled section editor for a decision-approach chip. Used by both the
+ * custom-rule `decision-approaches` add-method modal and the `final-review`
+ * chip edit modal. Caller owns draft state — Confirm/Save persistence and
+ * `markCreateFlowInteraction` live in the parent.
+ */
+
+import { memo, useCallback } from "react";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import ModalTextAreaField from "../ModalTextAreaField";
+import ApplicableScopeField from "../ApplicableScopeField";
+import IncrementerBlock from "../../../../components/controls/IncrementerBlock";
+import type { DecisionApproachDetailEntry } from "../../types";
+
+export interface DecisionApproachEditFieldsProps {
+  value: DecisionApproachDetailEntry;
+  onChange: (_next: DecisionApproachDetailEntry) => void;
+}
+
+const CONSENSUS_LEVEL_MIN = 0;
+const CONSENSUS_LEVEL_MAX = 100;
+const CONSENSUS_LEVEL_STEP = 5;
+
+function DecisionApproachEditFieldsComponent({
+  value,
+  onChange,
+}: DecisionApproachEditFieldsProps) {
+  const m = useMessages();
+  const t = m.create.customRule.decisionApproaches;
+
+  const patch = useCallback(
+    <K extends keyof DecisionApproachDetailEntry>(
+      key: K,
+      next: DecisionApproachDetailEntry[K],
+    ) => {
+      onChange({ ...value, [key]: next });
+    },
+    [value, onChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      <ModalTextAreaField
+        label={t.sectionHeadings.corePrinciple}
+        value={value.corePrinciple}
+        onChange={(v) => patch("corePrinciple", v)}
+      />
+      <ApplicableScopeField
+        label={t.sectionHeadings.applicableScope}
+        addLabel={t.scopeAddButtonLabel}
+        scopes={value.applicableScope}
+        selectedScopes={value.selectedApplicableScope}
+        onToggleScope={(scope) =>
+          patch(
+            "selectedApplicableScope",
+            value.selectedApplicableScope.includes(scope)
+              ? value.selectedApplicableScope.filter((s) => s !== scope)
+              : [...value.selectedApplicableScope, scope],
+          )
+        }
+        onAddScope={(scope) =>
+          patch("applicableScope", [...value.applicableScope, scope])
+        }
+      />
+      <ModalTextAreaField
+        label={t.sectionHeadings.stepByStepInstructions}
+        value={value.stepByStepInstructions}
+        onChange={(v) => patch("stepByStepInstructions", v)}
+      />
+      <IncrementerBlock
+        label={t.sectionHeadings.consensusLevel}
+        value={value.consensusLevel}
+        min={CONSENSUS_LEVEL_MIN}
+        max={CONSENSUS_LEVEL_MAX}
+        step={CONSENSUS_LEVEL_STEP}
+        onChange={(next) => patch("consensusLevel", next)}
+        formatValue={(v) => `${v}%`}
+        decrementAriaLabel="Decrease consensus level"
+        incrementAriaLabel="Increase consensus level"
+      />
+      <ModalTextAreaField
+        label={t.sectionHeadings.objectionsDeadlocks}
+        value={value.objectionsDeadlocks}
+        onChange={(v) => patch("objectionsDeadlocks", v)}
+      />
+    </div>
+  );
+}
+
+DecisionApproachEditFieldsComponent.displayName =
+  "DecisionApproachEditFields";
+
+export default memo(DecisionApproachEditFieldsComponent);
@@ -0,0 +1,61 @@
+"use client";
+
+/**
+ * Controlled section editor for a membership-method chip. Used by both the
+ * custom-rule `membership-methods` add-method modal and the `final-review`
+ * chip edit modal — caller owns draft state and decides when to persist or
+ * discard.
+ */
+
+import { memo, useCallback } from "react";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import ModalTextAreaField from "../ModalTextAreaField";
+import type { MembershipMethodDetailEntry } from "../../types";
+
+export interface MembershipMethodEditFieldsProps {
+  value: MembershipMethodDetailEntry;
+  onChange: (_next: MembershipMethodDetailEntry) => void;
+}
+
+const FIELDS: ReadonlyArray<keyof MembershipMethodDetailEntry> = [
+  "eligibility",
+  "joiningProcess",
+  "expectations",
+];
+
+function MembershipMethodEditFieldsComponent({
+  value,
+  onChange,
+}: MembershipMethodEditFieldsProps) {
+  const m = useMessages();
+  const t = m.create.customRule.membership;
+
+  const patch = useCallback(
+    <K extends keyof MembershipMethodDetailEntry>(
+      key: K,
+      next: MembershipMethodDetailEntry[K],
+    ) => {
+      onChange({ ...value, [key]: next });
+    },
+    [value, onChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      {FIELDS.map((field) => (
+        <ModalTextAreaField
+          key={field}
+          label={t.sectionHeadings[field]}
+          rows={6}
+          value={value[field]}
+          onChange={(v) => patch(field, v)}
+        />
+      ))}
+    </div>
+  );
+}
+
+MembershipMethodEditFieldsComponent.displayName =
+  "MembershipMethodEditFields";
+
+export default memo(MembershipMethodEditFieldsComponent);
@@ -0,0 +1,14 @@
+export { default as CoreValueEditFields } from "./CoreValueEditFields";
+export type { CoreValueEditFieldsProps } from "./CoreValueEditFields";
+
+export { default as CommunicationMethodEditFields } from "./CommunicationMethodEditFields";
+export type { CommunicationMethodEditFieldsProps } from "./CommunicationMethodEditFields";
+
+export { default as MembershipMethodEditFields } from "./MembershipMethodEditFields";
+export type { MembershipMethodEditFieldsProps } from "./MembershipMethodEditFields";
+
+export { default as DecisionApproachEditFields } from "./DecisionApproachEditFields";
+export type { DecisionApproachEditFieldsProps } from "./DecisionApproachEditFields";
+
+export { default as ConflictManagementEditFields } from "./ConflictManagementEditFields";
+export type { ConflictManagementEditFieldsProps } from "./ConflictManagementEditFields";