lightnet 3.10.7 → 3.11.0

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

@@ -1,15 +1,18 @@
 import { type Control, type FieldValues, type Path } from "react-hook-form"
 
+import Icon from "../../../components/Icon"
 import ErrorMessage from "./atoms/ErrorMessage"
 import Hint from "./atoms/Hint"
 import Label from "./atoms/Label"
 import { useFieldDirty } from "./hooks/use-field-dirty"
 import { useFieldError } from "./hooks/use-field-error"
+import { getBorderClass } from "./utils/get-border-class"
 
 export default function Select<TFieldValues extends FieldValues>({
   name,
   label,
   labelSize,
+  required = false,
   control,
   defaultValue,
   hint,
@@ -20,6 +23,7 @@ export default function Select<TFieldValues extends FieldValues>({
   label?: string
   labelSize?: "small" | "medium"
   hint?: string
+  required?: boolean
   preserveHintSpace?: boolean
   defaultValue?: string
   control: Control<TFieldValues>
@@ -35,23 +39,31 @@ export default function Select<TFieldValues extends FieldValues>({
             label={label}
             size={labelSize}
             isDirty={isDirty}
+            required={required}
             isInvalid={!!errorMessage}
           />
         </label>
       )}
-      <select
-        {...control.register(name)}
-        id={name}
-        aria-invalid={!!errorMessage}
-        defaultValue={defaultValue}
-        className={`dy-select dy-select-bordered text-base shadow-sm focus:border-blue-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""} ${label ? "rounded-ss-none" : ""}`}
-      >
-        {options.map(({ id, labelText }) => (
-          <option key={id} value={id}>
-            {labelText ?? id}
-          </option>
-        ))}
-      </select>
+      <div className="relative">
+        <select
+          {...control.register(name)}
+          id={name}
+          aria-invalid={!!errorMessage}
+          aria-required={required}
+          defaultValue={defaultValue}
+          className={`w-full appearance-none rounded-xl ${getBorderClass({ isDirty, errorMessage })} bg-white px-4 py-3 pe-12 shadow-sm ${label ? "rounded-ss-none" : ""}`}
+        >
+          {options.map(({ id, labelText }) => (
+            <option key={id} value={id}>
+              {labelText ?? id}
+            </option>
+          ))}
+        </select>
+        <Icon
+          className="absolute end-3 top-1/2 -translate-y-1/2 text-lg text-slate-600 mdi--chevron-down"
+          ariaLabel=""
+        />
+      </div>
       <ErrorMessage message={errorMessage} />
       <Hint preserveSpace={preserveHintSpace} label={hint} />
     </div>

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

@@ -2,16 +2,16 @@ 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 { useI18n } from "../../../i18n/react/use-i18n"
 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-4 py-3 font-bold shadow-sm transition-colors easy-in-out focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-blue-700 focus-visible:ring-offset-1 disabled:cursor-not-allowed"
+  "flex min-w-52 items-center justify-center gap-2 rounded-xl px-4 py-3 font-bold shadow-sm transition-colors easy-in-out focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-sky-700 focus-visible:ring-offset-1 disabled:cursor-not-allowed"
 
 const buttonStateClasses = {
-  idle: "bg-gray-800 text-gray-50 hover:bg-gray-950 hover:text-gray-300 disabled:bg-gray-500 disabled:text-gray-300",
+  idle: "bg-slate-800 text-slate-50 hover:bg-slate-950 hover:text-slate-300 disabled:bg-slate-500 disabled:text-slate-300",
   error:
     "bg-rose-700 text-white hover:bg-rose-800 hover:text-white disabled:bg-rose-600",
   success:

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

@@ -0,0 +1,27 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react"
+
+type Props = {
+  variant: "secondary"
+  children?: ReactNode
+} & ButtonHTMLAttributes<HTMLButtonElement>
+
+export default function Button({
+  children,
+  className,
+  variant,
+  ...buttonProps
+}: Props) {
+  const styles = {
+    secondary: "text-slate-800 bg-slate-50 hover:bg-sky-50",
+  } as const
+
+  return (
+    <button
+      className={`flex items-center gap-1 rounded-xl px-10 py-4 text-sm font-bold shadow-sm transition-colors ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-700 ${styles[variant]} ${className}`}
+      type="button"
+      {...buttonProps}
+    >
+      {children}
+    </button>
+  )
+}

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,190 @@
+import {
+  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({
+  onUpload,
+  onBlur,
+  acceptedFileTypes,
+  title,
+  icon,
+  multiple,
+  description,
+}: {
+  onUpload: (...file: File[]) => void
+  onBlur?: () => void
+  acceptedFileTypes?: Readonly<FileType[]>
+  title: string
+  icon?: string
+  multiple?: boolean
+  description: string
+}) {
+  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)
+
+  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 (
+      maxFileSizeBytes &&
+      files.find((file) => file.size > maxFileSizeBytes)
+    ) {
+      triggerInvalidFeedback(
+        t("ln.admin.file-too-big", {
+          maxFileSize: config.experimental?.admin?.maxFileSize,
+        }),
+      )
+      return
+    }
+    onUpload(...files)
+    setInvalidFeedbackMessage(null)
+  }
+
+  const onDragEnter = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    setIsDragging(true)
+  }
+
+  const onDrop = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    setIsDragging(false)
+    onFilesSelected([...event.dataTransfer.files])
+  }
+
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    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={`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()}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault()
+            fileInputRef.current?.click()
+          }
+        }}
+        onDragOver={onDragEnter}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={onDrop}
+      >
+        <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="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
+        tabIndex={-1}
+        ref={(ref) => {
+          fileInputRef.current = ref
+        }}
+        type="file"
+        multiple={multiple}
+        accept={acceptedFileTypes?.join(",")}
+        className="hidden"
+        onChange={onInputChange}
+      />
+    </>
+  )
+}

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

@@ -1,4 +1,4 @@
-import { useI18n } from "../../../../i18n/react/useI18n"
+import { useI18n } from "../../../../i18n/react/use-i18n"
 
 export default function Hint({
   label,
@@ -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

@@ -1,4 +1,4 @@
-import { useI18n } from "../../../../i18n/react/useI18n"
+import { useI18n } from "../../../../i18n/react/use-i18n"
 
 export default function Label({
   label,
@@ -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-blue-700 group-focus-within:text-gray-50 group-focus-within:ring-1 group-focus-within:ring-blue-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/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/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/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

@@ -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
@@ -15,14 +27,24 @@ 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.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: 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-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.
 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

@@ -1,12 +1,10 @@
 ---
 import Page from "../../layouts/Page.astro"
-
-export { getLocalePaths as getStaticPaths } from "../../i18n/get-locale-paths"
 ---
 
 <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,8 @@ 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"
 
 type SelectOption = { id: string; labelText: string }
@@ -41,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} />
@@ -56,19 +70,14 @@ export default function EditForm({
         <Input
           name="title"
           label="ln.admin.title"
+          required
           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"
+          required
           options={mediaTypes}
           control={control}
           defaultValue={mediaItem.type}
@@ -76,19 +85,35 @@ export default function EditForm({
         <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}
@@ -104,8 +129,7 @@ export default function EditForm({
           name="description"
           label="ln.admin.description"
         />
-
-        <SubmitButton className="self-end" control={control} />
+        <SubmitButton className="mt-8 self-end" control={control} />
       </form>
     </I18nContext.Provider>
   )