lightnet 3.10.4 → 3.10.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # lightnet
 
+## 3.10.6
+
+### Patch Changes
+
+- [#333](https://github.com/LightNetDev/LightNet/pull/333) [`539a377`](https://github.com/LightNetDev/LightNet/commit/539a377702df9213d0869ae63646f569c10b1867) Thanks [@smn-cds](https://github.com/smn-cds)! - Update dependencies
+
+## 3.10.5
+
+### Patch Changes
+
+- [#331](https://github.com/LightNetDev/LightNet/pull/331) [`cdacfdf`](https://github.com/LightNetDev/LightNet/commit/cdacfdfca311469248cb7d1ac0b46f92d9fd5521) Thanks [@smn-cds](https://github.com/smn-cds)! - Experimenatl Admin UI: support editing categories and collections
+
 ## 3.10.4
 
 ### Patch Changes

package/__e2e__/admin.spec.ts

@@ -2,9 +2,8 @@ import { readFile } from "node:fs/promises"
 
 import { expect, type Page } from "@playwright/test"
 
-import { lightnetTest } from "./test-utils"
+import { test } from "./basics-fixture"
 
-const test = lightnetTest("./fixtures/basics/")
 const faithfulFreestyleMediaUrl = new URL(
   "./fixtures/basics/src/content/media/faithful-freestyle--en.json",
   import.meta.url,
@@ -13,9 +12,9 @@ const faithfulFreestyleMediaUrl = new URL(
 test.describe("Edit button on details page", () => {
   test("Should not show `Edit` button on details page by default.", async ({
     page,
-    startLightnet,
+    lightnet,
   }) => {
-    await startLightnet()
+    await lightnet()
 
     await page.getByRole("link", { name: "Faithful Freestyle" }).click()
     await expect(
@@ -28,9 +27,9 @@ test.describe("Edit button on details page", () => {
 
   test("Should show `Edit` button on book details page after visiting `/en/admin/` path.", async ({
     page,
-    startLightnet,
+    lightnet,
   }) => {
-    const ln = await startLightnet()
+    const ln = await lightnet()
 
     await page.goto(ln.resolveURL("/en/admin/"))
     await expect(
@@ -52,11 +51,10 @@ test.describe("Edit button on details page", () => {
 
   test("Should show `Edit` button on video details page after visiting `/en/admin/` path.", async ({
     page,
-    startLightnet,
+    lightnet,
   }) => {
-    const ln = await startLightnet()
+    const ln = await lightnet("/en/admin/")
 
-    await page.goto(ln.resolveURL("/en/admin/"))
     await expect(
       page.getByText("Admin features are enabled now.", { exact: true }),
     ).toBeVisible()
@@ -76,11 +74,10 @@ test.describe("Edit button on details page", () => {
 
   test("Should show `Edit` button on audio details page after visiting `/en/admin/` path.", async ({
     page,
-    startLightnet,
+    lightnet,
   }) => {
-    const ln = await startLightnet()
+    const ln = await lightnet("/en/admin/")
 
-    await page.goto(ln.resolveURL("/en/admin/"))
     await expect(
       page.getByText("Admin features are enabled now.", { exact: true }),
     ).toBeVisible()
@@ -100,12 +97,10 @@ test.describe("Edit button on details page", () => {
 
   test("Edit button on details page should navigate to media item edit page", async ({
     page,
-    startLightnet,
+    lightnet,
   }) => {
-    const ln = await startLightnet()
-
-    await page.goto(ln.resolveURL("/en/admin/"))
-    await page.goto(ln.resolveURL("/en/media/faithful-freestyle--en"))
+    const ln = await lightnet("/en/admin/")
+    await ln.goto("/en/media/faithful-freestyle--en")
 
     const editButton = page.locator("#edit-btn")
     await expect(editButton).toBeVisible()
@@ -143,19 +138,24 @@ test.describe("Media item edit page", () => {
     return () => writeFileRequestPromise
   }
 
-  test("should edit title", async ({ page, startLightnet }) => {
-    const ln = await startLightnet()
+  const getPublishButton = (page: Page) =>
+    page.getByRole("button", { name: "Publish Changes" }).first()
 
-    const writeFileRequest = await recordWriteFile(page)
+  const expectPublishedMessage = (page: Page) =>
+    expect(
+      page.getByRole("button", { name: "Published" }).first(),
+    ).toBeVisible()
 
-    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+  test("should edit title", async ({ page, lightnet }) => {
+    await lightnet("/en/admin/media/faithful-freestyle--en")
+    const writeFileRequest = await recordWriteFile(page)
 
     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" })
+    const saveButton = getPublishButton(page)
     await expect(saveButton).toBeEnabled()
     await saveButton.click()
 
@@ -171,20 +171,18 @@ test.describe("Media item edit page", () => {
       ...expectedMediaItem,
       title: updatedTitle,
     })
-    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+    await expectPublishedMessage(page)
   })
 
-  test("Should update media type", async ({ page, startLightnet }) => {
-    const ln = await startLightnet()
+  test("Should update media type", async ({ page, lightnet }) => {
+    await lightnet("/en/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
-    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
-
-    const typeSelect = page.getByLabel("Type")
+    const typeSelect = page.getByLabel("Type").first()
     await expect(typeSelect).toHaveValue("book")
     await typeSelect.selectOption("video")
 
-    const saveButton = page.getByRole("button", { name: "Save" })
+    const saveButton = getPublishButton(page)
     await expect(saveButton).toBeEnabled()
     await saveButton.click()
 
@@ -196,22 +194,20 @@ test.describe("Media item edit page", () => {
       ...expectedMediaItem,
       type: "video",
     })
-    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+    await expectPublishedMessage(page)
   })
 
-  test("Should update author name", async ({ page, startLightnet }) => {
-    const ln = await startLightnet()
+  test("Should update author name", async ({ page, lightnet }) => {
+    await lightnet("/en/admin/media/faithful-freestyle--en")
     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" })
+    const saveButton = getPublishButton(page)
     await expect(saveButton).toBeEnabled()
     await saveButton.click()
 
@@ -223,15 +219,13 @@ test.describe("Media item edit page", () => {
       ...expectedMediaItem,
       authors: [updatedAuthor],
     })
-    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+    await expectPublishedMessage(page)
   })
 
-  test("Should add author", async ({ page, startLightnet }) => {
-    const ln = await startLightnet()
+  test("Should add author", async ({ page, lightnet }) => {
+    await lightnet("/en/admin/media/faithful-freestyle--en")
     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()
@@ -239,7 +233,7 @@ test.describe("Media item edit page", () => {
     const additionalAuthor = "Tony Hawk"
     await newAuthorInput.fill(additionalAuthor)
 
-    const saveButton = page.getByRole("button", { name: "Save" })
+    const saveButton = getPublishButton(page)
     await expect(saveButton).toBeEnabled()
     await saveButton.click()
 
@@ -251,15 +245,13 @@ test.describe("Media item edit page", () => {
       ...expectedMediaItem,
       authors: ["Sk8 Ministries", additionalAuthor],
     })
-    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+    await expectPublishedMessage(page)
   })
 
-  test("Should remove author", async ({ page, startLightnet }) => {
-    const ln = await startLightnet()
+  test("Should remove author", async ({ page, lightnet }) => {
+    await lightnet("/en/admin/media/faithful-freestyle--en")
     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"
@@ -272,7 +264,7 @@ test.describe("Media item edit page", () => {
     })
     await removeButtons.first().click()
 
-    const saveButton = page.getByRole("button", { name: "Save" })
+    const saveButton = getPublishButton(page)
     await expect(saveButton).toBeEnabled()
     await saveButton.click()
 
@@ -284,15 +276,14 @@ test.describe("Media item edit page", () => {
       ...expectedMediaItem,
       authors: [replacementAuthor],
     })
-    await expect(page.getByRole("button", { name: "Saved" })).toBeVisible()
+    await expectPublishedMessage(page)
   })
 
   test("should show error message if common id is set empty", async ({
     page,
-    startLightnet,
+    lightnet,
   }) => {
-    const ln = await startLightnet()
-    await page.goto(ln.resolveURL("/en/admin/media/faithful-freestyle--en"))
+    await lightnet("/en/admin/media/faithful-freestyle--en")
 
     const commonIdInput = page.getByLabel("Common ID")
     await expect(commonIdInput).toHaveValue("faithful-freestyle")
@@ -303,8 +294,57 @@ test.describe("Media item edit page", () => {
     await expect(
       page
         .getByRole("alert")
-        .filter({ hasText: "String must contain at least 1 character(s)" }),
+        .filter({ hasText: "Please enter at least one character." }),
+    ).toBeVisible()
+  })
+
+  test("should focus invalid field when submitting invalid form data", async ({
+    page,
+    lightnet,
+  }) => {
+    await lightnet("/en/admin/media/faithful-freestyle--en")
+
+    const categoriesFieldset = page.getByRole("group", { name: "Categories" })
+    await page.getByRole("button", { name: "Add Category" }).click()
+    const newCategorySelect = categoriesFieldset.getByRole("combobox").last()
+    await expect(newCategorySelect).toHaveValue("")
+
+    // move focus away so the submission handler needs to return focus
+    await page.getByLabel("Title").click()
+
+    const saveButton = getPublishButton(page)
+    await saveButton.click()
+
+    await expect(
+      page.getByRole("alert").filter({ hasText: "This field is required." }),
     ).toBeVisible()
-    await expect(page.getByRole("button", { name: "Save" })).toBeDisabled()
+    await expect(newCategorySelect).toBeFocused()
+  })
+
+  test("should not allow assigning duplicate categories", async ({
+    page,
+    lightnet,
+  }) => {
+    await lightnet("/en/admin/media/faithful-freestyle--en")
+
+    const categoriesFieldset = page.getByRole("group", { name: "Categories" })
+    await page.getByRole("button", { name: "Add Category" }).click()
+
+    const categorySelects = categoriesFieldset.getByRole("combobox")
+    const firstCategoryValue = await categorySelects.first().inputValue()
+    const duplicateCategorySelect = categorySelects.last()
+    await duplicateCategorySelect.selectOption(firstCategoryValue)
+
+    const publishButton = getPublishButton(page)
+    await publishButton.click()
+
+    const duplicateCategoryError = categoriesFieldset
+      .getByRole("alert")
+      .filter({ hasText: "Please choose a different value for each entry." })
+    await expect(duplicateCategoryError).toBeVisible()
+    await expect(duplicateCategorySelect).toHaveAttribute(
+      "aria-invalid",
+      "true",
+    )
   })
 })

package/__e2e__/{test-utils.ts → basics-fixture.ts}

@@ -24,7 +24,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import { fileURLToPath } from "node:url"
 
 import { type Page, test as baseTest } from "@playwright/test"
@@ -34,30 +33,26 @@ export { expect, type Locator } from "@playwright/test"
 
 process.env.ASTRO_TELEMETRY_DISABLED = "true"
 process.env.ASTRO_DISABLE_UPDATE_CHECK = "true"
-export function lightnetTest(fixturePath: string) {
-  const root = fileURLToPath(new URL(fixturePath, import.meta.url))
-
-  let server: Server | null = null
-  const test = baseTest.extend<{
-    startLightnet: (path?: string) => Promise<LightNetPage>
-  }>({
-    startLightnet: ({ page }, use) =>
-      use(async (path) => {
-        if (!server) {
-          await build({ logLevel: "error", root })
-          server = await preview({ logLevel: "error", root })
-        }
-        const ln = new LightNetPage(server, page)
-        await ln.goto(path ?? "/")
-        return ln
-      }),
-  })
+const root = fileURLToPath(new URL("./fixtures/basics/", import.meta.url))
 
-  test.afterAll(async () => {
-    await server?.stop()
-  })
+let server: Server | null = null
+const test = baseTest.extend<{
+  lightnet: (path?: string) => Promise<LightNetPage>
+}>({
+  lightnet: ({ page }, use) =>
+    use(async (path) => {
+      if (!server) {
+        await build({ logLevel: "error", root })
+        server = await preview({ logLevel: "error", root })
+      }
+      const ln = new LightNetPage(server, page)
+      await ln.goto(path ?? "/")
+      return ln
+    }),
+})
 
-  return test
+const teardown = async () => {
+  await server?.stop()
 }
 
 // A Playwright test fixture accessible from within all tests.
@@ -78,3 +73,5 @@ class LightNetPage {
 }
 
 type Server = Awaited<ReturnType<typeof preview>>
+
+export { teardown, test }

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.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"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.8_@types+node@24.10.1_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.8_@types+node@24.10.1_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.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"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.8_@types+node@24.10.1_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.8_@types+node@24.10.1_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

@@ -7,8 +7,8 @@
     "@astrojs/react": "^4.4.2",
     "@astrojs/tailwind": "^6.0.2",
     "@lightnet/decap-admin": "^3.1.4",
-    "astro": "^5.15.4",
-    "lightnet": "^3.10.3",
+    "astro": "^5.15.8",
+    "lightnet": "^3.10.5",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "sharp": "^0.34.5",

package/__e2e__/fixtures/basics/src/content/media/faithful-freestyle--en.json

@@ -9,5 +9,5 @@
   "language": "en",
   "categories": ["christian-living"],
   "collections": [{ "collection": "how-to-articles" }],
-  "description": "*How to: Faithful Freestyle* empowers you to express your Christianity through the unique and creative outlet of skateboarding. This book includes:\n\n- **Creative ways to incorporate faith** into your skating routines\n- **Stories of freestyle skaters** who honor God through their sport\n- **Practical advice on witnessing** to others in the skateboarding scene\n- **Inspirational devotions** designed for skaters\n\nEmbrace a faithful freestyle and let every trick and turn reflect your devotion to Christ."
+  "description": "*How to: Faithful Freestyle* empowers you to express your Christianity through the unique and creative outlet of skateboarding. This book includes:\n\n* **Creative ways to incorporate faith** into your skating routines\n* **Stories of freestyle skaters** who honor God through their sport\n* **Practical advice on witnessing** to others in the skateboarding scene\n* **Inspirational devotions** designed for skaters\n\nEmbrace a faithful freestyle and let every trick and turn reflect your devotion to Christ."
 }

package/__e2e__/fixtures/basics/src/content/media/skate-sounds--en.json

@@ -11,5 +11,5 @@
   "image": "./images/cover.jpg",
   "language": "en",
   "categories": ["christian-living"],
-  "description": "A vibrant collection of authentic skate park sounds to energize your projects and playlists.\n\n**Highlights:**\n- Real-world skating ambience\n- Perfect for creative mixes\n- Inspiring background audio for worship gatherings"
+  "description": "A vibrant collection of authentic skate park sounds to energize your projects and playlists.\n\n**Highlights:**\n* Real-world skating ambience\n* Perfect for creative mixes\n* Inspiring background audio for worship gatherings"
 }

package/__e2e__/global.teardown.ts

@@ -0,0 +1,5 @@
+import { teardown } from "./basics-fixture"
+
+export default async function globalTeardown() {
+  await teardown()
+}

package/__e2e__/homepage.spec.ts

@@ -1,34 +1,32 @@
 import { expect } from "@playwright/test"
 
-import { lightnetTest } from "./test-utils"
+import { test } from "./basics-fixture"
 
-const test = lightnetTest("./fixtures/basics/")
-
-test("Should have title set", async ({ page, startLightnet }) => {
-  await startLightnet()
+test("Should have title set", async ({ page, lightnet }) => {
+  await lightnet()
   await expect(page).toHaveTitle("Basic Test")
 })
 
 test("Should have header title that navigates to home page", async ({
   page,
-  startLightnet,
+  lightnet,
 }) => {
-  const ln = await startLightnet()
+  const ln = await lightnet()
   await page.getByRole("link", { name: "Basic Test" }).click()
 
   await expect(page).toHaveURL(ln.resolveURL("/en/"))
 })
 
-test("Should have item section", async ({ page, startLightnet }) => {
-  await startLightnet()
+test("Should have item section", async ({ page, lightnet }) => {
+  await lightnet()
   await expect(page.getByRole("heading", { name: "All items" })).toBeVisible()
 })
 
 test("Should navigate to search page from main menu", async ({
   page,
-  startLightnet,
+  lightnet,
 }) => {
-  const ln = await startLightnet()
+  const ln = await lightnet()
   await expect(
     page.getByRole("button", { name: "Open Main Menu" }),
   ).toBeVisible()
@@ -42,8 +40,8 @@ test("Should navigate to search page from main menu", async ({
   await expect(page.getByRole("heading", { name: "Search" })).toBeVisible()
 })
 
-test("Should switch languages", async ({ page, startLightnet }) => {
-  const ln = await startLightnet()
+test("Should switch languages", async ({ page, lightnet }) => {
+  const ln = await lightnet()
 
   await page.getByLabel("Select language").click()
   await page.getByRole("link", { name: "Deutsch" }).click()
@@ -57,9 +55,9 @@ test("Should switch languages", async ({ page, startLightnet }) => {
 
 test("Should verify EN Detail media page url and title", async ({
   page,
-  startLightnet,
+  lightnet,
 }) => {
-  const ln = await startLightnet()
+  const ln = await lightnet()
 
   await page.getByRole("link", { name: "Faithful Freestyle" }).click()
   await expect(
@@ -80,9 +78,9 @@ test("Should verify EN Detail media page url and title", async ({
 
 test("Should verify DE Detail media page url and title", async ({
   page,
-  startLightnet,
+  lightnet,
 }) => {
-  const ln = await startLightnet()
+  const ln = await lightnet()
 
   await page.getByLabel("Select language").click()
   await page.getByRole("link", { name: "Deutsch" }).click()
@@ -105,9 +103,9 @@ test("Should verify DE Detail media page url and title", async ({
 
 test("Should show `Powered by LightNet` in footer", async ({
   page,
-  startLightnet,
+  lightnet,
 }) => {
-  await startLightnet()
+  await lightnet()
 
   const footerLink = page
     .getByRole("contentinfo")

package/__e2e__/search.spec.ts

@@ -1,14 +1,12 @@
 import { expect } from "@playwright/test"
 
-import { lightnetTest } from "./test-utils"
-
-const test = lightnetTest("./fixtures/basics/")
+import { test } from "./basics-fixture"
 
 test("Search should have heading section and URL", async ({
   page,
-  startLightnet,
+  lightnet,
 }) => {
-  const ln = await startLightnet()
+  const ln = await lightnet()
 
   await page.getByLabel("Search").click()
   await expect(page.getByRole("heading", { name: "Search" })).toBeVisible()

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.4",
+  "version": "3.10.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -47,27 +47,27 @@
   "dependencies": {
     "@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",
+    "@mdxeditor/editor": "^3.49.1",
     "@tailwindcss/typography": "^0.5.19",
     "@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.1",
+    "i18next": "^25.6.2",
     "marked": "^16.4.2",
     "react-hook-form": "^7.66.0",
     "yaml": "^2.8.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",
-    "@types/node": "^22.19.0",
-    "@types/react": "^19.2.2",
+    "@types/node": "^22.19.1",
+    "@types/react": "^19.2.5",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.8"
+    "vitest": "^4.0.9"
   },
   "engines": {
     "node": ">=22"

package/playwright.config.ts

@@ -5,6 +5,7 @@ import { defineConfig, devices } from "@playwright/test"
  */
 export default defineConfig({
   testDir: "./__e2e__",
+  globalTeardown: "./__e2e__/global.teardown.ts",
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */

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

@@ -0,0 +1,74 @@
+import type { ReactNode } from "react"
+import {
+  type ArrayPath,
+  type Control,
+  type FieldValues,
+  useFieldArray,
+  type UseFieldArrayAppend,
+} from "react-hook-form"
+
+import Icon from "../../../components/Icon"
+import { useI18n } from "../../../i18n/react/useI18n"
+import ErrorMessage from "./atoms/ErrorMessage"
+import Hint from "./atoms/Hint"
+import Legend from "./atoms/Legend"
+import { useFieldError } from "./hooks/use-field-error"
+
+export default function DynamicArray<TFieldValues extends FieldValues>({
+  control,
+  name,
+  label,
+  hint,
+  renderElement,
+  addButton,
+}: {
+  name: ArrayPath<TFieldValues>
+  label: string
+  hint?: string
+  control: Control<TFieldValues>
+  renderElement: (index: number) => ReactNode
+  addButton: {
+    label: string
+    onClick: (
+      append: UseFieldArrayAppend<TFieldValues, ArrayPath<TFieldValues>>,
+      elementIndex: number,
+    ) => void
+  }
+}) {
+  const { fields, append, remove } = useFieldArray({
+    name,
+    control,
+  })
+  const { t } = useI18n()
+  const errorMessage = useFieldError({ control, name })
+  return (
+    <fieldset key={name}>
+      <Legend label={label} />
+      <div className="flex w-full flex-col divide-y divide-gray-300 overflow-hidden rounded-lg border border-gray-300 bg-gray-100 shadow-sm">
+        {fields.map((field, index) => (
+          <div className="flex w-full items-center gap-2 p-2" key={field.id}>
+            <div className="flex grow flex-col">{renderElement(index)}</div>
+            <button
+              className="flex items-center p-2 text-gray-600 transition-colors ease-in-out hover:text-rose-800"
+              type="button"
+              onClick={() => remove(index)}
+            >
+              <Icon className="mdi--remove" ariaLabel={t("ln.admin.remove")} />
+            </button>
+          </div>
+        ))}
+        <button
+          type="button"
+          className="p-4 text-sm font-bold text-gray-500 transition-colors ease-in-out hover:bg-gray-200"
+          onClick={() => {
+            addButton.onClick(append, fields.length)
+          }}
+        >
+          {t(addButton.label)}
+        </button>
+      </div>
+      <ErrorMessage message={errorMessage} />
+      <Hint label={hint} />
+    </fieldset>
+  )
+}