lightnet 3.10.8 → 3.11.0

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

@@ -1,57 +1,103 @@
-import { type ChangeEvent, type DragEvent, useRef, useState } from "react"
 import {
-  type Control,
-  type FieldValues,
-  type Path,
-  useController,
-} from "react-hook-form"
+  type ChangeEvent,
+  type DragEvent,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
 import config from "virtual:lightnet/config"
 
+import Icon from "../../../../components/Icon"
 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,
+export default function FileUpload({
+  onUpload,
+  onBlur,
   acceptedFileTypes,
+  title,
+  icon,
+  multiple,
+  description,
 }: {
-  onFileChange: (file: File) => void
-  control: Control<TFieldValues>
-  name: Path<TFieldValues>
-  destinationPath: string
-  fileName?: string
-  acceptedFileTypes: Readonly<FileType[]>
+  onUpload: (...file: File[]) => void
+  onBlur?: () => void
+  acceptedFileTypes?: Readonly<FileType[]>
+  title: string
+  icon?: string
+  multiple?: boolean
+  description: string
 }) {
-  const { field } = useController({
-    name,
-    control,
-  })
   const fileInputRef = useRef<HTMLInputElement | null>(null)
+  const invalidFeedbackTimeout = useRef<number | null>(null)
   const { t } = useI18n()
 
   const [isDragging, setIsDragging] = useState(false)
+  const [invalidFeedbackMessage, setInvalidFeedbackMessage] = useState<
+    string | null
+  >(null)
 
-  const onFileSelected = (file?: File) => {
-    if (!file) {
+  useEffect(() => {
+    return () => {
+      if (invalidFeedbackTimeout.current !== null) {
+        window.clearTimeout(invalidFeedbackTimeout.current)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    const blockBrowserFileOpen = (event: globalThis.DragEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+    window.addEventListener("drop", blockBrowserFileOpen)
+    window.addEventListener("dragover", blockBrowserFileOpen)
+    return () => {
+      window.removeEventListener("drop", blockBrowserFileOpen)
+      window.removeEventListener("dragover", blockBrowserFileOpen)
+    }
+  }, [])
+
+  const triggerInvalidFeedback = (message: string) => {
+    setInvalidFeedbackMessage(message)
+    if (invalidFeedbackTimeout.current !== null) {
+      window.clearTimeout(invalidFeedbackTimeout.current)
+    }
+    invalidFeedbackTimeout.current = window.setTimeout(() => {
+      setInvalidFeedbackMessage(null)
+      invalidFeedbackTimeout.current = null
+    }, 2000)
+  }
+
+  const maxFileSizeBytes =
+    (config.experimental?.admin?.maxFileSize ?? 0) * 1024 * 1024
+
+  const onFilesSelected = (files?: File[]) => {
+    if (!files || files.length === 0) {
+      return
+    }
+
+    if (
+      acceptedFileTypes &&
+      files.find((file) => !acceptedFileTypes.includes(file.type as any))
+    ) {
+      triggerInvalidFeedback(t("ln.admin.file-invalid-type"))
       return
     }
-    if (!acceptedFileTypes.includes(file.type as any)) {
+    if (
+      maxFileSizeBytes &&
+      files.find((file) => file.size > maxFileSizeBytes)
+    ) {
+      triggerInvalidFeedback(
+        t("ln.admin.file-too-big", {
+          maxFileSize: config.experimental?.admin?.maxFileSize,
+        }),
+      )
       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()
+    onUpload(...files)
+    setInvalidFeedbackMessage(null)
   }
 
   const onDragEnter = (event: DragEvent<HTMLDivElement>) => {
@@ -62,23 +108,41 @@ export default function FileUpload<TFieldValues extends FieldValues>({
   const onDrop = (event: DragEvent<HTMLDivElement>) => {
     event.preventDefault()
     setIsDragging(false)
-    onFileSelected(event.dataTransfer.files?.[0])
+    onFilesSelected([...event.dataTransfer.files])
   }
 
   const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onFileSelected(event.target.files?.[0])
+    const { files } = event.target
+    if (!files) {
+      return
+    }
+    const filesArray = []
+    for (let i = 0; i < files.length; i++) {
+      filesArray.push(files[i])
+    }
+    onFilesSelected(filesArray)
     // allow selecting the same file twice in a row
     event.target.value = ""
   }
 
+  const colorClass = () => {
+    if (invalidFeedbackMessage) {
+      return "bg-slate-200 border-rose-800 "
+    }
+    if (isDragging) {
+      return "border-sky-700 bg-sky-50"
+    }
+    return "bg-slate-100 border-slate-300 hover:bg-sky-50"
+  }
+
   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`}
+        className={`relative flex w-full flex-col items-center justify-center gap-1 overflow-hidden rounded-xl border-2 border-dashed ${colorClass()} p-4 transition-colors ease-in-out focus-within:border-sky-700 focus-within:outline-none`}
         role="button"
         tabIndex={0}
+        onBlur={onBlur}
         onClick={() => fileInputRef.current?.click()}
-        onBlur={field.onBlur}
         onKeyDown={(event) => {
           if (event.key === "Enter" || event.key === " ") {
             event.preventDefault()
@@ -89,25 +153,36 @@ export default function FileUpload<TFieldValues extends FieldValues>({
         onDragLeave={() => setIsDragging(false)}
         onDrop={onDrop}
       >
-        <span className="text-sm text-gray-800">
-          {t("ln.admin.file-upload-hint")}
+        <span className="mb-2 flex items-center gap-1 text-sm font-bold text-slate-700">
+          {icon && <Icon className={`${icon}`} ariaLabel="" />}
+          {t(title)}
         </span>
-        <span className="text-xs text-gray-600">
-          {t("ln.admin.file-upload-size-limit", {
-            limit: config.experimental?.admin?.maxFileSize,
+        <span className="max-w-xs text-balance text-center text-xs text-slate-600">
+          {t(description, {
+            maxFileSize: config.experimental?.admin?.maxFileSize,
           })}
         </span>
+
+        {invalidFeedbackMessage && (
+          <div
+            className="pointer-events-none absolute inset-0 flex items-center justify-center gap-2 bg-slate-50/85 text-rose-800"
+            role="alert"
+            aria-hidden="true"
+          >
+            <Icon className="mdi--alert-circle-outline" ariaLabel="" />
+            <span className="font-semibold">{invalidFeedbackMessage}</span>
+          </div>
+        )}
       </div>
       <input
-        id={field.name}
-        name={field.name}
+        tabIndex={-1}
         ref={(ref) => {
           fileInputRef.current = ref
-          field.ref(ref)
         }}
         type="file"
-        accept={acceptedFileTypes.join(",")}
-        className="sr-only"
+        multiple={multiple}
+        accept={acceptedFileTypes?.join(",")}
+        className="hidden"
         onChange={onInputChange}
       />
     </>

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

@@ -12,8 +12,8 @@ export default function Hint({
     return null
   }
   return (
-    <div className="flex h-8 w-full items-start justify-end p-2">
-      {label && <span className="dy-label-text-alt">{t(label)}</span>}
+    <div className="flex h-10 w-full items-start justify-end p-2">
+      {label && <span className="text-xs">{t(label)}</span>}
     </div>
   )
 }

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

@@ -6,21 +6,32 @@ export default function Label({
   className = "",
   isDirty,
   isInvalid,
+  required,
 }: {
   label: string
   className?: string
   size?: "small" | "medium"
   isDirty?: boolean
   isInvalid?: boolean
+  required: boolean
 }) {
   const { t } = useI18n()
+
+  const getColor = () => {
+    if (isInvalid) {
+      return "bg-rose-800 text-white"
+    }
+    if (isDirty) {
+      return "bg-slate-400 text-slate-950"
+    }
+    return "bg-slate-300 text-slate-800"
+  }
   return (
-    <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
+      className={`inline-flex rounded-t-xl px-4 font-bold ${getColor()} py-2 transition-colors duration-150 group-focus-within:!bg-sky-700 group-focus-within:text-slate-50 group-focus-within:ring-1 group-focus-within:ring-sky-700 ${size === "medium" ? "text-sm" : "text-xs"} ${className}`}
+    >
+      {t(label)}
+      {!required && <span className="ms-1">({t("ln.admin.optional")})</span>}
     </div>
   )
 }

package/src/admin/components/form/utils/get-border-class.ts

@@ -0,0 +1,22 @@
+const focusColors = (focusWithin: boolean | undefined) =>
+  focusWithin
+    ? "group-focus-within:border-sky-700 group-focus-within:ring-1 group-focus-within:ring-sky-700"
+    : "focus:border-sky-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sky-700"
+
+export const getBorderClass = ({
+  isDirty,
+  errorMessage,
+  focusWithin,
+}: {
+  isDirty?: boolean
+  focusWithin?: boolean
+  errorMessage?: string
+}) => {
+  if (errorMessage) {
+    return "border border-rose-800 " + focusColors(focusWithin)
+  }
+  if (isDirty) {
+    return "border border-slate-400 " + focusColors(focusWithin)
+  }
+  return "border border-slate-300 " + focusColors(focusWithin)
+}

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

@@ -6,6 +6,18 @@ ln.admin.saved: Saved
 ln.admin.failed: Failed
 ln.admin.remove: Remove
 ln.admin.name: Name
+ln.admin.move-up: Move up
+ln.admin.move-down: Move down
+ln.admin.content: Content
+ln.admin.or: or
+ln.admin.label: Label
+ln.admin.link: Link
+ln.admin.file: File
+ln.admin.file-upload: File - Upload {{fileSize}} MB
+ln.admin.add-link: Add link
+ln.admin.primary-content: Primary content
+ln.admin.files-upload-title: Upload files
+ln.admin.files-upload-description: Drag files here or click to browse files. Files up to {{maxFileSize}} MB accepted.
 ln.admin.add-author: Add author
 ln.admin.add-category: Add category
 ln.admin.collections: Collections
@@ -16,11 +28,14 @@ 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.image-upload-title: Upload image
+ln.admin.image-upload-description: Drop an image here or click to browse. PNG, JPG, or WebP image up to {{maxFileSize}} MB.
 ln.admin.select-file: Select file
+ln.admin.file-invalid-type: File type not allowed.
+ln.admin.file-too-big: File is too big. Max {{maxFileSize}} MB.
 ln.admin.authors: Authors
+ln.admin.optional: optional
+ln.admin.author-name: Author name
 ln.admin.description: Description
 ln.admin.date-created: Date Created
 ln.admin.date-created-hint: The date this item was added to this media library.
@@ -32,3 +47,4 @@ 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.
+ln.admin.errors.non-empty-list: List must contain at least 1 element.

package/src/admin/pages/AdminRoute.astro

@@ -4,7 +4,7 @@ import Page from "../../layouts/Page.astro"
 
 <Page>
   <div
-    class="flex h-96 w-full items-center justify-center text-lg font-bold text-gray-500"
+    class="flex h-96 w-full items-center justify-center text-lg font-bold text-slate-500"
   >
     Admin features are enabled now.
   </div>

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

@@ -1,4 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod"
+import type { KeyboardEvent } from "react"
 import { useForm } from "react-hook-form"
 
 import {
@@ -14,6 +15,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 Content from "./fields/Content"
 import Image from "./fields/Image"
 import { updateMediaItem } from "./media-item-store"
 
@@ -42,13 +44,24 @@ export default function EditForm({
     shouldFocusError: true,
     resolver: zodResolver(mediaItemSchema),
   })
+
+  const preventSubmitOnEnter = (event: KeyboardEvent<HTMLFormElement>) => {
+    if (event.key === "Enter" && !(event.target instanceof HTMLButtonElement)) {
+      event.preventDefault()
+    }
+  }
+
   const onSubmit = handleSubmit(
     async (data) => await updateMediaItem(mediaId, { ...mediaItem, ...data }),
   )
   const i18n = createI18n(i18nConfig)
   return (
     <I18nContext.Provider value={i18n}>
-      <form className="flex flex-col" onSubmit={onSubmit}>
+      <form
+        className="flex flex-col"
+        onSubmit={onSubmit}
+        onKeyDown={preventSubmitOnEnter}
+      >
         <div className="mb-8 flex items-end justify-between">
           <h1 className="text-3xl">{i18n.t("ln.admin.edit-media-item")}</h1>
           <SubmitButton control={control} />
@@ -57,37 +70,50 @@ export default function EditForm({
         <Input
           name="title"
           label="ln.admin.title"
+          required
           control={control}
           defaultValue={mediaItem.title}
         />
         <Select
           name="type"
           label="ln.type"
+          required
           options={mediaTypes}
           control={control}
           defaultValue={mediaItem.type}
         />
-        <Image
-          control={control}
-          defaultValue={mediaItem.image}
-          mediaId={mediaId}
-        />
         <Select
           name="language"
           label="ln.language"
+          required
           defaultValue={mediaItem.language}
           options={languages}
           control={control}
         />
-        <Authors control={control} defaultValue={mediaItem.authors} />
+        <Image
+          control={control}
+          defaultValue={mediaItem.image}
+          mediaId={mediaId}
+        />
+        <Content control={control} defaultValue={mediaItem.content} />
         <Input
           name="dateCreated"
           label="ln.admin.date-created"
           hint="ln.admin.date-created-hint"
           type="date"
+          required
           defaultValue={mediaItem.dateCreated}
           control={control}
         />
+        <Input
+          name="commonId"
+          label="ln.admin.common-id"
+          required
+          hint="ln.admin.common-id-hint"
+          control={control}
+          defaultValue={mediaItem.commonId}
+        />
+        <Authors control={control} defaultValue={mediaItem.authors} />
         <Categories
           categories={categories}
           control={control}
@@ -103,14 +129,6 @@ export default function EditForm({
           name="description"
           label="ln.admin.description"
         />
-        <Input
-          name="commonId"
-          label="ln.admin.common-id"
-          hint="ln.admin.common-id-hint"
-          control={control}
-          defaultValue={mediaItem.commonId}
-        />
-
         <SubmitButton className="mt-8 self-end" control={control} />
       </form>
     </I18nContext.Provider>

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

@@ -77,14 +77,14 @@ const languages = config.languages.map(({ code, label }) => ({
 >
   <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"
+      class="block pb-4 pt-8 text-slate-200 underline"
       href=`/${Astro.currentLocale}/media/${mediaId}`
       >{t("ln.admin.back-to-details-page")}</a
     >
   </div>
 
   <div
-    class="mx-auto max-w-screen-md rounded-2xl bg-gray-200 px-4 py-8 shadow-md md:px-8"
+    class="mx-auto min-h-screen max-w-screen-md rounded-xl bg-slate-100 px-4 py-8 shadow-md md:px-8"
   >
     <EditForm
       mediaId={mediaId}

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

@@ -1,5 +1,7 @@
 import { type Control } from "react-hook-form"
 
+import { useI18n } from "../../../../i18n/react/use-i18n"
+import Button from "../../../components/form/atoms/Button"
 import DynamicArray from "../../../components/form/DynamicArray"
 import Input from "../../../components/form/Input"
 import type { MediaItem } from "../../../types/media-item"
@@ -11,6 +13,7 @@ export default function Authors({
   control: Control<MediaItem>
   defaultValue: MediaItem["authors"]
 }) {
+  const { t } = useI18n()
   return (
     <DynamicArray
       control={control}
@@ -20,15 +23,22 @@ export default function Authors({
         <Input
           name={`authors.${index}.value`}
           preserveHintSpace={false}
+          placeholder={t("ln.admin.author-name")}
+          required
           control={control}
           defaultValue={defaultValue[index]?.value}
         />
       )}
-      addButton={{
-        label: "ln.admin.add-author",
-        onClick: (append, index) =>
-          append({ value: "" }, { focusName: `authors.${index}.value` }),
-      }}
+      renderAddButton={({ addElement, index }) => (
+        <Button
+          variant="secondary"
+          onClick={() =>
+            addElement({ value: "" }, { focusName: `authors.${index}.value` })
+          }
+        >
+          {t("ln.admin.add-author")}
+        </Button>
+      )}
     />
   )
 }

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

@@ -1,5 +1,7 @@
 import { type Control } from "react-hook-form"
 
+import { useI18n } from "../../../../i18n/react/use-i18n"
+import Button from "../../../components/form/atoms/Button"
 import DynamicArray from "../../../components/form/DynamicArray"
 import Select from "../../../components/form/Select"
 import type { MediaItem } from "../../../types/media-item"
@@ -13,6 +15,7 @@ export default function Categories({
   defaultValue: MediaItem["categories"]
   categories: { id: string; labelText: string }[]
 }) {
+  const { t } = useI18n()
   return (
     <DynamicArray
       control={control}
@@ -22,16 +25,25 @@ export default function Categories({
         <Select
           options={categories}
           control={control}
+          required
           name={`categories.${index}.value`}
           defaultValue={defaultValue[index]?.value}
           preserveHintSpace={false}
         />
       )}
-      addButton={{
-        label: "ln.admin.add-category",
-        onClick: (append, index) =>
-          append({ value: "" }, { focusName: `categories.${index}.value` }),
-      }}
+      renderAddButton={({ addElement, index }) => (
+        <Button
+          variant="secondary"
+          onClick={() =>
+            addElement(
+              { value: "" },
+              { focusName: `categories.${index}.value` },
+            )
+          }
+        >
+          {t("ln.admin.add-category")}
+        </Button>
+      )}
     />
   )
 }

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

@@ -1,5 +1,7 @@
 import { type Control } from "react-hook-form"
 
+import { useI18n } from "../../../../i18n/react/use-i18n"
+import Button from "../../../components/form/atoms/Button"
 import DynamicArray from "../../../components/form/DynamicArray"
 import Input from "../../../components/form/Input"
 import Select from "../../../components/form/Select"
@@ -14,17 +16,19 @@ export default function Collections({
   collections: { id: string; labelText: string }[]
   defaultValue: MediaItem["collections"]
 }) {
+  const { t } = useI18n()
   return (
     <DynamicArray
       control={control}
       name="collections"
       label="ln.admin.collections"
       renderElement={(index) => (
-        <div className="flex w-full flex-col gap-4 py-2">
+        <div className="flex w-full flex-col gap-6">
           <Select
             options={collections}
             label="ln.admin.name"
             labelSize="small"
+            required
             preserveHintSpace={false}
             name={`collections.${index}.collection`}
             control={control}
@@ -39,20 +43,26 @@ export default function Collections({
             min={0}
             preserveHintSpace={false}
             defaultValue={defaultValue[index]?.index}
-            {...control.register(`collections.${index}.index`, {
+            name={`collections.${index}.index`}
+            registerOptions={{
               setValueAs: (value) => (value === "" ? undefined : Number(value)),
-            })}
+            }}
           />
         </div>
       )}
-      addButton={{
-        label: "ln.admin.add-collection",
-        onClick: (append, index) =>
-          append(
-            { collection: "" },
-            { focusName: `collections.${index}.collection` },
-          ),
-      }}
+      renderAddButton={({ addElement, index }) => (
+        <Button
+          variant="secondary"
+          onClick={() =>
+            addElement(
+              { collection: "" },
+              { focusName: `collections.${index}.collection` },
+            )
+          }
+        >
+          {t("ln.admin.add-collection")}
+        </Button>
+      )}
     />
   )
 }