@plasmicpkgs/plasmic-contentful 0.0.115 → 0.0.117

package/dist/index.mjs

@@ -0,0 +1,498 @@
+// src/index.tsx
+import registerComponent from "@plasmicapp/host/registerComponent";
+import registerGlobalContext from "@plasmicapp/host/registerGlobalContext";
+
+// src/contentful.tsx
+import { documentToHtmlString } from "@contentful/rich-text-html-renderer";
+import {
+  DataProvider,
+  repeatedElement,
+  useSelector
+} from "@plasmicapp/host";
+import { usePlasmicQueryData } from "@plasmicapp/query";
+import { pascalCase } from "change-case";
+import get from "dlv";
+import React, { useContext } from "react";
+
+// src/utils.ts
+var searchParameters = [
+  {
+    value: "[lt]",
+    label: "Less than"
+  },
+  {
+    value: "[lte]",
+    label: "Less than or equal"
+  },
+  {
+    value: "[gt]",
+    label: "Greater than"
+  },
+  {
+    value: "[gte]",
+    label: "Greater than or equal "
+  }
+];
+var uniq = (xs) => Array.from(new Set(xs));
+
+// src/contentful.tsx
+function ensure(x) {
+  if (x === null || x === void 0) {
+    throw new Error(`Value must not be undefined or null`);
+  } else {
+    return x;
+  }
+}
+var modulePath = "@plasmicpkgs/plasmic-contentful";
+var makeDataProviderName = (contentType) => `currentContentful${pascalCase(contentType)}Item`;
+var CredentialsContext = React.createContext(void 0);
+var ContentfulCredentialsProviderMeta = {
+  name: "Contentful CredentialsProvider",
+  displayName: "Contentful Credentials Provider",
+  description: "Any client requesting content from the CDA needs to provide an access token that has access to the environment you're requesting content from. Learn how to [get your API key](https://www.contentful.com/developers/docs/references/authentication/).",
+  importName: "ContentfulCredentialsProvider",
+  importPath: modulePath,
+  props: {
+    space: {
+      type: "string",
+      displayName: "Space",
+      description: "Name of your space",
+      defaultValue: "lmfbwqzbh93n"
+    },
+    accessToken: {
+      type: "string",
+      displayName: "Access Token ",
+      description: "Access Token",
+      defaultValue: "aWvf6oSLTuqxKCxSUpokajdQr84hGQFE6zoJG7DVVLg"
+    },
+    environment: {
+      type: "string",
+      displayName: "Environment",
+      defaultValue: "master"
+    }
+  }
+};
+function ContentfulCredentialsProvider({
+  accessToken,
+  space,
+  environment,
+  children
+}) {
+  return /* @__PURE__ */ React.createElement(CredentialsContext.Provider, { value: { space, accessToken, environment } }, children);
+}
+var ContentfulFetcherMeta = {
+  name: "ContentfulFetcher",
+  displayName: "Contentful Fetcher",
+  importName: "ContentfulFetcher",
+  importPath: modulePath,
+  providesData: true,
+  description: "Fetches Contentful data and repeats content of children once for every row fetched. ",
+  defaultStyles: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr 1fr 1fr",
+    gridRowGap: "8px",
+    gridColumnGap: "8px",
+    padding: "8px",
+    maxWidth: "100%"
+  },
+  props: {
+    children: {
+      type: "slot",
+      defaultValue: {
+        type: "vbox",
+        styles: {
+          padding: "8px"
+        },
+        children: {
+          type: "component",
+          name: "ContentfulField"
+        }
+      }
+    },
+    contentType: {
+      type: "choice",
+      options: (props, ctx) => {
+        var _a, _b;
+        return (_b = (_a = ctx == null ? void 0 : ctx.types) == null ? void 0 : _a.map((type) => {
+          var _a2;
+          return {
+            label: type == null ? void 0 : type.name,
+            value: (_a2 = type == null ? void 0 : type.sys) == null ? void 0 : _a2.id
+          };
+        })) != null ? _b : [];
+      },
+      displayName: "Content type",
+      description: "Content type to be queried."
+    },
+    filterField: {
+      type: "choice",
+      displayName: "Filter field",
+      description: "Field (from Collection) to filter by.",
+      options: (props, ctx) => {
+        var _a;
+        return (_a = ctx == null ? void 0 : ctx.fields) != null ? _a : [];
+      },
+      hidden: (props, ctx) => !props.contentType
+    },
+    searchParameter: {
+      type: "choice",
+      displayName: "Search Parameter",
+      description: "Search Parameter to filter by (see Contentful Content Delivery API documentation for details).",
+      options: (props, ctx) => {
+        var _a;
+        return (_a = ctx == null ? void 0 : ctx.queryOptions) != null ? _a : [];
+      },
+      hidden: (props, ctx) => !props.filterField
+    },
+    filterValue: {
+      type: "string",
+      displayName: "Filter value",
+      description: "Value to filter by, should be of filter field type.",
+      hidden: (props, ctx) => !props.searchParameter
+    },
+    limit: {
+      type: "number",
+      displayName: "Limit",
+      description: "Limit the number of entries that are returned."
+    },
+    include: {
+      type: "number",
+      displayName: "Linked items depth",
+      defaultValueHint: 1,
+      description: "When you have related content (e.g. entries with links to image assets) it's possible to include both search results and related data in a single request. Using the include parameter, you can specify the number of levels to resolve.",
+      max: 10,
+      min: 0
+    },
+    noAutoRepeat: {
+      type: "boolean",
+      displayName: "No auto-repeat",
+      description: "Do not automatically repeat children for every entry.",
+      defaultValue: false
+    },
+    noLayout: {
+      type: "boolean",
+      displayName: "No layout",
+      description: "When set, Contentful Fetcher will not layout its children; instead, the layout set on its parent element will be used. Useful if you want to set flex gap or control container tag type.",
+      defaultValue: false
+    }
+  }
+};
+function ContentfulFetcher({
+  filterField,
+  filterValue,
+  searchParameter,
+  noAutoRepeat,
+  contentType,
+  children,
+  className,
+  limit,
+  include,
+  noLayout,
+  setControlContextData
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const creds = ensure(useContext(CredentialsContext));
+  const cacheKey = JSON.stringify({
+    include,
+    limit,
+    filterField,
+    filterValue,
+    searchParameter,
+    creds
+  });
+  const baseUrl = "https://cdn.contentful.com";
+  const { data: contentTypes } = usePlasmicQueryData(
+    `${cacheKey}/contentTypes`,
+    async () => {
+      const resp = await fetch(
+        `${baseUrl}/spaces/${creds.space}/environments/${creds.environment}/content_types?access_token=${creds.accessToken}`
+      );
+      return resp.json();
+    }
+  );
+  setControlContextData == null ? void 0 : setControlContextData({
+    types: (_a = contentTypes == null ? void 0 : contentTypes.items) != null ? _a : []
+  });
+  const { data: entriesData } = usePlasmicQueryData(
+    contentType ? `${cacheKey}/${contentType}/entriesData` : null,
+    async () => {
+      let query = `/spaces/${creds.space}/environments/${creds.environment}/entries?access_token=${creds.accessToken}&content_type=${contentType}`;
+      if (limit) {
+        query = `${query}&limit=${limit}`;
+      }
+      if (include) {
+        query = `${query}&include=${include}`;
+      }
+      const resp = await fetch(`${baseUrl}${query}`);
+      return resp.json();
+    }
+  );
+  const { data: filteredData } = usePlasmicQueryData(
+    contentType && filterField && filterValue ? `${cacheKey}/${contentType}/filteredData` : null,
+    async () => {
+      const queryPath = `/spaces/${creds.space}/environments/${creds.environment}/entries?access_token=${creds.accessToken}&content_type=${contentType}&fields.${filterField}${searchParameter}=${filterValue}`;
+      const resp = await fetch(`${baseUrl}${queryPath}`);
+      return resp.json();
+    }
+  );
+  if (!creds.space || !creds.accessToken) {
+    return /* @__PURE__ */ React.createElement("div", null, "Please specify a valid API Credentials: Space, Access Token and Environment");
+  }
+  if (!contentTypes) {
+    return /* @__PURE__ */ React.createElement("div", null, "Please configure the Contentful credentials");
+  }
+  if (!entriesData) {
+    return /* @__PURE__ */ React.createElement("div", null, "Please select a content type");
+  }
+  const filterFields = entriesData == null ? void 0 : entriesData.items.flatMap((item) => {
+    const fields = Object.keys(item.fields).filter((field) => {
+      const value = get(item, field);
+      return typeof value !== "object" && field !== "photos";
+    });
+    return fields;
+  });
+  let operators;
+  const matchedFields = Object.values(entriesData.items).map((item) => {
+    const fields = Object.entries(item.fields).find(
+      (el) => el[0] === filterField
+    );
+    return fields;
+  });
+  Object.values(matchedFields).map((model) => Array.isArray(model) ? model : [model]).map((item) => {
+    if (typeof item[1] === "number" && typeof item[1] !== "object") {
+      operators = searchParameters;
+    } else if (typeof item[1] !== "number" && typeof item[1] !== "object" && typeof item[1] === "string") {
+      operators = [
+        {
+          value: "[match]",
+          label: "Full text search"
+        }
+      ];
+    }
+  });
+  setControlContextData == null ? void 0 : setControlContextData({
+    queryOptions: operators != null ? operators : [],
+    types: (_b = contentTypes == null ? void 0 : contentTypes.items) != null ? _b : [],
+    fields: uniq(filterFields != null ? filterFields : [])
+  });
+  if (filterField && !searchParameter) {
+    return /* @__PURE__ */ React.createElement("div", null, "Please specify a Search Parameter");
+  }
+  if (searchParameter && !filterValue) {
+    return /* @__PURE__ */ React.createElement("div", null, "Please specify a Filter value");
+  }
+  function denormalizeData(data) {
+    if (!(data == null ? void 0 : data.items) || !(data == null ? void 0 : data.includes)) {
+      return data;
+    }
+    const entryMap = {};
+    if (data.includes.Entry) {
+      data.includes.Entry.forEach((entry) => {
+        entryMap[entry.sys.id] = entry.fields;
+      });
+    }
+    const itemsWithDenormalizedFields = data.items.map((item) => {
+      var _a2, _b2;
+      const updatedFields = {};
+      for (const fieldName in item.fields) {
+        const fieldValue = item.fields[fieldName];
+        if (Array.isArray(fieldValue)) {
+          const updatedArray = fieldValue.map((arrayItem) => {
+            var _a3, _b3;
+            if (data.includes.Asset && arrayItem && typeof arrayItem === "object" && "sys" in arrayItem && arrayItem.sys.linkType === "Asset") {
+              const fieldId = arrayItem.sys.id;
+              const asset = data.includes.Asset.find(
+                (asset2) => asset2.sys.id === fieldId
+              );
+              if (asset) {
+                return {
+                  ...arrayItem,
+                  url: "https:" + ((_b3 = (_a3 = asset.fields) == null ? void 0 : _a3.file) == null ? void 0 : _b3.url)
+                };
+              } else {
+                console.log(`Asset URL not found for ID: ${fieldId}`);
+              }
+            } else if (data.includes.Entry && arrayItem && typeof arrayItem === "object" && "sys" in arrayItem && arrayItem.sys.linkType === "Entry") {
+              const fieldId = arrayItem.sys.id;
+              if (entryMap[fieldId]) {
+                updatedFields[fieldName] = {
+                  ...fieldValue,
+                  fields: entryMap[fieldId]
+                };
+              } else {
+                console.log(`Entry not found for ID: ${fieldId}`);
+              }
+            }
+            return arrayItem;
+          });
+          updatedFields[fieldName] = updatedArray;
+        } else if (data.includes.Asset && fieldValue && typeof fieldValue === "object" && "sys" in fieldValue && fieldValue.sys.linkType === "Asset") {
+          const fieldId = fieldValue.sys.id;
+          const asset = data.includes.Asset.find(
+            (asset2) => asset2.sys.id === fieldId
+          );
+          if (asset) {
+            updatedFields[fieldName] = {
+              ...fieldValue,
+              url: "https:" + ((_b2 = (_a2 = asset.fields) == null ? void 0 : _a2.file) == null ? void 0 : _b2.url)
+            };
+          } else {
+            console.log(`Asset URL not found for ID: ${fieldId}`);
+          }
+        } else if (data.includes.Entry && fieldValue && typeof fieldValue === "object" && "sys" in fieldValue && fieldValue.sys.linkType === "Entry") {
+          const fieldId = fieldValue.sys.id;
+          if (entryMap[fieldId]) {
+            updatedFields[fieldName] = {
+              ...fieldValue,
+              fields: entryMap[fieldId]
+            };
+          } else {
+            console.log(`Entry not found for ID: ${fieldId}`);
+          }
+        } else {
+          updatedFields[fieldName] = fieldValue;
+        }
+      }
+      return {
+        ...item,
+        fields: updatedFields
+      };
+    });
+    return {
+      ...data,
+      items: itemsWithDenormalizedFields
+    };
+  }
+  let renderedData;
+  if (filteredData) {
+    if (((_c = filteredData == null ? void 0 : filteredData.items) == null ? void 0 : _c.length) === 0) {
+      return /* @__PURE__ */ React.createElement("div", { className }, "No published entry found");
+    }
+    renderedData = noAutoRepeat ? children : (_e = (_d = denormalizeData(filteredData)) == null ? void 0 : _d.items) == null ? void 0 : _e.map(
+      (item, index) => {
+        var _a2;
+        return /* @__PURE__ */ React.createElement(
+          DataProvider,
+          {
+            key: (_a2 = item == null ? void 0 : item.sys) == null ? void 0 : _a2.id,
+            name: "contentfulItem",
+            data: item,
+            hidden: true
+          },
+          /* @__PURE__ */ React.createElement(
+            DataProvider,
+            {
+              name: makeDataProviderName(contentType),
+              data: item
+            },
+            repeatedElement(index, children)
+          )
+        );
+      }
+    );
+  } else {
+    if (((_f = entriesData == null ? void 0 : entriesData.items) == null ? void 0 : _f.length) === 0) {
+      return /* @__PURE__ */ React.createElement("div", { className }, contentType, " is empty");
+    }
+    renderedData = noAutoRepeat ? children : (_h = (_g = denormalizeData(entriesData)) == null ? void 0 : _g.items) == null ? void 0 : _h.map((item, index) => {
+      var _a2;
+      return /* @__PURE__ */ React.createElement(
+        DataProvider,
+        {
+          key: (_a2 = item == null ? void 0 : item.sys) == null ? void 0 : _a2.id,
+          name: "contentfulItem",
+          data: item,
+          hidden: true
+        },
+        /* @__PURE__ */ React.createElement(DataProvider, { name: makeDataProviderName(contentType), data: item }, repeatedElement(index, children))
+      );
+    });
+  }
+  return /* @__PURE__ */ React.createElement(DataProvider, { name: "contentfulItems", data: entriesData == null ? void 0 : entriesData.items }, noLayout ? /* @__PURE__ */ React.createElement(React.Fragment, null, " ", renderedData, " ") : /* @__PURE__ */ React.createElement("div", { className }, " ", renderedData, " "));
+}
+var ContentfulFieldMeta = {
+  name: "ContentfulField",
+  displayName: "Contentful Field",
+  importName: "ContentfulField",
+  importPath: modulePath,
+  props: {
+    objectPath: {
+      type: "dataSelector",
+      data: (props, ctx) => {
+        var _a;
+        return (_a = ctx == null ? void 0 : ctx.data) != null ? _a : {};
+      },
+      displayName: "Field",
+      description: "Field to be displayed."
+    }
+  }
+};
+function ContentfulField({
+  className,
+  objectPath,
+  setControlContextData
+}) {
+  var _a;
+  const item = (_a = useSelector("contentfulItem")) == null ? void 0 : _a.fields;
+  if (!item) {
+    return /* @__PURE__ */ React.createElement("div", null, "ContentfulField must be used within a ContentfulFetcher ");
+  }
+  setControlContextData == null ? void 0 : setControlContextData({
+    data: item
+  });
+  if (!objectPath) {
+    return /* @__PURE__ */ React.createElement("div", null, "Please specify a valid path or select a field.");
+  }
+  const data = get(item, objectPath);
+  if (typeof data === "object" && "nodeType" in data && data.nodeType === "document") {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className,
+        dangerouslySetInnerHTML: { __html: documentToHtmlString(data) }
+      }
+    );
+  } else if (typeof data === "object" && data.sys.linkType === "Asset" && data.url) {
+    return /* @__PURE__ */ React.createElement("img", { className, src: data.url });
+  } else if (!data) {
+    return /* @__PURE__ */ React.createElement("div", null, "Please specify a valid field.");
+  } else if (typeof data !== "object") {
+    return /* @__PURE__ */ React.createElement("div", { className }, data);
+  } else {
+    return /* @__PURE__ */ React.createElement("div", { className }, data.toString());
+  }
+}
+
+// src/index.tsx
+function registerAll(loader) {
+  const _registerComponent = (Component, defaultMeta) => {
+    if (loader) {
+      loader.registerComponent(Component, defaultMeta);
+    } else {
+      registerComponent(Component, defaultMeta);
+    }
+  };
+  if (loader) {
+    loader.registerGlobalContext(
+      ContentfulCredentialsProvider,
+      ContentfulCredentialsProviderMeta
+    );
+  } else {
+    registerGlobalContext(
+      ContentfulCredentialsProvider,
+      ContentfulCredentialsProviderMeta
+    );
+  }
+  _registerComponent(ContentfulFetcher, ContentfulFetcherMeta);
+  _registerComponent(ContentfulField, ContentfulFieldMeta);
+}
+export {
+  ContentfulCredentialsProvider,
+  ContentfulCredentialsProviderMeta,
+  ContentfulFetcher,
+  ContentfulFetcherMeta,
+  ContentfulField,
+  ContentfulFieldMeta,
+  ensure,
+  registerAll
+};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@plasmicpkgs/plasmic-contentful",
-  "version": "0.0.115",
+  "version": "0.0.117",
   "description": "Plasmic Contentful components.",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "module": "dist/plasmic-contentful.esm.js",
