@sanity/dashboard 2.30.2-shopify.2 → 2.30.3-activation-dashboard.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/dashboardConfig.js +5 -1
  2. package/lib/widgets/sanityTutorials/SanityTutorials.js +64 -41
  3. package/lib/widgets/sanityTutorials/Tutorial.js +68 -41
  4. package/package.json +4 -4
package/lib/dashboardConfig.js CHANGED
@@ -6,7 +6,11 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _default = {
8
8
  widgets: [{
9
- name: 'sanity-tutorials'
9
+ name: 'sanity-tutorials',
10
+ layout: {
11
+ width: 'full',
12
+ height: 'full'
13
+ }
10
14
  }, {
11
15
  name: 'project-info'
12
16
  }, {
package/lib/widgets/sanityTutorials/SanityTutorials.js CHANGED
@@ -5,16 +5,12 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
 
8
- var _get2 = _interopRequireDefault(require("lodash/get"));
9
-
10
8
  var _react = _interopRequireDefault(require("react"));
11
9
 
12
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
11
 
14
12
  var _ui = require("@sanity/ui");
15
13
 
16
- var _DashboardTool = require("../../DashboardTool");
17
-
18
14
  var _Tutorial = _interopRequireDefault(require("./Tutorial"));
19
15
 
20
16
  var _dataAdapter = _interopRequireDefault(require("./dataAdapter"));
@@ -23,6 +19,27 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
23
19
 
24
20
  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; }
25
21
 
22
+ var FeedItem = _ref => {
23
+ var feedItem = _ref.feedItem;
24
+ // Check to see if the feed item has the content needed to render an item with a link and poster image
25
+ var isEmpty = !feedItem.title || !feedItem.guideOrTutorial && !feedItem.externalLink && !feedItem.feedItems;
26
+
27
+ if (isEmpty) {
28
+ return null;
29
+ }
30
+
31
+ var subtitle = feedItem.description;
32
+ var _feedItem$guideOrTuto = feedItem.guideOrTutorial,
33
+ guideOrTutorial = _feedItem$guideOrTuto === void 0 ? {} : _feedItem$guideOrTuto;
34
+ return /*#__PURE__*/_react.default.createElement(_Tutorial.default, {
35
+ title: feedItem.title,
36
+ href: createUrl(guideOrTutorial.slug, guideOrTutorial._type) || feedItem.externalLink,
37
+ presenterSubtitle: subtitle,
38
+ showPlayIcon: feedItem.hasVideo,
39
+ posterURL: urlBuilder.image(feedItem.poster).height(360).url()
40
+ });
41
+ };
42
+
26
43
  var urlBuilder = _dataAdapter.default.urlBuilder,
27
44
  getFeed = _dataAdapter.default.getFeed;
28
45
 
@@ -49,6 +66,7 @@ class SanityTutorials extends _react.default.Component {
49
66
  var templateRepoId = this.props.templateRepoId;
50
67
  this.subscription = getFeed(templateRepoId).subscribe(response => {
51
68
  this.setState({
69
+ title: response.title,
52
70
  feedItems: response.items
53
71
  });
54
72
  });
@@ -61,44 +79,49 @@ class SanityTutorials extends _react.default.Component {
61
79
  }
62
80
 
63
81
  render() {
64
- var feedItems = this.state.feedItems;
65
- var title = 'Learn about Sanity';
66
- return /*#__PURE__*/_react.default.createElement(_DashboardTool.DashboardWidget, {
67
- header: title
68
- }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
69
- as: "ul",
70
- overflow: "auto",
71
- align: "stretch",
72
- paddingY: 2
73
- }, feedItems === null || feedItems === void 0 ? void 0 : feedItems.map((feedItem, index) => {
74
- if (!feedItem.title || !feedItem.guideOrTutorial && !feedItem.externalLink) {
75
- return null;
76
- }
77
-
78
- var presenter = feedItem.presenter || (0, _get2.default)(feedItem, 'guideOrTutorial.presenter') || {};
79
- var subtitle = (0, _get2.default)(feedItem, 'category');
80
- var _feedItem$guideOrTuto = feedItem.guideOrTutorial,
81
- guideOrTutorial = _feedItem$guideOrTuto === void 0 ? {} : _feedItem$guideOrTuto;
82
- return /*#__PURE__*/_react.default.createElement(_ui.Flex, {
82
+ var _this$state = this.state,
83
+ _this$state$title = _this$state.title,
84
+ title = _this$state$title === void 0 ? 'Learn about Sanity' : _this$state$title,
85
+ feedItems = _this$state.feedItems; // Filter out items and sections for layout purposes
86
+
87
+ var sections = feedItems.filter(i => i._type === 'feedSection');
88
+ var items = feedItems.filter(i => i._type === 'feedItem');
89
+
90
+ var columns = length => length < 4 ? [1, 2, 3] : [1, 2, 3, 4];
91
+
92
+ return /*#__PURE__*/_react.default.createElement(_ui.Container, {
93
+ width: 4
94
+ }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
95
+ space: 5,
96
+ paddingBottom: 4
97
+ }, sections && (sections === null || sections === void 0 ? void 0 : sections.length) > 0 && sections.map(section => {
98
+ var _section$sectionItems;
99
+
100
+ return (section === null || section === void 0 ? void 0 : section.sectionItems) && /*#__PURE__*/_react.default.createElement(_ui.Stack, {
101
+ space: 4,
102
+ key: section._id
103
+ }, /*#__PURE__*/_react.default.createElement(_ui.Heading, null, section.title), /*#__PURE__*/_react.default.createElement(_ui.Grid, {
104
+ as: "ul",
105
+ columns: columns(section === null || section === void 0 ? void 0 : (_section$sectionItems = section.sectionItems) === null || _section$sectionItems === void 0 ? void 0 : _section$sectionItems.length),
106
+ gap: 4
107
+ }, section === null || section === void 0 ? void 0 : section.sectionItems.map(item => /*#__PURE__*/_react.default.createElement(_ui.Flex, {
83
108
  as: "li",
84
- key: feedItem._id,
85
- paddingRight: index < (feedItems === null || feedItems === void 0 ? void 0 : feedItems.length) - 1 ? 1 : 3,
86
- paddingLeft: index === 0 ? 3 : 0,
87
- align: "stretch",
88
- flex: "0 0 27.5%",
89
- style: {
90
- minWidth: 272,
91
- width: '30%'
92
- }
93
- }, /*#__PURE__*/_react.default.createElement(_Tutorial.default, {
94
- title: feedItem.title,
95
- href: createUrl(guideOrTutorial.slug, guideOrTutorial._type) || feedItem.externalLink,
96
- presenterName: presenter.name,
97
- presenterSubtitle: subtitle,
98
- showPlayIcon: feedItem.hasVideo,
99
- posterURL: urlBuilder.image(feedItem.poster).height(360).url()
100
- }));
101
- })));
109
+ key: item._id
110
+ }, /*#__PURE__*/_react.default.createElement(FeedItem, {
111
+ feedItem: item
112
+ })))));
113
+ }), items && items.length > 0 && /*#__PURE__*/_react.default.createElement(_ui.Stack, {
114
+ space: 4
115
+ }, /*#__PURE__*/_react.default.createElement(_ui.Heading, null, title), /*#__PURE__*/_react.default.createElement(_ui.Grid, {
116
+ as: "ul",
117
+ columns: columns(items === null || items === void 0 ? void 0 : items.length),
118
+ gap: 4
119
+ }, items.map(feedItem => /*#__PURE__*/_react.default.createElement(_ui.Flex, {
120
+ as: "li",
121
+ key: feedItem.id
122
+ }, /*#__PURE__*/_react.default.createElement(FeedItem, {
123
+ feedItem: feedItem
124
+ })))))));
102
125
  }
