WEB-111 Add responsive styling system with breakpoint selection

Author: wlenig

prisma/seed.ts

@@ -1,8 +1,9 @@
 import "dotenv/config";
-import { Prisma, PrismaClient } from "../src/generated/prisma/client";
+import { PrismaClient } from "../src/generated/prisma/client";
 import { PrismaPg } from "@prisma/adapter-pg";
 import fs from "fs";
 import path from "path";
+import type { Prisma } from "../src/generated/prisma/client";
 
 const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL });
 const prisma = new PrismaClient({ adapter });

src/app/editor/[id]/[slug]/EditorPage.tsx

@@ -5,6 +5,7 @@ import { notFound } from "next/navigation";
 import { Client } from "./client";
 import { getDocumentById } from "../../../../lib/documents/queries";
 import { getEditorSlug, getEditorUrl } from "../../../../lib/editor-url";
+import { createEmptyPuckData } from "../../../../lib/puck/utils";
 
 export default async function EditorPage({
   documentId,
@@ -63,5 +64,5 @@ function resolveVersion(
     return { data: versions[0].content as Data, versionId: versions[0].id };
   }
 
-  return { data: { content: [], root: {} } as Data };
+  return { data: createEmptyPuckData() };
 }

src/app/editor/[id]/[slug]/client.tsx

@@ -45,13 +45,12 @@ export function Client({
 }: {
   documentId: number;
   documentName: string;
-  data: Partial<Data>;
+  data: Data;
   versionId?: number;
   publishedVersionId?: number;
   versions: Version[];
   isArchived: boolean;
 }) {
-  const [currentData, setCurrentData] = useState<Data>(data as Data);
   const [versions, setVersions] = useState(initialVersions);
   const [versionId, setVersionId] = useState(initialVersionId);
   const [publishedVersionId, setPublishedVersionId] = useState(initialPublishedVersionId);
@@ -67,7 +66,7 @@ export function Client({
     >
       <Puck
         config={config}
-        data={currentData}
+        data={data}
         ui={{plugin: {current: "version-plugin"}}}
         plugins={[VersionPlugin, blocksPlugin(), outlinePlugin()]}
         permissions={isArchived
@@ -78,9 +77,6 @@ export function Client({
           actionBar: ActionBarOverride,
           headerActions: SaveButton
         }}
-        onChange={(data) => {
-          setCurrentData(data);
-        }}
       />
     </DocumentContext.Provider>
   );

src/app/styles.css

@@ -2,6 +2,13 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 
+@source inline("{md:,lg:,}p-{0,1,2,4,6,8,12}");
+@source inline("{md:,lg:,}gap-{0,1,2,4,6,8,12}");
+@source inline("{md:,lg:,}grid-cols-{1,2,3,4,5,6}");
+@source inline("{md:,lg:,}grid-rows-{none,1,2,3,4,5,6}");
+@source inline("{md:,lg:,}auto-rows-{auto,[0]}");
+@source inline("{md:,lg:,}overflow-{visible,hidden}");
+
 @custom-variant dark (&:is(.dark *));
 
 @theme {

src/components/puck/button.tsx

@@ -1,19 +1,24 @@
 import type { ComponentConfig } from "@puckeditor/core";
 import { Button } from "@/components/ui/button";
-import { selectFrom } from "@/lib/puck/tokens";
+import { defineProps, field } from "@/components/puck/define-props";
+import { defineToken, type TokenValue } from "@/lib/puck/tokens";
 
-const variantOptions = [
-  "default",
-  "secondary",
-  "outline",
-  "ghost",
-  "destructive",
-  "link",
-] as const;
-type Variant = (typeof variantOptions)[number];
+const variant = defineToken({
+  default:     "Default",
+  secondary:   "Secondary",
+  outline:     "Outline",
+  ghost:       "Ghost",
+  destructive: "Destructive",
+  link:        "Link",
+});
+type Variant = TokenValue<typeof variant>;
 
-const sizeOptions = ["sm", "default", "lg"] as const;
-type Size = (typeof sizeOptions)[number];
+const size = defineToken({
+  sm:      "Small",
+  default: "Default",
+  lg:      "Large",
+}, "default");
+type Size = TokenValue<typeof size>;
 
 type PuckButtonProps = {
   label: string;
@@ -22,31 +27,19 @@ type PuckButtonProps = {
   size: Size;
 };
 
+const props = defineProps({
+  label: field.raw({ type: "text", label: "Label" } as const, "Click me"),
+  href: field.raw({ type: "text", label: "Link URL" } as const, ""),
+  variant: field.select(variant, { label: "Variant" }),
+  size: field.select(size, { label: "Size" }),
+});
+
 export const PuckButton: ComponentConfig<PuckButtonProps> = {
   label: "Button",
-  fields: {
-    label: { type: "text", label: "Label" },
-    href: { type: "text", label: "Link URL" },
-    variant: selectFrom(variantOptions, "Variant"),
-    size: {
-      type: "select",
-      label: "Size",
-      options: [
-        { label: "Small", value: "sm" },
-        { label: "Default", value: "default" },
-        { label: "Large", value: "lg" },
-      ],
-    },
-  },
-  defaultProps: {
-    label: "Click me",
-    href: "",
-    variant: "default",
-    size: "default",
-  },
-  render: ({ label, href, variant, size }) => {
+  ...props,
+  render: ({ label, href, variant: v, size: s }) => {
     const button = (
-      <Button variant={variant} size={size}>
+      <Button variant={v} size={s}>
         {label}
       </Button>
     );

src/components/puck/columns.tsx

@@ -1,92 +1,59 @@
 import type { ComponentConfig } from "@puckeditor/core";
-import { cva } from "class-variance-authority";
-import { cn } from "@/lib/utils";
-import { fields, gapVariants, type Spacing } from "@/lib/puck/tokens";
+import { defineProps, responsive, field } from "@/components/puck/define-props";
+import { columnCount, spacing, type ColumnCount, type Spacing } from "@/lib/puck/tokens";
+import type { ResponsiveValue } from "@/lib/puck/responsive";
+import { getGridClassName, getMaxCols } from "@/components/puck/layout";
 
-const columnValues = ["2", "3", "4", "5", "6"] as const;
-type ColumnCount = (typeof columnValues)[number];
-
-const columnsVariants = cva("grid", {
-  variants: {
-    columns: {
-      "2": "grid-cols-1 md:grid-cols-2",
-      "3": "grid-cols-1 md:grid-cols-3",
-      "4": "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
-      "5": "grid-cols-1 md:grid-cols-3 lg:grid-cols-5",
-      "6": "grid-cols-1 md:grid-cols-3 lg:grid-cols-6",
-    },
-    gap: gapVariants,
-  },
-  defaultVariants: {
-    columns: "2",
-    gap: "md",
-  },
-});
+type SlotKey = `column${ColumnCount}`;
 
 type ColumnsProps = {
-  column1: any;
-  column2: any;
-  column3: any;
-  column4: any;
-  column5: any;
-  column6: any;
-  columns: ColumnCount;
-  gap: Spacing;
+  [K in SlotKey]: any;
+} & {
+  columns: ResponsiveValue<ColumnCount>;
+  gap: ResponsiveValue<Spacing>;
 };
 
-const slotField = { type: "slot" as const };
+const slotField = { type: "slot" } as const;
+const columnSlotKeys = columnCount.options.map(
+  ({ value }) => `column${value}` as SlotKey,
+);
+
+const columnSlotFields = Object.fromEntries(
+  columnSlotKeys.map((key) => [key, slotField]),
+) as Record<SlotKey, typeof slotField>;
+
+const props = defineProps({
+  columns: responsive.token(columnCount, { label: "Columns", default: { base: "1", md: "2" } }),
+  gap: responsive.token(spacing, { label: "Gap", default: "md" }),
+});
 
 export const Columns: ComponentConfig<ColumnsProps> = {
   label: "Columns",
-  fields: {
-    column1: slotField,
-    column2: slotField,
-    column3: slotField,
-    column4: slotField,
-    column5: slotField,
-    column6: slotField,
-    columns: {
-      type: "select",
-      label: "Columns",
-      options: columnValues.map((v) => ({ label: v, value: v })),
-    },
-    gap: fields.gap(),
-  },
-  defaultProps: {
-    columns: "2",
-    gap: "md",
-  } as ColumnsProps,
+  fields: { ...columnSlotFields, ...props.fields },
+  defaultProps: props.defaultProps as ColumnsProps,
+  // Hide column slot fields that exceed the selected column count,
+  // so the editor sidebar only shows slots that are actually rendered.
   resolveFields: (data) => {
     const f = { ...Columns.fields! };
-    const colCount = parseInt(data.props.columns ?? "2", 10);
+    const columns = data.props.columns ?? { base: "1", md: "2" };
+    const maxCols = getMaxCols(columns);
 
-    f.column1 = { ...f.column1, visible: colCount >= 1 };
-    f.column2 = { ...f.column2, visible: colCount >= 2 };
-    f.column3 = { ...f.column3, visible: colCount >= 3 };
-    f.column4 = { ...f.column4, visible: colCount >= 4 };
-    f.column5 = { ...f.column5, visible: colCount >= 5 };
-    f.column6 = { ...f.column6, visible: colCount >= 6 };
+    for (const [index, key] of columnSlotKeys.entries()) {
+      f[key] = { ...f[key], visible: index < maxCols };
+    }
 
     return f;
   },
-  render: ({
-    column1: Column1,
-    column2: Column2,
-    column3: Column3,
-    column4: Column4,
-    column5: Column5,
-    column6: Column6,
-    columns,
-    gap,
-  }) => {
-    const colCount = parseInt(columns ?? "2", 10);
-    const columnSlots = [Column1, Column2, Column3, Column4, Column5, Column6];
+  render: ({ columns, gap, ...slots }) => {
+    const maxCols = getMaxCols(columns);
+    const slotMap = slots as Record<SlotKey, any>;
 
     return (
-      <div className={cn(columnsVariants({ columns, gap }))}>
-        {columnSlots
-          .slice(0, colCount)
-          .map((Col, i) => Col && <Col key={i} />)}
+      <div className={getGridClassName({ columns, rows: { base: "auto" }, gap })}>
+        {columnSlotKeys.slice(0, maxCols).map((key) => {
+          const Col = slotMap[key];
+          return Col && <Col key={key} />;
+        })}
       </div>
     );
   },