tinacms 0.57.0 → 0.57.4

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # tinacms
 
+## 0.57.4
+
+### Patch Changes
+
+- 4b7795612: Adds support for collection.templates to TinaAdmin
+- a39ddc611: update media store to load only when in edit mode
+- 1096fe3e4: Ensure forms unmount properly when `useGraphQLForms` unmounts
+
+## 0.57.3
+
+### Patch Changes
+
+- Updated dependencies [2724c48c0]
+  - @tinacms/toolkit@0.55.2
+
+## 0.57.2
+
+### Patch Changes
+
+- 7849c1233: Fix styles on panel
+
+## 0.57.1
+
+### Patch Changes
+
+- 9c0d48e09: Fix console errors for mdx editor
+- Updated dependencies [9c0d48e09]
+  - @tinacms/toolkit@0.55.1
+
 ## 0.57.0
 
 ### Minor Changes

package/dist/admin/components/GetCollection.d.ts

@@ -14,6 +14,7 @@ import type { TinaCMS } from '@tinacms/toolkit';
 interface Document {
     node: {
         sys: {
+            template: string;
             breadcrumbs: string[];
             path: string;
             basename: string;
@@ -23,10 +24,16 @@ interface Document {
         };
     };
 }
+export interface Template {
+    name: string;
+    label: string;
+    fields: any[];
+}
 export interface Collection {
     label: string;
     name: string;
     format: string;
+    templates: Template[];
     documents: {
         totalCount: number;
         edges: Document[];

package/dist/admin/components/GetDocumentFields.d.ts

@@ -14,21 +14,24 @@ import type { TinaCMS } from '@tinacms/toolkit';
 interface GetDocumentFields {
     [collectionName: string]: {
         collection: Object;
-        fields: Object[];
+        templates?: Object[];
+        fields?: Object[];
     };
 }
 export interface Info {
     collection: Object | undefined;
+    template: Object | undefined;
     fields: Object[] | undefined;
     mutationInfo: {
         includeCollection: boolean;
         includeTemplate: boolean;
     };
 }
-export declare const useGetDocumentFields: (cms: TinaCMS, collectionName: string) => Info;
-declare const GetDocumentFields: ({ cms, collectionName, children, }: {
+export declare const useGetDocumentFields: (cms: TinaCMS, collectionName: string, templateName: string) => Info;
+declare const GetDocumentFields: ({ cms, collectionName, templateName, children, }: {
     cms: TinaCMS;
     collectionName: string;
+    templateName?: string;
     children: any;
 }) => JSX.Element;
 export default GetDocumentFields;

package/dist/auth/TinaCloudProvider.d.ts

@@ -29,7 +29,7 @@ export interface TinaCloudAuthWallProps {
         action: () => Promise<void>;
         primary: boolean;
     }[];
-    mediaStore?: TinaCloudMediaStoreClass | Promise<TinaCloudMediaStoreClass>;
+    mediaStore?: TinaCloudMediaStoreClass | (() => Promise<TinaCloudMediaStoreClass>);
 }
 export declare const AuthWallInner: ({ children, cms, loginScreen, getModalActions, }: TinaCloudAuthWallProps) => JSX.Element;
 /**

package/dist/edit-state.es.js

@@ -43,6 +43,9 @@ const ToggleButton = () => {
     href: "/admin",
     style: {
       borderRadius: "0 50px 50px 0",
+      fontSize: "16px",
+      fontFamily: "Inter, 'Helvetica Neue', 'Arial Nova', Helvetica, Arial, sans-serif",
+      fontWeight: "bold",
       textDecoration: "none",
       background: "rgb(34, 150, 254)",
       boxShadow: "0px 1px 3px rgb(0 0 0 / 10%), 0px 2px 6px rgb(0 0 0 / 20%)",

package/dist/edit-state.js

@@ -50,6 +50,9 @@ var __objRest = (source, exclude) => {
       href: "/admin",
       style: {
         borderRadius: "0 50px 50px 0",
+        fontSize: "16px",
+        fontFamily: "Inter, 'Helvetica Neue', 'Arial Nova', Helvetica, Arial, sans-serif",
+        fontWeight: "bold",
         textDecoration: "none",
         background: "rgb(34, 150, 254)",
         boxShadow: "0px 1px 3px rgb(0 0 0 / 10%), 0px 2px 6px rgb(0 0 0 / 20%)",

package/dist/index.es.js

@@ -34,7 +34,7 @@ import set from "lodash.set";
 import gql$1 from "graphql-tag";
 import { EventBus, StyleReset, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, TinaCMS, BranchSwitcherPlugin, TinaProvider, useCMS, Form, GlobalFormPlugin, FullscreenFormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect, Fragment } from "react";
 import styled from "styled-components";
 import * as yup from "yup";
 import { getIn, setIn } from "final-form";
@@ -746,8 +746,14 @@ const TinaCloudProvider = (props) => {
     cms.api.tina = createClient(props);
   }
   const setupMedia = async () => {
+    var _a;
     if (props.mediaStore) {
-      cms.media.store = new (await props.mediaStore)(cms.api.tina);
+      if ((_a = props.mediaStore.prototype) == null ? void 0 : _a.persist) {
+        cms.media.store = new props.mediaStore(cms.api.tina);
+      } else {
+        const MediaClass = await props.mediaStore();
+        cms.media.store = new MediaClass(cms.api.tina);
+      }
     }
   };
   const handleListBranches = async () => {
@@ -807,7 +813,6 @@ function useGraphqlForms({
   const [pendingReset, setPendingReset] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
   const [newUpdate, setNewUpdate] = React.useState(null);
-  React.useState([]);
   const updateData = async () => {
     var _a;
     if (newUpdate) {
@@ -856,12 +861,14 @@ function useGraphqlForms({
     }
   }, [pendingReset]);
   React.useEffect(() => {
+    const formIds = [];
     setIsLoading(true);
     cms.api.tina.requestWithForm(query, { variables }).then((payload) => {
       setData(payload);
       setInitialData(payload);
       setIsLoading(false);
       Object.entries(payload).map(([queryName, result]) => {
+        formIds.push(queryName);
         const canBeFormified = safeAssertShape(result, (yup2) => yup2.object({
           values: yup2.object().required(),
           form: yup2.object().required()
@@ -981,6 +988,14 @@ function useGraphqlForms({
       console.error(e);
       setIsLoading(false);
     });
+    return () => {
+      formIds.forEach((name) => {
+        const formPlugin = cms.forms.find(name);
+        if (formPlugin) {
+          cms.forms.remove(formPlugin);
+        }
+      });
+    };
   }, [queryString, JSON.stringify(variables)]);
   return [data, isLoading];
 }
@@ -1656,12 +1671,14 @@ const useGetCollection = (cms, collectionName, includeDocuments = true) => {
               name
               label
               format
+              templates
               documents @include(if: $includeDocuments) {
                 totalCount
                 edges {
                   node {
                     ... on Document {
                       sys {
+                        template
                         breadcrumbs
                         path
                         basename
@@ -1693,8 +1710,46 @@ const GetCollection = ({
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection));
 };
+const TemplateMenu = ({ templates }) => {
+  return /* @__PURE__ */ React.createElement(Menu, {
+    as: "div",
+    className: "relative inline-block text-left"
+  }, ({ open }) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Menu.Button, {
+    className: "inline-flex items-center px-8 py-2.5 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out",
+    style: { background: "#0084FF" }
+  }, "Create New", /* @__PURE__ */ React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: `ml-1 flex-0 inline-block opacity-50 group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open ? `rotate-90 opacity-100` : `rotate-0`}`
+  }, /* @__PURE__ */ React.createElement("g", {
+    opacity: "1.0"
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M7.91675 13.8086L9.16675 15.0586L14.2253 10L9.16675 4.9414L7.91675 6.1914L11.7253 10L7.91675 13.8086Z",
+    fill: "currentColor"
+  }))))), /* @__PURE__ */ React.createElement(Transition, {
+    as: Fragment,
+    enter: "transition ease-out duration-100",
+    enterFrom: "transform opacity-0 scale-95",
+    enterTo: "transform opacity-100 scale-100",
+    leave: "transition ease-in duration-75",
+    leaveFrom: "transform opacity-100 scale-100",
+    leaveTo: "transform opacity-0 scale-95"
+  }, /* @__PURE__ */ React.createElement(Menu.Items, {
+    className: "origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "py-1"
+  }, templates.map((template) => /* @__PURE__ */ React.createElement(Menu.Item, {
+    key: `${template.label}-${template.name}`
+  }, ({ active }) => /* @__PURE__ */ React.createElement(Link, {
+    to: `${location.pathname}/${template.name}/new`,
+    className: `w-full text-md px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`
+  }, template.label))))))));
+};
 const CollectionListPage = () => {
-  const location = useLocation();
+  const location2 = useLocation();
   const { collectionName } = useParams();
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetCollection, {
     cms,
@@ -1711,11 +1766,13 @@ const CollectionListPage = () => {
       className: "w-full flex justify-between items-end"
     }, /* @__PURE__ */ React.createElement("h3", {
       className: "text-3xl"
-    }, collection.label), /* @__PURE__ */ React.createElement(Link, {
-      to: `${location.pathname}/new`,
+    }, collection.label), !collection.templates && /* @__PURE__ */ React.createElement(Link, {
+      to: `${location2.pathname}/new`,
       className: "inline-flex items-center px-8 py-3 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out",
       style: { background: "#0084FF" }
-    }, "Create New")), totalCount > 0 && /* @__PURE__ */ React.createElement("div", {
+    }, "Create New"), collection.templates && /* @__PURE__ */ React.createElement(TemplateMenu, {
+      templates: collection.templates
+    })), totalCount > 0 && /* @__PURE__ */ React.createElement("div", {
       className: "mt-8 shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
     }, /* @__PURE__ */ React.createElement("table", {
       className: "min-w-full"
@@ -1726,7 +1783,7 @@ const CollectionListPage = () => {
     }, /* @__PURE__ */ React.createElement("td", {
       className: "px-6 py-2 whitespace-nowrap"
     }, /* @__PURE__ */ React.createElement(Link, {
-      to: `${location.pathname}/${document2.node.sys.filename}`,
+      to: `${location2.pathname}/${document2.node.sys.filename}`,
       className: "text-blue-600 hover:text-blue-400 flex items-center gap-3"
     }, /* @__PURE__ */ React.createElement(BiEdit, {
       className: "inline-block h-6 w-auto opacity-70"
@@ -1740,12 +1797,19 @@ const CollectionListPage = () => {
       className: "block text-xs text-gray-400 mb-1 uppercase"
     }, "Extension"), /* @__PURE__ */ React.createElement("span", {
       className: "h-5 leading-5 block text-sm font-medium text-gray-900"
-    }, document2.node.sys.extension)))))))));
+    }, document2.node.sys.extension)), /* @__PURE__ */ React.createElement("td", {
+      className: "px-6 py-4 whitespace-nowrap"
+    }, /* @__PURE__ */ React.createElement("span", {
+      className: "block text-xs text-gray-400 mb-1 uppercase"
+    }, "Template"), /* @__PURE__ */ React.createElement("span", {
+      className: "h-5 leading-5 block text-sm font-medium text-gray-900"
+    }, document2.node.sys.template)))))))));
   }));
 };
