@orion-studios/payload-admin-components 0.2.0-beta.11 → 0.2.0-beta.12

package/src/components/studio/AdminStudioNav.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+
+import { Logout, useAuth } from '@payloadcms/ui'
+
+type LinkItem = {
+  href: string
+  label: string
+  matchPrefixes: string[]
+  adminOnly?: boolean
+}
+
+const isAdmin = (user: unknown): boolean => {
+  if (!user || typeof user !== 'object') return false
+  const role = (user as any).role
+  return typeof role === 'string' && role === 'admin'
+}
+
+const getPropString = (props: unknown, key: string, fallback: string): string => {
+  if (!props || typeof props !== 'object') return fallback
+
+  const direct = (props as any)[key]
+  if (typeof direct === 'string' && direct.length > 0) return direct
+
+  const clientProps = (props as any).clientProps
+  if (clientProps && typeof clientProps === 'object') {
+    const nested = (clientProps as any)[key]
+    if (typeof nested === 'string' && nested.length > 0) return nested
+  }
+
+  return fallback
+}
+
+export function AdminStudioNav(props: Record<string, unknown>) {
+  const { user } = useAuth()
+  const brandName = getPropString(props, 'brandName', 'Orion Studio')
+
+  const [pathname, setPathname] = useState<string>('')
+
+  useEffect(() => {
+    const update = () => setPathname(window.location.pathname)
+    update()
+
+    window.addEventListener('popstate', update)
+    return () => window.removeEventListener('popstate', update)
+  }, [])
+
+  const links: LinkItem[] = useMemo(
+    () => [
+      { href: '/admin', label: 'Dashboard', matchPrefixes: ['/admin'] },
+      {
+        href: '/admin/pages',
+        label: 'Pages',
+        matchPrefixes: ['/admin/pages', '/admin/collections/pages'],
+      },
+      { href: '/admin/globals', label: 'Globals', matchPrefixes: ['/admin/globals'] },
+      {
+        href: '/admin/media',
+        label: 'Media',
+        matchPrefixes: ['/admin/media', '/admin/collections/media'],
+      },
+      {
+        href: '/admin/tools',
+        label: 'Admin Tools',
+        matchPrefixes: ['/admin/tools'],
+        adminOnly: true,
+      },
+    ],
+    [],
+  )
+
+  const linkStyle = (active: boolean): React.CSSProperties => ({
+    background: active ? 'var(--theme-elevation-100)' : 'transparent',
+    borderRadius: 10,
+    color: 'var(--theme-elevation-900)',
+    display: 'block',
+    fontSize: '0.95rem',
+    fontWeight: active ? 800 : 650,
+    padding: '0.6rem 0.75rem',
+    textDecoration: 'none',
+  })
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.85rem',
+        height: '100%',
+        padding: '1rem 0.85rem',
+      }}
+    >
+      <div style={{ padding: '0 0.35rem' }}>
+        <div style={{ fontSize: '1.05rem', fontWeight: 900, letterSpacing: '-0.01em' }}>
+          {brandName}
+        </div>
+        <div style={{ color: 'var(--theme-elevation-600)', fontSize: '0.85rem' }}>Studio</div>
+      </div>
+
+      <nav style={{ display: 'grid', gap: '0.25rem' }}>
+        {links
+          .filter((link) => !link.adminOnly || isAdmin(user))
+          .map((link) => {
+            const active =
+              link.href === '/admin'
+                ? pathname === '/admin'
+                : link.matchPrefixes.some((prefix) => pathname.startsWith(prefix))
+
+            return (
+              <a href={link.href} key={link.href} style={linkStyle(active)}>
+                {link.label}
+              </a>
+            )
+          })}
+      </nav>
+
+      <div style={{ flex: 1 }} />
+
+      <div
+        style={{
+          borderTop: '1px solid var(--theme-elevation-150)',
+          paddingTop: '0.85rem',
+        }}
+      >
+        <div style={{ color: 'var(--theme-elevation-700)', fontSize: '0.85rem' }}>Signed in as</div>
+        <div style={{ fontWeight: 800, marginBottom: '0.55rem' }}>
+          {typeof (user as any)?.email === 'string' ? (user as any).email : 'User'}
+        </div>
+        <Logout />
+      </div>
+    </div>
+  )
+}

