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

package/dist/client.d.mts

@@ -97,4 +97,14 @@ declare function AdminStudioMediaView(props: AnyRecord$1): react_jsx_runtime.JSX
 type AnyRecord = Record<string, unknown>;
 declare function AdminStudioToolsView(props: AnyRecord): react_jsx_runtime.JSX.Element;
 
-export { AdminStudioDashboard, AdminStudioGlobalsView, AdminStudioMediaView, AdminStudioNav, AdminStudioPageEditView, AdminStudioPagesListView, AdminStudioToolsView, BlockPicker, Dashboard, EmptyState, HelpTooltip, Icon, Logo, OrionBlocksField, SectionTabs, StatusBadge, type ThemeOption, ThemeProvider, ThemeSwitcher, WelcomeHeader, useTheme };
+type Props$1 = {
+    pagesPathBase?: string;
+};
+declare function OpenInStudioMenuItem({ pagesPathBase }: Props$1): react_jsx_runtime.JSX.Element | null;
+
+type Props = {
+    pagesPathBase?: string;
+};
+declare function PageEditRedirectToStudio({ pagesPathBase }: Props): react_jsx_runtime.JSX.Element;
+
+export { AdminStudioDashboard, AdminStudioGlobalsView, AdminStudioMediaView, AdminStudioNav, AdminStudioPageEditView, AdminStudioPagesListView, AdminStudioToolsView, BlockPicker, Dashboard, EmptyState, HelpTooltip, Icon, Logo, OpenInStudioMenuItem, OrionBlocksField, PageEditRedirectToStudio, SectionTabs, StatusBadge, type ThemeOption, ThemeProvider, ThemeSwitcher, WelcomeHeader, useTheme };

package/dist/client.d.ts

@@ -97,4 +97,14 @@ declare function AdminStudioMediaView(props: AnyRecord$1): react_jsx_runtime.JSX
 type AnyRecord = Record<string, unknown>;
 declare function AdminStudioToolsView(props: AnyRecord): react_jsx_runtime.JSX.Element;
 
-export { AdminStudioDashboard, AdminStudioGlobalsView, AdminStudioMediaView, AdminStudioNav, AdminStudioPageEditView, AdminStudioPagesListView, AdminStudioToolsView, BlockPicker, Dashboard, EmptyState, HelpTooltip, Icon, Logo, OrionBlocksField, SectionTabs, StatusBadge, type ThemeOption, ThemeProvider, ThemeSwitcher, WelcomeHeader, useTheme };
+type Props$1 = {
+    pagesPathBase?: string;
+};
+declare function OpenInStudioMenuItem({ pagesPathBase }: Props$1): react_jsx_runtime.JSX.Element | null;
+
+type Props = {
+    pagesPathBase?: string;
+};
+declare function PageEditRedirectToStudio({ pagesPathBase }: Props): react_jsx_runtime.JSX.Element;
+
+export { AdminStudioDashboard, AdminStudioGlobalsView, AdminStudioMediaView, AdminStudioNav, AdminStudioPageEditView, AdminStudioPagesListView, AdminStudioToolsView, BlockPicker, Dashboard, EmptyState, HelpTooltip, Icon, Logo, OpenInStudioMenuItem, OrionBlocksField, PageEditRedirectToStudio, SectionTabs, StatusBadge, type ThemeOption, ThemeProvider, ThemeSwitcher, WelcomeHeader, useTheme };

package/dist/client.js

@@ -1169,7 +1169,9 @@ __export(client_exports, {
   HelpTooltip: () => HelpTooltip,
   Icon: () => Icon,
   Logo: () => Logo,
+  OpenInStudioMenuItem: () => OpenInStudioMenuItem,
   OrionBlocksField: () => OrionBlocksField,
+  PageEditRedirectToStudio: () => PageEditRedirectToStudio,
   SectionTabs: () => SectionTabs,
   StatusBadge: () => StatusBadge,
   ThemeProvider: () => ThemeProvider,
@@ -2753,6 +2755,66 @@ function AdminStudioToolsView(props) {
     )) })
   ] });
 }
