lightnet 3.10.4 → 3.10.6

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

@@ -8,29 +8,32 @@ import { useFieldError } from "./hooks/use-field-error"
 export default function Input<TFieldValues extends FieldValues>({
   name,
   label,
+  defaultValue,
   hint,
   control,
   type = "text",
 }: {
   name: Path<TFieldValues>
   label: string
+  defaultValue?: string
   hint?: string
   control: Control<TFieldValues>
   type?: "text" | "date"
 }) {
-  const hasError = !!useFieldError({ control, name })
+  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 ${hasError ? "dy-input-error" : ""}`}
+        className={`dy-input dy-input-bordered shadow-inner ${errorMessage ? "dy-input-error" : ""}`}
         type={type}
         id={name}
-        aria-invalid={hasError}
+        defaultValue={defaultValue}
+        aria-invalid={!!errorMessage}
         {...control.register(name)}
       />
-      <ErrorMessage name={name} control={control} />
-      <Hint hint={hint} />
+      <ErrorMessage message={errorMessage} />
+      <Hint label={hint} />
     </div>
   )
 }

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

@@ -0,0 +1,78 @@
+import "@mdxeditor/editor/style.css"
+
+import {
+  BlockTypeSelect,
+  BoldItalicUnderlineToggles,
+  CreateLink,
+  diffSourcePlugin,
+  DiffSourceToggleWrapper,
+  headingsPlugin,
+  linkDialogPlugin,
+  linkPlugin,
+  listsPlugin,
+  ListsToggle,
+  MDXEditor,
+  quotePlugin,
+  toolbarPlugin,
+  UndoRedo,
+} from "@mdxeditor/editor"
+import {
+  type Control,
+  Controller,
+  type FieldValues,
+  type Path,
+} from "react-hook-form"
+
+/**
+ * IMPORTANT: Do not import this component directly. It is
+ * very big. Use it with React lazy loading.
+ */
+export default function LazyLoadedMarkdownEditor<
+  TFieldValues extends FieldValues,
+>({
+  control,
+  defaultValue,
+  name,
+}: {
+  name: Path<TFieldValues>
+  control: Control<TFieldValues>
+  defaultValue?: string
+}) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { onBlur, onChange, value, ref } }) => (
+        <MDXEditor
+          markdown={value ?? ""}
+          onBlur={onBlur}
+          onChange={onChange}
+          contentEditableClassName="prose bg-gray-50 h-80 w-full max-w-full overflow-y-auto"
+          ref={ref}
+          plugins={[
+            headingsPlugin(),
+            listsPlugin(),
+            linkPlugin(),
+            linkDialogPlugin(),
+            diffSourcePlugin({
+              viewMode: "rich-text",
+              diffMarkdown: defaultValue,
+            }),
+            quotePlugin(),
+            toolbarPlugin({
+              toolbarContents: () => (
+                <DiffSourceToggleWrapper>
+                  <UndoRedo />
+                  <BoldItalicUnderlineToggles />
+                  <BlockTypeSelect />
+                  <ListsToggle options={["bullet", "number"]} />
+                  <CreateLink />
+                </DiffSourceToggleWrapper>
+              ),
+            }),
+          ]}
+        />
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,52 @@
+import { lazy, Suspense } from "react"
+import { type Control, type FieldValues, type Path } from "react-hook-form"
+
+import ErrorMessage from "./atoms/ErrorMessage"
+import Hint from "./atoms/Hint"
+import Legend from "./atoms/Legend"
+import { useFieldError } from "./hooks/use-field-error"
+
+const LazyLoadedMarkdownEditor = lazy(
+  () => import("./LazyLoadedMarkdownEditor"),
+)
+
+export default function MarkdownEditor<TFieldValues extends FieldValues>({
+  control,
+  defaultValue,
+  name,
+  label,
+  hint,
+}: {
+  name: Path<TFieldValues>
+  label: string
+  hint?: string
+  control: Control<TFieldValues>
+  defaultValue?: string
+}) {
+  const errorMessage = useFieldError({ control, name })
+
+  return (
+    <fieldset key={name}>
+      <Legend label={label} />
+      <div
+        className={`overflow-hidden rounded-lg border border-gray-300 shadow-sm ${errorMessage ? "border-rose-800" : ""}`}
+      >
+        <Suspense
+          fallback={
+            <div className="h-[22.75rem] w-full bg-gray-50">
+              <div className="h-10 bg-gray-100"></div>
+            </div>
+          }
+        >
+          <LazyLoadedMarkdownEditor
+            control={control as Control<any>}
+            name={name}
+            defaultValue={defaultValue}
+          />
+        </Suspense>
+      </div>
+      <ErrorMessage message={errorMessage} />
+      <Hint label={hint} />
+    </fieldset>
+  )
+}

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

@@ -1,6 +1,5 @@
 import type { Control, FieldValues, Path } from "react-hook-form"
 
-import { useI18n } from "../../../i18n/react/useI18n"
 import ErrorMessage from "./atoms/ErrorMessage"
 import Hint from "./atoms/Hint"
 import Label from "./atoms/Label"
@@ -10,34 +9,36 @@ export default function Select<TFieldValues extends FieldValues>({
   name,
   label,
   control,
+  defaultValue,
   hint,
   options,
 }: {
   name: Path<TFieldValues>
   label: string
   hint?: string
+  defaultValue?: string
   control: Control<TFieldValues>
-  options: { id: string; label?: string }[]
+  options: { id: string; labelText?: string }[]
 }) {
-  const { t } = useI18n()
-  const hasError = !!useFieldError({ control, name })
+  const errorMessage = useFieldError({ control, name })
   return (
     <div key={name} className="flex w-full flex-col">
       <Label for={name} label={label} />
       <select
         {...control.register(name)}
         id={name}
-        aria-invalid={hasError}
-        className={`dy-select dy-select-bordered ${hasError ? "dy-select-error" : ""}"`}
+        aria-invalid={!!errorMessage}
+        defaultValue={defaultValue}
+        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>
-      <ErrorMessage name={name} control={control} />
-      <Hint hint={hint} />
+      <ErrorMessage message={errorMessage} />
+      <Hint label={hint} />
     </div>
   )
 }

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