-const useGetDocumentFields = (cms, collectionName) => {
+const useGetDocumentFields = (cms, collectionName, templateName) => {
   const [info, setInfo] = useState({
     collection: void 0,
+    template: void 0,
     fields: void 0,
     mutationInfo: void 0
   });
@@ -1754,10 +1818,18 @@ const useGetDocumentFields = (cms, collectionName) => {
       const response = await cms.api.tina.request(`query { getDocumentFields }`, {});
       const documentFields = response.getDocumentFields;
       const collection = documentFields[collectionName].collection;
-      const fields = documentFields[collectionName].fields;
       const mutationInfo = documentFields[collectionName].mutationInfo;
+      let fields = void 0;
+      let template = void 0;
+      if (templateName && documentFields[collectionName].templates && documentFields[collectionName].templates[templateName]) {
+        template = documentFields[collectionName].templates[templateName].template;
+        fields = documentFields[collectionName].templates[templateName].fields;
+      } else {
+        fields = documentFields[collectionName].fields;
+      }
       setInfo({
         collection,
+        template,
         fields,
         mutationInfo
       });
@@ -1769,44 +1841,44 @@ const useGetDocumentFields = (cms, collectionName) => {
 const GetDocumentFields = ({
   cms,
   collectionName,
+  templateName,
   children
 }) => {
-  const { collection, fields, mutationInfo } = useGetDocumentFields(cms, collectionName);
-  if (!collection || !fields || !mutationInfo) {
+  const { collection, template, fields, mutationInfo } = useGetDocumentFields(cms, collectionName, templateName);
+  if (!collection) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, fields, mutationInfo));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children({ collection, template, fields, mutationInfo }));
 };
-const createDocument = async (cms, collection, mutationInfo, values) => {
+const createDocument = async (cms, collection, template, mutationInfo, values) => {
   const _a = values, { relativePath } = _a, leftover = __objRest(_a, ["relativePath"]);
   const { includeCollection, includeTemplate } = mutationInfo;
-  const params = transformDocumentIntoMutationRequestPayload(__spreadValues({
+  const params = transformDocumentIntoMutationRequestPayload(__spreadValues(__spreadValues({
     _collection: collection.name
-  }, leftover), {
+  }, template && { _template: template.name }), leftover), {
     includeCollection,
     includeTemplate
   });
-  await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
-      createDocument(
-        collection: $collection, 
+  await cms.api.tina.request(`mutation($relativePath: String!, $params: DocumentMutation!) {
+      createDocument( 
         relativePath: $relativePath, 
         params: $params
       ){__typename}
     }`, {
     variables: {
-      collection: collection.name,
       relativePath,
       params
     }
   });
 };
 const CollectionCreatePage = () => {
-  const { collectionName } = useParams();
+  const { collectionName, templateName } = useParams();
   const history = useHistory();
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetDocumentFields, {
     cms,
-    collectionName
-  }, (collection, fields, mutationInfo) => {
+    collectionName,
+    templateName
+  }, ({ collection, template, fields, mutationInfo }) => {
     const form = new Form({
       id: "create-form",
       label: "form",
@@ -1821,16 +1893,17 @@ const CollectionCreatePage = () => {
         ...fields
       ],
       onSubmit: async (values) => {
-        await createDocument(cms, collection, mutationInfo, values);
+        await createDocument(cms, collection, template, mutationInfo, values);
         history.push(`/admin/collections/${collection.name}`);
       }
     });
+    const formLabel = template ? `${collection.label} - Create New ${template.label}` : `${collection.label} - Create New`;
     return /* @__PURE__ */ React.createElement("div", {
       className: "w-full h-screen"
     }, /* @__PURE__ */ React.createElement("div", {
       className: "flex flex-col items-center w-full flex-1"
     }, /* @__PURE__ */ React.createElement(FullscreenFormBuilder, {
-      label: collection.label + " - Create New",
+      label: formLabel,
       form
     })));
   }));
@@ -1866,21 +1939,19 @@ const GetDocument = ({
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document2));
 };
-const updateDocument = async (cms, collection, document2, relativePath, values) => {
-  const { includeCollection, includeTemplate } = document2.form.mutationInfo;
+const updateDocument = async (cms, relativePath, mutationInfo, values) => {
+  const { includeCollection, includeTemplate } = mutationInfo;
   const params = transformDocumentIntoMutationRequestPayload(values, {
     includeCollection,
     includeTemplate
   });
-  await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
-      updateDocument(
-        collection: $collection, 
+  await cms.api.tina.request(`mutation($relativePath: String!, $params: DocumentMutation!) {
+      updateDocument( 
         relativePath: $relativePath, 
         params: $params
       ){__typename}
     }`, {
     variables: {
-      collection: collection.name,
       relativePath,
       params
     }
@@ -1889,11 +1960,10 @@ const updateDocument = async (cms, collection, document2, relativePath, values)
 const CollectionUpdatePage = () => {
   const { collectionName, filename } = useParams();
   const history = useHistory();
-  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetCollection, {
+  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetDocumentFields, {
     cms,
-    collectionName,
-    includeDocuments: false
-  }, (collection) => {
+    collectionName
+  }, ({ collection, mutationInfo }) => {
     const relativePath = `${filename}.${collection.format}`;
     return /* @__PURE__ */ React.createElement(GetDocument, {
       cms,
@@ -1906,7 +1976,7 @@ const CollectionUpdatePage = () => {
         fields: document2.form.fields,
         initialValues: document2.values,
         onSubmit: async (values) => {
-          await updateDocument(cms, collection, document2, relativePath, values);
+          await updateDocument(cms, relativePath, mutationInfo, values);
           history.push(`/admin/collections/${collection.name}`);
         }
       });
@@ -2026,6 +2096,8 @@ const TinaAdmin = () => {
     className: "flex-1"
   }, /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Route, {
     path: `/admin/collections/:collectionName/new`
+  }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null)), /* @__PURE__ */ React.createElement(Route, {
+    path: `/admin/collections/:collectionName/:templateName/new`
   }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null)), /* @__PURE__ */ React.createElement(Route, {
     path: `/admin/collections/:collectionName/:filename`
   }, /* @__PURE__ */ React.createElement(CollectionUpdatePage, null)), /* @__PURE__ */ React.createElement(Route, {

package/dist/index.js

@@ -767,8 +767,14 @@ mutation addPendingDocumentMutation(
       cms.api.tina = createClient(props);
     }
     const setupMedia = async () => {
+      var _a;
       if (props.mediaStore) {
-        cms.media.store = new (await props.mediaStore)(cms.api.tina);
+        if ((_a = props.mediaStore.prototype) == null ? void 0 : _a.persist) {
+          cms.media.store = new props.mediaStore(cms.api.tina);
+        } else {
+          const MediaClass = await props.mediaStore();
+          cms.media.store = new MediaClass(cms.api.tina);
+        }
       }
     };
     const handleListBranches = async () => {
@@ -828,7 +834,6 @@ mutation addPendingDocumentMutation(
     const [pendingReset, setPendingReset] = React__default["default"].useState(null);
     const [isLoading, setIsLoading] = React__default["default"].useState(true);
     const [newUpdate, setNewUpdate] = React__default["default"].useState(null);
-    React__default["default"].useState([]);
     const updateData = async () => {
       var _a;
       if (newUpdate) {
@@ -877,12 +882,14 @@ mutation addPendingDocumentMutation(
       }
     }, [pendingReset]);
     React__default["default"].useEffect(() => {
+      const formIds = [];
       setIsLoading(true);
       cms.api.tina.requestWithForm(query, { variables }).then((payload) => {
         setData(payload);
         setInitialData(payload);
         setIsLoading(false);
         Object.entries(payload).map(([queryName, result]) => {
+          formIds.push(queryName);
           const canBeFormified = safeAssertShape(result, (yup2) => yup2.object({
             values: yup2.object().required(),
             form: yup2.object().required()
@@ -1002,6 +1009,14 @@ mutation addPendingDocumentMutation(
         console.error(e);
         setIsLoading(false);
       });
+      return () => {
+        formIds.forEach((name) => {
+          const formPlugin = cms.forms.find(name);
+          if (formPlugin) {
+            cms.forms.remove(formPlugin);
+          }
+        });
+      };
     }, [queryString, JSON.stringify(variables)]);
     return [data, isLoading];
   }
@@ -1677,12 +1692,14 @@ This will work when developing locally but NOT when deployed to production.
               name
               label
               format
+              templates
               documents @include(if: $includeDocuments) {
                 totalCount
                 edges {
                   node {
                     ... on Document {
                       sys {
+                        template
                         breadcrumbs
                         path
                         basename
@@ -1714,8 +1731,46 @@ This will work when developing locally but NOT when deployed to production.
     }
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection));
   };
+  const TemplateMenu = ({ templates }) => {
+    return /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
+      as: "div",
+      className: "relative inline-block text-left"
+    }, ({ open }) => /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Button, {
+      className: "inline-flex items-center px-8 py-2.5 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out",
+      style: { background: "#0084FF" }
+    }, "Create New", /* @__PURE__ */ React__default["default"].createElement("svg", {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: `ml-1 flex-0 inline-block opacity-50 group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open ? `rotate-90 opacity-100` : `rotate-0`}`
+    }, /* @__PURE__ */ React__default["default"].createElement("g", {
+      opacity: "1.0"
+    }, /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M7.91675 13.8086L9.16675 15.0586L14.2253 10L9.16675 4.9414L7.91675 6.1914L11.7253 10L7.91675 13.8086Z",
+      fill: "currentColor"
+    }))))), /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
+      as: React.Fragment,
+      enter: "transition ease-out duration-100",
+      enterFrom: "transform opacity-0 scale-95",
+      enterTo: "transform opacity-100 scale-100",
+      leave: "transition ease-in duration-75",
+      leaveFrom: "transform opacity-100 scale-100",
+      leaveTo: "transform opacity-0 scale-95"
+    }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Items, {
+      className: "origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "py-1"
+    }, templates.map((template) => /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, {
+      key: `${template.label}-${template.name}`
+    }, ({ active }) => /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
+      to: `${location.pathname}/${template.name}/new`,
+      className: `w-full text-md px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`
+    }, template.label))))))));
+  };
   const CollectionListPage = () => {
-    const location = reactRouterDom.useLocation();
+    const location2 = reactRouterDom.useLocation();
     const { collectionName } = reactRouterDom.useParams();
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
       cms,
@@ -1732,11 +1787,13 @@ This will work when developing locally but NOT when deployed to production.
         className: "w-full flex justify-between items-end"
       }, /* @__PURE__ */ React__default["default"].createElement("h3", {
         className: "text-3xl"
-      }, collection.label), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
-        to: `${location.pathname}/new`,
+      }, collection.label), !collection.templates && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
+        to: `${location2.pathname}/new`,
         className: "inline-flex items-center px-8 py-3 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out",
         style: { background: "#0084FF" }
-      }, "Create New")), totalCount > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
+      }, "Create New"), collection.templates && /* @__PURE__ */ React__default["default"].createElement(TemplateMenu, {
+        templates: collection.templates
+      })), totalCount > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "mt-8 shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
       }, /* @__PURE__ */ React__default["default"].createElement("table", {
         className: "min-w-full"
@@ -1747,7 +1804,7 @@ This will work when developing locally but NOT when deployed to production.
       }, /* @__PURE__ */ React__default["default"].createElement("td", {
         className: "px-6 py-2 whitespace-nowrap"
       }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
-        to: `${location.pathname}/${document2.node.sys.filename}`,
+        to: `${location2.pathname}/${document2.node.sys.filename}`,
         className: "text-blue-600 hover:text-blue-400 flex items-center gap-3"
       }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
         className: "inline-block h-6 w-auto opacity-70"
@@ -1761,12 +1818,19 @@ This will work when developing locally but NOT when deployed to production.
         className: "block text-xs text-gray-400 mb-1 uppercase"
       }, "Extension"), /* @__PURE__ */ React__default["default"].createElement("span", {
         className: "h-5 leading-5 block text-sm font-medium text-gray-900"
-      }, document2.node.sys.extension)))))))));
+      }, document2.node.sys.extension)), /* @__PURE__ */ React__default["default"].createElement("td", {
+        className: "px-6 py-4 whitespace-nowrap"
+      }, /* @__PURE__ */ React__default["default"].createElement("span", {
+        className: "block text-xs text-gray-400 mb-1 uppercase"
+      }, "Template"), /* @__PURE__ */ React__default["default"].createElement("span", {
+        className: "h-5 leading-5 block text-sm font-medium text-gray-900"
+      }, document2.node.sys.template)))))))));
     }));
   };
