@sanity/dashboard 2.21.11-reference-updates.62 → 2.21.12-purple-unicorn.1300

package/lib/{containers → cjs/containers}/WidgetContainer.js

@@ -15,9 +15,9 @@ var _legacyParts = require("../legacyParts");
 
 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 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 = 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 _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; }
 

package/lib/{legacyParts.js → cjs/legacyParts.js}

@@ -3,22 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "WidgetContainer", {
+Object.defineProperty(exports, "DefaultPreview", {
   enumerable: true,
   get: function get() {
-    return _widgetContainer.default;
+    return _default.default;
   }
 });
-Object.defineProperty(exports, "dashboardConfig", {
+Object.defineProperty(exports, "WidgetContainer", {
   enumerable: true,
   get: function get() {
-    return _config.default;
+    return _widgetContainer.default;
   }
 });
-Object.defineProperty(exports, "sanityClient", {
+Object.defineProperty(exports, "dashboardConfig", {
   enumerable: true,
   get: function get() {
-    return _client.default;
+    return _config.default;
   }
 });
 Object.defineProperty(exports, "definitions", {
@@ -27,10 +27,10 @@ Object.defineProperty(exports, "definitions", {
     return _widget.default;
   }
 });
-Object.defineProperty(exports, "DefaultPreview", {
+Object.defineProperty(exports, "sanityClient", {
   enumerable: true,
   get: function get() {
-    return _default.default;
+    return _client.default;
   }
 });
 Object.defineProperty(exports, "userStore", {

package/lib/esm/DashboardTool.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Dashboard from './containers/Dashboard';
+var strokeStyle = {
+  stroke: 'currentColor',
+  strokeWidth: 1.2
+};
+
+var DashboardIcon = () => /*#__PURE__*/React.createElement("svg", {
+  "data-sanity-icon": true,
+  viewBox: "0 0 25 25",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  preserveAspectRatio: "xMidYMid",
+  width: "1em",
+  height: "1em"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M19.5 19.5H5.5V5.5H19.5V19.5Z",
+  style: strokeStyle
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M5.5 12.5H19.5",
+  style: strokeStyle
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M14.5 19.5V12.5M10.5 12.5V5.5",
+  style: strokeStyle
+}));
+
+export * from './components/dashboardWidget';
+export default {
+  title: 'Dashboard',
+  name: 'dashboard',
+  icon: DashboardIcon,
+  component: Dashboard
+};

package/lib/esm/components/DashboardLayout.js

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Container } from '@sanity/ui';
+
+function DashboardLayout(props) {
+  return /*#__PURE__*/React.createElement(Container, {
+    width: 4,
+    padding: 4,
+    sizing: "border",
+    style: {
+      minHeight: '100%'
+    }
+  }, props.children);
+}
+
+DashboardLayout.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  children: PropTypes.any
+};
+DashboardLayout.defaultProps = {
+  children: 'Dummy'
+};
+export default DashboardLayout;

package/lib/esm/components/NotFoundWidget.js

@@ -0,0 +1,37 @@
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Card, Stack, Heading, Box } from '@sanity/ui';
+import styled from 'styled-components';
+var Root = styled(Card)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"])));
+
+function NotFoundWidget(props) {
+  var title = props.title,
+      children = props.children;
+  return /*#__PURE__*/React.createElement(Root, {
+    radius: 3,
+    paddingX: 3,
+    paddingY: 4,
+    tone: "critical"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    space: 2
+  }, title && /*#__PURE__*/React.createElement(Heading, {
+    size: 1,
+    as: "h2"
+  }, title), children && /*#__PURE__*/React.createElement(Box, null, children)));
+}
+
+NotFoundWidget.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  children: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  title: PropTypes.any
+};
+NotFoundWidget.defaultProps = {
+  children: null,
+  title: null
+};
+export default NotFoundWidget;

package/lib/esm/components/WidgetGroup.js

@@ -0,0 +1,50 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Grid } from '@sanity/ui';
+import { WidgetContainer } from '../legacyParts';
+var media = {
+  small: function small() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      @media (min-width: ", "px) {\n        ", "\n      }\n    "])), _ref => {
+      var theme = _ref.theme;
+      return theme.sanity.media[0];
+    }, css(...arguments));
+  },
+  medium: function medium() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      @media (min-width: ", "px) {\n        ", "\n      }\n    "])), _ref2 => {
+      var theme = _ref2.theme;
+      return theme.sanity.media[2];
+    }, css(...arguments));
+  }
+};
+var Root = styled(Grid)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n\n  & > div {\n    overflow: hidden;\n  }\n\n  & > div[data-width='medium'] {\n    ", "\n  }\n\n  & > div[data-width='large'] {\n    ", "\n\n    ", "\n  }\n\n  & > div[data-width='full'] {\n    ", "\n  }\n\n  & > div[data-height='medium'] {\n    ", "\n  }\n\n  & > div[data-height='large'] {\n    ", "\n\n    ", "\n  }\n\n  & > div[data-height='full'] {\n    ", "\n  }\n"])), media.small(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      grid-column: span 2;\n    "]))), media.small(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      grid-column: span 2;\n    "]))), media.medium(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      grid-column: span 3;\n    "]))), media.small(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      grid-column: 1 / -1;\n    "]))), media.small(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      grid-row: span 2;\n    "]))), media.small(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      grid-row: span 2;\n    "]))), media.medium(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      grid-row: span 3;\n    "]))), media.medium(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      grid-row: 1 / -1;\n    "]))));
+
+function WidgetGroup(props) {
+  var config = props.config || {};
+  var widgets = config.widgets || [];
+  var layout = config.layout || {};
+  return /*#__PURE__*/React.createElement(Root, {
+    autoFlow: "dense",
+    "data-width": layout.width || 'auto',
+    "data-height": layout.height || 'auto',
+    gap: 4
+  }, widgets.map((widgetConfig, index) => {
+    if (widgetConfig.type === '__experimental_group') {
+      return /*#__PURE__*/React.createElement(WidgetGroup, {
+        key: String(index),
+        config: widgetConfig
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(WidgetContainer, {
+      key: String(index),
+      config: widgetConfig
+    });
+  }));
+}
+
+export default WidgetGroup;

package/lib/esm/components/dashboardWidget.js

@@ -0,0 +1,34 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import React, { forwardRef } from 'react';
+import { Card, Box, Heading } from '@sanity/ui';
+import styled from 'styled-components';
+var Root = styled(Card)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n  box-sizing: border-box;\n  position: relative;\n"])));
+var Header = styled(Card)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  border-top-left-radius: inherit;\n  border-top-right-radius: inherit;\n"])));
+var Footer = styled(Card)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: sticky;\n  overflow: hidden;\n  bottom: 0;\n  z-index: 2;\n  border-bottom-right-radius: inherit;\n  border-bottom-left-radius: inherit;\n  margin-top: auto;\n"])));
+var Content = styled(Box)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 1;\n  height: stretch;\n  min-height: 21.5em;\n\n  @media (min-width: ", "px) {\n    overflow-y: auto;\n    outline: none;\n  }\n"])), _ref => {
+  var theme = _ref.theme;
+  return theme.sanity.media[0];
+});
+export var DashboardWidget = /*#__PURE__*/forwardRef((props, ref) => {
+  var header = props.header,
+      children = props.children,
+      footer = props.footer;
+  return /*#__PURE__*/React.createElement(Root, {
+    radius: 3,
+    display: "flex",
+    ref: ref
+  }, header && /*#__PURE__*/React.createElement(Header, {
+    borderBottom: true,
+    paddingX: 3,
+    paddingY: 4
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: 1,
+    textOverflow: "ellipsis"
+  }, header)), children && /*#__PURE__*/React.createElement(Content, null, children), footer && /*#__PURE__*/React.createElement(Footer, {
+    borderTop: true
+  }, footer));
+});
+DashboardWidget.displayName = 'DashboardWidget';

package/lib/esm/containers/Dashboard.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import DashboardLayout from '../components/DashboardLayout';
+import WidgetGroup from '../components/WidgetGroup';
+import { dashboardConfig } from '../legacyParts';
+
+function Dashboard() {
+  if (!dashboardConfig) {
+    return null;
+  }
+
+  var widgetConfigs = dashboardConfig.widgets || [];
+  return /*#__PURE__*/React.createElement(DashboardLayout, null, /*#__PURE__*/React.createElement(WidgetGroup, {
+    config: {
+      widgets: widgetConfigs
+    }
+  }));
+}
+
+export default Dashboard;

package/lib/esm/containers/WidgetContainer.js

@@ -0,0 +1,43 @@
+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; }
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import NotFoundWidget from '../components/NotFoundWidget';
+import { definitions } from '../legacyParts';
+
+function WidgetContainer(props) {
+  var config = props.config || {};
+  var definition = Array.isArray(definitions) ? definitions.find(wid => wid.name === config.name) : null;
+
+  if (definition) {
+    var options = _objectSpread(_objectSpread({}, definition.options || {}), config.options || {});
+
+    var _layout = _objectSpread(_objectSpread({}, definition.layout || {}), config.layout || {});
+
+    return /*#__PURE__*/React.createElement("div", {
+      "data-width": _layout.width,
+      "data-height": _layout.height
+    }, /*#__PURE__*/React.createElement(definition.component, options));
+  }
+
+  var layout = config.layout || {};
+  return /*#__PURE__*/React.createElement("div", {
+    "data-width": layout.width,
+    "data-height": layout.height
+  }, /*#__PURE__*/React.createElement(NotFoundWidget, {
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, "Not found: \"", config.name, "\"")
+  }, /*#__PURE__*/React.createElement("p", null, "Make sure your ", /*#__PURE__*/React.createElement("code", null, "sanity.json"), " file mentions such a widget and that it\u2019s an implementation of ", /*#__PURE__*/React.createElement("code", null, "part:@sanity/dashboard/widget"), ".")));
+}
+
+WidgetContainer.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  config: PropTypes.any
+};
+WidgetContainer.defaultProps = {
+  config: null
+};
+export default WidgetContainer;

