@portaki/module-sections 1.2.7 → 1.3.1

package/src/host/SectionsHostWorkspace.tsx

@@ -0,0 +1,497 @@
+'use client'
+
+import type { HostModuleContext } from '@portaki/sdk'
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { FileText, GripVertical, Plus, Trash2 } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import { SectionCreateModal, type SectionCreatePayload } from './SectionCreateModal'
+import { sectionsEditorDesign } from './sections-editor-design'
+import type { SectionsEditorDesign } from './sections-host.types'
+import { buildSectionTipTapPreset } from './section-tiptap-presets'
+import { sectionsToastCopy } from './sections-toast-copy'
+
+type SectionRow = {
+  id: string;
+  sortOrder: number;
+  titleFr: string;
+  titleEn: string;
+  contentFr: unknown;
+  contentEn: unknown;
+};
+
+type LangTab = "fr" | "en";
+
+const DEFAULT_DESIGN = sectionsEditorDesign
+
+function unwrapJsonbField(raw: unknown): unknown {
+  if (raw == null) {
+    return null;
+  }
+  if (typeof raw === "string") {
+    return parseTipTapDoc(raw);
+  }
+  if (typeof raw === "object" && !Array.isArray(raw)) {
+    const record = raw as Record<string, unknown>;
+    if (record.type === "jsonb" && record.value != null) {
+      return unwrapJsonbField(record.value);
+    }
+    if (record.type === "doc") {
+      return record;
+    }
+  }
+  return raw;
+}
+
+function normalizeSectionRow(row: Record<string, unknown>): SectionRow {
+  return {
+    id: String(row.id ?? ""),
+    sortOrder: Number(row.sortOrder ?? row.sort_order ?? 0),
+    titleFr: String(row.titleFr ?? row.title_fr ?? ""),
+    titleEn: String(row.titleEn ?? row.title_en ?? ""),
+    contentFr: unwrapJsonbField(row.contentFr ?? row.content_fr),
+    contentEn: unwrapJsonbField(row.contentEn ?? row.content_en),
+  };
+}
+
+function tipTapValue(raw: unknown): string {
+  const doc = unwrapJsonbField(raw);
+  if (doc && typeof doc === "object") {
+    return serializeTipTapDoc(doc as Record<string, unknown>);
+  }
+  return serializeTipTapDoc(parseTipTapDoc(null));
+}
+
+function SortableSectionItem({
+  section,
+  selected,
+  onSelect,
+  cn,
+}: {
+  section: SectionRow
+  selected: boolean
+  onSelect: () => void
+  cn: HostModuleContext['shell']['cn']
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: section.id,
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <li ref={setNodeRef} style={style} className={cn(isDragging && "z-10 opacity-90")}>
+      <div
+        className={cn(
+          "flex items-center gap-1 rounded-lg px-1 py-0.5",
+          selected ? "bg-[var(--amber)]/12" : "hover:bg-black/[0.03]",
+        )}
+      >
+        <button
+          type="button"
+          className="touch-none rounded p-1 text-[var(--text-muted)] hover:text-[var(--text)]"
+          aria-label="Réordonner"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical className="size-4" aria-hidden />
+        </button>
+        <button
+          type="button"
+          onClick={onSelect}
+          className={cn(
+            "min-w-0 flex-1 rounded-md px-2 py-2 text-left text-[13px] transition-colors",
+            selected ? "font-medium text-[var(--text)]" : "text-[var(--text-muted)] hover:text-[var(--text)]",
+          )}
+        >
+          {section.titleFr || "Sans titre"}
+        </button>
+      </div>
+    </li>
+  );
+}
+
+export function SectionsHostWorkspace({
+  ctx,
+  design = DEFAULT_DESIGN,
+}: {
+  ctx: HostModuleContext
+  design?: SectionsEditorDesign
+}) {
+  const { propertyId, gateway, shell } = ctx
+  const {
+    NotionLikeEditor,
+    HostEmptyPlaceholder,
+    HostUnderlineTabs,
+    Button,
+    Input,
+    cn,
+    toast,
+    parseTipTapDoc,
+    serializeTipTapDoc,
+  } = shell
+  const gatewayOps = design.gateway
+
+  const [sections, setSections] = useState<SectionRow[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [lang, setLang] = useState<LangTab>("fr");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [lastSavedAt, setLastSavedAt] = useState<Date | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const selected = useMemo(
+    () => sections.find((s) => s.id === selectedId) ?? null,
+    [sections, selectedId],
+  );
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await gateway.query<SectionRow[]>(gatewayOps.listQuery)
+      const list = data.map((row) => normalizeSectionRow(row as Record<string, unknown>));
+      setSections(list);
+      setSelectedId((prev) => {
+        if (prev && list.some((s) => s.id === prev)) {
+          return prev;
+        }
+        return list[0]?.id ?? null;
+      });
+    } catch {
+      toast.error(sectionsToastCopy.loadError)
+    } finally {
+      setLoading(false);
+    }
+  }, [propertyId, gateway, gatewayOps.listQuery, toast])
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const saveSelected = useCallback(
+    async (draft: SectionRow) => {
+      setSaving(true);
+      try {
+        await gateway.command(gatewayOps.saveCommand, {
+          id: draft.id,
+          titleFr: draft.titleFr,
+          titleEn: draft.titleEn || draft.titleFr,
+          contentFr: draft.contentFr,
+          contentEn: draft.contentEn,
+          sortOrder: draft.sortOrder,
+        });
+        setLastSavedAt(new Date());
+        await load();
+      } catch {
+        toast.error(sectionsToastCopy.saveError)
+      } finally {
+        setSaving(false);
+      }
+    },
+    [gateway, gatewayOps.saveCommand, load, toast],
+  );
+
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const scheduleSave = useCallback(
+    (draft: SectionRow) => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+      debounceRef.current = setTimeout(() => {
+        void saveSelected(draft);
+      }, 1200);
+    },
+    [saveSelected],
+  );
+
+  const updateDraft = useCallback(
+    (patch: Partial<SectionRow>) => {
+      if (!selected) {
+        return;
+      }
+      const next = { ...selected, ...patch };
+      setSections((prev) => prev.map((s) => (s.id === next.id ? next : s)));
+      scheduleSave(next);
+    },
+    [selected, scheduleSave],
+  );
+
+  const persistOrder = useCallback(
+    async (ordered: SectionRow[]) => {
+      try {
+        await gateway.command(gatewayOps.reorderCommand, {
+          orderedIds: ordered.map((s) => s.id),
+        });
+      } catch {
+        toast.error(sectionsToastCopy.reorderError)
+        await load();
+      }
+    },
+    [gateway, gatewayOps.reorderCommand, load, toast]
+  );
+
+  const onDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) {
+        return;
+      }
+      setSections((items) => {
+        const oldIndex = items.findIndex((s) => s.id === active.id);
+        const newIndex = items.findIndex((s) => s.id === over.id);
+        const moved = arrayMove(items, oldIndex, newIndex).map((s, index) => ({
+          ...s,
+          sortOrder: index,
+        }));
+        void persistOrder(moved);
+        return moved;
+      });
+    },
+    [persistOrder],
+  );
+
+  const createSection = useCallback(
+    async (payload: SectionCreatePayload) => {
+      setCreating(true);
+      const sortOrder = sections.length;
+      const id = crypto.randomUUID();
+      const { contentFr, contentEn } = buildSectionTipTapPreset(payload.contentPreset);
+      try {
+        await gateway.command(gatewayOps.saveCommand, {
+          id,
+          titleFr: payload.titleFr,
+          titleEn: payload.titleEn,
+          contentFr,
+          contentEn,
+          sortOrder,
+        });
+        setCreateModalOpen(false);
+        await load();
+        setSelectedId(id);
+        toast.success(sectionsToastCopy.createSuccess)
+      } catch {
+        toast.error(sectionsToastCopy.createError)
+      } finally {
+        setCreating(false);
+      }
+    },
+    [gateway, gatewayOps.saveCommand, sections.length, load, toast]
+  );
+
+  const deleteSelected = useCallback(async () => {
+    if (!selected) {
+      return;
+    }
+    try {
+      await gateway.command(gatewayOps.deleteCommand, {
+        id: selected.id,
+      });
+      toast.success(sectionsToastCopy.deleteSuccess)
+      await load();
+    } catch {
+      toast.error(sectionsToastCopy.deleteError)
+    }
+  }, [gateway, gatewayOps.deleteCommand, selected, load, toast])
+
+  if (loading) {
+    return <p className="text-sm text-[var(--text-muted)]">Chargement des sections…</p>;
+  }
+
+  if (sections.length === 0) {
+    return (
+      <>
+        <HostEmptyPlaceholder
+          icon={FileText}
+          title={design.emptyState.titleFr}
+          description={design.emptyState.descriptionFr}
+          primaryAction={{
+            label: design.emptyState.primaryActionLabelFr,
+            onClick: () => setCreateModalOpen(true),
+          }}
+        />
+        <SectionCreateModal
+          open={createModalOpen}
+          onOpenChange={setCreateModalOpen}
+          design={design.createModal}
+          onCreate={createSection}
+          creating={creating}
+          shell={shell}
+        />
+      </>
+    )
+  }
+
+  const editorValue =
+    selected == null
+      ? serializeTipTapDoc(parseTipTapDoc(null))
+      : lang === "fr"
+        ? tipTapValue(selected.contentFr)
+        : tipTapValue(selected.contentEn);
+
+  return (
+    <div className="flex min-h-[min(70vh,720px)] flex-col gap-4 lg:flex-row">
+      <aside className="w-full shrink-0 rounded-xl border border-[var(--border)] bg-white lg:w-72">
+        <div className="flex items-center justify-between border-b border-[var(--border)] px-3 py-2.5">
+          <span className="text-[13px] font-medium text-[var(--text)]">Sections</span>
+          <Button
+            type="button"
+            variant="secondary"
+            className="min-h-8 px-3 text-xs"
+            onClick={() => setCreateModalOpen(true)}
+          >
+            <Plus className="size-4" aria-hidden />
+            Nouvelle
+          </Button>
+        </div>
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+          <SortableContext items={sections.map((s) => s.id)} strategy={verticalListSortingStrategy}>
+            <ul className="max-h-[min(60vh,560px)] overflow-y-auto p-2">
+              {sections.length === 0 ? (
+                <li className="px-2 py-8 text-center">
+                  <p className="text-[13px] text-[var(--text-muted)]">Aucune section pour l&apos;instant.</p>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    className="mt-3 min-h-9 px-4 text-xs"
+                    onClick={() => setCreateModalOpen(true)}
+                  >
+                    <Plus className="size-4" aria-hidden />
+                    Nouvelle section
+                  </Button>
+                </li>
+              ) : (
+                sections.map((s) => (
+                  <SortableSectionItem
+                    key={s.id}
+                    section={s}
+                    selected={selectedId === s.id}
+                    onSelect={() => setSelectedId(s.id)}
+                    cn={cn}
+                  />
+                ))
+              )}
+            </ul>
+          </SortableContext>
+        </DndContext>
+      </aside>
+
+      <div className="min-w-0 flex-1 rounded-xl border border-[var(--border)] bg-white">
+        {selected ? (
+          <>
+            <div className="flex flex-col gap-3 border-b border-[var(--border)] px-4 py-3">
+              <div className="flex flex-wrap items-center gap-2">
+                <Input
+                  value={selected.titleFr}
+                  onChange={(e) => updateDraft({ titleFr: e.target.value })}
+                  placeholder="Titre (FR)"
+                  className="max-w-xs"
+                />
+                <Input
+                  value={selected.titleEn}
+                  onChange={(e) => updateDraft({ titleEn: e.target.value })}
+                  placeholder="Title (EN)"
+                  className="max-w-xs"
+                />
+                <div className="ml-auto flex items-center gap-2">
+                  <span className="text-[11px] text-[var(--text-muted)]">
+                    {saving
+                      ? "Enregistrement…"
+                      : lastSavedAt
+                        ? `Auto-sauvegardé — ${formatRelative(lastSavedAt)}`
+                        : ""}
+                  </span>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="min-h-8 px-3 text-xs text-destructive"
+                    onClick={() => void deleteSelected()}
+                  >
+                    <Trash2 className="size-4" aria-hidden />
+                    Supprimer
+                  </Button>
+                </div>
+              </div>
+              <HostUnderlineTabs
+                options={[
+                  { value: 'fr', label: 'Contenu FR' },
+                  { value: 'en', label: 'Content EN' },
+                ]}
+                value={lang}
+                onChange={(value) => setLang(value as LangTab)}
+                ariaLabel="Langue du contenu"
+              />
+            </div>
+            <div className="p-4">
+              <NotionLikeEditor
+                key={`${selected.id}-${lang}`}
+                value={editorValue}
+                onChange={(json) => {
+                  try {
+                    const node = JSON.parse(json) as unknown;
+                    if (lang === "fr") {
+                      updateDraft({ contentFr: node });
+                    } else {
+                      updateDraft({ contentEn: node });
+                    }
+                  } catch {
+                    /* ignore */
+                  }
+                }}
+              />
+            </div>
+          </>
+        ) : (
+          <div className="flex min-h-[320px] items-center justify-center p-8 text-[13px] text-[var(--text-muted)]">
+            Sélectionnez ou créez une section.
+          </div>
+        )}
+      </div>
+
+      <SectionCreateModal
+        open={createModalOpen}
+        onOpenChange={setCreateModalOpen}
+        design={design.createModal}
+        onCreate={createSection}
+        creating={creating}
+        shell={shell}
+      />
+    </div>
+  )
+}
+
+function formatRelative(d: Date): string {
+  const sec = Math.round((Date.now() - d.getTime()) / 1000);
+  if (sec < 8) {
+    return "à l’instant";
+  }
+  if (sec < 60) {
+    return `il y a ${sec} s`;
+  }
+  const min = Math.round(sec / 60);
+  return `il y a ${min} min`;
+}

