tinacms 0.62.0 → 0.63.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # tinacms
 
+## 0.63.0
+
+### Minor Changes
+
+- 3897ec5d9: Replace `branch`, `clientId`, `isLocalClient` props with single `apiURL`. When working locally, this should be `http://localhost:4001/graphql`. For Tina Cloud, use `https://content.tinajs.io/content/<my-client-id>/github/<my-branch>`
+
+  ```tsx
+  // _app.tsx
+  // ...
+  <TinaCMS apiURL={process.env.NEXT_PUBLIC_TINA_API_URL} {...pageProps}>
+    {livePageProps => <Component {...livePageProps} />}
+  </TinaCMS>
+  ```
+
+  DEPRECATION NOTICE: `branch`, `clientId`, `isLocalClient` props will be deprecated in the future
+
+### Patch Changes
+
+- 96e4a77e2: Fixed types
+- b5c22503a: Changes messaging on login page for TinaAdmin when in local-mode
+- Updated dependencies [60f939f34]
+  - @tinacms/toolkit@0.56.6
+
 ## 0.62.0
 
 ### Minor Changes

package/dist/index.es.js

@@ -39,6 +39,7 @@ import styled from "styled-components";
 import * as yup from "yup";
 import { setEditing, useEditState } from "@tinacms/sharedctx";
 import { getIn, setIn } from "final-form";
+import UrlPattern from "url-pattern";
 import { NavLink, useLocation, useParams, Link, useNavigate, BrowserRouter, Routes, Route } from "react-router-dom";
 import { Menu, Transition } from "@headlessui/react";
 function popupWindow(url, title, window2, w, h) {
@@ -1475,20 +1476,29 @@ class ErrorBoundary extends React.Component {
     return this.props.children;
   }
 }