package/lib/esm/dashboardConfig.js

@@ -0,0 +1,9 @@
+export default {
+  widgets: [{
+    name: 'sanity-tutorials'
+  }, {
+    name: 'project-info'
+  }, {
+    name: 'project-users'
+  }]
+};

package/lib/esm/legacyParts.js

@@ -0,0 +1,9 @@
+// @todo: remove the following line when part imports has been removed from this file
+///<reference types="@sanity/types/parts" />
+import WidgetContainer from 'part:@sanity/dashboard/widget-container';
+import dashboardConfig from 'part:@sanity/dashboard/config?';
+import sanityClient from 'part:@sanity/base/client';
+import definitions from 'all:part:@sanity/dashboard/widget?';
+import DefaultPreview from 'part:@sanity/components/previews/default';
+import userStore from 'part:@sanity/base/user';
+export { WidgetContainer, dashboardConfig, sanityClient, definitions, DefaultPreview, userStore };

package/lib/esm/versionedClient.js

@@ -0,0 +1,11 @@
+import { sanityClient } from './legacyParts';
+/**
+ * Only for use inside of @sanity/dashboard
+ * Don't import this from external modules.
+ *
+ * @internal
+ */
+
+export var versionedClient = sanityClient.withConfig({
+  apiVersion: '1'
+});

