@bygghammar/cms-platform 0.28.0 → 0.30.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.30.0
+
+- Added `backoffice/PagesListView` — the page-builder index with public URLs per
+  locale, rename inline, trash bin with restore/purge and page creation.
+- Added `backoffice/BlocksLibraryView` — the blocks library (block types, global
+  blocks and legacy one-off copies) with previews; the block registry, preview
+  draft store and navigation are host-supplied.
+
+## 0.29.0
+
+- Added `backoffice/GlobalSectionsListView` — the global-sections library with
+  previews, block chips, create and delete.
+- Added `backoffice/GlobalSectionBuilderView` — editor for one global section or
+  global block: rename, convert kind, usage note, save; the block editor and
+  data access are host-injected.
+- Added `backoffice/ReviewsView` — the reviews/testimonials slider editor with
+  host-supplied media picker and uploader.
+
 ## 0.28.0
 
 - Added `backoffice/FormSubmissionsView` — the submissions inbox (filters, bulk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.28.0",
+  "version": "0.30.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": false,
@@ -130,7 +130,12 @@
     "./backoffice/BackupView": "./src/backoffice/BackupView.tsx",
     "./backoffice/FormSubmissionsView": "./src/backoffice/FormSubmissionsView.tsx",
     "./backoffice/FormDeliveriesView": "./src/backoffice/FormDeliveriesView.tsx",
-    "./backoffice/FormSettingsView": "./src/backoffice/FormSettingsView.tsx"
+    "./backoffice/FormSettingsView": "./src/backoffice/FormSettingsView.tsx",
+    "./backoffice/GlobalSectionsListView": "./src/backoffice/GlobalSectionsListView.tsx",
+    "./backoffice/GlobalSectionBuilderView": "./src/backoffice/GlobalSectionBuilderView.tsx",
+    "./backoffice/ReviewsView": "./src/backoffice/ReviewsView.tsx",
+    "./backoffice/PagesListView": "./src/backoffice/PagesListView.tsx",
+    "./backoffice/BlocksLibraryView": "./src/backoffice/BlocksLibraryView.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/BlocksLibraryView.tsx

@@ -0,0 +1,463 @@
+import { useCallback, useMemo, useState, type ReactNode } from "react";
+import { toast } from "sonner";
+import { Eye, Layers, Pencil, Trash2, Search, Globe, Plus } from "lucide-react";
+import { DataThumb } from "./SectionThumb";
+import { PreviewLightbox } from "./PreviewLightbox";
+
+/** Minimal shape of a block instance used by this screen. */
+export type LibraryBlock = {
+  id: string;
+  type: string;
+  props?: Record<string, unknown>;
+  visible?: boolean;
+};
+
+/** A block type as described by the host registry. */
+export type LibraryBlockDef = {
+  type: string;
+  label: string;
+  description: string;
+  category: string;
+  defaultProps: Record<string, unknown>;
+};
+
+/** A legacy one-off block copy. */
+export type LibraryTemplate = {
+  id: string;
+  name: string;
+  description?: string | null;
+  blockType: string;
+  block: LibraryBlock;
+};
+
+/** A saved global block/section row. */
+export type LibraryGlobalRow = {
+  id: string;
+  key: string;
+  name: string;
+  blocks?: unknown;
+  kind?: string;
+};
+
+export type BlocksLibraryDeps = {
+  defs: LibraryBlockDef[];
+  globals: LibraryGlobalRow[];
+  templates: LibraryTemplate[];
+  /** Fallback thumbnail per block type. */
+  typeImages: Record<string, string | null | undefined>;
+  /** Human label for a block type. */
+  blockTypeLabel: (type: string) => string;
+  /** Persists the preview payload so the preview route can render it. */
+  writePreviewDraft: (payload: { blocks: LibraryBlock[]; globals: Record<string, LibraryBlock[]> }) => void;
+  /** Preview iframe URL. */
+  previewSrc: string;
+  createGlobal: (input: {
+    key: string;
+    name: string;
+    kind: "block" | "section";
+    blocks: LibraryBlock[];
+  }) => Promise<unknown>;
+  renameGlobal: (input: { sectionId: string; name: string }) => Promise<unknown>;
+  deleteGlobal: (sectionId: string) => Promise<unknown>;
+  saveTemplate: (input: {
+    id: string;
+    name: string;
+    description?: string | null;
+    block: LibraryBlock;
+  }) => Promise<unknown>;
+  deleteTemplate: (id: string) => Promise<unknown>;
+  refetchGlobals: () => Promise<unknown> | void;
+  refetchTemplates: () => Promise<unknown> | void;
+  /** Navigates to the global block editor. */
+  openGlobal: (key: string) => void;
+};
+
+function uid(prefix = "b") {
+  return `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+}
+
+/** Turn a name into a url-safe global block key. */
+export function slugifyKey(name: string) {
+  const base = name
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 48);
+  return base || "section";
+}
+
+/** Library screen for block types, global blocks and legacy one-off copies. */
+export function BlocksLibraryView({ deps }: { deps: BlocksLibraryDeps }): ReactNode {
+  const {
+    defs: allDefs,
+    globals,
+    templates,
+    typeImages,
+    blockTypeLabel,
+    writePreviewDraft,
+    previewSrc,
+    createGlobal,
+    renameGlobal,
+    deleteGlobal,
+    saveTemplate,
+    deleteTemplate,
+    refetchGlobals,
+    refetchTemplates,
+    openGlobal,
+  } = deps;
+
+  const [tab, setTab] = useState<"types" | "saved" | "copies">("saved");
+  const [q, setQ] = useState("");
+  const [preview, setPreview] = useState<{ title: string } | null>(null);
+
+  const fail = (e: unknown) => toast.error(e instanceof Error ? e.message : "Failed");
+
+  const globalsMap = useMemo(() => {
+    const m: Record<string, LibraryBlock[]> = {};
+    for (const g of globals) m[g.key] = ((g.blocks ?? []) as LibraryBlock[]) ?? [];
+    return m;
+  }, [globals]);
+
+  const openPreview = useCallback(
+    (blocks: LibraryBlock[], title: string) => {
+      writePreviewDraft({ blocks, globals: globalsMap });
+      setPreview({ title });
+    },
+    [globalsMap, writePreviewDraft],
+  );
+
+  const toSavedBlock = useCallback(
+    async (block: LibraryBlock, defaultName: string) => {
+      const name = window.prompt("Global block name", defaultName);
+      if (!name) return;
+      const key = window.prompt("Key (url-safe, unique)", slugifyKey(name));
+      if (!key) return;
+      try {
+        await createGlobal({
+          key,
+          name,
+          kind: "block",
+          blocks: [{ ...structuredClone(block), id: uid() }],
+        });
+        toast.success("Global block created");
+        await refetchGlobals();
+        openGlobal(key);
+      } catch (e) {
+        fail(e);
+      }
+    },
+    [createGlobal, openGlobal, refetchGlobals],
+  );
+
+  const convertTemplate = useCallback(
+    async (t: LibraryTemplate) => {
+      const key = window.prompt("Key (url-safe, unique)", slugifyKey(t.name));
+      if (!key) return;
+      try {
+        await createGlobal({
+          key,
+          name: t.name,
+          kind: "block",
+          blocks: [{ ...structuredClone(t.block), id: uid() }],
+        });
+        await deleteTemplate(t.id);
+        toast.success("Converted to a global block");
+        await refetchTemplates();
+        await refetchGlobals();
+        openGlobal(key);
+      } catch (e) {
+        fail(e);
+      }
+    },
+    [createGlobal, deleteTemplate, openGlobal, refetchGlobals, refetchTemplates],
+  );
+
+  const onRenameTpl = async (t: LibraryTemplate) => {
+    const name = window.prompt("Name", t.name);
+    if (!name || name === t.name) return;
+    try {
+      await saveTemplate({ id: t.id, name, description: t.description, block: t.block });
+      toast.success("Renamed");
+      await refetchTemplates();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const onDeleteTpl = async (t: LibraryTemplate) => {
+    if (!confirm(`Delete copy "${t.name}"?`)) return;
+    try {
+      await deleteTemplate(t.id);
+      toast.success("Deleted");
+      await refetchTemplates();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const onRenameSaved = async (id: string, current: string) => {
+    const name = window.prompt("Global block name", current);
+    if (!name || name === current) return;
+    try {
+      await renameGlobal({ sectionId: id, name });
+      toast.success("Renamed");
+      await refetchGlobals();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const onDeleteSaved = async (id: string, name: string) => {
+    if (!confirm(`Delete global block "${name}"? Pages using it will render nothing there.`)) return;
+    try {
+      await deleteGlobal(id);
+      toast.success("Deleted");
+      await refetchGlobals();
+    } catch (e) {
+      fail(e);
+    }
+  };
+
+  const needle = q.trim().toLowerCase();
+  const defs = allDefs.filter(
+    (d) =>
+      !needle ||
+      d.label.toLowerCase().includes(needle) ||
+      d.description.toLowerCase().includes(needle) ||
+      d.type.toLowerCase().includes(needle),
+  );
+  const savedBlocks = globals
+    .filter((g) => (g.kind ?? "section") === "block")
+    .filter(
+      (g) =>
+        !needle || g.name.toLowerCase().includes(needle) || g.key.toLowerCase().includes(needle),
+    );
+  const copies = templates.filter(
+    (t) =>
+      !needle ||
+      t.name.toLowerCase().includes(needle) ||
+      (t.description ?? "").toLowerCase().includes(needle) ||
+      t.blockType.toLowerCase().includes(needle),
+  );
+
+  const tabBtn = (id: typeof tab, label: string) => (
+    <button
+      type="button"
+      onClick={() => setTab(id)}
+      className={`px-4 py-2 text-[0.7rem] uppercase tracking-[0.18em] ${tab === id ? "bg-ink text-paper" : "text-ink/60 hover:text-ink"}`}
+    >
+      {label}
+    </button>
+  );
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Library</div>
+      <h1 className="mt-2 font-serif text-3xl md:text-4xl text-ink">Blocks</h1>
+      <p className="mt-4 max-w-2xl text-sm text-ink/60">
+        Block types are the building bricks. A <strong>global block</strong> is a named, editable
+        block you reuse on pages and inside global sections — edit it once here and every place that
+        uses it updates at the same time. A global block always holds exactly one block; for several
+        blocks together, use Global Sections.
+      </p>
+
+      <div className="mt-8 flex flex-wrap items-center gap-3">
+        <div className="inline-flex border border-ink/15 bg-white">
+          {tabBtn("saved", `Global blocks (${savedBlocks.length})`)}
+          {tabBtn("types", `Block types (${defs.length})`)}
+          {copies.length > 0 && tabBtn("copies", `One-off copies (${copies.length})`)}
+        </div>
+        <div className="relative">
+          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-ink/40" />
+          <input
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            placeholder="Search blocks…"
+            className="border border-ink/15 bg-white py-2 pl-9 pr-3 text-sm outline-none focus:border-sea"
+          />
+        </div>
+      </div>
+
+      {tab === "types" && (
+        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+          {defs.map((def) => {
+            const block: LibraryBlock = {
+              id: "preview",
+              type: def.type,
+              props: structuredClone(def.defaultProps),
+            };
+            return (
+              <div key={def.type} className="border border-ink/10 bg-white p-4">
+                <button
+                  type="button"
+                  title="Preview block"
+                  onClick={() => openPreview([block], def.label)}
+                  className="group relative block"
+                >
+                  <DataThumb
+                    data={def.defaultProps}
+                    fallbackImage={typeImages[def.type]}
+                    blockType={def.type}
+                  />
+                  <span className="absolute inset-0 hidden items-center justify-center bg-ink/50 text-white group-hover:flex">
+                    <Eye className="size-4" />
+                  </span>
+                </button>
+                <div className="mt-3 flex items-center gap-2">
+                  <div className="font-serif text-lg text-ink">{def.label}</div>
+                  <span className="rounded bg-ink/[0.06] px-1.5 py-1 text-[0.6rem] uppercase tracking-[0.16em] text-ink/55">
+                    {def.category}
+                  </span>
+                </div>
+                <p className="mt-1 text-sm text-ink/60">{def.description}</p>
+                <div className="mt-3 flex items-center justify-between gap-2">
+                  <span className="font-mono text-[0.7rem] text-ink/40">{def.type}</span>
+                  <button
+                    onClick={() => toSavedBlock(block, def.label)}
+                    className="inline-flex items-center gap-1 text-[0.75rem] text-sea hover:underline"
+                  >
+                    <Plus className="size-3.5" /> Save as global block
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {tab === "saved" && (
+        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+          {savedBlocks.length === 0 && (
+            <p className="text-sm text-ink/55">
+              No global blocks yet. Open a block type above and choose "Save as global block", or
+              select a block in the page builder and choose "Save as global block".
+            </p>
+          )}
+          {savedBlocks.map((g) => {
+            const blocks = (g.blocks ?? []) as LibraryBlock[];
+            const labels = blocks
+              .filter((b) => b.visible !== false)
+              .map((b) => blockTypeLabel(b.type));
+            return (
+              <div key={g.id} className="border border-ink/10 bg-white p-4">
+                <button
+                  type="button"
+                  title="Preview global block"
+                  onClick={() => openPreview(blocks, g.name)}
+                  className="group relative block"
+                >
+                  <DataThumb
+                    data={blocks}
+                    fallbackImage={blocks.map((b) => typeImages[b.type]).find(Boolean) ?? null}
+                  />
+                  <span className="absolute inset-0 hidden items-center justify-center bg-ink/50 text-white group-hover:flex">
+                    <Eye className="size-4" />
+                  </span>
+                </button>
+                <div className="mt-3 flex items-center gap-2">
+                  <div className="font-serif text-lg text-ink">{g.name}</div>
+                  <Globe className="size-3.5 text-ink/40" aria-label="Global block" />
+                </div>
+                {labels.length > 0 && (
+                  <div className="mt-1 flex flex-wrap gap-1.5">
+                    {labels.map((label, i) => (
+                      <span
+                        key={i}
+                        className="inline-block rounded bg-ink/[0.06] px-1.5 py-1 text-[0.65rem] leading-none text-ink/60"
+                      >
+                        {label}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                <div className="mt-3 font-mono text-[0.7rem] text-ink/40">{g.key}</div>
+                <div className="mt-4 flex flex-wrap gap-3 text-[0.75rem]">
+                  <button
+                    onClick={() => openGlobal(g.key)}
+                    className="inline-flex items-center gap-1 text-sea hover:underline"
+                  >
+                    <Pencil className="size-3.5" /> Edit
+                  </button>
+                  <button
+                    onClick={() => onRenameSaved(g.id, g.name)}
+                    className="inline-flex items-center gap-1 text-ink/60 hover:text-ink"
+                  >
+                    <Layers className="size-3.5" /> Rename
+                  </button>
+                  <button
+                    onClick={() => onDeleteSaved(g.id, g.name)}
+                    className="inline-flex items-center gap-1 text-red-600/80 hover:text-red-700"
+                  >
+                    <Trash2 className="size-3.5" /> Delete
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {tab === "copies" && (
+        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+          {copies.map((t) => (
+            <div key={t.id} className="border border-ink/10 bg-white p-4">
+              <button
+                type="button"
+                title="Preview block"
+                onClick={() => openPreview([t.block], t.name)}
+                className="group relative block"
+              >
+                <DataThumb
+                  data={t.block.props ?? {}}
+                  fallbackImage={typeImages[t.blockType]}
+                  blockType={t.blockType}
+                />
+                <span className="absolute inset-0 hidden items-center justify-center bg-ink/50 text-white group-hover:flex">
+                  <Eye className="size-4" />
+                </span>
+              </button>
+              <div className="mt-3 flex items-center gap-2">
+                <div className="font-serif text-lg text-ink">{t.name}</div>
+                <span className="rounded bg-ink/[0.06] px-1.5 py-1 text-[0.6rem] uppercase tracking-[0.16em] text-ink/55">
+                  {blockTypeLabel(t.blockType)}
+                </span>
+              </div>
+              <p className="mt-1 text-sm text-ink/60">
+                {t.description || "A one-off copy: pages using it keep their own version."}
+              </p>
+              <div className="mt-4 flex flex-wrap gap-3 text-[0.75rem]">
+                <button
+                  onClick={() => convertTemplate(t)}
+                  className="inline-flex items-center gap-1 text-sea hover:underline"
+                >
+                  <Globe className="size-3.5" /> Convert to global block
+                </button>
+                <button
+                  onClick={() => onRenameTpl(t)}
+                  className="inline-flex items-center gap-1 text-ink/60 hover:text-ink"
+                >
+                  <Pencil className="size-3.5" /> Rename
+                </button>
+                <button
+                  onClick={() => onDeleteTpl(t)}
+                  className="inline-flex items-center gap-1 text-red-600/80 hover:text-red-700"
+                >
+                  <Trash2 className="size-3.5" /> Delete
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <PreviewLightbox
+        open={preview != null}
+        onClose={() => setPreview(null)}
+        src={previewSrc}
+        title={preview?.title ?? ""}
+      />
+    </div>
+  );
+}