package/src/host/section-tiptap-presets.ts

@@ -0,0 +1,156 @@
+import type { SectionContentPresetId } from "./sections-host.types";
+
+export type SectionTipTapPreset = {
+  contentFr: Record<string, unknown>;
+  contentEn: Record<string, unknown>;
+};
+
+function textNode(value: string): Record<string, unknown> {
+  return { type: "text", text: value };
+}
+
+function paragraph(...parts: string[]): Record<string, unknown> {
+  const joined = parts.filter(Boolean).join(" ");
+  return {
+    type: "paragraph",
+    content: joined ? [textNode(joined)] : [],
+  };
+}
+
+function heading(level: 2 | 3, text: string): Record<string, unknown> {
+  return {
+    type: "heading",
+    attrs: { level },
+    content: text ? [textNode(text)] : [],
+  };
+}
+
+function bulletItem(text: string): Record<string, unknown> {
+  return {
+    type: "listItem",
+    content: [paragraph(text)],
+  };
+}
+
+function bulletList(items: string[]): Record<string, unknown> {
+  return {
+    type: "bulletList",
+    content: items.map(bulletItem),
+  };
+}
+
+function doc(...blocks: Record<string, unknown>[]): Record<string, unknown> {
+  return { type: "doc", content: blocks };
+}
+
+const PRESETS: Record<SectionContentPresetId, SectionTipTapPreset> = {
+  welcome: {
+    contentFr: doc(
+      paragraph(
+        "Bienvenue ! Nous sommes ravis de vous accueillir. Voici quelques informations utiles pour profiter pleinement du logement.",
+      ),
+      paragraph(
+        "N'hésitez pas à nous écrire ou à nous appeler si vous avez la moindre question pendant votre séjour.",
+      ),
+    ),
+    contentEn: doc(
+      paragraph(
+        "Welcome! We're delighted to host you. Here is some useful information to help you make the most of your stay.",
+      ),
+      paragraph("Feel free to message or call us if you have any questions during your visit."),
+    ),
+  },
+  beaches: {
+    contentFr: doc(
+      heading(2, "Plages & criques"),
+      paragraph("Nos spots préférés aux alentours :"),
+      bulletList([
+        "Plage principale — accès facile, idéale en famille",
+        "Crique sauvage — 10 min à pied, prévoir des chaussures",
+        "Spot snorkeling — eau calme le matin",
+      ]),
+    ),
+    contentEn: doc(
+      heading(2, "Beaches & coves"),
+      paragraph("Our favourite spots nearby:"),
+      bulletList([
+        "Main beach — easy access, great for families",
+        "Hidden cove — 10 min walk, bring suitable shoes",
+        "Snorkelling spot — calm water in the morning",
+      ]),
+    ),
+  },
+  restaurants: {
+    contentFr: doc(
+      heading(2, "Restaurants"),
+      paragraph("Quelques adresses que nous recommandons, par budget :"),
+      bulletList([
+        "Bistrot du port — cuisine locale, réservation conseillée",
+        "Pizzeria du village — décontracté, terrasse ombragée",
+        "Marché du samedi matin — produits frais et spécialités",
+      ]),
+    ),
+    contentEn: doc(
+      heading(2, "Restaurants"),
+      paragraph("A few places we recommend, by budget:"),
+      bulletList([
+        "Harbour bistro — local cuisine, booking recommended",
+        "Village pizzeria — casual, shaded terrace",
+        "Saturday market — fresh produce and regional treats",
+      ]),
+    ),
+  },
+  transport: {
+    contentFr: doc(
+      heading(2, "Venir & repartir"),
+      paragraph("Pour vous déplacer facilement :"),
+      bulletList([
+        "Gare la plus proche — liaisons régulières vers les grandes villes",
+        "Bus — arrêt à quelques minutes à pied",
+        "Parking — place disponible sur la propriété",
+        "Taxi / VTC — nous pouvons partager nos contacts",
+      ]),
+    ),
+    contentEn: doc(
+      heading(2, "Getting here & leaving"),
+      paragraph("Getting around:"),
+      bulletList([
+        "Nearest train station — regular connections to major cities",
+        "Bus — stop a few minutes' walk away",
+        "Parking — space available on the property",
+        "Taxi / ride-hailing — we can share our contacts",
+      ]),
+    ),
+  },
+  emergencies: {
+    contentFr: doc(
+      heading(2, "Urgences"),
+      paragraph("En cas d'urgence :"),
+      bulletList([
+        "112 — numéro d'urgence européen",
+        "Médecin / pharmacie de garde — contactez-nous",
+        "Pompiers / police — composez le 112",
+      ]),
+      paragraph("Adresse du logement et codes d'accès : à compléter selon votre situation."),
+    ),
+    contentEn: doc(
+      heading(2, "Emergencies"),
+      paragraph("In an emergency:"),
+      bulletList([
+        "112 — European emergency number",
+        "Doctor / on-call pharmacy — contact us",
+        "Fire / police — dial 112",
+      ]),
+      paragraph("Property address and access codes: please complete for your guests."),
+    ),
+  },
+  empty: {
+    contentFr: doc(paragraph("")),
+    contentEn: doc(paragraph("")),
+  },
+};
+
+/** TipTap JSON presets keyed by {@link SectionContentPresetId} (sections editor design). */
+export function buildSectionTipTapPreset(preset: SectionContentPresetId): SectionTipTapPreset {
+  return PRESETS[preset] ?? PRESETS.empty;
+}