package/lib/esm/widget.css

@@ -0,0 +1,62 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  height: 100%;
+  border-radius: var(--border-radius-base);
+  background-color: var(--component-bg);
+  box-sizing: border-box;
+  position: relative;
+}
+
+.containerWithPadding {
+  composes: container;
+  padding: var(--medium-padding);
+}
+
+.header {
+  padding: var(--small-padding) 0;
+}
+
+.title {
+  composes: heading4 from 'part:@sanity/base/theme/typography/headings-style';
+  margin: var(--small-padding) var(--medium-padding);
+}
+
+.content {
+  display: block;
+  margin: 0;
+  padding: 0;
+  min-height: 21.5em;
+
+  @media (--screen-medium) {
+    height: stretch;
+    overflow-y: auto;
+  }
+}
+
+.footer {
+  display: flex;
+  text-align: center;
+  font-weight: 600;
+  min-height: 4em;
+  height: 4em;
+  margin-top: auto;
+  overflow: hidden;
+
+  @nest & > * {
+    width: 100%;
+  }
+}
+
+/* TODO: remove after changing document list plugin */
+.listContainer {
+  composes: content;
+}
+
+/* TODO: remove after changing document list plugin */
+.bottomButtonContainer {
+  composes: footer;
+}

package/lib/esm/widgets/projectInfo/ProjectInfo.js