@@ -8,7 +8,7 @@ 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
 
@@ -38,10 +40,9 @@ export default function SubmitButton({
   className?: string
 }) {
   const { t } = useI18n()
-  const { isValid, isSubmitting, isSubmitSuccessful, submitCount } =
-    useFormState({
-      control,
-    })
+  const { isSubmitting, isSubmitSuccessful, submitCount } = useFormState({
+    control,
+  })
 
   const buttonState = useButtonState(isSubmitSuccessful, submitCount)
   const buttonClass = `${baseButtonClass} ${buttonStateClasses[buttonState]} ${className}`
@@ -49,11 +50,7 @@ export default function SubmitButton({
   const icon = icons[buttonState]
 
   return (
-    <button
-      className={buttonClass}
-      type="submit"
-      disabled={!isValid || isSubmitting}
-    >
+    <button className={buttonClass} type="submit" disabled={isSubmitting}>
       {icon && <Icon className={icon} ariaLabel="" />}
       {t(label)}
     </button>

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

@@ -1,34 +1,13 @@
-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>
-}) {
+export default function ErrorMessage({ message }: { message?: string }) {
   const { t } = useI18n()
-  const { errors } = useFormState({ control, name, exact: true })
+  if (!message) {
+    return null
+  }
   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>
-        )
-      }}
-    />
+    <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-12 w-full items-start justify-end p-2">
-      {hint && <span className="dy-label-text-alt">{t(hint)}</span>}
+      {label && <span className="dy-label-text-alt">{t(label)}</span>}
     </div>
   )
 }

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

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

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

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

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

@@ -1,21 +1,13 @@
-import { type Control, type FieldError, useFormState } from "react-hook-form"
+import { type Control, get, 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
+  const error = get(errors, name) as { message: string } | undefined
+  return error?.message
 }

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

@@ -1,17 +1,28 @@
 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.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.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

@@ -7,28 +7,40 @@ import {
   I18nContext,
 } from "../../../i18n/react/i18n-context"
 import Input from "../../components/form/Input"
+import MarkdownEditor from "../../components/form/MarkdownEditor"
 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 { 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,
     resolver: zodResolver(mediaItemSchema),
   })
   const onSubmit = handleSubmit(
@@ -37,36 +49,66 @@ export default function EditForm({
   const i18n = createI18n(i18nConfig)
   return (
     <I18nContext.Provider value={i18n}>
-      <form onSubmit={onSubmit}>
-        <Input name="title" label="ln.admin.title" control={control} />
+      <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}
+          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"
           options={mediaTypes}
           control={control}
+          defaultValue={mediaItem.type}
         />
         <Select
           name="language"
           label="ln.language"
+          defaultValue={mediaItem.language}
           options={languages}
           control={control}
         />
-        <Authors control={control} />
+        <Authors control={control} defaultValue={mediaItem.authors} />
         <Input
           name="dateCreated"
           label="ln.admin.created-on"
           hint="ln.admin.created-on-hint"
           type="date"
+          defaultValue={mediaItem.dateCreated}
+          control={control}
+        />
+        <Categories
+          categories={categories}
+          control={control}
+          defaultValue={mediaItem.categories}
+        />
+        <Collections
+          collections={collections}
+          control={control}
+          defaultValue={mediaItem.collections}
+        />
+        <MarkdownEditor
           control={control}
+          name="description"
+          label="ln.admin.description"
+          defaultValue={mediaItem.description}
         />
 
-        <SubmitButton className="mt-8" control={control} />
+        <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"
@@ -23,42 +24,60 @@ 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"
-      href=`/${Astro.currentLocale}/media/faithful-freestyle--en`
+      class="block pb-4 pt-8 text-gray-200 underline"
+      href=`/${Astro.currentLocale}/media/${mediaId}`
       >{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={formData}
       i18nConfig={i18nConfig}
       mediaTypes={mediaTypes}
       languages={languages}
+      categories={categories}
+      collections={collections}
       client:load
     />
   </div>