@portaki/module-sections 1.2.7 → 1.3.1

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@portaki/module-sections",
-  "version": "1.2.7",
+  "version": "1.3.1",
   "description": "Portaki module — editorial sections (TipTap)",
   "license": "AGPL-3.0",
   "type": "module",
   "main": "./src/index.tsx",
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@portaki/sdk": "^3.0.0",
+    "lucide-react": "^1.14.0",
     "@tiptap/core": "^3.0.0",
     "@tiptap/html": "^3.0.0",
     "@tiptap/starter-kit": "^3.0.0",

package/portaki.catalog.json

@@ -9,7 +9,7 @@
     "fr": "Blocs de contenu riches (TipTap) pour le carnet d’accueil invité.",
     "en": "Rich content blocks (TipTap) for the guest welcome book."
   },
-  "version": "1.2.7",
+  "version": "1.3.1",
   "releaseNotesUrl": "https://github.com/PortakiApp/portaki-modules/releases",
   "changelog": [
     {
@@ -122,6 +122,6 @@
   },
   "artifacts": {
     "wasmUrl": "oci://ghcr.io/portakiapp/portaki-module-sections",
-    "guestEsmUrl": "https://esm.sh/@portaki/module-sections@1.2.7"
+    "guestEsmUrl": "https://esm.sh/@portaki/module-sections@1.3.1"
   }
 }

package/portaki.module.json

@@ -9,7 +9,7 @@
     "fr": "Blocs de contenu riches (TipTap) pour le carnet d’accueil invité.",
     "en": "Rich content blocks (TipTap) for the guest welcome book."
   },
-  "version": "1.2.7",
+  "version": "1.3.1",
   "releaseNotesUrl": "https://github.com/PortakiApp/portaki-modules/releases",
   "changelog": [
     {
@@ -44,7 +44,7 @@
   "portakiVersionMin": "1.0.0",
   "requiresHostSdk": "3.0.0",
   "database": {
-    "schemaVersion": "1.0.1"
+    "schemaVersion": "1.0.2"
   },
   "license": "AGPL-3.0",
   "repository": "https://github.com/PortakiApp/portaki-modules",
@@ -122,6 +122,6 @@
   },
   "artifacts": {
     "wasmUrl": "oci://ghcr.io/portakiapp/portaki-module-sections",
-    "guestEsmUrl": "https://esm.sh/@portaki/module-sections@1.2.7"
+    "guestEsmUrl": "https://esm.sh/@portaki/module-sections@1.3.1"
   }
 }

package/src/components/SectionsGuestView.tsx

@@ -16,10 +16,6 @@ type SectionRow = {
   contentEn: unknown
 }
 
