diff --git a/docs/AI_USAGE.md b/docs/AI_USAGE.md index 653e0e5..64ee17b 100644 --- a/docs/AI_USAGE.md +++ b/docs/AI_USAGE.md @@ -187,6 +187,18 @@ - **Review:** The team checked the page in the browser, corrected theme-token use and image sizing, and reviewed keyboard navigation and accessible names. +## Your gymnasts overview (`src/components/gymnasts/`, `src/lib/gymnasts.ts`) + +- **Tool:** GitHub Copilot +- **What the team did:** Provided the page mockup and required existing theme + colors, accessible rows, and an add-gymnast flow. +- **What GitHub Copilot did:** Added the `/gymnasts` route, gymnast rows and + initials, name normalization, and an accessible inline add form with local + state. It used the project's existing CSS variables rather than the mockup's + placeholder colors. +- **Review:** The team exercised the form in the browser at desktop and mobile + widths. The list remains local until the GraphQL API is available. + ## Missing fields in the GraphQL schema (`backend/src/schema.graphql`, `docs/API.md`) - **Tool:** Claude Code, and Claude for the research. diff --git a/src/App.tsx b/src/App.tsx index e85caf4..c474b73 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,6 +3,7 @@ import './index.css' import './styles/variables.css' import './styles/global.css' import ElementDetailPage from './components/elements/ElementDetailPage' +import YourGymnastsPage from './components/gymnasts/YourGymnastsPage' function App() { return ( @@ -12,6 +13,7 @@ function App() { element={} /> } /> + } /> } /> ) diff --git a/src/components/gymnasts/GymnastList.test.tsx b/src/components/gymnasts/GymnastList.test.tsx new file mode 100644 index 0000000..e3b933b --- /dev/null +++ b/src/components/gymnasts/GymnastList.test.tsx @@ -0,0 +1,34 @@ +import { renderToString } from "react-dom/server"; +import { describe, expect, it } from "vitest"; +import GymnastList from "./GymnastList"; + +describe("GymnastList", () => { + it("renders names with initials", () => { + const markup = renderToString( + , + ); + + expect(markup).toContain("Ingrid Haugen"); + expect(markup).toContain("IH"); + expect(markup).toContain("Emma Berg"); + expect(markup).toContain("EB"); + }); + + it("has a heading for the list", () => { + const markup = renderToString(); + + expect(markup).toMatch(/]*>Gymnast list<\/h2>/); + }); + + it("announces the empty list state", () => { + const markup = renderToString(); + + expect(markup).toContain('role="status"'); + expect(markup).toContain("You haven’t added any gymnasts yet."); + }); +}); \ No newline at end of file diff --git a/src/components/gymnasts/GymnastList.tsx b/src/components/gymnasts/GymnastList.tsx new file mode 100644 index 0000000..39f56d0 --- /dev/null +++ b/src/components/gymnasts/GymnastList.tsx @@ -0,0 +1,30 @@ +import GymnastRow from "@/components/gymnasts/GymnastRow"; +import type { GymnastSummary } from "@/lib/gymnasts"; + +export default function GymnastList({ + gymnasts, +}: { + gymnasts: GymnastSummary[]; +}) { + return ( +
+

+ Gymnast list +