-  const useGetDocumentFields = (cms, collectionName) => {
+  const useGetDocumentFields = (cms, collectionName, templateName) => {
     const [info, setInfo] = React.useState({
       collection: void 0,
+      template: void 0,
       fields: void 0,
       mutationInfo: void 0
     });
@@ -1775,10 +1839,18 @@ This will work when developing locally but NOT when deployed to production.
         const response = await cms.api.tina.request(`query { getDocumentFields }`, {});
         const documentFields = response.getDocumentFields;
         const collection = documentFields[collectionName].collection;
-        const fields = documentFields[collectionName].fields;
         const mutationInfo = documentFields[collectionName].mutationInfo;
+        let fields = void 0;
+        let template = void 0;
+        if (templateName && documentFields[collectionName].templates && documentFields[collectionName].templates[templateName]) {
+          template = documentFields[collectionName].templates[templateName].template;
+          fields = documentFields[collectionName].templates[templateName].fields;
+        } else {
+          fields = documentFields[collectionName].fields;
+        }
         setInfo({
           collection,
+          template,
           fields,
           mutationInfo
         });
@@ -1790,44 +1862,44 @@ This will work when developing locally but NOT when deployed to production.
   const GetDocumentFields = ({
     cms,
     collectionName,
+    templateName,
     children
   }) => {
-    const { collection, fields, mutationInfo } = useGetDocumentFields(cms, collectionName);
-    if (!collection || !fields || !mutationInfo) {
+    const { collection, template, fields, mutationInfo } = useGetDocumentFields(cms, collectionName, templateName);
+    if (!collection) {
       return null;
     }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection, fields, mutationInfo));
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children({ collection, template, fields, mutationInfo }));
   };