-type ListResponse = {
-  sections: SectionRow[]
-}
-
 const htmlExtensions = [StarterKit]
 
 function contentToHtml(raw: unknown): string {
@@ -33,7 +29,7 @@ function contentToHtml(raw: unknown): string {
 }
 
 export function SectionsGuestView({ lang }: { lang: LangCode }) {
-  const { data, loading, error } = usePortakiQuery<ListResponse>('sections.list', {})
+  const { data, loading, error } = usePortakiQuery<SectionRow[]>('sections.list', {})
 
   if (loading) {
     return (
@@ -43,13 +39,13 @@ export function SectionsGuestView({ lang }: { lang: LangCode }) {
     )
   }
 
-  if (error != null || !data?.sections?.length) {
+  if (error != null || !data?.length) {
     return null
   }
 
   return (
     <div className="space-y-10">
-      {data.sections.map((section) => {
+      {data.map((section) => {
         const title = lang === 'en' ? section.titleEn || section.titleFr : section.titleFr
         const html = contentToHtml(lang === 'en' ? section.contentEn : section.contentFr)
         return (

package/src/host/SectionCreateModal.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+import type { HostModuleContext } from '@portaki/sdk'
+import { useEffect, useState } from 'react'
+
+import type {
+  SectionContentPresetId,
+  SectionCreateModalDesign,
+  SectionTemplateDesign,
+} from './sections-host.types'
+
+export type SectionCreatePayload = {
+  titleFr: string
+  titleEn: string
+  contentPreset: SectionContentPresetId
+}
+
+type Props = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  design: SectionCreateModalDesign
+  onCreate: (payload: SectionCreatePayload) => Promise<void>
+  creating?: boolean
+  shell: HostModuleContext['shell']
+}
+
+export function SectionCreateModal({
+  open,
+  onOpenChange,
+  design,
+  onCreate,
+  creating = false,
+  shell,
+}: Props) {
+  const {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    Button,
+    Input,
+    cn,
+  } = shell
+
+  const defaultTemplate =
+    design.templates.find((t) => t.id === design.defaultTemplateId) ?? design.templates[0]
+
+  const [selectedId, setSelectedId] = useState(defaultTemplate?.id ?? '')
+  const [titleFr, setTitleFr] = useState(defaultTemplate?.titleFr ?? '')
+
+  const selected = design.templates.find((t) => t.id === selectedId) ?? defaultTemplate
+
+  useEffect(() => {
+    if (!open || !defaultTemplate) {
+      return
+    }
+    setSelectedId(defaultTemplate.id)
+    setTitleFr(defaultTemplate.titleFr)
+  }, [open, defaultTemplate])
+
+  function selectTemplate(template: SectionTemplateDesign) {
+    setSelectedId(template.id)
+    setTitleFr(template.titleFr)
+  }
+
+  async function handleSubmit() {
+    if (!selected || !titleFr.trim()) {
+      return
+    }
+    await onCreate({
+      titleFr: titleFr.trim(),
+      titleEn: selected.titleEn,
+      contentPreset: selected.contentPreset,
+    })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex max-h-[min(92vh,calc(100%-80px))] max-w-[min(96vw,920px)] flex-col gap-0 overflow-hidden p-0">
+        <DialogHeader className="shrink-0 px-[26px] pb-4 pt-6">
+          <DialogTitle className="font-heading text-[22px] font-semibold tracking-tight">
+            {design.titleFr}
+          </DialogTitle>
+          <DialogDescription className="text-[13px] leading-relaxed text-[var(--text-muted)]">
+            {design.subtitleFr}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="min-h-0 flex-1 overflow-y-auto px-[26px] pb-4">
+          <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
+            {design.templates.map((template) => {
+              const active = template.id === selectedId
+              return (
+                <button
+                  key={template.id}
+                  type="button"
+                  onClick={() => selectTemplate(template)}
+                  className={cn(
+                    'rounded-xl border px-3 py-3 text-left transition-colors',
+                    active
+                      ? 'border-[var(--amber)] bg-[var(--color-amber-soft)] shadow-[inset_0_0_0_1px_rgba(245,158,11,0.35)]'
+                      : 'border-[var(--border)] bg-white hover:border-[var(--border-md)] hover:bg-[var(--bg-muted)]/40',
+                  )}
+                >
+                  <span className="text-[22px] leading-none" aria-hidden>
+                    {template.icon}
+                  </span>
+                  <p className="mt-2 font-heading text-[14px] font-semibold leading-snug text-[var(--text)]">
+                    {template.titleFr}
+                  </p>
+                  <p className="mt-1 text-[12px] leading-snug text-[var(--text-muted)]">
+                    {template.descriptionFr}
+                  </p>
+                </button>
+              )
+            })}
+          </div>
+
+          <div className="mt-5">
+            <label className="mb-1.5 block text-[13px] font-medium text-[var(--text)]">
+              {design.titleFieldLabelFr}
+            </label>
+            <Input
+              value={titleFr}
+              onChange={(e) => setTitleFr(e.target.value)}
+              placeholder={selected?.titleFr}
+              className="h-11"
+            />
+            <p className="mt-1.5 text-[12px] text-[var(--text-muted)]">{design.titleFieldHintFr}</p>
+          </div>
+
+          <p className="mt-4 text-[12px] text-[var(--text-muted)]">{design.footerHintFr}</p>
+        </div>
+
+        <DialogFooter className="shrink-0 flex-row items-center justify-end gap-2 border-t border-[var(--border)] bg-[var(--bg-surface)] px-[26px] py-4">
+          <Button
+            type="button"
+            variant="ghost"
+            className="text-[var(--text-muted)]"
+            disabled={creating}
+            onClick={() => onOpenChange(false)}
+          >
+            {design.cancelLabelFr}
+          </Button>
+          <Button
+            type="button"
+            className="bg-[var(--amber)] font-semibold text-[var(--text)] hover:bg-[var(--amber-solid-hover)]"
+            disabled={creating || !titleFr.trim()}
+            onClick={() => void handleSubmit()}
+          >
+            {creating ? 'Création…' : design.submitLabelFr}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}