lightnet 3.10.6 → 3.10.8

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

@@ -1,4 +1,4 @@
-import { useI18n } from "../../../../i18n/react/useI18n"
+import { useI18n } from "../../../../i18n/react/use-i18n"
 
 export default function ErrorMessage({ message }: { message?: string }) {
   const { t } = useI18n()

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

@@ -0,0 +1,115 @@
+import { type ChangeEvent, type DragEvent, useRef, useState } from "react"
+import {
+  type Control,
+  type FieldValues,
+  type Path,
+  useController,
+} from "react-hook-form"
+import config from "virtual:lightnet/config"
+
+import { useI18n } from "../../../../i18n/react/use-i18n"
+
+type FileType = "image/png" | "image/jpeg" | "image/webp"
+
+export default function FileUpload<TFieldValues extends FieldValues>({
+  name,
+  control,
+  destinationPath,
+  onFileChange,
+  fileName,
+  acceptedFileTypes,
+}: {
+  onFileChange: (file: File) => void
+  control: Control<TFieldValues>
+  name: Path<TFieldValues>
+  destinationPath: string
+  fileName?: string
+  acceptedFileTypes: Readonly<FileType[]>
+}) {
+  const { field } = useController({
+    name,
+    control,
+  })
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+  const { t } = useI18n()
+
+  const [isDragging, setIsDragging] = useState(false)
+
+  const onFileSelected = (file?: File) => {
+    if (!file) {
+      return
+    }
+    if (!acceptedFileTypes.includes(file.type as any)) {
+      return
+    }
+    const nameParts = file.name.split(".")
+    const extension = nameParts.pop()
+    const name = nameParts.join(".")
+    field.onChange({
+      ...field.value,
+      path: `${destinationPath}/${fileName ?? name}.${extension}`,
+      file,
+    })
+    onFileChange(file)
+    field.onBlur()
+  }
+
+  const onDragEnter = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    setIsDragging(true)
+  }
+
+  const onDrop = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    setIsDragging(false)
+    onFileSelected(event.dataTransfer.files?.[0])
+  }
+
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onFileSelected(event.target.files?.[0])
+    // allow selecting the same file twice in a row
+    event.target.value = ""
+  }
+
+  return (
+    <>
+      <div
+        className={`flex w-full flex-col items-center justify-center gap-1 rounded-md border-2 border-dashed border-gray-300 bg-gray-200 p-4 transition-colors ease-in-out ${isDragging ? "border-sky-700 bg-sky-50" : ""} focus-within:border-sky-700 hover:bg-sky-50`}
+        role="button"
+        tabIndex={0}
+        onClick={() => fileInputRef.current?.click()}
+        onBlur={field.onBlur}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault()
+            fileInputRef.current?.click()
+          }
+        }}
+        onDragOver={onDragEnter}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={onDrop}
+      >
+        <span className="text-sm text-gray-800">
+          {t("ln.admin.file-upload-hint")}
+        </span>
+        <span className="text-xs text-gray-600">
+          {t("ln.admin.file-upload-size-limit", {
+            limit: config.experimental?.admin?.maxFileSize,
+          })}
+        </span>
+      </div>
+      <input
+        id={field.name}
+        name={field.name}
+        ref={(ref) => {
+          fileInputRef.current = ref
+          field.ref(ref)
+        }}
+        type="file"
+        accept={acceptedFileTypes.join(",")}
+        className="sr-only"
+        onChange={onInputChange}
+      />
+    </>
+  )
+}

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

@@ -1,9 +1,18 @@
-import { useI18n } from "../../../../i18n/react/useI18n"
+import { useI18n } from "../../../../i18n/react/use-i18n"
 
