simple-module-pagebuilder 0.0.1__py3-none-any.whl

pagebuilder/pages/MediaLibrary.tsx

@@ -0,0 +1,249 @@
+import { router, usePage } from '@inertiajs/react';
+import { PageShell } from '@simple-module-py/ui/components/PageShell';
+import { AuthenticatedLayout } from '@simple-module-py/ui/layouts/AuthenticatedLayout';
+import type React from 'react';
+import {
+  type ChangeEvent,
+  type DragEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { MediaFilters } from '../components/media/MediaFilters';
+import { MediaFolderSidebar } from '../components/media/MediaFolderSidebar';
+import { MediaGrid } from '../components/media/MediaGrid';
+import { MediaHeader } from '../components/media/MediaHeader';
+import { MediaDropzone, MediaUploadQueue } from '../components/media/MediaUploadQueue';
+import type { ListFilters } from '../components/media/types';
+import { useMediaUploads } from '../hooks/useMediaUploads';
+import {
+  deleteMedia,
+  listMedia,
+  type MediaAssetRead,
+  type MediaListResponse,
+  uploadMedia,
+} from '../utils/api';
+import { parseKB } from '../utils/mediaFormat';
+
+interface Props {
+  initial: MediaListResponse;
+}
+
+const PAGE_LIMIT = 60;
+
+export default function MediaLibrary() {
+  const { initial } = usePage<{ props: Props }>().props as unknown as Props;
+
+  const [assets, setAssets] = useState<MediaAssetRead[]>(initial.items);
+  const [nextCursor, setNextCursor] = useState<number | null>(initial.next_cursor);
+  const [folders, setFolders] = useState<string[]>(initial.folders);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+  const [copied, setCopied] = useState<number | null>(null);
+  const [filters, setFilters] = useState<ListFilters>({
+    search: '',
+    contentType: '',
+    folder: null,
+    minKB: '',
+    maxKB: '',
+  });
+  const [uploadFolder, setUploadFolder] = useState<string>('');
+  const [dragActive, setDragActive] = useState(false);
+
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  // Debounced search: state holds what the user is typing, `query`
+  // holds what we actually send to the server.
+  const [query, setQuery] = useState<string>('');
+  useEffect(() => {
+    const t = window.setTimeout(() => setQuery(filters.search.trim()), 250);
+    return () => window.clearTimeout(t);
+  }, [filters.search]);
+
+  const refresh = useCallback(
+    async (mode: 'replace' | 'append' = 'replace', cursor?: number | null) => {
+      const isAppend = mode === 'append';
+      if (isAppend) {
+        setLoadingMore(true);
+      } else {
+        setLoading(true);
+      }
+      try {
+        const response = await listMedia({
+          search: query || undefined,
+          content_type: filters.contentType || undefined,
+          folder: filters.folder === null ? undefined : filters.folder,
+          min_size_bytes: parseKB(filters.minKB),
+          max_size_bytes: parseKB(filters.maxKB),
+          cursor: cursor ?? undefined,
+          limit: PAGE_LIMIT,
+        });
+        setAssets((prev) => (isAppend ? [...prev, ...response.items] : response.items));
+        setNextCursor(response.next_cursor);
+        setFolders(response.folders);
+      } catch (e) {
+        setMessage(e instanceof Error ? e.message : 'Failed to load media');
+      } finally {
+        if (isAppend) setLoadingMore(false);
+        else setLoading(false);
+      }
+    },
+    [filters.contentType, filters.folder, filters.maxKB, filters.minKB, query],
+  );
+
+  // Reload from the server whenever a filter or the debounced query
+  // changes. We deliberately skip the initial mount (the server already
+  // gave us page 1 in props) to avoid a flash of duplicate work.
+  const didMountRef = useRef(false);
+  useEffect(() => {
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      return;
+    }
+    void refresh('replace');
+  }, [refresh]);
+
+  const folderOptions = useMemo(() => {
+    const set = new Set(folders);
+    if (uploadFolder.trim()) set.add(uploadFolder.trim());
+    return Array.from(set).sort();
+  }, [folders, uploadFolder]);
+
+  const handleDelete = async (id: number) => {
+    if (!confirm('Delete this asset? Pages using its URL will break.')) return;
+    try {
+      await deleteMedia(id);
+      setAssets((prev) => prev.filter((a) => a.id !== id));
+    } catch (e) {
+      setMessage(e instanceof Error ? e.message : 'Delete failed');
+    }
+  };
+
+  const handleCopy = async (asset: MediaAssetRead) => {
+    try {
+      await navigator.clipboard.writeText(asset.url);
+      setCopied(asset.id);
+      setTimeout(() => setCopied((c) => (c === asset.id ? null : c)), 1500);
+    } catch {
+      setMessage('Copy failed — select the URL manually.');
+    }
+  };
+
+  // Splice a freshly uploaded asset into the visible list when it matches the
+  // active filter; otherwise it appears when the user switches to that folder.
+  const handleUploaded = useCallback(
+    (asset: MediaAssetRead) => {
+      const matchesActiveFolder =
+        filters.folder === null ||
+        (filters.folder === '' && !asset.folder) ||
+        filters.folder === asset.folder;
+      if (matchesActiveFolder) {
+        setAssets((prev) => [asset, ...prev]);
+      }
+      if (asset.folder) {
+        setFolders((prev) =>
+          prev.includes(asset.folder as string)
+            ? prev
+            : Array.from(new Set([...prev, asset.folder as string])).sort(),
+        );
+      }
+    },
+    [filters.folder],
+  );
+
+  const { uploads, startUploads, dismissUpload } = useMediaUploads({
+    uploadFolder,
+    onUploaded: handleUploaded,
+    setMessage,
+  });
+
+  const onFileInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const list = e.target.files ? Array.from(e.target.files) : [];
+    if (fileInputRef.current) fileInputRef.current.value = '';
+    startUploads(list);
+  };
+
+  const onDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDragActive(false);
+    const files = e.dataTransfer.files ? Array.from(e.dataTransfer.files) : [];
+    startUploads(files);
+  };
+
+  const activeFolderLabel = (() => {
+    if (filters.folder === null) return 'All assets';
+    if (filters.folder === '') return 'Unfiled';
+    return filters.folder;
+  })();
+
+  return (
+    <PageShell
+      title="Media library"
+      description="Images available to every page."
+      maxWidth="full"
+      actions={<MediaHeader fileInputRef={fileInputRef} onFilesSelected={onFileInputChange} />}
+    >
+      <div className="grid grid-cols-1 md:grid-cols-[220px_1fr] gap-6">
+        <MediaFolderSidebar
+          folders={folders}
+          folderOptions={folderOptions}
+          activeFolder={filters.folder}
+          onSelectFolder={(folder) => setFilters((f) => ({ ...f, folder }))}
+          uploadFolder={uploadFolder}
+          onUploadFolderChange={setUploadFolder}
+        />
+
+        <section>
+          <MediaFilters filters={filters} onChange={setFilters} />
+
+          <div className="text-sm text-gray-500 mb-2">
+            Browsing <strong>{activeFolderLabel}</strong>
+            {loading && <span className="ml-2">Loading…</span>}
+          </div>
+
+          {message && (
+            <div className="mb-4 text-sm text-gray-700 bg-yellow-50 border border-yellow-200 px-3 py-2 rounded">
+              {message}
+            </div>
+          )}
+
+          <MediaDropzone
+            uploadFolder={uploadFolder}
+            dragActive={dragActive}
+            onDragActiveChange={setDragActive}
+            onDrop={onDrop}
+          />
+
+          <MediaUploadQueue uploads={uploads} onDismiss={dismissUpload} />
+
+          <MediaGrid
+            assets={assets}
+            loading={loading}
+            copiedId={copied}
+            onCopy={handleCopy}
+            onDelete={handleDelete}
+          />
+
+          {nextCursor !== null && (
+            <div className="mt-6 flex justify-center">
+              <button
+                type="button"
+                disabled={loadingMore}
+                onClick={() => void refresh('append', nextCursor)}
+                className="px-4 py-2 rounded border hover:bg-gray-50 text-sm disabled:opacity-50"
+              >
+                {loadingMore ? 'Loading…' : 'Load more'}
+              </button>
+            </div>
+          )}
+        </section>
+      </div>
+    </PageShell>
+  );
+}
+
+MediaLibrary.layout = (page: React.ReactNode) => <AuthenticatedLayout>{page}</AuthenticatedLayout>;