+  "module": "dist/index.mjs",
   "publishConfig": {
     "access": "public"
   },
@@ -12,11 +12,9 @@
     "dist"
   ],
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
+    "build": "tsup-node src/index.tsx --dts --format esm,cjs --target es2019",
     "test": "yarn --cwd=../.. test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "if-env PREPARE_NO_BUILD=true || yarn build",
+    "prepublishOnly": "npm run build",
     "size": "size-limit",
     "analyze": "size-limit --why"
   },
@@ -25,17 +23,17 @@
   },
   "size-limit": [
     {
-      "path": "dist/plasmic-contentful.cjs.production.min.js",
+      "path": "dist/index.js",
       "limit": "10 KB"
     },
     {
-      "path": "dist/plasmic-contentful.esm.js",
+      "path": "dist/index.mjs",
       "limit": "10 KB"
     }
   ],
   "devDependencies": {
-    "@plasmicapp/host": "1.0.177",
-    "@plasmicapp/query": "0.1.74",
+    "@plasmicapp/host": "1.0.178",
+    "@plasmicapp/query": "0.1.75",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@types/dlv": "^1.1.2",
     "@types/react": "^18.0.27",
@@ -44,8 +42,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "size-limit": "^7.0.8",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.3.1"
+    "tslib": "^2.3.1",
+    "tsup": "^7.2.0",
+    "typescript": "^5.2.2"
   },
   "dependencies": {
     "@contentful/rich-text-html-renderer": "^15.13.1",
@@ -53,5 +52,5 @@
     "change-case": "^4.1.2",
     "dlv": "^1.1.3"
   },
