@commercetools-demo/puck-page-manager 0.2.1 → 0.3.0

package/dist/index.d.mts

@@ -8,8 +8,8 @@ interface PageManagerProps {
     projectKey: string;
     businessUnitKey: string;
     jwtToken: string;
-    /** Puck component config — passed to editor and preview */
-    config: Config;
+    /** Puck component config — passed to editor and preview. Defaults to defaultPuckConfig. */
+    config?: Config;
     /** Optional element rendered before the breadcrumb in editor/preview headers */
     backButton?: ReactNode;
 }

package/dist/index.d.ts

@@ -8,8 +8,8 @@ interface PageManagerProps {
     projectKey: string;
     businessUnitKey: string;
     jwtToken: string;
-    /** Puck component config — passed to editor and preview */
-    config: Config;
+    /** Puck component config — passed to editor and preview. Defaults to defaultPuckConfig. */
+    config?: Config;
     /** Optional element rendered before the breadcrumb in editor/preview headers */
     backButton?: ReactNode;
 }

package/dist/index.js

@@ -52,6 +52,10 @@ var import_text_input = __toESM(require("@commercetools-uikit/text-input"));
 var import_label = __toESM(require("@commercetools-uikit/label"));
 var import_icons = require("@commercetools-uikit/icons");
 var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_CONFIG = {
+  ...import_puck_editor.defaultPuckConfig,
+  components: { ...import_puck_editor.defaultPuckConfig.components }
+};
 var StatusBadge = ({ variant }) => {
   const styles = variant === "published" ? { background: "var(--color-success-95)", color: "var(--color-success-40)", border: "1px solid var(--color-success-85)" } : variant === "draft" ? { background: "var(--color-warning-95)", color: "var(--color-warning-40)", border: "1px solid var(--color-warning-85)" } : { background: "var(--color-neutral-95)", color: "var(--color-neutral-50)", border: "1px solid var(--color-neutral-85)" };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -394,7 +398,7 @@ var PageManager = ({
   projectKey,
   businessUnitKey,
   jwtToken,
-  config,
+  config = DEFAULT_CONFIG,
   backButton
 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   import_puck_api.PuckApiProvider,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/PageManager.tsx"],"sourcesContent":["export { PageManager } from './PageManager';\nexport type { PageManagerProps } from './PageManager';\n","import React, { useState, type ReactNode } from 'react';\nimport {\n  BrowserRouter,\n  Switch,\n  Route,\n  useHistory,\n  useParams,\n  useLocation,\n} from 'react-router-dom';\nimport {\n  PuckApiProvider,\n  usePuckPages,\n  usePuckApiContext,\n} from '@commercetools-demo/puck-api';\nimport { PuckEditor } from '@commercetools-demo/puck-editor';\nimport { PuckRenderer } from '@commercetools-demo/puck-renderer';\nimport type { Config } from '@measured/puck';\nimport type { CreatePuckPageInput, PuckPageListItem } from '@commercetools-demo/puck-types';\nimport DataTable from '@commercetools-uikit/data-table';\nimport PrimaryButton from '@commercetools-uikit/primary-button';\nimport SecondaryButton from '@commercetools-uikit/secondary-button';\nimport FlatButton from '@commercetools-uikit/flat-button';\nimport Card from '@commercetools-uikit/card';\nimport Spacings from '@commercetools-uikit/spacings';\nimport Text from '@commercetools-uikit/text';\nimport LoadingSpinner from '@commercetools-uikit/loading-spinner';\nimport TextInput from '@commercetools-uikit/text-input';\nimport Label from '@commercetools-uikit/label';\nimport { PlusThinIcon, AngleLeftIcon } from '@commercetools-uikit/icons';\n\n// ---------------------------------------------------------------------------\n// Status badge\n// ---------------------------------------------------------------------------\n\nconst StatusBadge: React.FC<{ variant: 'draft' | 'published' | 'none' }> = ({ variant }) => {\n  const styles: React.CSSProperties =\n    variant === 'published'\n      ? { background: 'var(--color-success-95)', color: 'var(--color-success-40)', border: '1px solid var(--color-success-85)' }\n      : variant === 'draft'\n        ? { background: 'var(--color-warning-95)', color: 'var(--color-warning-40)', border: '1px solid var(--color-warning-85)' }\n        : { background: 'var(--color-neutral-95)', color: 'var(--color-neutral-50)', border: '1px solid var(--color-neutral-85)' };\n  return (\n    <span\n      style={{\n        ...styles,\n        display: 'inline-flex',\n        alignItems: 'center',\n        padding: '2px 8px',\n        borderRadius: 'var(--border-radius-20)',\n        fontSize: 'var(--font-size-10)',\n        fontWeight: 'var(--font-weight-600)',\n        marginRight: '4px',\n        whiteSpace: 'nowrap',\n      }}\n    >\n      {variant === 'published' ? 'Published' : variant === 'draft' ? 'Draft' : 'No state'}\n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Shared nav bar style\n// ---------------------------------------------------------------------------\n\nconst NAV_BAR_STYLE: React.CSSProperties = {\n  position: 'sticky',\n  top: 0,\n  display: 'flex',\n  alignItems: 'center',\n  gap: '12px',\n  padding: '8px 16px',\n  background: 'var(--color-surface, #fff)',\n  borderBottom: '1px solid var(--color-neutral-90)',\n  zIndex: 200,\n  flexShrink: 0,\n};\n\n// ---------------------------------------------------------------------------\n// Table columns\n// ---------------------------------------------------------------------------\n\ntype PageRow = PuckPageListItem & { id: string };\n\nconst COLUMNS = [\n  { key: 'name', label: 'Name' },\n  { key: 'slug', label: 'Slug' },\n  { key: 'status', label: 'Status' },\n  { key: 'updatedAt', label: 'Updated' },\n  { key: 'actions', label: 'Actions', shouldIgnoreRowClick: true },\n];\n\n// ---------------------------------------------------------------------------\n// PageList route\n// ---------------------------------------------------------------------------\n\ninterface PageListProps {\n  backButton?: ReactNode;\n}\n\nconst PageList: React.FC<PageListProps> = ({ backButton }) => {\n  const history = useHistory();\n  const { pages, loading, error, createPage, deletePage, refresh } = usePuckPages();\n\n  const [creating, setCreating] = useState(false);\n  const [newName, setNewName] = useState('');\n  const [newSlug, setNewSlug] = useState('');\n  const [formError, setFormError] = useState('');\n  const [submitting, setSubmitting] = useState(false);\n  const [deleting, setDeleting] = useState<string | null>(null);\n\n  const handleCreate = async () => {\n    if (!newName.trim()) { setFormError('Name is required'); return; }\n    if (!newSlug.trim()) { setFormError('Slug is required'); return; }\n    setFormError('');\n    setSubmitting(true);\n    try {\n      const input: CreatePuckPageInput = {\n        name: newName.trim(),\n        slug: newSlug.trim().startsWith('/') ? newSlug.trim() : `/${newSlug.trim()}`,\n      };\n      const created = await createPage(input);\n      setCreating(false);\n      setNewName('');\n      setNewSlug('');\n      history.push(`/${created.key}/edit`, { pageName: created.value.name });\n    } catch (err) {\n      setFormError((err as Error).message);\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  const handleDelete = async (page: PuckPageListItem) => {\n    if (!confirm(`Delete \"${page.value.name}\"? This cannot be undone.`)) return;\n    setDeleting(page.key);\n    try {\n      await deletePage(page.key);\n      await refresh();\n    } finally {\n      setDeleting(null);\n    }\n  };\n\n  if (loading) {\n    return (\n      <div style={{ padding: '64px', display: 'flex', justifyContent: 'center' }}>\n        <LoadingSpinner />\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div style={{ padding: '32px' }}>\n        <Text.Body tone=\"negative\">Error: {error}</Text.Body>\n      </div>\n    );\n  }\n\n  const rows: PageRow[] = pages.map((p: PuckPageListItem) => ({ ...p, id: p.key }));\n\n  return (\n    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '32px 24px' }}>\n      <Spacings.Stack scale=\"l\">\n        <Spacings.Inline justifyContent=\"space-between\" alignItems=\"center\">\n          <Spacings.Inline scale=\"m\" alignItems=\"center\">\n            {backButton}\n            <Text.Headline as=\"h1\">Puck Pages</Text.Headline>\n          </Spacings.Inline>\n          <PrimaryButton\n            label=\"New Page\"\n            iconLeft={<PlusThinIcon />}\n            onClick={() => setCreating(true)}\n          />\n        </Spacings.Inline>\n\n        {creating && (\n          <Card insetScale=\"l\">\n            <Spacings.Stack scale=\"m\">\n              <Text.Subheadline as=\"h4\" isBold>Create New Page</Text.Subheadline>\n              <Spacings.Inline scale=\"m\">\n                <div style={{ flex: 1 }}>\n                  <Spacings.Stack scale=\"xs\">\n                    <Label htmlFor=\"new-page-name\">Name *</Label>\n                    <TextInput\n                      id=\"new-page-name\"\n                      value={newName}\n                      onChange={(e) => setNewName(e.target.value)}\n                      placeholder=\"Home Page\"\n                    />\n                  </Spacings.Stack>\n                </div>\n                <div style={{ flex: 1 }}>\n                  <Spacings.Stack scale=\"xs\">\n                    <Label htmlFor=\"new-page-slug\">Slug *</Label>\n                    <TextInput\n                      id=\"new-page-slug\"\n                      value={newSlug}\n                      onChange={(e) => setNewSlug(e.target.value)}\n                      placeholder=\"/home\"\n                    />\n                  </Spacings.Stack>\n                </div>\n              </Spacings.Inline>\n              {formError && <Text.Body tone=\"negative\">{formError}</Text.Body>}\n              <Spacings.Inline scale=\"s\">\n                <PrimaryButton\n                  label={submitting ? 'Creating…' : 'Create'}\n                  onClick={() => void handleCreate()}\n                  isDisabled={submitting}\n                />\n                <SecondaryButton\n                  label=\"Cancel\"\n                  onClick={() => { setCreating(false); setFormError(''); }}\n                />\n              </Spacings.Inline>\n            </Spacings.Stack>\n          </Card>\n        )}\n\n        {pages.length === 0 && !creating ? (\n          <Spacings.Stack scale=\"m\" alignItems=\"center\">\n            <Text.Body tone=\"secondary\">No pages yet.</Text.Body>\n            <PrimaryButton\n              label=\"Create first page\"\n              iconLeft={<PlusThinIcon />}\n              onClick={() => setCreating(true)}\n            />\n          </Spacings.Stack>\n        ) : pages.length > 0 ? (\n          <DataTable\n            columns={COLUMNS}\n            rows={rows}\n            itemRenderer={(row: PageRow, column) => {\n              switch (column.key) {\n                case 'name':\n                  return (\n                    <Spacings.Stack scale=\"xs\">\n                      <Text.Body isBold>{row.value.name}</Text.Body>\n                      <Text.Detail tone=\"secondary\">{row.key}</Text.Detail>\n                    </Spacings.Stack>\n                  );\n                case 'slug':\n                  return (\n                    <code\n                      style={{\n                        background: 'var(--color-neutral-95)',\n                        padding: '2px 6px',\n                        borderRadius: 'var(--border-radius-4)',\n                        fontSize: 'var(--font-size-10)',\n                        fontFamily: 'monospace',\n                      }}\n                    >\n                      {row.value.slug}\n                    </code>\n                  );\n                case 'status':\n                  return (\n                    <span>\n                      {row.states.draft && <StatusBadge variant=\"draft\" />}\n                      {row.states.published && <StatusBadge variant=\"published\" />}\n                      {!row.states.draft && !row.states.published && <StatusBadge variant=\"none\" />}\n                    </span>\n                  );\n                case 'updatedAt':\n                  return (\n                    <Text.Body tone=\"secondary\">\n                      {new Date(row.value.updatedAt).toLocaleString()}\n                    </Text.Body>\n                  );\n                case 'actions':\n                  return (\n                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n                      <PrimaryButton\n                        label=\"Edit\"\n                        size=\"20\"\n                        onClick={() =>\n                          history.push(`/${row.key}/edit`, { pageName: row.value.name })\n                        }\n                      />\n                      <SecondaryButton\n                        label=\"Preview\"\n                        size=\"20\"\n                        onClick={() =>\n                          history.push(`/${row.key}/preview`, { pageName: row.value.name })\n                        }\n                      />\n                      <FlatButton\n                        tone=\"critical\"\n                        label={deleting === row.key ? '…' : 'Delete'}\n                        isDisabled={deleting === row.key}\n                        onClick={() => void handleDelete(row)}\n                      />\n                    </div>\n                  );\n                default:\n                  return null;\n              }\n            }}\n          />\n        ) : null}\n      </Spacings.Stack>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// PageEditorRoute\n// ---------------------------------------------------------------------------\n\ninterface RouteProps {\n  config: Config;\n  backButton?: ReactNode;\n}\n\nconst PageEditorRoute: React.FC<RouteProps> = ({ config, backButton }) => {\n  const { pageKey } = useParams<{ pageKey: string }>();\n  const history = useHistory();\n  const location = useLocation();\n  const { baseURL, projectKey, businessUnitKey, jwtToken } = usePuckApiContext();\n  const pageName =\n    (location.state as { pageName?: string } | null)?.pageName ?? pageKey ?? 'Page';\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>\n      <div style={NAV_BAR_STYLE}>\n        {backButton}\n        {backButton && <Text.Body tone=\"secondary\">/</Text.Body>}\n        <FlatButton\n          label=\"Pages\"\n          icon={<AngleLeftIcon />}\n          iconPosition=\"left\"\n          onClick={() => history.push('/')}\n        />\n        <Text.Body tone=\"secondary\">/</Text.Body>\n        <Text.Body isBold>{pageName}</Text.Body>\n      </div>\n      <div style={{ flex: 1, overflow: 'hidden' }}>\n        <PuckEditor\n          baseURL={baseURL}\n          projectKey={projectKey}\n          businessUnitKey={businessUnitKey}\n          jwtToken={jwtToken ?? ''}\n          pageKey={pageKey!}\n          config={config}\n          onError={(err: Error) => { console.error('[PageManager] editor error:', err); }}\n        />\n      </div>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// PagePreviewRoute\n// ---------------------------------------------------------------------------\n\nconst PagePreviewRoute: React.FC<RouteProps> = ({ config, backButton }) => {\n  const { pageKey } = useParams<{ pageKey: string }>();\n  const history = useHistory();\n  const location = useLocation();\n  const pageName =\n    (location.state as { pageName?: string } | null)?.pageName ?? pageKey ?? 'Page';\n\n  return (\n    <div>\n      <div style={NAV_BAR_STYLE}>\n        {backButton}\n        {backButton && <Text.Body tone=\"secondary\">/</Text.Body>}\n        <FlatButton\n          label=\"Pages\"\n          icon={<AngleLeftIcon />}\n          iconPosition=\"left\"\n          onClick={() => history.push('/')}\n        />\n        <Text.Body tone=\"secondary\">/</Text.Body>\n        <Text.Body isBold>{pageName}</Text.Body>\n        <span\n          style={{\n            background: 'var(--color-primary-95)',\n            color: 'var(--color-primary-25)',\n            border: '1px solid var(--color-primary-85)',\n            display: 'inline-flex',\n            alignItems: 'center',\n            padding: '2px 10px',\n            borderRadius: 'var(--border-radius-20)',\n            fontSize: 'var(--font-size-10)',\n            fontWeight: 'var(--font-weight-600)',\n          }}\n        >\n          Preview\n        </span>\n      </div>\n      <PuckRenderer pageKey={pageKey} mode=\"preview\" config={config} />\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Inner router component\n// ---------------------------------------------------------------------------\n\ninterface PageManagerInnerProps {\n  config: Config;\n  backButton?: ReactNode;\n}\n\nconst PageManagerInner: React.FC<PageManagerInnerProps> = ({ config, backButton }) => (\n  <Switch>\n    <Route exact path=\"/\" render={() => <PageList backButton={backButton} />} />\n    <Route\n      path=\"/:pageKey/edit\"\n      render={() => <PageEditorRoute config={config} backButton={backButton} />}\n    />\n    <Route\n      path=\"/:pageKey/preview\"\n      render={() => <PagePreviewRoute config={config} backButton={backButton} />}\n    />\n  </Switch>\n);\n\n// ---------------------------------------------------------------------------\n// Public component\n// ---------------------------------------------------------------------------\n\nexport interface PageManagerProps {\n  /** URL path where this manager is mounted, e.g. \"/pages\" — used as router basename */\n  parentUrl: string;\n  baseURL: string;\n  projectKey: string;\n  businessUnitKey: string;\n  jwtToken: string;\n  /** Puck component config — passed to editor and preview */\n  config: Config;\n  /** Optional element rendered before the breadcrumb in editor/preview headers */\n  backButton?: ReactNode;\n}\n\nexport const PageManager: React.FC<PageManagerProps> = ({\n  parentUrl,\n  baseURL,\n  projectKey,\n  businessUnitKey,\n  jwtToken,\n  config,\n  backButton,\n}) => (\n  <PuckApiProvider\n    baseURL={baseURL}\n    projectKey={projectKey}\n    businessUnitKey={businessUnitKey}\n    jwtToken={jwtToken}\n  >\n    <BrowserRouter basename={parentUrl}>\n      <PageManagerInner config={config} backButton={backButton} />\n    </BrowserRouter>\n  </PuckApiProvider>\n);\n"],"mappings":"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","names":["LoadingSpinner","Text","Spacings","PrimaryButton","Card","Label","TextInput","SecondaryButton","DataTable","FlatButton"]}
+{"version":3,"sources":["../src/index.ts","../src/PageManager.tsx"],"sourcesContent":["export { PageManager } from './PageManager';\nexport type { PageManagerProps } from './PageManager';\n","import React, { useState, type ReactNode } from 'react';\nimport {\n  BrowserRouter,\n  Switch,\n  Route,\n  useHistory,\n  useParams,\n  useLocation,\n} from 'react-router-dom';\nimport {\n  PuckApiProvider,\n  usePuckPages,\n  usePuckApiContext,\n} from '@commercetools-demo/puck-api';\nimport { PuckEditor, defaultPuckConfig } from '@commercetools-demo/puck-editor';\nimport { PuckRenderer } from '@commercetools-demo/puck-renderer';\n\nconst DEFAULT_CONFIG: Config = {\n  ...defaultPuckConfig,\n  components: { ...defaultPuckConfig.components },\n};\nimport type { Config } from '@measured/puck';\nimport type { CreatePuckPageInput, PuckPageListItem } from '@commercetools-demo/puck-types';\nimport DataTable from '@commercetools-uikit/data-table';\nimport PrimaryButton from '@commercetools-uikit/primary-button';\nimport SecondaryButton from '@commercetools-uikit/secondary-button';\nimport FlatButton from '@commercetools-uikit/flat-button';\nimport Card from '@commercetools-uikit/card';\nimport Spacings from '@commercetools-uikit/spacings';\nimport Text from '@commercetools-uikit/text';\nimport LoadingSpinner from '@commercetools-uikit/loading-spinner';\nimport TextInput from '@commercetools-uikit/text-input';\nimport Label from '@commercetools-uikit/label';\nimport { PlusThinIcon, AngleLeftIcon } from '@commercetools-uikit/icons';\n\n// ---------------------------------------------------------------------------\n// Status badge\n// ---------------------------------------------------------------------------\n\nconst StatusBadge: React.FC<{ variant: 'draft' | 'published' | 'none' }> = ({ variant }) => {\n  const styles: React.CSSProperties =\n    variant === 'published'\n      ? { background: 'var(--color-success-95)', color: 'var(--color-success-40)', border: '1px solid var(--color-success-85)' }\n      : variant === 'draft'\n        ? { background: 'var(--color-warning-95)', color: 'var(--color-warning-40)', border: '1px solid var(--color-warning-85)' }\n        : { background: 'var(--color-neutral-95)', color: 'var(--color-neutral-50)', border: '1px solid var(--color-neutral-85)' };\n  return (\n    <span\n      style={{\n        ...styles,\n        display: 'inline-flex',\n        alignItems: 'center',\n        padding: '2px 8px',\n        borderRadius: 'var(--border-radius-20)',\n        fontSize: 'var(--font-size-10)',\n        fontWeight: 'var(--font-weight-600)',\n        marginRight: '4px',\n        whiteSpace: 'nowrap',\n      }}\n    >\n      {variant === 'published' ? 'Published' : variant === 'draft' ? 'Draft' : 'No state'}\n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Shared nav bar style\n// ---------------------------------------------------------------------------\n\nconst NAV_BAR_STYLE: React.CSSProperties = {\n  position: 'sticky',\n  top: 0,\n  display: 'flex',\n  alignItems: 'center',\n  gap: '12px',\n  padding: '8px 16px',\n  background: 'var(--color-surface, #fff)',\n  borderBottom: '1px solid var(--color-neutral-90)',\n  zIndex: 200,\n  flexShrink: 0,\n};\n\n// ---------------------------------------------------------------------------\n// Table columns\n// ---------------------------------------------------------------------------\n\ntype PageRow = PuckPageListItem & { id: string };\n\nconst COLUMNS = [\n  { key: 'name', label: 'Name' },\n  { key: 'slug', label: 'Slug' },\n  { key: 'status', label: 'Status' },\n  { key: 'updatedAt', label: 'Updated' },\n  { key: 'actions', label: 'Actions', shouldIgnoreRowClick: true },\n];\n\n// ---------------------------------------------------------------------------\n// PageList route\n// ---------------------------------------------------------------------------\n\ninterface PageListProps {\n  backButton?: ReactNode;\n}\n\nconst PageList: React.FC<PageListProps> = ({ backButton }) => {\n  const history = useHistory();\n  const { pages, loading, error, createPage, deletePage, refresh } = usePuckPages();\n\n  const [creating, setCreating] = useState(false);\n  const [newName, setNewName] = useState('');\n  const [newSlug, setNewSlug] = useState('');\n  const [formError, setFormError] = useState('');\n  const [submitting, setSubmitting] = useState(false);\n  const [deleting, setDeleting] = useState<string | null>(null);\n\n  const handleCreate = async () => {\n    if (!newName.trim()) { setFormError('Name is required'); return; }\n    if (!newSlug.trim()) { setFormError('Slug is required'); return; }\n    setFormError('');\n    setSubmitting(true);\n    try {\n      const input: CreatePuckPageInput = {\n        name: newName.trim(),\n        slug: newSlug.trim().startsWith('/') ? newSlug.trim() : `/${newSlug.trim()}`,\n      };\n      const created = await createPage(input);\n      setCreating(false);\n      setNewName('');\n      setNewSlug('');\n      history.push(`/${created.key}/edit`, { pageName: created.value.name });\n    } catch (err) {\n      setFormError((err as Error).message);\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  const handleDelete = async (page: PuckPageListItem) => {\n    if (!confirm(`Delete \"${page.value.name}\"? This cannot be undone.`)) return;\n    setDeleting(page.key);\n    try {\n      await deletePage(page.key);\n      await refresh();\n    } finally {\n      setDeleting(null);\n    }\n  };\n\n  if (loading) {\n    return (\n      <div style={{ padding: '64px', display: 'flex', justifyContent: 'center' }}>\n        <LoadingSpinner />\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div style={{ padding: '32px' }}>\n        <Text.Body tone=\"negative\">Error: {error}</Text.Body>\n      </div>\n    );\n  }\n\n  const rows: PageRow[] = pages.map((p: PuckPageListItem) => ({ ...p, id: p.key }));\n\n  return (\n    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '32px 24px' }}>\n      <Spacings.Stack scale=\"l\">\n        <Spacings.Inline justifyContent=\"space-between\" alignItems=\"center\">\n          <Spacings.Inline scale=\"m\" alignItems=\"center\">\n            {backButton}\n            <Text.Headline as=\"h1\">Puck Pages</Text.Headline>\n          </Spacings.Inline>\n          <PrimaryButton\n            label=\"New Page\"\n            iconLeft={<PlusThinIcon />}\n            onClick={() => setCreating(true)}\n          />\n        </Spacings.Inline>\n\n        {creating && (\n          <Card insetScale=\"l\">\n            <Spacings.Stack scale=\"m\">\n              <Text.Subheadline as=\"h4\" isBold>Create New Page</Text.Subheadline>\n              <Spacings.Inline scale=\"m\">\n                <div style={{ flex: 1 }}>\n                  <Spacings.Stack scale=\"xs\">\n                    <Label htmlFor=\"new-page-name\">Name *</Label>\n                    <TextInput\n                      id=\"new-page-name\"\n                      value={newName}\n                      onChange={(e) => setNewName(e.target.value)}\n                      placeholder=\"Home Page\"\n                    />\n                  </Spacings.Stack>\n                </div>\n                <div style={{ flex: 1 }}>\n                  <Spacings.Stack scale=\"xs\">\n                    <Label htmlFor=\"new-page-slug\">Slug *</Label>\n                    <TextInput\n                      id=\"new-page-slug\"\n                      value={newSlug}\n                      onChange={(e) => setNewSlug(e.target.value)}\n                      placeholder=\"/home\"\n                    />\n                  </Spacings.Stack>\n                </div>\n              </Spacings.Inline>\n              {formError && <Text.Body tone=\"negative\">{formError}</Text.Body>}\n              <Spacings.Inline scale=\"s\">\n                <PrimaryButton\n                  label={submitting ? 'Creating…' : 'Create'}\n                  onClick={() => void handleCreate()}\n                  isDisabled={submitting}\n                />\n                <SecondaryButton\n                  label=\"Cancel\"\n                  onClick={() => { setCreating(false); setFormError(''); }}\n                />\n              </Spacings.Inline>\n            </Spacings.Stack>\n          </Card>\n        )}\n\n        {pages.length === 0 && !creating ? (\n          <Spacings.Stack scale=\"m\" alignItems=\"center\">\n            <Text.Body tone=\"secondary\">No pages yet.</Text.Body>\n            <PrimaryButton\n              label=\"Create first page\"\n              iconLeft={<PlusThinIcon />}\n              onClick={() => setCreating(true)}\n            />\n          </Spacings.Stack>\n        ) : pages.length > 0 ? (\n          <DataTable\n            columns={COLUMNS}\n            rows={rows}\n            itemRenderer={(row: PageRow, column) => {\n              switch (column.key) {\n                case 'name':\n                  return (\n                    <Spacings.Stack scale=\"xs\">\n                      <Text.Body isBold>{row.value.name}</Text.Body>\n                      <Text.Detail tone=\"secondary\">{row.key}</Text.Detail>\n                    </Spacings.Stack>\n                  );\n                case 'slug':\n                  return (\n                    <code\n                      style={{\n                        background: 'var(--color-neutral-95)',\n                        padding: '2px 6px',\n                        borderRadius: 'var(--border-radius-4)',\n                        fontSize: 'var(--font-size-10)',\n                        fontFamily: 'monospace',\n                      }}\n                    >\n                      {row.value.slug}\n                    </code>\n                  );\n                case 'status':\n                  return (\n                    <span>\n                      {row.states.draft && <StatusBadge variant=\"draft\" />}\n                      {row.states.published && <StatusBadge variant=\"published\" />}\n                      {!row.states.draft && !row.states.published && <StatusBadge variant=\"none\" />}\n                    </span>\n                  );\n                case 'updatedAt':\n                  return (\n                    <Text.Body tone=\"secondary\">\n                      {new Date(row.value.updatedAt).toLocaleString()}\n                    </Text.Body>\n                  );\n                case 'actions':\n                  return (\n                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n                      <PrimaryButton\n                        label=\"Edit\"\n                        size=\"20\"\n                        onClick={() =>\n                          history.push(`/${row.key}/edit`, { pageName: row.value.name })\n                        }\n                      />\n                      <SecondaryButton\n                        label=\"Preview\"\n                        size=\"20\"\n                        onClick={() =>\n                          history.push(`/${row.key}/preview`, { pageName: row.value.name })\n                        }\n                      />\n                      <FlatButton\n                        tone=\"critical\"\n                        label={deleting === row.key ? '…' : 'Delete'}\n                        isDisabled={deleting === row.key}\n                        onClick={() => void handleDelete(row)}\n                      />\n                    </div>\n                  );\n                default:\n                  return null;\n              }\n            }}\n          />\n        ) : null}\n      </Spacings.Stack>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// PageEditorRoute\n// ---------------------------------------------------------------------------\n\ninterface RouteProps {\n  config: Config;\n  backButton?: ReactNode;\n}\n\nconst PageEditorRoute: React.FC<RouteProps> = ({ config, backButton }) => {\n  const { pageKey } = useParams<{ pageKey: string }>();\n  const history = useHistory();\n  const location = useLocation();\n  const { baseURL, projectKey, businessUnitKey, jwtToken } = usePuckApiContext();\n  const pageName =\n    (location.state as { pageName?: string } | null)?.pageName ?? pageKey ?? 'Page';\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>\n      <div style={NAV_BAR_STYLE}>\n        {backButton}\n        {backButton && <Text.Body tone=\"secondary\">/</Text.Body>}\n        <FlatButton\n          label=\"Pages\"\n          icon={<AngleLeftIcon />}\n          iconPosition=\"left\"\n          onClick={() => history.push('/')}\n        />\n        <Text.Body tone=\"secondary\">/</Text.Body>\n        <Text.Body isBold>{pageName}</Text.Body>\n      </div>\n      <div style={{ flex: 1, overflow: 'hidden' }}>\n        <PuckEditor\n          baseURL={baseURL}\n          projectKey={projectKey}\n          businessUnitKey={businessUnitKey}\n          jwtToken={jwtToken ?? ''}\n          pageKey={pageKey!}\n          config={config}\n          onError={(err: Error) => { console.error('[PageManager] editor error:', err); }}\n        />\n      </div>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// PagePreviewRoute\n// ---------------------------------------------------------------------------\n\nconst PagePreviewRoute: React.FC<RouteProps> = ({ config, backButton }) => {\n  const { pageKey } = useParams<{ pageKey: string }>();\n  const history = useHistory();\n  const location = useLocation();\n  const pageName =\n    (location.state as { pageName?: string } | null)?.pageName ?? pageKey ?? 'Page';\n\n  return (\n    <div>\n      <div style={NAV_BAR_STYLE}>\n        {backButton}\n        {backButton && <Text.Body tone=\"secondary\">/</Text.Body>}\n        <FlatButton\n          label=\"Pages\"\n          icon={<AngleLeftIcon />}\n          iconPosition=\"left\"\n          onClick={() => history.push('/')}\n        />\n        <Text.Body tone=\"secondary\">/</Text.Body>\n        <Text.Body isBold>{pageName}</Text.Body>\n        <span\n          style={{\n            background: 'var(--color-primary-95)',\n            color: 'var(--color-primary-25)',\n            border: '1px solid var(--color-primary-85)',\n            display: 'inline-flex',\n            alignItems: 'center',\n            padding: '2px 10px',\n            borderRadius: 'var(--border-radius-20)',\n            fontSize: 'var(--font-size-10)',\n            fontWeight: 'var(--font-weight-600)',\n          }}\n        >\n          Preview\n        </span>\n      </div>\n      <PuckRenderer pageKey={pageKey} mode=\"preview\" config={config} />\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Inner router component\n// ---------------------------------------------------------------------------\n\ninterface PageManagerInnerProps {\n  config: Config;\n  backButton?: ReactNode;\n}\n\nconst PageManagerInner: React.FC<PageManagerInnerProps> = ({ config, backButton }) => (\n  <Switch>\n    <Route exact path=\"/\" render={() => <PageList backButton={backButton} />} />\n    <Route\n      path=\"/:pageKey/edit\"\n      render={() => <PageEditorRoute config={config} backButton={backButton} />}\n    />\n    <Route\n      path=\"/:pageKey/preview\"\n      render={() => <PagePreviewRoute config={config} backButton={backButton} />}\n    />\n  </Switch>\n);\n\n// ---------------------------------------------------------------------------\n// Public component\n// ---------------------------------------------------------------------------\n\nexport interface PageManagerProps {\n  /** URL path where this manager is mounted, e.g. \"/pages\" — used as router basename */\n  parentUrl: string;\n  baseURL: string;\n  projectKey: string;\n  businessUnitKey: string;\n  jwtToken: string;\n  /** Puck component config — passed to editor and preview. Defaults to defaultPuckConfig. */\n  config?: Config;\n  /** Optional element rendered before the breadcrumb in editor/preview headers */\n  backButton?: ReactNode;\n}\n\nexport const PageManager: React.FC<PageManagerProps> = ({\n  parentUrl,\n  baseURL,\n  projectKey,\n  businessUnitKey,\n  jwtToken,\n  config = DEFAULT_CONFIG,\n  backButton,\n}) => (\n  <PuckApiProvider\n    baseURL={baseURL}\n    projectKey={projectKey}\n    businessUnitKey={businessUnitKey}\n    jwtToken={jwtToken}\n  >\n    <BrowserRouter basename={parentUrl}>\n      <PageManagerInner config={config} backButton={backButton} />\n    </BrowserRouter>\n  </PuckApiProvider>\n);\n"],"mappings":"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","names":["LoadingSpinner","Text","Spacings","PrimaryButton","Card","Label","TextInput","SecondaryButton","DataTable","FlatButton"]}

package/dist/index.mjs

@@ -13,7 +13,7 @@ import {
   usePuckPages,
   usePuckApiContext
 } from "@commercetools-demo/puck-api";
-import { PuckEditor } from "@commercetools-demo/puck-editor";
+import { PuckEditor, defaultPuckConfig } from "@commercetools-demo/puck-editor";
 import { PuckRenderer } from "@commercetools-demo/puck-renderer";
 import DataTable from "@commercetools-uikit/data-table";
 import PrimaryButton from "@commercetools-uikit/primary-button";
@@ -27,6 +27,10 @@ import TextInput from "@commercetools-uikit/text-input";
 import Label from "@commercetools-uikit/label";
 import { PlusThinIcon, AngleLeftIcon } from "@commercetools-uikit/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_CONFIG = {
+  ...defaultPuckConfig,
+  components: { ...defaultPuckConfig.components }
+};
 var StatusBadge = ({ variant }) => {
   const styles = variant === "published" ? { background: "var(--color-success-95)", color: "var(--color-success-40)", border: "1px solid var(--color-success-85)" } : variant === "draft" ? { background: "var(--color-warning-95)", color: "var(--color-warning-40)", border: "1px solid var(--color-warning-85)" } : { background: "var(--color-neutral-95)", color: "var(--color-neutral-50)", border: "1px solid var(--color-neutral-85)" };
   return /* @__PURE__ */ jsx(
@@ -369,7 +373,7 @@ var PageManager = ({
   projectKey,
   businessUnitKey,
   jwtToken,
-  config,
+  config = DEFAULT_CONFIG,
   backButton
 }) => /* @__PURE__ */ jsx(
   PuckApiProvider,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/PageManager.tsx"],"sourcesContent":["import React, { useState, type ReactNode } from 'react';\nimport {\n  BrowserRouter,\n  Switch,\n  Route,\n  useHistory,\n  useParams,\n  useLocation,\n} from 'react-router-dom';\nimport {\n  PuckApiProvider,\n  usePuckPages,\n  usePuckApiContext,\n} from '@commercetools-demo/puck-api';\nimport { PuckEditor } from '@commercetools-demo/puck-editor';\nimport { PuckRenderer } from '@commercetools-demo/puck-renderer';\nimport type { Config } from '@measured/puck';\nimport type { CreatePuckPageInput, PuckPageListItem } from '@commercetools-demo/puck-types';\nimport DataTable from '@commercetools-uikit/data-table';\nimport PrimaryButton from '@commercetools-uikit/primary-button';\nimport SecondaryButton from '@commercetools-uikit/secondary-button';\nimport FlatButton from '@commercetools-uikit/flat-button';\nimport Card from '@commercetools-uikit/card';\nimport Spacings from '@commercetools-uikit/spacings';\nimport Text from '@commercetools-uikit/text';\nimport LoadingSpinner from '@commercetools-uikit/loading-spinner';\nimport TextInput from '@commercetools-uikit/text-input';\nimport Label from '@commercetools-uikit/label';\nimport { PlusThinIcon, AngleLeftIcon } from '@commercetools-uikit/icons';\n\n// ---------------------------------------------------------------------------\n// Status badge\n// ---------------------------------------------------------------------------\n\nconst StatusBadge: React.FC<{ variant: 'draft' | 'published' | 'none' }> = ({ variant }) => {\n  const styles: React.CSSProperties =\n    variant === 'published'\n      ? { background: 'var(--color-success-95)', color: 'var(--color-success-40)', border: '1px solid var(--color-success-85)' }\n      : variant === 'draft'\n        ? { background: 'var(--color-warning-95)', color: 'var(--color-warning-40)', border: '1px solid var(--color-warning-85)' }\n        : { background: 'var(--color-neutral-95)', color: 'var(--color-neutral-50)', border: '1px solid var(--color-neutral-85)' };\n  return (\n    <span\n      style={{\n        ...styles,\n        display: 'inline-flex',\n        alignItems: 'center',\n        padding: '2px 8px',\n        borderRadius: 'var(--border-radius-20)',\n        fontSize: 'var(--font-size-10)',\n        fontWeight: 'var(--font-weight-600)',\n        marginRight: '4px',\n        whiteSpace: 'nowrap',\n      }}\n    >\n      {variant === 'published' ? 'Published' : variant === 'draft' ? 'Draft' : 'No state'}\n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Shared nav bar style\n// ---------------------------------------------------------------------------\n\nconst NAV_BAR_STYLE: React.CSSProperties = {\n  position: 'sticky',\n  top: 0,\n  display: 'flex',\n  alignItems: 'center',\n  gap: '12px',\n  padding: '8px 16px',\n  background: 'var(--color-surface, #fff)',\n  borderBottom: '1px solid var(--color-neutral-90)',\n  zIndex: 200,\n  flexShrink: 0,\n};\n\n// ---------------------------------------------------------------------------\n// Table columns\n// ---------------------------------------------------------------------------\n\ntype PageRow = PuckPageListItem & { id: string };\n\nconst COLUMNS = [\n  { key: 'name', label: 'Name' },\n  { key: 'slug', label: 'Slug' },\n  { key: 'status', label: 'Status' },\n  { key: 'updatedAt', label: 'Updated' },\n  { key: 'actions', label: 'Actions', shouldIgnoreRowClick: true },\n];\n\n// ---------------------------------------------------------------------------\n// PageList route\n// ---------------------------------------------------------------------------\n\ninterface PageListProps {\n  backButton?: ReactNode;\n}\n\nconst PageList: React.FC<PageListProps> = ({ backButton }) => {\n  const history = useHistory();\n  const { pages, loading, error, createPage, deletePage, refresh } = usePuckPages();\n\n  const [creating, setCreating] = useState(false);\n  const [newName, setNewName] = useState('');\n  const [newSlug, setNewSlug] = useState('');\n  const [formError, setFormError] = useState('');\n  const [submitting, setSubmitting] = useState(false);\n  const [deleting, setDeleting] = useState<string | null>(null);\n\n  const handleCreate = async () => {\n    if (!newName.trim()) { setFormError('Name is required'); return; }\n    if (!newSlug.trim()) { setFormError('Slug is required'); return; }\n    setFormError('');\n    setSubmitting(true);\n    try {\n      const input: CreatePuckPageInput = {\n        name: newName.trim(),\n        slug: newSlug.trim().startsWith('/') ? newSlug.trim() : `/${newSlug.trim()}`,\n      };\n      const created = await createPage(input);\n      setCreating(false);\n      setNewName('');\n      setNewSlug('');\n      history.push(`/${created.key}/edit`, { pageName: created.value.name });\n    } catch (err) {\n      setFormError((err as Error).message);\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  const handleDelete = async (page: PuckPageListItem) => {\n    if (!confirm(`Delete \"${page.value.name}\"? This cannot be undone.`)) return;\n    setDeleting(page.key);\n    try {\n      await deletePage(page.key);\n      await refresh();\n    } finally {\n      setDeleting(null);\n    }\n  };\n\n  if (loading) {\n    return (\n      <div style={{ padding: '64px', display: 'flex', justifyContent: 'center' }}>\n        <LoadingSpinner />\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div style={{ padding: '32px' }}>\n        <Text.Body tone=\"negative\">Error: {error}</Text.Body>\n      </div>\n    );\n  }\n\n  const rows: PageRow[] = pages.map((p: PuckPageListItem) => ({ ...p, id: p.key }));\n\n  return (\n    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '32px 24px' }}>\n      <Spacings.Stack scale=\"l\">\n        <Spacings.Inline justifyContent=\"space-between\" alignItems=\"center\">\n          <Spacings.Inline scale=\"m\" alignItems=\"center\">\n            {backButton}\n            <Text.Headline as=\"h1\">Puck Pages</Text.Headline>\n          </Spacings.Inline>\n          <PrimaryButton\n            label=\"New Page\"\n            iconLeft={<PlusThinIcon />}\n            onClick={() => setCreating(true)}\n          />\n        </Spacings.Inline>\n\n        {creating && (\n          <Card insetScale=\"l\">\n            <Spacings.Stack scale=\"m\">\n              <Text.Subheadline as=\"h4\" isBold>Create New Page</Text.Subheadline>\n              <Spacings.Inline scale=\"m\">\n                <div style={{ flex: 1 }}>\n                  <Spacings.Stack scale=\"xs\">\n                    <Label htmlFor=\"new-page-name\">Name *</Label>\n                    <TextInput\n                      id=\"new-page-name\"\n                      value={newName}\n                      onChange={(e) => setNewName(e.target.value)}\n                      placeholder=\"Home Page\"\n                    />\n                  </Spacings.Stack>\n                </div>\n                <div style={{ flex: 1 }}>\n                  <Spacings.Stack scale=\"xs\">\n                    <Label htmlFor=\"new-page-slug\">Slug *</Label>\n                    <TextInput\n                      id=\"new-page-slug\"\n                      value={newSlug}\n                      onChange={(e) => setNewSlug(e.target.value)}\n                      placeholder=\"/home\"\n                    />\n                  </Spacings.Stack>\n                </div>\n              </Spacings.Inline>\n              {formError && <Text.Body tone=\"negative\">{formError}</Text.Body>}\n              <Spacings.Inline scale=\"s\">\n                <PrimaryButton\n                  label={submitting ? 'Creating…' : 'Create'}\n                  onClick={() => void handleCreate()}\n                  isDisabled={submitting}\n                />\n                <SecondaryButton\n                  label=\"Cancel\"\n                  onClick={() => { setCreating(false); setFormError(''); }}\n                />\n              </Spacings.Inline>\n            </Spacings.Stack>\n          </Card>\n        )}\n\n        {pages.length === 0 && !creating ? (\n          <Spacings.Stack scale=\"m\" alignItems=\"center\">\n            <Text.Body tone=\"secondary\">No pages yet.</Text.Body>\n            <PrimaryButton\n              label=\"Create first page\"\n              iconLeft={<PlusThinIcon />}\n              onClick={() => setCreating(true)}\n            />\n          </Spacings.Stack>\n        ) : pages.length > 0 ? (\n          <DataTable\n            columns={COLUMNS}\n            rows={rows}\n            itemRenderer={(row: PageRow, column) => {\n              switch (column.key) {\n                case 'name':\n                  return (\n                    <Spacings.Stack scale=\"xs\">\n                      <Text.Body isBold>{row.value.name}</Text.Body>\n                      <Text.Detail tone=\"secondary\">{row.key}</Text.Detail>\n                    </Spacings.Stack>\n                  );\n                case 'slug':\n                  return (\n                    <code\n                      style={{\n                        background: 'var(--color-neutral-95)',\n                        padding: '2px 6px',\n                        borderRadius: 'var(--border-radius-4)',\n                        fontSize: 'var(--font-size-10)',\n                        fontFamily: 'monospace',\n                      }}\n                    >\n                      {row.value.slug}\n                    </code>\n                  );\n                case 'status':\n                  return (\n                    <span>\n                      {row.states.draft && <StatusBadge variant=\"draft\" />}\n                      {row.states.published && <StatusBadge variant=\"published\" />}\n                      {!row.states.draft && !row.states.published && <StatusBadge variant=\"none\" />}\n                    </span>\n                  );\n                case 'updatedAt':\n                  return (\n                    <Text.Body tone=\"secondary\">\n                      {new Date(row.value.updatedAt).toLocaleString()}\n                    </Text.Body>\n                  );\n                case 'actions':\n                  return (\n                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n                      <PrimaryButton\n                        label=\"Edit\"\n                        size=\"20\"\n                        onClick={() =>\n                          history.push(`/${row.key}/edit`, { pageName: row.value.name })\n                        }\n                      />\n                      <SecondaryButton\n                        label=\"Preview\"\n                        size=\"20\"\n                        onClick={() =>\n                          history.push(`/${row.key}/preview`, { pageName: row.value.name })\n                        }\n                      />\n                      <FlatButton\n                        tone=\"critical\"\n                        label={deleting === row.key ? '…' : 'Delete'}\n                        isDisabled={deleting === row.key}\n                        onClick={() => void handleDelete(row)}\n                      />\n                    </div>\n                  );\n                default:\n                  return null;\n              }\n            }}\n          />\n        ) : null}\n      </Spacings.Stack>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// PageEditorRoute\n// ---------------------------------------------------------------------------\n\ninterface RouteProps {\n  config: Config;\n  backButton?: ReactNode;\n}\n\nconst PageEditorRoute: React.FC<RouteProps> = ({ config, backButton }) => {\n  const { pageKey } = useParams<{ pageKey: string }>();\n  const history = useHistory();\n  const location = useLocation();\n  const { baseURL, projectKey, businessUnitKey, jwtToken } = usePuckApiContext();\n  const pageName =\n    (location.state as { pageName?: string } | null)?.pageName ?? pageKey ?? 'Page';\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>\n      <div style={NAV_BAR_STYLE}>\n        {backButton}\n        {backButton && <Text.Body tone=\"secondary\">/</Text.Body>}\n        <FlatButton\n          label=\"Pages\"\n          icon={<AngleLeftIcon />}\n          iconPosition=\"left\"\n          onClick={() => history.push('/')}\n        />\n        <Text.Body tone=\"secondary\">/</Text.Body>\n        <Text.Body isBold>{pageName}</Text.Body>\n      </div>\n      <div style={{ flex: 1, overflow: 'hidden' }}>\n        <PuckEditor\n          baseURL={baseURL}\n          projectKey={projectKey}\n          businessUnitKey={businessUnitKey}\n          jwtToken={jwtToken ?? ''}\n          pageKey={pageKey!}\n          config={config}\n          onError={(err: Error) => { console.error('[PageManager] editor error:', err); }}\n        />\n      </div>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// PagePreviewRoute\n// ---------------------------------------------------------------------------\n\nconst PagePreviewRoute: React.FC<RouteProps> = ({ config, backButton }) => {\n  const { pageKey } = useParams<{ pageKey: string }>();\n  const history = useHistory();\n  const location = useLocation();\n  const pageName =\n    (location.state as { pageName?: string } | null)?.pageName ?? pageKey ?? 'Page';\n\n  return (\n    <div>\n      <div style={NAV_BAR_STYLE}>\n        {backButton}\n        {backButton && <Text.Body tone=\"secondary\">/</Text.Body>}\n        <FlatButton\n          label=\"Pages\"\n          icon={<AngleLeftIcon />}\n          iconPosition=\"left\"\n          onClick={() => history.push('/')}\n        />\n        <Text.Body tone=\"secondary\">/</Text.Body>\n        <Text.Body isBold>{pageName}</Text.Body>\n        <span\n          style={{\n            background: 'var(--color-primary-95)',\n            color: 'var(--color-primary-25)',\n            border: '1px solid var(--color-primary-85)',\n            display: 'inline-flex',\n            alignItems: 'center',\n            padding: '2px 10px',\n            borderRadius: 'var(--border-radius-20)',\n            fontSize: 'var(--font-size-10)',\n            fontWeight: 'var(--font-weight-600)',\n          }}\n        >\n          Preview\n        </span>\n      </div>\n      <PuckRenderer pageKey={pageKey} mode=\"preview\" config={config} />\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Inner router component\n// ---------------------------------------------------------------------------\n\ninterface PageManagerInnerProps {\n  config: Config;\n  backButton?: ReactNode;\n}\n\nconst PageManagerInner: React.FC<PageManagerInnerProps> = ({ config, backButton }) => (\n  <Switch>\n    <Route exact path=\"/\" render={() => <PageList backButton={backButton} />} />\n    <Route\n      path=\"/:pageKey/edit\"\n      render={() => <PageEditorRoute config={config} backButton={backButton} />}\n    />\n    <Route\n      path=\"/:pageKey/preview\"\n      render={() => <PagePreviewRoute config={config} backButton={backButton} />}\n    />\n  </Switch>\n);\n\n// ---------------------------------------------------------------------------\n// Public component\n// ---------------------------------------------------------------------------\n\nexport interface PageManagerProps {\n  /** URL path where this manager is mounted, e.g. \"/pages\" — used as router basename */\n  parentUrl: string;\n  baseURL: string;\n  projectKey: string;\n  businessUnitKey: string;\n  jwtToken: string;\n  /** Puck component config — passed to editor and preview */\n  config: Config;\n  /** Optional element rendered before the breadcrumb in editor/preview headers */\n  backButton?: ReactNode;\n}\n\nexport const PageManager: React.FC<PageManagerProps> = ({\n  parentUrl,\n  baseURL,\n  projectKey,\n  businessUnitKey,\n  jwtToken,\n  config,\n  backButton,\n}) => (\n  <PuckApiProvider\n    baseURL={baseURL}\n    projectKey={projectKey}\n    businessUnitKey={businessUnitKey}\n    jwtToken={jwtToken}\n  >\n    <BrowserRouter basename={parentUrl}>\n      <PageManagerInner config={config} backButton={backButton} />\n    </BrowserRouter>\n  </PuckApiProvider>\n);\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/PageManager.tsx"],"sourcesContent":["import React, { useState, type ReactNode } from 'react';\nimport {\n  BrowserRouter,\n  Switch,\n  Route,\n  useHistory,\n  useParams,\n  useLocation,\n} from 'react-router-dom';\nimport {\n  PuckApiProvider,\n  usePuckPages,\n  usePuckApiContext,\n} from '@commercetools-demo/puck-api';\nimport { PuckEditor, defaultPuckConfig } from '@commercetools-demo/puck-editor';\nimport { PuckRenderer } from '@commercetools-demo/puck-renderer';\n\nconst DEFAULT_CONFIG: Config = {\n  ...defaultPuckConfig,\n  components: { ...defaultPuckConfig.components },\n};\nimport type { Config } from '@measured/puck';\nimport type { CreatePuckPageInput, PuckPageListItem } from '@commercetools-demo/puck-types';\nimport DataTable from '@commercetools-uikit/data-table';\nimport PrimaryButton from '@commercetools-uikit/primary-button';\nimport SecondaryButton from '@commercetools-uikit/secondary-button';\nimport FlatButton from '@commercetools-uikit/flat-button';\nimport Card from '@commercetools-uikit/card';\nimport Spacings from '@commercetools-uikit/spacings';\nimport Text from '@commercetools-uikit/text';\nimport LoadingSpinner from '@commercetools-uikit/loading-spinner';\nimport TextInput from '@commercetools-uikit/text-input';\nimport Label from '@commercetools-uikit/label';\nimport { PlusThinIcon, AngleLeftIcon } from '@commercetools-uikit/icons';\n\n// ---------------------------------------------------------------------------\n// Status badge\n// ---------------------------------------------------------------------------\n\nconst StatusBadge: React.FC<{ variant: 'draft' | 'published' | 'none' }> = ({ variant }) => {\n  const styles: React.CSSProperties =\n    variant === 'published'\n      ? { background: 'var(--color-success-95)', color: 'var(--color-success-40)', border: '1px solid var(--color-success-85)' }\n      : variant === 'draft'\n        ? { background: 'var(--color-warning-95)', color: 'var(--color-warning-40)', border: '1px solid var(--color-warning-85)' }\n        : { background: 'var(--color-neutral-95)', color: 'var(--color-neutral-50)', border: '1px solid var(--color-neutral-85)' };\n  return (\n    <span\n      style={{\n        ...styles,\n        display: 'inline-flex',\n        alignItems: 'center',\n        padding: '2px 8px',\n        borderRadius: 'var(--border-radius-20)',\n        fontSize: 'var(--font-size-10)',\n        fontWeight: 'var(--font-weight-600)',\n        marginRight: '4px',\n        whiteSpace: 'nowrap',\n      }}\n    >\n      {variant === 'published' ? 'Published' : variant === 'draft' ? 'Draft' : 'No state'}\n    </span>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Shared nav bar style\n// ---------------------------------------------------------------------------\n\nconst NAV_BAR_STYLE: React.CSSProperties = {\n  position: 'sticky',\n  top: 0,\n  display: 'flex',\n  alignItems: 'center',\n  gap: '12px',\n  padding: '8px 16px',\n  background: 'var(--color-surface, #fff)',\n  borderBottom: '1px solid var(--color-neutral-90)',\n  zIndex: 200,\n  flexShrink: 0,\n};\n\n// ---------------------------------------------------------------------------\n// Table columns\n// ---------------------------------------------------------------------------\n\ntype PageRow = PuckPageListItem & { id: string };\n\nconst COLUMNS = [\n  { key: 'name', label: 'Name' },\n  { key: 'slug', label: 'Slug' },\n  { key: 'status', label: 'Status' },\n  { key: 'updatedAt', label: 'Updated' },\n  { key: 'actions', label: 'Actions', shouldIgnoreRowClick: true },\n];\n\n// ---------------------------------------------------------------------------\n// PageList route\n// ---------------------------------------------------------------------------\n\ninterface PageListProps {\n  backButton?: ReactNode;\n}\n\nconst PageList: React.FC<PageListProps> = ({ backButton }) => {\n  const history = useHistory();\n  const { pages, loading, error, createPage, deletePage, refresh } = usePuckPages();\n\n  const [creating, setCreating] = useState(false);\n  const [newName, setNewName] = useState('');\n  const [newSlug, setNewSlug] = useState('');\n  const [formError, setFormError] = useState('');\n  const [submitting, setSubmitting] = useState(false);\n  const [deleting, setDeleting] = useState<string | null>(null);\n\n  const handleCreate = async () => {\n    if (!newName.trim()) { setFormError('Name is required'); return; }\n    if (!newSlug.trim()) { setFormError('Slug is required'); return; }\n    setFormError('');\n    setSubmitting(true);\n    try {\n      const input: CreatePuckPageInput = {\n        name: newName.trim(),\n        slug: newSlug.trim().startsWith('/') ? newSlug.trim() : `/${newSlug.trim()}`,\n      };\n      const created = await createPage(input);\n      setCreating(false);\n      setNewName('');\n      setNewSlug('');\n      history.push(`/${created.key}/edit`, { pageName: created.value.name });\n    } catch (err) {\n      setFormError((err as Error).message);\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  const handleDelete = async (page: PuckPageListItem) => {\n    if (!confirm(`Delete \"${page.value.name}\"? This cannot be undone.`)) return;\n    setDeleting(page.key);\n    try {\n      await deletePage(page.key);\n      await refresh();\n    } finally {\n      setDeleting(null);\n    }\n  };\n\n  if (loading) {\n    return (\n      <div style={{ padding: '64px', display: 'flex', justifyContent: 'center' }}>\n        <LoadingSpinner />\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div style={{ padding: '32px' }}>\n        <Text.Body tone=\"negative\">Error: {error}</Text.Body>\n      </div>\n    );\n  }\n\n  const rows: PageRow[] = pages.map((p: PuckPageListItem) => ({ ...p, id: p.key }));\n\n  return (\n    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '32px 24px' }}>\n      <Spacings.Stack scale=\"l\">\n        <Spacings.Inline justifyContent=\"space-between\" alignItems=\"center\">\n          <Spacings.Inline scale=\"m\" alignItems=\"center\">\n            {backButton}\n            <Text.Headline as=\"h1\">Puck Pages</Text.Headline>\n          </Spacings.Inline>\n          <PrimaryButton\n            label=\"New Page\"\n            iconLeft={<PlusThinIcon />}\n            onClick={() => setCreating(true)}\n          />\n        </Spacings.Inline>\n\n        {creating && (\n          <Card insetScale=\"l\">\n            <Spacings.Stack scale=\"m\">\n              <Text.Subheadline as=\"h4\" isBold>Create New Page</Text.Subheadline>\n              <Spacings.Inline scale=\"m\">\n                <div style={{ flex: 1 }}>\n                  <Spacings.Stack scale=\"xs\">\n                    <Label htmlFor=\"new-page-name\">Name *</Label>\n                    <TextInput\n                      id=\"new-page-name\"\n                      value={newName}\n                      onChange={(e) => setNewName(e.target.value)}\n                      placeholder=\"Home Page\"\n                    />\n                  </Spacings.Stack>\n                </div>\n                <div style={{ flex: 1 }}>\n                  <Spacings.Stack scale=\"xs\">\n                    <Label htmlFor=\"new-page-slug\">Slug *</Label>\n                    <TextInput\n                      id=\"new-page-slug\"\n                      value={newSlug}\n                      onChange={(e) => setNewSlug(e.target.value)}\n                      placeholder=\"/home\"\n                    />\n                  </Spacings.Stack>\n                </div>\n              </Spacings.Inline>\n              {formError && <Text.Body tone=\"negative\">{formError}</Text.Body>}\n              <Spacings.Inline scale=\"s\">\n                <PrimaryButton\n                  label={submitting ? 'Creating…' : 'Create'}\n                  onClick={() => void handleCreate()}\n                  isDisabled={submitting}\n                />\n                <SecondaryButton\n                  label=\"Cancel\"\n                  onClick={() => { setCreating(false); setFormError(''); }}\n                />\n              </Spacings.Inline>\n            </Spacings.Stack>\n          </Card>\n        )}\n\n        {pages.length === 0 && !creating ? (\n          <Spacings.Stack scale=\"m\" alignItems=\"center\">\n            <Text.Body tone=\"secondary\">No pages yet.</Text.Body>\n            <PrimaryButton\n              label=\"Create first page\"\n              iconLeft={<PlusThinIcon />}\n              onClick={() => setCreating(true)}\n            />\n          </Spacings.Stack>\n        ) : pages.length > 0 ? (\n          <DataTable\n            columns={COLUMNS}\n            rows={rows}\n            itemRenderer={(row: PageRow, column) => {\n              switch (column.key) {\n                case 'name':\n                  return (\n                    <Spacings.Stack scale=\"xs\">\n                      <Text.Body isBold>{row.value.name}</Text.Body>\n                      <Text.Detail tone=\"secondary\">{row.key}</Text.Detail>\n                    </Spacings.Stack>\n                  );\n                case 'slug':\n                  return (\n                    <code\n                      style={{\n                        background: 'var(--color-neutral-95)',\n                        padding: '2px 6px',\n                        borderRadius: 'var(--border-radius-4)',\n                        fontSize: 'var(--font-size-10)',\n                        fontFamily: 'monospace',\n                      }}\n                    >\n                      {row.value.slug}\n                    </code>\n                  );\n                case 'status':\n                  return (\n                    <span>\n                      {row.states.draft && <StatusBadge variant=\"draft\" />}\n                      {row.states.published && <StatusBadge variant=\"published\" />}\n                      {!row.states.draft && !row.states.published && <StatusBadge variant=\"none\" />}\n                    </span>\n                  );\n                case 'updatedAt':\n                  return (\n                    <Text.Body tone=\"secondary\">\n                      {new Date(row.value.updatedAt).toLocaleString()}\n                    </Text.Body>\n                  );\n                case 'actions':\n                  return (\n                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n                      <PrimaryButton\n                        label=\"Edit\"\n                        size=\"20\"\n                        onClick={() =>\n                          history.push(`/${row.key}/edit`, { pageName: row.value.name })\n                        }\n                      />\n                      <SecondaryButton\n                        label=\"Preview\"\n                        size=\"20\"\n                        onClick={() =>\n                          history.push(`/${row.key}/preview`, { pageName: row.value.name })\n                        }\n                      />\n                      <FlatButton\n                        tone=\"critical\"\n                        label={deleting === row.key ? '…' : 'Delete'}\n                        isDisabled={deleting === row.key}\n                        onClick={() => void handleDelete(row)}\n                      />\n                    </div>\n                  );\n                default:\n                  return null;\n              }\n            }}\n          />\n        ) : null}\n      </Spacings.Stack>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// PageEditorRoute\n// ---------------------------------------------------------------------------\n\ninterface RouteProps {\n  config: Config;\n  backButton?: ReactNode;\n}\n\nconst PageEditorRoute: React.FC<RouteProps> = ({ config, backButton }) => {\n  const { pageKey } = useParams<{ pageKey: string }>();\n  const history = useHistory();\n  const location = useLocation();\n  const { baseURL, projectKey, businessUnitKey, jwtToken } = usePuckApiContext();\n  const pageName =\n    (location.state as { pageName?: string } | null)?.pageName ?? pageKey ?? 'Page';\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>\n      <div style={NAV_BAR_STYLE}>\n        {backButton}\n        {backButton && <Text.Body tone=\"secondary\">/</Text.Body>}\n        <FlatButton\n          label=\"Pages\"\n          icon={<AngleLeftIcon />}\n          iconPosition=\"left\"\n          onClick={() => history.push('/')}\n        />\n        <Text.Body tone=\"secondary\">/</Text.Body>\n        <Text.Body isBold>{pageName}</Text.Body>\n      </div>\n      <div style={{ flex: 1, overflow: 'hidden' }}>\n        <PuckEditor\n          baseURL={baseURL}\n          projectKey={projectKey}\n          businessUnitKey={businessUnitKey}\n          jwtToken={jwtToken ?? ''}\n          pageKey={pageKey!}\n          config={config}\n          onError={(err: Error) => { console.error('[PageManager] editor error:', err); }}\n        />\n      </div>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// PagePreviewRoute\n// ---------------------------------------------------------------------------\n\nconst PagePreviewRoute: React.FC<RouteProps> = ({ config, backButton }) => {\n  const { pageKey } = useParams<{ pageKey: string }>();\n  const history = useHistory();\n  const location = useLocation();\n  const pageName =\n    (location.state as { pageName?: string } | null)?.pageName ?? pageKey ?? 'Page';\n\n  return (\n    <div>\n      <div style={NAV_BAR_STYLE}>\n        {backButton}\n        {backButton && <Text.Body tone=\"secondary\">/</Text.Body>}\n        <FlatButton\n          label=\"Pages\"\n          icon={<AngleLeftIcon />}\n          iconPosition=\"left\"\n          onClick={() => history.push('/')}\n        />\n        <Text.Body tone=\"secondary\">/</Text.Body>\n        <Text.Body isBold>{pageName}</Text.Body>\n        <span\n          style={{\n            background: 'var(--color-primary-95)',\n            color: 'var(--color-primary-25)',\n            border: '1px solid var(--color-primary-85)',\n            display: 'inline-flex',\n            alignItems: 'center',\n            padding: '2px 10px',\n            borderRadius: 'var(--border-radius-20)',\n            fontSize: 'var(--font-size-10)',\n            fontWeight: 'var(--font-weight-600)',\n          }}\n        >\n          Preview\n        </span>\n      </div>\n      <PuckRenderer pageKey={pageKey} mode=\"preview\" config={config} />\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Inner router component\n// ---------------------------------------------------------------------------\n\ninterface PageManagerInnerProps {\n  config: Config;\n  backButton?: ReactNode;\n}\n\nconst PageManagerInner: React.FC<PageManagerInnerProps> = ({ config, backButton }) => (\n  <Switch>\n    <Route exact path=\"/\" render={() => <PageList backButton={backButton} />} />\n    <Route\n      path=\"/:pageKey/edit\"\n      render={() => <PageEditorRoute config={config} backButton={backButton} />}\n    />\n    <Route\n      path=\"/:pageKey/preview\"\n      render={() => <PagePreviewRoute config={config} backButton={backButton} />}\n    />\n  </Switch>\n);\n\n// ---------------------------------------------------------------------------\n// Public component\n// ---------------------------------------------------------------------------\n\nexport interface PageManagerProps {\n  /** URL path where this manager is mounted, e.g. \"/pages\" — used as router basename */\n  parentUrl: string;\n  baseURL: string;\n  projectKey: string;\n  businessUnitKey: string;\n  jwtToken: string;\n  /** Puck component config — passed to editor and preview. Defaults to defaultPuckConfig. */\n  config?: Config;\n  /** Optional element rendered before the breadcrumb in editor/preview headers */\n  backButton?: ReactNode;\n}\n\nexport const PageManager: React.FC<PageManagerProps> = ({\n  parentUrl,\n  baseURL,\n  projectKey,\n  businessUnitKey,\n  jwtToken,\n  config = DEFAULT_CONFIG,\n  backButton,\n}) => (\n  <PuckApiProvider\n    baseURL={baseURL}\n    projectKey={projectKey}\n    businessUnitKey={businessUnitKey}\n    jwtToken={jwtToken}\n  >\n    <BrowserRouter basename={parentUrl}>\n      <PageManagerInner config={config} backButton={backButton} />\n    </BrowserRouter>\n  </PuckApiProvider>\n);\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-demo/puck-page-manager",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Router-aware page manager UI (list, editor, preview) for the Puck CMS integration",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -25,10 +25,10 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@commercetools-demo/puck-api": "^0.2.1",
-    "@commercetools-demo/puck-editor": "^0.2.1",
-    "@commercetools-demo/puck-renderer": "^0.2.1",
-    "@commercetools-demo/puck-types": "^0.2.1",
+    "@commercetools-demo/puck-api": "^0.3.0",
+    "@commercetools-demo/puck-editor": "^0.3.0",
+    "@commercetools-demo/puck-renderer": "^0.3.0",
+    "@commercetools-demo/puck-types": "^0.3.0",
     "@commercetools-uikit/card": "^20.5.0",
     "@commercetools-uikit/data-table": "^20.5.0",
     "@commercetools-uikit/flat-button": "^20.5.0",