pagebuilder/pages/PageEditor.tsx

@@ -0,0 +1,181 @@
+import { type Data, Puck } from '@puckeditor/core';
+import '@puckeditor/core/puck.css';
+import { usePage } from '@inertiajs/react';
+import { BrandingHead } from '@simple-module-py/ui/components/BrandingHead';
+import { useState } from 'react';
+
+import { PageEditorToolbar } from '../components/editor/PageEditorToolbar';
+import { RevisionHistoryPanel } from '../components/editor/RevisionHistoryPanel';
+import { SchedulePanel } from '../components/editor/SchedulePanel';
+import { SeoSettingsPanel } from '../components/editor/SeoSettingsPanel';
+import { migrateContent } from '../components/migrateContent';
+import { editorViewports, emptyData, getPuckConfig } from '../components/puckConfig';
+import { useAutosave } from '../hooks/useAutosave';
+import { useEditorForm } from '../hooks/useEditorForm';
+import { usePageRevisions } from '../hooks/usePageRevisions';
+import { usePageSchedule } from '../hooks/usePageSchedule';
+import { usePageWorkflow } from '../hooks/usePageWorkflow';
+import type { PageDetail, PageRevisionRead } from '../utils/api';
+import type { EditorSnapshot } from '../utils/editorSnapshot';
+
+interface Props {
+  page: PageDetail | null;
+  revisions: PageRevisionRead[];
+}
+
+function initialSnapshotFor(page: PageDetail | null): EditorSnapshot {
+  return {
+    title: page?.title ?? 'Untitled page',
+    slug: page?.slug ?? '',
+    metaDescription: page?.meta_description ?? '',
+    ogImage: page?.og_image ?? '',
+    canonicalUrl: page?.canonical_url ?? '',
+    indexInSearch: page?.index_in_search ?? true,
+    jsonLdText: page?.json_ld ? JSON.stringify(page.json_ld, null, 2) : '',
+    // Migrated on the way in rather than on save: a draft the author never
+    // touches is never rewritten, so the stored payload only changes shape
+    // once they actually edit it.
+    data: migrateContent(
+      (page?.draft_data as unknown as Data) || (emptyData as unknown as Data),
+      getPuckConfig(),
+    ),
+  };
+}
+
+export default function PageEditor() {
+  const props = usePage<{ props: Props }>().props as unknown as Props;
+  const { page } = props;
+  const revisions = props.revisions ?? [];
+  // ``rejection_note`` lives on the page prop and refreshes after every
+  // partial reload — no separate state slot needed.
+  const rejectionNote = page?.rejection_note ?? null;
+
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+  const [showSettings, setShowSettings] = useState(false);
+  const [showHistory, setShowHistory] = useState(false);
+
+  const form = useEditorForm(page);
+
+  const { isDirty, saveState, lastSavedAt, autosaveError, markSaved } = useAutosave({
+    pageId: form.pageId,
+    busy,
+    data: form.data,
+    snapshotPayload: form.snapshotPayload,
+    initialSnapshot: initialSnapshotFor(page),
+    writePayload: form.writePayload,
+  });
+
+  const workflow = usePageWorkflow({ form, setBusy, setMessage, markSaved });
+  const schedule = usePageSchedule({ form, setBusy, setMessage });
+  const revisionActions = usePageRevisions({ form, setBusy, setMessage, markSaved });
+
+  return (
+    <div className="h-screen flex flex-col">
+      {/* These editors render their own full-screen shell instead of
+          AuthenticatedLayout, so nothing else mounts BrandingHead for them —
+          and the preview would show the framework's default action colour
+          while the published page shows the configured one. */}
+      <BrandingHead />
+      <PageEditorToolbar
+        pageId={form.pageId}
+        title={form.title}
+        onTitleChange={form.setTitle}
+        effectiveSlug={form.effectiveSlug}
+        onSlugChange={(value) => {
+          form.setSlug(value);
+          form.setSlugTouched(true);
+        }}
+        status={form.status}
+        publishAt={form.publishAt}
+        unpublishAt={form.unpublishAt}
+        saveState={saveState}
+        isDirty={isDirty}
+        lastSavedAt={lastSavedAt}
+        autosaveError={autosaveError}
+        revisionCount={revisions.length}
+        busy={busy}
+        message={message}
+        onToggleSettings={() => setShowSettings((v) => !v)}
+        onToggleHistory={() => setShowHistory((v) => !v)}
+        onSave={() => workflow.handleSave(form.data)}
+        onPublish={workflow.handlePublish}
+        onUnpublish={workflow.handleUnpublish}
+        onSubmitForReview={workflow.handleSubmitForReview}
+        onApprove={workflow.handleApprove}
+        onReject={workflow.handleReject}
+      />
+
+      {rejectionNote && form.status === 'draft' && (
+        <div className="border-b bg-red-50 px-4 py-3 text-sm text-red-800">
+          <strong>Rejected:</strong> {rejectionNote}
+        </div>
+      )}
+
+      {showSettings && (
+        <SeoSettingsPanel
+          metaDescription={form.metaDescription}
+          onMetaDescriptionChange={form.setMetaDescription}
+          ogImage={form.ogImage}
+          onOgImageChange={form.setOgImage}
+          canonicalUrl={form.canonicalUrl}
+          onCanonicalUrlChange={form.setCanonicalUrl}
+          indexInSearch={form.indexInSearch}
+          onIndexInSearchChange={form.setIndexInSearch}
+          jsonLdText={form.jsonLdText}
+          jsonLdError={form.jsonLdError}
+          onJsonLdChange={form.handleJsonLdChange}
+          schedule={
+            <SchedulePanel
+              publishAt={form.publishAt}
+              unpublishAt={form.unpublishAt}
+              onPublishAtChange={form.setPublishAt}
+              onUnpublishAtChange={form.setUnpublishAt}
+              onSave={schedule.handleSaveSchedule}
+              onClear={schedule.handleClearSchedule}
+              saveDisabled={busy || form.pageId === null}
+              clearDisabled={
+                busy ||
+                form.pageId === null ||
+                (form.publishAt === null && form.unpublishAt === null)
+              }
+              error={schedule.scheduleError}
+            />
+          }
+        />
+      )}
+
+      {showHistory && (
+        <RevisionHistoryPanel
+          revisions={revisions}
+          activeDiff={revisionActions.activeDiff}
+          diffError={revisionActions.diffError}
+          busy={busy}
+          onCompare={revisionActions.handleCompare}
+          onRestore={revisionActions.handleRestore}
+        />
+      )}
+
+      <div className="flex-1 min-h-0">
+        <Puck
+          config={getPuckConfig()}
+          data={form.data}
+          viewports={editorViewports}
+          iframe={{ enabled: true }}
+          // Puck's header renders its own primary "Publish" alongside a copy of
+          // the page title. Its Publish was wired to a draft save, so the app
+          // showed two identical blue Publish buttons where the louder one did
+          // the quieter thing. Dropping headerActions leaves the toolbar above
+          // as the only publish control; the title, undo/redo and the sidebar
+          // toggles stay in Puck's header.
+          //
+          // Note for anyone auditing selectors: Puck renders that button as a
+          // <span>, not a <button>, so it never appeared in the accessibility
+          // tree and the e2e suite could not have caught this.
+          overrides={{ headerActions: () => <></> }}
+          onChange={form.setData}
+        />
+      </div>
+    </div>
+  );
+}

