lightnet 3.10.3 → 3.10.5

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 errorMessage = 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 shadow-inner ${errorMessage ? "dy-input-error" : ""}`}
+        type={type}
+        id={name}
+        aria-invalid={!!errorMessage}
+        {...control.register(name)}
+      />
+      <ErrorMessage message={errorMessage} />
+      <Hint label={hint} />
+    </div>
+  )
+}

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

@@ -1,39 +1,41 @@
-import { useI18n } from "../../../i18n/react/useI18n"
-import { FieldErrors } from "./atoms/FieldErrors"
+import type { Control, FieldValues, Path } from "react-hook-form"
+
+import ErrorMessage from "./atoms/ErrorMessage"
 import Hint from "./atoms/Hint"
 import Label from "./atoms/Label"
-import { useFieldContext } from "./form-context"
+import { useFieldError } from "./hooks/use-field-error"
 
-export default function Select({
+export default function Select<TFieldValues extends FieldValues>({
+  name,
   label,
+  control,
   hint,
   options,
 }: {
+  name: Path<TFieldValues>
   label: string
   hint?: string
-  options: { id: string; label?: string }[]
+  control: Control<TFieldValues>
+  options: { id: string; labelText?: string }[]
 }) {
-  const field = useFieldContext<string>()
-  const { t } = useI18n()
+  const errorMessage = useFieldError({ control, name })
   return (
-    <label className="dy-form-control w-full">
-      <Label label={label} />
+    <div key={name} className="flex w-full flex-col">
+      <Label for={name} label={label} />
       <select
-        id={field.name}
-        name={field.name}
-        value={field.state.value}
-        onChange={(e) => field.handleChange(e.target.value)}
-        onBlur={field.handleBlur}
-        className={`dy-select dy-select-bordered ${field.state.meta.errors.length ? "dy-select-error" : ""}"`}
+        {...control.register(name)}
+        id={name}
+        aria-invalid={!!errorMessage}
+        className={`dy-select dy-select-bordered text-base shadow-sm ${errorMessage ? "dy-select-error" : ""}`}
       >
