@sanity/dashboard 2.30.3-shopify.5 → 2.30.3

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 +88 -40
  3. package/lib/widgets/sanityTutorials/Tutorial.js +68 -51
  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,74 @@ 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
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;
86
+ var templateRepoId = this.props.templateRepoId; // Filter out items and sections for layout purposes
87
+
88
+ var sections = feedItems.filter(i => i._type === 'feedSection');
89
+ var items = feedItems.filter(i => i._type === 'feedItem');
90
+
91
+ var columns = length => length < 4 ? [1, 2, 3] : [1, 2, 3, 4];
92
+
93
+ return /*#__PURE__*/_react.default.createElement(_ui.Container, {
94
+ width: 4
95
+ }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
96
+ space: 6,
97
+ paddingBottom: 4
98
+ }, /*#__PURE__*/_react.default.createElement(_ui.Card, {
99
+ tone: "primary",
100
+ padding: 4,
101
+ radius: 2,
102
+ border: true,
103
+ marginTop: 4
68
104
  }, /*#__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, {
105
+ direction: ['column', 'column', 'row']
106
+ }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
107
+ space: 4,
108
+ flex: 1,
109
+ paddingRight: [0, 0, 4]
110
+ }, /*#__PURE__*/_react.default.createElement(_ui.Heading, null, "Getting started Guide"), /*#__PURE__*/_react.default.createElement(_ui.Text, null, "It\u2019s time to learn how to build schemas, create content and connect it with other applications.")), /*#__PURE__*/_react.default.createElement(_ui.Flex, {
111
+ paddingTop: [4, 4, 0],
112
+ align: "center"
113
+ }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
114
+ flex: 1
115
+ }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
116
+ paddingY: 3,
117
+ paddingX: 5,
118
+ tone: "primary",
119
+ as: "a",
120
+ href: "https://www.sanity.io/docs?ref=dashboard-".concat(templateRepoId || 'plugin'),
121
+ text: "Go go docs"
122
+ }))))), sections && (sections === null || sections === void 0 ? void 0 : sections.length) > 0 && sections.map(section => {
123
+ var _section$sectionItems;
124
+
125
+ return (section === null || section === void 0 ? void 0 : section.sectionItems) && /*#__PURE__*/_react.default.createElement(_ui.Stack, {
126
+ space: 4,
127
+ key: section._id
128
+ }, /*#__PURE__*/_react.default.createElement(_ui.Heading, null, section.title), /*#__PURE__*/_react.default.createElement(_ui.Grid, {
129
+ as: "ul",
130
+ columns: columns(section === null || section === void 0 ? void 0 : (_section$sectionItems = section.sectionItems) === null || _section$sectionItems === void 0 ? void 0 : _section$sectionItems.length),
131
+ gap: 4
132
+ }, section === null || section === void 0 ? void 0 : section.sectionItems.map(item => /*#__PURE__*/_react.default.createElement(_ui.Flex, {
83
133
  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
- })));
134
+ key: item._id
135
+ }, /*#__PURE__*/_react.default.createElement(FeedItem, {
136
+ feedItem: item
137
+ })))));
138
+ }), items && items.length > 0 && /*#__PURE__*/_react.default.createElement(_ui.Stack, {
139
+ space: 4
140
+ }, /*#__PURE__*/_react.default.createElement(_ui.Heading, null, title), /*#__PURE__*/_react.default.createElement(_ui.Grid, {
141
+ as: "ul",
142
+ columns: columns(items === null || items === void 0 ? void 0 : items.length),
143
+ gap: 4
144
+ }, items.map(feedItem => /*#__PURE__*/_react.default.createElement(_ui.Flex, {
145
+ as: "li",
146
+ key: feedItem._id
147
+ }, /*#__PURE__*/_react.default.createElement(FeedItem, {
148
+ feedItem: feedItem
149
+ })))))));
102
150
  }
103
151
 
104
152
  }
package/lib/widgets/sanityTutorials/Tutorial.js CHANGED
@@ -7,15 +7,11 @@ exports.default = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
10
- var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
10
  var _ui = require("@sanity/ui");
13
11
 
14
- var _icons = require("@sanity/icons");
15
-
16
12
  var _styledComponents = _interopRequireDefault(require("styled-components"));
17
13
 
18
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
14
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
19
15
 
20
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
17
 
@@ -23,14 +19,32 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
23
19
 
24
20
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
25
21
 
22
+ // eslint-disable-next-line no-useless-escape
23
+ var youtubeRegex = /youtu(?:.*\/v\/|.*v\=|\.be\/)([A-Za-z0-9_-]{11})/;
26
24
  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
25
  var theme = _ref.theme;
28
26
  return theme.sanity.color.card.enabled.bg;
29
27
  });
30
28
  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"])));