package/src/components/studio/AdminStudioPageEditView.tsx

@@ -0,0 +1,172 @@
+'use client'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import { toast, useAuth } from '@payloadcms/ui'
+
+type AnyRecord = Record<string, unknown>
+
+const isAdmin = (user: unknown): boolean => {
+  if (!user || typeof user !== 'object') return false
+  const role = (user as any).role
+  return typeof role === 'string' && role === 'admin'
+}
+
+const isEditor = (user: unknown): boolean => {
+  if (!user || typeof user !== 'object') return false
+  const role = (user as any).role
+  return typeof role === 'string' && role === 'editor'
+}
+
+const getPropString = (props: unknown, key: string, fallback: string): string => {
+  if (!props || typeof props !== 'object') return fallback
+
+  const direct = (props as any)[key]
+  if (typeof direct === 'string' && direct.length > 0) return direct
+
+  const clientProps = (props as any).clientProps
+  if (clientProps && typeof clientProps === 'object') {
+    const nested = (clientProps as any)[key]
+    if (typeof nested === 'string' && nested.length > 0) return nested
+  }
+
+  return fallback
+}
+
+const getParam = (params: unknown, key: string): string | null => {
+  if (!params || typeof params !== 'object') return null
+  if (!(key in (params as Record<string, unknown>))) return null
+  const value = (params as Record<string, unknown>)[key]
+  if (typeof value === 'string') return value
+  if (Array.isArray(value) && typeof value[0] === 'string') return value[0]
+  return null
+}
+
+export function AdminStudioPageEditView(props: AnyRecord) {
+  const { user } = useAuth()
+  const iframeRef = useRef<HTMLIFrameElement | null>(null)
+  const [saving, setSaving] = useState<null | 'draft' | 'published'>(null)
+
+  const builderBasePath = getPropString(props, 'builderBasePath', '/builder')
+  const pageID = useMemo(() => getParam(props.params, 'id'), [props.params])
+
+  const canPublish = isAdmin(user) || isEditor(user)
+
+  const requestSave = (status: 'draft' | 'published') => {
+    const iframe = iframeRef.current
+    if (!iframe?.contentWindow) {
+      toast.error('Editor is not ready yet. Please try again.')
+      return
+    }
+
+    setSaving(status)
+    iframe.contentWindow.postMessage({ source: 'payload-visual-builder-parent', type: 'save', status }, '*')
+  }
+
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      const data = event.data as
+        | { source?: string; type?: string; ok?: boolean; message?: string }
+        | undefined
+
+      if (!data || data.source !== 'payload-visual-builder-child' || data.type !== 'save-result') {
+        return
+      }
+
+      setSaving(null)
+
+      if (data.ok) {
+        toast.success(typeof data.message === 'string' ? data.message : 'Saved.')
+      } else {
+        toast.error(typeof data.message === 'string' ? data.message : 'Save failed.')
+      }
+    }
+
+    window.addEventListener('message', onMessage)
+    return () => window.removeEventListener('message', onMessage)
+  }, [])
+
+  if (!pageID) {
+    return (
+      <div style={{ padding: '1.2rem' }}>
+        <h1 style={{ margin: 0 }}>Page Editor</h1>
+        <p style={{ color: 'var(--theme-elevation-600)' }}>Missing page ID.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ display: 'grid', gridTemplateRows: 'auto 1fr', height: 'calc(100vh - 0px)' }}>
+      <div
+        style={{
+          alignItems: 'center',
+          background: 'var(--theme-elevation-0)',
+          borderBottom: '1px solid var(--theme-elevation-150)',
+          display: 'flex',
+          gap: '0.6rem',
+          justifyContent: 'space-between',
+          padding: '0.65rem 0.9rem',
+          position: 'sticky',
+          top: 0,
+          zIndex: 20,
+        }}
+      >
+        <div style={{ minWidth: 0 }}>
+          <div style={{ fontWeight: 900 }}>Page Editor</div>
+          <div
+            style={{
+              color: 'var(--theme-elevation-600)',
+              fontSize: '0.85rem',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            Editing: {pageID}
+          </div>
+        </div>
+
+        <div style={{ alignItems: 'center', display: 'flex', gap: '0.5rem' }}>
+          <button
+            disabled={saving !== null}
+            onClick={() => requestSave('draft')}
+            style={{
+              border: '1px solid var(--theme-elevation-300)',
+              borderRadius: 12,
+              cursor: saving ? 'not-allowed' : 'pointer',
+              fontWeight: 800,
+              padding: '0.5rem 0.75rem',
+            }}
+            type="button"
+          >
+            {saving === 'draft' ? 'Saving…' : 'Save Draft'}
+          </button>
+
+          <button
+            disabled={!canPublish || saving !== null}
+            onClick={() => requestSave('published')}
+            style={{
+              background: canPublish ? 'var(--theme-elevation-900)' : 'var(--theme-elevation-300)',
+              border: 'none',
+              borderRadius: 12,
+              color: canPublish ? 'var(--theme-elevation-0)' : 'var(--theme-elevation-700)',
+              cursor: !canPublish || saving ? 'not-allowed' : 'pointer',
+              fontWeight: 900,
+              padding: '0.5rem 0.75rem',
+            }}
+            type="button"
+            title={!canPublish ? 'You do not have publish permissions.' : undefined}
+          >
+            {saving === 'published' ? 'Publishing…' : 'Publish'}
+          </button>
+        </div>
+      </div>
+
+      <iframe
+        ref={iframeRef}
+        src={`${builderBasePath.replace(/\/$/, '')}/${pageID}`}
+        style={{ border: 'none', height: '100%', width: '100%' }}
+        title="Page Builder"
+      />
+    </div>
+  )
+}