@@ -0,0 +1,251 @@
+import _isPlainObject from "lodash/isPlainObject";
+
+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; }
+
+/* eslint-disable react/forbid-prop-types, no-console */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Card, Stack, Heading, Grid, Label, Text, Code, Button } from '@sanity/ui';
+import { versionedClient } from '../../versionedClient';
+import { DashboardWidget } from '../../DashboardTool';
+import { WidgetContainer } from '../../legacyParts';
+
+var _versionedClient$conf = versionedClient.config(),
+    projectId = _versionedClient$conf.projectId,
+    dataset = _versionedClient$conf.dataset;
+
+function isUrl(url) {
+  return /^https?:\/\//.test("".concat(url));
+}
+
+function getGraphQlUrl() {
+  return "https://".concat(projectId, ".api.sanity.io/v1/graphql/").concat(dataset, "/default");
+}
+
+function getGroqUrl() {
+  return "https://".concat(projectId, ".api.sanity.io/v1/groq/").concat(dataset);
+}
+
+function getManageUrl() {
+  return "https://manage.sanity.io/projects/".concat(projectId);
+}
+
+class ProjectInfo extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      studioHost: null,
+      graphqlApi: null
+    });
+  }
+
+  componentDidMount() {
+    // fetch project data
+    this.subscriptions = [];
+    this.subscriptions.push(versionedClient.observable.request({
+      uri: "/projects/".concat(projectId)
+    }).subscribe({
+      next: result => {
+        var studioHost = result.studioHost;
+        this.setState({
+          studioHost: studioHost ? "https://".concat(studioHost, ".sanity.studio") : null
+        });
+      },
+      error: _error => {
+        console.log('Error while looking for studioHost', _error);
+        this.setState({
+          studioHost: {
+            error: 'Something went wrong while looking up studioHost. See console.'
+          }
+        });
+      }
+    })); // ping assumed graphql endpoint
+
+    this.subscriptions.push(versionedClient.observable.request({
+      method: 'HEAD',
+      uri: "/graphql/".concat(dataset, "/default")
+    }).subscribe({
+      next: () => this.setState({
+        graphqlApi: getGraphQlUrl()
+      }),
+      error: _error2 => {
+        if (_error2.statusCode === 404) {
+          this.setState({
+            graphqlApi: null
+          });
+        } else {
+          console.log('Error while looking for graphqlApi', _error2);
+          this.setState({
+            graphqlApi: {
+              error: 'Something went wrong while looking up graphqlApi. See console.'
+            }
+          });
+        }
+      }
+    }));
+  }
+
+  componentWillUnmount() {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  assembleTableRows() {
+    var _this$state = this.state,
+        graphqlApi = _this$state.graphqlApi,
+        studioHost = _this$state.studioHost;
+    var propsData = this.props.data;
+    var result = [{
+      title: 'Sanity project',
+      rows: [{
+        title: 'Project ID',
+        value: projectId
+      }, {
+        title: 'Dataset',
+        value: dataset
+      }]
+    }]; // Handle any apps
+
+    var apps = [studioHost ? {
+      title: 'Studio',
+      value: studioHost
+    } : null].concat(propsData.filter(item => item.category === 'apps')).filter(Boolean);
+
+    if (apps.length > 0) {
+      result = result.concat([{
+        title: 'Apps',
+        rows: apps
+      }]);
+    } // Handle APIs
+
+
+    result = result.concat([{
+      title: 'APIs',
+      rows: [{
+        title: 'GROQ',
+        value: getGroqUrl()
+      }, {
+        title: 'GraphQL',
+        value: graphqlApi || 'Not deployed'
+      }]
+    }], propsData.filter(item => item.category === 'apis')); // Handle whatever else there might be
+
+    var otherStuff = {};
+    propsData.forEach(item => {
+      if (item.category !== 'apps' && item.category !== 'apis') {
+        if (!otherStuff[item.category]) {
+          otherStuff[item.category] = [];
+        }
+
+        otherStuff[item.category].push(item);
+      }
+    });
+    Object.keys(otherStuff).forEach(category => {
+      result.push({
+        title: category,
+        rows: otherStuff[category]
+      });
+    });
+    return result;
+  }
+
+  render() {
+    var _this$props$__experim;
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.__experimental_before && this.props.__experimental_before.map((widgetConfig, idx) => /*#__PURE__*/React.createElement(WidgetContainer, {
+      key: String(idx),
+      config: widgetConfig
+    })), /*#__PURE__*/React.createElement(Box, {
+      height: "fill",
+      marginTop: ((_this$props$__experim = this.props.__experimental_before) === null || _this$props$__experim === void 0 ? void 0 : _this$props$__experim.length) > 0 ? 4 : 0
+    }, /*#__PURE__*/React.createElement(DashboardWidget, {
+      footer: /*#__PURE__*/React.createElement(Button, {
+        style: {
+          width: '100%'
+        },
+        paddingX: 2,
+        paddingY: 4,
+        mode: "bleed",
+        tone: "primary",
+        text: "Manage project",
+        as: "a",
+        href: getManageUrl()
+      })
+    }, /*#__PURE__*/React.createElement(Card, {
+      paddingY: 4,
+      radius: 2,
+      role: "table",
+      "aria-label": "Project info",
+      "aria-describedby": "project_info_table"
+    }, /*#__PURE__*/React.createElement(Stack, {
+      space: 4
+    }, /*#__PURE__*/React.createElement(Box, {
+      paddingX: 3,
+      as: "header"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      size: 1,
+      as: "h2",
+      id: "project_info_table"
+    }, "Project info")), this.assembleTableRows().map(item => {
+      if (!item || !item.rows) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement(Stack, {
+        key: item.title,
+        space: 3
+      }, /*#__PURE__*/React.createElement(Card, {
+        borderBottom: true,
+        padding: 3
+      }, /*#__PURE__*/React.createElement(Label, {
+        size: 0,
+        muted: true,
+        role: "columnheader"
+      }, item.title)), /*#__PURE__*/React.createElement(Stack, {
+        space: 4,
+        paddingX: 3,
+        role: "rowgroup"
+      }, item.rows.map(row => {
+        return /*#__PURE__*/React.createElement(Grid, {
+          key: row.title,
+          columns: 2,
+          role: "row"
+        }, /*#__PURE__*/React.createElement(Text, {
+          weight: "medium",
+          role: "rowheader"
+        }, row.title), _isPlainObject(row.value) && /*#__PURE__*/React.createElement(Text, {
+          size: 1
+        }, row.value.error), !_isPlainObject(row.value) && /*#__PURE__*/React.createElement(React.Fragment, null, isUrl(row.value) ? /*#__PURE__*/React.createElement(Text, {
+          size: 1,
+          role: "cell",
+          style: {
+            wordBreak: 'break-word'
+          }
+        }, /*#__PURE__*/React.createElement("a", {
+          href: row.value
+        }, row.value)) : /*#__PURE__*/React.createElement(Code, {
+          size: 1,
+          role: "cell",
+          style: {
+            wordBreak: 'break-word'
+          }
+        }, row.value)));
+      })));
+    }))))));
+  }
+
+}
+
+_defineProperty(ProjectInfo, "propTypes", {
+  // eslint-disable-next-line camelcase
+  __experimental_before: PropTypes.array,
+  data: PropTypes.array
+});
+
+_defineProperty(ProjectInfo, "defaultProps", {
+  // eslint-disable-next-line camelcase
+  __experimental_before: [],
+  data: []
+});
+
+export default ProjectInfo;

