tinacms 0.68.14 → 0.69.1

package/dist/index.js

@@ -1193,7 +1193,8 @@
                   return formifyInlineFragmentNode({
                     inlineFragmentNode: selectionNode,
                     parentType: type,
-                    path
+                    path,
+                    showInSidebar: true
                   });
                 }
                 case "Field": {
@@ -1263,7 +1264,8 @@
                   return formifyInlineFragmentNode({
                     inlineFragmentNode: selectionNode,
                     parentType: field.type,
-                    path: fieldPath
+                    path: fieldPath,
+                    showInSidebar: false
                   });
                 }
                 default:
@@ -1277,7 +1279,8 @@
     const formifyInlineFragmentNode = ({
       inlineFragmentNode,
       parentType,
-      path
+      path,
+      showInSidebar
     }) => {
       const type = getSelectedUnionType(parentType, inlineFragmentNode);
       if (!type) {
@@ -1288,7 +1291,7 @@
           inlineFragmentNode,
           type,
           path,
-          showInSidebar: false
+          showInSidebar
         });
       }
       return {
@@ -2501,10 +2504,10 @@ mutation addPendingDocumentMutation(
   }
 }`, { variables: { collection, relativePath } });
     }
-    async fetchCollection(collectionName, includeDocuments, after) {
+    async fetchCollection(collectionName, includeDocuments, after, sortKey, order) {
       if (includeDocuments === true) {
-        const sort = this.schema.getIsTitleFieldName(collectionName);
-        const response = await this.api.request(`#graphql
+        const sort = sortKey || this.schema.getIsTitleFieldName(collectionName);
+        const response = order === "asc" ? await this.api.request(`#graphql
       query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String){
         collection(collection: $collection){
           name
@@ -2537,6 +2540,47 @@ mutation addPendingDocumentMutation(
             }
           }
         }
+      }`, {
+          variables: {
+            collection: collectionName,
+            includeDocuments,
+            sort,
+            limit: 10,
+            after
+          }
+        }) : await this.api.request(`#graphql
+      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String){
+        collection(collection: $collection){
+          name
+          label
+          format
+          templates
+          documents(sort: $sort, before: $after, last: $limit) @include(if: $includeDocuments) {
+            totalCount
+            pageInfo {
+              hasPreviousPage
+              hasNextPage
+              startCursor
+              endCursor
+            }
+            edges {
+              node {
+                ... on Document {
+                  _sys {
+                    title
+                    template
+                    breadcrumbs
+                    path
+                    basename
+                    relativePath
+                    filename
+                    extension
+                  }
+                }
+              }
+            }
+          }
+        }
       }`, {
           variables: {
             collection: collectionName,
@@ -3298,6 +3342,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .gap-4 {
   gap: 16px;
 }
+.tina-tailwind .gap-2 {
+  gap: 8px;
+}
 .tina-tailwind .gap-3 {
   gap: 12px;
 }
@@ -3316,6 +3363,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .overflow-y-auto {
   overflow-y: auto;
 }
+.tina-tailwind .whitespace-normal {
+  white-space: normal;
+}
 .tina-tailwind .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -3437,8 +3487,8 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .pb-4 {
   padding-bottom: 16px;
 }
-.tina-tailwind .pt-18 {
-  padding-top: 72px;
+.tina-tailwind .pt-16 {
+  padding-top: 64px;
 }
 .tina-tailwind .pt-3 {
   padding-top: 12px;
@@ -3482,6 +3532,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .font-medium {
   font-weight: 500;
 }
+.tina-tailwind .font-semibold {
+  font-weight: 600;
+}
 .tina-tailwind .uppercase {
   text-transform: uppercase;
 }
@@ -3984,16 +4037,18 @@ mutation addPendingDocumentMutation(
     ...props
   }) => {
     var _a;
-    const validOldSetup = new Boolean(props == null ? void 0 : props.isLocalClient) || new Boolean(props == null ? void 0 : props.clientId) && new Boolean(props == null ? void 0 : props.branch);
-    const apiURL = ((_a = props == null ? void 0 : props.client) == null ? void 0 : _a.apiUrl) || (props == null ? void 0 : props.apiURL);
-    if (!apiURL && !validOldSetup) {
-      throw new Error(`Must provide apiUrl or a client to the TinaWrapper component`);
+    if (props == null ? void 0 : props.apiURL) {
+      console.warn("The apiURL prop is deprecated. Please see https://tina.io/blog/tina-v-0.68.14 for information on how to upgrade to the new API");
     }
+    const apiURL = ((_a = props == null ? void 0 : props.client) == null ? void 0 : _a.apiUrl) || (props == null ? void 0 : props.apiURL);
     const { branch, clientId, isLocalClient } = apiURL ? parseURL(apiURL) : {
       branch: props.branch,
       clientId: props.clientId,
-      isLocalClient: props.isLocalClient
+      isLocalClient: props == null ? void 0 : props.isLocalClient
     };
+    if (typeof isLocalClient === "undefined" || !isLocalClient && (!branch || !clientId)) {
+      throw new Error("Invalid setup. See https://tina.io/docs/tina-cloud/connecting-site/ for more information.");
+    }
     if (!schema) {
       throw new Error("`schema` is required to be passed as a property to `TinaProvider`.  You can learn more about this change here: https://github.com/tinacms/tinacms/pull/2823");
     }
@@ -4576,7 +4631,7 @@ This will work when developing locally but NOT when deployed to production.
     isLocalMode,
     children
   }) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, isLocalMode && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "bg-white pb-4 pt-18 border-b border-gray-200 px-12"
+    className: "bg-white pb-4 pt-16 border-b border-gray-200 px-12"
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "w-full mx-auto max-w-screen-xl"
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -4703,8 +4758,10 @@ This will work when developing locally but NOT when deployed to production.
       fontWeight: "normal"
     }
   }, "Please wait, Tina is loading data..."))));
