@sanity/dashboard 2.26.0 → 2.26.1-purple-unicorn.677

package/lib/esm/components/NotFoundWidget.js

@@ -0,0 +1,39 @@
+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';
+const Root = styled(Card)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"])));
+
+function NotFoundWidget(props) {
+  const {
+    title,
+    children
+  } = props;
+  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,54 @@
+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';
+const media = {
+  small: function () {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      @media (min-width: ", "px) {\n        ", "\n      }\n    "])), _ref => {
+      let {
+        theme
+      } = _ref;
+      return theme.sanity.media[0];
+    }, css(...arguments));
+  },
+  medium: function () {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      @media (min-width: ", "px) {\n        ", "\n      }\n    "])), _ref2 => {
+      let {
+        theme
+      } = _ref2;
+      return theme.sanity.media[2];
+    }, css(...arguments));
+  }
+};
+const 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) {
+  const config = props.config || {};
+  const widgets = config.widgets || [];
+  const 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,38 @@
+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';
+const 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"])));
+const 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"])));
+const 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"])));
+const 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 => {
+  let {
+    theme
+  } = _ref;
+  return theme.sanity.media[0];
+});
+export const DashboardWidget = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    header,
+    children,
+    footer
+  } = props;
+  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;
+  }
+
+  const 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,39 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import NotFoundWidget from '../components/NotFoundWidget';
+import { definitions } from '../legacyParts';
+
+function WidgetContainer(props) {
+  const config = props.config || {};
+  const definition = Array.isArray(definitions) ? definitions.find(wid => wid.name === config.name) : null;
+
+  if (definition) {
+    const options = { ...(definition.options || {}),
+      ...(config.options || {})
+    };
+    const layout = { ...(definition.layout || {}),
+      ...(config.layout || {})
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      "data-width": layout.width,
+      "data-height": layout.height
+    }, /*#__PURE__*/React.createElement(definition.component, options));
+  }
+
+  const 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 const 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,254 @@
+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';
+const {
+  projectId,
+  dataset
+} = versionedClient.config();
+
+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 => {
+        const {
+          studioHost
+        } = result;
+        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: error => {
+        if (error.statusCode === 404) {
+          this.setState({
+            graphqlApi: null
+          });
+        } else {
+          console.log('Error while looking for graphqlApi', error);
+          this.setState({
+            graphqlApi: {
+              error: 'Something went wrong while looking up graphqlApi. See console.'
+            }
+          });
+        }
+      }
+    }));
+  }
+
+  componentWillUnmount() {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  assembleTableRows() {
+    const {
+      graphqlApi,
+      studioHost
+    } = this.state;
+    const propsData = this.props.data;
+    let result = [{
+      title: 'Sanity project',
+      rows: [{
+        title: 'Project ID',
+        value: projectId
+      }, {
+        title: 'Dataset',
+        value: dataset
+      }]
+    }]; // Handle any apps
+
+    const 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
+
+    const 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'
+  }
+};