package/lib/esm/widgets/projectInfo/index.js

@@ -0,0 +1,8 @@
+import ProjectInfo from './ProjectInfo';
+export default {
+  name: 'project-info',
+  component: ProjectInfo,
+  layout: {
+    width: 'medium'
+  }
+};

package/lib/esm/widgets/projectUsers/ProjectUsers.js

@@ -0,0 +1,169 @@
+var _templateObject;
+
+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; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import React from 'react';
+import { map, switchMap } from 'rxjs/operators';
+import { Stack, Spinner, Card, Box, Text, Button } from '@sanity/ui';
+import { RobotIcon } from '@sanity/icons';
+import styled from 'styled-components';
+import { DefaultPreview } from '@sanity/base/components';
+import { versionedClient } from '../../versionedClient';
+import { DashboardWidget } from '../../DashboardTool';
+import { userStore } from '../../legacyParts';
+var AvatarWrapper = styled(Card)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  border-radius: 50%;\n  border-color: transparent;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n\n  & > img {\n    width: 100%;\n    height: auto;\n  }\n"])));
+
+function getInviteUrl(projectId) {
+  return "https://manage.sanity.io/projects/".concat(projectId, "/team/invite");
+}
+
+function sortUsersByRobotStatus(userA, userB, project) {
+  var members = project.members;
+  var membershipA = members.find(member => member.id === userA.id);
+  var membershipB = members.find(member => member.id === userB.id);
+
+  if (membershipA.isRobot) {
+    return 1;
+  }
+
+  if (membershipB.isRobot) {
+    return -1;
+  }
+
+  return 0;
+}
+
+class ProjectUsers extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      project: null,
+      users: null,
+      error: null
+    });
+
+    _defineProperty(this, "handleRetryFetch", () => {
+      this.fetchData();
+    });
+  }
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentWillUnmount() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  fetchData() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+
+    var _versionedClient$conf = versionedClient.config(),
+        projectId = _versionedClient$conf.projectId;
+
+    this.subscription = versionedClient.observable.request({
+      uri: "/projects/".concat(projectId)
+    }).pipe(switchMap(project => userStore.observable.getUsers(project.members.map(mem => mem.id)).pipe(map(users => ({
+      project,
+      users
+    }))))).subscribe({
+      next: _ref => {
+        var users = _ref.users,
+            project = _ref.project;
+        return this.setState({
+          project,
+          users: (Array.isArray(users) ? users : [users]).sort((userA, userB) => sortUsersByRobotStatus(userA, userB, project))
+        });
+      },
+      error: _error => this.setState({
+        error: _error
+      })
+    });
+  }
+
+  render() {
+    var _this$state = this.state,
+        error = _this$state.error,
+        project = _this$state.project,
+        users = _this$state.users;
+    var isLoading = !users || !project;
+
+    if (error) {
+      return /*#__PURE__*/React.createElement(DashboardWidget, {
+        header: "Project users"
+      }, /*#__PURE__*/React.createElement(Box, {
+        padding: 4
+      }, /*#__PURE__*/React.createElement(Text, null, "Something went wrong while fetching data. You could", ' ', /*#__PURE__*/React.createElement("a", {
+        onClick: this.handleRetryFetch,
+        title: "Retry users fetch",
+        style: {
+          cursor: 'pointer'
+        }
+      }, "retry"), "..?")));
+    }
+
+    return /*#__PURE__*/React.createElement(DashboardWidget, {
+      header: "Project users",
+      footer: /*#__PURE__*/React.createElement(Button, {
+        style: {
+          width: '100%'
+        },
+        paddingX: 2,
+        paddingY: 4,
+        mode: "bleed",
+        tone: "primary",
+        text: "Invite members",
+        as: "a",
+        loading: isLoading,
+        href: isLoading ? undefined : getInviteUrl(project.id)
+      })
+    }, isLoading && /*#__PURE__*/React.createElement(Box, {
+      paddingY: 5,
+      paddingX: 2
+    }, /*#__PURE__*/React.createElement(Stack, {
+      space: 4
+    }, /*#__PURE__*/React.createElement(Text, {
+      align: "center",
+      muted: true,
+      size: 1
+    }, /*#__PURE__*/React.createElement(Spinner, null)), /*#__PURE__*/React.createElement(Text, {
+      align: "center",
+      size: 1,
+      muted: true
+    }, "Loading items..."))), !isLoading && /*#__PURE__*/React.createElement(Stack, {
+      space: 3,
+      padding: 3
+    }, users.map(user => {
+      var membership = project.members.find(member => member.id === user.id);
+      var media = membership.isRobot ? /*#__PURE__*/React.createElement(Text, {
+        size: 3
+      }, /*#__PURE__*/React.createElement(RobotIcon, null)) : /*#__PURE__*/React.createElement(AvatarWrapper, {
+        tone: "transparent"
+      }, (user === null || user === void 0 ? void 0 : user.imageUrl) && /*#__PURE__*/React.createElement("img", {
+        src: user.imageUrl,
+        alt: user === null || user === void 0 ? void 0 : user.displayName
+      }));
+      return /*#__PURE__*/React.createElement(Box, {
+        key: user.id
+      }, /*#__PURE__*/React.createElement(DefaultPreview, {
+        title: user.displayName,
+        subtitle: membership.role,
+        media: media
+      }));
+    })));
+  }
+
+}
+
+_defineProperty(ProjectUsers, "propTypes", {});
+
+_defineProperty(ProjectUsers, "defaultProps", {});
+
+export default ProjectUsers;

