@bygghammar/cms-platform 0.6.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.6.0",
+  "version": "0.8.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,
@@ -76,7 +76,15 @@
     "./backoffice/ProgressBar": "./src/backoffice/ProgressBar.tsx",
     "./backoffice/PreviewLightbox": "./src/backoffice/PreviewLightbox.tsx",
     "./backoffice/RichTextEditor": "./src/backoffice/RichTextEditor.tsx",
-    "./backoffice/media/ConfirmDialog": "./src/backoffice/media/ConfirmDialog.tsx"
+    "./backoffice/media/ConfirmDialog": "./src/backoffice/media/ConfirmDialog.tsx",
+    "./backoffice/media/MediaCleanup": "./src/backoffice/media/MediaCleanup.tsx",
+    "./backoffice/media/MediaReplaceDialog": "./src/backoffice/media/MediaReplaceDialog.tsx",
+    "./backoffice/media/ReuploadOverwrite": "./src/backoffice/media/ReuploadOverwrite.tsx",
+    "./backoffice/forms/FieldEditor": "./src/backoffice/forms/FieldEditor.tsx",
+    "./backoffice/forms/FormPreview": "./src/backoffice/forms/FormPreview.tsx",
+    "./backoffice/forms/VersionHistory": "./src/backoffice/forms/VersionHistory.tsx",
+    "./backoffice/forms/TestDeliveryPanel": "./src/backoffice/forms/TestDeliveryPanel.tsx",
+    "./backoffice/SaveGlobalDialog": "./src/backoffice/SaveGlobalDialog.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/SaveGlobalDialog.tsx

