ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-08 02:33:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

implemented custom Field component

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-01 03:01:57 +00:00
parent 31fc0d41e6
commit 866796b5de
5 changed files with 125 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
packages/frontend/src/components/create-issue.tsx
View File

@@ -1,4 +1,4 @@
import { type FormEvent, useMemo, useState } from "react"; import { type FormEvent, useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
@@ -8,7 +8,7 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input"; import { Field } from "@/components/ui/field";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { issue } from "@/lib/server"; import { issue } from "@/lib/server";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -27,35 +27,14 @@ export function CreateIssue({
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [title, setTitle] = useState(""); const [title, setTitle] = useState("");
const [description, setDescription] = useState(""); const [description, setDescription] = useState("");
const [titleTouched, setTitleTouched] = useState(false);
const [descriptionTouched, setDescriptionTouched] = useState(false);
const [submitAttempted, setSubmitAttempted] = useState(false); const [submitAttempted, setSubmitAttempted] = useState(false);
const [submitting, setSubmitting] = useState(false); const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const titleInvalid = useMemo(
() => ((titleTouched || submitAttempted) && title.trim() === "" ? "Cannot be empty" : ""),
[titleTouched, submitAttempted, title],
);
const descriptionInvalid = useMemo(
() =>
(descriptionTouched || submitAttempted) && description.trim().length > 2048
? "Too long (2048 character limit)"
: "",
[descriptionTouched, submitAttempted, description],
);
const reset = () => { const reset = () => {
setTitle(""); setTitle("");
setDescription(""); setDescription("");
setTitleTouched(false);
setDescriptionTouched(false);
setSubmitAttempted(false); setSubmitAttempted(false);
setSubmitting(false); setSubmitting(false);
setError(null); setError(null);
}; };
@@ -72,7 +51,7 @@ export function CreateIssue({
setError(null); setError(null);
setSubmitAttempted(true); setSubmitAttempted(true);
if (title.trim() === "" || descriptionInvalid !== "") { if (title.trim() === "" || description.trim().length > 2048) {
return; return;
} }
@@ -130,51 +109,25 @@ export function CreateIssue({
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="grid gap-4 mt-2"> <div className="grid mt-2">
<div className="grid gap-2"> <Field
<Label htmlFor="issue-title">Title</Label> label="Title"
<Input value={title}
id="issue-title" onChange={(e) => setTitle(e.target.value)}
name="title" validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
value={title} submitAttempted={submitAttempted}
onChange={(e) => { placeholder="Demo Issue"
setTitle(e.target.value); />
}} <Field
onBlur={() => setTitleTouched(true)} label="Description (optional)"
aria-invalid={titleInvalid !== ""} value={description}
placeholder="Demo Issue" onChange={(e) => setDescription(e.target.value)}
required validate={(v) =>
/> v.trim().length > 2048 ? "Too long (2048 character limit)" : undefined
<div className="flex items-end justify-end w-full text-xs -mb-4 -mt-2"> }
{titleInvalid !== "" ? ( submitAttempted={submitAttempted}
<Label className="text-destructive text-sm">{titleInvalid}</Label> placeholder="Optional details"
) : ( />
<Label className="opacity-0 text-sm">a</Label>
)}
</div>
</div>
<div className="grid gap-2">
<Label htmlFor="issue-description">Description</Label>
<Input
id="issue-description"
name="description"
value={description}
onChange={(e) => {
setDescription(e.target.value);
}}
onBlur={() => setDescriptionTouched(true)}
aria-invalid={descriptionInvalid !== ""}
placeholder="Optional details"
/>
<div className="flex items-end justify-end w-full text-xs -mb-4 -mt-2">
{descriptionInvalid !== "" ? (
<Label className="text-destructive text-sm">{descriptionInvalid}</Label>
) : (
<Label className="opacity-0 text-sm">a</Label>
)}
</div>
</div>
<div className="flex items-end justify-end w-full text-xs -mb-2 -mt-2"> <div className="flex items-end justify-end w-full text-xs -mb-2 -mt-2">
{error ? ( {error ? (
@@ -184,7 +137,7 @@ export function CreateIssue({
)} )}
</div> </div>
<div className="flex gap-2 w-full justify-end"> <div className="flex gap-2 w-full justify-end mt-2">
<DialogClose asChild> <DialogClose asChild>
<Button variant="outline" type="button"> <Button variant="outline" type="button">
Cancel Cancel
@@ -192,7 +145,11 @@ export function CreateIssue({
</DialogClose> </DialogClose>
<Button <Button
type="submit" type="submit"
disabled={submitting || titleInvalid !== "" || descriptionInvalid !== ""} disabled={
submitting ||
(title.trim() === "" && submitAttempted) ||
(description.trim().length > 2048 && submitAttempted)
}
> >
{submitting ? "Creating..." : "Create"} {submitting ? "Creating..." : "Create"}
</Button> </Button>

128
packages/frontend/src/components/create-organisation.tsx
View File

@@ -1,4 +1,4 @@
import { type FormEvent, useMemo, useState } from "react"; import { type FormEvent, useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
@@ -8,7 +8,7 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input"; import { Field } from "@/components/ui/field";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { organisation } from "@/lib/server"; import { organisation } from "@/lib/server";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -34,34 +34,17 @@ export function CreateOrganisation({
const [name, setName] = useState(""); const [name, setName] = useState("");
const [slug, setSlug] = useState(""); const [slug, setSlug] = useState("");
const [description, setDescription] = useState(""); const [description, setDescription] = useState("");
const [nameTouched, setNameTouched] = useState(false);
const [slugTouched, setSlugTouched] = useState(false);
const [slugManuallyEdited, setSlugManuallyEdited] = useState(false); const [slugManuallyEdited, setSlugManuallyEdited] = useState(false);
const [submitAttempted, setSubmitAttempted] = useState(false); const [submitAttempted, setSubmitAttempted] = useState(false);
const [submitting, setSubmitting] = useState(false); const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const nameInvalid = useMemo(
() => ((nameTouched || submitAttempted) && name.trim() === "" ? "Cannot be empty" : ""),
[nameTouched, submitAttempted, name],
);
const slugInvalid = useMemo(
() => ((slugTouched || submitAttempted) && slug.trim() === "" ? "Cannot be empty" : ""),
[slugTouched, submitAttempted, slug],
);
const reset = () => { const reset = () => {
setName(""); setName("");
setSlug(""); setSlug("");
setDescription(""); setDescription("");
setNameTouched(false);
setSlugTouched(false);
setSlugManuallyEdited(false); setSlugManuallyEdited(false);
setSubmitAttempted(false); setSubmitAttempted(false);
setSubmitting(false); setSubmitting(false);
setError(null); setError(null);
}; };
@@ -128,69 +111,42 @@ export function CreateOrganisation({
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="grid gap-4 mt-2"> <div className="grid mt-2">
<div className="grid gap-2"> <Field
<Label htmlFor="org-name">Name</Label> label="Name"
<Input value={name}
id="org-name" onChange={(e) => {
name="name" const nextName = e.target.value;
value={name} setName(nextName);
onChange={(e) => { if (!slugManuallyEdited) {
const nextName = e.target.value; setSlug(slugify(nextName));
setName(nextName); }
}}
if (!slugManuallyEdited) { validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
setSlug(slugify(nextName)); submitAttempted={submitAttempted}
} placeholder="Demo Organisation"
}} />
onBlur={() => setNameTouched(true)} <Field
aria-invalid={nameInvalid !== ""} label="Slug"
placeholder="Demo Organisation" value={slug}
required onChange={(e) => {
/> setSlug(slugify(e.target.value));
<div className="flex items-end justify-end w-full text-xs -mb-4 -mt-2"> setSlugManuallyEdited(true);
{nameInvalid !== "" ? ( }}
<Label className="text-destructive text-sm">{nameInvalid}</Label> validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
) : ( submitAttempted={submitAttempted}
<Label className="opacity-0 text-sm">a</Label> placeholder="demo-organisation"
)} />
</div> <Field
</div> label="Description (optional)"
value={description}
<div className="grid gap-2"> onChange={(e) => setDescription(e.target.value)}
<Label htmlFor="org-slug">Slug</Label> validate={(v) =>
<Input v.trim().length > 2048 ? "Too long (2048 character limit)" : undefined
id="org-slug" }
name="slug" submitAttempted={submitAttempted}
value={slug} placeholder="What is this organisation for?"
onChange={(e) => { />
setSlug(slugify(e.target.value));
setSlugManuallyEdited(true);
}}
onBlur={() => setSlugTouched(true)}
aria-invalid={slugInvalid !== ""}
placeholder="demo-organisation"
required
/>
<div className="flex items-end justify-end w-full text-xs -mb-4 -mt-2">
{slugInvalid !== "" ? (
<Label className="text-destructive text-sm">{slugInvalid}</Label>
) : (
<Label className="opacity-0 text-sm">a</Label>
)}
</div>
</div>
<div className="grid gap-2">
<Label htmlFor="org-description">Description (optional)</Label>
<Input
id="org-description"
name="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="What is this organisation for?"
/>
</div>
<div className="flex items-end justify-end w-full text-xs -mb-2 -mt-2"> <div className="flex items-end justify-end w-full text-xs -mb-2 -mt-2">
{error ? ( {error ? (
@@ -200,7 +156,7 @@ export function CreateOrganisation({
)} )}
</div> </div>
<div className="flex gap-2 w-full justify-end"> <div className="flex gap-2 w-full justify-end mt-2">
<DialogClose asChild> <DialogClose asChild>
<Button variant="outline" type="button"> <Button variant="outline" type="button">
Cancel Cancel
@@ -208,7 +164,11 @@ export function CreateOrganisation({
</DialogClose> </DialogClose>
<Button <Button
type="submit" type="submit"
disabled={submitting || nameInvalid !== "" || slugInvalid !== ""} disabled={
submitting ||
(name.trim() === "" && submitAttempted) ||
(slug.trim() === "" && submitAttempted)
}
> >
{submitting ? "Creating..." : "Create"} {submitting ? "Creating..." : "Create"}
</Button> </Button>

116
packages/frontend/src/components/create-project.tsx
View File

@@ -1,5 +1,5 @@
import type { ProjectRecord } from "@issue/shared"; import type { ProjectRecord } from "@issue/shared";
import { type FormEvent, useMemo, useState } from "react"; import { type FormEvent, useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
@@ -9,7 +9,7 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input"; import { Field } from "@/components/ui/field";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { project } from "@/lib/server"; import { project } from "@/lib/server";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -34,36 +34,16 @@ export function CreateProject({
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [name, setName] = useState(""); const [name, setName] = useState("");
const [key, setKey] = useState(""); const [key, setKey] = useState("");
const [nameTouched, setNameTouched] = useState(false);
const [keyTouched, setKeyTouched] = useState(false);
const [keyManuallyEdited, setKeyManuallyEdited] = useState(false); const [keyManuallyEdited, setKeyManuallyEdited] = useState(false);
const [submitAttempted, setSubmitAttempted] = useState(false); const [submitAttempted, setSubmitAttempted] = useState(false);
const [submitting, setSubmitting] = useState(false); const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const nameInvalid = useMemo(
() => ((nameTouched || submitAttempted) && name.trim() === "" ? "Cannot be empty" : ""),
[nameTouched, submitAttempted, name],
);
const keyInvalid = useMemo(() => {
if (!(keyTouched || submitAttempted)) return "";
if (key.trim() === "") return "Cannot be empty";
if (key.length > 4) return "Must be 4 or less characters";
return "";
}, [keyTouched, submitAttempted, key]);
const reset = () => { const reset = () => {
setName(""); setName("");
setKey(""); setKey("");
setNameTouched(false);
setKeyTouched(false);
setKeyManuallyEdited(false); setKeyManuallyEdited(false);
setSubmitAttempted(false); setSubmitAttempted(false);
setSubmitting(false); setSubmitting(false);
setError(null); setError(null);
}; };
@@ -80,7 +60,7 @@ export function CreateProject({
setError(null); setError(null);
setSubmitAttempted(true); setSubmitAttempted(true);
if (name.trim() === "" || key.length > 4) { if (name.trim() === "" || key.trim() === "" || key.length > 4) {
return; return;
} }
@@ -140,58 +120,36 @@ export function CreateProject({
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="grid gap-4 mt-2"> <div className="grid mt-2">
<div className="grid gap-2"> <Field
<Label htmlFor="project-name">Name</Label> label="Name"
<Input value={name}
id="project-name" onChange={(e) => {
name="name" const nextName = e.target.value;
value={name} setName(nextName);
onChange={(e) => { if (!keyManuallyEdited) {
const nextName = e.target.value; setKey(keyify(nextName));
setName(nextName); }
}}
if (!keyManuallyEdited) { validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
setKey(keyify(nextName)); submitAttempted={submitAttempted}
} placeholder="Demo Project"
}} />
onBlur={() => setNameTouched(true)} <Field
aria-invalid={nameInvalid !== ""} label="Key"
placeholder="Demo Project" value={key}
required onChange={(e) => {
/> setKey(keyify(e.target.value));
<div className="flex items-end justify-end w-full text-xs -mb-4 -mt-2"> setKeyManuallyEdited(true);
{nameInvalid !== "" ? ( }}
<Label className="text-destructive text-sm">{nameInvalid}</Label> validate={(v) => {
) : ( if (v.trim() === "") return "Cannot be empty";
<Label className="opacity-0 text-sm">a</Label> if (v.length > 4) return "Must be 4 or less characters";
)} return undefined;
</div> }}
</div> submitAttempted={submitAttempted}
placeholder="DEMO"
<div className="grid gap-2"> />
<Label htmlFor="project-key">Key</Label>
<Input
id="project-key"
name="key"
value={key}
onChange={(e) => {
setKey(keyify(e.target.value));
setKeyManuallyEdited(true);
}}
onBlur={() => setKeyTouched(true)}
aria-invalid={keyInvalid !== ""}
placeholder="DEMO"
required
/>
<div className="flex items-end justify-end w-full text-xs -mb-4 -mt-2">
{keyInvalid !== "" ? (
<Label className="text-destructive text-sm">{keyInvalid}</Label>
) : (
<Label className="opacity-0 text-sm">a</Label>
)}
</div>
</div>
<div className="flex items-end justify-end w-full text-xs -mb-2 -mt-2"> <div className="flex items-end justify-end w-full text-xs -mb-2 -mt-2">
{error ? ( {error ? (
@@ -201,7 +159,7 @@ export function CreateProject({
)} )}
</div> </div>
<div className="flex gap-2 w-full justify-end"> <div className="flex gap-2 w-full justify-end mt-2">
<DialogClose asChild> <DialogClose asChild>
<Button variant="outline" type="button"> <Button variant="outline" type="button">
Cancel Cancel
@@ -209,7 +167,11 @@ export function CreateProject({
</DialogClose> </DialogClose>
<Button <Button
type="submit" type="submit"
disabled={submitting || nameInvalid !== "" || keyInvalid !== ""} disabled={
submitting ||
(name.trim() === "" && submitAttempted) ||
((key.trim() === "" || key.length > 4) && submitAttempted)
}
> >
{submitting ? "Creating..." : "Create"} {submitting ? "Creating..." : "Create"}
</Button> </Button>

84
packages/frontend/src/components/login-form.tsx
View File

@@ -1,77 +1,19 @@
/** biome-ignore-all lint/correctness/useExhaustiveDependencies: <> */ /** biome-ignore-all lint/correctness/useExhaustiveDependencies: <> */
import { type ChangeEvent, useEffect, useMemo, useState } from "react"; import { useEffect, useState } from "react";
import { ServerConfigurationDialog } from "@/components/server-configuration-dialog"; import { ServerConfigurationDialog } from "@/components/server-configuration-dialog";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Field } from "@/components/ui/field";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { capitalise, cn, getServerURL } from "@/lib/utils"; import { capitalise, cn, getServerURL } from "@/lib/utils";
function Field({
label = "label",
onChange = () => {},
onBlur,
invalidMessage = "",
hidden = false,
}: {
label: string;
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
onBlur?: () => void;
invalidMessage?: string;
hidden?: boolean;
}) {
return (
<div className="flex flex-col gap-1">
<div className="flex items-end justify-between w-full text-xs">
<Label htmlFor="org-slug" className="flex items-center text-sm">
{label}
</Label>
</div>
<Input
id="org-slug"
placeholder={label}
onChange={onChange}
onBlur={onBlur}
name={label}
aria-invalid={invalidMessage !== ""}
type={hidden ? "password" : "text"}
/>
<div className="flex items-end justify-end w-full text-xs -mb-0 -mt-1">
{invalidMessage !== "" ? (
<Label className="text-destructive text-sm">{invalidMessage}</Label>
) : (
<Label className="opacity-0 text-sm">a</Label>
)}
</div>
</div>
);
}
export default function LogInForm() { export default function LogInForm() {
const [mode, setMode] = useState<"login" | "register">("login"); const [mode, setMode] = useState<"login" | "register">("login");
const [name, setName] = useState(""); const [name, setName] = useState("");
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [nameTouched, setNameTouched] = useState(false);
const [usernameTouched, setUsernameTouched] = useState(false);
const [passwordTouched, setPasswordTouched] = useState(false);
const [submitAttempted, setSubmitAttempted] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [submitAttempted, setSubmitAttempted] = useState(false);
const nameInvalid = useMemo(
() => ((nameTouched || submitAttempted) && name.trim() === "" ? "Cannot be empty" : ""),
[nameTouched, submitAttempted, name],
);
const usernameInvalid = useMemo(
() => ((usernameTouched || submitAttempted) && username.trim() === "" ? "Cannot be empty" : ""),
[usernameTouched, submitAttempted, username],
);
const passwordInvalid = useMemo(
() => ((passwordTouched || submitAttempted) && password.trim() === "" ? "Cannot be empty" : ""),
[passwordTouched, submitAttempted, password],
);
const logIn = () => { const logIn = () => {
if (username.trim() === "" || password.trim() === "") { if (username.trim() === "" || password.trim() === "") {
@@ -154,11 +96,6 @@ export default function LogInForm() {
const resetForm = () => { const resetForm = () => {
setError(""); setError("");
setSubmitAttempted(false); setSubmitAttempted(false);
setNameTouched(false);
setUsernameTouched(false);
setPasswordTouched(false);
requestAnimationFrame(() => focusFirstInput()); requestAnimationFrame(() => focusFirstInput());
}; };
@@ -187,23 +124,26 @@ export default function LogInForm() {
{mode === "register" && ( {mode === "register" && (
<Field <Field
label="Full Name" label="Full Name"
value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
onBlur={() => setNameTouched(true)} validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
invalidMessage={nameInvalid} submitAttempted={submitAttempted}
/> />
)} )}
<Field <Field
label="Username" label="Username"
value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
onBlur={() => setUsernameTouched(true)} validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
invalidMessage={usernameInvalid} submitAttempted={submitAttempted}
/> />
<Field <Field
label="Password" label="Password"
value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
onBlur={() => setPasswordTouched(true)} validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
invalidMessage={passwordInvalid}
hidden={true} hidden={true}
submitAttempted={submitAttempted}
/> />
{mode === "login" ? ( {mode === "login" ? (

4
packages/frontend/src/lib/server/index.ts
View File

@@ -3,6 +3,6 @@ export * as organisation from "./organisation";
export * as project from "./project"; export * as project from "./project";
export type ServerQueryInput = { export type ServerQueryInput = {
onSuccess?: (data: unknown, res: Response) => void; onSuccess?: (data: any, res: Response) => void;
onError?: (error: unknown) => void; onError?: (error: string) => void;
}; };