@rimelight/ui 0.0.42 → 0.0.44

package/src/components/editor/PageRenderer.vue

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

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

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