docs: add component reference docs

apps/docs/components/Preview/index.tsx

@@ -1,7 +1,7 @@
 export { InputOrGroup } from "@/core/components/InputOrGroup";
 
 import { ReactNode, useReducer, useState } from "react";
-import "@/core/styles/global.css";
+import "@/core/styles.css";
 import { AppProvider, defaultAppState } from "@/core/components/Puck/context";
 import { PuckAction, createReducer } from "@/core/reducer";
 import { InputOrGroup } from "@/core/components/InputOrGroup";
@@ -130,12 +130,14 @@ export const ConfigPreview = ({
               />
             ))}
           </div>
-          <div className={getClassNameConfigPreview("preview")}>
-            {componentConfig.render({
-              ...appState.data["content"][0].props,
-              puck: { renderDropZone: () => <div /> },
-            })}
-          </div>
+          {componentConfig.render && (
+            <div className={getClassNameConfigPreview("preview")}>
+              {componentConfig.render({
+                ...appState.data["content"][0].props,
+                puck: { renderDropZone: () => <div /> },
+              })}
+            </div>
+          )}
         </div>
       )}
     />

apps/docs/pages/docs/api-reference/components.mdx

@@ -1,9 +1,3 @@
 # Components
 
-## DropZone
-
-## FieldLabel
-
-## Puck
-
-## Render
+Puck provides several components to support different integration approaches.

apps/docs/pages/docs/api-reference/components/drop-zone.mdx

@@ -0,0 +1,59 @@
+---
+title: DropZone
+---
+
+# DropZone
+
+Place droppable regions (zones) inside other components to enable nested components.
+
+```tsx {1,9} copy
+import { DropZone } from "@measured/puck";
+
+const config = {
+  components: {
+    Example: {
+      render: () => {
+        return (
+          <div>
+            <DropZone zone="my-content" />
+          </div>
+        );
+      },
+    },
+  },
+};
+```
+
+## Props
+
+| Param           | Example           | Type   | Status   |
+| --------------- | ----------------- | ------ | -------- |
+| [`zone`](#zone) | `zone: "my-zone"` | String | Required |
+
+## Required props
+
+### `zone`
+
+Set the zone identifier for the given DropZone.
+
+Must be unique within this component, but two different components can both define DropZones with the same `zone` value.
+
+```tsx /zone="my-content"/ copy
+const config = {
+  components: {
+    Example: {
+      render: () => {
+        return (
+          <div>
+            <DropZone zone="my-content" />
+          </div>
+        );
+      },
+    },
+  },
+};
+```
+
+## Restrictions
+
+You can't drag between DropZones that don't share a parent component.

apps/docs/pages/docs/api-reference/components/field-label.mdx

@@ -0,0 +1,207 @@
+import { ConfigPreview } from "../../../../components/Preview";
+import { FieldLabel } from "@/core/components/InputOrGroup";
+import { Globe } from "react-feather";
+
+# FieldLabel
+
+Render a styled `label` when creating [`custom` fields](/docs/api-reference/fields/custom).
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      title: {
+        type: "custom",
+        render: () => {
+          return (
+            <FieldLabel label="Title">
+              <input style={{ border: "1px solid black", padding: 4 }} />
+            </FieldLabel>
+          );
+        },
+      },
+    },
+    defaultProps: {
+      title: "Hello, world",
+    },
+  }}
+/>
+
+```tsx {1,4-6} copy
+import { FieldLabel } from "@measured/puck";
+
+const CustomField = () => (
+  <FieldLabel label="Title">
+    <input />
+  </FieldLabel>
+);
+
+const config = {
+  components: {
+    Example: {
+      fields: {
+        title: {
+          type: "custom",
+          render: MyCustomField,
+        },
+      },
+    },
+  },
+};
+```
+
+## Props
+
+| Param                     | Example                | Type             | Status   |
+| ------------------------- | ---------------------- | ---------------- | -------- |
+| [`label`](#label)         | `label: "Title"`       | String           | Required |
+| [`children`](#children)   | `children: <div />`    | ReactNode        | -        |
+| [`className`](#classname) | `className: "MyLabel"` | String           | -        |
+| [`el`](#el)               | `el: false`            | "label" \| "div" | -        |
+| [`icon`](#icon)           | `icon: <svg />`        | ReactNode        | -        |
+| [`readOnly`](#readonly)   | `readOnly: false`      | Boolean          | -        |
+
+## Required props
+
+### `label`
+
+The label string for the fields.
+
+```tsx /label="Title"/ copy
+import { FieldLabel } from "@measured/puck";
+
+const CustomField = () => (
+  <FieldLabel label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+## Optional props
+
+### `children`
+
+A node to render inside the FieldLabel's internal `<label>` element. You can also define your input element as a sibling.
+
+```tsx {5} copy
+import { FieldLabel } from "@measured/puck";
+
+const CustomField = () => (
+  <FieldLabel label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+### `className`
+
+Define a custom class for the field label.
+
+```tsx /className="MyClass"/ copy
+import { FieldLabel } from "@measured/puck";
+
+const CustomField = () => (
+  <FieldLabel className="MyClass" label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+### `el`
+
+Specify whether to render a `label` or `div`. **Defaults to `"label"`**.
+
+```tsx /el="div"/ copy
+import { FieldLabel } from "@measured/puck";
+
+const CustomField = () => (
+  <FieldLabel el="div" label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+### `icon`
+
+Render an icon before the label text. Puck uses [react-feather](https://github.com/feathericons/react-feather) internally.
+
+```tsx /icon={<Globe size="16" />}/ copy
+import { FieldLabel } from "@measured/puck";
+import { Globe } from "react-feather";
+
+const CustomField = () => (
+  <FieldLabel icon={<Globe size="16" />} label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      title: {
+        type: "custom",
+        render: () => {
+          return (
+            <FieldLabel label="Title" icon={<Globe size="16" />}>
+              <input style={{ border: "1px solid black" }} />
+            </FieldLabel>
+          );
+        },
+      },
+    },
+    defaultProps: {
+      title: "Hello, world",
+    },
+  }}
+/>
+
+### `readOnly`
+
+Indicate to the user that this field is in a read-only state by showing a padlock icon to the right of the text.
+
+```tsx /readOnly/1 copy
+import { FieldLabel } from "@measured/puck";
+
+const CustomField = () => (
+  <FieldLabel label="Title" readOnly>
+    <input readOnly />
+  </FieldLabel>
+);
+
+// ...
+```
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      title: {
+        type: "custom",
+        render: () => {
+          return (
+            <div style={{ maxWidth: "max-content" }}>
+              <FieldLabel label="Title" readOnly>
+                <input style={{ border: "1px solid black" }} readOnly />
+              </FieldLabel>
+            </div>
+          );
+        },
+      },
+    },
+    defaultProps: {
+      title: "Hello, world",
+    },
+  }}
+/>