@@ -0,0 +1,221 @@
+import { useEffect, useState } from "react";
+import { X, Globe, Layers, BookmarkPlus } from "lucide-react";
+
+export type SaveGlobalMode = "global" | "template";
+export type SaveGlobalResult = {
+  name: string;
+  key: string;
+  kind: "block" | "section";
+  description: string;
+};
+
+export function slugifyKey(value: string) {
+  return (
+    value
+      .toLowerCase()
+      .normalize("NFD")
+      .replace(/[\u0300-\u036f]/g, "")
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+      .slice(0, 48) || "section"
+  );
+}
+
+export function SaveGlobalDialog({
+  open,
+  mode,
+  defaultName,
+  error,
+  busy = false,
+  onCancel,
+  onSubmit,
+}: {
+  open: boolean;
+  mode: SaveGlobalMode;
+  defaultName: string;
+  error?: string | null;
+  busy?: boolean;
+  onCancel: () => void;
+  onSubmit: (result: SaveGlobalResult) => void;
+}) {
+  const [name, setName] = useState(defaultName);
+  const [key, setKey] = useState(slugifyKey(defaultName));
+  const [keyTouched, setKeyTouched] = useState(false);
+  const [kind, setKind] = useState<"block" | "section">("section");
+  const [description, setDescription] = useState("");
+
+  useEffect(() => {
+    if (open) {
+      setName(defaultName);
+      setKey(slugifyKey(defaultName));
+      setKeyTouched(false);
+      setKind("section");
+      setDescription("");
+    }
+  }, [open, defaultName]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onCancel();
+    };
+    document.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onCancel]);
+
+  if (!open) return null;
+
+  const isGlobal = mode === "global";
+  const keyInvalid = isGlobal && !/^[a-z0-9_-]+$/.test(key);
+  const canSave = name.trim().length > 0 && (!isGlobal || (!keyInvalid && key.length > 0));
+
+  const submit = () => {
+    if (!canSave || busy) return;
+    onSubmit({ name: name.trim(), key, kind, description: description.trim() });
+  };
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+      <button aria-label="Close" onClick={onCancel} className="absolute inset-0 bg-ink/50" />
+      <div className="relative w-full max-w-lg bg-white border border-ink/10 shadow-xl">
+        <div className="flex items-start justify-between border-b border-ink/10 px-5 py-4">
+          <div>
+            <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/50">
+              {isGlobal ? "Reusable" : "Blocks library"}
+            </div>
+            <h2 className="text-lg font-medium text-ink flex items-center gap-2">
+              {isGlobal ? <Globe className="size-4" /> : <BookmarkPlus className="size-4" />}
+              {isGlobal ? "Save as reusable" : "Save one-off copy"}
+            </h2>
+          </div>
+          <button onClick={onCancel} className="text-ink/40 hover:text-ink" title="Close">
+            <X className="size-4" />
+          </button>
+        </div>
+
+        <div className="px-5 py-4 space-y-4">
+          <p className="text-xs text-ink/60 leading-relaxed">
+            {isGlobal
+              ? "This page will switch to a live reference. Edit it once and every page or section using it updates."
+              : "Stores an independent duplicate in the Blocks library. Later edits only affect this page."}
+          </p>
+
+          <label className="block">
+            <span className="text-[0.65rem] uppercase tracking-[0.18em] text-ink/55">Name</span>
+            <input
+              autoFocus
+              value={name}
+              onChange={(e) => {
+                setName(e.target.value);
+                if (!keyTouched) setKey(slugifyKey(e.target.value));
+              }}
+              onKeyDown={(e) => e.key === "Enter" && submit()}
+              className="mt-1 w-full border border-ink/15 px-3 py-2 text-sm focus:border-sea outline-none"
+            />
+          </label>
+
+          {isGlobal ? (
+            <>
+              <label className="block">
+                <span className="text-[0.65rem] uppercase tracking-[0.18em] text-ink/55">
+                  Key (url-safe, unique)
+                </span>
+                <input
+                  value={key}
+                  onChange={(e) => {
+                    setKeyTouched(true);
+                    setKey(e.target.value.trim());
+                  }}
+                  onKeyDown={(e) => e.key === "Enter" && submit()}
+                  className="mt-1 w-full border border-ink/15 px-3 py-2 text-sm font-mono focus:border-sea outline-none"
+                />
+                {keyInvalid && (
+                  <span className="mt-1 block text-[0.7rem] text-red-600">
+                    Use lowercase letters, numbers, hyphen or underscore only.
+                  </span>
+                )}
+              </label>
+
+              <div>
+                <span className="text-[0.65rem] uppercase tracking-[0.18em] text-ink/55">
+                  Save to
+                </span>
+                <div className="mt-1 grid grid-cols-2 gap-2">
+                  {[
+                    {
+                      v: "section" as const,
+                      icon: Layers,
+                      title: "Global sections",
+                      hint: "Shows in Global Sections",
+                    },
+                    {
+                      v: "block" as const,
+                      icon: Globe,
+                      title: "Global block",
+                      hint: "Shows in Block library",
+                    },
+                  ].map((o) => {
+                    const Icon = o.icon;
+                    const active = kind === o.v;
+                    return (
+                      <button
+                        key={o.v}
+                        type="button"
+                        onClick={() => setKind(o.v)}
+                        className={`text-left border px-3 py-2 ${active ? "border-sea bg-ice/40" : "border-ink/15 hover:border-ink/30"}`}
+                      >
+                        <span className="flex items-center gap-1.5 text-sm text-ink">
+                          <Icon className="size-3.5" /> {o.title}
+                        </span>
+                        <span className="block text-[0.7rem] text-ink/55 mt-0.5">{o.hint}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            </>
+          ) : (
+            <label className="block">
+              <span className="text-[0.65rem] uppercase tracking-[0.18em] text-ink/55">
+                Description (optional)
+              </span>
+              <input
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && submit()}
+                className="mt-1 w-full border border-ink/15 px-3 py-2 text-sm focus:border-sea outline-none"
+              />
+            </label>
+          )}
+
+          {error && (
+            <div className="border border-red-300 bg-red-50 px-3 py-2 text-xs text-red-700">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-2 border-t border-ink/10 px-5 py-3">
+          <button
+            onClick={onCancel}
+            className="border border-ink/15 px-3 py-1.5 text-sm hover:border-ink/40"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={submit}
+            disabled={!canSave || busy}
+            className="bg-ink text-white px-4 py-1.5 text-sm disabled:opacity-40"
+          >
+            {busy ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}