29
+ 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"])));
30
+
31
+ 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"])));
32
+
33
+ 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"])));
34
+
35
+ var YoutubeEmbed = _ref2 => {
36
+ var embedId = _ref2.embedId;
37
+ return /*#__PURE__*/_react.default.createElement(YoutubeContainer, {
38
+ radius: 3
39
+ }, /*#__PURE__*/_react.default.createElement("iframe", {
40
+ width: "853",
41
+ height: "480",
42
+ src: "https://www.youtube.com/embed/".concat(embedId),
43
+ frameBorder: "0",
44
+ allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
45
+ allowFullScreen: true
46
+ }));
47
+ };
34
48
 
35
49
  class Tutorial extends _react.default.PureComponent {
36
50
  render() {
@@ -39,69 +53,72 @@ class Tutorial extends _react.default.PureComponent {
39
53
  posterURL = _this$props.posterURL,
40
54
  showPlayIcon = _this$props.showPlayIcon,
41
55
  href = _this$props.href,
42
- presenterName = _this$props.presenterName,
43
56
  presenterSubtitle = _this$props.presenterSubtitle;
44
- return /*#__PURE__*/_react.default.createElement(Root, {
57
+ var isYoutube = showPlayIcon && href && href.match(youtubeRegex);
58
+ return isYoutube ? /*#__PURE__*/_react.default.createElement(_ui.Card, {
59
+ space: 2,
60
+ sizing: "border",
61
+ flex: 1,
62
+ radius: 3,
63
+ style: {
64
+ position: 'relative'
65
+ },
66
+ border: true,
67
+ paddingBottom: 2
68
+ }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
69
+ space: 2,
70
+ height: "fill"
71
+ }, /*#__PURE__*/_react.default.createElement(YoutubeEmbed, {
72
+ embedId: href.match(youtubeRegex)[1]
73
+ }), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
74
+ space: 3,
75
+ flex: 1,
76
+ padding: 2
77
+ }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
78
+ as: "h3",
79
+ size: 1,
80
+ weight: "bold"
81
+ }, title), presenterSubtitle && /*#__PURE__*/_react.default.createElement(_ui.Text, {
82
+ size: 1,
83
+ muted: true
84
+ }, presenterSubtitle)))) : /*#__PURE__*/_react.default.createElement(Root, {
45
85
  flex: 1
46
86
  }, /*#__PURE__*/_react.default.createElement(_ui.Card, {
47
87
  sizing: "border",
48
88
  flex: 1,
49
- padding: 2,
50
- radius: 2,
89
+ radius: 3,
51
90
  as: "a",
52
91
  href: href,
53
92
  target: "_blank",
54
93
  rel: "noopener noreferrer",
55
94
  style: {
56
95
  position: 'relative'
57
- }
58
- }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
59
- direction: "column",
60
- style: {
61
- height: '100%'
62
- }
96
+ },
97
+ border: true,
98
+ paddingBottom: 2
99
+ }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
100
+ space: 2,
101
+ height: "fill"
63
102
  }, posterURL && /*#__PURE__*/_react.default.createElement(PosterCard, {
64
- marginBottom: 1
103
+ radius: 3
65
104
  }, /*#__PURE__*/_react.default.createElement(Poster, {
66
105
  src: posterURL
67
- }), showPlayIcon && /*#__PURE__*/_react.default.createElement(PlayIconBox, {
68
- display: "flex"
106
+ })), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
107
+ space: 3,
108
+ flex: 1,
109
+ padding: 2
69
110
  }, /*#__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
111
  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)))))));
112
+ size: 1,
113
+ weight: "bold"
114
+ }, title), presenterSubtitle && /*#__PURE__*/_react.default.createElement(_ui.Text, {
115
+ size: 1,
116
+ muted: true
117
+ }, presenterSubtitle)))));
92
118
  }
93
119
 
94
120
  }
95
121
 
96
- _defineProperty(Tutorial, "propTypes", {
97
- title: _propTypes.default.string.isRequired,
98
- posterURL: _propTypes.default.string,
99
- href: _propTypes.default.string.isRequired,
100
- showPlayIcon: _propTypes.default.bool,
101
- presenterName: _propTypes.default.string.isRequired,
102
- presenterSubtitle: _propTypes.default.string.isRequired
103
- });
104
-
105
122
  _defineProperty(Tutorial, "defaultProps", {
106
123
  posterURL: null,
107
124
  showPlayIcon: false
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sanity/dashboard",
3
- "version": "2.30.3-shopify.5+804b470dd",
3
+ "version": "2.30.3",
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.3-shopify.5+804b470dd",
25
+ "@sanity/types": "2.30.3",
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.3-shopify.5+804b470dd",
31
+ "@sanity/base": "2.30.3",
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": "804b470dd8c8f14cea307b6fb41a736c412b3038"
50
+ "gitHead": "78ec08868a5da69946759f298d9cd71a11bd0e8d"
51
51
  }