sanity-plugin-documents-pane 1.0.5 → 1.0.8

package/.eslintignore

@@ -0,0 +1 @@
+lib

package/README.md

@@ -38,6 +38,10 @@ The `.options()` configuration works as follows:
 - `useDraft` (bool, optional, default: `false`) When populating the `params` values, it will use the `published` version of the document by default.
 - `debug` (bool, optional, default: `false`) In case of an error or the query returning no documents, setting to `true` will display the query and params that were used.
 
+## Thanks!
+
+This plugin is based on [Incoming References](https://github.com/sanity-io/sanity/tree/victoria/incoming-refs-preview/packages/test-studio/src/previews/incoming-refs) originally written by Victoria Bergquist.
+
 ## License
 
 MIT © Simeon Griggs

package/lib/Debug.js

@@ -7,8 +7,6 @@ exports.default = Debug;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _ui = require("@sanity/ui");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -22,13 +20,4 @@ function Debug(_ref) {
     space: 4
   }, /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_ui.Label, null, "Params")), /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_ui.Code, null, JSON.stringify(params)))));
 }
-
-Debug.propTypes = {
-  params: _propTypes.default.object,
-  query: _propTypes.default.string
-};
-Debug.defaultProps = {
-  params: {},
-  query: ""
-};
 //# sourceMappingURL=Debug.js.map

package/lib/Debug.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Debug.js"],"names":["Debug","query","params","JSON","stringify","propTypes","PropTypes","object","string","defaultProps"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEe,SAASA,KAAT,OAAgC;AAAA,MAAhBC,KAAgB,QAAhBA,KAAgB;AAAA,MAATC,MAAS,QAATA,MAAS;AAC7C,sBACE,yEACE,6BAAC,SAAD;AAAO,IAAA,KAAK,EAAE;AAAd,kBACE,6BAAC,OAAD,qBAAK,6BAAC,SAAD,gBAAL,CADF,eAEE,6BAAC,OAAD,qBACE,6BAAC,QAAD,QAAOD,KAAP,CADF,CAFF,CADF,eAOE,6BAAC,SAAD;AAAO,IAAA,KAAK,EAAE;AAAd,kBACE,6BAAC,OAAD,qBAAK,6BAAC,SAAD,iBAAL,CADF,eAEE,6BAAC,OAAD,qBACE,6BAAC,QAAD,QAAOE,IAAI,CAACC,SAAL,CAAeF,MAAf,CAAP,CADF,CAFF,CAPF,CADF;AAgBD;;AAEDF,KAAK,CAACK,SAAN,GAAkB;AAChBH,EAAAA,MAAM,EAAEI,mBAAUC,MADF;AAEhBN,EAAAA,KAAK,EAAEK,mBAAUE;AAFD,CAAlB;AAKAR,KAAK,CAACS,YAAN,GAAqB;AACnBP,EAAAA,MAAM,EAAE,EADW;AAEnBD,EAAAA,KAAK;AAFc,CAArB","sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport {Code, Box, Label, Stack} from '@sanity/ui'\n\nexport default function Debug({query, params}) {\n  return (\n    <>\n      <Stack space={4}>\n        <Box><Label>Query</Label></Box>\n        <Box>\n          <Code>{query}</Code>\n        </Box>\n      </Stack>\n      <Stack space={4}>\n        <Box><Label>Params</Label></Box>\n        <Box>\n          <Code>{JSON.stringify(params)}</Code>\n        </Box>\n      </Stack>\n    </>\n  )\n}\n\nDebug.propTypes = {\n  params: PropTypes.object,\n  query: PropTypes.string,\n}\n\nDebug.defaultProps = {\n  params: {},\n  query: ``,\n}\n"],"file":"Debug.js"}
+{"version":3,"file":"Debug.js","names":["Debug","query","params","JSON","stringify"],"sources":["../src/Debug.tsx"],"sourcesContent":["import React from 'react'\nimport {Code, Box, Label, Stack} from '@sanity/ui'\n\nexport default function Debug({query, params}) {\n  return (\n    <>\n      <Stack space={4}>\n        <Box><Label>Query</Label></Box>\n        <Box>\n          <Code>{query}</Code>\n        </Box>\n      </Stack>\n      <Stack space={4}>\n        <Box><Label>Params</Label></Box>\n        <Box>\n          <Code>{JSON.stringify(params)}</Code>\n        </Box>\n      </Stack>\n    </>\n  )\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEe,SAASA,KAAT,OAAgC;EAAA,IAAhBC,KAAgB,QAAhBA,KAAgB;EAAA,IAATC,MAAS,QAATA,MAAS;EAC7C,oBACE,yEACE,6BAAC,SAAD;IAAO,KAAK,EAAE;EAAd,gBACE,6BAAC,OAAD,qBAAK,6BAAC,SAAD,gBAAL,CADF,eAEE,6BAAC,OAAD,qBACE,6BAAC,QAAD,QAAOD,KAAP,CADF,CAFF,CADF,eAOE,6BAAC,SAAD;IAAO,KAAK,EAAE;EAAd,gBACE,6BAAC,OAAD,qBAAK,6BAAC,SAAD,iBAAL,CADF,eAEE,6BAAC,OAAD,qBACE,6BAAC,QAAD,QAAOE,IAAI,CAACC,SAAL,CAAeF,MAAf,CAAP,CADF,CAFF,CAPF,CADF;AAgBD"}

package/lib/Documents.js

@@ -5,37 +5,43 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Documents;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactQuery = require("react-query");
 
-var _router = require("part:@sanity/base/router");
+var _ui = require("@sanity/ui");
 
-var _schema = _interopRequireDefault(require("part:@sanity/base/schema"));
+var _deskTool = require("@sanity/desk-tool");
 
-var _reactQuery = require("react-query");
+var _paths = require("@sanity/util/paths");
 
-var _client = _interopRequireDefault(require("part:@sanity/base/client"));
+var _preview = _interopRequireDefault(require("part:@sanity/base/preview"));
 
-var _ui = require("@sanity/ui");
+var _schema = _interopRequireDefault(require("part:@sanity/base/schema"));
 
-var _preview = _interopRequireDefault(require("part:@sanity/base/preview"));
+var _client = _interopRequireDefault(require("part:@sanity/base/client"));
 
 var _Debug = _interopRequireDefault(require("./Debug"));
 
-var _DocumentsModule = _interopRequireDefault(require("./Documents.module.css"));
+var _Feedback = _interopRequireDefault(require("./Feedback"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// import {RouterContext} from '@sanity/state-router/lib/RouterContext'
 var client = _client.default.withConfig({
   apiVersion: "2021-05-19"
 });
 
 function Documents(props) {
+  var _routerPanesState;
+
   var query = props.query,
       params = props.params,
-      debug = props.debug,
-      _rev = props._rev;
+      debug = props.debug;
 
   var _useQuery = (0, _reactQuery.useQuery)(['useDocuments', {
     props
@@ -44,15 +50,23 @@ function Documents(props) {
       error = _useQuery.error,
       data = _useQuery.data;
 
-  if (!_rev) {
-    return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
-      padding: 4,
-      space: 5
-    }, /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_ui.Text, null, "Document must be Published")), debug && /*#__PURE__*/_react.default.createElement(_Debug.default, {
-      query: query,
-      params: params
-    }));
-  }
+  var _usePaneRouter = (0, _deskTool.usePaneRouter)(),
+      routerPanesState = _usePaneRouter.routerPanesState,
+      groupIndex = _usePaneRouter.groupIndex,
+      handleEditReference = _usePaneRouter.handleEditReference;
+
+  var childParams = ((_routerPanesState = routerPanesState[groupIndex + 1]) === null || _routerPanesState === void 0 ? void 0 : _routerPanesState[0].params) || {};
+  var parentRefPath = childParams.parentRefPath;
+  var handleClick = (0, _react.useCallback)((id, type) => {
+    handleEditReference({
+      id,
+      type,
+      // Uncertain that this works as intended
+      parentRefPath: parentRefPath ? (0, _paths.fromString)(parentRefPath) : [""],
+      // Added this to satisfy TS
+      template: type
+    });
+  }, [routerPanesState]);
 
   if (isLoading) {
     return /*#__PURE__*/_react.default.createElement(_ui.Box, {
@@ -69,7 +83,7 @@ function Documents(props) {
     return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
       padding: 4,
       space: 5
-    }, /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_ui.Text, null, "There was en error performing this query")), debug && /*#__PURE__*/_react.default.createElement(_Debug.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Feedback.default, null, "There was en error performing this query"), debug && /*#__PURE__*/_react.default.createElement(_Debug.default, {
       query: query,
       params: params
     }));
@@ -79,36 +93,22 @@ function Documents(props) {
     return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
       padding: 4,
       space: 5
-    }, /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_ui.Text, null, "No Documents found")), debug && /*#__PURE__*/_react.default.createElement(_Debug.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Feedback.default, null, "No Documents found"), debug && /*#__PURE__*/_react.default.createElement(_Debug.default, {
       query: query,
       params: params
     }));
   }
 
   return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
