WEB-111 Use Slot type where possible, add builder for slot fields, add tailwind hints

Author: wlenig

src/app/styles.css

@@ -2,7 +2,7 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 
-@source inline("{md:,lg:,}p-{0,1,2,4,6,8,12}");
+@source inline("{md:,lg:,}{p,px,py}-{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}");

src/components/puck/button.tsx

@@ -28,8 +28,8 @@ type PuckButtonProps = {
 };
 
 const props = defineProps({
-  label: field.raw({ type: "text", label: "Label" } as const, "Click me"),
-  href: field.raw({ type: "text", label: "Link URL" } as const, ""),
+  label: field.raw({ type: "text", label: "Label" }, "Click me"),
+  href: field.raw({ type: "text", label: "Link URL" }, ""),
   variant: field.select(variant, { label: "Variant" }),
   size: field.select(size, { label: "Size" }),
 });

src/components/puck/columns.tsx

@@ -1,4 +1,4 @@
-import type { ComponentConfig } from "@puckeditor/core";
+import type { ComponentConfig, Slot, SlotComponent } from "@puckeditor/core";
 import { defineProps, responsive, field } from "@/lib/puck/define-props";
 import { columnCount, gap, type ColumnCount, type Spacing } from "@/lib/puck/tokens";
 import type { ResponsiveValue } from "@/lib/puck/responsive";