package/src/components/studio/AdminStudioPagesListView.tsx

@@ -0,0 +1,208 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+
+import { useAuth } from '@payloadcms/ui'
+
+type AnyRecord = Record<string, unknown>
+
+type PageDoc = {
+  id?: number | string
+  title?: unknown
+  path?: unknown
+  _status?: unknown
+}
+
+const isAdmin = (user: unknown): boolean => {
+  if (!user || typeof user !== 'object') return false
+  const role = (user as any).role
+  return typeof role === 'string' && role === 'admin'
+}
+
+const getPropString = (props: unknown, key: string, fallback: string): string => {
+  if (!props || typeof props !== 'object') return fallback
+
+  const direct = (props as any)[key]
+  if (typeof direct === 'string' && direct.length > 0) return direct
+
+  const clientProps = (props as any).clientProps
+  if (clientProps && typeof clientProps === 'object') {
+    const nested = (clientProps as any)[key]
+    if (typeof nested === 'string' && nested.length > 0) return nested
+  }
+
+  return fallback
+}
+
+export function AdminStudioPagesListView(props: AnyRecord) {
+  const { user } = useAuth()
+  const pagesCollectionSlug = getPropString(props, 'pagesCollectionSlug', 'pages')
+
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [docs, setDocs] = useState<PageDoc[]>([])
+
+  const apiURL = useMemo(() => {
+    const params = new URLSearchParams({
+      depth: '0',
+      limit: '100',
+      sort: '-updatedAt',
+      draft: 'true',
+    })
+
+    return `/api/${pagesCollectionSlug}?${params.toString()}`
+  }, [pagesCollectionSlug])
+
+  useEffect(() => {
+    let cancelled = false
+
+    const run = async () => {
+      setLoading(true)
+      setError(null)
+
+      try {
+        const res = await fetch(apiURL, { credentials: 'include' })
+        if (!res.ok) {
+          const body = await res.text()
+          throw new Error(body || 'Failed to fetch pages')
+        }
+
+        const data = (await res.json()) as { docs?: PageDoc[] }
+        const nextDocs = Array.isArray(data.docs) ? data.docs : []
+        if (!cancelled) setDocs(nextDocs)
+      } catch (err) {
+        if (!cancelled) setError(err instanceof Error ? err.message : 'Failed to fetch pages')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+
+    void run()
+
+    return () => {
+      cancelled = true
+    }
+  }, [apiURL])
+
+  return (
+    <div style={{ padding: '1.2rem 1.2rem 2.5rem' }}>
+      <div style={{ alignItems: 'flex-end', display: 'flex', gap: '0.75rem' }}>
+        <div style={{ flex: 1 }}>
+          <h1 style={{ margin: 0 }}>Pages</h1>
+          <p style={{ color: 'var(--theme-elevation-600)', marginTop: '0.35rem' }}>
+            Open a page to edit it in the custom editor.
+          </p>
+        </div>
+
+        {isAdmin(user) ? (
+          <a
+            href={`/admin/collections/${pagesCollectionSlug}/create`}
+            style={{
+              background: 'var(--theme-elevation-900)',
+              borderRadius: 12,
+              color: 'var(--theme-elevation-0)',
+              fontWeight: 800,
+              padding: '0.55rem 0.85rem',
+              textDecoration: 'none',
+            }}
+          >
+            New Page
+          </a>
+        ) : null}
+      </div>
+
+      {loading ? (
+        <div style={{ color: 'var(--theme-elevation-600)', marginTop: '1rem' }}>Loading…</div>
+      ) : null}
+
+      {error ? (
+        <div style={{ color: 'crimson', marginTop: '1rem' }}>{error}</div>
+      ) : null}
+
+      <div style={{ display: 'grid', gap: '0.6rem', marginTop: '1rem' }}>
+        {!loading && !error && docs.length === 0 ? (
+          <div
+            style={{
+              border: '1px dashed var(--theme-elevation-300)',
+              borderRadius: 16,
+              color: 'var(--theme-elevation-700)',
+              padding: '1rem',
+            }}
+          >
+            No pages found.
+          </div>
+        ) : null}
+
+        {docs.map((doc) => {
+          const id = typeof doc.id === 'string' || typeof doc.id === 'number' ? String(doc.id) : ''
+          const title = typeof doc.title === 'string' ? doc.title : 'Untitled Page'
+          const path = typeof doc.path === 'string' ? doc.path : '/'
+          const status = typeof doc._status === 'string' ? doc._status : ''
+
+          if (!id) return null
+
+          return (
+            <a
+              href={`/admin/pages/${id}`}
+              key={id}
+              style={{
+                background: 'var(--theme-elevation-0)',
+                border: '1px solid var(--theme-elevation-150)',
+                borderRadius: 16,
+                color: 'inherit',
+                display: 'flex',
+                gap: '0.85rem',
+                justifyContent: 'space-between',
+                padding: '0.85rem 1rem',
+                textDecoration: 'none',
+              }}
+            >
+              <div style={{ minWidth: 0 }}>
+                <div style={{ fontWeight: 900, overflow: 'hidden', textOverflow: 'ellipsis' }}>{title}</div>
+                <div
+                  style={{
+                    color: 'var(--theme-elevation-600)',
+                    fontSize: '0.9rem',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  {path}
+                </div>
+              </div>
+              <div
+                style={{
+                  alignItems: 'center',
+                  display: 'flex',
+                  flexShrink: 0,
+                  gap: '0.5rem',
+                }}
+              >
+                {status ? (
+                  <span
+                    style={{
+                      background:
+                        status === 'published'
+                          ? 'rgba(16, 185, 129, 0.12)'
+                          : 'rgba(245, 158, 11, 0.14)',
+                      borderRadius: 999,
+                      color:
+                        status === 'published' ? 'rgb(5, 122, 85)' : 'rgb(180, 83, 9)',
+                      fontSize: '0.82rem',
+                      fontWeight: 900,
+                      padding: '0.25rem 0.55rem',
+                      textTransform: 'capitalize',
+                    }}
+                  >
+                    {status}
+                  </span>
+                ) : null}
+                <span style={{ color: 'var(--theme-elevation-600)', fontWeight: 800 }}>Open</span>
+              </div>
+            </a>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/studio/AdminStudioToolsView.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { useAuth } from '@payloadcms/ui'
+
+type AnyRecord = Record<string, unknown>
+
+const isAdmin = (user: unknown): boolean => {
+  if (!user || typeof user !== 'object') return false
+  const role = (user as any).role
+  return typeof role === 'string' && role === 'admin'
+}
+
+const getPropString = (props: unknown, key: string, fallback: string): string => {
+  if (!props || typeof props !== 'object') return fallback
+
+  const direct = (props as any)[key]
+  if (typeof direct === 'string' && direct.length > 0) return direct
+
+  const clientProps = (props as any).clientProps
+  if (clientProps && typeof clientProps === 'object') {
+    const nested = (clientProps as any)[key]
+    if (typeof nested === 'string' && nested.length > 0) return nested
+  }
+
+  return fallback
+}
+
+export function AdminStudioToolsView(props: AnyRecord) {
+  const { user } = useAuth()
+
+  if (!isAdmin(user)) {
+    return (
+      <div style={{ padding: '1.2rem' }}>
+        <h1 style={{ margin: 0 }}>Admin Tools</h1>
+        <p style={{ color: 'var(--theme-elevation-600)' }}>You do not have access to this page.</p>
+      </div>
+    )
+  }
+
+  const pagesCollectionSlug = getPropString(props, 'pagesCollectionSlug', 'pages')
+  const mediaCollectionSlug = getPropString(props, 'mediaCollectionSlug', 'media')
+
+  const links = [
+    { href: `/admin/collections/${pagesCollectionSlug}`, label: 'Raw Pages Collection' },
+    { href: `/admin/collections/${mediaCollectionSlug}`, label: 'Raw Media Collection' },
+    { href: '/admin/globals/site-settings', label: 'Raw Site Settings Global' },
+    { href: '/admin/globals/header', label: 'Raw Header Global' },
+    { href: '/admin/globals/footer', label: 'Raw Footer Global' },
+    { href: '/admin/collections/users', label: 'Users / Roles' },
+  ]
+
+  return (
+    <div style={{ padding: '1.2rem 1.2rem 2.5rem' }}>
+      <h1 style={{ margin: 0 }}>Admin Tools</h1>
+      <p style={{ color: 'var(--theme-elevation-600)', marginTop: '0.35rem' }}>
+        Hidden fallback links for administrators.
+      </p>
+
+      <div style={{ display: 'grid', gap: '0.6rem', marginTop: '1rem' }}>
+        {links.map((link) => (
+          <a
+            href={link.href}
+            key={link.href}
+            style={{
+              background: 'var(--theme-elevation-0)',
+              border: '1px solid var(--theme-elevation-150)',
+              borderRadius: 16,
+              color: 'inherit',
+              padding: '0.85rem 1rem',
+              textDecoration: 'none',
+            }}
+          >
+            <div style={{ fontWeight: 900 }}>{link.label}</div>
+            <div style={{ color: 'var(--theme-elevation-600)', fontSize: '0.9rem' }}>{link.href}</div>
+          </a>
+        ))}
+      </div>
+    </div>
+  )
+}