-        {options.map(({ id, label }) => (
+        {options.map(({ id, labelText }) => (
           <option key={id} value={id}>
-            {label ? t(label) : id}
+            {labelText ?? id}
           </option>
         ))}
       </select>
-      <FieldErrors meta={field.state.meta} />
-      <Hint hint={hint} />
-    </label>
+      <ErrorMessage message={errorMessage} />
+      <Hint label={hint} />
+    </div>
   )
 }

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

@@ -1,14 +1,14 @@
-import { useStore } from "@tanstack/react-form"
 import { useEffect, useRef, useState } from "react"
+import { type Control, useFormState } from "react-hook-form"
 
 import Icon from "../../../components/Icon"
 import { useI18n } from "../../../i18n/react/useI18n"
-import { useFormContext } from "./form-context"
+import type { MediaItem } from "../../types/media-item"
 
 const SUCCESS_DURATION_MS = 2000
 
 const baseButtonClass =
-  "flex min-w-52 items-center justify-center gap-2 rounded-2xl px-6 py-3 font-bold uppercase shadow-sm transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 disabled:cursor-not-allowed"
+  "flex min-w-52 items-center justify-center gap-2 rounded-2xl px-4 py-3 font-bold uppercase shadow-sm transition-colors easy-in-out focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 disabled:cursor-not-allowed"
 
 const buttonStateClasses = {
   idle: "bg-gray-800 text-gray-100 hover:bg-gray-950 hover:text-gray-300 disabled:bg-gray-600 disabled:text-gray-200",
@@ -19,8 +19,10 @@ const buttonStateClasses = {
 } as const
 
 const buttonLabels = {
-  idle: "ln.admin.save",
-  success: "ln.admin.saved",
+  idle: import.meta.env.DEV
+    ? "ln.admin.save-changes"
+    : "ln.admin.publish-changes",
+  success: import.meta.env.DEV ? "ln.admin.saved" : "ln.admin.published",
   error: "ln.admin.failed",
 } as const
 
@@ -30,20 +32,20 @@ const icons = {
   error: "mdi--error-outline",
 } as const
 
-export default function SubmitButton() {
-  const form = useFormContext()
+export default function SubmitButton({
+  control,
+  className,
+}: {
+  control: Control<MediaItem>
+  className?: string
+}) {
   const { t } = useI18n()
-  const { submissionAttempts, isSubmitting, isSubmitSuccessful } = useStore(
-    form.store,
-    (state) => ({
-      canSubmit: state.canSubmit,
-      isSubmitting: state.isSubmitting,
-      isSubmitSuccessful: state.isSubmitSuccessful,
-      submissionAttempts: state.submissionAttempts,
-    }),
-  )
-  const buttonState = useButtonState(isSubmitSuccessful, submissionAttempts)
-  const buttonClass = `${baseButtonClass} ${buttonStateClasses[buttonState]}`
+  const { isSubmitting, isSubmitSuccessful, submitCount } = useFormState({
+    control,
+  })
+
+  const buttonState = useButtonState(isSubmitSuccessful, submitCount)
+  const buttonClass = `${baseButtonClass} ${buttonStateClasses[buttonState]} ${className}`
   const label = buttonLabels[buttonState]
   const icon = icons[buttonState]
 

package/src/admin/components/form/atoms/ErrorMessage.tsx

@@ -0,0 +1,13 @@
+import { useI18n } from "../../../../i18n/react/useI18n"
+
+export default function ErrorMessage({ message }: { message?: string }) {
+  const { t } = useI18n()
+  if (!message) {
+    return null
+  }
+  return (
+    <p className="my-2 flex flex-col gap-1 text-sm text-rose-800" role="alert">
+      {t(message)}
+    </p>
+  )
+}

package/src/admin/components/form/atoms/Hint.tsx

@@ -1,10 +1,10 @@
 import { useI18n } from "../../../../i18n/react/useI18n"
 
-export default function Hint({ hint }: { hint?: string }) {
+export default function Hint({ label }: { label?: string }) {
   const { t } = useI18n()
   return (
-    <div className="flex h-8 w-full items-center justify-end">
-      {hint && <span className="dy-label-text-alt">{t(hint)}</span>}
+    <div className="flex h-12 w-full items-start justify-end p-2">
+      {label && <span className="dy-label-text-alt">{t(label)}</span>}
     </div>
   )
 }

package/src/admin/components/form/atoms/Label.tsx

@@ -1,12 +1,23 @@
 import { useI18n } from "../../../../i18n/react/useI18n"
 
-export default function Label({ label }: { label: string }) {
+export default function Label({
+  label,
+  for: htmlFor,
+  size = "sm",
+  className,
+}: {
+  label: string
+  for: string
+  className?: string
+  size?: "sm" | "xs"
+}) {
   const { t } = useI18n()
   return (
-    <div className="dy-label">
-      <span className="text-sm font-bold uppercase text-gray-600">
-        {t(label)}
-      </span>
-    </div>
+    <label
+      htmlFor={htmlFor}
+      className={`font-bold uppercase text-gray-500 ${size === "sm" ? "pb-2 text-sm" : "pb-1 text-xs"} ${className}`}
+    >
+      {t(label)}
+    </label>
   )
 }

package/src/admin/components/form/atoms/Legend.tsx

@@ -0,0 +1,20 @@
+import { useI18n } from "../../../../i18n/react/useI18n"
+
+export default function Legend({
+  label,
+  size = "sm",
+  className,
+}: {
+  label: string
+  className?: string
+  size?: "sm" | "xs"
+}) {
+  const { t } = useI18n()
+  return (
+    <legend
+      className={`pb-2 font-bold uppercase text-gray-500 ${size === "sm" ? "text-sm" : "text-xs"} ${className}`}
+    >
+      {t(label)}
+    </legend>
+  )
+}

package/src/admin/components/form/hooks/use-field-error.tsx

@@ -0,0 +1,13 @@
+import { type Control, get, useFormState } from "react-hook-form"
+
+export function useFieldError({
+  control,
+  name,
+}: {
+  control: Control<any>
+  name: string
+}) {
+  const { errors } = useFormState({ control, name, exact: true })
+  const error = get(errors, name) as { message: string } | undefined
+  return error?.message
+}

package/src/admin/i18n/translations/en.yml

@@ -1,16 +1,27 @@
 ln.admin.edit: Edit
-ln.admin.save: Save
+ln.admin.publish-changes: Publish Changes
+ln.admin.published: Published
+ln.admin.save-changes: Save Changes
 ln.admin.saved: Saved
 ln.admin.failed: Failed
+ln.admin.remove: Remove
+ln.admin.name: Name
+ln.admin.add-author: Add Author
+ln.admin.add-category: Add Category
+ln.admin.collections: Collections
+ln.admin.add-collection: Add Collection
 ln.admin.edit-media-item: Edit media item
+ln.admin.position-in-collection: Position in Collection
 ln.admin.back-to-details-page: Back to details page
 ln.admin.title: Title
 ln.admin.common-id: Common ID
+ln.admin.authors: Authors
 ln.admin.created-on: Created on
 ln.admin.created-on-hint: When has this item been created on this library?
-ln.admin.common-id-hint: The english title, all lowercase, words separated with hyphens.
-ln.admin.toast.invalid-data.title: Invalid form data
-ln.admin.toast.invalid-data.hint: Check the fields and try again.
-ln.admin.errors.non-empty-string: String must contain at least 1 character(s)
-ln.admin.errors.invalid-date: Invalid date
-ln.admin.errors.required: Required field
+ln.admin.common-id-hint: The English title, all lowercase, words separated with hyphens.
+ln.admin.errors.non-empty-string: Please enter at least one character.
+ln.admin.errors.invalid-date: That date doesn't look right.
+ln.admin.errors.required: This field is required.
+ln.admin.errors.gte-0: Use a number zero or greater.
+ln.admin.errors.unique-elements: Please choose a different value for each entry.
+ln.admin.errors.integer: Please enter a whole number.

package/src/admin/pages/media/EditForm.tsx

@@ -1,104 +1,88 @@
-import { revalidateLogic } from "@tanstack/react-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
 
-import { showToastById } from "../../../components/showToast"
-import Toast from "../../../components/Toast"
 import {
   createI18n,
   type I18nConfig,
   I18nContext,
 } from "../../../i18n/react/i18n-context"
-import { useAppForm } from "../../components/form"
+import Input from "../../components/form/Input"
+import Select from "../../components/form/Select"
+import SubmitButton from "../../components/form/SubmitButton"
 import { type MediaItem, mediaItemSchema } from "../../types/media-item"
+import Authors from "./fields/Authors"
+import Categories from "./fields/Categories"
+import Collections from "./fields/Collections"
 import { updateMediaItem } from "./media-item-store"
 
+type SelectOption = { id: string; labelText: string }
+
 export default function EditForm({
   mediaId,
   mediaItem,
   i18nConfig,
   mediaTypes,
   languages,
+  categories,
+  collections,
 }: {
   mediaId: string
   mediaItem: MediaItem
   i18nConfig: I18nConfig
-  mediaTypes: { id: string; label: string }[]
-  languages: { id: string; label: string }[]
+  mediaTypes: SelectOption[]
+  languages: SelectOption[]
+  categories: SelectOption[]
+  collections: SelectOption[]
 }) {
-  const form = useAppForm({
-    defaultValues: { ...mediaItem },
-    validators: {
-      onDynamic: mediaItemSchema,
-    },
-    validationLogic: revalidateLogic({
-      mode: "blur",
-      modeAfterSubmission: "change",
-    }),
-    onSubmit: async ({ value }) => {
-      await updateMediaItem(mediaId, { ...mediaItem, ...value })
-    },
-    onSubmitInvalid: () => {
-      showToastById("invalid-form-data-toast")
-    },
+  const { handleSubmit, control } = useForm({
+    defaultValues: mediaItem,
+    mode: "onTouched",
+    shouldFocusError: true,
+    resolver: zodResolver(mediaItemSchema),
   })
+  const onSubmit = handleSubmit(
+    async (data) => await updateMediaItem(mediaId, { ...mediaItem, ...data }),
+  )
   const i18n = createI18n(i18nConfig)
-  const { t } = i18n
-
   return (
     <I18nContext.Provider value={i18n}>
-      <form
-        onSubmit={(e) => {
-          e.preventDefault()
-          form.handleSubmit()
-        }}
-        className="flex flex-col items-start"
-      >
-        <form.AppField
-          name="title"
-          children={(field) => <field.TextInput label="ln.admin.title" />}
-        />
-        <form.AppField
+      <form className="flex flex-col" onSubmit={onSubmit}>
+        <div className="mb-8 flex items-end justify-between">
+          <h1 className="text-3xl">{i18n.t("ln.admin.edit-media-item")}</h1>
+          <SubmitButton control={control} />
+        </div>
+
+        <Input name="title" label="ln.admin.title" control={control} />
+        <Input
           name="commonId"
-          children={(field) => (
-            <field.TextInput
-              label="ln.admin.common-id"
-              hint="ln.admin.common-id-hint"
-            />
-          )}
+          label="ln.admin.common-id"
+          hint="ln.admin.common-id-hint"
+          control={control}
         />
-        <form.AppField
+        <Select
           name="type"
-          children={(field) => (
-            <field.Select label="ln.type" options={mediaTypes} />
-          )}
+          label="ln.type"
+          options={mediaTypes}
+          control={control}
         />
-        <form.AppField
+        <Select
           name="language"
-          children={(field) => (
-            <field.Select label="ln.language" options={languages} />
-          )}
+          label="ln.language"
+          options={languages}
+          control={control}
         />
-        <form.AppField
+        <Authors control={control} />
+        <Input
           name="dateCreated"
-          children={(field) => (
-            <field.TextInput
-              type="date"
-              label="ln.admin.created-on"
-              hint="ln.admin.created-on-hint"
-            />
-          )}
+          label="ln.admin.created-on"
+          hint="ln.admin.created-on-hint"
+          type="date"
+          control={control}
         />
+        <Categories categories={categories} control={control} />
+        <Collections collections={collections} control={control} />
 
-        <div className="mt-8">
-          <form.AppForm>
-            <form.SubmitButton />
-            <Toast id="invalid-form-data-toast" variant="error">
-              <div className="font-bold text-gray-700">
-                {t("ln.admin.toast.invalid-data.title")}
-              </div>
-              {t("ln.admin.toast.invalid-data.hint")}
-            </Toast>
-          </form.AppForm>
-        </div>
+        <SubmitButton className="self-end" control={control} />
       </form>
     </I18nContext.Provider>
   )

package/src/admin/pages/media/EditRoute.astro

@@ -3,6 +3,7 @@ import type { GetStaticPaths } from "astro"
 import { getCollection } from "astro:content"
 import config from "virtual:lightnet/config"
 
+import { getCategories } from "../../../content/get-categories"
 import { getRawMediaItem } from "../../../content/get-media-items"
 import { getMediaTypes } from "../../../content/get-media-types"
 import { prepareI18nConfig } from "../../../i18n/react/prepare-i18n-config"
@@ -18,42 +19,65 @@ export const getStaticPaths = (async () => {
 }) satisfies GetStaticPaths
 
 const { mediaId } = Astro.params
-const mediaItemEntry = await getRawMediaItem(mediaId)
+const { data: mediaItem } = await getRawMediaItem(mediaId)
+
+const formData = {
+  ...mediaItem,
+  authors: mediaItem.authors?.map((value) => ({ value })) ?? [],
+  categories:
+    mediaItem.categories?.map((value) => ({
+      value,
+    })) ?? [],
+  collections: mediaItem.collections ?? [],
+}
 
 const i18nConfig = prepareI18nConfig(Astro.locals.i18n, [
   "ln.admin.*",
   "ln.type",
   "ln.language",
+  "ln.categories",
 ])
-const { t } = Astro.locals.i18n
+const { t, currentLocale } = Astro.locals.i18n
 
 const mediaTypes = (await getMediaTypes()).map(({ id, data: { label } }) => ({
   id,
-  label: t(label),
+  labelText: t(label),
 }))
+
+const categories = (await getCategories(currentLocale, t)).map(
+  ({ id, labelText }) => ({ id, labelText }),
+)
+
+const collections = (await getCollection("media-collections")).map(
+  ({ id, data: { label } }) => ({ id, labelText: t(label) }),
+)
+
 const languages = config.languages.map(({ code, label }) => ({
   id: code,
-  label: t(label),
+  labelText: t(label),
 }))
 ---
 
-<Page>
-  <div class="mx-auto max-w-screen-md px-4 pt-12 md:px-8">
+<Page mainClass="bg-slate-500">
+  <div class="mx-auto block max-w-screen-md px-4 md:px-8">
     <a
-      class="underline"
+      class="block py-4 text-gray-200 underline"
       href=`/${Astro.currentLocale}/media/faithful-freestyle--en`
       >{t("ln.admin.back-to-details-page")}</a
     >
-    <h1 class="mb-10 mt-10 text-2xl">
-      {t("ln.admin.edit-media-item")}
-    </h1>
+  </div>
 
+  <div
+    class="mx-auto max-w-screen-md rounded-2xl bg-gray-200 px-4 py-8 shadow-md md:px-8"
+  >
     <EditForm
       mediaId={mediaId}
-      mediaItem={mediaItemEntry.data}
+      mediaItem={formData}
       i18nConfig={i18nConfig}
       mediaTypes={mediaTypes}
       languages={languages}
+      categories={categories}
+      collections={collections}
       client:load
     />
   </div>

package/src/admin/pages/media/fields/Authors.tsx

@@ -0,0 +1,43 @@
+import { type Control } from "react-hook-form"
+
+import ErrorMessage from "../../../components/form/atoms/ErrorMessage"
+import DynamicArray from "../../../components/form/DynamicArray"
+import { useFieldError } from "../../../components/form/hooks/use-field-error"
+import type { MediaItem } from "../../../types/media-item"
+
+export default function Authors({ control }: { control: Control<MediaItem> }) {
+  return (
+    <DynamicArray
+      control={control}
+      name="authors"
+      label="ln.admin.authors"
+      renderElement={(index) => <AuthorInput index={index} control={control} />}
+      addButton={{
+        label: "ln.admin.add-author",
+        onClick: (append, index) =>
+          append({ value: "" }, { focusName: `authors.${index}.value` }),
+      }}
+    />
+  )
+}
+
+function AuthorInput({
+  index,
+  control,
+}: {
+  index: number
+  control: Control<MediaItem>
+}) {
+  const name = `authors.${index}.value` as const
+  const errorMessage = useFieldError({ name, control })
+  return (
+    <>
+      <input
+        className={`dy-input dy-input-bordered shadow-inner ${errorMessage ? "dy-input-error" : ""}`}
+        aria-invalid={!!errorMessage}
+        {...control.register(name)}
+      />
+      <ErrorMessage message={errorMessage} />
+    </>
+  )
+}

package/src/admin/pages/media/fields/Categories.tsx

@@ -0,0 +1,64 @@
+import { type Control } from "react-hook-form"
+
+import ErrorMessage from "../../../components/form/atoms/ErrorMessage"
+import DynamicArray from "../../../components/form/DynamicArray"
+import { useFieldError } from "../../../components/form/hooks/use-field-error"
+import type { MediaItem } from "../../../types/media-item"
+
+export default function Categories({
+  control,
+  categories,
+}: {
+  control: Control<MediaItem>
+  categories: { id: string; labelText: string }[]
+}) {
+  return (
+    <DynamicArray
+      control={control}
+      name="categories"
+      label="ln.categories"
+      renderElement={(index) => (
+        <CategorySelect
+          categories={categories}
+          control={control}
+          index={index}
+        />
+      )}
+      addButton={{
+        label: "ln.admin.add-category",
+        onClick: (append, index) =>
+          append({ value: "" }, { focusName: `categories.${index}.value` }),
+      }}
+    />
+  )
+}
+
+function CategorySelect({
+  control,
+  categories,
+  index,
+}: {
+  control: Control<MediaItem>
+  categories: { id: string; labelText: string }[]
+  index: number
+}) {
+  const name = `categories.${index}.value` as const
+  const errorMessage = useFieldError({ name, control })
+  return (
+    <>
+      <select
+        {...control.register(name)}
+        id={name}
+        aria-invalid={!!errorMessage}
+        className={`dy-select dy-select-bordered text-base shadow-sm ${errorMessage ? "dy-select-error" : ""}`}
+      >
+        {categories.map(({ id, labelText }) => (
+          <option key={id} value={id}>
+            {labelText}
+          </option>
+        ))}
+      </select>
+      <ErrorMessage message={errorMessage} />
+    </>
+  )
+}