package/lib/esm/widgets/projectUsers/index.js

@@ -0,0 +1,5 @@
+import ProjectUsers from './ProjectUsers';
+export default {
+  name: 'project-users',
+  component: ProjectUsers
+};

package/lib/esm/widgets/sanityTutorials/SanityTutorials.js

@@ -0,0 +1,101 @@
+import _get from "lodash/get";
+
+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; }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Flex } from '@sanity/ui';
+import { DashboardWidget } from '../../DashboardTool';
+import Tutorial from './Tutorial';
+import dataAdapter from './dataAdapter';
+var urlBuilder = dataAdapter.urlBuilder,
+    getFeed = dataAdapter.getFeed;
+
+function createUrl(slug, type) {
+  if (type === 'tutorial') {
+    return "https://www.sanity.io/docs/tutorials/".concat(slug.current);
+  } else if (type === 'guide') {
+    return "https://www.sanity.io/docs/guides/".concat(slug.current);
+  }
+
+  return false;
+}
+
+class SanityTutorials extends React.Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      feedItems: []
+    });
+  }
+
+  componentDidMount() {
+    var templateRepoId = this.props.templateRepoId;
+    this.subscription = getFeed(templateRepoId).subscribe(response => {
+      this.setState({
+        feedItems: response.items
+      });
+    });
+  }
+
+  componentWillUnmount() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  render() {
+    var feedItems = this.state.feedItems;
+    var title = 'Learn about Sanity';
+    return /*#__PURE__*/React.createElement(DashboardWidget, {
+      header: title
+    }, /*#__PURE__*/React.createElement(Flex, {
+      as: "ul",
+      overflow: "auto",
+      align: "stretch",
+      paddingY: 2
+    }, feedItems === null || feedItems === void 0 ? void 0 : feedItems.map((feedItem, index) => {
+      if (!feedItem.title || !feedItem.guideOrTutorial && !feedItem.externalLink) {
+        return null;
+      }
+
+      var presenter = feedItem.presenter || _get(feedItem, 'guideOrTutorial.presenter') || {};
+
+      var subtitle = _get(feedItem, 'category');
+
+      var _feedItem$guideOrTuto = feedItem.guideOrTutorial,
+          guideOrTutorial = _feedItem$guideOrTuto === void 0 ? {} : _feedItem$guideOrTuto;
+      return /*#__PURE__*/React.createElement(Flex, {
+        as: "li",
+        key: feedItem._id,
+        paddingRight: index < (feedItems === null || feedItems === void 0 ? void 0 : feedItems.length) - 1 ? 1 : 3,
+        paddingLeft: index === 0 ? 3 : 0,
+        align: "stretch",
+        flex: "0 0 27.5%",
+        style: {
+          minWidth: 272,
+          width: '30%'
+        }
+      }, /*#__PURE__*/React.createElement(Tutorial, {
+        title: feedItem.title,
+        href: createUrl(guideOrTutorial.slug, guideOrTutorial._type) || feedItem.externalLink,
+        presenterName: presenter.name,
+        presenterSubtitle: subtitle,
+        showPlayIcon: feedItem.hasVideo,
+        posterURL: urlBuilder.image(feedItem.poster).height(360).url()
+      }));
+    })));
+  }
+
+}
+
+_defineProperty(SanityTutorials, "propTypes", {
+  templateRepoId: PropTypes.string
+});
+
+_defineProperty(SanityTutorials, "defaultProps", {
+  templateRepoId: null
+});
+
+export default SanityTutorials;