-export default function Hint({ label }: { label?: string }) {
+export default function Hint({
+  label,
+  preserveSpace,
+}: {
+  label?: string
+  preserveSpace: boolean
+}) {
   const { t } = useI18n()
+  if (!preserveSpace && !label) {
+    return null
+  }
   return (
-    <div className="flex h-12 w-full items-start justify-end p-2">
+    <div className="flex h-8 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,23 +1,26 @@
-import { useI18n } from "../../../../i18n/react/useI18n"
+import { useI18n } from "../../../../i18n/react/use-i18n"
 
 export default function Label({
   label,
-  for: htmlFor,
-  size = "sm",
-  className,
+  size = "medium",
+  className = "",
+  isDirty,
+  isInvalid,
 }: {
   label: string
-  for: string
   className?: string
-  size?: "sm" | "xs"
+  size?: "small" | "medium"
+  isDirty?: boolean
+  isInvalid?: boolean
 }) {
   const { t } = useI18n()
   return (
-    <label
-      htmlFor={htmlFor}
-      className={`font-bold uppercase text-gray-600 ${size === "sm" ? "pb-2 text-sm" : "pb-1 text-xs"} ${className}`}
-    >
-      {t(label)}
-    </label>
+    <div className="flex">
+      <span
+        className={`rounded-t-md bg-gray-300 px-4 font-bold text-gray-700 shadow-sm transition-colors duration-150 group-focus-within:bg-sky-700 group-focus-within:text-gray-50 group-focus-within:ring-1 group-focus-within:ring-sky-700 ${size === "medium" ? "py-2 text-sm" : "py-1 text-xs"} ${isDirty ? "bg-gray-700 !text-white" : ""} ${isInvalid ? "bg-rose-800 !text-gray-50" : ""} ${className}`}
+      >
+        {t(label)}
+      </span>
+    </div>
   )
 }

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

@@ -0,0 +1,12 @@
+import { type Control, get, useFormState } from "react-hook-form"
+
+export function useFieldDirty({
+  control,
+  name,
+}: {
+  control: Control<any>
+  name: string
+}) {
+  const { dirtyFields } = useFormState({ control, name, exact: true })
+  return get(dirtyFields, name) as boolean | undefined
+}

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

@@ -3,11 +3,32 @@ import { type Control, get, useFormState } from "react-hook-form"
 export function useFieldError({
   control,
   name,
+  exact = true,
 }: {
   control: Control<any>
   name: string
+  exact?: boolean
 }) {
-  const { errors } = useFormState({ control, name, exact: true })
+  const { errors } = useFormState({ control, name, exact })
   const error = get(errors, name) as { message: string } | undefined
-  return error?.message
+  if (exact) {
+    return error?.message
+  } else {
+    return findErrorMessage(get(errors, name))
+  }
+}
+
+function findErrorMessage(errors?: unknown) {
+  if (!errors) {
+    return undefined
+  }
+  for (const [key, value] of Object.entries(errors)) {
+    if (key === "message" && typeof value === "string") {
+      return value
+    }
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+      return findErrorMessage(value)
+    }
+  }
+  return undefined
 }

package/src/admin/i18n/admin-i18n.ts

@@ -0,0 +1,21 @@
+import config from "virtual:lightnet/config"
+
+import { resolveDefaultLocale } from "../../i18n/resolve-default-locale"
+import { resolveLanguage } from "../../i18n/resolve-language"
+import { resolveLocales } from "../../i18n/resolve-locales"
+import { translationKeys, useTranslate } from "../../i18n/translate"
+
+const currentLocale = config.experimental?.admin?.languageCode ?? "en"
+const t = useTranslate(currentLocale)
+const { direction } = resolveLanguage(currentLocale)
+const defaultLocale = resolveDefaultLocale(config)
+const locales = resolveLocales(config)
+
+export const adminI18n = {
+  currentLocale,
+  t,
+  direction,
+  translationKeys,
+  defaultLocale,
+  locales,
+}

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

@@ -1,27 +1,33 @@
 ln.admin.edit: Edit
-ln.admin.publish-changes: Publish Changes
+ln.admin.publish-changes: Publish changes
 ln.admin.published: Published
-ln.admin.save-changes: Save Changes
+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.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.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.image: Image
+ln.admin.file-upload-hint: Drag a file here or click to browse files.
+ln.admin.file-upload-size-limit: "Files up to {{limit}} MB accepted."
+ln.admin.image-hint: Cover image with format PNG, JPG or WebP.
+ln.admin.select-file: Select file
 ln.admin.authors: Authors
 ln.admin.description: Description
-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.date-created: Date Created
+ln.admin.date-created-hint: The date this item was added to this media library.
+ln.admin.common-id-hint: Use a shared Common ID to link translated versions of a media item.
 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.error.file-size-exceeded: This file is too big.
 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.

package/src/admin/pages/AdminRoute.astro

@@ -1,7 +1,5 @@
 ---
 import Page from "../../layouts/Page.astro"
-
-export { getLocalePaths as getStaticPaths } from "../../i18n/get-locale-paths"
 ---
 
 <Page>

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

@@ -14,6 +14,7 @@ import { type MediaItem, mediaItemSchema } from "../../types/media-item"
 import Authors from "./fields/Authors"
 import Categories from "./fields/Categories"
 import Collections from "./fields/Collections"
+import Image from "./fields/Image"
 import { updateMediaItem } from "./media-item-store"
 
 type SelectOption = { id: string; labelText: string }
@@ -36,8 +37,6 @@ export default function EditForm({
   collections: SelectOption[]
 }) {
   const { handleSubmit, control } = useForm({
-    // Provide per-input defaults so SSG prerender matches, but keep a full
-    // defaultValues object here because useFieldArray does not accept default values.
     defaultValues: mediaItem,
     mode: "onTouched",
     shouldFocusError: true,
@@ -61,13 +60,6 @@ export default function EditForm({
           control={control}
           defaultValue={mediaItem.title}
         />
-        <Input
-          name="commonId"
-          label="ln.admin.common-id"
-          hint="ln.admin.common-id-hint"
-          control={control}
-          defaultValue={mediaItem.commonId}
-        />
         <Select
           name="type"
           label="ln.type"
@@ -75,6 +67,11 @@ export default function EditForm({
           control={control}
           defaultValue={mediaItem.type}
         />
+        <Image
+          control={control}
+          defaultValue={mediaItem.image}
+          mediaId={mediaId}
+        />
         <Select
           name="language"
           label="ln.language"
@@ -85,8 +82,8 @@ export default function EditForm({
         <Authors control={control} defaultValue={mediaItem.authors} />
         <Input
           name="dateCreated"
-          label="ln.admin.created-on"
-          hint="ln.admin.created-on-hint"
+          label="ln.admin.date-created"
+          hint="ln.admin.date-created-hint"
           type="date"
           defaultValue={mediaItem.dateCreated}
           control={control}
@@ -105,10 +102,16 @@ export default function EditForm({
           control={control}
           name="description"
           label="ln.admin.description"
-          defaultValue={mediaItem.description}
+        />
+        <Input
+          name="commonId"
+          label="ln.admin.common-id"
+          hint="ln.admin.common-id-hint"
+          control={control}
+          defaultValue={mediaItem.commonId}
         />
 
-        <SubmitButton className="self-end" control={control} />
+        <SubmitButton className="mt-8 self-end" control={control} />
       </form>
     </I18nContext.Provider>
   )

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

@@ -1,28 +1,40 @@
 ---
 import type { GetStaticPaths } from "astro"
+import { getImage } from "astro:assets"
 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 { getMediaItem, 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"
+import { adminI18n } from "../../i18n/admin-i18n"
 import EditForm from "./EditForm"
 
 export const getStaticPaths = (async () => {
   const mediaItems = await getCollection("media")
-  return resolveLocales(config).flatMap((locale) =>
-    mediaItems.map(({ id: mediaId }) => ({ params: { mediaId, locale } })),
-  )
+  return mediaItems.map(({ id: mediaId }) => ({ params: { mediaId } }))
 }) satisfies GetStaticPaths
 
 const { mediaId } = Astro.params
 const { data: mediaItem } = await getRawMediaItem(mediaId)
+const {
+  data: { image },
+} = await getMediaItem(mediaId)
+
+const previewImage = await getImage({
+  src: image,
+  width: 256,
+  format: "webp",
+})
 
 const formData = {
   ...mediaItem,
+  image: {
+    path: mediaItem.image,
+    previewSrc: previewImage.src,
+  },
   authors: mediaItem.authors?.map((value) => ({ value })) ?? [],
   categories:
     mediaItem.categories?.map((value) => ({
@@ -31,34 +43,38 @@ const formData = {
   collections: mediaItem.collections ?? [],
 }
 
-const i18nConfig = prepareI18nConfig(Astro.locals.i18n, [
+const i18nConfig = prepareI18nConfig(adminI18n, [
   "ln.admin.*",
   "ln.type",
   "ln.language",
   "ln.categories",
 ])
-const { t, currentLocale } = Astro.locals.i18n
+const { t, currentLocale } = adminI18n
 
-const mediaTypes = (await getMediaTypes()).map(({ id, data: { label } }) => ({
+const mediaTypes = (await getMediaTypes()).map(({ id }) => ({
   id,
-  labelText: t(label),
+  labelText: id,
 }))
 
-const categories = (await getCategories(currentLocale, t)).map(
-  ({ id, labelText }) => ({ id, labelText }),
-)
+const categories = (await getCategories(currentLocale, t)).map(({ id }) => ({
+  id,
+  labelText: id,
+}))
 
 const collections = (await getCollection("media-collections")).map(
-  ({ id, data: { label } }) => ({ id, labelText: t(label) }),
+  ({ id }) => ({ id, labelText: id }),
 )
 
 const languages = config.languages.map(({ code, label }) => ({
   id: code,
-  labelText: t(label),
+  labelText: `${code} - ${t(label)}`,
 }))
 ---
 
-<Page mainClass="bg-slate-500">
+<Page
+  mainClass="bg-gradient-to-t from-sky-950 to-slate-800"
+  locale={currentLocale}
+>
   <div class="mx-auto block max-w-screen-md px-4 md:px-8">
     <a
       class="block pb-4 pt-8 text-gray-200 underline"

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

@@ -1,8 +1,7 @@
 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 Input from "../../../components/form/Input"
 import type { MediaItem } from "../../../types/media-item"
 
 export default function Authors({
@@ -18,8 +17,9 @@ export default function Authors({
       name="authors"
       label="ln.admin.authors"
       renderElement={(index) => (
-        <AuthorInput
-          index={index}
+        <Input
+          name={`authors.${index}.value`}
+          preserveHintSpace={false}
           control={control}
           defaultValue={defaultValue[index]?.value}
         />
@@ -32,27 +32,3 @@ export default function Authors({
     />
   )
 }
-
-function AuthorInput({
-  index,
-  control,
-  defaultValue,
-}: {
-  index: number
-  control: Control<MediaItem>
-  defaultValue?: string
-}) {
-  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}
-        defaultValue={defaultValue}
-        {...control.register(name)}
-      />
-      <ErrorMessage message={errorMessage} />
-    </>
-  )
-}

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

@@ -1,8 +1,7 @@
 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 Select from "../../../components/form/Select"
 import type { MediaItem } from "../../../types/media-item"
 
 export default function Categories({
@@ -20,11 +19,12 @@ export default function Categories({
       name="categories"
       label="ln.categories"
       renderElement={(index) => (
-        <CategorySelect
-          categories={categories}
+        <Select
+          options={categories}
           control={control}
-          index={index}
+          name={`categories.${index}.value`}
           defaultValue={defaultValue[index]?.value}
+          preserveHintSpace={false}
         />
       )}
       addButton={{
@@ -35,36 +35,3 @@ export default function Categories({
     />
   )
 }
-
-function CategorySelect({
-  control,
-  categories,
-  defaultValue,
-  index,
-}: {
-  control: Control<MediaItem>
-  categories: { id: string; labelText: string }[]
-  defaultValue?: string
-  index: number
-}) {
-  const name = `categories.${index}.value` as const
-  const errorMessage = useFieldError({ name, control })
-  return (
-    <>
-      <select
-        {...control.register(name)}
-        id={name}
-        defaultValue={defaultValue}
-        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} />
-    </>
-  )
-}