103
126
 
104
127
  }
package/lib/widgets/sanityTutorials/Tutorial.js CHANGED
@@ -11,11 +11,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
 
12
12
  var _ui = require("@sanity/ui");
13
13
 
14
- var _icons = require("@sanity/icons");
15
-
16
14
  var _styledComponents = _interopRequireDefault(require("styled-components"));
17
15
 
18
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
16
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
19
17
 
20
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
19
 
@@ -23,14 +21,32 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
23
21
 
24
22
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
25
23
 
24
+ // eslint-disable-next-line no-useless-escape
25
+ var youtubeRegex = /youtu(?:.*\/v\/|.*v\=|\.be\/)([A-Za-z0-9_-]{11})/;
26
26
  var PlayIconBox = (0, _styledComponents.default)(_ui.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 => {
27
27
  var theme = _ref.theme;
28
28
  return theme.sanity.color.card.enabled.bg;
29
29
  });
30
30
  var Root = (0, _styledComponents.default)(_ui.Flex)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:hover {\n ", " {\n &:before {\n opacity: 1;\n }\n }\n }\n"])), PlayIconBox);
31
- var PosterCard = (0, _styledComponents.default)(_ui.Card)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 100%;\n padding-bottom: calc(9 / 16 * 100%);\n position: relative;\n"])));
32
-
33
- var Poster = _styledComponents.default.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"])));
31
+ var PosterCard = (0, _styledComponents.default)(_ui.Card)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 100%;\n padding-bottom: calc(9 / 16 * 100%);\n position: relative;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n"])));
32
+
33
+ var Poster = _styledComponents.default.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 border-radius: inherit;\n\n &:not([src]) {\n display: none;\n }\n"])));
34
+
35
+ var YoutubeContainer = (0, _styledComponents.default)(_ui.Card)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n padding-bottom: 56.25%;\n overflow: hidden;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n\n iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n"])));
36
+
37
+ var YoutubeEmbed = _ref2 => {
38
+ var embedId = _ref2.embedId;
39
+ return /*#__PURE__*/_react.default.createElement(YoutubeContainer, {
40
+ radius: 3
41
+ }, /*#__PURE__*/_react.default.createElement("iframe", {
42
+ width: "853",
43
+ height: "480",
44
+ src: "https://www.youtube.com/embed/".concat(embedId),
45
+ frameBorder: "0",
46
+ allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
47
+ allowFullScreen: true
48
+ }));
49
+ };
34
50
 