-  const createDocument = async (cms, collection, mutationInfo, values) => {
+  const createDocument = async (cms, collection, template, mutationInfo, values) => {
     const _a = values, { relativePath } = _a, leftover = __objRest(_a, ["relativePath"]);
     const { includeCollection, includeTemplate } = mutationInfo;
-    const params = transformDocumentIntoMutationRequestPayload(__spreadValues({
+    const params = transformDocumentIntoMutationRequestPayload(__spreadValues(__spreadValues({
       _collection: collection.name
-    }, leftover), {
+    }, template && { _template: template.name }), leftover), {
       includeCollection,
       includeTemplate
     });
-    await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
-      createDocument(
-        collection: $collection, 
+    await cms.api.tina.request(`mutation($relativePath: String!, $params: DocumentMutation!) {
+      createDocument( 
         relativePath: $relativePath, 
         params: $params
       ){__typename}
     }`, {
       variables: {
-        collection: collection.name,
         relativePath,
         params
       }
     });
   };
   const CollectionCreatePage = () => {
-    const { collectionName } = reactRouterDom.useParams();
+    const { collectionName, templateName } = reactRouterDom.useParams();
     const history = reactRouterDom.useHistory();
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetDocumentFields, {
       cms,
-      collectionName
-    }, (collection, fields, mutationInfo) => {
+      collectionName,
+      templateName
+    }, ({ collection, template, fields, mutationInfo }) => {
       const form = new toolkit.Form({
         id: "create-form",
         label: "form",
@@ -1842,16 +1914,17 @@ This will work when developing locally but NOT when deployed to production.
           ...fields
         ],
         onSubmit: async (values) => {
-          await createDocument(cms, collection, mutationInfo, values);
+          await createDocument(cms, collection, template, mutationInfo, values);
           history.push(`/admin/collections/${collection.name}`);
         }
       });
+      const formLabel = template ? `${collection.label} - Create New ${template.label}` : `${collection.label} - Create New`;
       return /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "w-full h-screen"
       }, /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "flex flex-col items-center w-full flex-1"
       }, /* @__PURE__ */ React__default["default"].createElement(toolkit.FullscreenFormBuilder, {
-        label: collection.label + " - Create New",
+        label: formLabel,
         form
       })));
     }));
