@measured/puck-field-contentful 0.14.0-canary.053d4c6

package/README.md

@@ -0,0 +1,132 @@
+# field-contentful
+
+Select [entries](https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/entries) from a [Contentful](https://www.contentful.com) space.
+
+## Quick start
+
+```sh
+npm i @measured/puck-field-contentful
+```
+
+```jsx
+import createFieldContentful from "@measured/puck-field-contentful";
+
+const config = {
+  components: {
+    Example: {
+      fields: {
+        movie: createFieldContentful("movies", {
+          space: "my_space",
+          accessToken: "abcdefg123456",
+        }),
+      },
+      render: ({ data }) => {
+        return <p>{data?.fields.title || "No data selected"}</p>;
+      },
+    },
+  },
+};
+```
+
+## Args
+
+| Param                         | Example  | Type   | Status   |
+| ----------------------------- | -------- | ------ | -------- |
+| [`contentType`](#contenttype) | `movies` | String | Required |
+| [`options`](#options)         | `{}`     | Object | Required |
+
+### Required args
+
+#### `contentType`
+
+ID of the Contentful [Content Type](https://www.contentful.com/help/content-model-and-content-type/) to query.
+
+#### `options`
+
+| Param                                      | Example                                 | Type                                                            | Status                         |
+| ------------------------------------------ | --------------------------------------- | --------------------------------------------------------------- | ------------------------------ |
+| [`accessToken`](#optionsaccesstoken)       | `"abc123"`                              | String                                                          | Required (unless using client) |
+| [`space`](#optionsspace)                   | `"my-space"`                            | String                                                          | Required (unless using client) |
+| [`client`](#optionsclient)                 | `createClient()`                        | [ContentfulClientApi](https://www.npmjs.com/package/contentful) | -                              |
+| [`filterFields`](#optionsfilterfields)     | `{ "rating[gte]": { type: "number" } }` | Object                                                          | -                              |
+| [`initialFilters`](#optionsinitialfilters) | `{ "rating[gte]": 1 }`                  | Object                                                          | -                              |
+| [`titleField`](#optionstitlefield)         | `"name"`                                | String                                                          | -                              |
+
+##### `options.accessToken`
+
+Your Contentful access token.
+
+##### `options.space`
+
+The id for the Contentful space that contains your content.
+
+##### `options.client`
+
+A Contentful client as created by the [`contentful` Node.js package](https://www.npmjs.com/package/contentful). You can use this instead of `accessToken` and `space` if you want to reuse your client, or customise it more fully.
+
+##### `options.filterFields`
+
+An object describing which [`filterFields`](https://puckeditor.com/docs/api-reference/fields/external#filterfields) to render and pass the result directly to Contentful as [search parameters](https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/search-parameters).
+
+```jsx
+createFieldContentful("movies", {
+  // ...
+  filterFields: {
+    // Filter the "rating" field by value greater than the user input
+    "fields.rating[gte]": {
+      type: "number",
+    },
+  },
+});
+```
+
+##### `options.initialFilters`
+
+The initial values for the filters defined in [`filterFields`](#optionsfilterfields). This data is passed directly directly to Contentful as [search parameters](https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/search-parameters).
+
+```jsx
+createFieldContentful("movies", {
+  // ...
+  initialFilters: {
+    "fields.rating[gte]": 1,
+    select: "name,rating", // Can include search parameters not included in filterFields
+  },
+});
+```
+
+##### `options.titleField`
+
+The field to use as the title for the selected item. Defaults to `"title"`.
+
+```jsx
+createFieldContentful("movies", {
+  // ...
+  titleField: "name",
+});
+```
+
+## Returns
+
+An [External field](https://puckeditor.com/docs/api-reference/fields/external) type that loads Contentful [entries](https://contentful.github.io/contentful.js/contentful/10.6.16/types/Entry.html).
+
+## TypeScript
+
+You can use the `Entry` type for data loaded via Contentful:
+
+```tsx
+import createFieldContentful, { Entry } from "@/field-contentful";
+
+type MyProps = {
+  Example: {
+    movie: Entry<{ title: string; description: string; rating: number }>;
+  };
+};
+
+const config: Config<MyProps> = {
+  // ...
+};
+```
+
+## License
+
+MIT © [Measured Corporation Ltd](https://measured.co)

package/dist/index.d.ts

@@ -0,0 +1,123 @@
+import { ReactElement } from 'react';
+import { BaseEntry, ContentfulClientApi } from 'contentful';
+export { createClient } from 'contentful';
+
+type FieldOption = {
+    label: string;
+    value: string | number | boolean;
+};
+type FieldOptions = Array<FieldOption> | ReadonlyArray<FieldOption>;
+type BaseField = {
+    label?: string;
+};
+type TextField = BaseField & {
+    type: "text";
+};
+type NumberField = BaseField & {
+    type: "number";
+    min?: number;
+    max?: number;
+};
+type TextareaField = BaseField & {
+    type: "textarea";
+};
+type SelectField = BaseField & {
+    type: "select";
+    options: FieldOptions;
+};
+type RadioField = BaseField & {
+    type: "radio";
+    options: FieldOptions;
+};
+type ArrayField<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = BaseField & {
+    type: "array";
+    arrayFields: {
+        [SubPropName in keyof Props[0]]: Field<Props[0][SubPropName]>;
+    };
+    defaultItemProps?: Props[0];
+    getItemSummary?: (item: Props[0], index?: number) => string;
+    max?: number;
+    min?: number;
+};
+type ObjectField<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = BaseField & {
+    type: "object";
+    objectFields: {
+        [SubPropName in keyof Props]: Field<Props[SubPropName]>;
+    };
+};
+type Adaptor<AdaptorParams = {}, TableShape extends Record<string, any> = {}, PropShape = TableShape> = {
+    name: string;
+    fetchList: (adaptorParams?: AdaptorParams) => Promise<TableShape[] | null>;
+    mapProp?: (value: TableShape) => PropShape;
+};
+type ExternalFieldWithAdaptor<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = BaseField & {
+    type: "external";
+    placeholder?: string;
+    adaptor: Adaptor<any, any, Props>;
+    adaptorParams?: object;
+    getItemSummary: (item: Props, index?: number) => string;
+};
+type ExternalField<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = BaseField & {
+    type: "external";
+    placeholder?: string;
+    fetchList: (params: {
+        query: string;
+        filters: Record<string, any>;
+    }) => Promise<any[] | null>;
+    mapProp?: (value: any) => Props;
+    mapRow?: (value: any) => Record<string, string | number>;
+    getItemSummary?: (item: Props, index?: number) => string;
+    showSearch?: boolean;
+    initialQuery?: string;
+    filterFields?: Record<string, Field>;
+    initialFilters?: Record<string, any>;
+};
+type CustomField<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = BaseField & {
+    type: "custom";
+    render: (props: {
+        field: CustomField;
+        name: string;
+        value: any;
+        onChange: (value: Props) => void;
+        readOnly?: boolean;
+    }) => ReactElement;
+};
+type Field<Props extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> = TextField | NumberField | TextareaField | SelectField | RadioField | ArrayField<Props> | ObjectField<Props> | ExternalField<Props> | ExternalFieldWithAdaptor<Props> | CustomField;
+
+type Entry<Fields extends Record<string, any> = {}> = BaseEntry & {
+    fields: Fields;
+};
+declare function createFieldContentful<T extends Entry = Entry>(contentType: string, options?: {
+    client?: ContentfulClientApi<undefined>;
+    space?: string;
+    accessToken?: string;
+    titleField?: string;
+    filterFields?: ExternalField["filterFields"];
+    initialFilters?: ExternalField["initialFilters"];
+}): ExternalField<T>;
+
+export { Entry, createFieldContentful, createFieldContentful as default };

package/dist/index.js

@@ -0,0 +1,120 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// index.ts
+var field_contentful_exports = {};
+__export(field_contentful_exports, {
+  createClient: () => import_contentful.createClient,
+  createFieldContentful: () => createFieldContentful,
+  default: () => field_contentful_default
+});
+module.exports = __toCommonJS(field_contentful_exports);
+
+// ../tsup-config/react-import.js
+var import_react = __toESM(require("react"));
+
+// index.ts
+var import_contentful = require("contentful");
+function createFieldContentful(contentType, options = {}) {
+  const {
+    space,
+    accessToken,
+    titleField = "title",
+    filterFields,
+    initialFilters
+  } = options;
+  if (!options.client) {
+    if (!space || !accessToken) {
+      throw new Error(
+        'field-contentful: Must either specify "client", or "space" and "accessToken"'
+      );
+    }
+  }
+  const client = options.client || (0, import_contentful.createClient)({ space, accessToken });
+  const field = {
+    type: "external",
+    placeholder: "Select from Contentful",
+    showSearch: true,
+    fetchList: (_0) => __async(this, [_0], function* ({ query, filters = {} }) {
+      const entries = yield client.getEntries(__spreadProps(__spreadValues({}, filters), {
+        content_type: contentType,
+        query
+      }));
+      return entries.items;
+    }),
+    mapRow: ({ fields }) => fields,
+    getItemSummary: (item) => item.fields[titleField],
+    filterFields,
+    initialFilters
+  };
+  return field;
+}
+var field_contentful_default = createFieldContentful;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createClient,
+  createFieldContentful
+});

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@measured/puck-field-contentful",
+  "version": "0.14.0-canary.053d4c6",
+  "author": "Measured Corporation Ltd <hello@measured.co>",
+  "repository": "measuredco/puck",
+  "bugs": "https://github.com/measuredco/puck/issues",
+  "homepage": "https://puckeditor.com",
+  "private": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "build": "rm -rf dist && tsup index.ts",
+    "prepare": "yarn build"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@measured/puck": "^0.14.0-canary.053d4c6",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "contentful": "^10.8.6",
+    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
+    "tsconfig": "*",
+    "tsup-config": "*",
+    "typescript": "^4.5.2"
+  },
+  "peerDependencies": {
+    "@measured/puck": "^0.13.0",
+    "contentful": "^10.0.0",
+    "react": "^17.0.0 || ^18.0.0"
+  }
+}