35
51
  class Tutorial extends _react.default.PureComponent {
36
52
  render() {
@@ -39,56 +55,68 @@ class Tutorial extends _react.default.PureComponent {
39
55
  posterURL = _this$props.posterURL,
40
56
  showPlayIcon = _this$props.showPlayIcon,
41
57
  href = _this$props.href,
42
- presenterName = _this$props.presenterName,
43
58
  presenterSubtitle = _this$props.presenterSubtitle;
44
- return /*#__PURE__*/_react.default.createElement(Root, {
59
+ var isYoutube = showPlayIcon && href && href.match(youtubeRegex);
60
+ return isYoutube ? /*#__PURE__*/_react.default.createElement(_ui.Card, {
61
+ space: 2,
62
+ sizing: "border",
63
+ flex: 1,
64
+ radius: 3,
65
+ style: {
66
+ position: 'relative'
67
+ },
68
+ border: true,
69
+ paddingBottom: 2
70
+ }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
71
+ space: 2,
72
+ height: "fill"
73
+ }, /*#__PURE__*/_react.default.createElement(YoutubeEmbed, {
74
+ embedId: href.match(youtubeRegex)[1]
75
+ }), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
76
+ space: 3,
77
+ flex: 1,
78
+ padding: 2
79
+ }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
80
+ as: "h3",
81
+ size: 1,
82
+ weight: "bold"
83
+ }, title), presenterSubtitle && /*#__PURE__*/_react.default.createElement(_ui.Text, {
84
+ size: 1,
85
+ muted: true
86
+ }, presenterSubtitle)))) : /*#__PURE__*/_react.default.createElement(Root, {
45
87
  flex: 1
46
88
  }, /*#__PURE__*/_react.default.createElement(_ui.Card, {
47
89
  sizing: "border",
48
90
  flex: 1,
49
- padding: 2,
50
- radius: 2,
91
+ radius: 3,
51
92
  as: "a",
52
93
  href: href,
53
94
  target: "_blank",
54
95
  rel: "noopener noreferrer",
55
96
  style: {
56
97
  position: 'relative'
57
- }
58
- }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
59
- direction: "column",
60
- style: {
61
- height: '100%'
62
- }
98
+ },
99
+ border: true,
100
+ paddingBottom: 2
101
+ }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
102
+ space: 2,
103
+ height: "fill"
63
104
  }, posterURL && /*#__PURE__*/_react.default.createElement(PosterCard, {
64
- marginBottom: 1
105
+ radius: 3
65
106
  }, /*#__PURE__*/_react.default.createElement(Poster, {
66
107
  src: posterURL
67
- }), showPlayIcon && /*#__PURE__*/_react.default.createElement(PlayIconBox, {
68
- display: "flex"
108
+ })), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
109
+ space: 3,
110
+ flex: 1,
111
+ padding: 2
69
112
  }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