+
+// src/components/studio/OpenInStudioMenuItem.tsx
+var import_ui7 = require("@payloadcms/ui");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function OpenInStudioMenuItem({ pagesPathBase = "/admin/pages" }) {
+  const documentInfo = (0, import_ui7.useDocumentInfo)();
+  const id = documentInfo?.id;
+  if (!id) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "a",
+    {
+      href: `${pagesPathBase}/${id}`,
+      style: {
+        color: "var(--theme-elevation-800)",
+        display: "block",
+        fontSize: "0.92rem",
+        lineHeight: 1.3,
+        padding: "0.45rem 0.7rem",
+        textDecoration: "none",
+        width: "100%"
+      },
+      children: "Open Editor"
+    }
+  );
+}
+
+// src/components/studio/PageEditRedirectToStudio.tsx
+var import_react13 = require("react");
+var import_ui8 = require("@payloadcms/ui");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function PageEditRedirectToStudio({ pagesPathBase = "/admin/pages" }) {
+  const documentInfo = (0, import_ui8.useDocumentInfo)();
+  const id = documentInfo?.id;
+  (0, import_react13.useEffect)(() => {
+    if (!id) {
+      return;
+    }
+    window.location.replace(`${pagesPathBase}/${id}`);
+  }, [id, pagesPathBase]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "div",
+    {
+      style: {
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.75rem",
+        justifyContent: "center",
+        minHeight: "50vh"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { style: { margin: 0 }, children: "Opening Editor..." }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { style: { color: "var(--theme-elevation-600)", margin: 0 }, children: "Redirecting to the custom page editor." }),
+        id ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href: `${pagesPathBase}/${id}`, children: "Continue to Editor" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href: pagesPathBase, children: "Open Pages" })
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AdminStudioDashboard,
@@ -2768,7 +2830,9 @@ function AdminStudioToolsView(props) {
   HelpTooltip,
   Icon,
   Logo,
+  OpenInStudioMenuItem,
   OrionBlocksField,
+  PageEditRedirectToStudio,
   SectionTabs,
   StatusBadge,
   ThemeProvider,

package/dist/client.mjs

@@ -1575,6 +1575,66 @@ function AdminStudioToolsView(props) {
     )) })
   ] });
 }