+ {gymnasts.length === 0 ? ( +

+ You haven’t added any gymnasts yet. +

+ ) : ( +
    + {gymnasts.map((gymnast) => ( + + ))} +
+ )} +
+ ); +} \ No newline at end of file diff --git a/src/components/gymnasts/GymnastRow.tsx b/src/components/gymnasts/GymnastRow.tsx new file mode 100644 index 0000000..2a955f8 --- /dev/null +++ b/src/components/gymnasts/GymnastRow.tsx @@ -0,0 +1,18 @@ +import type { GymnastSummary } from "@/lib/gymnasts"; +import { getGymnastInitials } from "@/lib/gymnasts"; + +export default function GymnastRow({ gymnast }: { gymnast: GymnastSummary }) { + return ( +
  • +
    + +

    {gymnast.name}

    +
    +
    • + ); +} \ No newline at end of file diff --git a/src/components/gymnasts/YourGymnastsPage.tsx b/src/components/gymnasts/YourGymnastsPage.tsx new file mode 100644 index 0000000..f2700a7 --- /dev/null +++ b/src/components/gymnasts/YourGymnastsPage.tsx @@ -0,0 +1,150 @@ +import { useEffect, useRef, useState } from "react"; +import { Plus, X } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import GymnastList from "@/components/gymnasts/GymnastList"; +import { + exampleGymnasts, + getGymnastNameError, + normalizeGymnastName, + type GymnastSummary, +} from "@/lib/gymnasts"; + +export default function YourGymnastsPage() { + const [gymnasts, setGymnasts] = useState(exampleGymnasts); + const [isFormOpen, setIsFormOpen] = useState(false); + const [name, setName] = useState(""); + const [error, setError] = useState(""); + const [announcement, setAnnouncement] = useState(""); + const nameInput = useRef(null); + const addButton = useRef(null); + const wasFormOpen = useRef(false); + + useEffect(() => { + if (isFormOpen) { + nameInput.current?.focus(); + wasFormOpen.current = true; + } else if (wasFormOpen.current) { + addButton.current?.focus(); + wasFormOpen.current = false; + } + }, [isFormOpen]); + + function closeForm() { + setIsFormOpen(false); + setName(""); + setError(""); + } + + function addGymnast(event: React.FormEvent) { + event.preventDefault(); + const normalizedName = normalizeGymnastName(name); + const nameError = getGymnastNameError(name); + + if (nameError) { + setError(nameError); + nameInput.current?.focus(); + return; + } + + const gymnast: GymnastSummary = { + id: crypto.randomUUID(), + name: normalizedName, + }; + + setGymnasts((currentGymnasts) => [...currentGymnasts, gymnast]); + setAnnouncement(`${normalizedName} added to your gymnasts.`); + closeForm(); + } + + return ( +
    +
    +

    + {announcement} +

    +
    +

    Your gymnasts

    + {!isFormOpen && ( + + )} +
    + + {isFormOpen && ( +
    +
    +

    Add gymnast

    + +
    +
    + + { + setName(event.target.value); + setError(""); + }} + aria-invalid={Boolean(error)} + aria-describedby={error ? "gymnast-name-error" : undefined} + className="h-11 w-full rounded-md border border-(--box-stroke) bg-(--background-color-element) px-3 text-(--text-color-dark) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--text-color-dark)" + /> + {error && ( + + )} +
    +
    + + +
    +
    + )} + + +
    +
    + ); +} \ No newline at end of file diff --git a/src/lib/gymnasts.test.ts b/src/lib/gymnasts.test.ts new file mode 100644 index 0000000..4104be1 --- /dev/null +++ b/src/lib/gymnasts.test.ts @@ -0,0 +1,29 @@ +import { describe, expect, it } from "vitest"; +import { + getGymnastInitials, + getGymnastNameError, + normalizeGymnastName, +} from "./gymnasts"; + +describe("gymnast helpers", () => { + it("creates initials from the first and last name", () => { + expect(getGymnastInitials("Ingrid Haugen")).toBe("IH"); + }); + + it("handles a single name and empty input", () => { + expect(getGymnastInitials("Madonna")).toBe("MA"); + expect(getGymnastInitials(" ")).toBe("?"); + }); + + it("trims and collapses whitespace in names", () => { + expect(normalizeGymnastName(" Emma Berg ")).toBe("Emma Berg"); + }); + + it("rejects blank and overlong names", () => { + expect(getGymnastNameError(" ")).toBe("Enter a gymnast name."); + expect(getGymnastNameError("A".repeat(71))).toBe( + "Names must be 70 characters or fewer.", + ); + expect(getGymnastNameError("Sofia Hansen")).toBeUndefined(); + }); +}); \ No newline at end of file diff --git a/src/lib/gymnasts.ts b/src/lib/gymnasts.ts new file mode 100644 index 0000000..ef27b6e --- /dev/null +++ b/src/lib/gymnasts.ts @@ -0,0 +1,33 @@ +export type GymnastSummary = { + id: string; + name: string; +}; + +export const exampleGymnasts: GymnastSummary[] = [ + { id: "gymnast-1", name: "Ingrid Haugen" }, + { id: "gymnast-2", name: "Emma Berg" }, +]; + +export function getGymnastInitials(name: string): string { + const words = name.trim().split(/\s+/).filter(Boolean); + + if (words.length === 0) return "?"; + if (words.length === 1) return words[0].slice(0, 2).toUpperCase(); + + return `${words[0][0]}${words.at(-1)?.[0] ?? ""}`.toUpperCase(); +} + +export function normalizeGymnastName(name: string): string { + return name.trim().replace(/\s+/g, " "); +} + +export function getGymnastNameError(name: string): string | undefined { + const normalizedName = normalizeGymnastName(name); + + if (!normalizedName) return "Enter a gymnast name."; + if (normalizedName.length > 70) { + return "Names must be 70 characters or fewer."; + } + + return undefined; +} \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index 26d7467..4db4f32 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,3 +1,19 @@ #root .element-detail-page :is(h1, h2) { color: var(--text-color-dark); } + +#root .your-gymnasts-page :is(h1, h2) { + color: var(--text-color-dark); +} + +#root .your-gymnasts-page h1 { + font-size: 42px; + line-height: 1.1; + margin: 0; +} + +#root .your-gymnasts-page h2 { + font-size: 19px; + line-height: 1.2; + margin: 0; +}