package/lib/esm/widgets/sanityTutorials/Tutorial.js

@@ -0,0 +1,95 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Card, Box, Heading, Flex, Text, Stack } from '@sanity/ui';
+import { PlayIcon } from '@sanity/icons';
+import styled from 'styled-components';
+var PlayIconBox = styled(Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 2.75em;\n    height: 2.75em;\n    border-radius: 50%;\n    background: ", ";\n    opacity: 0.75;\n  }\n"])), _ref => {
+  var theme = _ref.theme;
+  return theme.sanity.color.card.enabled.bg;
+});
+var Root = styled(Flex)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:hover {\n    ", " {\n      &:before {\n        opacity: 1;\n      }\n    }\n  }\n"])), PlayIconBox);
+var PosterCard = styled(Card)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding-bottom: calc(9 / 16 * 100%);\n  position: relative;\n"])));
+var Poster = styled.img(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n  display: block;\n\n  &:not([src]) {\n    display: none;\n  }\n"])));
+
+class Tutorial extends React.PureComponent {
+  render() {
+    var _this$props = this.props,
+        title = _this$props.title,
+        posterURL = _this$props.posterURL,
+        showPlayIcon = _this$props.showPlayIcon,
+        href = _this$props.href,
+        presenterName = _this$props.presenterName,
+        presenterSubtitle = _this$props.presenterSubtitle;
+    return /*#__PURE__*/React.createElement(Root, {
+      flex: 1
+    }, /*#__PURE__*/React.createElement(Card, {
+      sizing: "border",
+      flex: 1,
+      padding: 2,
+      radius: 2,
+      as: "a",
+      href: href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React.createElement(Flex, {
+      direction: "column",
+      style: {
+        height: '100%'
+      }
+    }, posterURL && /*#__PURE__*/React.createElement(PosterCard, {
+      marginBottom: 1
+    }, /*#__PURE__*/React.createElement(Poster, {
+      src: posterURL
+    }), showPlayIcon && /*#__PURE__*/React.createElement(PlayIconBox, {
+      display: "flex"
+    }, /*#__PURE__*/React.createElement(Text, {
+      align: "center"
+    }, /*#__PURE__*/React.createElement(PlayIcon, null)))), /*#__PURE__*/React.createElement(Flex, {
+      direction: "column",
+      justify: "space-between",
+      paddingY: 2,
+      flex: 1
+    }, /*#__PURE__*/React.createElement(Heading, {
+      as: "h3",
+      size: 1
+    }, title), /*#__PURE__*/React.createElement(Box, {
+      marginTop: 4
+    }, /*#__PURE__*/React.createElement(Stack, {
+      space: 2,
+      flex: 1
+    }, /*#__PURE__*/React.createElement(Text, {
+      size: 1
+    }, presenterName), /*#__PURE__*/React.createElement(Text, {
+      size: 0,
+      style: {
+        opacity: 0.7
+      }
+    }, presenterSubtitle)))))));
+  }
+
+}
+
+_defineProperty(Tutorial, "propTypes", {
+  title: PropTypes.string.isRequired,
+  posterURL: PropTypes.string,
+  href: PropTypes.string.isRequired,
+  showPlayIcon: PropTypes.bool,
+  presenterName: PropTypes.string.isRequired,
+  presenterSubtitle: PropTypes.string.isRequired
+});
+
+_defineProperty(Tutorial, "defaultProps", {
+  posterURL: null,
+  showPlayIcon: false
+});
+
+export default Tutorial;

package/lib/esm/widgets/sanityTutorials/dataAdapter.js

@@ -0,0 +1,16 @@
+import imageUrlBuilder from '@sanity/image-url';
+import { versionedClient } from '../../versionedClient';
+var tutorialsProjectConfig = {
+  projectId: '3do82whm',
+  dataset: 'next'
+};
+export default {
+  getFeed: templateRepoId => {
+    var uri = templateRepoId ? "/addons/dashboard?templateRepoId=".concat(templateRepoId) : '/addons/dashboard';
+    return versionedClient.observable.request({
+      uri,
+      withCredentials: false
+    });
+  },
+  urlBuilder: imageUrlBuilder(tutorialsProjectConfig)
+};

package/lib/esm/widgets/sanityTutorials/index.js

@@ -0,0 +1,8 @@
+import SanityTutorials from './SanityTutorials';
+export default {
+  name: 'sanity-tutorials',
+  component: SanityTutorials,
+  layout: {
+    width: 'full'
+  }
+};

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@sanity/dashboard",
-  "version": "2.21.11-reference-updates.62+f98497b413",
+  "version": "2.21.12-purple-unicorn.1300+abdd014728",
   "description": "Tool for rendering dashboard widgets",
-  "main": "./lib/DashboardTool.js",
-  "types": "./dist/dts",
+  "main": "./lib/cjs/DashboardTool.js",
+  "module": "./lib/esm/DashboardTool.js",
+  "types": "./lib/dts/src/DashboardTool.d.ts",
   "author": "Sanity.io <hello@sanity.io>",
   "license": "MIT",
   "scripts": {
-    "clean": "rimraf lib dest"
+    "build": "../../../bin/pkg-utils transpile",
+    "clean": "rimraf lib",
+    "prebuild": "yarn clean",
+    "watch": "../../../bin/pkg-utils transpile --watch"
   },
   "keywords": [
     "sanity",
@@ -22,15 +26,16 @@
   "dependencies": {
     "@sanity/icons": "^1.2.1",
     "@sanity/image-url": "^1.0.1",
-    "@sanity/types": "2.21.11-reference-updates.62+f98497b413",
-    "@sanity/ui": "^0.36.15",
-    "lodash": "^4.17.15",
+    "@sanity/types": "2.21.12-purple-unicorn.1300+abdd014728",
+    "@sanity/ui": "^0.37.5",
+    "lodash": "^4.17.21",
     "rxjs": "^6.5.3"
   },
   "devDependencies": {
-    "@sanity/base": "2.21.11-reference-updates.62+f98497b413",
+    "@sanity/base": "2.21.12-purple-unicorn.1300+abdd014728",
     "prop-types": "^15.6.0",
-    "rimraf": "^2.7.1"
+    "react": "17.0.2",
+    "rimraf": "^3.0.2"
   },
   "peerDependencies": {
     "@sanity/base": "^2.0.0",
@@ -47,5 +52,5 @@
     "url": "https://github.com/sanity-io/sanity/issues"
   },
   "homepage": "https://www.sanity.io/",
-  "gitHead": "f98497b413e20f06fcca0923f540b8ae2c8ae564"
+  "gitHead": "abdd014728981dd514951705252054db61bcd3f4"
 }

package/tsconfig.json

@@ -1,17 +1,19 @@
 {
-    "extends": "../../../tsconfig",
-    "include": ["src"],
-    "compilerOptions": {
-      "composite": true,
-      "outDir": "./dist/dts",
-      "rootDir": "./src",
-      "jsx": "react",
-      "noImplicitAny": false
-    },
-    "references": [
-      {
-        "path": "../base"
-      },
-    ]
-  }
-
+  "extends": "../../../tsconfig.settings",
+  "include": ["./src/"],
+  "compilerOptions": {
+    "composite": true,
+    "declarationDir": "./lib/dts/",
+    "rootDir": "./",
+    "outDir": "./lib/dts/",
+    "jsx": "react",
+    "noImplicitAny": false,
+    "allowJs": true,
+    "checkJs": false
+  },
+  "references": [
+    {
+      "path": "../base/tsconfig.lib.json"
+    }
+  ]
+}