lightnet 3.10.2 → 3.10.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # lightnet
 
+## 3.10.4
+
+### Patch Changes
+
+- [#329](https://github.com/LightNetDev/LightNet/pull/329) [`1730ef6`](https://github.com/LightNetDev/LightNet/commit/1730ef6f769d4c0d8fb22acdb86eaf19c3a32b2c) Thanks [@smn-cds](https://github.com/smn-cds)! - Improve performance of react i18n context.
+
+## 3.10.3
+
+### Patch Changes
+
+- [#327](https://github.com/LightNetDev/LightNet/pull/327) [`9f1e468`](https://github.com/LightNetDev/LightNet/commit/9f1e468cc296e62788586a3f3c6f245c8bc0cec9) Thanks [@smn-cds](https://github.com/smn-cds)! - Gracefully handle missing translations in React components to avoid runtime crashes.
+
 ## 3.10.2
 
 ### Patch Changes

package/__e2e__/admin.spec.ts

@@ -1,113 +1,310 @@
-import { expect } from "@playwright/test"
+import { readFile } from "node:fs/promises"
+
+import { expect, type Page } from "@playwright/test"
 
 import { lightnetTest } from "./test-utils"
 
 const test = lightnetTest("./fixtures/basics/")
+const faithfulFreestyleMediaUrl = new URL(
+  "./fixtures/basics/src/content/media/faithful-freestyle--en.json",
+  import.meta.url,
+)
 
-test("Should not show `Edit` button on details page by default.", async ({
-  page,
-  startLightnet,
-}) => {
-  await startLightnet()
+test.describe("Edit button on details page", () => {
+  test("Should not show `Edit` button on details page by default.", async ({
+    page,
+    startLightnet,
+  }) => {
+    await startLightnet()
 
-  await page.getByRole("link", { name: "Faithful Freestyle" }).click()
-  await expect(
-    page.getByRole("heading", { name: "Faithful Freestyle" }),
-  ).toBeVisible()
+    await page.getByRole("link", { name: "Faithful Freestyle" }).click()
+    await expect(
+      page.getByRole("heading", { name: "Faithful Freestyle" }),
+    ).toBeVisible()
 
-  const editButton = page.locator("#edit-btn")
-  await expect(editButton).toBeHidden()
-})
+    const editButton = page.locator("#edit-btn")
+    await expect(editButton).toBeHidden()
+  })
 
-test("Should show `Edit` button on book details page after visiting `/en/admin/` path.", async ({
-  page,
-  startLightnet,
-}) => {
-  const ln = await startLightnet()
-
-  await page.goto(ln.resolveURL("/en/admin/"))
-  await expect(
-    page.getByText("Admin features are enabled now.", { exact: true }),
-  ).toBeVisible()
-
-  await page.goto(ln.resolveURL("/en/media/faithful-freestyle--en"))
-  await expect(
-    page.getByRole("heading", { name: "Faithful Freestyle" }),
-  ).toBeVisible()
-
-  const editButton = page.locator("#edit-btn")
-  await expect(editButton).toBeVisible()
-  await expect(editButton).toHaveAttribute(
-    "href",
-    "/en/admin/media/faithful-freestyle--en",
-  )
-})
+  test("Should show `Edit` button on book details page after visiting `/en/admin/` path.", async ({
+    page,
+    startLightnet,
+  }) => {
+    const ln = await startLightnet()
 
-test("Should show `Edit` button on video details page after visiting `/en/admin/` path.", async ({
-  page,
-  startLightnet,
-}) => {
-  const ln = await startLightnet()
-
-  await page.goto(ln.resolveURL("/en/admin/"))
-  await expect(
-    page.getByText("Admin features are enabled now.", { exact: true }),
-  ).toBeVisible()
-
-  await page.goto(ln.resolveURL("/en/media/how-to-kickflip--de"))
-  await expect(
-    page.getByRole("heading", { name: "Kickflip Anleitung" }),
-  ).toBeVisible()
-
-  const editButton = page.locator("#edit-btn")
-  await expect(editButton).toBeVisible()
-  await expect(editButton).toHaveAttribute(
-    "href",
-    "/en/admin/media/how-to-kickflip--de",
-  )
-})
+    await page.goto(ln.resolveURL("/en/admin/"))
+    await expect(
+      page.getByText("Admin features are enabled now.", { exact: true }),
+    ).toBeVisible()
+
+    await page.goto(ln.resolveURL("/en/media/faithful-freestyle--en"))
+    await expect(
+      page.getByRole("heading", { name: "Faithful Freestyle" }),
+    ).toBeVisible()
+
+    const editButton = page.locator("#edit-btn")
+    await expect(editButton).toBeVisible()
+    await expect(editButton).toHaveAttribute(
+      "href",
+      "/en/admin/media/faithful-freestyle--en",
+    )
+  })
+
+  test("Should show `Edit` button on video details page after visiting `/en/admin/` path.", async ({
+    page,
+    startLightnet,
+  }) => {
+    const ln = await startLightnet()
+
+    await page.goto(ln.resolveURL("/en/admin/"))
+    await expect(
+      page.getByText("Admin features are enabled now.", { exact: true }),
+    ).toBeVisible()
+
+    await page.goto(ln.resolveURL("/en/media/how-to-kickflip--de"))
+    await expect(
+      page.getByRole("heading", { name: "Kickflip Anleitung" }),
+    ).toBeVisible()
+
+    const editButton = page.locator("#edit-btn")
+    await expect(editButton).toBeVisible()
+    await expect(editButton).toHaveAttribute(
+      "href",
+      "/en/admin/media/how-to-kickflip--de",
+    )
+  })
+
+  test("Should show `Edit` button on audio details page after visiting `/en/admin/` path.", async ({
+    page,
+    startLightnet,
+  }) => {
+    const ln = await startLightnet()
+
+    await page.goto(ln.resolveURL("/en/admin/"))
+    await expect(
+      page.getByText("Admin features are enabled now.", { exact: true }),
+    ).toBeVisible()
+
+    await page.goto(ln.resolveURL("/en/media/skate-sounds--en"))
+    await expect(
+      page.getByRole("heading", { name: "Skate Sounds" }),
+    ).toBeVisible()
 
-test("Should show `Edit` button on audio details page after visiting `/en/admin/` path.", async ({
-  page,
-  startLightnet,
-}) => {
-  const ln = await startLightnet()
-
-  await page.goto(ln.resolveURL("/en/admin/"))
-  await expect(
-    page.getByText("Admin features are enabled now.", { exact: true }),
-  ).toBeVisible()
-
-  await page.goto(ln.resolveURL("/en/media/skate-sounds--en"))
-  await expect(
-    page.getByRole("heading", { name: "Skate Sounds" }),
-  ).toBeVisible()
-
-  const editButton = page.locator("#edit-btn")
-  await expect(editButton).toBeVisible()
-  await expect(editButton).toHaveAttribute(
-    "href",
-    "/en/admin/media/skate-sounds--en",
-  )
+    const editButton = page.locator("#edit-btn")
+    await expect(editButton).toBeVisible()
+    await expect(editButton).toHaveAttribute(
+      "href",
+      "/en/admin/media/skate-sounds--en",
+    )
+  })
+
+  test("Edit button on details page should navigate to media item edit page", async ({
+    page,
+    startLightnet,
+  }) => {
+    const ln = await startLightnet()
+
+    await page.goto(ln.resolveURL("/en/admin/"))
+    await page.goto(ln.resolveURL("/en/media/faithful-freestyle--en"))
+
+    const editButton = page.locator("#edit-btn")
+    await expect(editButton).toBeVisible()
+
+    await editButton.click()
+    await expect(page).toHaveURL(
+      ln.resolveURL("/en/admin/media/faithful-freestyle--en"),
+    )
+    await expect(
+      page.getByText("Edit media item", { exact: false }),
+    ).toBeVisible()
+  })
 })
 
-test("Edit button on details page should navigate to media item edit page", async ({
-  page,
-  startLightnet,
-}) => {
-  const ln = await startLightnet()
-
-  await page.goto(ln.resolveURL("/en/admin/"))
-  await page.goto(ln.resolveURL("/en/media/faithful-freestyle--en"))
-
-  const editButton = page.locator("#edit-btn")
-  await expect(editButton).toBeVisible()
-
-  await editButton.click()
-  await expect(page).toHaveURL(
-    ln.resolveURL("/en/admin/media/faithful-freestyle--en"),
-  )
-  await expect(
-    page.getByText("Edit media item", { exact: false }),
-  ).toBeVisible()
+test.describe("Media item edit page", () => {
+  const recordWriteFile = async (page: Page) => {
+    type WriteFileRequest = { url: string; body: unknown }
+    let resolveWriteFileRequest: ((value: WriteFileRequest) => void) | null =
+      null
+    const writeFileRequestPromise = new Promise<WriteFileRequest>((resolve) => {
+      resolveWriteFileRequest = resolve
+    })
+    await page.route("**/api/internal/fs/write-file?*", async (route) => {
+      const request = route.request()
+      resolveWriteFileRequest?.({
+        url: request.url(),
+        body: JSON.parse(request.postData() ?? ""),
+      })
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({ status: "ok" }),
+      })
+    })
+    return () => writeFileRequestPromise
+  }
+
+  test("should edit title", async ({ page, startLightnet }) => {
+    const ln = await startLightnet()
+
+    const writeFileRequest = await recordWriteFile(page)
+
+    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+
+    const updatedTitle = "Faithful Freestyle (Edited)"
+    const titleInput = page.getByLabel("Title")
+    await expect(titleInput).toHaveValue("Faithful Freestyle")
+    await titleInput.fill(updatedTitle)
+
+    const saveButton = page.getByRole("button", { name: "Save" })
+    await expect(saveButton).toBeEnabled()
+    await saveButton.click()
+
+    const { url, body } = await writeFileRequest()
+    expect(url).toContain(
+      "/api/internal/fs/write-file?path=src%2Fcontent%2Fmedia%2Ffaithful-freestyle--en.json",
+    )
+
+    const expectedMediaItem = JSON.parse(
+      await readFile(faithfulFreestyleMediaUrl, "utf-8"),
+    )
+    expect(body).toEqual({
+      ...expectedMediaItem,
+      title: updatedTitle,
+    })
+    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+  })
+
+  test("Should update media type", async ({ page, startLightnet }) => {
+    const ln = await startLightnet()
+    const writeFileRequest = await recordWriteFile(page)
+
+    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+
+    const typeSelect = page.getByLabel("Type")
+    await expect(typeSelect).toHaveValue("book")
+    await typeSelect.selectOption("video")
+
+    const saveButton = page.getByRole("button", { name: "Save" })
+    await expect(saveButton).toBeEnabled()
+    await saveButton.click()
+
+    const { body } = await writeFileRequest()
+    const expectedMediaItem = JSON.parse(
+      await readFile(faithfulFreestyleMediaUrl, "utf-8"),
+    )
+    expect(body).toEqual({
+      ...expectedMediaItem,
+      type: "video",
+    })
+    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+  })
+
+  test("Should update author name", async ({ page, startLightnet }) => {
+    const ln = await startLightnet()
+    const writeFileRequest = await recordWriteFile(page)
+
+    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+
+    const authorsFieldset = page.getByRole("group", { name: "Authors" })
+    const firstAuthorInput = authorsFieldset.getByRole("textbox").first()
+    const updatedAuthor = "Sk8 Ministries International"
+    await expect(firstAuthorInput).toHaveValue("Sk8 Ministries")
+    await firstAuthorInput.fill(updatedAuthor)
+
+    const saveButton = page.getByRole("button", { name: "Save" })
+    await expect(saveButton).toBeEnabled()
+    await saveButton.click()
+
+    const { body } = await writeFileRequest()
+    const expectedMediaItem = JSON.parse(
+      await readFile(faithfulFreestyleMediaUrl, "utf-8"),
+    )
+    expect(body).toEqual({
+      ...expectedMediaItem,
+      authors: [updatedAuthor],
+    })
+    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+  })
+
+  test("Should add author", async ({ page, startLightnet }) => {
+    const ln = await startLightnet()
+    const writeFileRequest = await recordWriteFile(page)
+
+    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+
+    const authorsFieldset = page.getByRole("group", { name: "Authors" })
+    const addAuthorButton = page.getByRole("button", { name: "Add Author" })
+    await addAuthorButton.click()
+    const newAuthorInput = authorsFieldset.getByRole("textbox").last()
+    const additionalAuthor = "Tony Hawk"
+    await newAuthorInput.fill(additionalAuthor)
+
+    const saveButton = page.getByRole("button", { name: "Save" })
+    await expect(saveButton).toBeEnabled()
+    await saveButton.click()
+
+    const { body } = await writeFileRequest()
+    const expectedMediaItem = JSON.parse(
+      await readFile(faithfulFreestyleMediaUrl, "utf-8"),
+    )
+    expect(body).toEqual({
+      ...expectedMediaItem,
+      authors: ["Sk8 Ministries", additionalAuthor],
+    })
+    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+  })
+
+  test("Should remove author", async ({ page, startLightnet }) => {
+    const ln = await startLightnet()
+    const writeFileRequest = await recordWriteFile(page)
+
+    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+
+    const authorsFieldset = page.getByRole("group", { name: "Authors" })
+    const addAuthorButton = page.getByRole("button", { name: "Add Author" })
+    const replacementAuthor = "Skate Evangelists"
+    await addAuthorButton.click()
+    const addedAuthorInput = authorsFieldset.getByRole("textbox").last()
+    await addedAuthorInput.fill(replacementAuthor)
+
+    const removeButtons = authorsFieldset.getByRole("button", {
+      name: "Remove",
+    })
+    await removeButtons.first().click()
+
+    const saveButton = page.getByRole("button", { name: "Save" })
+    await expect(saveButton).toBeEnabled()
+    await saveButton.click()
+
+    const { body } = await writeFileRequest()
+    const expectedMediaItem = JSON.parse(
+      await readFile(faithfulFreestyleMediaUrl, "utf-8"),
+    )
+    expect(body).toEqual({
+      ...expectedMediaItem,
+      authors: [replacementAuthor],
+    })
+    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+  })
+
+  test("should show error message if common id is set empty", async ({
+    page,
+    startLightnet,
+  }) => {
+    const ln = await startLightnet()
+    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+
+    const commonIdInput = page.getByLabel("Common ID")
+    await expect(commonIdInput).toHaveValue("faithful-freestyle")
+
+    await commonIdInput.fill("")
+    await commonIdInput.blur()
+
+    await expect(
+      page
+        .getByRole("alert")
+        .filter({ hasText: "String must contain at least 1 character(s)" }),
+    ).toBeVisible()
+    await expect(page.getByRole("button", { name: "Save" })).toBeDisabled()
+  })
 })

package/__e2e__/fixtures/basics/node_modules/.bin/astro

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.14.8_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.52.5_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.14.8_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.52.5_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.4_@types+node@24.10.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.4_@types+node@24.10.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.14.8_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.52.5_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.14.8_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.52.5_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.4_@types+node@24.10.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.4_@types+node@24.10.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../astro/astro.js" "$@"

package/__e2e__/fixtures/basics/package.json

@@ -4,14 +4,14 @@
   "version": "0.0.1",
   "private": "true",
   "dependencies": {
-    "@astrojs/react": "^4.4.0",
+    "@astrojs/react": "^4.4.2",
     "@astrojs/tailwind": "^6.0.2",
-    "@lightnet/decap-admin": "^3.1.3",
-    "astro": "^5.14.8",
-    "lightnet": "^3.10.0",
+    "@lightnet/decap-admin": "^3.1.4",
+    "astro": "^5.15.4",
+    "lightnet": "^3.10.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "sharp": "^0.34.4",
+    "sharp": "^0.34.5",
     "tailwindcss": "^3.4.18",
     "typescript": "^5.9.3"
   },

package/package.json

@@ -3,7 +3,7 @@
   "description": "LightNet makes it easy to run your own digital media library.",
   "type": "module",
   "license": "MIT",
-  "version": "3.10.2",
+  "version": "3.10.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -34,7 +34,7 @@
     "./api/internal/search.ts": "./src/pages/search-page/api/search.ts",
     "./api/versions.ts": "./src/api/versions.ts",
     "./api/media/[mediaId].ts": "./src/api/media/[mediaId].ts",
-    "./api/internal/fs/writeText.ts": "./src/admin/api/fs/writeText.ts",
+    "./api/internal/fs/write-file.ts": "./src/admin/api/fs/write-file.ts",
     "./admin/pages/AdminRoute.astro": "./src/admin/pages/AdminRoute.astro",
     "./admin/pages/media/EditRoute.astro": "./src/admin/pages/media/EditRoute.astro"
   },
@@ -45,28 +45,29 @@
     "tailwindcss": ">=3.4.0 <4.0.0"
   },
   "dependencies": {
-    "@astrojs/react": "^4.4.0",
+    "@astrojs/react": "^4.4.2",
     "@astrojs/tailwind": "^6.0.2",
+    "@hookform/error-message": "^2.0.1",
+    "@hookform/resolvers": "^5.2.2",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
     "@tailwindcss/typography": "^0.5.19",
-    "@tanstack/react-form": "^1.23.7",
-    "@tanstack/react-query": "^5.90.5",
     "@tanstack/react-virtual": "^3.13.12",
     "daisyui": "^4.12.24",
     "embla-carousel": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
     "fuse.js": "^7.1.0",
-    "i18next": "^25.6.0",
-    "marked": "^16.4.1",
+    "i18next": "^25.6.1",
+    "marked": "^16.4.2",
+    "react-hook-form": "^7.66.0",
     "yaml": "^2.8.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",
-    "@types/node": "^22.18.12",
+    "@types/node": "^22.19.0",
     "@types/react": "^19.2.2",
     "typescript": "^5.9.3",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.8"
   },
   "engines": {
     "node": ">=22"

package/src/admin/api/fs/{writeText.ts → write-file.ts}

@@ -1,5 +1,7 @@
-import { mkdir, rename, rm, writeFile } from "node:fs/promises"
+import { createWriteStream } from "node:fs"
+import { mkdir, rename, rm } from "node:fs/promises"
 import { dirname, isAbsolute, relative, resolve } from "node:path"
+import { Writable } from "node:stream"
 import { fileURLToPath } from "node:url"
 
 import type { APIRoute } from "astro"
@@ -26,16 +28,17 @@ export const POST: APIRoute = async ({ request }) => {
   ) {
     throw new Error("Path escapes project root.")
   }
+  const { body } = request
+  if (!body) {
+    throw new Error("Request body missing.")
+  }
 
   const targetDir = dirname(targetPath)
   await mkdir(targetDir, { recursive: true })
 
-  const body = await request.text()
-  const timestamp = Date.now()
-  const tmpPath = `${targetPath}.tmp-${timestamp}`
+  const tmpPath = `${targetPath}.tmp-${Date.now()}`
   try {
-    const tmpPath = `${targetPath}.tmp-${Date.now()}`
-    await writeFile(tmpPath, body, "utf-8")
+    await body.pipeTo(Writable.toWeb(createWriteStream(tmpPath)))
     await rename(tmpPath, targetPath)
   } finally {
     await rm(tmpPath, { force: true }).catch(() => {})

package/src/admin/components/form/Input.tsx

@@ -0,0 +1,36 @@
+import { type Control, type FieldValues, type Path } from "react-hook-form"
+
+import ErrorMessage from "./atoms/ErrorMessage"
+import Hint from "./atoms/Hint"
+import Label from "./atoms/Label"
+import { useFieldError } from "./hooks/use-field-error"
+
+export default function Input<TFieldValues extends FieldValues>({
+  name,
+  label,
+  hint,
+  control,
+  type = "text",
+}: {
+  name: Path<TFieldValues>
+  label: string
+  hint?: string
+  control: Control<TFieldValues>
+  type?: "text" | "date"
+}) {
+  const hasError = !!useFieldError({ control, name })
+  return (
+    <div key={name} className="flex w-full flex-col">
+      <Label for={name} label={label} />
+      <input
+        className={`dy-input dy-input-bordered ${hasError ? "dy-input-error" : ""}`}
+        type={type}
+        id={name}
+        aria-invalid={hasError}
+        {...control.register(name)}
+      />
+      <ErrorMessage name={name} control={control} />
+      <Hint hint={hint} />
+    </div>
+  )
+}

package/src/admin/components/form/Select.tsx

@@ -0,0 +1,43 @@
+import type { Control, FieldValues, Path } from "react-hook-form"
+
+import { useI18n } from "../../../i18n/react/useI18n"
+import ErrorMessage from "./atoms/ErrorMessage"
+import Hint from "./atoms/Hint"
+import Label from "./atoms/Label"
+import { useFieldError } from "./hooks/use-field-error"
+
+export default function Select<TFieldValues extends FieldValues>({
+  name,
+  label,
+  control,
+  hint,
+  options,
+}: {
+  name: Path<TFieldValues>
+  label: string
+  hint?: string
+  control: Control<TFieldValues>
+  options: { id: string; label?: string }[]
+}) {
+  const { t } = useI18n()
+  const hasError = !!useFieldError({ control, name })
+  return (
+    <div key={name} className="flex w-full flex-col">
+      <Label for={name} label={label} />
+      <select
+        {...control.register(name)}
+        id={name}
+        aria-invalid={hasError}
+        className={`dy-select dy-select-bordered ${hasError ? "dy-select-error" : ""}"`}
+      >
+        {options.map(({ id, label }) => (
+          <option key={id} value={id}>
+            {label ? t(label) : id}
+          </option>
+        ))}
+      </select>
+      <ErrorMessage name={name} control={control} />
+      <Hint hint={hint} />
+    </div>
+  )
+}