@measured/puck 0.6.2 → 0.7.1-canary.9b15c6b

package/README.md

@@ -16,6 +16,7 @@ Render the editor:
 ```jsx
 // Editor.jsx
 import { Puck } from "@measured/puck";
+import "@measured/puck/dist/index.css";
 
 // Create puck component config
 const config = {
@@ -34,7 +35,10 @@ const config = {
 };
 
 // Describe the initial data
-const initialData = {};
+const initialData = {
+  content: [],
+  root: {},
+};
 
 // Save the data to your database
 const save = (data) => {};
@@ -82,7 +86,7 @@ Puck can be configured to work with plugins. Plugins can extend the functionalit
 
 ### Official plugins
 
-- [`heading-analyzer`](https://github.com/measuredco/puck/tree/main/packages/plugin-heading-analyzer): Analyze the heading outline of your page and be warned when you're not respecting WCAG 2 accessiblity standards.
+- [`heading-analyzer`](https://github.com/measuredco/puck/tree/main/packages/plugin-heading-analyzer): Analyze the heading outline of your page and be warned when you're not respecting WCAG 2 accessibility standards.
 
 ### Developing a plugin
 
@@ -110,6 +114,37 @@ const myPlugin = {
 };
 ```
 
+## Custom fields
+
+Puck supports custom fields using the `custom` field type and `render` method.
+
+In this example, we optionally add the `<FieldLabel>` component to add a label:
+
+```tsx
+import { FieldLabel } from "@measured/puck";
+
+export const MyComponent: ComponentConfig = {
+  fields: {
+    myField: {
+      type: "custom",
+      render: ({ field, name, onChange, value }) => {
+        return (
+          <FieldLabel label={field.label || name}>
+            <input
+              placeholder="Enter text..."
+              type="text"
+              name={name}
+              defaultValue={value}
+              onChange={(e) => onChange(e.currentTarget.value)}
+            ></input>
+          </FieldLabel>
+        );
+      },
+    },
+  },
+};
+```
+
 ## Reference
 
 ### `<Puck>`
@@ -152,7 +187,7 @@ The `Config` object describes which components Puck should render, how they shou
 
 A `Field` represents a user input field shown in the Puck interface.
 
-- **type** (`text` | `textarea` | `number` | `select` | `radio` | `external` | `array`): The input type to render
+- **type** (`text` | `textarea` | `number` | `select` | `radio` | `external` | `array` | `custom`): The input type to render
 - **label** (`text` [optional]): A label for the input. Will use the key if not provided.
 - **arrayFields** (`object`): Object describing sub-fields for items in an `array` input
   - **[fieldName]** (`Field`): The Field objects describing the input data for each item
@@ -163,6 +198,12 @@ A `Field` represents a user input field shown in the Puck interface.
   - **value** (`string` | `number` | `boolean`)
 - **adaptor** (`Adaptor`): Content adaptor if using the `external` input type
 - **adaptorParams** (`object`): Paramaters passed to the adaptor
+- **render** (`Component`): Render a custom field. Receives the props:
+  - **field** (`Field`): Field configuration
+  - **name** (`string`): Name of the field
+  - **value** (`any`): Value for the field
+  - **onChange** (`(value: any) => void`): Callback to change the value
+  - **readOnly** (`boolean` | `undefined`): Whether or not the field should be in readOnly mode
 
 ### `Data`
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type Adaptor<AdaptorParams = {}> = {
@@ -10,7 +10,7 @@ type Field<Props extends {
 } = {
     [key: string]: any;
 }> = {
-    type: "text" | "textarea" | "number" | "select" | "array" | "external" | "radio";
+    type: "text" | "textarea" | "number" | "select" | "array" | "external" | "radio" | "custom";
     label?: string;
     adaptor?: Adaptor;
     adaptorParams?: object;
@@ -19,6 +19,13 @@ type Field<Props extends {
     };
     getItemSummary?: (item: Props, index?: number) => string;
     defaultItemProps?: Props;
+    render?: (props: {
+        field: Field;
+        name: string;
+        value: any;
+        onChange: (value: any) => void;
+        readOnly?: boolean;
+    }) => ReactElement;
     options?: {
         label: string;
         value: string | number | boolean;
@@ -149,4 +156,10 @@ declare function Render({ config, data }: {
     data: Data;
 }): react_jsx_runtime.JSX.Element;
 
-export { Adaptor, Button, ComponentConfig, Config, Data, DefaultComponentProps, DefaultRootProps, Field, Fields, IconButton, Puck, Render };
+declare const FieldLabel: ({ children, icon, label, }: {
+    children?: ReactNode;
+    icon?: ReactNode;
+    label: string;
+}) => react_jsx_runtime.JSX.Element;
+
+export { Adaptor, Button, ComponentConfig, Config, Data, DefaultComponentProps, DefaultRootProps, Field, FieldLabel, Fields, IconButton, Puck, Render };

package/dist/index.js

@@ -147,6 +147,7 @@ var require_classnames = __commonJS({
 var core_exports = {};
 __export(core_exports, {
   Button: () => Button,
+  FieldLabel: () => FieldLabel,
   IconButton: () => IconButton,
   Puck: () => Puck,
   Render: () => Render
@@ -562,6 +563,19 @@ var replace = (list, index, newItem) => {
 var import_react_feather3 = require("react-feather");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var getClassName5 = get_class_name_factory_default("Input", styles_module_default3);
+var FieldLabel = ({
+  children,
+  icon,
+  label
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: getClassName5("label"), children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName5("labelIcon") }),
+      label
+    ] }),
+    children
+  ] });
+};
 var InputOrGroup = ({
   name,
   field,
@@ -734,6 +748,18 @@ var InputOrGroup = ({
       )) })
     ] }) });
   }
+  if (field.type === "custom") {
+    if (!field.render) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName5(), children: field.render({
+      field,
+      name,
+      value,
+      onChange,
+      readOnly
+    }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: getClassName5({ readOnly }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: getClassName5("label"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: getClassName5("labelIcon"), children: [
@@ -1275,6 +1301,11 @@ function Puck({
                         id: "puck-drop-zone",
                         children: [
                           data.content.map((item, i) => {
+                            var _a2;
+                            const Render2 = config.components[item.type] ? config.components[item.type].render : () => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
+                              "No configuration for ",
+                              item.type
+                            ] });
                             return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                               DraggableComponent,
                               {
@@ -1304,17 +1335,11 @@ function Puck({
                                   setData(newData);
                                   e.stopPropagation();
                                 },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { zoom: 0.75 }, children: config.components[item.type] ? config.components[item.type].render(__spreadProps(__spreadValues(__spreadValues({}, config.components[item.type].defaultProps), item.props), {
-                                  editMode: true
-                                })) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                                  "div",
-                                  {
-                                    style: { padding: 48, textAlign: "center" },
-                                    children: [
-                                      "No configuration for ",
-                                      item.type
-                                    ]
-                                  }
+                                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { zoom: 0.75 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                                  Render2,
+                                  __spreadProps(__spreadValues(__spreadValues({}, (_a2 = config.components[item.type]) == null ? void 0 : _a2.defaultProps), item.props), {
+                                    editMode: true
+                                  })
                                 ) })
                               },
                               item.props.id
@@ -1461,6 +1486,7 @@ function Render({ config, data }) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  FieldLabel,
   IconButton,
   Puck,
   Render

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.6.2",
+  "version": "0.7.1-canary.9b15c6b",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",