@bygghammar/cms-platform 0.1.0

package/src/blocks/components/RichTextBlock.tsx

@@ -0,0 +1,79 @@
+import { useT } from "../../i18n";
+import type { LocalizedString } from "../../i18n";
+import { Reveal } from "../../ui/Reveal";
+import type { RichTextProps } from "../types";
+import { sanitizeHtml } from "../../html/sanitize-html";
+
+const TONES: Record<string, string> = {
+  white: "bg-white text-ink",
+  paper: "bg-paper text-ink",
+  ice: "bg-ice text-ink",
+  ink: "bg-ink text-paper",
+};
+
+const WIDTHS: Record<string, string> = {
+  narrow: "max-w-2xl",
+  normal: "max-w-3xl",
+  wide: "max-w-5xl",
+  full: "max-w-none",
+};
+
+const PADDING: Record<string, string> = {
+  none: "py-0",
+  compact: "py-10 md:py-14",
+  normal: "py-20 md:py-28",
+  spacious: "py-28 md:py-40",
+};
+
+/**
+ * Free-form rich text authored in the backoffice WYSIWYG editor.
+ * The stored HTML is sanitized on every render (never trusted as-is).
+ */
+export function RichTextBlock({ props }: { props: RichTextProps }) {
+  const { t } = useT();
+  const tone = props.tone ?? "white";
+  const html = sanitizeHtml(t(props.html as LocalizedString));
+
+  return (
+    <section
+      id={props.anchor || undefined}
+      className={`${TONES[tone] ?? TONES.white} ${PADDING[props.padding ?? "normal"]}`}
+    >
+      <div className="container-editorial">
+        <div
+          className={[
+            WIDTHS[props.width ?? "normal"],
+            props.align === "center" ? "mx-auto text-center" : "",
+          ].join(" ")}
+        >
+          {props.eyebrow || props.title ? (
+            <Reveal>
+              {props.eyebrow ? (
+                <span className="text-[0.7rem] uppercase tracking-[0.22em] opacity-70">
+                  {t(props.eyebrow as LocalizedString)}
+                </span>
+              ) : null}
+              {props.title ? (
+                <h2 className="mt-4 mb-8 font-serif text-[clamp(1.9rem,4vw,3.25rem)] leading-[1.05] tracking-[-0.02em] whitespace-pre-line">
+                  {t(props.title as LocalizedString)}
+                </h2>
+              ) : null}
+            </Reveal>
+          ) : null}
+
+          <Reveal>
+            <div
+              className={[
+                "rte-content",
+                tone === "ink" ? "rte-invert" : "",
+                props.columns === 2 ? "md:columns-2 md:gap-12" : "",
+                props.dropCap ? "rte-dropcap" : "",
+              ].join(" ")}
+              dangerouslySetInnerHTML={{ __html: html }}
+            />
+          </Reveal>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/blocks/icons.ts

@@ -0,0 +1,63 @@
+import {
+  Award,
+  BadgeCheck,
+  Bed,
+  Briefcase,
+  CalendarClock,
+  CalendarCheck,
+  CreditCard,
+  Flame,
+  GlassWater,
+  GraduationCap,
+  Handshake,
+  Heart,
+  Martini,
+  PartyPopper,
+  Plane,
+  ShieldCheck,
+  Sparkles,
+  Star,
+  Sun,
+  Ticket,
+  Users,
+  Wallet,
+  BookOpen,
+  Palmtree,
+  type LucideIcon,
+} from "lucide-react";
+
+/** Curated icon set available to the Icon cards block (backoffice + frontend). */
+export const BLOCK_ICONS: Record<string, LucideIcon> = {
+  award: Award,
+  badgeCheck: BadgeCheck,
+  bed: Bed,
+  bookOpen: BookOpen,
+  briefcase: Briefcase,
+  calendarCheck: CalendarCheck,
+  calendarClock: CalendarClock,
+  creditCard: CreditCard,
+  flame: Flame,
+  glassWater: GlassWater,
+  graduationCap: GraduationCap,
+  handshake: Handshake,
+  heart: Heart,
+  martini: Martini,
+  palmtree: Palmtree,
+  partyPopper: PartyPopper,
+  plane: Plane,
+  shieldCheck: ShieldCheck,
+  sparkles: Sparkles,
+  star: Star,
+  sun: Sun,
+  ticket: Ticket,
+  users: Users,
+  wallet: Wallet,
+};
+
+export type BlockIconName = keyof typeof BLOCK_ICONS;
+
+export const BLOCK_ICON_NAMES = Object.keys(BLOCK_ICONS);
+
+export function resolveBlockIcon(name?: string): LucideIcon {
+  return (name && BLOCK_ICONS[name]) || Sparkles;
+}

package/src/blocks/index.ts

@@ -0,0 +1,13 @@
+export { CabinTabsBlock } from "./components/CabinTabsBlock";
+export { ChecklistBlock } from "./components/ChecklistBlock";
+export { CtaBannerBlock } from "./components/CtaBannerBlock";
+export { FaqBlock } from "./components/FaqBlock";
+export { HeroFullBlock } from "./components/HeroFullBlock";
+export { IconGridBlock } from "./components/IconGridBlock";
+export { ImageMarqueeBlock } from "./components/ImageMarqueeBlock";
+export { InstagramBlock } from "./components/InstagramBlock";
+export { LinkTilesBlock } from "./components/LinkTilesBlock";
+export { MediaSplitBlock } from "./components/MediaSplitBlock";
+export { PriceTableBlock } from "./components/PriceTableBlock";
+export { ProseBlock } from "./components/ProseBlock";
+export { RichTextBlock } from "./components/RichTextBlock";

package/src/blocks/registry.tsx

@@ -0,0 +1,322 @@
+import type { ComponentType } from "react";
+import { FaqBlock } from "./components/FaqBlock";
+import { InstagramBlock } from "./components/InstagramBlock";
+import { ProseBlock } from "./components/ProseBlock";
+import { RichTextBlock } from "./components/RichTextBlock";
+import { ChecklistBlock } from "./components/ChecklistBlock";
+import { IconGridBlock } from "./components/IconGridBlock";
+import { CtaBannerBlock } from "./components/CtaBannerBlock";
+import { MediaSplitBlock } from "./components/MediaSplitBlock";
+import { HeroFullBlock } from "./components/HeroFullBlock";
+import { ImageMarqueeBlock } from "./components/ImageMarqueeBlock";
+import { LinkTilesBlock } from "./components/LinkTilesBlock";
+import { CabinTabsBlock } from "./components/CabinTabsBlock";
+import { PriceTableBlock } from "./components/PriceTableBlock";
+import type {
+  BlockProps,
+  FaqProps,
+  InstagramProps,
+  ProseProps,
+  RichTextProps,
+  ChecklistProps,
+  IconGridProps,
+  CtaBannerProps,
+  MediaSplitProps,
+  HeroFullProps,
+  ImageMarqueeProps,
+  LinkTilesProps,
+  CabinTabsProps,
+  PriceTableProps,
+} from "./types";
+import { BlockPropsProvider } from "./block-props-context";
+
+export type BlockDef = {
+  type: string;
+  label: string;
+  description: string;
+  category: "section" | "content" | "reference";
+  component: ComponentType<{ props: BlockProps }>;
+  defaultProps: BlockProps;
+  /** True when the block reads editable content from its own `props`. */
+  hasInlineContent: boolean;
+};
+
+/**
+ * Wrap a props-context based section component (site-owned sections read their
+ * props from `BlockPropsProvider`).
+ */
+export const wrapBlock = (C: ComponentType) =>
+  function Wrapped({ props }: { props: BlockProps }) {
+    return (
+      <BlockPropsProvider value={props}>
+        <C />
+      </BlockPropsProvider>
+    );
+  };
+
+/**
+ * Blocks shared by every site. Site-specific blocks (course lists, forms,
+ * legacy sections, global refs) are merged in by each site's own registry.
+ * Default copy here is intentionally brand-neutral.
+ */
+export const SHARED_BLOCK_DEFS: Record<string, BlockDef> = {
+  faq: {
+    type: "faq",
+    label: "FAQ",
+    description: "Accordion of questions & answers. Only one open at a time.",
+    category: "content",
+    component: ({ props }) => <FaqBlock props={props as FaqProps} />,
+    defaultProps: {
+      title: { sv: "Vanliga frågor", en: "Frequently asked questions" },
+      items: [],
+    } satisfies FaqProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+  instagram: {
+    type: "instagram",
+    label: "Instagram",
+    description:
+      "Instagram-style image grid or carousel with configurable columns, rows and layout.",
+    category: "content",
+    component: ({ props }) => <InstagramBlock props={props as InstagramProps} />,
+    defaultProps: {
+      title: { sv: "Följ oss på Instagram", en: "Follow us on Instagram" },
+      handle: "",
+      layout: "grid",
+      columnsMobile: 2,
+      columnsTablet: 3,
+      columnsDesktop: 4,
+      rows: 2,
+      gap: "md",
+      aspect: "square",
+      showHeader: true,
+      showOverlay: true,
+      items: [],
+    } satisfies InstagramProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+  prose: {
+    type: "prose",
+    label: "Text section",
+    description:
+      "Editorial long-form text: eyebrow, title, lead and heading/body passages.",
+    category: "content",
+    component: ({ props }) => <ProseBlock props={props as ProseProps} />,
+    defaultProps: {
+      title: { sv: "Rubrik", en: "Heading" },
+      layout: "single",
+      tone: "white",
+      items: [],
+    } satisfies ProseProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+  richText: {
+    type: "richText",
+    label: "Rich text (WYSIWYG)",
+    description:
+      "Free-form text you write or paste in a full editor: headings H1–H6, bold, links, images, colours, fonts, lists, quotes and tables.",
+    category: "content",
+    component: ({ props }) => <RichTextBlock props={props as RichTextProps} />,
+    defaultProps: {
+      html: {
+        sv: "<h2>Rubrik</h2><p>Skriv eller klistra in din text här.</p>",
+        en: "<h2>Heading</h2><p>Write or paste your text here.</p>",
+      },
+      tone: "white",
+      width: "normal",
+      align: "left",
+      padding: "normal",
+      columns: 1,
+      dropCap: false,
+    } satisfies RichTextProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+  checklist: {
+    type: "checklist",
+    label: "Checklist",
+    description:
+      "One or two columns of checkmark lists, e.g. what's included and extra perks.",
+    category: "content",
+    component: ({ props }) => <ChecklistBlock props={props as ChecklistProps} />,
+    defaultProps: {
+      title: { sv: "Vad ingår?", en: "What's included?" },
+      tone: "paper",
+      columns: [],
+    } satisfies ChecklistProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+  iconGrid: {
+    type: "iconGrid",
+    label: "Icon cards",
+    description:
+      "Grid of icon + title cards with optional price/meta line and text. 1 column on mobile, 2–5 on desktop.",
+    category: "content",
+    component: ({ props }) => <IconGridBlock props={props as IconGridProps} />,
+    defaultProps: {
+      title: { sv: "Rubrik", en: "Heading" },
+      tone: "white",
+      columns: 3,
+      iconStyle: "circle",
+      iconAlign: "center",
+      cardStyle: "bordered",
+      items: [],
+    } satisfies IconGridProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+  ctaBanner: {
+    type: "ctaBanner",
+    label: "CTA banner",
+    description: "Call-to-action banner with heading, text and up to two buttons.",
+    category: "content",
+    component: ({ props }) => <CtaBannerBlock props={props as CtaBannerProps} />,
+    defaultProps: {
+      title: { sv: "Redo att boka?", en: "Ready to book?" },
+      tone: "ink",
+      cta: { label: { sv: "Boka nu", en: "Book now" }, href: "/" },
+    } satisfies CtaBannerProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+  heroFull: {
+    type: "heroFull",
+    label: "Hero Section Fullscreen",
+    description:
+      "Fullscreen hero with an image or video background, overlay text in any size, alignment left/centre/right and separate mobile media.",
+    category: "section",
+    component: ({ props }) => <HeroFullBlock props={props as HeroFullProps} />,
+    defaultProps: {
+      eyebrow: { sv: "", en: "" },
+      title: { sv: "Rubrik", en: "Heading" },
+      body: { sv: "", en: "" },
+      mediaType: "image",
+      height: "full",
+      overlay: "medium",
+      textAlign: "left",
+      verticalAlign: "center",
+      textTone: "light",
+      contentWidth: "normal",
+      titleSize: "lg",
+      titleFont: "serif",
+      titleUppercase: false,
+      showScrollCue: true,
+      videoAutoplay: true,
+      videoLoop: true,
+      videoMuted: true,
+    } satisfies HeroFullProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+  mediaSplit: {
+    type: "mediaSplit",
+    label: "Image or video — Left/Right",
+    description:
+      "Split section with image, slideshow or video on one side and editorial text on the other. Mirrorable.",
+    category: "content",
+    component: ({ props }) => <MediaSplitBlock props={props as MediaSplitProps} />,
+    defaultProps: {
+      style: "editorial",
+      eyebrow: { sv: "", en: "" },
+      title: { sv: "Rubrik", en: "Heading" },
+      lead: { sv: "", en: "" },
+      body: { sv: "", en: "" },
+      mediaSide: "left",
+      mediaType: "image",
+      mediaRatio: "50",
+      align: "center",
+      padding: "normal",
+      tone: "white",
+      aspect: "landscape",
+      autoplay: true,
+      intervalMs: 5000,
+      showDots: true,
+      showArrows: true,
+      loop: true,
+      videoAutoplay: true,
+      videoLoop: true,
+      videoMuted: true,
+      slides: [],
+      bullets: [],
+    } satisfies MediaSplitProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+  imageMarquee: {
+    type: "imageMarquee",
+    label: "Image marquee",
+    description:
+      "Columns of photos drifting in opposite directions, with an optional text column beside them.",
+    category: "content",
+    component: ({ props }) => <ImageMarqueeBlock props={props as ImageMarqueeProps} />,
+    defaultProps: {
+      eyebrow: { sv: "" },
+      title: { sv: "Rubrik" },
+      lead: { sv: "" },
+      textPosition: "left",
+      columns: 2,
+      firstDirection: "up",
+      speed: "normal",
+      aspect: "portrait",
+      gap: "md",
+      rounded: false,
+      tone: "white",
+      items: [],
+      items2: [],
+    } satisfies ImageMarqueeProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+  linkTiles: {
+    type: "linkTiles",
+    label: "Link tiles",
+    description:
+      "Row of clickable image tiles with an overlay label — image, text and link are editable per tile.",
+    category: "content",
+    component: ({ props }) => <LinkTilesBlock props={props as LinkTilesProps} />,
+    defaultProps: {
+      tone: "white",
+      columns: 3,
+      gap: "md",
+      aspect: "portrait",
+      overlay: "medium",
+      labelAlign: "center",
+      rounded: false,
+      items: [],
+    } satisfies LinkTilesProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+  cabinTabs: {
+    type: "cabinTabs",
+    label: "Cabin tabs",
+    description:
+      "Clickable categories — each tab has its own text, bullet list and image gallery.",
+    category: "content",
+    component: ({ props }) => <CabinTabsBlock props={props as CabinTabsProps} />,
+    defaultProps: {
+      tone: "white",
+      items: [],
+    } satisfies CabinTabsProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+  priceTable: {
+    type: "priceTable",
+    label: "Price table",
+    description:
+      "Editable price cards — one card per category with a price row per number of guests.",
+    category: "content",
+    component: ({ props }) => <PriceTableBlock props={props as PriceTableProps} />,
+    defaultProps: {
+      tone: "paper",
+      columns: 3,
+      align: "center",
+      
+      groups: [],
+    } satisfies PriceTableProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+};
+
+/**
+ * Build a site registry from the shared blocks plus the site's own defs.
+ * Site defs win on key collisions so a site can override a shared block.
+ */
+export function createBlockRegistry(
+  siteDefs: Record<string, BlockDef> = {},
+): Record<string, BlockDef> {
+  return { ...SHARED_BLOCK_DEFS, ...siteDefs };
+}