@sanity/dashboard 0.136.3-purple-unicorn-patch.5627

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

@@ -0,0 +1,174 @@
+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';
+import { versionedClient } from '../../versionedClient';
+import { DashboardWidget } from '../../DashboardTool';
+import { userStore } from '../../legacyParts';
+const 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) {
+  const {
+    members
+  } = project;
+  const membershipA = members.find(member => member.id === userA.id);
+  const 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();
+    }
+
+    const {
+      projectId
+    } = versionedClient.config();
+    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 => {
+        let {
+          users,
+          project
+        } = _ref;
+        return this.setState({
+          project,
+          users: (Array.isArray(users) ? users : [users]).sort((userA, userB) => sortUsersByRobotStatus(userA, userB, project))
+        });
+      },
+      error: error => this.setState({
+        error
+      })
+    });
+  }
+
+  render() {
+    const {
+      error,
+      project,
+      users
+    } = this.state;
+    const 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 => {
+      const membership = project.members.find(member => member.id === user.id);
+      const 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,108 @@
+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';
+const {
+  urlBuilder,
+  getFeed
+} = dataAdapter;
+
+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() {
+    const {
+      templateRepoId
+    } = this.props;
+    this.subscription = getFeed(templateRepoId).subscribe(response => {
+      this.setState({
+        feedItems: response.items
+      });
+    });
+  }
+
+  componentWillUnmount() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  render() {
+    const {
+      feedItems
+    } = this.state;
+    const 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;
+      }
+
+      const presenter = feedItem.presenter || _get(feedItem, 'guideOrTutorial.presenter') || {};
+
+      const subtitle = _get(feedItem, 'category');
+
+      const {
+        guideOrTutorial = {}
+      } = feedItem;
+      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,98 @@
+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';
+const 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 => {
+  let {
+    theme
+  } = _ref;
+  return theme.sanity.color.card.enabled.bg;
+});
+const Root = styled(Flex)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:hover {\n    ", " {\n      &:before {\n        opacity: 1;\n      }\n    }\n  }\n"])), PlayIconBox);
+const PosterCard = styled(Card)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding-bottom: calc(9 / 16 * 100%);\n  position: relative;\n"])));
+const 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() {
+    const {
+      title,
+      posterURL,
+      showPlayIcon,
+      href,
+      presenterName,
+      presenterSubtitle
+    } = this.props;
+    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';
+const tutorialsProjectConfig = {
+  projectId: '3do82whm',
+  dataset: 'next'
+};
+export default {
+  getFeed: templateRepoId => {
+    const 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

@@ -0,0 +1,55 @@
+{
+  "name": "@sanity/dashboard",
+  "version": "0.136.3-purple-unicorn-patch.5627+c8b4b71ac",
+  "description": "Tool for rendering dashboard widgets",
+  "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": {
+    "build": "../../../bin/pkg-utils transpile",
+    "clean": "rimraf lib",
+    "watch": "../../../bin/pkg-utils transpile --watch"
+  },
+  "keywords": [
+    "sanity",
+    "cms",
+    "headless",
+    "realtime",
+    "content",
+    "dashboard",
+    "sanity-plugin",
+    "sanity-tool"
+  ],
+  "dependencies": {
+    "@sanity/icons": "^1.2.8",
+    "@sanity/image-url": "^1.0.1",
+    "@sanity/types": "0.136.3-purple-unicorn-patch.5627+c8b4b71ac",
+    "@sanity/ui": "^0.37.8",
+    "lodash": "^4.17.21",
+    "rxjs": "^6.5.3"
+  },
+  "devDependencies": {
+    "@sanity/base": "0.136.3-purple-unicorn-patch.5627+c8b4b71ac",
+    "prop-types": "^15.6.0",
+    "react": "17.0.2",
+    "rimraf": "^3.0.2"
+  },
+  "peerDependencies": {
+    "@sanity/base": "^2.0.0",
+    "prop-types": "^15.6 || ^16",
+    "react": "^16.9 || ^17",
+    "styled-components": "^5.2.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sanity-io/sanity.git",
+    "directory": "packages/@sanity/dashboard"
+  },
+  "bugs": {
+    "url": "https://github.com/sanity-io/sanity/issues"
+  },
+  "homepage": "https://www.sanity.io/",
+  "gitHead": "c8b4b71acd7cf035f6f0a2efd19c39ced849811f"
+}

package/sanity.json

@@ -0,0 +1,59 @@
+{
+  "paths": {
+    "source": "./src",
+    "compiled": "./lib"
+  },
+  "parts": [
+    {
+      "implements": "part:@sanity/base/tool",
+      "path": "DashboardTool"
+    },
+    {
+      "implements": "part:@sanity/base/component",
+      "path": "components/story"
+    },
+    {
+      "name": "part:@sanity/dashboard/config",
+      "description": "Tool for rendering dashboard widgets"
+    },
+    {
+      "implements": "part:@sanity/dashboard/config",
+      "path": "dashboardConfig"
+    },
+    {
+      "name": "part:@sanity/dashboard/widget",
+      "description": "Anything suitable for the dashboard"
+    },
+    {
+      "name": "part:@sanity/dashboard/widget/sanity-tutorials",
+      "implements": "part:@sanity/dashboard/widget",
+      "path": "widgets/sanityTutorials"
+    },
+    {
+      "name": "part:@sanity/dashboard/widget/project-info",
+      "implements": "part:@sanity/dashboard/widget",
+      "path": "widgets/projectInfo"
+    },
+    {
+      "name": "part:@sanity/dashboard/widget/project-users",
+      "implements": "part:@sanity/dashboard/widget",
+      "path": "widgets/projectUsers"
+    },
+    {
+      "name": "part:@sanity/dashboard/widget-styles",
+      "description": "Provides pseudo styles for selectable items"
+    },
+    {
+      "implements": "part:@sanity/dashboard/widget-styles",
+      "path": "widget.css"
+    },
+    {
+      "name": "part:@sanity/dashboard/widget-container",
+      "description": "A container component that resolves and renders widget components"
+    },
+    {
+      "implements": "part:@sanity/dashboard/widget-container",
+      "path": "containers/WidgetContainer"
+    }
+  ]
+}

package/src/DashboardTool.js

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

package/src/components/DashboardLayout.js

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

package/src/components/NotFoundWidget.js

@@ -0,0 +1,41 @@
+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)`
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  height: 100%;
+`
+
+function NotFoundWidget(props) {
+  const {title, children} = props
+  return (
+    <Root radius={3} paddingX={3} paddingY={4} tone="critical">
+      <Stack space={2}>
+        {title && (
+          <Heading size={1} as="h2">
+            {title}
+          </Heading>
+        )}
+        {children && <Box>{children}</Box>}
+      </Stack>
+    </Root>
+  )
+}
+
+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