@rimelight/ui 0.0.37 → 0.0.39

package/src/components/editor/views/PageEditView.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { computed, ref, watch, nextTick } from "vue"
+import type { Page, PageVersion, PageDefinition } from "../types/pages"
+import { getPageResolutionPath } from "../utils/page"
+import PageEditor from "../PageEditor.vue"
+
+export interface PageEditViewProps {
+  lookupPath?: string
+  fetchUrl?: string
+  cacheKey?: string
+  pageDefinitions: Record<string, PageDefinition>
+  baseUrl: string
+  hierarchyPath?: string
+  isAdmin?: boolean
+  backUrl?: string
+}
+
+const {
+  lookupPath,
+  fetchUrl,
+  cacheKey,
+  pageDefinitions,
+  baseUrl,
+  hierarchyPath,
+  isAdmin = false,
+  backUrl
+} = defineProps<PageEditViewProps>()
+
+const resolvedFetchUrl = computed(() => getPageResolutionPath(lookupPath || fetchUrl || ""))
+const isSaving = ref(false)
+const currentVersionId = ref<string | null>(null)
+const editorRef = ref<{
+  resetHistory: () => void
+} | null>(null)
+const localPage = ref<Page | null>(null)
+const pageData = ref<Page | null>(null)
+const pageStatus = ref<"idle" | "pending" | "success" | "error">("idle")
+
+const fetchPageDetails = async () => {
+  if (!resolvedFetchUrl.value) return
+  pageStatus.value = "pending"
+  try {
+    const res = await fetch(resolvedFetchUrl.value)
+    if (!res.ok) throw new Error("Failed to fetch")
+    const data = await res.json()
+    pageData.value = data
+    localPage.value = JSON.parse(JSON.stringify(data))
+    pageStatus.value = "success"
+  } catch (err) {
+    pageStatus.value = "error"
+  }
+}
+
+watch(() => resolvedFetchUrl.value, fetchPageDetails, { immediate: true })
+
+const resolvePage = async (idOrSlug: string): Promise<Pick<Page, "title" | "icon" | "slug">> => {
+  const url = getPageResolutionPath(idOrSlug)
+  if (!url) throw new Error(`[Editor] Invalid page reference: ${idOrSlug}`)
+  const res = await fetch(`${url}?select=title,icon,slug`)
+  if (!res.ok) throw new Error(`[Editor] Page not found: ${idOrSlug}`)
+  return await res.json()
+}
+
+const fetchPages = async () => {
+  const types = Object.keys(pageDefinitions).join(",")
+  const prefix = (hierarchyPath ?? baseUrl).replace(/^\/|\/$/g, "")
+  const res = await fetch(
+    `/api/pages/list?select=title,slug,type,id&types=${types}&prefix=${prefix}`
+  )
+  if (!res.ok) throw new Error("Failed to fetch page list")
+  return await res.json()
+}
+
+const handleSave = async (updatedPage: Page): Promise<void> => {
+  if (!updatedPage.id) return
+  isSaving.value = true
+  try {
+    await fetch(`/api/pages/id/${updatedPage.id}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(updatedPage)
+    })
+    await fetchPageDetails()
+    await nextTick()
+    editorRef.value?.resetHistory()
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isSaving.value = false
+  }
+}
+
+const handlePublish = async (updatedPage: Page): Promise<void> => {
+  if (!updatedPage.id) return
+  isSaving.value = true
+  try {
+    await fetch(`/api/pages/id/${updatedPage.id}/publish`, {
+      method: "POST"
+    })
+    const base = baseUrl.replace(/\/$/, "")
+    const cleanBase = base.replace(/^\//, "")
+    const slugToUse = updatedPage.slug.startsWith(cleanBase)
+      ? updatedPage.slug
+      : `${cleanBase}/${updatedPage.slug}`
+    if (typeof window !== "undefined") {
+      window.location.href = `/${slugToUse}`
+    }
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isSaving.value = false
+  }
+}
+
+const handleUnpublish = async (updatedPage: Page): Promise<void> => {
+  if (!updatedPage.id) return
+  isSaving.value = true
+  try {
+    await fetch(`/api/pages/id/${updatedPage.id}/unpublish`, {
+      method: "POST"
+    })
+    await fetchPageDetails()
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isSaving.value = false
+  }
+}
+
+const handleDelete = async (id: string) => {
+  try {
+    await fetch(`/api/pages/id/${id}`, {
+      method: "DELETE"
+    })
+    const dest = backUrl || baseUrl
+    if (typeof window !== "undefined") {
+      window.location.href = dest
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+const handleVersionNavigate = (version: PageVersion) => {
+  if (!version?.id || !localPage.value?.slug) return
+  const base = baseUrl.replace(/\/$/, "")
+  const cleanBase = base.replace(/^\//, "")
+  const slugToUse = localPage.value.slug.startsWith(cleanBase)
+    ? localPage.value.slug
+    : `${cleanBase}/${localPage.value.slug}`
+  if (typeof window !== "undefined") {
+    window.location.href = `/${slugToUse}/review?version=${version.id}`
+  }
+}
+
+const handleNavigateToPage = (slug: string) => {
+  const base = baseUrl.replace(/\/$/, "")
+  const cleanBase = base.replace(/^\//, "")
+  const slugToUse = slug.startsWith(cleanBase) ? slug : `${cleanBase}/${slug}`
+  if (typeof window !== "undefined") {
+    window.location.href = `/${slugToUse}/edit`
+  }
+}
+
+defineOptions({ name: "PageEditView" })
+</script>
+
+<template>
+  <div v-if="pageStatus === 'pending'" class="h-full w-full flex items-center justify-center p-12">
+    <span class="i-lucide-loader-2 size-12 animate-spin text-neutral-400" />
+  </div>
+  <div v-else-if="pageStatus === 'error' || !localPage" class="p-8 text-center">
+    <h3 class="text-lg font-bold text-red-600">Page Not Found</h3>
+    <p class="text-neutral-500 mt-2">The requested page could not be loaded.</p>
+  </div>
+  <template v-else-if="localPage && localPage.id">
+    <PageEditor
+      ref="editorRef"
+      v-model="localPage"
+      v-model:current-version-id="currentVersionId"
+      :is-saving="isSaving"
+      :is-admin="isAdmin"
+      :base-path="(hierarchyPath ?? baseUrl).replace(/^\/|\/$/g, '')"
+      :page-definitions="pageDefinitions"
+      :resolve-page="resolvePage"
+      :on-fetch-pages="fetchPages"
+      :on-delete-page="handleDelete"
+      :on-navigate-to-page="handleNavigateToPage"
+      @save="handleSave"
+      @publish="handlePublish"
+      @unpublish="handleUnpublish"
+      @version-navigate="handleVersionNavigate"
+    />
+  </template>
+</template>

package/src/components/editor/views/PageLiveView.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue"
+import type { Page } from "../types/pages"
+import { getPageResolutionPath } from "../utils/page"
+import PageRenderer from "../PageRenderer.vue"
+
+export interface PageLiveViewProps {
+  lookupPath?: string
+  fetchUrl?: string
+  cacheKey?: string
+  baseUrl: string
+  canEdit?: boolean
+}
+const {
+  lookupPath,
+  fetchUrl,
+  cacheKey,
+  baseUrl,
+  canEdit = false
+} = defineProps<PageLiveViewProps>()
+
+const resolvedFetchUrl = computed(() => getPageResolutionPath(lookupPath || fetchUrl || ""))
+const page = ref<Page | null>(null)
+const pageStatus = ref<"idle" | "pending" | "success" | "error">("idle")
+
+const fetchPage = async () => {
+  if (!resolvedFetchUrl.value) return
+  pageStatus.value = "pending"
+  try {
+    const res = await fetch(resolvedFetchUrl.value)
+    if (!res.ok) throw new Error("Failed to fetch page")
+    const data = await res.json()
+    page.value = data
+    pageStatus.value = "success"
+  } catch (err) {
+    pageStatus.value = "error"
+  }
+}
+
+watch(() => resolvedFetchUrl.value, fetchPage, { immediate: true })
+
+const resolvePage = async (idOrSlug: string) => {
+  if (!idOrSlug) return null
+  const clean = idOrSlug.replace(/^\//, "")
+  try {
+    const isUuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(clean)
+    const url = isUuid ? `/api/pages/id/${clean}` : `/api/pages/find/${clean}`
+    const res = await fetch(url)
+    if (res.ok) return await res.json()
+    const res2 = await fetch(`/api/pages/find/${clean}`)
+    if (res2.ok) return await res2.json()
+    return null
+  } catch (err) {
+    console.warn("[PageLiveView resolvePage Error]:", err)
+    return null
+  }
+}
+
+const editUrl = computed(() => {
+  const base = baseUrl.replace(/\/$/, "")
+  if (page.value?.slug) {
+    const slug = page.value.slug
+    const cleanBase = base.replace(/^\//, "")
+    if (slug.startsWith(cleanBase)) {
+      return `/${slug}/edit`
+    }
+    return `${base}/${slug}/edit`
+  }
+  return `${base}/edit`
+})
+
+defineOptions({ name: "PageLiveView" })
+</script>
+
+<template>
+  <div v-if="pageStatus === 'pending'" class="h-full w-full flex items-center justify-center p-12">
+    <span class="i-lucide-loader-2 size-12 animate-spin text-neutral-400" />
+  </div>
+  <div v-else-if="pageStatus === 'error' || !page" class="p-8 text-center">
+    <h3 class="text-lg font-bold text-red-600">Page Not Found</h3>
+    <p class="text-neutral-500 mt-2">The requested page could not be located.</p>
+  </div>
+  <PageRenderer
+    v-else
+    v-model="page"
+    :resolve-page="resolvePage"
+    :can-edit="canEdit"
+    :edit-url="editUrl"
+  />
+</template>

package/src/components/editor/views/PageReviewView.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue"
+import type { Page, PageVersion, PageDefinition } from "../types/pages"
+import {
+  convertVersionToPage,
+  syncPageWithDefinition,
+  getPageResolutionPath,
+  getLocalizedContent
+} from "../utils/page"
+import { useI18n } from "../utils/editorHelpers"
+import PageRenderer from "../PageRenderer.vue"
+import RLVButton from "../../button/RLVButton.vue"
+import PageVersionSelector from "../PageVersionSelector.vue"
+
+export interface PageReviewViewProps {
+  lookupPath: string
+  versionId?: string | null
+  pageDefinitions: Record<string, PageDefinition>
+  baseUrl: string
+  isAdmin?: boolean
+}
+
+const {
+  lookupPath,
+  versionId,
+  pageDefinitions,
+  baseUrl,
+  isAdmin = false
+} = defineProps<PageReviewViewProps>()
+
+export interface PageReviewViewEmits {
+  approved: [version: PageVersion]
+  rejected: [version: PageVersion]
+}
+const emit = defineEmits<PageReviewViewEmits>()
+
+const { t, locale } = useI18n()
+
+const page = ref<Page | null>(null)
+const pageStatus = ref<"idle" | "pending" | "success" | "error">("idle")
+
+const fetchBasePage = async () => {
+  const url = getPageResolutionPath(lookupPath)
+  if (!url) return
+  pageStatus.value = "pending"
+  try {
+    const res = await fetch(url)
+    if (!res.ok) throw new Error("Failed to fetch page")
+    page.value = await res.json()
+    pageStatus.value = "success"
+  } catch (err) {
+    pageStatus.value = "error"
+  }
+}
+
+const versionData = ref<PageVersion | null>(null)
+const versionStatus = ref<"idle" | "pending" | "success" | "error">("idle")
+
+const fetchVersionData = async () => {
+  if (!versionId) {
+    versionData.value = null
+    return
+  }
+  versionStatus.value = "pending"
+  try {
+    const res = await fetch(`/api/pages/versions/${versionId}`)
+    if (!res.ok) throw new Error("Failed to fetch version")
+    versionData.value = await res.json()
+    versionStatus.value = "success"
+  } catch (err) {
+    versionStatus.value = "error"
+  }
+}
+
+watch(() => lookupPath, fetchBasePage, { immediate: true })
+watch(() => versionId, fetchVersionData, { immediate: true })
+
+const localPage = ref<Page | null>(null)
+watch(
+  [page, versionData],
+  () => {
+    if (versionId && versionData.value) {
+      const converted = convertVersionToPage(versionData.value)
+      const typeKey = Object.keys(pageDefinitions).find(
+        (k) => k.toLowerCase() === converted.type?.toLowerCase()
+      )
+      const definition = typeKey ? pageDefinitions[typeKey] : null
+      if (definition) {
+        syncPageWithDefinition(converted, definition)
+      }
+      localPage.value = converted
+    } else if (page.value) {
+      const cloned = JSON.parse(JSON.stringify(page.value))
+      const typeKey = Object.keys(pageDefinitions).find(
+        (k) => k.toLowerCase() === cloned.type?.toLowerCase()
+      )
+      const definition = typeKey ? pageDefinitions[typeKey] : null
+      if (definition) {
+        syncPageWithDefinition(cloned, definition)
+      }
+      localPage.value = cloned
+    }
+  },
+  { immediate: true }
+)
+
+const showCompare = ref(false)
+const leftWidth = ref(50)
+const isActioning = ref<string | null>(null)
+
+const resolvePage = async (idOrSlug: string): Promise<Pick<Page, "title" | "icon" | "slug">> => {
+  const url = getPageResolutionPath(idOrSlug)
+  if (!url) throw new Error(`[Review] Invalid page reference: ${idOrSlug}`)
+  const res = await fetch(`${url}?select=title,icon,slug`)
+  if (!res.ok) throw new Error(`[Review] Page not found: ${idOrSlug}`)
+  return await res.json()
+}
+
+const navigateToView = () => {
+  if (typeof window !== "undefined") {
+    window.location.href = `/${relativeSlug.value}`
+  }
+}
+
+const navigateToVersion = (v: PageVersion) => {
+  if (typeof window !== "undefined") {
+    window.location.search = `?version=${v.id}`
+  }
+}
+
+const handleApprove = async () => {
+  if (!versionId || !isAdmin) return
+  isActioning.value = "approving"
+  try {
+    await fetch(`/api/pages/versions/${versionId}/approve`, { method: "POST" })
+    await fetchBasePage()
+    if (versionData.value) {
+      emit("approved", versionData.value)
+    }
+    if (page.value?.slug) {
+      const base = baseUrl.replace(/\/$/, "")
+      const cleanBase = base.replace(/^\//, "")
+      const slugToUse = page.value.slug.startsWith(cleanBase)
+        ? page.value.slug
+        : `${cleanBase}/${page.value.slug}`
+      if (typeof window !== "undefined") {
+        window.location.href = `/${slugToUse}`
+      }
+    }
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isActioning.value = null
+  }
+}
+
+const handleReject = async () => {
+  if (!versionId || !isAdmin) return
+  isActioning.value = "rejecting"
+  try {
+    await fetch(`/api/pages/versions/${versionId}/reject`, { method: "POST" })
+    await fetchBasePage()
+    if (versionData.value) {
+      emit("rejected", versionData.value)
+    }
+    if (page.value?.slug) {
+      const base = baseUrl.replace(/\/$/, "")
+      const cleanBase = base.replace(/^\//, "")
+      const slugToUse = page.value.slug.startsWith(cleanBase)
+        ? page.value.slug
+        : `${cleanBase}/${page.value.slug}`
+      if (typeof window !== "undefined") {
+        window.location.href = `/${slugToUse}/edit`
+      }
+    }
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isActioning.value = null
+  }
+}
+
+const relativeSlug = computed(() => {
+  if (page.value?.slug) return page.value.slug
+  const base = baseUrl.replace(/^\/|\/$/g, "")
+  return lookupPath.replace(base, "").replace(/^\/|\/$/g, "")
+})
+
+defineOptions({ name: "PageReviewView" })
+</script>
+
+<template>
+  <div
+    v-if="pageStatus === 'pending' || (versionId && versionStatus === 'pending')"
+    class="h-full w-full flex items-center justify-center p-12"
+  >
+    <span class="i-lucide-loader-2 size-12 animate-spin text-neutral-400" />
+  </div>
+
+  <div
+    v-else-if="pageStatus === 'error' || versionStatus === 'error' || !localPage"
+    class="p-8 text-center"
+  >
+    <h3 class="text-lg font-bold text-red-600">Version Not Found</h3>
+    <p class="text-neutral-500 mt-2">The requested page version could not be located.</p>
+  </div>
+
+  <template v-else>
+    <div
+      class="h-12 w-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-between px-4 border-b border-default"
+    >
+      <div class="flex items-center gap-2">
+        <span class="text-xs text-neutral-500 font-medium">
+          Reviewing:
+          <span class="text-neutral-900 dark:text-white font-semibold">
+            {{ getLocalizedContent(localPage?.title, locale) }}
+          </span>
+        </span>
+        <span class="w-px h-4 bg-neutral-200 dark:bg-neutral-700 mx-2" />
+        <PageVersionSelector
+          v-if="page?.id"
+          :page-id="page.id"
+          :current-version-id="versionId || undefined"
+          :is-admin="isAdmin"
+          @version-selected="navigateToVersion"
+        />
+      </div>
+
+      <div class="flex items-center gap-2">
+        <RLVButton
+          color="neutral"
+          variant="ghost"
+          leading-leading-icon="i-lucide-external-link"
+          :label="t('page_editor.view_page', 'View Page')"
+          @click="navigateToView"
+        />
+        <RLVButton
+          color="neutral"
+          variant="ghost"
+          :leading-leading-icon="showCompare ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+          :label="showCompare ? 'Hide' : 'Compare'"
+          @click="showCompare = !showCompare"
+        />
+        <span class="w-px h-4 bg-neutral-200 dark:bg-neutral-700 mx-2" />
+
+        <template v-if="isAdmin && versionId && versionData?.status === 'pending'">
+          <RLVButton
+            leading-leading-icon="i-lucide-x"
+            :label="t('common.reject', 'Reject')"
+            color="danger"
+            variant="outline"
+            :loading="isActioning === 'rejecting'"
+            @click="handleReject"
+          />
+          <RLVButton
+            leading-leading-icon="i-lucide-check"
+            :label="t('common.approve', 'Approve Version')"
+            color="primary"
+            :loading="isActioning === 'approving'"
+            @click="handleApprove"
+          />
+        </template>
+
+        <template v-else-if="versionId && versionData?.status === 'approved'">
+          <span
+            class="text-xs bg-green-500/10 text-green-600 px-2.5 py-1 rounded-md font-medium border border-green-500/20"
+          >
+            Version Already Approved
+          </span>
+        </template>
+
+        <template v-else-if="versionId && versionData?.status === 'rejected'">
+          <span
+            class="text-xs bg-red-500/10 text-red-600 px-2.5 py-1 rounded-md font-medium border border-green-500/20"
+          >
+            Version Rejected
+          </span>
+        </template>
+      </div>
+    </div>
+
+    <div class="flex w-full min-h-0">
+      <div :style="{ width: showCompare ? `${leftWidth}%` : '100%' }" class="overflow-y-auto">
+        <PageRenderer
+          v-if="localPage"
+          :key="versionId || 'live'"
+          v-model="localPage"
+          :resolve-page="resolvePage"
+          class="h-full"
+        />
+      </div>
+
+      <div
+        v-if="showCompare"
+        :style="{ width: `${100 - leftWidth}%` }"
+        class="overflow-y-auto border-l border-default bg-neutral-50/50 dark:bg-neutral-900/10"
+      >
+        <PageRenderer
+          v-if="page"
+          :key="'live-base-' + page.id"
+          :model-value="page"
+          :resolve-page="resolvePage"
+          class="opacity-70 pointer-events-none select-none h-full"
+        />
+      </div>
+    </div>
+  </template>
+</template>

package/src/components/empty/RLAEmpty.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { EmptyProps } from "./empty"
+import emptyTheme from "./empty.theme"
+
+
+const empty = scv(emptyTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as EmptyProps
+
+const classes = resolveClasses(empty, {}, useUi("empty", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/empty/empty.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createEmptyTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createEmptyTheme()

package/src/components/error/RLAError.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ErrorProps } from "./error"
+import errorTheme from "./error.theme"
+
+
+const error = scv(errorTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ErrorProps
+
+const classes = resolveClasses(error, {}, useUi("error", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/error/error.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createErrorTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createErrorTheme()

package/src/components/field-group/RLAFieldGroup.astro

@@ -0,0 +1,36 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { FieldGroupProps } from "./field-group"
+import fieldGroupTheme from "./field-group.theme"
+
+
+const fieldGroup = scv(fieldGroupTheme)
+
+const {
+  prepend,
+  append,
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as FieldGroupProps
+
+const classes = resolveClasses(fieldGroup, {
+  size
+}, useUi("fieldGroup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  {prepend && (
+    <div class={classes.prepend} data-slot="prepend">
+      {prepend}
+    </div>
+  )}
+  <slot />
+  {append && (
+    <div class={classes.append} data-slot="append">
+      {append}
+    </div>
+  )}
+</div>