@rimelight/ui 0.0.37 → 0.0.39

package/src/components/editor/PageRenderer.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { computed, provide, watch } from "vue"
+import type { Page, PageSurround, PageDefinition } from "./types/pages"
+import { getLocalizedContent, syncPageWithDefinition } from "./utils/page"
+import { useI18n } from "./utils/editorHelpers"
+import { scv, cx } from "css-variants"
+import PagePropertiesRenderer from "./PagePropertiesRenderer.vue"
+import BlockViewRenderer from "./blocks/BlockViewRenderer.vue"
+import PageSurroundComponent from "./PageSurround.vue"
+
+export interface PageRendererProps {
+  useSurround?: boolean
+  surround?: PageSurround | null
+  surroundStatus?: "idle" | "pending" | "success" | "error"
+  resolvePage: (id: string) => Promise<Pick<Page, "title" | "icon" | "slug">>
+  canEdit?: boolean
+  editUrl?: string
+  pageDefinitions?: Record<string, PageDefinition>
+}
+
+const {
+  useSurround = false,
+  surroundStatus = "idle",
+  surround = null,
+  resolvePage,
+  canEdit = false,
+  editUrl,
+  pageDefinitions
+} = defineProps<PageRendererProps>()
+provide("page-resolver", resolvePage)
+
+const pageRendererStyles = scv({
+  slots: [
+    "container",
+    "grid",
+    "toc",
+    "properties",
+    "contentWrapper",
+    "banner",
+    "icon",
+    "title",
+    "surroundSkeleton",
+    "skeleton",
+    "metadata"
+  ],
+  base: {
+    container: "flex flex-col py-16 w-full max-w-7xl mx-auto px-4",
+    grid: "grid grid-cols-1 lg:grid-cols-24 gap-8 items-start",
+    toc: "hidden lg:flex lg:col-span-4 sticky top-16",
+    properties: "order-1 lg:order-2 lg:col-span-6",
+    contentWrapper: "order-2 lg:order-1 lg:col-span-14 flex flex-col gap-8 w-full min-w-0",
+    banner: "rounded-xl w-full object-cover max-h-[300px]",
+    icon: "rounded-full w-12 h-12 object-cover border border-default shadow-sm",
+    title: "text-4xl font-bold text-neutral-900 dark:text-neutral-100 mt-2",
+    surroundSkeleton: "grid grid-cols-1 gap-4 sm:grid-cols-2 mt-8",
+    skeleton: "h-48 w-full rounded-xl bg-neutral-100 dark:bg-neutral-800 animate-pulse",
+    metadata:
+      "flex flex-col gap-1 text-xs text-dimmed p-4 bg-neutral-50 dark:bg-neutral-900/40 rounded-xl border border-default mt-8"
+  }
+})
+
+const styles = computed(() => pageRendererStyles())
+
+const page = defineModel<Page>({ required: true })
+const { t, locale } = useI18n()
+
+const currentDefinition = computed(() => {
+  if (!page.value?.type || !pageDefinitions) return null
+  const typeKey = Object.keys(pageDefinitions).find(
+    (k) => k.toLowerCase() === page.value.type.toLowerCase()
+  )
+  return typeKey ? pageDefinitions[typeKey] : null
+})
+
+const previousPage = computed(() => surround?.previous)
+const nextPage = computed(() => surround?.next)
+const hasSurround = computed(() => !!(surround?.previous || surround?.next))
+
+watch(
+  [() => page.value?.id, () => page.value?.type, currentDefinition],
+  () => {
+    if (page.value && currentDefinition.value) {
+      syncPageWithDefinition(page.value, currentDefinition.value)
+    }
+  },
+  { immediate: true }
+)
+
+defineOptions({ name: "PageRenderer" })
+</script>
+
+<template>
+  <div :class="styles.container">
+    <div :class="styles.grid">
+      <PagePropertiesRenderer
+        v-model="page"
+        :can-edit="canEdit"
+        :edit-url="editUrl"
+        :class="styles.properties"
+      />
+
+      <div :class="styles.contentWrapper">
+        <img
+          v-if="page.banner?.src"
+          :src="page.banner?.src"
+          :alt="page.banner?.alt || 'Banner'"
+          :class="styles.banner"
+        />
+
+        <div class="border-b border-default pb-4">
+          <span class="text-xs uppercase tracking-wider text-primary font-bold">
+            {{ page.type }}
+          </span>
+          <h1 :class="styles.title">
+            {{ getLocalizedContent(page.title, locale) }}
+          </h1>
+          <p v-if="page.description" class="text-neutral-500 dark:text-neutral-400 mt-2 text-lg">
+            {{ getLocalizedContent(page.description, locale) }}
+          </p>
+        </div>
+
+        <BlockViewRenderer :blocks="page.blocks || []" />
+
+        <template v-if="useSurround">
+          <div v-if="surroundStatus === 'pending'" :class="styles.surroundSkeleton">
+            <div :class="styles.skeleton" />
+            <div :class="styles.skeleton" />
+          </div>
+
+          <PageSurroundComponent
+            v-else-if="surroundStatus === 'success' && hasSurround"
+            :pageType="page.type"
+            :previousTitle="getLocalizedContent(previousPage?.title, locale)"
+            :previousDescription="getLocalizedContent(previousPage?.description, locale)"
+            :previousTo="previousPage?.slug ? `/${previousPage.slug}` : undefined"
+            :nextTitle="getLocalizedContent(nextPage?.title, locale)"
+            :nextDescription="getLocalizedContent(nextPage?.description, locale)"
+            :nextTo="nextPage?.slug ? `/${nextPage.slug}` : undefined"
+          />
+
+          <div :class="styles.metadata">
+            <h6 class="font-bold text-neutral-800 dark:text-neutral-200">Metadata</h6>
+            <span>ID: {{ page.id }}</span>
+            <span v-if="page.createdAt">
+              Created: {{ new Date(page.createdAt).toLocaleString() }}
+            </span>
+            <span v-if="page.updatedAt">
+              Updated: {{ new Date(page.updatedAt).toLocaleString() }}
+            </span>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/editor/PageSurround.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv, cx } from "css-variants"
+import { useI18n } from "./utils/editorHelpers"
+import RLVButton from "../button/RLVButton.vue"
+
+export interface PageSurroundProps {
+  pageType: string
+  previousTitle?: string
+  previousDescription?: string
+  previousTo?: string
+  nextTitle?: string
+  nextDescription?: string
+  nextTo?: string
+}
+
+const {
+  pageType,
+  previousTitle,
+  previousDescription,
+  previousTo,
+  nextTitle,
+  nextDescription,
+  nextTo
+} = defineProps<PageSurroundProps>()
+
+const pageSurroundStyles = scv({
+  slots: [
+    "grid",
+    "cardClass",
+    "cardContent",
+    "cardContentEnd",
+    "headingGroup",
+    "headingGroupEnd",
+    "buttonClass",
+    "typeLabel",
+    "infoGroup",
+    "infoGroupEnd",
+    "title",
+    "titleEnd",
+    "description",
+    "descriptionEnd"
+  ],
+  base: {
+    grid: "grid grid-cols-1 gap-8 sm:grid-cols-2",
+    cardClass:
+      "group block h-full bg-transparent hover:bg-elevated/50 focus-visible:outline-primary border border-default rounded-xl p-6 transition-all shadow-sm",
+    cardContent: "flex flex-col gap-md",
+    cardContentEnd: "items-end",
+    headingGroup: "flex flex-col gap-xs",
+    headingGroupEnd: "items-end",
+    buttonClass: "w-fit text-md rounded-full text-primary group-hover:text-highlighted",
+    typeLabel: "text-muted text-xs uppercase font-semibold",
+    infoGroup: "flex flex-col gap-sm",
+    infoGroupEnd: "items-end gap-xs",
+    title: "text-primary text-sm font-semibold group-hover:text-highlighted transition-colors",
+    titleEnd: "text-right",
+    description: "text-toned text-xs line-clamp-2",
+    descriptionEnd: "text-right"
+  }
+})
+
+const styles = computed(() => pageSurroundStyles())
+
+const { t } = useI18n()
+
+defineOptions({ name: "PageSurround" })
+</script>
+
+<template>
+  <div :class="styles.grid">
+    <div>
+      <a v-if="previousTitle" :href="previousTo" class="h-full block">
+        <div :class="styles.cardClass">
+          <div :class="styles.cardContent">
+            <div :class="styles.headingGroup">
+              <RLVButton
+                variant="outline"
+                leading-leading-icon="i-lucide-arrow-left"
+                class="rounded-full !p-2"
+                :class="styles.buttonClass"
+              />
+              <span :class="styles.typeLabel">
+                {{ t("navigation_previous", "Previous") }}
+                {{ t(pageType, pageType) }}
+              </span>
+            </div>
+            <div :class="styles.infoGroup">
+              <p :class="styles.title">
+                {{ previousTitle }}
+              </p>
+              <p :class="styles.description">
+                {{ previousDescription }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </a>
+    </div>
+
+    <div>
+      <a v-if="nextTitle" :href="nextTo" class="h-full block">
+        <div :class="styles.cardClass">
+          <div :class="[styles.cardContent, styles.cardContentEnd]">
+            <div :class="[styles.headingGroup, styles.headingGroupEnd]">
+              <RLVButton
+                variant="outline"
+                leading-leading-icon="i-lucide-arrow-right"
+                class="rounded-full !p-2"
+                :class="styles.buttonClass"
+              />
+              <span :class="styles.typeLabel">
+                {{ t("navigation_next", "Next") }}
+                {{ t(pageType, pageType) }}
+              </span>
+            </div>
+            <div :class="[styles.infoGroup, styles.infoGroupEnd]">
+              <p :class="[styles.title, styles.titleEnd]">
+                {{ nextTitle }}
+              </p>
+              <p :class="[styles.description, styles.descriptionEnd]">
+                {{ nextDescription }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>

package/src/components/editor/PageVersionSelector.vue

@@ -0,0 +1,371 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from "vue"
+import { useToast, useI18n } from "./utils/editorHelpers"
+import { scv, cx } from "css-variants"
+import type { PageVersion } from "./types/pages"
+import RLVButton from "../button/RLVButton.vue"
+
+export interface PageVersionSelectorProps {
+  pageId: string
+  isAdmin?: boolean
+}
+
+const { pageId, isAdmin = false } = defineProps<PageVersionSelectorProps>()
+
+export interface PageVersionSelectorEmits {
+  "version-selected": [version: PageVersion]
+  "version-approved": [version: PageVersion]
+  "version-rejected": [version: PageVersion]
+  "version-reverted": [version: PageVersion]
+}
+const emit = defineEmits<PageVersionSelectorEmits>()
+
+const pageVersionSelectorStyles = scv({
+  slots: [
+    "root",
+    "buttonClass",
+    "popoverClass",
+    "versionItemClass",
+    "popoverHeader",
+    "popoverTitle",
+    "popoverSubtitle",
+    "versionsList",
+    "liveVersionItem",
+    "liveBadgeWrapper",
+    "liveVersionTitle",
+    "liveVersionSubtitle",
+    "loadingWrapper",
+    "emptyWrapper",
+    "versionEntries",
+    "versionEntryWrapper",
+    "versionEntryContent",
+    "versionEntryHeader",
+    "versionEntryTime",
+    "versionEntryTitle",
+    "versionEntryApproval",
+    "versionEntryActions",
+    "pendingFooter",
+    "pendingText"
+  ],
+  base: {
+    root: "relative inline-block text-left",
+    buttonClass: "",
+    popoverClass:
+      "absolute right-0 mt-2 w-80 bg-popover text-popover-foreground border border-default rounded-xl shadow-lg z-50 overflow-hidden p-2 bg-white dark:bg-neutral-900",
+    versionItemClass:
+      "px-3 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 cursor-pointer rounded transition-colors",
+    popoverHeader: "px-3 py-2 border-b border-default mb-1",
+    popoverTitle: "text-sm font-semibold",
+    popoverSubtitle: "text-xs text-dimmed mt-1",
+    versionsList: "max-h-96 overflow-y-auto flex flex-col gap-1",
+    liveVersionItem: "flex items-center justify-between",
+    liveBadgeWrapper: "flex items-center gap-2",
+    liveVersionTitle: "text-sm font-medium",
+    liveVersionSubtitle: "text-xs text-dimmed mt-1",
+    loadingWrapper: "px-3 py-4 text-center text-xs text-dimmed",
+    emptyWrapper: "px-3 py-4 text-center text-sm text-dimmed",
+    versionEntries: "divide-y divide-default flex flex-col gap-1",
+    versionEntryWrapper: "flex items-start justify-between gap-2",
+    versionEntryContent: "flex-1 min-w-0",
+    versionEntryHeader: "flex items-center gap-2 mb-1",
+    versionEntryTime: "text-xs text-dimmed",
+    versionEntryTitle: "text-xs text-default truncate font-medium",
+    versionEntryApproval: "text-xs text-dimmed mt-1",
+    versionEntryActions: "shrink-0 flex items-center gap-1",
+    pendingFooter: "px-3 py-2 border-t border-default mt-2",
+    pendingText: "text-xs text-dimmed"
+  }
+})
+
+const styles = computed(() => pageVersionSelectorStyles())
+
+const selectedVersionId = defineModel<string | null>("currentVersionId", { default: null })
+const versions = ref<PageVersion[]>([])
+const isLoading = ref(false)
+const isApproving = ref<string | null>(null)
+const isRejecting = ref<string | null>(null)
+const isReverting = ref<string | null>(null)
+const isOpen = ref(false)
+const toast = useToast()
+const { t } = useI18n()
+
+const pendingVersions = computed(() => {
+  return versions.value.filter((v) => v.status === "pending")
+})
+
+const currentVersionStatus = computed(() => {
+  if (!selectedVersionId.value) return "approved"
+  const v = versions.value.find((version) => version.id === selectedVersionId.value)
+  return v?.status || "pending"
+})
+
+const currentVersion = computed(() => versions.value.find((v) => v.id === selectedVersionId.value))
+
+watch(
+  () => pageId,
+  () => {
+    if (pageId) fetchVersions()
+  },
+  { immediate: true }
+)
+
+async function fetchVersions() {
+  if (!pageId) return
+  isLoading.value = true
+  try {
+    const res = await fetch(`/api/pages/id/${pageId}/versions`)
+    if (!res.ok) throw new Error("Failed to load versions")
+    versions.value = await res.json()
+  } catch (error) {
+    console.error("Failed to fetch versions:", error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function selectVersion(version: PageVersion) {
+  selectedVersionId.value = version.id
+  emit("version-selected", version)
+  isOpen.value = false
+}
+
+async function approveVersion(version: PageVersion) {
+  if (!isAdmin) return
+  isApproving.value = version.id
+  try {
+    const res = await fetch(`/api/pages/versions/${version.id}/approve`, { method: "POST" })
+    if (!res.ok) throw new Error("Failed to approve")
+    const result = await res.json()
+    toast.add({
+      color: "success",
+      title: t("page_version.approved_successfully", "Approved successfully"),
+      description: result?.message || "The page has been updated with the approved version"
+    })
+    emit("version-approved", version)
+    await fetchVersions()
+    if (selectedVersionId.value === version.id) {
+      selectedVersionId.value = null
+    }
+  } catch (error: any) {
+    toast.add({
+      color: "error",
+      title: t("page_version.failed_to_approve", "Failed to approve version"),
+      description: error.message || "An error occurred"
+    })
+  } finally {
+    isApproving.value = null
+  }
+}
+
+async function rejectVersion(version: PageVersion) {
+  if (!isAdmin) return
+  isRejecting.value = version.id
+  try {
+    const res = await fetch(`/api/pages/versions/${version.id}/reject`, { method: "POST" })
+    if (!res.ok) throw new Error("Failed to reject")
+    const result = await res.json()
+    toast.add({
+      color: "success",
+      title: t("page_version.rejected_successfully", "Version rejected"),
+      description: result?.message || "The version has been rejected"
+    })
+    emit("version-rejected", version)
+    await fetchVersions()
+  } catch (error: any) {
+    toast.add({
+      color: "error",
+      title: t("page_version.failed_to_reject", "Failed to reject version"),
+      description: error.message || "An error occurred"
+    })
+  } finally {
+    isRejecting.value = null
+  }
+}
+
+async function revertVersion(version: PageVersion) {
+  if (!isAdmin) return
+  isReverting.value = version.id
+  try {
+    const res = await fetch(`/api/pages/versions/${version.id}/revert`, { method: "POST" })
+    if (!res.ok) throw new Error("Failed to revert")
+    const result = await res.json()
+    toast.add({
+      color: "success",
+      title: t("page_version.reverted_successfully", "Reverted successfully"),
+      description: result?.message || "The page has been reverted to this version."
+    })
+    emit("version-reverted", version)
+    await fetchVersions()
+    selectedVersionId.value = null
+  } catch (error: any) {
+    toast.add({
+      color: "error",
+      title: t("page_version.failed_to_revert", "Failed to revert version"),
+      description: error.message || "An error occurred"
+    })
+  } finally {
+    isReverting.value = null
+  }
+}
+
+function selectLiveVersion() {
+  selectedVersionId.value = null
+  isOpen.value = false
+}
+
+function formatDate(date: Date | string | null | undefined) {
+  if (!date) return ""
+  const d = typeof date === "string" ? new Date(date) : date
+  const now = new Date()
+  const diffMs = now.getTime() - d.getTime()
+  const diffSec = Math.floor(diffMs / 1000)
+  const diffMin = Math.floor(diffSec / 60)
+  const diffHour = Math.floor(diffMin / 60)
+  const diffDay = Math.floor(diffHour / 24)
+  if (diffSec < 60) return "just now"
+  if (diffMin < 60) return `${diffMin}m ago`
+  if (diffHour < 24) return `${diffHour}h ago`
+  return `${diffDay}d ago`
+}
+
+function getStatusColor(status: string) {
+  switch (status) {
+    case "approved":
+      return "text-green-600 bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800"
+    case "pending":
+      return "text-yellow-600 bg-yellow-50 dark:bg-yellow-950/30 border border-yellow-200 dark:border-yellow-800"
+    case "rejected":
+      return "text-red-600 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800"
+    default:
+      return "text-neutral-600 bg-neutral-50 dark:bg-neutral-950/30 border border-neutral-200 dark:border-neutral-800"
+  }
+}
+
+defineExpose({
+  approveVersion,
+  rejectVersion,
+  revertVersion,
+  fetchVersions,
+  currentVersionStatus,
+  currentVersion
+})
+
+defineOptions({ name: "PageVersionSelector" })
+</script>
+
+<template>
+  <div :class="styles.root">
+    <RLVButton
+      :loading="isLoading"
+      color="neutral"
+      leading-leading-icon="i-lucide-git-branch"
+      :label="t('common.versions', 'Versions')"
+      size="xs"
+      variant="ghost"
+      :class="styles.buttonClass"
+      @click="isOpen = !isOpen"
+    />
+    <div v-if="isOpen" :class="styles.popoverClass">
+      <div :class="styles.popoverHeader">
+        <h3 :class="styles.popoverTitle">Page Versions</h3>
+        <p :class="styles.popoverSubtitle">View and manage page versions</p>
+      </div>
+      <div :class="styles.versionsList">
+        <div
+          :class="[
+            styles.versionItemClass,
+            {
+              'bg-primary-50 dark:bg-primary-900/20 border-l-2 border-primary-500':
+                !selectedVersionId
+            }
+          ]"
+          @click="selectLiveVersion"
+        >
+          <div :class="styles.liveVersionItem">
+            <div class="flex-1">
+              <div :class="styles.liveBadgeWrapper">
+                <span
+                  class="px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider text-green-600 bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800"
+                >
+                  Live
+                </span>
+                <span :class="styles.liveVersionTitle">Current Version</span>
+              </div>
+              <p :class="styles.liveVersionSubtitle">The published version of this page</p>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="isLoading" :class="styles.loadingWrapper">
+          <div class="animate-pulse flex flex-col gap-2">
+            <div class="h-4 w-full rounded bg-neutral-200 dark:bg-neutral-800"></div>
+            <div class="h-3 w-3/4 rounded bg-neutral-200 dark:bg-neutral-800"></div>
+          </div>
+        </div>
+
+        <div v-else-if="versions.length === 0" :class="styles.emptyWrapper">No versions yet</div>
+
+        <div v-else :class="styles.versionEntries">
+          <div
+            v-for="version in versions"
+            :key="version.id"
+            :class="[
+              styles.versionItemClass,
+              {
+                'bg-primary-50 dark:bg-primary-900/20 border-l-2 border-primary-500':
+                  selectedVersionId === version.id
+              }
+            ]"
+            @click="selectVersion(version)"
+          >
+            <div :class="styles.versionEntryWrapper">
+              <div :class="styles.versionEntryContent">
+                <div :class="styles.versionEntryHeader">
+                  <span
+                    class="px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider"
+                    :class="getStatusColor(version.status)"
+                  >
+                    {{ version.status }}
+                  </span>
+                  <span :class="styles.versionEntryTime">
+                    {{ formatDate(version.createdAt) }}
+                  </span>
+                </div>
+                <p :class="styles.versionEntryTitle">
+                  {{ (version.title as any)?.en || version.title || "Untitled" }}
+                </p>
+                <p
+                  v-if="version.approvedBy && version.approvedAt"
+                  :class="styles.versionEntryApproval"
+                >
+                  Approved {{ formatDate(version.approvedAt) }}
+                </p>
+              </div>
+              <div
+                v-if="selectedVersionId === version.id && isAdmin"
+                :class="styles.versionEntryActions"
+              >
+                <RLVButton
+                  :loading="isReverting === version.id"
+                  color="warning"
+                  leading-leading-icon="i-lucide-rotate-ccw"
+                  size="xs"
+                  title="Revert to this version"
+                  variant="ghost"
+                  @click.stop="revertVersion(version)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="pendingVersions.length > 0 && isAdmin" :class="styles.pendingFooter">
+        <p :class="styles.pendingText">
+          {{ pendingVersions.length }} pending version{{ pendingVersions.length !== 1 ? "s" : "" }}
+          awaiting approval
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/editor/RLAEditor.astro

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