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

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

@@ -1,6 +1,9 @@
import { useState } from "react";
import type { CampaignId, Location } from "@/lib/types";
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.
@@ -42,42 +45,29 @@ export const NewLocationForm = ({
}
return (
<form
className="flex items-left flex-col gap-2 mt-4"
<BaseForm
title="Create new Location"
onSubmit={handleSubmit}
>
<h3>Create new location</h3>
<div className="flex gap-5 w-full items-center">
<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}
onChange={(e) => setName(e.target.value)}
disabled={adding}
aria-label="Name"
/>
</div>
<div className="flex gap-5 w-full items-center">
<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}
onChange={(e) => setDescription(e.target.value)}
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>
isLoading={adding || !name.trim()}
error={error}
content={
<>
<SingleLineInput
label="Name"
value={name}
onChange={setName}
disabled={adding}
placeholder="Enter location name"
/>
<MultiLineInput
label="Description"
value={description}
placeholder="Enter location description"
onChange={setDescription}
disabled={adding}
/>
</>
}
/>
);
};

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

@@ -1,6 +1,8 @@
import { useState } from "react";
import type { CampaignId, Monster } from "@/lib/types";
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.
@@ -13,7 +15,6 @@ export const NewMonsterForm = ({
onCreate: (monster: Monster) => Promise<void>;
}) => {
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [adding, setAdding] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -28,11 +29,9 @@ export const NewMonsterForm = ({
type: "monster",
data: {
name,
description,
},
});
setName("");
setDescription("");
await onCreate(monsterDoc);
} catch (e: any) {
setError(e?.message || "Failed to add monster.");
@@ -42,31 +41,18 @@ export const NewMonsterForm = ({
}
return (
<form
className="flex items-left flex-col gap-2 mt-4"
<BaseForm
title="Create new monster"
isLoading={adding || !name.trim()}
onSubmit={handleSubmit}
>
<h3>Create new monster</h3>
<div className="flex gap-5 w-full align-center">
<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"
error={error}
content={
<SingleLineInput
value={name}
onChange={(e) => setName(e.target.value)}
disabled={adding}
aria-label="Name"
onChange={setName}
placeholder="Monster 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>
}
/>
);
};

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

@@ -1,6 +1,9 @@
import { useState } from "react";
import type { CampaignId, Npc } from "@/lib/types";
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.
@@ -42,42 +45,29 @@ export const NewNpcForm = ({
}
return (
<form
className="flex items-left flex-col gap-2 mt-4"
<BaseForm
title="Create new NPC"
onSubmit={handleSubmit}
>
<h3>Create new npc</h3>
<div className="flex gap-5 w-full items-center">
<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}
onChange={(e) => setName(e.target.value)}
disabled={adding}
aria-label="Name"
/>
</div>
<div className="flex gap-5 w-full items-center">
<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}
onChange={(e) => setDescription(e.target.value)}
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>
isLoading={adding}
error={error}
content={
<>
<SingleLineInput
label="Name"
value={name}
onChange={setName}
disabled={adding}
placeholder="Enter NPC name"
/>
<MultiLineInput
label="Description"
value={description}
placeholder="Enter NPC description"
onChange={setDescription}
disabled={adding}
/>
</>
}
/>
);
};

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

@@ -3,6 +3,8 @@
import { useState } from "react";
import type { CampaignId, Secret } from "@/lib/types";
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.
@@ -42,24 +44,18 @@ export const NewSecretForm = ({
}
return (
<form className="flex items-center gap-2 mt-4" onSubmit={handleSubmit}>
<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="Add a new secret..."
value={newSecret}
onChange={(e) => setNewSecret(e.target.value)}
disabled={adding}
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>
<BaseForm
title="Create new treasure"
isLoading={adding || !newSecret.trim()}
onSubmit={handleSubmit}
error={error}
content={
<SingleLineInput
value={newSecret}
onChange={setNewSecret}
placeholder="Treasure description"
/>
}
/>
);
};

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

@@ -3,6 +3,8 @@
import { useState } from "react";
import type { CampaignId, Treasure } from "@/lib/types";
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.
@@ -42,29 +44,18 @@ export const NewTreasureForm = ({
}
return (
<form
className="flex flex-col items-center gap-2 mt-4 w-full"
<BaseForm
title="Create new treasure"
isLoading={adding || !newTreasure.trim()}
onSubmit={handleSubmit}
>
<div>
<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="Add a new treasure..."
error={error}
content={
<SingleLineInput
value={newTreasure}
onChange={(e) => setNewTreasure(e.target.value)}
disabled={adding}
aria-label="Add new treasure"
onChange={setNewTreasure}
placeholder="Treasure 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 || !newTreasure.trim()}
>
{adding ? "Adding..." : "Add Treasure"}
</button>
</form>
}
/>
);
};

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

@@ -17,12 +17,12 @@ export const BaseForm = ({
}: Props) => {
return (
<form className="flex flex-col items-left gap-2" onSubmit={onSubmit}>
<h3 className="text-lg font-semibold text-slate-100 mb-4">{title}</h3>
<div>{content}</div>
<h3 className="text-lg font-semibold text-slate-100">{title}</h3>
<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>}
<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"
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}
>
{buttonText ? buttonText : "Submit"}

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

@@ -1,6 +1,7 @@
export type Props = {
value: string;
onChange: (value: string) => void;
label?: string;
className?: string;
} & Omit<
React.TextareaHTMLAttributes<HTMLTextAreaElement>,
@@ -11,12 +12,17 @@ export const MultiLineInput = ({
value,
onChange,
className = "",
label,
...props
}: Props) => (
<textarea
value={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}`}
{...props}
/>
<>
{label && <label>{label}</label>}
<textarea
value={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}`}
aria-label={label}
{...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}
/>
</>
);