Terakoda/dm-companion
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleans up the new-doc forms.

Browse Source
This commit is contained in:
Drew Haven
2025-06-28 18:01:15 -07:00
parent 6ce462a77d
commit f8130f0ba9
8 changed files with 135 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/documents/location/NewLocationForm.tsx
View File

@@ -1,6 +1,9 @@
import { useState } from "react"; import { useState } from "react";
import type { CampaignId, Location } from "@/lib/types"; import type { CampaignId, Location } from "@/lib/types";
import { pb } from "@/lib/pocketbase"; import { pb } from "@/lib/pocketbase";
import { BaseForm } from "@/components/form/BaseForm";
import { MultiLineInput } from "@/components/form/MultiLineInput";
import { SingleLineInput } from "@/components/form/SingleLineInput";
/** /**
* Renders a form to add a new location. Calls onCreate with the new location document. * Renders a form to add a new location. Calls onCreate with the new location document.
@@ -42,42 +45,29 @@ export const NewLocationForm = ({
} }
return ( return (
<form <BaseForm
className="flex items-left flex-col gap-2 mt-4" title="Create new Location"
onSubmit={handleSubmit} onSubmit={handleSubmit}
> isLoading={adding || !name.trim()}
<h3>Create new location</h3> error={error}
<div className="flex gap-5 w-full items-center"> content={
<label>Name</label> <>
<input <SingleLineInput
type="text" label="Name"
className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
placeholder="Name"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={setName}
disabled={adding} disabled={adding}
aria-label="Name" placeholder="Enter location name"
/> />
</div> <MultiLineInput
<div className="flex gap-5 w-full items-center"> label="Description"
<label>Description</label>
<textarea
className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
placeholder="Description"
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} placeholder="Enter location description"
onChange={setDescription}
disabled={adding} disabled={adding}
aria-label="Description"
/> />
</div> </>
{error && <div className="text-red-400 mt-2 text-sm">{error}</div>} }
<button />
type="submit"
className="px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60"
disabled={adding || !name.trim()}
>
{adding ? "Adding..." : "Create"}
</button>
</form>
); );
}; };

38
src/components/documents/monsters/NewMonsterForm.tsx
View File

@@ -1,6 +1,8 @@
import { useState } from "react"; import { useState } from "react";
import type { CampaignId, Monster } from "@/lib/types"; import type { CampaignId, Monster } from "@/lib/types";
import { pb } from "@/lib/pocketbase"; import { pb } from "@/lib/pocketbase";
import { BaseForm } from "@/components/form/BaseForm";
import { SingleLineInput } from "@/components/form/SingleLineInput";
/** /**
* Renders a form to add a new monster. Calls onCreate with the new monster document. * Renders a form to add a new monster. Calls onCreate with the new monster document.
@@ -13,7 +15,6 @@ export const NewMonsterForm = ({
onCreate: (monster: Monster) => Promise<void>; onCreate: (monster: Monster) => Promise<void>;
}) => { }) => {
const [name, setName] = useState(""); const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [adding, setAdding] = useState(false); const [adding, setAdding] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -28,11 +29,9 @@ export const NewMonsterForm = ({
type: "monster", type: "monster",
data: { data: {
name, name,
description,
}, },
}); });
setName(""); setName("");
setDescription("");
await onCreate(monsterDoc); await onCreate(monsterDoc);
} catch (e: any) { } catch (e: any) {
setError(e?.message || "Failed to add monster."); setError(e?.message || "Failed to add monster.");
@@ -42,31 +41,18 @@ export const NewMonsterForm = ({
} }
return ( return (
<form <BaseForm
className="flex items-left flex-col gap-2 mt-4" title="Create new monster"
isLoading={adding || !name.trim()}
onSubmit={handleSubmit} onSubmit={handleSubmit}
> error={error}
<h3>Create new monster</h3> content={
<div className="flex gap-5 w-full align-center"> <SingleLineInput
<label>Name</label>
<input
type="text"
className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
placeholder="Name"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={setName}
disabled={adding} placeholder="Monster description"
aria-label="Name" />
}
/> />
</div>
{error && <div className="text-red-400 mt-2 text-sm">{error}</div>}
<button
type="submit"
className="px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60"
disabled={adding || !name.trim()}
>
{adding ? "Adding..." : "Create"}
</button>
</form>
); );
}; };

50
src/components/documents/npc/NewNpcForm.tsx
View File

@@ -1,6 +1,9 @@
import { useState } from "react"; import { useState } from "react";
import type { CampaignId, Npc } from "@/lib/types"; import type { CampaignId, Npc } from "@/lib/types";
import { pb } from "@/lib/pocketbase"; import { pb } from "@/lib/pocketbase";
import { BaseForm } from "@/components/form/BaseForm";
import { SingleLineInput } from "@/components/form/SingleLineInput";
import { MultiLineInput } from "@/components/form/MultiLineInput";
/** /**
* Renders a form to add a new npc. Calls onCreate with the new npc document. * Renders a form to add a new npc. Calls onCreate with the new npc document.
@@ -42,42 +45,29 @@ export const NewNpcForm = ({
} }
return ( return (
<form <BaseForm
className="flex items-left flex-col gap-2 mt-4" title="Create new NPC"
onSubmit={handleSubmit} onSubmit={handleSubmit}
> isLoading={adding}
<h3>Create new npc</h3> error={error}
<div className="flex gap-5 w-full items-center"> content={
<label>Name</label> <>
<input <SingleLineInput
type="text" label="Name"
className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
placeholder="Name"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={setName}
disabled={adding} disabled={adding}
aria-label="Name" placeholder="Enter NPC name"
/> />
</div> <MultiLineInput
<div className="flex gap-5 w-full items-center"> label="Description"
<label>Description</label>
<textarea
className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
placeholder="Description"
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} placeholder="Enter NPC description"
onChange={setDescription}
disabled={adding} disabled={adding}
aria-label="Description"
/> />
</div> </>
{error && <div className="text-red-400 mt-2 text-sm">{error}</div>} }
<button />
type="submit"
className="px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60"
disabled={adding || !name.trim()}
>
{adding ? "Adding..." : "Create"}
</button>
</form>
); );
}; };

30
src/components/documents/secret/NewSecretForm.tsx
View File

@@ -3,6 +3,8 @@
import { useState } from "react"; import { useState } from "react";
import type { CampaignId, Secret } from "@/lib/types"; import type { CampaignId, Secret } from "@/lib/types";
import { pb } from "@/lib/pocketbase"; import { pb } from "@/lib/pocketbase";
import { BaseForm } from "@/components/form/BaseForm";
import { SingleLineInput } from "@/components/form/SingleLineInput";
/** /**
* Renders a form to add a new secret. Calls onCreate with the new secret document. * Renders a form to add a new secret. Calls onCreate with the new secret document.
@@ -42,24 +44,18 @@ export const NewSecretForm = ({
} }
return ( return (
<form className="flex items-center gap-2 mt-4" onSubmit={handleSubmit}> <BaseForm
<input title="Create new treasure"
type="text" isLoading={adding || !newSecret.trim()}
className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500" onSubmit={handleSubmit}
placeholder="Add a new secret..." error={error}
content={
<SingleLineInput
value={newSecret} value={newSecret}
onChange={(e) => setNewSecret(e.target.value)} onChange={setNewSecret}
disabled={adding} placeholder="Treasure description"
aria-label="Add new secret" />
}
/> />
{error && <div className="text-red-400 mt-2 text-sm">{error}</div>}
<button
type="submit"
className="px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60"
disabled={adding || !newSecret.trim()}
>
{adding ? "Adding..." : "Add Secret"}
</button>
</form>
); );
}; };

33
src/components/documents/treasure/NewTreasureForm.tsx
View File

@@ -3,6 +3,8 @@
import { useState } from "react"; import { useState } from "react";
import type { CampaignId, Treasure } from "@/lib/types"; import type { CampaignId, Treasure } from "@/lib/types";
import { pb } from "@/lib/pocketbase"; import { pb } from "@/lib/pocketbase";
import { BaseForm } from "@/components/form/BaseForm";
import { SingleLineInput } from "@/components/form/SingleLineInput";
/** /**
* Renders a form to add a new treasure. Calls onCreate with the new treasure document. * Renders a form to add a new treasure. Calls onCreate with the new treasure document.
@@ -42,29 +44,18 @@ export const NewTreasureForm = ({
} }
return ( return (
<form <BaseForm
className="flex flex-col items-center gap-2 mt-4 w-full" title="Create new treasure"
isLoading={adding || !newTreasure.trim()}
onSubmit={handleSubmit} onSubmit={handleSubmit}
> error={error}
<div> content={
<input <SingleLineInput
type="text"
className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
placeholder="Add a new treasure..."
value={newTreasure} value={newTreasure}
onChange={(e) => setNewTreasure(e.target.value)} onChange={setNewTreasure}
disabled={adding} placeholder="Treasure description"
aria-label="Add new treasure" />
}
/> />
</div>
{error && <div className="text-red-400 mt-2 text-sm">{error}</div>}
<button
type="submit"
className="px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60"
disabled={adding || !newTreasure.trim()}
>
{adding ? "Adding..." : "Add Treasure"}
</button>
</form>
); );
}; };

6
src/components/form/BaseForm.tsx
View File

@@ -17,12 +17,12 @@ export const BaseForm = ({
}: Props) => { }: Props) => {
return ( return (
<form className="flex flex-col items-left gap-2" onSubmit={onSubmit}> <form className="flex flex-col items-left gap-2" onSubmit={onSubmit}>
<h3 className="text-lg font-semibold text-slate-100 mb-4">{title}</h3> <h3 className="text-lg font-semibold text-slate-100">{title}</h3>
<div>{content}</div> <div className="flex flex-col gap-2 w-full items-stretch">{content}</div>
{error && <div className="text-red-400 mt-2 text-sm">{error}</div>} {error && <div className="text-red-400 mt-2 text-sm">{error}</div>}
<button <button
type="submit" type="submit"
className="px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60" className="mt-2 px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60"
disabled={isLoading} disabled={isLoading}
> >
{buttonText ? buttonText : "Submit"} {buttonText ? buttonText : "Submit"}

6
src/components/form/MultiLineInput.tsx
View File

@@ -1,6 +1,7 @@
export type Props = { export type Props = {
value: string; value: string;
onChange: (value: string) => void; onChange: (value: string) => void;
label?: string;
className?: string; className?: string;
} & Omit< } & Omit<
React.TextareaHTMLAttributes<HTMLTextAreaElement>, React.TextareaHTMLAttributes<HTMLTextAreaElement>,
@@ -11,12 +12,17 @@ export const MultiLineInput = ({
value, value,
onChange, onChange,
className = "", className = "",
label,
...props ...props
}: Props) => ( }: Props) => (
<>
{label && <label>{label}</label>}
<textarea <textarea
value={value} value={value}
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
className={`w-full min-h-[10em] field-sizing-content p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${className}`} className={`w-full min-h-[10em] field-sizing-content p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${className}`}
aria-label={label}
{...props} {...props}
/> />
</>
); );

29
src/components/form/SingleLineInput.tsx Normal file
View File

@@ -0,0 +1,29 @@
export type Props = {
value: string;
onChange: (value: string) => void;
label?: string;
className?: string;
} & Omit<
React.InputHTMLAttributes<HTMLInputElement>,
"value" | "onChange" | "className"
>;
export const SingleLineInput = ({
value,
onChange,
className = "",
label,
...props
}: Props) => (
<>
{label && <label>{label}</label>}
<input
type="text"
value={value}
onChange={(e) => onChange(e.target.value)}
className={`w-full p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${className}`}
aria-label={label}
{...props}
/>
</>
);