lightnet 3.10.2 → 3.10.4

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

@@ -1,9 +1,9 @@
-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
 
@@ -30,25 +30,30 @@ 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 { isValid, isSubmitting, isSubmitSuccessful, submitCount } =
+    useFormState({
+      control,
+    })
+
+  const buttonState = useButtonState(isSubmitSuccessful, submitCount)
+  const buttonClass = `${baseButtonClass} ${buttonStateClasses[buttonState]} ${className}`
   const label = buttonLabels[buttonState]
   const icon = icons[buttonState]
 
   return (
-    <button className={buttonClass} type="submit" disabled={isSubmitting}>
+    <button
+      className={buttonClass}
+      type="submit"
+      disabled={!isValid || isSubmitting}
+    >
       {icon && <Icon className={icon} ariaLabel="" />}
       {t(label)}
     </button>

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

@@ -0,0 +1,34 @@
+import { ErrorMessage as RhfErrorMessage } from "@hookform/error-message"
+import { type Control, useFormState } from "react-hook-form"
+
+import { useI18n } from "../../../../i18n/react/useI18n"
+
+export default function ErrorMessage({
+  name,
+  control,
+}: {
+  name: string
+  control: Control<any>
+}) {
+  const { t } = useI18n()
+  const { errors } = useFormState({ control, name, exact: true })
+  return (
+    <RhfErrorMessage
+      errors={errors}
+      name={name}
+      render={({ message }) => {
+        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

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

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

@@ -0,0 +1,19 @@
+import { useI18n } from "../../../../i18n/react/useI18n"
+
+export default function Label({
+  label,
+  for: htmlFor,
+}: {
+  label: string
+  for: string
+}) {
+  const { t } = useI18n()
+  return (
+    <label
+      htmlFor={htmlFor}
+      className="pb-2 text-sm font-bold uppercase text-gray-600"
+    >
+      {t(label)}
+    </label>
+  )
+}

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

@@ -0,0 +1,10 @@
+import { useI18n } from "../../../../i18n/react/useI18n"
+
+export default function Label({ label }: { label: string }) {
+  const { t } = useI18n()
+  return (
+    <legend className="pb-2 text-sm font-bold uppercase text-gray-600">
+      {t(label)}
+    </legend>
+  )
+}

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

@@ -0,0 +1,21 @@
+import { type Control, type FieldError, useFormState } from "react-hook-form"
+
+export function useFieldError({
+  control,
+  name,
+  index,
+}: {
+  control: Control<any>
+  name: string
+  index?: number
+}) {
+  const { errors } = useFormState({ control, name, exact: true })
+  const error = errors[name]
+  if (!error) {
+    return undefined
+  }
+  if (Array.isArray(error)) {
+    return index !== undefined ? (error[index] as FieldError) : undefined
+  }
+  return error as FieldError
+}

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

@@ -2,10 +2,16 @@ ln.admin.edit: Edit
 ln.admin.save: Save
 ln.admin.saved: Saved
 ln.admin.failed: Failed
+ln.admin.remove: Remove
+ln.admin.add-author: Add Author
 ln.admin.edit-media-item: Edit media item
 ln.admin.back-to-details-page: Back to details page
 ln.admin.title: Title
 ln.admin.common-id: Common ID
-ln.admin.toast.invalid-data.title: Invalid form data
-ln.admin.toast.invalid-data.hint: Check the fields and try again.
+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.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

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

@@ -1,72 +1,72 @@
-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 { updateMediaItem } from "./media-item-store"
 
 export default function EditForm({
   mediaId,
   mediaItem,
   i18nConfig,
+  mediaTypes,
+  languages,
 }: {
   mediaId: string
   mediaItem: MediaItem
   i18nConfig: I18nConfig
+  mediaTypes: { id: string; label: string }[]
+  languages: { id: string; label: string }[]
 }) {
-  const form = useAppForm({
+  const { handleSubmit, control } = useForm({
     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")
-    },
+    mode: "onTouched",
+    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 gap-4"
-      >
-        <form.AppField
+      <form onSubmit={onSubmit}>
+        <Input name="title" label="ln.admin.title" control={control} />
+        <Input
           name="commonId"
-          children={(field) => (
-            <field.TextField label={t("ln.admin.common-id")} />
-          )}
+          label="ln.admin.common-id"
+          hint="ln.admin.common-id-hint"
+          control={control}
+        />
+        <Select
+          name="type"
+          label="ln.type"
+          options={mediaTypes}
+          control={control}
         />
-        <form.AppField
-          name="title"
-          children={(field) => <field.TextField label={t("ln.admin.title")} />}
+        <Select
+          name="language"
+          label="ln.language"
+          options={languages}
+          control={control}
         />
-        <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>
+        <Authors control={control} />
+        <Input
+          name="dateCreated"
+          label="ln.admin.created-on"
+          hint="ln.admin.created-on-hint"
+          type="date"
+          control={control}
+        />
+
+        <SubmitButton className="mt-8" control={control} />
       </form>
     </I18nContext.Provider>
   )

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

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

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

@@ -0,0 +1,58 @@
+import { type Control, useFieldArray } from "react-hook-form"
+
+import Icon from "../../../../components/Icon"
+import { useI18n } from "../../../../i18n/react/useI18n"
+import ErrorMessage from "../../../components/form/atoms/ErrorMessage"
+import Hint from "../../../components/form/atoms/Hint"
+import Legend from "../../../components/form/atoms/Legend"
+import type { MediaItem } from "../../../types/media-item"
+
+export default function Authors({ control }: { control: Control<MediaItem> }) {
+  const { fields, append, remove } = useFieldArray({
+    name: "authors",
+    control,
+  })
+  const { t } = useI18n()
+  return (
+    <fieldset key="authors">
+      <Legend label="ln.admin.authors" />
+      <div className="flex w-full flex-col divide-y divide-gray-300 rounded-lg border border-gray-300">
+        {fields.map((author, index) => (
+          <div className="p-2" key={author.id}>
+            <div className="flex w-full items-center gap-2">
+              <input
+                className="dy-input dy-input-sm grow"
+                {...control.register(`authors.${index}.value`)}
+              />
+              <button
+                className="flex items-center p-2 text-gray-600 hover:text-gray-900"
+                type="button"
+                onClick={() => remove(index)}
+              >
+                <Icon
+                  className="mdi--remove"
+                  ariaLabel={t("ln.admin.remove")}
+                />
+              </button>
+            </div>
+            <ErrorMessage name={`authors.${index}.value`} control={control} />
+          </div>
+        ))}
+        <button
+          type="button"
+          className="p-4 text-sm font-bold text-gray-600 hover:bg-gray-200"
+          onClick={() => {
+            append(
+              { value: "" },
+              { focusName: `authors.${fields.length}.value` },
+            )
+          }}
+        >
+          {t("ln.admin.add-author")}
+        </button>
+      </div>
+      <ErrorMessage name="authors" control={control} />
+      <Hint />
+    </fieldset>
+  )
+}

package/src/admin/pages/media/file-system.ts

@@ -1,6 +1,6 @@
-export const writeText = (path: string, body: string) => {
+export const writeFile = (path: string, body: string) => {
   return fetch(
-    `/api/internal/fs/writeText?path=${encodeURIComponent(path.replace(/^\//, ""))}`,
+    `/api/internal/fs/write-file?path=${encodeURIComponent(path.replace(/^\//, ""))}`,
     {
       method: "POST",
       headers: { "Content-Type": resolveContentType(path) },
@@ -10,7 +10,7 @@ export const writeText = (path: string, body: string) => {
 }
 
 export const writeJson = async (path: string, object: unknown) => {
-  return writeText(path, JSON.stringify(sortObject(object), null, 2))
+  return writeFile(path, JSON.stringify(sortObject(object), null, 2))
 }
 
 const resolveContentType = (path: string) => {

package/src/admin/pages/media/media-item-store.ts

@@ -1,11 +1,13 @@
-import { type MediaItem, mediaItemSchema } from "../../types/media-item"
+import { type MediaItem } from "../../types/media-item"
 import { writeJson } from "./file-system"
 
-export const loadMediaItem = (id: string) =>
-  fetch(`/api/media/${id}.json`)
-    .then((response) => response.json())
-    .then((json) => mediaItemSchema.parse(json.content))
-
 export const updateMediaItem = async (id: string, item: MediaItem) => {
-  return writeJson(`/src/content/media/${id}.json`, item)
+  return writeJson(`/src/content/media/${id}.json`, mapToContentSchema(item))
+}
+
+const mapToContentSchema = (item: MediaItem) => {
+  return {
+    ...item,
+    authors: item.authors.map(({ value }) => value),
+  }
 }

package/src/admin/types/media-item.ts

@@ -1,10 +1,19 @@
 import { z } from "astro/zod"
 
 const NON_EMPTY_STRING = "ln.admin.errors.non-empty-string"
+const INVALID_DATE = "ln.admin.errors.invalid-date"
+const REQUIRED = "ln.admin.errors.required"
 
 export const mediaItemSchema = z.object({
   commonId: z.string().nonempty(NON_EMPTY_STRING),
   title: z.string().nonempty(NON_EMPTY_STRING),
+  type: z.string().nonempty(REQUIRED),
+  language: z.string().nonempty(REQUIRED),
+  authors: z
+    .object({ value: z.string().nonempty(NON_EMPTY_STRING) })
+    .array()
+    .min(1),
+  dateCreated: z.string().date(INVALID_DATE),
 })
 
-export type MediaItem = z.infer<typeof mediaItemSchema>
+export type MediaItem = z.input<typeof mediaItemSchema>

package/src/astro-integration/integration.ts

@@ -87,8 +87,8 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
         // this endpoints to write files.
         if (config.experimental?.admin?.enabled && command === "dev") {
           injectRoute({
-            pattern: "/api/internal/fs/writeText",
-            entrypoint: "lightnet/api/internal/fs/writeText.ts",
+            pattern: "/api/internal/fs/write-file",
+            entrypoint: "lightnet/api/internal/fs/write-file.ts",
             prerender: false,
           })
           // Add empty adapter to avoid warning

package/src/components/HeroSection.astro

@@ -52,7 +52,7 @@ const subtitleSizes = {
       alt=""
     />
     <div
-      class="bg-gradient-radial absolute top-0 flex h-full w-full flex-col items-center justify-center from-black/30 to-black/40 p-4 text-center text-gray-50"
+      class="absolute top-0 flex h-full w-full flex-col items-center justify-center bg-gradient-radial from-black/30 to-black/40 p-4 text-center text-gray-50"
       class:list={[className]}
     >
       {

package/src/components/HighlightSection.astro

@@ -53,7 +53,7 @@ const { image, id, title, text, link, className, titleClass, textClass } =
       {
         link && (
           <a
-            class="bg-primary hover:bg-primary/85 inline-flex items-center justify-center gap-2 rounded-2xl px-6 py-3 text-sm font-bold uppercase text-gray-50 shadow-sm hover:text-gray-100"
+            class="inline-flex items-center justify-center gap-2 rounded-2xl bg-primary px-6 py-3 text-sm font-bold uppercase text-gray-50 shadow-sm hover:bg-primary/85 hover:text-gray-100"
             href={link.href}
           >
             {link.text}

package/src/components/SearchInput.astro

@@ -12,7 +12,7 @@ const { t } = Astro.locals.i18n
   action={`/${Astro.currentLocale}/media`}
   method="get"
   role="search"
-  class="dy-join group w-full rounded-2xl shadow-sm outline-2 outline-offset-2 outline-gray-400 group-focus-within:outline"
+  class="group dy-join w-full rounded-2xl shadow-sm outline-2 outline-offset-2 outline-gray-400 group-focus-within:outline"
   class:list={[Astro.props.className]}
 >
   <input

package/src/components/Toast.tsx

@@ -46,7 +46,7 @@ export default function Toast({
       }}
     >
       <div
-        className={`pointer-events-auto flex max-w-sm flex-col items-start gap-1 rounded-2xl border p-4 text-base shadow-md backdrop-blur-sm ${alertClasses}`}
+        className={`pointer-events-auto flex max-w-sm flex-col items-start gap-1 rounded-md border p-4 text-base shadow-md backdrop-blur-sm ${alertClasses}`}
       >
         {children}
       </div>

package/src/i18n/react/i18n-context.ts

@@ -1,4 +1,4 @@
-import { createContext } from "react"
+import { createContext, useMemo } from "react"
 
 export type I18n = {
   t: (key: string) => string
@@ -21,12 +21,18 @@ export const createI18n = ({
   currentLocale,
   direction,
 }: I18nConfig) => {
-  const t = (key: string) => {
-    const translated = translations[key]
-    if (!translated) {
-      throw new Error(`Missing translation for key ${key}`)
+  return useMemo(() => {
+    const t = (key: string) => {
+      const value = translations[key]
+      if (value) {
+        return value
+      }
+      if (key.match(/^(?:ln|x)\../i)) {
+        console.error(`Missing translation for key ${key}`)
+        return ""
+      }
+      return key
     }
-    return translated
-  }
-  return { t, currentLocale, direction }
+    return { t, currentLocale, direction }
+  }, [])
 }

package/src/layouts/MarkdownPage.astro

@@ -9,7 +9,7 @@ type Props = {
 
 <Page>
   <article
-    class="prose prose-img:rounded-md mx-auto mt-8 max-w-screen-md px-4 sm:mt-16 md:px-8"
+    class="prose mx-auto mt-8 max-w-screen-md px-4 prose-img:rounded-md sm:mt-16 md:px-8"
     class:list={[Astro.props.className]}
   >
     <slot />

package/src/layouts/components/Menu.astro

@@ -14,7 +14,7 @@ const { icon, label } = Astro.props
     role="button"
     tabindex="0"
     aria-label={Astro.locals.i18n.t(label)}
-    class="hover:text-primary flex cursor-pointer rounded-md p-3 text-gray-600"
+    class="flex cursor-pointer rounded-md p-3 text-gray-600 hover:text-primary"
   >
     <Icon className={icon} ariaLabel="" />
   </div>

package/src/layouts/components/PageNavigation.astro

@@ -35,7 +35,7 @@ const t = Astro.locals.i18n.t
   {
     !config.searchPage?.hideHeaderSearchIcon && (
       <a
-        class="hover:text-primary flex p-3 text-gray-600"
+        class="flex p-3 text-gray-600 hover:text-primary"
         aria-label={t("ln.search.title")}
         data-astro-prefetch="viewport"
         href={searchPagePath(Astro.currentLocale)}

package/src/pages/details-page/components/main-details/OpenButton.astro

@@ -24,7 +24,7 @@ const content = createContentMetadata(item.data.content[0])
     content.isExternal && (
       <Icon
         ariaLabel={Astro.locals.i18n.t("ln.external-link")}
-        className={`mdi--external-link shrink-0`}
+        className={`shrink-0 mdi--external-link`}
       />
     )
   }

package/src/pages/search-page/components/LoadingSkeleton.tsx

@@ -12,7 +12,7 @@ export default function LoadingSkeleton() {
         <div className="h-4 w-5/6 rounded-md bg-gray-200 md:h-6"></div>
       </div>
       <Icon
-        className="mdi--chevron-right my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 sm:block"
+        className="my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 mdi--chevron-right sm:block"
         flipIcon={direction === "rtl"}
         ariaLabel=""
       />

package/src/pages/search-page/components/SearchFilter.tsx

@@ -57,7 +57,7 @@ export default function SearchFilter({
           onInput={(e) => debouncedSetSearch(e.currentTarget.value)}
           onKeyDown={(e) => e.key === "Enter" && searchInput.current?.blur()}
         />
-        <Icon className="mdi--magnify text-xl" ariaLabel="" />
+        <Icon className="text-xl mdi--magnify" ariaLabel="" />
       </label>
       <div className="mb-8 grid grid-cols-1 gap-2 sm:grid-cols-3 sm:gap-6 md:mb-10">
         {languageFilterEnabled && (

package/src/pages/search-page/components/SearchListItem.tsx

@@ -99,7 +99,7 @@ export default function SearchListItem({
         </div>
       </div>
       <Icon
-        className="mdi--chevron-right md:group-hover:text-primary my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 sm:block"
+        className="my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 mdi--chevron-right sm:block md:group-hover:text-primary"
         flipIcon={direction === "rtl"}
         ariaLabel=""
       />

package/src/pages/search-page/components/Select.tsx

@@ -17,7 +17,7 @@ export default function Select({
         {label}
       </span>
       <select
-        className="dy-select dy-select-bordered sm:dy-select-sm w-full rounded-xl"
+        className="dy-select dy-select-bordered w-full rounded-xl sm:dy-select-sm"
         value={initialValue}
         onChange={(e) => valueChange(e.currentTarget.value)}
       >