-  const useGetCollection = (cms, collectionName, includeDocuments = true, after = "") => {
+  const useGetCollection = (cms, collectionName, includeDocuments = true, after = "", sortKey) => {
     const api = new TinaAdminApi(cms);
+    const schema = cms.api.tina.schema;
+    const collectionExtra = schema.getCollection(collectionName);
     const [collection, setCollection] = React.useState(void 0);
     const [loading, setLoading] = React.useState(true);
     const [error, setError] = React.useState(void 0);
@@ -4712,8 +4769,10 @@ This will work when developing locally but NOT when deployed to production.
     React.useEffect(() => {
       const fetchCollection = async () => {
         if (await api.isAuthenticated()) {
+          const { name, order } = JSON.parse(sortKey || "{}");
+          const validSortKey = collectionExtra.fields.map((x) => x.name).includes(name) ? name : void 0;
           try {
-            const collection2 = await api.fetchCollection(collectionName, includeDocuments, after);
+            const collection2 = await api.fetchCollection(collectionName, includeDocuments, after, validSortKey, order);
             setCollection(collection2);
           } catch (error2) {
             cms.alerts.error(`[${error2.name}] GetCollection failed: ${error2.message}`, 30 * 1e3);
@@ -4726,26 +4785,29 @@ This will work when developing locally but NOT when deployed to production.
       };
       setLoading(true);
       fetchCollection();
-    }, [cms, collectionName, resetState, after]);
+    }, [cms, collectionName, resetState, after, sortKey]);
     const reFetchCollection = () => setResetSate((x) => x + 1);
-    return { collection, loading, error, reFetchCollection };
+    return { collection, loading, error, reFetchCollection, collectionExtra };
   };
   const GetCollection = ({
     cms,
     collectionName,
     includeDocuments = true,
     startCursor,
+    sortKey,
     children
   }) => {
-    const { collection, loading, error, reFetchCollection } = useGetCollection(cms, collectionName, includeDocuments, startCursor || "");
+    const { collection, loading, error, reFetchCollection, collectionExtra } = useGetCollection(cms, collectionName, includeDocuments, startCursor || "", sortKey) || {};
     if (error) {
       return null;
     }
     if (loading) {
       return /* @__PURE__ */ React__default["default"].createElement(LoadingPage, null);
     }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection, loading, reFetchCollection));
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection, loading, reFetchCollection, collectionExtra));
   };