@@ -1887,21 +1960,19 @@ This will work when developing locally but NOT when deployed to production.
     }
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(document2));
   };
-  const updateDocument = async (cms, collection, document2, relativePath, values) => {
-    const { includeCollection, includeTemplate } = document2.form.mutationInfo;
+  const updateDocument = async (cms, relativePath, mutationInfo, values) => {
+    const { includeCollection, includeTemplate } = mutationInfo;
     const params = transformDocumentIntoMutationRequestPayload(values, {
       includeCollection,
       includeTemplate
     });
-    await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
-      updateDocument(
-        collection: $collection, 
+    await cms.api.tina.request(`mutation($relativePath: String!, $params: DocumentMutation!) {
+      updateDocument( 
         relativePath: $relativePath, 
         params: $params
       ){__typename}
     }`, {
       variables: {
-        collection: collection.name,
         relativePath,
         params
       }
@@ -1910,11 +1981,10 @@ This will work when developing locally but NOT when deployed to production.
   const CollectionUpdatePage = () => {
     const { collectionName, filename } = reactRouterDom.useParams();
     const history = reactRouterDom.useHistory();
-    return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
+    return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetDocumentFields, {
       cms,
-      collectionName,
-      includeDocuments: false
-    }, (collection) => {
+      collectionName
+    }, ({ collection, mutationInfo }) => {
       const relativePath = `${filename}.${collection.format}`;
       return /* @__PURE__ */ React__default["default"].createElement(GetDocument, {
         cms,
@@ -1927,7 +1997,7 @@ This will work when developing locally but NOT when deployed to production.
           fields: document2.form.fields,
           initialValues: document2.values,
           onSubmit: async (values) => {
-            await updateDocument(cms, collection, document2, relativePath, values);
+            await updateDocument(cms, relativePath, mutationInfo, values);
             history.push(`/admin/collections/${collection.name}`);
           }
         });
@@ -2047,6 +2117,8 @@ This will work when developing locally but NOT when deployed to production.
       className: "flex-1"
     }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
       path: `/admin/collections/:collectionName/new`
+    }, /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+      path: `/admin/collections/:collectionName/:templateName/new`
     }, /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
       path: `/admin/collections/:collectionName/:filename`
     }, /* @__PURE__ */ React__default["default"].createElement(CollectionUpdatePage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {

package/dist/rich-text.es.js

@@ -42,7 +42,8 @@ const TinaMarkdown = ({
     console.log(`Expected to find structured content for TinaMarkdown`);
     return null;
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, nodes.map((child) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, nodes.map((child, index) => {
+    const key = index;
     const _a = child, { children } = _a, props = __objRest(_a, ["children"]);
     switch (child.type) {
       case "h1":
@@ -58,7 +59,9 @@ const TinaMarkdown = ({
       case "li":
         if (components[child.type]) {
           const Component2 = components[child.type];
-          return /* @__PURE__ */ React.createElement(Component2, __spreadProps(__spreadValues({}, props), {
+          return /* @__PURE__ */ React.createElement(Component2, __spreadProps(__spreadValues({
+            key
+          }, props), {
             childrenRaw: children
           }), /* @__PURE__ */ React.createElement(TinaMarkdown, {
             components,
@@ -66,34 +69,43 @@ const TinaMarkdown = ({
           }));
         }
         return React.createElement(child.type, {
+          key,
           children: /* @__PURE__ */ React.createElement(TinaMarkdown, {
             components,
             content: children
           })
         });
       case "lic":
-        return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TinaMarkdown, {
+        return /* @__PURE__ */ React.createElement("div", {
+          key
+        }, /* @__PURE__ */ React.createElement(TinaMarkdown, {
           components,
           content: child.children
         }));
       case "img":
         if (components[child.type]) {
           const Component2 = components[child.type];
-          return /* @__PURE__ */ React.createElement(Component2, __spreadValues({}, props));
+          return /* @__PURE__ */ React.createElement(Component2, __spreadValues({
+            key
+          }, props));
         }
         return /* @__PURE__ */ React.createElement("img", {
+          key,
           src: child.url,
           alt: child.caption
         });
       case "a":
         if (components[child.type]) {
           const Component2 = components[child.type];
-          return /* @__PURE__ */ React.createElement(Component2, __spreadValues({}, props), /* @__PURE__ */ React.createElement(TinaMarkdown, {
+          return /* @__PURE__ */ React.createElement(Component2, __spreadValues({
+            key
+          }, props), /* @__PURE__ */ React.createElement(TinaMarkdown, {
             components,
             content: children
           }));
         }
         return /* @__PURE__ */ React.createElement("a", {
+          key,
           href: child.url
         }, /* @__PURE__ */ React.createElement(TinaMarkdown, {
           components,
@@ -105,19 +117,28 @@ const TinaMarkdown = ({
         }).join("\n");
         if (components[child.type]) {
           const Component2 = components[child.type];
-          return /* @__PURE__ */ React.createElement(Component2, __spreadProps(__spreadValues({}, props), {
+          return /* @__PURE__ */ React.createElement(Component2, __spreadProps(__spreadValues({
+            key
+          }, props), {
             childrenRaw: children
           }), value);
         }
-        return /* @__PURE__ */ React.createElement("pre", null, /* @__PURE__ */ React.createElement("code", null, value));
+        return /* @__PURE__ */ React.createElement("pre", {
+          key
+        }, /* @__PURE__ */ React.createElement("code", null, value));
       case "hr":
         if (components[child.type]) {
           const Component2 = components[child.type];
-          return /* @__PURE__ */ React.createElement(Component2, __spreadValues({}, props));
+          return /* @__PURE__ */ React.createElement(Component2, __spreadValues({
+            key
+          }, props));
         }
-        return /* @__PURE__ */ React.createElement("hr", null);
+        return /* @__PURE__ */ React.createElement("hr", {
+          key
+        });
       case "text":
         return /* @__PURE__ */ React.createElement(Leaf, __spreadValues({
+          key,
           components
         }, child));
       case "mdxJsxTextElement":
@@ -125,11 +146,14 @@ const TinaMarkdown = ({
         const Component = components[child.name];
         if (Component) {
           const props2 = child.props ? child.props : {};
-          return /* @__PURE__ */ React.createElement(Component, __spreadValues({}, props2));
+          return /* @__PURE__ */ React.createElement(Component, __spreadValues({
+            key
+          }, props2));
         } else {
           const ComponentMissing = components["component_missing"];
           if (ComponentMissing) {
             return /* @__PURE__ */ React.createElement(ComponentMissing, {
+              key,
               name: child.name
             });
           } else {
@@ -139,6 +163,7 @@ const TinaMarkdown = ({
       default:
         if (typeof child.text === "string") {
           return /* @__PURE__ */ React.createElement(Leaf, __spreadValues({
+            key,
             components
           }, child));
         }

package/dist/rich-text.js

@@ -49,7 +49,8 @@ var __objRest = (source, exclude) => {
       console.log(`Expected to find structured content for TinaMarkdown`);
       return null;
     }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, nodes.map((child) => {
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, nodes.map((child, index) => {
+      const key = index;
       const _a = child, { children } = _a, props = __objRest(_a, ["children"]);
       switch (child.type) {
         case "h1":
@@ -65,7 +66,9 @@ var __objRest = (source, exclude) => {
         case "li":
           if (components[child.type]) {
             const Component2 = components[child.type];
-            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadProps(__spreadValues({}, props), {
+            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadProps(__spreadValues({
+              key
+            }, props), {
               childrenRaw: children
             }), /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
               components,
@@ -73,34 +76,43 @@ var __objRest = (source, exclude) => {
             }));
           }
           return React__default["default"].createElement(child.type, {
+            key,
             children: /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
               components,
               content: children
             })
           });
         case "lic":
-          return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
+          return /* @__PURE__ */ React__default["default"].createElement("div", {
+            key
+          }, /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
             components,
             content: child.children
           }));
         case "img":
           if (components[child.type]) {
             const Component2 = components[child.type];
-            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadValues({}, props));
+            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadValues({
+              key
+            }, props));
           }
           return /* @__PURE__ */ React__default["default"].createElement("img", {
+            key,
             src: child.url,
             alt: child.caption
           });
         case "a":
           if (components[child.type]) {
             const Component2 = components[child.type];
-            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadValues({}, props), /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
+            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadValues({
+              key
+            }, props), /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
               components,
               content: children
             }));
           }
           return /* @__PURE__ */ React__default["default"].createElement("a", {
+            key,
             href: child.url
           }, /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
             components,
@@ -112,19 +124,28 @@ var __objRest = (source, exclude) => {
           }).join("\n");
           if (components[child.type]) {
             const Component2 = components[child.type];
-            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadProps(__spreadValues({}, props), {
+            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadProps(__spreadValues({
+              key
+            }, props), {
               childrenRaw: children
             }), value);
           }
-          return /* @__PURE__ */ React__default["default"].createElement("pre", null, /* @__PURE__ */ React__default["default"].createElement("code", null, value));
+          return /* @__PURE__ */ React__default["default"].createElement("pre", {
+            key
+          }, /* @__PURE__ */ React__default["default"].createElement("code", null, value));
         case "hr":
           if (components[child.type]) {
             const Component2 = components[child.type];
-            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadValues({}, props));
+            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadValues({
+              key
+            }, props));
           }
-          return /* @__PURE__ */ React__default["default"].createElement("hr", null);
+          return /* @__PURE__ */ React__default["default"].createElement("hr", {
+            key
+          });
         case "text":
           return /* @__PURE__ */ React__default["default"].createElement(Leaf, __spreadValues({
+            key,
             components
           }, child));
         case "mdxJsxTextElement":
@@ -132,11 +153,14 @@ var __objRest = (source, exclude) => {
           const Component = components[child.name];
           if (Component) {
             const props2 = child.props ? child.props : {};
-            return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadValues({}, props2));
+            return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadValues({
+              key
+            }, props2));
           } else {
             const ComponentMissing = components["component_missing"];
             if (ComponentMissing) {
               return /* @__PURE__ */ React__default["default"].createElement(ComponentMissing, {
+                key,
                 name: child.name
               });
             } else {
@@ -146,6 +170,7 @@ var __objRest = (source, exclude) => {
         default:
           if (typeof child.text === "string") {
             return /* @__PURE__ */ React__default["default"].createElement(Leaf, __spreadValues({
+              key,
               components
             }, child));
           }

package/dist/tina-cms.d.ts

@@ -38,7 +38,7 @@ export declare const TinaCMSProvider2: ({ children, branch, clientId, isLocalCli
     /** Callback if you need access to the "document creator" API */
     documentCreatorCallback?: Parameters<typeof useDocumentCreatorPlugin>[0];
     /** TinaCMS media store instance */
-    mediaStore?: TinaCloudMediaStoreClass | Promise<TinaCloudMediaStoreClass>;
+    mediaStore?: TinaCloudMediaStoreClass | (() => Promise<TinaCloudMediaStoreClass>);
     tinaioConfig?: TinaIOConfig;
 }) => JSX.Element;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "0.57.0",
+  "version": "0.57.4",
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -25,7 +25,7 @@
     "@graphql-codegen/typescript-operations": "^1.15.4",
     "@headlessui/react": "^1.4.1",
     "@heroicons/react": "^1.0.4",
-    "@tinacms/toolkit": "0.55.0",
+    "@tinacms/toolkit": "0.55.2",
     "@xstate/react": "^1.1.0",
     "codemirror": "^5.55.0",
     "cors": "^2.8.5",