70
- align: "center"
71
- }, /*#__PURE__*/_react.default.createElement(_icons.PlayIcon, null)))), /*#__PURE__*/_react.default.createElement(_ui.Flex, {
72
- direction: "column",
73
- justify: "space-between",
74
- paddingY: 2,
75
- flex: 1
76
- }, /*#__PURE__*/_react.default.createElement(_ui.Heading, {
77
113
  as: "h3",
78
- size: 1
79
- }, title), /*#__PURE__*/_react.default.createElement(_ui.Box, {
80
- marginTop: 4
81
- }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
82
- space: 2,
83
- flex: 1
84
- }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
85
- size: 1
86
- }, presenterName), /*#__PURE__*/_react.default.createElement(_ui.Text, {
87
- size: 0,
88
- style: {
89
- opacity: 0.7
90
- }
91
- }, presenterSubtitle)))))));
114
+ size: 1,
115
+ weight: "bold"
116
+ }, title), presenterSubtitle && /*#__PURE__*/_react.default.createElement(_ui.Text, {
117
+ size: 1,
118
+ muted: true
119
+ }, presenterSubtitle)))));
92
120
  }
93
121
 
94
122
  }
@@ -98,7 +126,6 @@ _defineProperty(Tutorial, "propTypes", {
98
126
  posterURL: _propTypes.default.string,
99
127
  href: _propTypes.default.string.isRequired,
100
128
  showPlayIcon: _propTypes.default.bool,
101
- presenterName: _propTypes.default.string.isRequired,
102
129
  presenterSubtitle: _propTypes.default.string.isRequired
103
130
  });
104
131
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sanity/dashboard",
3
- "version": "2.30.2-shopify.2+c78e70728",
3
+ "version": "2.30.3-activation-dashboard.6+a02320d1f",
4
4
  "description": "Tool for rendering dashboard widgets",
5
5
  "main": "./lib/DashboardTool.js",
6
6
  "types": "./dist/dts",
@@ -22,13 +22,13 @@
22
22
  "dependencies": {
23
23
  "@sanity/icons": "^1.2.6",
24
24
  "@sanity/image-url": "^1.0.1",
25
- "@sanity/types": "2.30.2-shopify.2+c78e70728",
25
+ "@sanity/types": "2.30.3-activation-dashboard.6+a02320d1f",
26
26
  "@sanity/ui": "^0.37.9",
27
27
  "lodash": "^4.17.15",
28
28
  "rxjs": "^6.5.3"
29
29
  },
30
30
  "devDependencies": {
31
- "@sanity/base": "2.30.2-shopify.2+c78e70728",
31
+ "@sanity/base": "2.30.3-activation-dashboard.6+a02320d1f",
32
32
  "prop-types": "^15.6.0",
33
33
  "rimraf": "^2.7.1"
34
34
  },
@@ -47,5 +47,5 @@
47
47
  "url": "https://github.com/sanity-io/sanity/issues"
48
48
  },
49
49
  "homepage": "https://www.sanity.io/",
50
- "gitHead": "c78e7072844ba209ec77b3c01e5ee3b1494cb276"
50
+ "gitHead": "a02320d1f55cb9fff108846746d990123f69dac0"
51
51
  }