@reqord/web 0.1.0

package/src/components/requirement/requirement-detail.tsx

@@ -0,0 +1,228 @@
+import Link from "next/link";
+import type { Requirement, Specification, FeedbackEntry } from "@reqord/shared";
+import { StatusBadge, PriorityBadge, ComplexityBadge } from "@/components/ui/badge";
+import { FeedbackList } from "@/components/feedback/feedback-list";
+import { DeleteButton } from "./delete-button";
+import { RequirementTabs } from "./requirement-tabs";
+
+export function RequirementDetail({
+  requirement,
+  description,
+  specifications = [],
+  feedbacks,
+}: {
+  requirement: Requirement;
+  description: string | null;
+  specifications?: Specification[];
+  feedbacks?: FeedbackEntry[];
+}) {
+  const { dependencies } = requirement;
+  const hasDeps =
+    dependencies.blockedBy.length > 0 ||
+    dependencies.blocks.length > 0 ||
+    dependencies.relatedTo.length > 0;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-start justify-between">
+        <div>
+          <p className="text-sm text-gray-500">
+            <Link href="/requirements" className="hover:text-blue-600">
+              Requirements
+            </Link>
+            {" / "}
+            <span className="font-mono">{requirement.id}</span>
+          </p>
+          <h1 className="mt-1 text-2xl font-bold">{requirement.title}</h1>
+        </div>
+        <div className="flex items-center gap-2">
+          <Link
+            href={`/requirements/${requirement.id}/edit`}
+            className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+          >
+            Edit
+          </Link>
+          <DeleteButton id={requirement.id} />
+        </div>
+      </div>
+
+      {/* Badges */}
+      <div className="flex flex-wrap gap-2">
+        <StatusBadge status={requirement.status} />
+        <PriorityBadge priority={requirement.priority} />
+        {requirement.estimatedComplexity ? (
+          <ComplexityBadge complexity={requirement.estimatedComplexity} />
+        ) : null}
+        {requirement.estimatedHours ? (
+          <span className="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">
+            {requirement.estimatedHours}h
+          </span>
+        ) : null}
+      </div>
+
+      {/* Meta */}
+      <div className="grid grid-cols-2 gap-4 rounded-lg border border-gray-200 bg-white p-4 text-sm sm:grid-cols-4">
+        <div>
+          <p className="text-gray-500">Version</p>
+          <p className="font-medium">{requirement.version}</p>
+        </div>
+        <div>
+          <p className="text-gray-500">Format</p>
+          <p className="font-medium">{requirement.format.type}</p>
+        </div>
+        <div>
+          <p className="text-gray-500">Created</p>
+          <p className="font-medium">
+            {new Date(requirement.createdAt).toLocaleDateString("ja-JP")}
+          </p>
+        </div>
+        <div>
+          <p className="text-gray-500">Updated</p>
+          <p className="font-medium">
+            {new Date(requirement.updatedAt).toLocaleDateString("ja-JP")}
+          </p>
+        </div>
+      </div>
+
+      {/* Format Details */}
+      {requirement.format.type === "user-story" ? (
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h2 className="mb-2 text-sm font-semibold text-gray-700">User Story</h2>
+          <div className="space-y-1 text-sm">
+            <p>
+              <span className="font-medium text-gray-500">As a</span>{" "}
+              {requirement.format.userStory.as}
+            </p>
+            <p>
+              <span className="font-medium text-gray-500">I want</span>{" "}
+              {requirement.format.userStory.iWant}
+            </p>
+            <p>
+              <span className="font-medium text-gray-500">So that</span>{" "}
+              {requirement.format.userStory.soThat}
+            </p>
+          </div>
+        </div>
+      ) : null}
+
+      {requirement.format.type === "ears" ? (
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h2 className="mb-2 text-sm font-semibold text-gray-700">EARS Format</h2>
+          <div className="space-y-1 text-sm">
+            <p>
+              <span className="font-medium text-gray-500">Type:</span>{" "}
+              {requirement.format.ears.type}
+            </p>
+            {requirement.format.ears.trigger ? (
+              <p>
+                <span className="font-medium text-gray-500">Trigger:</span>{" "}
+                {requirement.format.ears.trigger}
+              </p>
+            ) : null}
+            {requirement.format.ears.condition ? (
+              <p>
+                <span className="font-medium text-gray-500">Condition:</span>{" "}
+                {requirement.format.ears.condition}
+              </p>
+            ) : null}
+            <p>
+              <span className="font-medium text-gray-500">Action:</span>{" "}
+              {requirement.format.ears.action}
+            </p>
+            {requirement.format.ears.response ? (
+              <p>
+                <span className="font-medium text-gray-500">Response:</span>{" "}
+                {requirement.format.ears.response}
+              </p>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      {/* Feedbacks */}
+      {feedbacks && feedbacks.length > 0 ? (
+        <FeedbackList feedbacks={feedbacks} />
+      ) : null}
+
+      {/* Dependencies */}
+      {hasDeps ? (
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h2 className="mb-2 text-sm font-semibold text-gray-700">Dependencies</h2>
+          <div className="space-y-2 text-sm">
+            {dependencies.blockedBy.length > 0 ? (
+              <div>
+                <span className="font-medium text-gray-500">Blocked by: </span>
+                {dependencies.blockedBy.map((id) => (
+                  <Link
+                    key={id}
+                    href={`/requirements/${id}`}
+                    className="mr-2 font-mono text-blue-600 hover:underline"
+                  >
+                    {id}
+                  </Link>
+                ))}
+              </div>
+            ) : null}
+            {dependencies.blocks.length > 0 ? (
+              <div>
+                <span className="font-medium text-gray-500">Blocks: </span>
+                {dependencies.blocks.map((id) => (
+                  <Link
+                    key={id}
+                    href={`/requirements/${id}`}
+                    className="mr-2 font-mono text-blue-600 hover:underline"
+                  >
+                    {id}
+                  </Link>
+                ))}
+              </div>
+            ) : null}
+            {dependencies.relatedTo.length > 0 ? (
+              <div>
+                <span className="font-medium text-gray-500">Related to: </span>
+                {dependencies.relatedTo.map((id) => (
+                  <Link
+                    key={id}
+                    href={`/requirements/${id}`}
+                    className="mr-2 font-mono text-blue-600 hover:underline"
+                  >
+                    {id}
+                  </Link>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      {/* Specifications */}
+      <div className="rounded-lg border border-gray-200 bg-white p-4">
+        <h2 className="mb-2 text-sm font-semibold text-gray-700">Specifications</h2>
+        {specifications.length > 0 ? (
+          <div className="space-y-1 text-sm">
+            {specifications.map((spec) => (
+              <div key={spec.id} className="flex items-center gap-2">
+                <Link
+                  href={`/specifications/${spec.id}`}
+                  className="font-mono text-blue-600 hover:underline"
+                >
+                  {spec.id}
+                </Link>
+                <StatusBadge status={spec.status} />
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-sm text-gray-500">No specifications</p>
+        )}
+      </div>
+
+      {/* Success Criteria & Description Tabs */}
+      <RequirementTabs
+        successCriteria={requirement.successCriteria}
+        description={description}
+      />
+    </div>
+  );
+}

package/src/components/requirement/requirement-form.tsx

@@ -0,0 +1,390 @@
+"use client";
+
+import { useActionState, useState } from "react";
+import Link from "next/link";
+import type { Requirement } from "@reqord/shared";
+import { createRequirement, updateRequirement, type ActionResult } from "@/lib/actions";
+import { SuccessCriteriaEditor } from "./success-criteria-editor";
+import { DependencyEditor } from "./dependency-editor";
+import { MarkdownEditor } from "./markdown-editor";
+
+type Mode = "create" | "edit";
+
+interface Props {
+  mode: Mode;
+  requirement?: Requirement;
+  description?: string | null;
+  allRequirements: Requirement[];
+}
+
+const INITIAL_STATE: ActionResult = { success: true };
+
+export function RequirementForm({ mode, requirement, description, allRequirements }: Props) {
+  const action = mode === "create" ? createRequirement : updateRequirement;
+  const [state, formAction, isPending] = useActionState(
+    async (_prev: ActionResult, formData: FormData) => action(formData),
+    INITIAL_STATE,
+  );
+
+  const [title, setTitle] = useState(requirement?.title ?? "");
+  const [status, setStatus] = useState<string>(requirement?.status ?? "draft");
+  const [priority, setPriority] = useState<string>(requirement?.priority ?? "medium");
+  const [formatType, setFormatType] = useState<string>(requirement?.format.type ?? "free-form");
+  const [estimatedComplexity, setEstimatedComplexity] = useState(
+    requirement?.estimatedComplexity ?? "",
+  );
+  const [estimatedHours, setEstimatedHours] = useState(
+    requirement?.estimatedHours?.toString() ?? "",
+  );
+  const [successCriteria, setSuccessCriteria] = useState<string[]>(
+    requirement?.successCriteria ?? [],
+  );
+  const [blockedBy, setBlockedBy] = useState<string[]>(
+    requirement?.dependencies.blockedBy ?? [],
+  );
+  const [blocks, setBlocks] = useState<string[]>(
+    requirement?.dependencies.blocks ?? [],
+  );
+  const [relatedTo, setRelatedTo] = useState<string[]>(
+    requirement?.dependencies.relatedTo ?? [],
+  );
+  const [descriptionText, setDescriptionText] = useState(description ?? "");
+
+  // User Story
+  const [userStoryAs, setUserStoryAs] = useState(
+    requirement?.format.type === "user-story" ? requirement.format.userStory.as : "",
+  );
+  const [userStoryIWant, setUserStoryIWant] = useState(
+    requirement?.format.type === "user-story" ? requirement.format.userStory.iWant : "",
+  );
+  const [userStorySoThat, setUserStorySoThat] = useState(
+    requirement?.format.type === "user-story" ? requirement.format.userStory.soThat : "",
+  );
+
+  // EARS
+  const [earsType, setEarsType] = useState(
+    requirement?.format.type === "ears" ? requirement.format.ears.type : "",
+  );
+  const [earsTrigger, setEarsTrigger] = useState(
+    requirement?.format.type === "ears" ? (requirement.format.ears.trigger ?? "") : "",
+  );
+  const [earsCondition, setEarsCondition] = useState(
+    requirement?.format.type === "ears" ? (requirement.format.ears.condition ?? "") : "",
+  );
+  const [earsAction, setEarsAction] = useState(
+    requirement?.format.type === "ears" ? requirement.format.ears.action : "",
+  );
+  const [earsResponse, setEarsResponse] = useState(
+    requirement?.format.type === "ears" ? (requirement.format.ears.response ?? "") : "",
+  );
+
+  const cancelHref = mode === "edit" ? `/requirements/${requirement!.id}` : "/requirements";
+
+  return (
+    <form action={formAction} className="space-y-6">
+      {mode === "edit" ? <input type="hidden" name="id" value={requirement!.id} /> : null}
+
+      {/* Hidden JSON fields */}
+      <input type="hidden" name="successCriteria" value={JSON.stringify(successCriteria)} />
+      <input type="hidden" name="blockedBy" value={JSON.stringify(blockedBy)} />
+      <input type="hidden" name="blocks" value={JSON.stringify(blocks)} />
+      <input type="hidden" name="relatedTo" value={JSON.stringify(relatedTo)} />
+      <input type="hidden" name="description" value={descriptionText} />
+      <input type="hidden" name="formatType" value={formatType} />
+
+      {/* User Story hidden fields */}
+      <input type="hidden" name="userStoryAs" value={userStoryAs} />
+      <input type="hidden" name="userStoryIWant" value={userStoryIWant} />
+      <input type="hidden" name="userStorySoThat" value={userStorySoThat} />
+
+      {/* EARS hidden fields */}
+      <input type="hidden" name="earsType" value={earsType} />
+      <input type="hidden" name="earsTrigger" value={earsTrigger} />
+      <input type="hidden" name="earsCondition" value={earsCondition} />
+      <input type="hidden" name="earsAction" value={earsAction} />
+      <input type="hidden" name="earsResponse" value={earsResponse} />
+
+      {!state.success ? (
+        <div className="rounded-md bg-red-50 p-4 text-sm text-red-700">
+          {state.error}
+        </div>
+      ) : null}
+
+      {/* Breadcrumb */}
+      <p className="text-sm text-gray-500">
+        <Link href="/requirements" className="hover:text-blue-600">
+          Requirements
+        </Link>
+        {mode === "edit" ? (
+          <>
+            {" / "}
+            <Link href={`/requirements/${requirement!.id}`} className="hover:text-blue-600">
+              {requirement!.id}
+            </Link>
+            {" / Edit"}
+          </>
+        ) : (
+          " / New"
+        )}
+      </p>
+
+      <h1 className="text-2xl font-bold">
+        {mode === "create" ? "New Requirement" : `Edit ${requirement!.id}`}
+      </h1>
+
+      {/* Title */}
+      <div>
+        <label htmlFor="title" className="block text-sm font-medium text-gray-700">
+          Title
+        </label>
+        <input
+          id="title"
+          name="title"
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          required
+          className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+        />
+      </div>
+
+      {/* Status + Priority + Complexity */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div>
+          <label htmlFor="status" className="block text-sm font-medium text-gray-700">
+            Status
+          </label>
+          <select
+            id="status"
+            name="status"
+            value={status}
+            onChange={(e) => setStatus(e.target.value)}
+            className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm"
+          >
+            <option value="draft">Draft</option>
+            <option value="approved">Approved</option>
+            <option value="implemented">Implemented</option>
+            <option value="deprecated">Deprecated</option>
+          </select>
+        </div>
+
+        <div>
+          <label htmlFor="priority" className="block text-sm font-medium text-gray-700">
+            Priority
+          </label>
+          <select
+            id="priority"
+            name="priority"
+            value={priority}
+            onChange={(e) => setPriority(e.target.value)}
+            className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm"
+          >
+            <option value="low">Low</option>
+            <option value="medium">Medium</option>
+            <option value="high">High</option>
+          </select>
+        </div>
+
+        <div>
+          <label
+            htmlFor="estimatedComplexity"
+            className="block text-sm font-medium text-gray-700"
+          >
+            Complexity
+          </label>
+          <select
+            id="estimatedComplexity"
+            name="estimatedComplexity"
+            value={estimatedComplexity}
+            onChange={(e) => setEstimatedComplexity(e.target.value)}
+            className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm"
+          >
+            <option value="">-</option>
+            <option value="small">Small</option>
+            <option value="medium">Medium</option>
+            <option value="large">Large</option>
+            <option value="xlarge">XLarge</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Estimated Hours */}
+      <div className="max-w-xs">
+        <label htmlFor="estimatedHours" className="block text-sm font-medium text-gray-700">
+          Estimated Hours
+        </label>
+        <input
+          id="estimatedHours"
+          name="estimatedHours"
+          type="number"
+          step="0.5"
+          min="0"
+          value={estimatedHours}
+          onChange={(e) => setEstimatedHours(e.target.value)}
+          className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          placeholder="Optional"
+        />
+      </div>
+
+      {/* Format Type */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700">Format</label>
+        <div className="mt-1 flex gap-4">
+          {(["free-form", "user-story", "ears"] as const).map((ft) => (
+            <label key={ft} className="flex items-center gap-1.5 text-sm">
+              <input
+                type="radio"
+                name="_formatType"
+                value={ft}
+                checked={formatType === ft}
+                onChange={() => setFormatType(ft)}
+                className="border-gray-300"
+              />
+              {ft === "free-form" ? "Free Form" : ft === "user-story" ? "User Story" : "EARS"}
+            </label>
+          ))}
+        </div>
+      </div>
+
+      {/* User Story Fields */}
+      {formatType === "user-story" ? (
+        <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-4">
+          <h3 className="text-sm font-medium text-gray-700">User Story</h3>
+          <div>
+            <label className="block text-sm text-gray-600">As a</label>
+            <input
+              type="text"
+              value={userStoryAs}
+              onChange={(e) => setUserStoryAs(e.target.value)}
+              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
+            />
+          </div>
+          <div>
+            <label className="block text-sm text-gray-600">I want</label>
+            <input
+              type="text"
+              value={userStoryIWant}
+              onChange={(e) => setUserStoryIWant(e.target.value)}
+              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
+            />
+          </div>
+          <div>
+            <label className="block text-sm text-gray-600">So that</label>
+            <input
+              type="text"
+              value={userStorySoThat}
+              onChange={(e) => setUserStorySoThat(e.target.value)}
+              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
+            />
+          </div>
+        </div>
+      ) : null}
+
+      {/* EARS Fields */}
+      {formatType === "ears" ? (
+        <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-4">
+          <h3 className="text-sm font-medium text-gray-700">EARS</h3>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div>
+              <label className="block text-sm text-gray-600">Type</label>
+              <input
+                type="text"
+                value={earsType}
+                onChange={(e) => setEarsType(e.target.value)}
+                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm text-gray-600">Trigger</label>
+              <input
+                type="text"
+                value={earsTrigger}
+                onChange={(e) => setEarsTrigger(e.target.value)}
+                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
+                placeholder="Optional"
+              />
+            </div>
+            <div>
+              <label className="block text-sm text-gray-600">Condition</label>
+              <input
+                type="text"
+                value={earsCondition}
+                onChange={(e) => setEarsCondition(e.target.value)}
+                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
+                placeholder="Optional"
+              />
+            </div>
+            <div>
+              <label className="block text-sm text-gray-600">Action</label>
+              <input
+                type="text"
+                value={earsAction}
+                onChange={(e) => setEarsAction(e.target.value)}
+                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <label className="block text-sm text-gray-600">Response</label>
+              <input
+                type="text"
+                value={earsResponse}
+                onChange={(e) => setEarsResponse(e.target.value)}
+                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
+                placeholder="Optional"
+              />
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {/* Success Criteria */}
+      <SuccessCriteriaEditor criteria={successCriteria} onChange={setSuccessCriteria} />
+
+      {/* Dependencies */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-gray-700">Dependencies</h3>
+        <DependencyEditor
+          label="Blocked By"
+          selected={blockedBy}
+          onChange={setBlockedBy}
+          allRequirements={allRequirements}
+          excludeId={requirement?.id}
+        />
+        <DependencyEditor
+          label="Blocks"
+          selected={blocks}
+          onChange={setBlocks}
+          allRequirements={allRequirements}
+          excludeId={requirement?.id}
+        />
+        <DependencyEditor
+          label="Related To"
+          selected={relatedTo}
+          onChange={setRelatedTo}
+          allRequirements={allRequirements}
+          excludeId={requirement?.id}
+        />
+      </div>
+
+      {/* Description */}
+      <MarkdownEditor value={descriptionText} onChange={setDescriptionText} />
+
+      {/* Actions */}
+      <div className="flex items-center gap-3">
+        <button
+          type="submit"
+          disabled={isPending}
+          className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+        >
+          {isPending ? "Saving..." : mode === "create" ? "Create" : "Save"}
+        </button>
+        <Link
+          href={cancelHref}
+          className="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
+          Cancel
+        </Link>
+      </div>
+    </form>
+  );
+}