+
+// src/components/studio/OpenInStudioMenuItem.tsx
+import { useDocumentInfo } from "@payloadcms/ui";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function OpenInStudioMenuItem({ pagesPathBase = "/admin/pages" }) {
+  const documentInfo = useDocumentInfo();
+  const id = documentInfo?.id;
+  if (!id) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx17(
+    "a",
+    {
+      href: `${pagesPathBase}/${id}`,
+      style: {
+        color: "var(--theme-elevation-800)",
+        display: "block",
+        fontSize: "0.92rem",
+        lineHeight: 1.3,
+        padding: "0.45rem 0.7rem",
+        textDecoration: "none",
+        width: "100%"
+      },
+      children: "Open Editor"
+    }
+  );
+}
+
+// src/components/studio/PageEditRedirectToStudio.tsx
+import { useEffect as useEffect8 } from "react";
+import { useDocumentInfo as useDocumentInfo2 } from "@payloadcms/ui";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+function PageEditRedirectToStudio({ pagesPathBase = "/admin/pages" }) {
+  const documentInfo = useDocumentInfo2();
+  const id = documentInfo?.id;
+  useEffect8(() => {
+    if (!id) {
+      return;
+    }
+    window.location.replace(`${pagesPathBase}/${id}`);
+  }, [id, pagesPathBase]);
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      style: {
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.75rem",
+        justifyContent: "center",
+        minHeight: "50vh"
+      },
+      children: [
+        /* @__PURE__ */ jsx18("h2", { style: { margin: 0 }, children: "Opening Editor..." }),
+        /* @__PURE__ */ jsx18("p", { style: { color: "var(--theme-elevation-600)", margin: 0 }, children: "Redirecting to the custom page editor." }),
+        id ? /* @__PURE__ */ jsx18("a", { href: `${pagesPathBase}/${id}`, children: "Continue to Editor" }) : /* @__PURE__ */ jsx18("a", { href: pagesPathBase, children: "Open Pages" })
+      ]
+    }
+  );
+}
 export {
   AdminStudioDashboard,
   AdminStudioGlobalsView,
@@ -1589,7 +1649,9 @@ export {
   HelpTooltip,
   Icon,
   Logo,
+  OpenInStudioMenuItem,
   OrionBlocksField,
+  PageEditRedirectToStudio,
   SectionTabs,
   StatusBadge,
   ThemeProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-admin-components",
-  "version": "0.2.0-beta.12",
+  "version": "0.2.0-beta.14",
   "description": "Custom admin UI components for Payload CMS",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/client.ts

@@ -19,6 +19,8 @@ export { AdminStudioPageEditView } from './components/studio/AdminStudioPageEdit
 export { AdminStudioGlobalsView } from './components/studio/AdminStudioGlobalsView'
 export { AdminStudioMediaView } from './components/studio/AdminStudioMediaView'
 export { AdminStudioToolsView } from './components/studio/AdminStudioToolsView'
+export { OpenInStudioMenuItem } from './components/studio/OpenInStudioMenuItem'
+export { PageEditRedirectToStudio } from './components/studio/PageEditRedirectToStudio'
 
 export { useTheme } from './hooks/useTheme'
 export type { ThemeOption } from './hooks/useTheme'

package/src/components/studio/OpenInStudioMenuItem.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { useDocumentInfo } from '@payloadcms/ui'
+
+type Props = {
+  /** Defaults to `/admin/pages`. */
+  pagesPathBase?: string
+}
+
+export function OpenInStudioMenuItem({ pagesPathBase = '/admin/pages' }: Props) {
+  const documentInfo = useDocumentInfo()
+  const id = documentInfo?.id
+
+  if (!id) {
+    return null
+  }
+
+  return (
+    <a
+      href={`${pagesPathBase}/${id}`}
+      style={{
+        color: 'var(--theme-elevation-800)',
+        display: 'block',
+        fontSize: '0.92rem',
+        lineHeight: 1.3,
+        padding: '0.45rem 0.7rem',
+        textDecoration: 'none',
+        width: '100%',
+      }}
+    >
+      Open Editor
+    </a>
+  )
+}
+

package/src/components/studio/PageEditRedirectToStudio.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import { useDocumentInfo } from '@payloadcms/ui'
+
+type Props = {
+  /** Defaults to `/admin/pages`. */
+  pagesPathBase?: string
+}
+
+export function PageEditRedirectToStudio({ pagesPathBase = '/admin/pages' }: Props) {
+  const documentInfo = useDocumentInfo()
+  const id = documentInfo?.id
+
+  useEffect(() => {
+    if (!id) {
+      return
+    }
+
+    window.location.replace(`${pagesPathBase}/${id}`)
+  }, [id, pagesPathBase])
+
+  return (
+    <div
+      style={{
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.75rem',
+        justifyContent: 'center',
+        minHeight: '50vh',
+      }}
+    >
+      <h2 style={{ margin: 0 }}>Opening Editor...</h2>
+      <p style={{ color: 'var(--theme-elevation-600)', margin: 0 }}>
+        Redirecting to the custom page editor.
+      </p>
+      {id ? (
+        <a href={`${pagesPathBase}/${id}`}>Continue to Editor</a>
+      ) : (
+        <a href={pagesPathBase}>Open Pages</a>
+      )}
+    </div>
+  )
+}