@@ -7,7 +7,7 @@ import { getGridClassName, getMaxCols } from "@/lib/puck/layout";
 type SlotKey = `column${ColumnCount}`;
 
 type ColumnsProps = {
-  [K in SlotKey]: any;
+  [K in SlotKey]: Slot;
 } & {
   columns: ResponsiveValue<ColumnCount>;
   gap: ResponsiveValue<Spacing>;
@@ -22,6 +22,10 @@ const columnSlotFields = Object.fromEntries(
   columnSlotKeys.map((key) => [key, slotField]),
 ) as Record<SlotKey, typeof slotField>;
 
+const columnSlotDefaults = Object.fromEntries(
+  columnSlotKeys.map((key) => [key, [] as Slot]),
+) as Record<SlotKey, Slot>;
+
 const props = defineProps({
   columns: responsive.token(columnCount, { label: "Columns", default: { base: "1", md: "2" } }),
   gap: responsive.token(gap, { label: "Gap", default: "md" }),
@@ -30,7 +34,7 @@ const props = defineProps({
 export const Columns: ComponentConfig<ColumnsProps> = {
   label: "Columns",
   fields: { ...columnSlotFields, ...props.fields },
-  defaultProps: props.defaultProps as ColumnsProps,
+  defaultProps: { ...columnSlotDefaults, ...props.defaultProps },
   // Hide column slot fields that exceed the selected column count,
   // so the editor sidebar only shows slots that are actually rendered.
   resolveFields: (data) => {
@@ -46,7 +50,7 @@ export const Columns: ComponentConfig<ColumnsProps> = {
   },
   render: ({ columns, gap, ...slots }) => {
     const maxCols = getMaxCols(columns);
-    const slotMap = slots as Record<SlotKey, any>;
+    const slotMap = slots as Record<SlotKey, SlotComponent>;
 
     return (
       <div className={getGridClassName({ columns, rows: { base: "auto" }, gap })}>

src/components/puck/container.tsx

@@ -1,4 +1,4 @@
-import type { ComponentConfig } from "@puckeditor/core";
+import type { ComponentConfig, Slot } from "@puckeditor/core";
 import type { ElementType } from "react";
 import {
   getContainerSlotClassName,
@@ -21,12 +21,12 @@ const tag = defineToken({
 type Tag = TokenValue<typeof tag>;
 
 type ContainerProps = ContainerStyle & {
-  content: any;
+  content: Slot;
   tag: Tag;
 };
 
 const props = defineProps({
-  content: field.raw({ type: "slot" } as const),
+  content: field.slot(),
   layout: field.radio(layout, { label: "Layout" }),
   padding: responsive.token(padding, { label: "Padding", default: "md" }),
   gap: responsive.token(gap, { label: "Gap", default: "md" }),

src/components/puck/grid.tsx

@@ -1,18 +1,18 @@
-import type { ComponentConfig } from "@puckeditor/core";
+import type { ComponentConfig, Slot } from "@puckeditor/core";
 import { defineProps, responsive, field } from "@/lib/puck/define-props";
 import type { ResponsiveValue } from "@/lib/puck/responsive";
 import { columnCount, gap, gridRows, type ColumnCount, type Spacing, type GridRows } from "@/lib/puck/tokens";
 import { getGridClassName } from "@/lib/puck/layout";
 
 type GridProps = {
-  content: any;
+  content: Slot;
   columns: ResponsiveValue<ColumnCount>;
   rows: ResponsiveValue<GridRows>;
   gap: ResponsiveValue<Spacing>;
 };
 
 const props = defineProps({
-  content: field.raw({ type: "slot" } as const),
+  content: field.slot(),
   columns: responsive.token(columnCount, { label: "Columns", default: "3" }),
   rows: responsive.token(gridRows, { label: "Rows", default: "auto" }),
   gap: responsive.token(gap, { label: "Gap", default: "md" }),

src/components/puck/media.tsx

@@ -29,8 +29,8 @@ type MediaProps = {
 };
 
 const props = defineProps({
-  url: field.raw({ type: "text", label: "URL" } as const, ""),
-  alt: field.raw({ type: "text", label: "Alt text" } as const, ""),
+  url: field.raw({ type: "text", label: "URL" }, ""),
+  alt: field.raw({ type: "text", label: "Alt text" }, ""),
   objectFit: field.select(objectFit, { label: "Object fit" }),
   aspectRatio: field.select(aspectRatio, { label: "Aspect ratio" }),
   radius: field.select(radius, { label: "Corners" }),

src/components/puck/rich-text.tsx

@@ -24,8 +24,8 @@ type RichTextProps = {
 
 const props = defineProps({
   content: field.raw(
-    { type: "richtext", contentEditable: true } as const,
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." as unknown as RichText,
+    { type: "richtext", contentEditable: true },
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   ),
   textColor: field.select(textColor, { label: "Text color", default: "foreground" }),
   align: field.radio(textAlign, { label: "Text align", default: "left" }),

src/components/puck/section.tsx

@@ -1,4 +1,4 @@
-import type { ComponentConfig } from "@puckeditor/core";
+import type { ComponentConfig, Slot } from "@puckeditor/core";
 import type { ResponsiveValue } from "@/lib/puck/responsive";
 import { resolveResponsive } from "@/lib/puck/responsive-tailwind";
 import { cn } from "@/lib/utils";
@@ -16,7 +16,7 @@ import {
 } from "@/lib/puck/tokens";
 
 type SectionProps = {
-  content: any;
+  content: Slot;
   anchorId: string;
   paddingX: ResponsiveValue<Spacing>;
   paddingY: ResponsiveValue<Spacing>;
@@ -27,8 +27,8 @@ type SectionProps = {
 };
 
 const props = defineProps({
-  content: field.raw({ type: "slot" } as const),
-  anchorId: field.raw({ type: "text", label: "Anchor ID" } as const, ""),
+  content: field.slot(),
+  anchorId: field.raw({ type: "text", label: "Anchor ID" }, ""),
   paddingX: responsive.token(paddingX, { label: "Horizontal padding", default: "md" }),
   paddingY: responsive.token(paddingY, { label: "Vertical padding", default: "lg" }),
   gap: responsive.token(gapToken, { label: "Gap", default: "md" }),

src/lib/puck/define-props.test.ts

@@ -44,7 +44,7 @@ describe("prop builders", () => {
 describe("defineProps", () => {
   it("splits mixed prop specs into fields and defaultProps", () => {
     const props = defineProps({
-      content: field.raw({ type: "slot" }),
+      content: field.slot(),
       size: field.select(size, { label: "Size", default: "md" }),
       gap: responsive.token(size, {
         label: "Gap",
@@ -60,7 +60,7 @@ describe("defineProps", () => {
       color: { type: "radio", label: "Color", options: colorToken.options },
     });
     expect(props.defaultProps).toEqual({
-      content: undefined,
+      content: [],
       size: "md",
       gap: { base: "sm", md: "lg" },
       color: "red",

src/lib/puck/define-props.ts

@@ -1,4 +1,4 @@
-import type { CustomField } from "@puckeditor/core";
+import type { CustomField, Slot } from "@puckeditor/core";
 import type { Token, TokenOption } from "@/lib/puck/tokens";
 import type { ResponsiveValue } from "@/lib/puck/responsive";
 import { responsiveField } from "@/components/puck/fields/responsive-field";
@@ -35,6 +35,13 @@ export const responsive = {
 type FieldDescriptor = { type: "select" | "radio"; label: string; options: TokenOption[] };
 
 export const field = {
+  slot(descriptor?: { allow?: string[]; disallow?: string[] }): PropSpec<{ type: "slot" } & typeof descriptor, Slot> {
+    return {
+      field: { type: "slot" as const, ...descriptor },
+      defaultValue: [] as Slot,
+    };
+  },
+
   select<K extends string>(
     token: Token<K>,
     opts: { label: string; default?: NoInfer<K> },
@@ -58,12 +65,11 @@ export const field = {
   raw: fieldRaw,
 };
 
-function fieldRaw<const D>(descriptor: D): PropSpec<D, undefined>;
 function fieldRaw<const D, T>(descriptor: D, defaultValue: T): PropSpec<D, T>;
-function fieldRaw<const D, T>(descriptor: D, defaultValue?: T): PropSpec<D, T | undefined> {
+function fieldRaw<const D, T>(descriptor: D, defaultValue: T): PropSpec<D, T> {
   return {
     field: descriptor,
-    defaultValue: defaultValue as T | undefined,
+    defaultValue,
   };
 }