pagebuilder/pages/PageList.tsx

@@ -0,0 +1,129 @@
+import { router, usePage } from '@inertiajs/react';
+import { PageShell } from '@simple-module-py/ui/components/PageShell';
+import { Button } from '@simple-module-py/ui/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@simple-module-py/ui/components/ui/table';
+import { AuthenticatedLayout } from '@simple-module-py/ui/layouts/AuthenticatedLayout';
+import type React from 'react';
+import { useState } from 'react';
+
+import { ScheduledBadge } from '../components/ScheduledBadge';
+import { StatusBadge } from '../components/StatusBadge';
+import { deletePage, type PageRead } from '../utils/api';
+
+interface Props {
+  pages: { items: PageRead[] };
+}
+
+export default function PageList() {
+  const { pages } = usePage<{ props: Props }>().props as unknown as Props;
+  const [busy, setBusy] = useState<number | null>(null);
+
+  const handleDelete = async (id: number) => {
+    if (!confirm('Delete this page?')) return;
+    setBusy(id);
+    try {
+      await deletePage(id);
+      router.reload({ only: ['pages'] });
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <PageShell
+      title="Pages"
+      description="Compose, review, and publish site pages."
+      actions={
+        <>
+          <Button variant="outline" onClick={() => router.visit('/pagebuilder/pending')}>
+            Pending review
+          </Button>
+          <Button variant="outline" onClick={() => router.visit('/pagebuilder/layout')}>
+            Site layout
+          </Button>
+          <Button variant="outline" onClick={() => router.visit('/pagebuilder/media')}>
+            Media library
+          </Button>
+          <Button onClick={() => router.visit('/pagebuilder/new')}>New page</Button>
+        </>
+      }
+    >
+      {pages.items.length === 0 ? (
+        <div className="rounded-lg border border-dashed p-8 text-center text-muted-foreground">
+          No pages yet. Click "New page" to create your first one.
+        </div>
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Title</TableHead>
+              <TableHead>Slug</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Updated</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {pages.items.map((p) => (
+              <TableRow key={p.id}>
+                <TableCell className="font-medium">{p.title}</TableCell>
+                <TableCell className="font-mono text-sm text-muted-foreground">{p.slug}</TableCell>
+                <TableCell>
+                  <span className="flex flex-wrap items-center gap-1.5">
+                    <StatusBadge status={p.status} />
+                    <ScheduledBadge
+                      status={p.status}
+                      publishAt={p.publish_at}
+                      unpublishAt={p.unpublish_at}
+                    />
+                  </span>
+                </TableCell>
+                <TableCell className="text-sm text-muted-foreground">
+                  {p.updated_at ? new Date(p.updated_at).toLocaleString() : '—'}
+                </TableCell>
+                <TableCell className="space-x-1 text-right">
+                  {/* Stays an <a>: the e2e selects it with getByRole('link'). */}
+                  {p.status === 'published' && (
+                    <a
+                      href={`/p/${p.slug}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-sm text-primary hover:underline"
+                    >
+                      View
+                    </a>
+                  )}
+                  <Button
+                    variant="link"
+                    size="sm"
+                    onClick={() => router.visit(`/pagebuilder/${p.id}/edit`)}
+                  >
+                    Edit
+                  </Button>
+                  <Button
+                    variant="link"
+                    size="sm"
+                    className="text-destructive"
+                    disabled={busy === p.id}
+                    onClick={() => handleDelete(p.id)}
+                  >
+                    Delete
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </PageShell>
+  );
+}
+
+PageList.layout = (page: React.ReactNode) => <AuthenticatedLayout>{page}</AuthenticatedLayout>;

pagebuilder/pages/PendingReview.tsx

@@ -0,0 +1,128 @@
+import { router, usePage } from '@inertiajs/react';
+import { PageShell } from '@simple-module-py/ui/components/PageShell';
+import { Button } from '@simple-module-py/ui/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@simple-module-py/ui/components/ui/table';
+import { AuthenticatedLayout } from '@simple-module-py/ui/layouts/AuthenticatedLayout';
+import type React from 'react';
+import { useState } from 'react';
+
+import { approvePage, type PageRead, promptAndReject } from '../utils/api';
+
+interface Props {
+  pages: { items: PageRead[] };
+}
+
+/**
+ * Approver-only queue showing pages currently in
+ * ``submitted_for_review``. Approve takes the page live; reject sends
+ * it back to draft with a required rationale (surfaced to editors in
+ * the editor header + history panel).
+ */
+export default function PendingReview() {
+  const { pages } = usePage<{ props: Props }>().props as unknown as Props;
+  const [busy, setBusy] = useState<number | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+
+  const handleApprove = async (id: number) => {
+    if (!confirm('Approve and publish this page?')) return;
+    setBusy(id);
+    setMessage(null);
+    try {
+      await approvePage(id);
+      router.reload({ only: ['pages'] });
+    } catch (e) {
+      setMessage(e instanceof Error ? e.message : 'Approve failed');
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const handleReject = async (id: number) => {
+    setBusy(id);
+    setMessage(null);
+    const result = await promptAndReject(id);
+    setBusy(null);
+    if ('skipped' in result) {
+      if (result.skipped !== 'cancelled') setMessage(result.skipped);
+      return;
+    }
+    router.reload({ only: ['pages'] });
+  };
+
+  return (
+    <PageShell
+      title="Pending review"
+      description="Pages submitted for approval."
+      actions={
+        <Button variant="outline" onClick={() => router.visit('/pagebuilder')}>
+          ← All pages
+        </Button>
+      }
+    >
+      {message && <p className="mb-4 text-sm text-destructive">{message}</p>}
+
+      {pages.items.length === 0 ? (
+        <div className="rounded-lg border border-dashed p-8 text-center text-muted-foreground">
+          No pages are awaiting review.
+        </div>
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Title</TableHead>
+              <TableHead>Slug</TableHead>
+              <TableHead>Submitted</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {pages.items.map((p) => (
+              <TableRow key={p.id}>
+                <TableCell className="font-medium">{p.title}</TableCell>
+                <TableCell className="font-mono text-sm text-muted-foreground">{p.slug}</TableCell>
+                <TableCell className="text-sm text-muted-foreground">
+                  {p.updated_at ? new Date(p.updated_at).toLocaleString() : '—'}
+                </TableCell>
+                <TableCell className="space-x-1 text-right">
+                  <Button
+                    variant="link"
+                    size="sm"
+                    onClick={() => router.visit(`/pagebuilder/${p.id}/edit`)}
+                  >
+                    Review
+                  </Button>
+                  <Button
+                    variant="link"
+                    size="sm"
+                    disabled={busy === p.id}
+                    onClick={() => handleApprove(p.id)}
+                  >
+                    Approve
+                  </Button>
+                  <Button
+                    variant="link"
+                    size="sm"
+                    className="text-destructive"
+                    disabled={busy === p.id}
+                    onClick={() => handleReject(p.id)}
+                  >
+                    Reject
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </PageShell>
+  );
+}
+
+PendingReview.layout = (page: React.ReactNode) => <AuthenticatedLayout>{page}</AuthenticatedLayout>;