lightnet 3.12.0 → 3.12.2

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

@@ -1,86 +0,0 @@
-import { useEffect, useRef, useState } from "react"
-import { type Control, useFormState } from "react-hook-form"
-
-import Icon from "../../../components/Icon"
-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-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-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:
-    "bg-emerald-600 text-white hover:bg-emerald-700 hover:text-white disabled:bg-emerald-500",
-} as const
-
-const buttonLabels = {
-  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
-
-const icons = {
-  idle: undefined,
-  success: "mdi--check",
-  error: "mdi--error-outline",
-} as const
-
-export default function SubmitButton({
-  control,
-  className,
-}: {
-  control: Control<MediaItem>
-  className?: string
-}) {
-  const { t } = useI18n()
-  const { isSubmitting, isSubmitSuccessful, submitCount, isDirty } =
-    useFormState({
-      control,
-    })
-
-  const buttonState = useButtonState(isSubmitSuccessful, submitCount)
-  const buttonClass = `${baseButtonClass} ${buttonStateClasses[buttonState]} ${className}`
-  const label = buttonLabels[buttonState]
-  const icon = icons[buttonState]
-
-  return (
-    <button
-      className={buttonClass}
-      type="submit"
-      disabled={isSubmitting || !isDirty}
-    >
-      {icon && <Icon className={icon} ariaLabel="" />}
-      {t(label)}
-    </button>
-  )
-}
-
-function useButtonState(
-  isSubmitSuccessful: boolean,
-  submissionAttempts: number,
-) {
-  const [state, setState] = useState<"success" | "error" | "idle">("idle")
-  const timeoutRef = useRef<number | undefined>(undefined)
-  useEffect(() => {
-    if (submissionAttempts === 0) {
-      return
-    }
-    setState(isSubmitSuccessful ? "success" : "error")
-    if (timeoutRef.current !== undefined) {
-      window.clearTimeout(timeoutRef.current)
-    }
-    timeoutRef.current = window.setTimeout(() => {
-      setState("idle")
-      timeoutRef.current = undefined
-    }, SUCCESS_DURATION_MS)
-  }, [submissionAttempts, isSubmitSuccessful])
-
-  return state
-}

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

@@ -1,27 +0,0 @@
-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,13 +0,0 @@
-import { useI18n } from "../../../../i18n/react/use-i18n"
-
-export default function ErrorMessage({ message }: { message?: string }) {
-  const { t } = useI18n()
-  if (!message) {
-    return null
-  }
-  return (
-    <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/FileUpload.tsx

@@ -1,190 +0,0 @@
-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,19 +0,0 @@
-import { useI18n } from "../../../../i18n/react/use-i18n"
-
-export default function Hint({
-  label,
-  preserveSpace,
-}: {
-  label?: string
-  preserveSpace: boolean
-}) {
-  const { t } = useI18n()
-  if (!preserveSpace && !label) {
-    return null
-  }
-  return (
-    <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,37 +0,0 @@
-import { useI18n } from "../../../../i18n/react/use-i18n"
-
-export default function Label({
-  label,
-  size = "medium",
-  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-600 text-slate-50"
-    }
-    return "bg-slate-300 text-slate-700"
-  }
-  return (
-    <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-dirty.tsx

@@ -1,12 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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 })
-  const error = get(errors, name) as { message: string } | undefined
-  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

@@ -1,22 +0,0 @@
-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-600 " + focusColors(focusWithin)
-  }
-  return "border border-slate-300 " + focusColors(focusWithin)
-}

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

@@ -1,21 +0,0 @@
-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,50 +0,0 @@
-ln.admin.edit: Edit
-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.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
-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.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.
-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/i18n/translations.ts

@@ -1,5 +0,0 @@
-export const builtInAdminTranslations = {
-  en: () => import("./translations/en.yml?raw"),
-} as const
-
-export type AdminTranslationKey = "ln.admin.edit"

package/src/admin/pages/AdminRoute.astro

@@ -1,14 +0,0 @@
----
-import Page from "../../layouts/Page.astro"
----
-
-<Page>
-  <div
-    class="flex h-96 w-full items-center justify-center text-lg font-bold text-slate-500"
-  >
-    Admin features are enabled now.
-  </div>
-</Page>
-<script>
-  localStorage.setItem("ln-admin-enabled", "true")
-</script>

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

@@ -1,136 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod"
-import type { KeyboardEvent } from "react"
-import { useForm } from "react-hook-form"
-
-import {
-  createI18n,
-  type I18nConfig,
-  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 Content from "./fields/Content"
-import Image from "./fields/Image"
-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: SelectOption[]
-  languages: SelectOption[]
-  categories: SelectOption[]
-  collections: SelectOption[]
-}) {
-  const { handleSubmit, control } = useForm({
-    defaultValues: mediaItem,
-    mode: "onTouched",
-    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}
-        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} />
-        </div>
-
-        <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}
-        />
-        <Select
-          name="language"
-          label="ln.language"
-          required
-          defaultValue={mediaItem.language}
-          options={languages}
-          control={control}
-        />
-        <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}
-          defaultValue={mediaItem.categories}
-        />
-        <Collections
-          collections={collections}
-          control={control}
-          defaultValue={mediaItem.collections}
-        />
-        <MarkdownEditor
-          control={control}
-          name="description"
-          label="ln.admin.description"
-        />
-        <SubmitButton className="mt-8 self-end" control={control} />
-      </form>
-    </I18nContext.Provider>
-  )
-}