+  const LOCAL_STORAGE_KEY = "tinacms.admin.collection.list.page";
+  const isSSR = typeof window === "undefined";
   const TemplateMenu = ({ templates }) => {
     return /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
       as: "div",
@@ -4794,8 +4856,17 @@ This will work when developing locally but NOT when deployed to production.
     });
     const [endCursor, setEndCursor] = React.useState("");
     const [prevCursors, setPrevCursors] = React.useState([]);
+    const [sortKey, setSortKey] = React.useState(isSSR ? "" : window.localStorage.getItem(`${LOCAL_STORAGE_KEY}.${collectionName}`) || JSON.stringify({
+      order: "asc",
+      name: ""
+    }));
+    const [sortOrder, setSortOrder] = React.useState("asc");
     const loc = reactRouterDom.useLocation();
     React.useEffect(() => {
+      setSortKey(window.localStorage.getItem(`${LOCAL_STORAGE_KEY}.${collectionName}`) || JSON.stringify({
+        order: "asc",
+        name: ""
+      }));
       setEndCursor("");
       setPrevCursors([]);
     }, [loc]);
@@ -4804,13 +4875,15 @@ This will work when developing locally but NOT when deployed to production.
         cms,
         collectionName,
         includeDocuments: true,
-        startCursor: endCursor
-      }, (collection, _loading, reFetchCollection) => {
+        startCursor: endCursor,
+        sortKey
+      }, (collection, _loading, reFetchCollection, collectionExtra) => {
         var _a, _b;
         const totalCount = collection.documents.totalCount;
         const documents = collection.documents.edges;
         const admin = cms.api.admin;
         const pageInfo = collection.documents.pageInfo;
+        const fields = collectionExtra.fields.filter((x) => ["string", "number", "datetime"].includes(x.type));
         return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, open && /* @__PURE__ */ React__default["default"].createElement(DeleteModal, {
           filename: vars.relativePath,
           deleteFunc: async () => {
@@ -4827,9 +4900,56 @@ This will work when developing locally but NOT when deployed to production.
           close: () => setOpen(false)
         }), /* @__PURE__ */ React__default["default"].createElement(PageHeader, {
           isLocalMode: (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
-        }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("h3", {
+        }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "flex flex-col gap-4"
+        }, /* @__PURE__ */ React__default["default"].createElement("h3", {
           className: "font-sans text-2xl text-gray-700"
-        }, collection.label ? collection.label : collection.name), !collection.templates && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
+        }, collection.label ? collection.label : collection.name), fields.length > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "flex gap-2 items-center"
+        }, /* @__PURE__ */ React__default["default"].createElement("label", {
+          htmlFor: "sort",
+          className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
+        }, "Sort by"), /* @__PURE__ */ React__default["default"].createElement(toolkit.Select, {
+          name: "sort",
+          options: [
+            {
+              label: "Default",
+              value: JSON.stringify({
+                order: "asc",
+                name: ""
+              })
+            },
+            ...fields.map((x) => [
+              {
+                label: x.label + " (Ascending)",
+                value: JSON.stringify({
+                  name: x.name,
+                  order: "asc"
+                })
+              },
+              {
+                label: x.label + " (Descending)",
+                value: JSON.stringify({
+                  name: x.name,
+                  order: "desc"
+                })
+              }
+            ]).flat()
+          ],
+          input: {
+            id: "sort",
+            name: "sort",
+            value: sortKey,
+            onChange: (e) => {
+              const val = JSON.parse(e.target.value);
+              setEndCursor("");
+              setPrevCursors([]);
+              window == null ? void 0 : window.localStorage.setItem(`${LOCAL_STORAGE_KEY}.${collectionName}`, e.target.value);
+              setSortKey(e.target.value);
+              setSortOrder(val.order);
+            }
+          }
+        }))), !collection.templates && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
           to: `new`,
           className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out  shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6"
         }, "Create New", " ", /* @__PURE__ */ React__default["default"].createElement(BiPlus, {
@@ -4917,7 +5037,7 @@ This will work when developing locally but NOT when deployed to production.
           className: "pt-3"
         }, /* @__PURE__ */ React__default["default"].createElement(toolkit.CursorPaginator, {
           variant: "white",
-          hasNext: pageInfo == null ? void 0 : pageInfo.hasNextPage,
+          hasNext: sortOrder === "asc" ? pageInfo == null ? void 0 : pageInfo.hasNextPage : pageInfo.hasPreviousPage,
           navigateNext: () => {
             const newState = [...prevCursors, endCursor];
             setPrevCursors(newState);
@@ -5255,9 +5375,9 @@ This will work when developing locally but NOT when deployed to production.
     return null;
   };
   const TinaAdmin = () => {
-    const isSSR = typeof window === "undefined";
+    const isSSR2 = typeof window === "undefined";
     const { edit } = sharedctx.useEditState();
-    if (isSSR) {
+    if (isSSR2) {
       return null;
     }
     if (!edit) {

package/dist/{rich-text.d.ts → rich-text/index.d.ts}

@@ -74,6 +74,12 @@ declare type BaseComponents = {
     maybe_mdx?: {
         children: JSX.Element;
     };
+    html?: {
+        value: string;
+    };
+    html_inline?: {
+        value: string;
+    };
     component_missing?: {
         name: string;
     };

package/dist/rich-text/index.es.js

@@ -0,0 +1,221 @@
+import React from "react";
+const TinaMarkdown = ({
+  content,
+  components = {}
+}) => {
+  if (!content) {
+    return null;
+  }
+  const nodes = Array.isArray(content) ? content : content.children;
+  if (!nodes) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, nodes.map((child, index) => {
+    return /* @__PURE__ */ React.createElement(MemoNode, {
+      components,
+      key: index,
+      child
+    });
+  }));
+};
+const Leaf = (props) => {
+  if (props.bold) {
+    const { bold, ...rest } = props;
+    if (props.components.bold) {
+      const Component = props.components.bold;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, {
+        ...rest
+      }));
+    }
+    return /* @__PURE__ */ React.createElement("strong", null, /* @__PURE__ */ React.createElement(Leaf, {
+      ...rest
+    }));
+  }
+  if (props.italic) {
+    const { italic, ...rest } = props;
+    if (props.components.italic) {
+      const Component = props.components.italic;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, {
+        ...rest
+      }));
+    }
+    return /* @__PURE__ */ React.createElement("em", null, /* @__PURE__ */ React.createElement(Leaf, {
+      ...rest
+    }));
+  }
+  if (props.underline) {
+    const { underline, ...rest } = props;
+    if (props.components.underline) {
+      const Component = props.components.underline;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, {
+        ...rest
+      }));
+    }
+    return /* @__PURE__ */ React.createElement("u", null, /* @__PURE__ */ React.createElement(Leaf, {
+      ...rest
+    }));
+  }
+  if (props.strikethrough) {
+    const { strikethrough, ...rest } = props;
+    if (props.components.strikethrough) {
+      const Component = props.components.strikethrough;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, {
+        ...rest
+      }));
+    }
+    return /* @__PURE__ */ React.createElement("s", null, /* @__PURE__ */ React.createElement(Leaf, {
+      ...rest
+    }));
+  }
+  if (props.code) {
+    const { code, ...rest } = props;
+    if (props.components.code) {
+      const Component = props.components.code;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, {
+        ...rest
+      }));
+    }
+    return /* @__PURE__ */ React.createElement("code", null, /* @__PURE__ */ React.createElement(Leaf, {
+      ...rest
+    }));
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.text);
+};
+const MemoNode = (props) => {
+  const MNode = React.useMemo(() => /* @__PURE__ */ React.createElement(Node, {
+    ...props
+  }), [JSON.stringify(props)]);
+  return MNode;
+};
+const Node = ({ components, child }) => {
+  const { children, ...props } = child;
+  switch (child.type) {
+    case "h1":
+    case "h2":
+    case "h3":
+    case "h4":
+    case "h5":
+    case "h6":
+    case "p":
+    case "blockquote":
+    case "ol":
+    case "ul":
+    case "li":
+      if (components[child.type]) {
+        const Component2 = components[child.type];
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        }, /* @__PURE__ */ React.createElement(TinaMarkdown, {
+          components,
+          content: children
+        }));
+      }
+      return React.createElement(child.type, {
+        children: /* @__PURE__ */ React.createElement(TinaMarkdown, {
+          components,
+          content: children
+        })
+      });
+    case "lic":
+      return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TinaMarkdown, {
+        components,
+        content: child.children
+      }));
+    case "img":
+      if (components[child.type]) {
+        const Component2 = components[child.type];
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        });
+      }
+      return /* @__PURE__ */ React.createElement("img", {
+        src: child.url,
+        alt: child.caption
+      });
+    case "a":
+      if (components[child.type]) {
+        const Component2 = components[child.type];
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        }, /* @__PURE__ */ React.createElement(TinaMarkdown, {
+          components,
+          content: children
+        }));
+      }
+      return /* @__PURE__ */ React.createElement("a", {
+        href: child.url
+      }, /* @__PURE__ */ React.createElement(TinaMarkdown, {
+        components,
+        content: children
+      }));
+    case "code_block":
+      const value = child.value;
+      if (components[child.type]) {
+        const Component2 = components[child.type];
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        }, value);
+      }
+      return /* @__PURE__ */ React.createElement("pre", null, /* @__PURE__ */ React.createElement("code", null, value));
+    case "hr":
+      if (components[child.type]) {
+        const Component2 = components[child.type];
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        });
+      }
+      return /* @__PURE__ */ React.createElement("hr", null);
+    case "break":
+      if (components[child.type]) {
+        const Component2 = components[child.type];
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        });
+      }
+      return /* @__PURE__ */ React.createElement("br", null);
+    case "text":
+      return /* @__PURE__ */ React.createElement(Leaf, {
+        components,
+        ...child
+      });
+    case "mdxJsxTextElement":
+    case "mdxJsxFlowElement":
+      const Component = components[child.name];
+      if (Component) {
+        const props2 = child.props ? child.props : {};
+        return /* @__PURE__ */ React.createElement(Component, {
+          ...props2
+        });
+      } else {
+        const ComponentMissing = components["component_missing"];
+        if (ComponentMissing) {
+          return /* @__PURE__ */ React.createElement(ComponentMissing, {
+            name: child.name
+          });
+        } else {
+          return /* @__PURE__ */ React.createElement("span", null, `No component provided for ${child.name}`);
+        }
+      }
+    case "maybe_mdx":
+      return null;
+    case "html":
+    case "html_inline":
+      if (components[child.type]) {
+        const Component2 = components[child.type];
+        return /* @__PURE__ */ React.createElement(Component2, {
+          ...props
+        });
+      }
+      return child.value;
+    case "invalid_markdown":
+      return /* @__PURE__ */ React.createElement("pre", null, child.value);
+    default:
+      if (typeof child.text === "string") {
+        return /* @__PURE__ */ React.createElement(Leaf, {
+          components,
+          ...child
+        });
+      }
+  }
+};
+export { TinaMarkdown };