+const parseURL = (url) => {
+  if (url.includes("localhost")) {
+    return { branch: null, isLocalClient: true, clientId: null };
+  }
+  const tinaHost = "content.tinajs.io";
+  const params = new URL(url);
+  const pattern = new UrlPattern("/content/:clientId/github/:branch");
+  const result = pattern.match(params.pathname);
+  if (params.host !== tinaHost) {
+    throw new Error(`The only supported hosts are ${tinaHost} or localhost, but received ${params.host}.`);
+  }
+  return __spreadProps(__spreadValues({}, result), {
+    isLocalClient: false
+  });
+};
 const TinaCMSProvider2 = (_c) => {
   var _d = _c, {
     children,
-    branch,
-    clientId,
-    isLocalClient,
     cmsCallback,
     mediaStore,
     tinaioConfig
   } = _d, props = __objRest(_d, [
     "children",
-    "branch",
-    "clientId",
-    "isLocalClient",
     "cmsCallback",
     "mediaStore",
     "tinaioConfig"
@@ -1496,6 +1506,14 @@ const TinaCMSProvider2 = (_c) => {
   if (typeof props.query === "string") {
     props.query;
   }
+  if (!props.apiURL && !((props == null ? void 0 : props.clientId) || (props == null ? void 0 : props.isLocalClient))) {
+    throw new Error(`apiURL is a required field`);
+  }
+  const { branch, clientId, isLocalClient } = props.apiURL ? parseURL(props.apiURL) : {
+    branch: props.branch,
+    clientId: props.clientId,
+    isLocalClient: props.isLocalClient
+  };
   return /* @__PURE__ */ React.createElement(TinaCloudProvider, {
     branch,
     clientId,
@@ -1637,10 +1655,10 @@ const staticRequest = async ({
   if (!is_server()) {
     console.warn(`Whoops! Looks like you are using \`staticRequest\` in the browser to fetch data.
 
-The local server is not available outside of \`getStaticProps\` or \`getStaticPaths\` functions. 
+The local server is not available outside of \`getStaticProps\` or \`getStaticPaths\` functions.
 This function should only be called on the server at build time.
 
-This will work when developing locally but NOT when deployed to production. 
+This will work when developing locally but NOT when deployed to production.
 `);
   }
   return client.request(query, { variables });
@@ -1784,7 +1802,7 @@ const AuthTemplate = ({
   return /* @__PURE__ */ React.createElement("div", {
     className: "h-screen w-full bg-gradient-to-b from-blue-900 to-gray-900 flex items-center justify-center px-4 py-6"
   }, /* @__PURE__ */ React.createElement("div", {
-    className: "bg-white rounded-lg overflow-hidden shadow-lg w-full max-w-md"
+    className: "bg-white rounded-lg overflow-hidden shadow-lg w-full max-w-lg"
   }, /* @__PURE__ */ React.createElement("div", {
     className: "px-5 py-4 border-b border-gray-150"
   }, /* @__PURE__ */ React.createElement("h2", {
@@ -1809,9 +1827,7 @@ const AuthTemplate = ({
 const LoginPage = () => {
   const { setEdit } = useEditState();
   const login = () => setEdit(true);
-  return /* @__PURE__ */ React.createElement(AuthTemplate, {
-    message: "Please log in to Tina Cloud to access your content."
-  }, /* @__PURE__ */ React.createElement("a", {
+  return /* @__PURE__ */ React.createElement(AuthTemplate, null, /* @__PURE__ */ React.createElement("a", {
     href: "/",
     className: "flex-1 text-center inline-flex justify-center items-center px-8 py-3 shadow-sm text-sm leading-4 font-medium rounded-full text-gray-600 border border-gray-150 hover:opacity-80 hover:bg-gray-50 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out"
   }, /* @__PURE__ */ React.createElement(MdOutlineArrowBack, {
@@ -1823,7 +1839,7 @@ const LoginPage = () => {
     style: { background: "#0084FF" }
   }, /* @__PURE__ */ React.createElement(BiLogIn, {
     className: "w-6 h-auto mr-1.5 opacity-80"
-  }), " Log in"));
+  }), " Enter edit-mode"));
 };
 const logout = () => {
   setEditing(false);

package/dist/index.js

@@ -30,8 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("graphql-tag"), require("react"), require("styled-components"), require("yup"), require("@tinacms/sharedctx"), require("final-form"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "graphql-tag", "react", "styled-components", "yup", "@tinacms/sharedctx", "final-form", "react-router-dom", "@headlessui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, toolkit, graphql, set, gql$1, React, styled, yup, sharedctx, finalForm, reactRouterDom, react) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("graphql-tag"), require("react"), require("styled-components"), require("yup"), require("@tinacms/sharedctx"), require("final-form"), require("url-pattern"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "graphql-tag", "react", "styled-components", "yup", "@tinacms/sharedctx", "final-form", "url-pattern", "react-router-dom", "@headlessui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, toolkit, graphql, set, gql$1, React, styled, yup, sharedctx, finalForm, UrlPattern, reactRouterDom, react) {
   "use strict";
   function _interopDefaultLegacy(e) {
     return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -61,6 +61,7 @@ var __objRest = (source, exclude) => {
   var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
   var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
   var yup__namespace = /* @__PURE__ */ _interopNamespace(yup);
+  var UrlPattern__default = /* @__PURE__ */ _interopDefaultLegacy(UrlPattern);
   function popupWindow(url, title, window2, w, h) {
     const y = window2.top.outerHeight / 2 + window2.top.screenY - h / 2;
     const x = window2.top.outerWidth / 2 + window2.top.screenX - w / 2;
@@ -1495,20 +1496,29 @@ mutation addPendingDocumentMutation(
       return this.props.children;
     }
   }
+  const parseURL = (url) => {
+    if (url.includes("localhost")) {
+      return { branch: null, isLocalClient: true, clientId: null };
+    }
+    const tinaHost = "content.tinajs.io";
+    const params = new URL(url);
+    const pattern = new UrlPattern__default["default"]("/content/:clientId/github/:branch");
+    const result = pattern.match(params.pathname);
+    if (params.host !== tinaHost) {
+      throw new Error(`The only supported hosts are ${tinaHost} or localhost, but received ${params.host}.`);
+    }
+    return __spreadProps(__spreadValues({}, result), {
+      isLocalClient: false
+    });
+  };
   const TinaCMSProvider2 = (_c) => {
     var _d = _c, {
       children,
-      branch,
-      clientId,
-      isLocalClient,
       cmsCallback,
       mediaStore,
       tinaioConfig
     } = _d, props = __objRest(_d, [
       "children",
-      "branch",
-      "clientId",
-      "isLocalClient",
       "cmsCallback",
       "mediaStore",
       "tinaioConfig"
@@ -1516,6 +1526,14 @@ mutation addPendingDocumentMutation(
     if (typeof props.query === "string") {
       props.query;
     }
+    if (!props.apiURL && !((props == null ? void 0 : props.clientId) || (props == null ? void 0 : props.isLocalClient))) {
+      throw new Error(`apiURL is a required field`);
+    }
+    const { branch, clientId, isLocalClient } = props.apiURL ? parseURL(props.apiURL) : {
+      branch: props.branch,
+      clientId: props.clientId,
+      isLocalClient: props.isLocalClient
+    };
     return /* @__PURE__ */ React__default["default"].createElement(TinaCloudProvider, {
       branch,
       clientId,
@@ -1657,10 +1675,10 @@ mutation addPendingDocumentMutation(
     if (!is_server()) {
       console.warn(`Whoops! Looks like you are using \`staticRequest\` in the browser to fetch data.
 
-The local server is not available outside of \`getStaticProps\` or \`getStaticPaths\` functions. 
+The local server is not available outside of \`getStaticProps\` or \`getStaticPaths\` functions.
 This function should only be called on the server at build time.
 
-This will work when developing locally but NOT when deployed to production. 
+This will work when developing locally but NOT when deployed to production.
 `);
     }
     return client.request(query, { variables });
@@ -1804,7 +1822,7 @@ This will work when developing locally but NOT when deployed to production.
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "h-screen w-full bg-gradient-to-b from-blue-900 to-gray-900 flex items-center justify-center px-4 py-6"
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "bg-white rounded-lg overflow-hidden shadow-lg w-full max-w-md"
+      className: "bg-white rounded-lg overflow-hidden shadow-lg w-full max-w-lg"
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "px-5 py-4 border-b border-gray-150"
     }, /* @__PURE__ */ React__default["default"].createElement("h2", {
@@ -1829,9 +1847,7 @@ This will work when developing locally but NOT when deployed to production.
   const LoginPage = () => {
     const { setEdit } = sharedctx.useEditState();
     const login = () => setEdit(true);
-    return /* @__PURE__ */ React__default["default"].createElement(AuthTemplate, {
-      message: "Please log in to Tina Cloud to access your content."
-    }, /* @__PURE__ */ React__default["default"].createElement("a", {
+    return /* @__PURE__ */ React__default["default"].createElement(AuthTemplate, null, /* @__PURE__ */ React__default["default"].createElement("a", {
       href: "/",
       className: "flex-1 text-center inline-flex justify-center items-center px-8 py-3 shadow-sm text-sm leading-4 font-medium rounded-full text-gray-600 border border-gray-150 hover:opacity-80 hover:bg-gray-50 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out"
     }, /* @__PURE__ */ React__default["default"].createElement(MdOutlineArrowBack, {
@@ -1843,7 +1859,7 @@ This will work when developing locally but NOT when deployed to production.
       style: { background: "#0084FF" }
     }, /* @__PURE__ */ React__default["default"].createElement(BiLogIn, {
       className: "w-6 h-auto mr-1.5 opacity-80"
-    }), " Log in"));
+    }), " Enter edit-mode"));
   };
   const logout = () => {
     sharedctx.setEditing(false);