-    className: _DocumentsModule.default.root
-  }, data.map(doc => /*#__PURE__*/_react.default.createElement(_router.IntentLink, {
-    key: doc._id,
-    intent: "edit",
-    params: {
-      id: doc._id,
-      type: doc._type
-    },
-    className: _DocumentsModule.default.item
+    padding: 2,
+    space: 1
+  }, data.map(doc => /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    onClick: () => handleClick(doc._id, doc._type),
+    padding: 2,
+    mode: "bleed"
   }, /*#__PURE__*/_react.default.createElement(_preview.default, {
     value: doc,
     type: _schema.default.get(doc._type)
   }))));
 }
-
-Documents.propTypes = {
-  _rev: _propTypes.default.string,
-  params: _propTypes.default.object,
-  query: _propTypes.default.string
-};
-Documents.defaultProps = {
-  _rev: "",
-  params: {},
-  query: ""
-};
 //# sourceMappingURL=Documents.js.map

package/lib/Documents.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Documents.js"],"names":["client","sanityClient","withConfig","apiVersion","Documents","props","query","params","debug","_rev","fetch","isLoading","error","data","length","styles","root","map","doc","_id","id","type","_type","item","schema","get","propTypes","PropTypes","string","object","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport {IntentLink} from 'part:@sanity/base/router'\nimport schema from 'part:@sanity/base/schema'\nimport {useQuery} from 'react-query'\nimport sanityClient from 'part:@sanity/base/client'\nimport {Text, Box, Stack, Flex, Spinner} from '@sanity/ui'\nimport Preview from 'part:@sanity/base/preview'\n\nimport Debug from './Debug'\nimport styles from './Documents.module.css'\n\nconst client = sanityClient.withConfig({apiVersion: `2021-05-19`})\n\nexport default function Documents(props) {\n  const {query, params, debug, _rev} = props\n\n  const {isLoading, error, data} = useQuery(['useDocuments', { props }], () =>\n    client.fetch(query, params)\n  )\n\n  if (!_rev) {\n    return (<Stack padding={4} space={5}>\n      <Box>\n        <Text>Document must be Published</Text>\n      </Box>\n      {debug && <Debug query={query} params={params} />}\n    </Stack>)\n  }\n\n  if (isLoading) {\n    return (\n      <Box padding={4}>\n        <Flex justify=\"center\" align=\"center\">\n          <Spinner muted />\n        </Flex>\n      </Box>\n    )\n  }\n\n  if (error) {\n    return (\n      <Stack padding={4} space={5}>\n        <Box>\n          <Text>There was en error performing this query</Text>\n        </Box>\n        {debug && <Debug query={query} params={params} />}\n      </Stack>\n    )\n  }\n\n  if (!data?.length) {\n    return (\n      <Stack padding={4} space={5}>\n        <Box>\n          <Text>No Documents found</Text>\n        </Box>\n        {debug && <Debug query={query} params={params} />}\n      </Stack>\n    )\n  }\n\n  return (\n    <Stack className={styles.root}>\n      {data.map((doc) => (\n        <IntentLink key={doc._id} intent=\"edit\" params={{id: doc._id, type: doc._type}} className={styles.item}>\n          <Preview value={doc} type={schema.get(doc._type)} />\n        </IntentLink>\n      ))}\n    </Stack>\n  )\n}\n\nDocuments.propTypes = {\n  _rev: PropTypes.string,\n  params: PropTypes.object,\n  query: PropTypes.string,\n}\n\nDocuments.defaultProps = {\n  _rev: ``,\n  params: {},\n  query: ``,\n}\n"],"file":"Documents.js"}
+{"version":3,"file":"Documents.js","names":["client","sanityClient","withConfig","apiVersion","Documents","props","query","params","debug","fetch","isLoading","error","data","routerPanesState","groupIndex","handleEditReference","childParams","parentRefPath","handleClick","id","type","template","length","map","doc","_id","_type","schema","get"],"sources":["../src/Documents.tsx"],"sourcesContent":["import React, {useCallback} from 'react'\nimport {useQuery} from 'react-query'\nimport {Box, Button, Stack, Flex, Spinner} from '@sanity/ui'\nimport {usePaneRouter} from '@sanity/desk-tool'\nimport {fromString as pathFromString} from '@sanity/util/paths'\n// import {RouterContext} from '@sanity/state-router/lib/RouterContext'\nimport Preview from 'part:@sanity/base/preview'\nimport schema from 'part:@sanity/base/schema'\nimport sanityClient from 'part:@sanity/base/client'\n\nimport Debug from './Debug'\nimport Feedback from './Feedback'\n\nconst client = sanityClient.withConfig({apiVersion: `2021-05-19`})\n\nexport default function Documents(props) {\n  const {query, params, debug} = props\n\n  const {isLoading, error, data} = useQuery(['useDocuments', {props}], () =>\n    client.fetch(query, params)\n  )\n\n  const {routerPanesState, groupIndex, handleEditReference} = usePaneRouter()\n  const childParams = routerPanesState[groupIndex + 1]?.[0].params || {}\n  const {parentRefPath} = childParams\n\n  const handleClick = useCallback((id, type) => {\n    handleEditReference({\n      id,\n      type,\n      // Uncertain that this works as intended\n      parentRefPath: parentRefPath ? pathFromString(parentRefPath) : [``],\n      // Added this to satisfy TS\n      template: type,\n    })\n  }, [routerPanesState])\n\n  if (isLoading) {\n    return (\n      <Box padding={4}>\n        <Flex justify=\"center\" align=\"center\">\n          <Spinner muted />\n        </Flex>\n      </Box>\n    )\n  }\n\n  if (error) {\n    return (\n      <Stack padding={4} space={5}>\n        <Feedback>There was en error performing this query</Feedback>\n        {debug && <Debug query={query} params={params} />}\n      </Stack>\n    )\n  }\n\n  if (!data?.length) {\n    return (\n      <Stack padding={4} space={5}>\n        <Feedback>No Documents found</Feedback>\n        {debug && <Debug query={query} params={params} />}\n      </Stack>\n    )\n  }\n\n  return (\n    <Stack padding={2} space={1}>\n      {data.map((doc) => (\n        <Button onClick={() => handleClick(doc._id, doc._type)} padding={2} mode=\"bleed\">\n          <Preview value={doc} type={schema.get(doc._type)} />\n        </Button>\n      ))}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;AANA;AAQA,IAAMA,MAAM,GAAGC,gBAAaC,UAAb,CAAwB;EAACC,UAAU;AAAX,CAAxB,CAAf;;AAEe,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;EAAA;;EACvC,IAAOC,KAAP,GAA+BD,KAA/B,CAAOC,KAAP;EAAA,IAAcC,MAAd,GAA+BF,KAA/B,CAAcE,MAAd;EAAA,IAAsBC,KAAtB,GAA+BH,KAA/B,CAAsBG,KAAtB;;EAEA,gBAAiC,0BAAS,CAAC,cAAD,EAAiB;IAACH;EAAD,CAAjB,CAAT,EAAoC,MACnEL,MAAM,CAACS,KAAP,CAAaH,KAAb,EAAoBC,MAApB,CAD+B,CAAjC;EAAA,IAAOG,SAAP,aAAOA,SAAP;EAAA,IAAkBC,KAAlB,aAAkBA,KAAlB;EAAA,IAAyBC,IAAzB,aAAyBA,IAAzB;;EAIA,qBAA4D,8BAA5D;EAAA,IAAOC,gBAAP,kBAAOA,gBAAP;EAAA,IAAyBC,UAAzB,kBAAyBA,UAAzB;EAAA,IAAqCC,mBAArC,kBAAqCA,mBAArC;;EACA,IAAMC,WAAW,GAAG,sBAAAH,gBAAgB,CAACC,UAAU,GAAG,CAAd,CAAhB,wEAAmC,CAAnC,EAAsCP,MAAtC,KAAgD,EAApE;EACA,IAAOU,aAAP,GAAwBD,WAAxB,CAAOC,aAAP;EAEA,IAAMC,WAAW,GAAG,wBAAY,CAACC,EAAD,EAAKC,IAAL,KAAc;IAC5CL,mBAAmB,CAAC;MAClBI,EADkB;MAElBC,IAFkB;MAGlB;MACAH,aAAa,EAAEA,aAAa,GAAG,uBAAeA,aAAf,CAAH,GAAmC,IAJ7C;MAKlB;MACAI,QAAQ,EAAED;IANQ,CAAD,CAAnB;EAQD,CATmB,EASjB,CAACP,gBAAD,CATiB,CAApB;;EAWA,IAAIH,SAAJ,EAAe;IACb,oBACE,6BAAC,OAAD;MAAK,OAAO,EAAE;IAAd,gBACE,6BAAC,QAAD;MAAM,OAAO,EAAC,QAAd;MAAuB,KAAK,EAAC;IAA7B,gBACE,6BAAC,WAAD;MAAS,KAAK;IAAd,EADF,CADF,CADF;EAOD;;EAED,IAAIC,KAAJ,EAAW;IACT,oBACE,6BAAC,SAAD;MAAO,OAAO,EAAE,CAAhB;MAAmB,KAAK,EAAE;IAA1B,gBACE,6BAAC,iBAAD,mDADF,EAEGH,KAAK,iBAAI,6BAAC,cAAD;MAAO,KAAK,EAAEF,KAAd;MAAqB,MAAM,EAAEC;IAA7B,EAFZ,CADF;EAMD;;EAED,IAAI,EAACK,IAAD,aAACA,IAAD,eAACA,IAAI,CAAEU,MAAP,CAAJ,EAAmB;IACjB,oBACE,6BAAC,SAAD;MAAO,OAAO,EAAE,CAAhB;MAAmB,KAAK,EAAE;IAA1B,gBACE,6BAAC,iBAAD,6BADF,EAEGd,KAAK,iBAAI,6BAAC,cAAD;MAAO,KAAK,EAAEF,KAAd;MAAqB,MAAM,EAAEC;IAA7B,EAFZ,CADF;EAMD;;EAED,oBACE,6BAAC,SAAD;IAAO,OAAO,EAAE,CAAhB;IAAmB,KAAK,EAAE;EAA1B,GACGK,IAAI,CAACW,GAAL,CAAUC,GAAD,iBACR,6BAAC,UAAD;IAAQ,OAAO,EAAE,MAAMN,WAAW,CAACM,GAAG,CAACC,GAAL,EAAUD,GAAG,CAACE,KAAd,CAAlC;IAAwD,OAAO,EAAE,CAAjE;IAAoE,IAAI,EAAC;EAAzE,gBACE,6BAAC,gBAAD;IAAS,KAAK,EAAEF,GAAhB;IAAqB,IAAI,EAAEG,gBAAOC,GAAP,CAAWJ,GAAG,CAACE,KAAf;EAA3B,EADF,CADD,CADH,CADF;AASD"}

package/lib/DocumentsPane.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DocumentsPane;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _dlv = _interopRequireDefault(require("dlv"));
+
+var _reactQuery = require("react-query");
+
+var _ui = require("@sanity/ui");
+
+var _Documents = _interopRequireDefault(require("./Documents"));
+
+var _Feedback = _interopRequireDefault(require("./Feedback"));
+
+var _Debug = _interopRequireDefault(require("./Debug"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var queryClient = new _reactQuery.QueryClient();
+
+function DocumentsPane(_ref) {
+  var sanityDocument = _ref.document,
+      options = _ref.options;
+  var query = options.query,
+      params = options.params,
+      useDraft = options.useDraft,
+      debug = options.debug;
+  var doc = useDraft ? sanityDocument.displayed : sanityDocument.published;
+
+  var _ref2 = doc !== null && doc !== void 0 ? doc : {},
+      _rev = _ref2._rev;
+
+  var paramValues = Object.keys(params).reduce((acc, key) => _objectSpread(_objectSpread({}, acc), {}, {
+    [key]: (0, _dlv.default)(doc, params[key])
+  }), {});
+
+  if (!_rev) {
+    return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      padding: 4,
+      space: 5
+    }, /*#__PURE__*/_react.default.createElement(_Feedback.default, null, "Document must be Published to have References"), debug && /*#__PURE__*/_react.default.createElement(_Debug.default, {
+      query: query,
+      params: params
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactQuery.QueryClientProvider, {
+    client: queryClient
+  }, /*#__PURE__*/_react.default.createElement(_Documents.default, {
+    query: query,
+    params: paramValues,
+    debug: debug
+  }));
+}
+//# sourceMappingURL=DocumentsPane.js.map

package/lib/DocumentsPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentsPane.js","names":["queryClient","QueryClient","DocumentsPane","sanityDocument","document","options","query","params","useDraft","debug","doc","displayed","published","_rev","paramValues","Object","keys","reduce","acc","key"],"sources":["../src/DocumentsPane.tsx"],"sourcesContent":["import React from 'react'\nimport delve from 'dlv'\nimport {QueryClient, QueryClientProvider} from 'react-query'\nimport {Stack} from '@sanity/ui'\n\nimport Documents from './Documents'\nimport Feedback from './Feedback'\nimport Debug from './Debug'\n\nconst queryClient = new QueryClient()\n\nexport default function DocumentsPane({document: sanityDocument, options}) {\n  const {query, params, useDraft, debug} = options\n\n  const doc = useDraft ? sanityDocument.displayed : sanityDocument.published\n  const {_rev} = doc ?? {}\n\n  const paramValues = Object.keys(params).reduce(\n    (acc, key) => ({...acc, [key]: delve(doc, params[key])}),\n    {}\n  )\n\n  if (!_rev) {\n    return (\n      <Stack padding={4} space={5}>\n        <Feedback>Document must be Published to have References</Feedback>\n        {debug && <Debug query={query} params={params} />}\n      </Stack>\n    )\n  }\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <Documents query={query} params={paramValues} debug={debug} />\n    </QueryClientProvider>\n  )\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,WAAW,GAAG,IAAIC,uBAAJ,EAApB;;AAEe,SAASC,aAAT,OAA4D;EAAA,IAA1BC,cAA0B,QAApCC,QAAoC;EAAA,IAAVC,OAAU,QAAVA,OAAU;EACzE,IAAOC,KAAP,GAAyCD,OAAzC,CAAOC,KAAP;EAAA,IAAcC,MAAd,GAAyCF,OAAzC,CAAcE,MAAd;EAAA,IAAsBC,QAAtB,GAAyCH,OAAzC,CAAsBG,QAAtB;EAAA,IAAgCC,KAAhC,GAAyCJ,OAAzC,CAAgCI,KAAhC;EAEA,IAAMC,GAAG,GAAGF,QAAQ,GAAGL,cAAc,CAACQ,SAAlB,GAA8BR,cAAc,CAACS,SAAjE;;EACA,YAAeF,GAAf,aAAeA,GAAf,cAAeA,GAAf,GAAsB,EAAtB;EAAA,IAAOG,IAAP,SAAOA,IAAP;;EAEA,IAAMC,WAAW,GAAGC,MAAM,CAACC,IAAP,CAAYT,MAAZ,EAAoBU,MAApB,CAClB,CAACC,GAAD,EAAMC,GAAN,qCAAmBD,GAAnB;IAAwB,CAACC,GAAD,GAAO,kBAAMT,GAAN,EAAWH,MAAM,CAACY,GAAD,CAAjB;EAA/B,EADkB,EAElB,EAFkB,CAApB;;EAKA,IAAI,CAACN,IAAL,EAAW;IACT,oBACE,6BAAC,SAAD;MAAO,OAAO,EAAE,CAAhB;MAAmB,KAAK,EAAE;IAA1B,gBACE,6BAAC,iBAAD,wDADF,EAEGJ,KAAK,iBAAI,6BAAC,cAAD;MAAO,KAAK,EAAEH,KAAd;MAAqB,MAAM,EAAEC;IAA7B,EAFZ,CADF;EAMD;;EAED,oBACE,6BAAC,+BAAD;IAAqB,MAAM,EAAEP;EAA7B,gBACE,6BAAC,kBAAD;IAAW,KAAK,EAAEM,KAAlB;IAAyB,MAAM,EAAEQ,WAAjC;IAA8C,KAAK,EAAEL;EAArD,EADF,CADF;AAKD"}

package/lib/Feedback.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Feedback;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ui = require("@sanity/ui");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Feedback(props) {
+  var children = props.children,
+      _props$tone = props.tone,
+      tone = _props$tone === void 0 ? "caution" : _props$tone;
+  return /*#__PURE__*/_react.default.createElement(_ui.Card, {
+    padding: 3,
+    radius: 2,
+    shadow: 1,
+    tone: tone
+  }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
+    size: 1
+  }, children));
+}
+//# sourceMappingURL=Feedback.js.map

package/lib/Feedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feedback.js","names":["Feedback","props","children","tone"],"sources":["../src/Feedback.tsx"],"sourcesContent":["import React from 'react'\nimport {Card, Text} from '@sanity/ui'\nimport type {BadgeTone} from '@sanity/ui'\n\ntype FeedbackProps = {\n  children?: React.ReactNode\n  tone?: BadgeTone\n}\n\nexport default function Feedback(props: FeedbackProps) {\n  const {children, tone = `caution`} = props\n\n  return (\n    <Card padding={3} radius={2} shadow={1} tone={tone}>\n      <Text size={1}>{children}</Text>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAQe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;EACrD,IAAOC,QAAP,GAAqCD,KAArC,CAAOC,QAAP;EAAA,kBAAqCD,KAArC,CAAiBE,IAAjB;EAAA,IAAiBA,IAAjB;EAEA,oBACE,6BAAC,QAAD;IAAM,OAAO,EAAE,CAAf;IAAkB,MAAM,EAAE,CAA1B;IAA6B,MAAM,EAAE,CAArC;IAAwC,IAAI,EAAEA;EAA9C,gBACE,6BAAC,QAAD;IAAM,IAAI,EAAE;EAAZ,GAAgBD,QAAhB,CADF,CADF;AAKD"}

package/lib/index.js

@@ -3,71 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = DocumentsPane;
+exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _dlv = _interopRequireDefault(require("dlv"));
-
-var _ui = require("@sanity/ui");
-
-var _reactQuery = require("react-query");
-
-var _Documents = _interopRequireDefault(require("./Documents"));
+var _DocumentsPane = _interopRequireDefault(require("./DocumentsPane"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var queryClient = new _reactQuery.QueryClient();
-
-function DocumentsPane(_ref) {
-  var sanityDocument = _ref.document,
-      options = _ref.options;
-  var query = options.query,
-      params = options.params,
-      useDraft = options.useDraft,
-      debug = options.debug;
-  var doc = useDraft ? sanityDocument.displayed : sanityDocument.published;
-
-  var _ref2 = doc !== null && doc !== void 0 ? doc : {},
-      _rev = _ref2._rev;
-
-  var paramValues = Object.keys(params).reduce((acc, key) => _objectSpread(_objectSpread({}, acc), {}, {
-    [key]: (0, _dlv.default)(doc, params[key])
-  }), {});
-  return /*#__PURE__*/_react.default.createElement(_ui.ThemeProvider, {
-    theme: _ui.studioTheme
-  }, /*#__PURE__*/_react.default.createElement(_reactQuery.QueryClientProvider, {
-    client: queryClient
-  }, /*#__PURE__*/_react.default.createElement(_Documents.default, {
-    _rev: _rev,
-    query: query,
-    params: paramValues,
-    debug: debug
-  })));
-}
-
-DocumentsPane.propTypes = {
-  options: _propTypes.default.shape({
-    params: _propTypes.default.object,
-    query: _propTypes.default.string,
-    useDraft: _propTypes.default.bool,
-    debug: _propTypes.default.bool
-  })
-};
-DocumentsPane.defaultProps = {
-  options: {
-    params: {},
-    query: "",
-    useDraft: false,
-    debug: false
-  }
-};
+var _default = _DocumentsPane.default;
+exports.default = _default;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["queryClient","QueryClient","DocumentsPane","sanityDocument","document","options","query","params","useDraft","debug","doc","displayed","published","_rev","paramValues","Object","keys","reduce","acc","key","studioTheme","propTypes","PropTypes","shape","object","string","bool","defaultProps"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAEA,IAAMA,WAAW,GAAG,IAAIC,uBAAJ,EAApB;;AAEe,SAASC,aAAT,OAA4D;AAAA,MAA1BC,cAA0B,QAApCC,QAAoC;AAAA,MAAVC,OAAU,QAAVA,OAAU;AACzE,MAAOC,KAAP,GAAyCD,OAAzC,CAAOC,KAAP;AAAA,MAAcC,MAAd,GAAyCF,OAAzC,CAAcE,MAAd;AAAA,MAAsBC,QAAtB,GAAyCH,OAAzC,CAAsBG,QAAtB;AAAA,MAAgCC,KAAhC,GAAyCJ,OAAzC,CAAgCI,KAAhC;AACA,MAAMC,GAAG,GAAGF,QAAQ,GAAGL,cAAc,CAACQ,SAAlB,GAA8BR,cAAc,CAACS,SAAjE;;AACA,cAAeF,GAAf,aAAeA,GAAf,cAAeA,GAAf,GAAsB,EAAtB;AAAA,MAAOG,IAAP,SAAOA,IAAP;;AAEA,MAAMC,WAAW,GAAGC,MAAM,CAACC,IAAP,CAAYT,MAAZ,EAAoBU,MAApB,CAClB,CAACC,GAAD,EAAMC,GAAN,qCAAmBD,GAAnB;AAAwB,KAACC,GAAD,GAAO,kBAAMT,GAAN,EAAWH,MAAM,CAACY,GAAD,CAAjB;AAA/B,IADkB,EAElB,EAFkB,CAApB;AAKA,sBACE,6BAAC,iBAAD;AAAe,IAAA,KAAK,EAAEC;AAAtB,kBACE,6BAAC,+BAAD;AAAqB,IAAA,MAAM,EAAEpB;AAA7B,kBACE,6BAAC,kBAAD;AAAW,IAAA,IAAI,EAAEa,IAAjB;AAAuB,IAAA,KAAK,EAAEP,KAA9B;AAAqC,IAAA,MAAM,EAAEQ,WAA7C;AAA0D,IAAA,KAAK,EAAEL;AAAjE,IADF,CADF,CADF;AAOD;;AAEDP,aAAa,CAACmB,SAAd,GAA0B;AACxBhB,EAAAA,OAAO,EAAEiB,mBAAUC,KAAV,CAAgB;AACvBhB,IAAAA,MAAM,EAAEe,mBAAUE,MADK;AAEvBlB,IAAAA,KAAK,EAAEgB,mBAAUG,MAFM;AAGvBjB,IAAAA,QAAQ,EAAEc,mBAAUI,IAHG;AAIvBjB,IAAAA,KAAK,EAAEa,mBAAUI;AAJM,GAAhB;AADe,CAA1B;AASAxB,aAAa,CAACyB,YAAd,GAA6B;AAC3BtB,EAAAA,OAAO,EAAE;AACPE,IAAAA,MAAM,EAAE,EADD;AAEPD,IAAAA,KAAK,IAFE;AAGPE,IAAAA,QAAQ,EAAE,KAHH;AAIPC,IAAAA,KAAK,EAAE;AAJA;AADkB,CAA7B","sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport delve from 'dlv'\nimport {studioTheme, ThemeProvider} from '@sanity/ui'\nimport {QueryClient, QueryClientProvider} from 'react-query'\n\nimport Documents from './Documents'\n\nconst queryClient = new QueryClient()\n\nexport default function DocumentsPane({document: sanityDocument, options}) {\n  const {query, params, useDraft, debug} = options\n  const doc = useDraft ? sanityDocument.displayed : sanityDocument.published\n  const {_rev} = doc ?? {}\n\n  const paramValues = Object.keys(params).reduce(\n    (acc, key) => ({...acc, [key]: delve(doc, params[key])}),\n    {}\n  )\n\n  return (\n    <ThemeProvider theme={studioTheme}>\n      <QueryClientProvider client={queryClient}>\n        <Documents _rev={_rev} query={query} params={paramValues} debug={debug} />\n      </QueryClientProvider>\n    </ThemeProvider>\n  )\n}\n\nDocumentsPane.propTypes = {\n  options: PropTypes.shape({\n    params: PropTypes.object,\n    query: PropTypes.string,\n    useDraft: PropTypes.bool,\n    debug: PropTypes.bool,\n  }),\n}\n\nDocumentsPane.defaultProps = {\n  options: {\n    params: {},\n    query: ``,\n    useDraft: false,\n    debug: false,\n  },\n}\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["DocumentsPane"],"sources":["../src/index.js"],"sourcesContent":["\nimport DocumentsPane from \"./DocumentsPane\";\n\nexport default DocumentsPane\n"],"mappings":";;;;;;;AACA;;;;eAEeA,sB"}

package/package.json

@@ -1,12 +1,21 @@
 {
   "name": "sanity-plugin-documents-pane",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "description": "Displays the results of a GROQ query in a View Pane",
   "main": "lib/index.js",
   "scripts": {
     "build": "sanipack build",
     "watch": "sanipack build --watch",
-    "prepublishOnly": "sanipack build && sanipack verify"
+    "_postinstall": "husky install",
+    "prepublishOnly": "pinst --disable && sanipack build && sanipack verify",
+    "postpublish": "pinst --enable",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint:fix"
+    }
   },
   "repository": {
     "type": "git",
@@ -19,19 +28,23 @@
   "author": "Sanity.io <hello@sanity.io>",
   "license": "MIT",
   "dependencies": {
+    "@sanity/base": "^2.29.5",
+    "@sanity/desk-tool": "^2.29.5",
+    "@sanity/state-router": "^2.29.3",
     "@sanity/ui": "^0.34.6",
+    "@sanity/util": "^2.29.5",
     "dlv": "^1.1.3",
-    "prop-types": "15.7.2",
-    "react-query": "^3.19.1",
-    "styled-components": "^5.3.0"
+    "husky": "^7.0.1",
+    "react-query": "^3.19.1"
   },
   "devDependencies": {
     "eslint": "7.31.0",
-    "eslint-config-prettier": "8.3.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-config-sanity": "5.1.0",
-    "eslint-plugin-react": "7.24.0",
-    "prettier": "2.3.2",
-    "sanipack": "2.0.1"
+    "eslint-plugin-react": "^7.24.0",
+    "pinst": "^2.1.6",
+    "prettier": "^2.3.2",
+    "sanipack": "^2.1.0"
   },
   "peerDependencies": {
     "react": "^17.0.0"
@@ -51,8 +64,7 @@
     "extends": [
       "sanity",
       "sanity/react",
-      "prettier",
-      "prettier/react"
+      "prettier"
     ]
   }
 }

package/src/{Debug.js → Debug.tsx}

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {Code, Box, Label, Stack} from '@sanity/ui'
 
 export default function Debug({query, params}) {
@@ -20,13 +19,3 @@ export default function Debug({query, params}) {
     </>
   )
 }
-
-Debug.propTypes = {
-  params: PropTypes.object,
-  query: PropTypes.string,
-}
-
-Debug.defaultProps = {
-  params: {},
-  query: ``,
-}

package/src/Documents.tsx

@@ -0,0 +1,75 @@
+import React, {useCallback} from 'react'
+import {useQuery} from 'react-query'
+import {Box, Button, Stack, Flex, Spinner} from '@sanity/ui'
+import {usePaneRouter} from '@sanity/desk-tool'
+import {fromString as pathFromString} from '@sanity/util/paths'
+// import {RouterContext} from '@sanity/state-router/lib/RouterContext'
+import Preview from 'part:@sanity/base/preview'
+import schema from 'part:@sanity/base/schema'
+import sanityClient from 'part:@sanity/base/client'
+
+import Debug from './Debug'
+import Feedback from './Feedback'
+
+const client = sanityClient.withConfig({apiVersion: `2021-05-19`})
+
+export default function Documents(props) {
+  const {query, params, debug} = props
+
+  const {isLoading, error, data} = useQuery(['useDocuments', {props}], () =>
+    client.fetch(query, params)
+  )
+
+  const {routerPanesState, groupIndex, handleEditReference} = usePaneRouter()
+  const childParams = routerPanesState[groupIndex + 1]?.[0].params || {}
+  const {parentRefPath} = childParams
+
+  const handleClick = useCallback((id, type) => {
+    handleEditReference({
+      id,
+      type,
+      // Uncertain that this works as intended
+      parentRefPath: parentRefPath ? pathFromString(parentRefPath) : [``],
+      // Added this to satisfy TS
+      template: type,
+    })
+  }, [routerPanesState])
+
+  if (isLoading) {
+    return (
+      <Box padding={4}>
+        <Flex justify="center" align="center">
+          <Spinner muted />
+        </Flex>
+      </Box>
+    )
+  }
+
+  if (error) {
+    return (
+      <Stack padding={4} space={5}>
+        <Feedback>There was en error performing this query</Feedback>
+        {debug && <Debug query={query} params={params} />}
+      </Stack>
+    )
+  }
+
+  if (!data?.length) {
+    return (
+      <Stack padding={4} space={5}>
+        <Feedback>No Documents found</Feedback>
+        {debug && <Debug query={query} params={params} />}
+      </Stack>
+    )
+  }
+
+  return (
+    <Stack padding={2} space={1}>
+      {data.map((doc) => (
+        <Button onClick={() => handleClick(doc._id, doc._type)} padding={2} mode="bleed">
+          <Preview value={doc} type={schema.get(doc._type)} />
+        </Button>
+      ))}
+    </Stack>
+  )
+}

package/src/DocumentsPane.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import delve from 'dlv'
+import {QueryClient, QueryClientProvider} from 'react-query'
+import {Stack} from '@sanity/ui'
+
+import Documents from './Documents'
+import Feedback from './Feedback'
+import Debug from './Debug'
+
+const queryClient = new QueryClient()
+
+export default function DocumentsPane({document: sanityDocument, options}) {
+  const {query, params, useDraft, debug} = options
+
+  const doc = useDraft ? sanityDocument.displayed : sanityDocument.published
+  const {_rev} = doc ?? {}
+
+  const paramValues = Object.keys(params).reduce(
+    (acc, key) => ({...acc, [key]: delve(doc, params[key])}),
+    {}
+  )
+
+  if (!_rev) {
+    return (
+      <Stack padding={4} space={5}>
+        <Feedback>Document must be Published to have References</Feedback>
+        {debug && <Debug query={query} params={params} />}
+      </Stack>
+    )
+  }
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Documents query={query} params={paramValues} debug={debug} />
+    </QueryClientProvider>
+  )
+}

package/src/Feedback.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import {Card, Text} from '@sanity/ui'
+import type {BadgeTone} from '@sanity/ui'
+
+type FeedbackProps = {
+  children?: React.ReactNode
+  tone?: BadgeTone
+}
+
+export default function Feedback(props: FeedbackProps) {
+  const {children, tone = `caution`} = props
+
+  return (
+    <Card padding={3} radius={2} shadow={1} tone={tone}>
+      <Text size={1}>{children}</Text>
+    </Card>
+  )
+}

package/src/index.js

@@ -1,46 +1,4 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import delve from 'dlv'
-import {studioTheme, ThemeProvider} from '@sanity/ui'
-import {QueryClient, QueryClientProvider} from 'react-query'
 
-import Documents from './Documents'
+import DocumentsPane from "./DocumentsPane";
 
-const queryClient = new QueryClient()
-
-export default function DocumentsPane({document: sanityDocument, options}) {
-  const {query, params, useDraft, debug} = options
-  const doc = useDraft ? sanityDocument.displayed : sanityDocument.published
-  const {_rev} = doc ?? {}
-
-  const paramValues = Object.keys(params).reduce(
-    (acc, key) => ({...acc, [key]: delve(doc, params[key])}),
-    {}
-  )
-
-  return (
-    <ThemeProvider theme={studioTheme}>
-      <QueryClientProvider client={queryClient}>
-        <Documents _rev={_rev} query={query} params={paramValues} debug={debug} />
-      </QueryClientProvider>
-    </ThemeProvider>
-  )
-}
-
-DocumentsPane.propTypes = {
-  options: PropTypes.shape({
-    params: PropTypes.object,
-    query: PropTypes.string,
-    useDraft: PropTypes.bool,
-    debug: PropTypes.bool,
-  }),
-}
-
-DocumentsPane.defaultProps = {
-  options: {
-    params: {},
-    query: ``,
-    useDraft: false,
-    debug: false,
-  },
-}
+export default DocumentsPane

package/lib/Documents.module.css

@@ -1,14 +0,0 @@
-@import 'part:@sanity/base/theme/variables-style';
-
-.root {
-  /*  */
-}
-
-.item {
-  composes: item from 'part:@sanity/base/theme/layout/selectable-style';
-  display: block;
-  text-decoration: inherit;
-  outline: none;
-  margin: 0;
-  padding: var(--small-padding) var(--medium-padding);
-}

package/src/Documents.js

@@ -1,84 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {IntentLink} from 'part:@sanity/base/router'
-import schema from 'part:@sanity/base/schema'
-import {useQuery} from 'react-query'
-import sanityClient from 'part:@sanity/base/client'
-import {Text, Box, Stack, Flex, Spinner} from '@sanity/ui'
-import Preview from 'part:@sanity/base/preview'
-
-import Debug from './Debug'
-import styles from './Documents.module.css'
-
-const client = sanityClient.withConfig({apiVersion: `2021-05-19`})
-
-export default function Documents(props) {
-  const {query, params, debug, _rev} = props
-
-  const {isLoading, error, data} = useQuery(['useDocuments', { props }], () =>
-    client.fetch(query, params)
-  )
-
-  if (!_rev) {
-    return (<Stack padding={4} space={5}>
-      <Box>
-        <Text>Document must be Published</Text>
-      </Box>
-      {debug && <Debug query={query} params={params} />}
-    </Stack>)
-  }
-
-  if (isLoading) {
-    return (
-      <Box padding={4}>
-        <Flex justify="center" align="center">
-          <Spinner muted />
-        </Flex>
-      </Box>
-    )
-  }
-
-  if (error) {
-    return (
-      <Stack padding={4} space={5}>
-        <Box>
-          <Text>There was en error performing this query</Text>
-        </Box>
-        {debug && <Debug query={query} params={params} />}
-      </Stack>
-    )
-  }
-
-  if (!data?.length) {
-    return (
-      <Stack padding={4} space={5}>
-        <Box>
-          <Text>No Documents found</Text>
-        </Box>
-        {debug && <Debug query={query} params={params} />}
-      </Stack>
-    )
-  }
-
-  return (
-    <Stack className={styles.root}>
-      {data.map((doc) => (
-        <IntentLink key={doc._id} intent="edit" params={{id: doc._id, type: doc._type}} className={styles.item}>
-          <Preview value={doc} type={schema.get(doc._type)} />
-        </IntentLink>
-      ))}
-    </Stack>
-  )
-}
-
-Documents.propTypes = {
-  _rev: PropTypes.string,
-  params: PropTypes.object,
-  query: PropTypes.string,
-}
-
-Documents.defaultProps = {
-  _rev: ``,
-  params: {},
-  query: ``,
-}

package/src/Documents.module.css

@@ -1,14 +0,0 @@
-@import 'part:@sanity/base/theme/variables-style';
-
-.root {
-  /*  */
-}
-
-.item {
-  composes: item from 'part:@sanity/base/theme/layout/selectable-style';
-  display: block;
-  text-decoration: inherit;
-  outline: none;
-  margin: 0;
-  padding: var(--small-padding) var(--medium-padding);
-}