-  "gitHead": "cb170c2bd81daed2ffb1758c82e49b48086aaef0"
+  "gitHead": "1089fbd93d2ac0d2ac7e0e8f755ba98d5c21f0eb"
 }

package/dist/contentful.d.ts

@@ -1,43 +0,0 @@
-import { ComponentMeta, GlobalContextMeta } from "@plasmicapp/host";
-import React, { ReactNode } from "react";
-export declare function ensure<T>(x: T | null | undefined): T;
-interface ContentfulCredentialsProviderProps {
-    space: string;
-    accessToken: string;
-    environment?: string;
-}
-export declare const ContentfulCredentialsProviderMeta: GlobalContextMeta<ContentfulCredentialsProviderProps>;
-export declare function ContentfulCredentialsProvider({ accessToken, space, environment, children, }: React.PropsWithChildren<ContentfulCredentialsProviderProps>): React.JSX.Element;
-interface ContentfulFetcherProps {
-    contentType: string;
-    children?: ReactNode;
-    className?: string;
-    limit?: number;
-    include?: number;
-    order?: string;
-    filterField?: string;
-    searchParameter?: string;
-    filterValue?: string | number;
-    noAutoRepeat?: boolean;
-    noLayout?: boolean;
-    setControlContextData?: (data: {
-        types?: {
-            name: string;
-            id: string;
-        }[];
-        fields?: string[];
-        queryOptions?: [];
-    }) => void;
-}
-export declare const ContentfulFetcherMeta: ComponentMeta<ContentfulFetcherProps>;
-export declare function ContentfulFetcher({ filterField, filterValue, searchParameter, noAutoRepeat, contentType, children, className, limit, include, noLayout, setControlContextData, }: ContentfulFetcherProps): React.JSX.Element;
-interface ContentfulFieldProps {
-    className?: string;
-    objectPath?: (string | number)[];
-    setControlContextData?: (data: {
-        data: object;
-    }) => void;
-}
-export declare const ContentfulFieldMeta: ComponentMeta<ContentfulFieldProps>;
-export declare function ContentfulField({ className, objectPath, setControlContextData, }: ContentfulFieldProps): React.JSX.Element;
-export {};