lightnet 3.10.5 → 3.10.7

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

@@ -0,0 +1,102 @@
+import "@mdxeditor/editor/style.css"
+
+import {
+  BlockTypeSelect,
+  BoldItalicUnderlineToggles,
+  type CodeBlockEditorProps,
+  codeBlockPlugin,
+  CreateLink,
+  headingsPlugin,
+  linkDialogPlugin,
+  linkPlugin,
+  listsPlugin,
+  ListsToggle,
+  markdownShortcutPlugin,
+  MDXEditor,
+  quotePlugin,
+  toolbarPlugin,
+  UndoRedo,
+  useCodeBlockEditorContext,
+} 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,
+  name,
+}: {
+  name: Path<TFieldValues>
+  control: Control<TFieldValues>
+}) {
+  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}
+          onError={(error) =>
+            console.error("Error while editing markdown", error)
+          }
+          plugins={[
+            headingsPlugin(),
+            listsPlugin(),
+            linkPlugin(),
+            codeBlockPlugin({
+              codeBlockEditorDescriptors: [
+                {
+                  match: () => true,
+                  priority: 0,
+                  Editor: TextAreaCodeEditor,
+                },
+              ],
+            }),
+            linkDialogPlugin(),
+            quotePlugin(),
+            markdownShortcutPlugin(),
+            toolbarPlugin({
+              toolbarContents: () => (
+                <>
+                  <UndoRedo />
+                  <BoldItalicUnderlineToggles />
+                  <BlockTypeSelect />
+                  <ListsToggle options={["bullet", "number"]} />
+                  <CreateLink />
+                </>
+              ),
+              toolbarClassName: "!rounded-none",
+            }),
+          ]}
+        />
+      )}
+    />
+  )
+}
+
+function TextAreaCodeEditor(props: CodeBlockEditorProps) {
+  const cb = useCodeBlockEditorContext()
+  return (
+    <div onKeyDown={(e) => e.nativeEvent.stopImmediatePropagation()}>
+      <textarea
+        rows={3}
+        cols={20}
+        defaultValue={props.code}
+        onChange={(e) => cb.setCode(e.target.value)}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,54 @@
+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 Label from "./atoms/Label"
+import { useFieldDirty } from "./hooks/use-field-dirty"
+import { useFieldError } from "./hooks/use-field-error"
+
+const LazyLoadedMarkdownEditor = lazy(
+  () => import("./LazyLoadedMarkdownEditor"),
+)
+
+export default function MarkdownEditor<TFieldValues extends FieldValues>({
+  control,
+  name,
+  label,
+  hint,
+}: {
+  name: Path<TFieldValues>
+  label: string
+  hint?: string
+  control: Control<TFieldValues>
+}) {
+  const isDirty = useFieldDirty({ control, name })
+  const errorMessage = useFieldError({ control, name })
+
+  return (
+    <fieldset key={name} className="group">
+      <legend>
+        <Label label={label} isDirty={isDirty} isInvalid={!!errorMessage} />
+      </legend>
+
+      <div
+        className={`overflow-hidden rounded-lg rounded-ss-none border border-gray-300 shadow-sm group-focus-within:border-blue-700 group-focus-within:ring-1 group-focus-within:ring-blue-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${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}
+          />
+        </Suspense>
+      </div>
+      <ErrorMessage message={errorMessage} />
+      <Hint preserveSpace={true} label={hint} />
+    </fieldset>
+  )
+}

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

@@ -1,32 +1,50 @@
-import type { Control, FieldValues, Path } from "react-hook-form"
+import { type Control, type FieldValues, type Path } from "react-hook-form"
 
 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"
 
 export default function Select<TFieldValues extends FieldValues>({
   name,
   label,
+  labelSize,
   control,
+  defaultValue,
   hint,
+  preserveHintSpace = true,
   options,
 }: {
   name: Path<TFieldValues>
-  label: string
+  label?: string
+  labelSize?: "small" | "medium"
   hint?: string
+  preserveHintSpace?: boolean
+  defaultValue?: string
   control: Control<TFieldValues>
   options: { id: string; labelText?: string }[]
 }) {
+  const isDirty = useFieldDirty({ control, name })
   const errorMessage = useFieldError({ control, name })
   return (
-    <div key={name} className="flex w-full flex-col">
-      <Label for={name} label={label} />
+    <div key={name} className="group flex w-full flex-col">
+      {label && (
+        <label htmlFor={name}>
+          <Label
+            label={label}
+            size={labelSize}
+            isDirty={isDirty}
+            isInvalid={!!errorMessage}
+          />
+        </label>
+      )}
       <select
         {...control.register(name)}
         id={name}
         aria-invalid={!!errorMessage}
-        className={`dy-select dy-select-bordered text-base shadow-sm ${errorMessage ? "dy-select-error" : ""}`}
+        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}>
@@ -35,7 +53,7 @@ export default function Select<TFieldValues extends FieldValues>({
         ))}
       </select>
       <ErrorMessage message={errorMessage} />
-      <Hint label={hint} />
+      <Hint preserveSpace={preserveHintSpace} label={hint} />
     </div>
   )
 }

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

@@ -8,10 +8,10 @@ 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 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"
+  "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"
 
 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",
+  idle: "bg-gray-800 text-gray-50 hover:bg-gray-950 hover:text-gray-300 disabled:bg-gray-500 disabled:text-gray-300",
   error:
     "bg-rose-700 text-white hover:bg-rose-800 hover:text-white disabled:bg-rose-600",
   success:
@@ -40,9 +40,10 @@ export default function SubmitButton({
   className?: string
 }) {
   const { t } = useI18n()
-  const { isSubmitting, isSubmitSuccessful, submitCount } = useFormState({
-    control,
-  })
+  const { isSubmitting, isSubmitSuccessful, submitCount, isDirty } =
+    useFormState({
+      control,
+    })
 
   const buttonState = useButtonState(isSubmitSuccessful, submitCount)
   const buttonClass = `${baseButtonClass} ${buttonStateClasses[buttonState]} ${className}`
@@ -50,7 +51,11 @@ export default function SubmitButton({
   const icon = icons[buttonState]
 
   return (
-    <button className={buttonClass} type="submit" disabled={isSubmitting}>
+    <button
+      className={buttonClass}
+      type="submit"
+      disabled={isSubmitting || !isDirty}
+    >
       {icon && <Icon className={icon} ariaLabel="" />}
       {t(label)}
     </button>

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

@@ -1,9 +1,18 @@
 import { useI18n } from "../../../../i18n/react/useI18n"
 
-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

@@ -2,22 +2,25 @@ import { useI18n } from "../../../../i18n/react/useI18n"
 
 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-500 ${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-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>
   )
 }

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/i18n/translations/en.yml

@@ -1,23 +1,24 @@
 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.authors: Authors
-ln.admin.created-on: Created on
-ln.admin.created-on-hint: When has this item been created on this library?
+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.errors.non-empty-string: Please enter at least one character.
 ln.admin.errors.invalid-date: That date doesn't look right.

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

@@ -7,6 +7,7 @@ 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"
@@ -52,35 +53,57 @@ export default function EditForm({
           <SubmitButton control={control} />
         </div>
 
-        <Input name="title" label="ln.admin.title" control={control} />
+        <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"
+          label="ln.admin.date-created"
+          hint="ln.admin.date-created-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"
         />
-        <Categories categories={categories} control={control} />
-        <Collections collections={collections} control={control} />
 
         <SubmitButton className="self-end" control={control} />
       </form>

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

@@ -58,11 +58,11 @@ const languages = config.languages.map(({ code, label }) => ({
 }))
 ---
 
-<Page mainClass="bg-slate-500">
+<Page mainClass="bg-gray-700">
   <div class="mx-auto block max-w-screen-md px-4 md:px-8">
     <a
-      class="block py-4 text-gray-200 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
     >
   </div>

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

@@ -1,17 +1,29 @@
 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({ control }: { control: Control<MediaItem> }) {
+export default function Authors({
+  control,
+  defaultValue,
+}: {
+  control: Control<MediaItem>
+  defaultValue: MediaItem["authors"]
+}) {
   return (
     <DynamicArray
       control={control}
       name="authors"
       label="ln.admin.authors"
-      renderElement={(index) => <AuthorInput index={index} control={control} />}
+      renderElement={(index) => (
+        <Input
+          name={`authors.${index}.value`}
+          preserveHintSpace={false}
+          control={control}
+          defaultValue={defaultValue[index]?.value}
+        />
+      )}
       addButton={{
         label: "ln.admin.add-author",
         onClick: (append, index) =>
@@ -20,24 +32,3 @@ export default function Authors({ control }: { control: Control<MediaItem> }) {
     />
   )
 }
-
-function AuthorInput({
-  index,
-  control,
-}: {
-  index: number
-  control: Control<MediaItem>
-}) {
-  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}
-        {...control.register(name)}
-      />
-      <ErrorMessage message={errorMessage} />
-    </>
-  )
-}

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

@@ -1,15 +1,16 @@
 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({
   control,
   categories,
+  defaultValue,
 }: {
   control: Control<MediaItem>
+  defaultValue: MediaItem["categories"]
   categories: { id: string; labelText: string }[]
 }) {
   return (
@@ -18,10 +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={{
@@ -32,33 +35,3 @@ export default function Categories({
     />
   )
 }
-
-function CategorySelect({
-  control,
-  categories,
-  index,
-}: {
-  control: Control<MediaItem>
-  categories: { id: string; labelText: string }[]
-  index: number
-}) {
-  const name = `categories.${index}.value` as const
-  const errorMessage = useFieldError({ name, control })
-  return (
-    <>
-      <select
-        {...control.register(name)}
-        id={name}
-        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} />
-    </>
-  )
-}