@sanity/dashboard 3.1.5 → 4.0.0

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 (20) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +42 -55
  3. package/lib/index.d.mts +65 -0
  4. package/lib/index.esm.js +466 -635
  5. package/lib/index.esm.js.map +1 -1
  6. package/lib/index.js +455 -644
  7. package/lib/index.js.map +1 -1
  8. package/lib/index.mjs +584 -0
  9. package/lib/index.mjs.map +1 -0
  10. package/package.json +39 -38
  11. package/src/components/DashboardWidgetContainer.tsx +2 -2
  12. package/src/components/NotFoundWidget.tsx +1 -1
  13. package/src/components/WidgetGroup.tsx +11 -13
  14. package/src/containers/WidgetContainer.tsx +1 -1
  15. package/src/versionedClient.ts +1 -1
  16. package/src/widgets/projectInfo/ProjectInfo.tsx +16 -6
  17. package/src/widgets/projectUsers/ProjectUser.tsx +45 -0
  18. package/src/widgets/projectUsers/ProjectUsers.tsx +28 -49
  19. package/src/widgets/sanityTutorials/Tutorial.tsx +1 -1
  20. package/src/widgets/sanityTutorials/dataAdapter.ts +2 -1
package/lib/index.js CHANGED
@@ -1,441 +1,299 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', {
4
- value: true
5
- });
6
- var jsxRuntime = require('react/jsx-runtime');
7
- var react = require('react');
8
- var ui = require('@sanity/ui');
9
- var styled = require('styled-components');
10
- var sanity = require('sanity');
11
- var rxjs = require('rxjs');
12
- var operators = require('rxjs/operators');
13
- var icons = require('@sanity/icons');
14
- var imageUrlBuilder = require('@sanity/image-url');
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: !0 });
3
+ var jsxRuntime = require("react/jsx-runtime"), react = require("react"), ui = require("@sanity/ui"), styledComponents = require("styled-components"), sanity = require("sanity"), rxjs = require("rxjs"), operators = require("rxjs/operators"), icons = require("@sanity/icons"), imageUrlBuilder = require("@sanity/image-url");
15
4
  function _interopDefaultCompat(e) {
16
- return e && typeof e === 'object' && 'default' in e ? e : {
17
- default: e
18
- };
5
+ return e && typeof e == "object" && "default" in e ? e : { default: e };
19
6
  }
20
- var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
21
- var imageUrlBuilder__default = /*#__PURE__*/_interopDefaultCompat(imageUrlBuilder);
22
- var __freeze$3 = Object.freeze;
23
- var __defProp$3 = Object.defineProperty;
24
- var __template$3 = (cooked, raw) => __freeze$3(__defProp$3(cooked, "raw", {
25
- value: __freeze$3(raw || cooked.slice())
26
- }));
27
- var _a$3, _b$2, _c$2, _d$2;
28
- const Root$2 = styled__default.default(ui.Card)(_a$3 || (_a$3 = __template$3(["\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n height: 100%;\n box-sizing: border-box;\n position: relative;\n"])));
29
- const Header = styled__default.default(ui.Card)(_b$2 || (_b$2 = __template$3(["\n position: sticky;\n top: 0;\n z-index: 2;\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n"])));
30
- const Footer = styled__default.default(ui.Card)(_c$2 || (_c$2 = __template$3(["\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"])));
31
- const Content = styled__default.default(ui.Box)(_d$2 || (_d$2 = __template$3(["\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 => {
32
- let {
33
- theme
34
- } = _ref;
35
- return theme.sanity.media[0];
36
- });
37
- const DashboardWidgetContainer = react.forwardRef(function DashboardWidgetContainer2(props, ref) {
38
- const {
39
- header,
40
- children,
41
- footer
42
- } = props;
43
- return /* @__PURE__ */jsxRuntime.jsxs(Root$2, {
44
- radius: 3,
45
- display: "flex",
46
- ref,
47
- children: [header && /* @__PURE__ */jsxRuntime.jsx(Header, {
48
- borderBottom: true,
49
- paddingX: 3,
50
- paddingY: 4,
51
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Heading, {
52
- size: 1,
53
- textOverflow: "ellipsis",
54
- children: header
55
- })
56
- }), children && /* @__PURE__ */jsxRuntime.jsx(Content, {
57
- children
58
- }), footer && /* @__PURE__ */jsxRuntime.jsx(Footer, {
59
- borderTop: true,
60
- children: footer
61
- })]
62
- });
7
+ var imageUrlBuilder__default = /* @__PURE__ */ _interopDefaultCompat(imageUrlBuilder);
8
+ const Root$3 = styledComponents.styled(ui.Card)`
9
+ display: flex;
10
+ flex-direction: column;
11
+ justify-content: stretch;
12
+ height: 100%;
13
+ box-sizing: border-box;
14
+ position: relative;
15
+ `, Header = styledComponents.styled(ui.Card)`
16
+ position: sticky;
17
+ top: 0;
18
+ z-index: 2;
19
+ border-top-left-radius: inherit;
20
+ border-top-right-radius: inherit;
21
+ `, Footer = styledComponents.styled(ui.Card)`
22
+ position: sticky;
23
+ overflow: hidden;
24
+ bottom: 0;
25
+ z-index: 2;
26
+ border-bottom-right-radius: inherit;
27
+ border-bottom-left-radius: inherit;
28
+ margin-top: auto;
29
+ `, Content = styledComponents.styled(ui.Box)`
30
+ position: relative;
31
+ z-index: 1;
32
+ height: stretch;
33
+ min-height: 21.5em;
34
+
35
+ @media (min-width: ${({ theme }) => theme.sanity.media[0]}px) {
36
+ overflow-y: auto;
37
+ outline: none;
38
+ }
39
+ `, DashboardWidgetContainer = react.forwardRef(function(props, ref) {
40
+ const { header, children, footer } = props;
41
+ return /* @__PURE__ */ jsxRuntime.jsxs(Root$3, { radius: 3, display: "flex", ref, children: [
42
+ header && /* @__PURE__ */ jsxRuntime.jsx(Header, { borderBottom: !0, paddingX: 3, paddingY: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { size: 1, textOverflow: "ellipsis", children: header }) }),
43
+ children && /* @__PURE__ */ jsxRuntime.jsx(Content, { children }),
44
+ footer && /* @__PURE__ */ jsxRuntime.jsx(Footer, { borderTop: !0, children: footer })
45
+ ] });
63
46
  });
64
47
  function useVersionedClient() {
65
- return sanity.useClient({
66
- apiVersion: "1"
67
- });
48
+ return sanity.useClient({ apiVersion: "2024-06-03" });
68
49
  }
69
- const DashboardContext = react.createContext({
70
- widgets: []
71
- });
50
+ const DashboardContext = react.createContext({ widgets: [] });
72
51
  function useDashboardConfig() {
73
52
  return react.useContext(DashboardContext);
74
53
  }
75
54
  function WidgetContainer(props) {
76
- const config = useDashboardConfig();
77
- const layout = react.useMemo(() => ({
78
- ...(props.layout || {}),
79
- ...(config.layout || {})
80
- }), [props.layout, config.layout]);
81
- return /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
82
- shadow: 1,
83
- "data-width": layout.width,
84
- "data-height": layout.height,
85
- children: react.createElement(props.component, {})
86
- });
55
+ const config = useDashboardConfig(), layout = react.useMemo(
56
+ () => ({
57
+ ...props.layout || {},
58
+ ...config.layout || {}
59
+ }),
60
+ [props.layout, config.layout]
61
+ );
62
+ return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { shadow: 1, "data-width": layout.width, "data-height": layout.height, children: react.createElement(props.component, {}) });
87
63
  }
88
64
  function isUrl(url) {
89
- return url && /^https?:\/\//.test("".concat(url));
65
+ return url && /^https?:\/\//.test(`${url}`);
90
66
  }
91
67
  function getGraphQlUrl(projectId, dataset) {
92
- return "https://".concat(projectId, ".api.sanity.io/v1/graphql/").concat(dataset, "/default");
68
+ return `https://${projectId}.api.sanity.io/v1/graphql/${dataset}/default`;
93
69
  }
94
70
  function getGroqUrl(projectId, dataset) {
95
- return "https://".concat(projectId, ".api.sanity.io/v1/groq/").concat(dataset);
71
+ return `https://${projectId}.api.sanity.io/v1/groq/${dataset}`;
96
72
  }
97
73
  function getManageUrl(projectId) {
98
- return "https://manage.sanity.io/projects/".concat(projectId);
74
+ return `https://manage.sanity.io/projects/${projectId}`;
99
75
  }
100
- const NO_EXPERIMENTAL = [];
101
- const NO_DATA = [];
76
+ const NO_EXPERIMENTAL = [], NO_DATA = [];
102
77
  function ProjectInfo(props) {
103
- const {
104
- __experimental_before = NO_EXPERIMENTAL,
105
- data = NO_DATA
106
- } = props;
107
- const [studioHost, setStudioHost] = react.useState();
108
- const [graphqlApi, setGraphQlApi] = react.useState();
109
- const versionedClient = useVersionedClient();
110
- const {
111
- projectId = "unknown",
112
- dataset = "unknown"
113
- } = versionedClient.config();
78
+ const { __experimental_before = NO_EXPERIMENTAL, data = NO_DATA } = props, [studioHost, setStudioHost] = react.useState(), [graphqlApi, setGraphQlApi] = react.useState(), versionedClient = useVersionedClient(), { projectId = "unknown", dataset = "unknown" } = versionedClient.config();
114
79
  react.useEffect(() => {
115
80
  const subscriptions = [];
116
- subscriptions.push(versionedClient.observable.request({
117
- uri: "/projects/".concat(projectId)
118
- }).subscribe({
119
- next: result => {
120
- const {
121
- studioHost: host
122
- } = result;
123
- setStudioHost(host ? "https://".concat(host, ".sanity.studio") : void 0);
124
- },
125
- error: error => {
126
- console.error("Error while looking for studioHost", error);
127
- setStudioHost({
128
- error: "Something went wrong while looking up studioHost. See console."
129
- });
130
- }
131
- }));
132
- subscriptions.push(versionedClient.observable.request({
133
- method: "HEAD",
134
- uri: "/graphql/".concat(dataset, "/default")
135
- }).subscribe({
136
- next: () => setGraphQlApi(getGraphQlUrl(projectId, dataset)),
137
- error: error => {
138
- if (error.statusCode === 404) {
139
- setGraphQlApi(void 0);
140
- } else {
141
- console.error("Error while looking for graphqlApi", error);
142
- setGraphQlApi({
143
- error: "Something went wrong while looking up graphqlApi. See console."
81
+ return subscriptions.push(
82
+ versionedClient.observable.request({ uri: `/projects/${projectId}`, tag: "dashboard.project-info.studio-host" }).subscribe({
83
+ next: (result) => {
84
+ var _a;
85
+ if ((_a = result.metadata) != null && _a.externalStudioHost) {
86
+ setStudioHost(result.metadata.externalStudioHost);
87
+ return;
88
+ }
89
+ setStudioHost(
90
+ result.studioHost ? `https://${result.studioHost}.sanity.studio` : void 0
91
+ );
92
+ },
93
+ error: (error) => {
94
+ console.error("Error while looking for studioHost", error), setStudioHost({
95
+ error: "Something went wrong while looking up studioHost. See console."
144
96
  });
145
97
  }
146
- }
147
- }));
148
- return () => {
149
- subscriptions.forEach(s => s.unsubscribe());
98
+ })
99
+ ), subscriptions.push(
100
+ versionedClient.observable.request({
101
+ method: "HEAD",
102
+ uri: `/graphql/${dataset}/default`,
103
+ tag: "dashboard.project-info.graphql-api"
104
+ }).subscribe({
105
+ next: () => setGraphQlApi(getGraphQlUrl(projectId, dataset)),
106
+ error: (error) => {
107
+ error.statusCode === 404 ? setGraphQlApi(void 0) : (console.error("Error while looking for graphqlApi", error), setGraphQlApi({
108
+ error: "Something went wrong while looking up graphqlApi. See console."
109
+ }));
110
+ }
111
+ })
112
+ ), () => {
113
+ subscriptions.forEach((s) => s.unsubscribe());
150
114
  };
151
115
  }, [dataset, projectId, versionedClient, setGraphQlApi, setStudioHost]);
152
116
  const assembleTableRows = react.useMemo(() => {
153
117
  var _a;
154
- let result = [{
155
- title: "Sanity project",
156
- rows: [{
157
- title: "Project ID",
158
- value: projectId
159
- }, {
160
- title: "Dataset",
161
- value: dataset
162
- }]
163
- }];
164
- const apps = [studioHost ? {
165
- title: "Studio",
166
- value: studioHost
167
- } : null, ...data.filter(item => item.category === "apps")].filter(a => !!a);
168
- if (apps.length > 0) {
169
- result = result.concat([{
170
- title: "Apps",
171
- rows: apps
172
- }]);
173
- }
174
- result = result.concat([{
175
- title: "APIs",
176
- rows: [{
177
- title: "GROQ",
178
- value: getGroqUrl(projectId, dataset)
179
- }, {
180
- title: "GraphQL",
181
- value: (_a = typeof graphqlApi === "object" ? "Error" : graphqlApi) != null ? _a : "Not deployed"
182
- }]
183
- }], data.filter(item => item.category === "apis"));
184
- const otherStuff = {};
185
- data.forEach(item => {
186
- if (item.category && item.category !== "apps" && item.category !== "apis") {
187
- if (!otherStuff[item.category]) {
188
- otherStuff[item.category] = [];
189
- }
190
- otherStuff[item.category].push(item);
118
+ let result = [
119
+ {
120
+ title: "Sanity project",
121
+ rows: [
122
+ { title: "Project ID", value: projectId },
123
+ { title: "Dataset", value: dataset }
124
+ ]
191
125
  }
192
- });
193
- Object.keys(otherStuff).forEach(category => {
194
- result.push({
195
- title: category,
196
- rows: otherStuff[category]
197
- });
198
- });
199
- return result;
126
+ ];
127
+ const apps = [
128
+ studioHost ? { title: "Studio", value: studioHost } : null,
129
+ ...data.filter((item) => item.category === "apps")
130
+ ].filter((a) => !!a);
131
+ apps.length > 0 && (result = result.concat([{ title: "Apps", rows: apps }])), result = result.concat(
132
+ [
133
+ {
134
+ title: "APIs",
135
+ rows: [
136
+ { title: "GROQ", value: getGroqUrl(projectId, dataset) },
137
+ {
138
+ title: "GraphQL",
139
+ value: (_a = typeof graphqlApi == "object" ? "Error" : graphqlApi) != null ? _a : "Not deployed"
140
+ }
141
+ ]
142
+ }
143
+ ],
144
+ data.filter((item) => item.category === "apis")
145
+ );
146
+ const otherStuff = {};
147
+ return data.forEach((item) => {
148
+ item.category && item.category !== "apps" && item.category !== "apis" && (otherStuff[item.category] || (otherStuff[item.category] = []), otherStuff[item.category].push(item));
149
+ }), Object.keys(otherStuff).forEach((category) => {
150
+ result.push({ title: category, rows: otherStuff[category] });
151
+ }), result;
200
152
  }, [graphqlApi, studioHost, projectId, dataset, data]);
201
- return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
202
- children: [__experimental_before.map((widgetConfig, idx) => /* @__PURE__ */jsxRuntime.jsx(WidgetContainer, {
203
- ...widgetConfig
204
- }, idx)), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
205
- height: "fill",
206
- marginTop: (__experimental_before == null ? void 0 : __experimental_before.length) > 0 ? 4 : 0,
207
- children: /* @__PURE__ */jsxRuntime.jsx(DashboardWidgetContainer, {
208
- footer: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
209
- style: {
210
- width: "100%"
211
- },
212
- paddingX: 2,
213
- paddingY: 4,
214
- mode: "bleed",
215
- tone: "primary",
216
- text: "Manage project",
217
- as: "a",
218
- href: getManageUrl(projectId)
219
- }),
220
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
221
- paddingY: 4,
222
- radius: 2,
223
- role: "table",
224
- "aria-label": "Project info",
225
- "aria-describedby": "project_info_table",
226
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
227
- space: 4,
228
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
229
- paddingX: 3,
230
- as: "header",
231
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Heading, {
232
- size: 1,
233
- as: "h2",
234
- id: "project_info_table",
235
- children: "Project info"
236
- })
237
- }), assembleTableRows.map(item => {
238
- if (!item || !item.rows) {
239
- return null;
240
- }
241
- return /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
242
- space: 3,
243
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Card, {
244
- borderBottom: true,
245
- padding: 3,
246
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Label, {
247
- size: 0,
248
- muted: true,
249
- role: "columnheader",
250
- children: item.title
251
- })
252
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Stack, {
253
- space: 4,
254
- paddingX: 3,
255
- role: "rowgroup",
256
- children: item.rows.map(row => {
257
- var _a;
258
- return /* @__PURE__ */jsxRuntime.jsxs(ui.Grid, {
259
- columns: 2,
260
- role: "row",
261
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
262
- weight: "medium",
263
- role: "rowheader",
264
- children: row.title
265
- }), typeof row.value === "object" && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
266
- size: 1,
267
- children: (_a = row.value) == null ? void 0 : _a.error
268
- }), typeof row.value === "string" && /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
269
- children: isUrl(row.value) ? /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
270
- size: 1,
271
- role: "cell",
272
- style: {
273
- wordBreak: "break-word"
274
- },
275
- children: /* @__PURE__ */jsxRuntime.jsx("a", {
276
- href: row.value,
277
- children: row.value
278
- })
279
- }) : /* @__PURE__ */jsxRuntime.jsx(ui.Code, {
280
- size: 1,
281
- role: "cell",
282
- style: {
283
- wordBreak: "break-word"
284
- },
285
- children: row.value
286
- })
287
- })]
288
- }, row.title);
289
- })
290
- })]
291
- }, item.title);
292
- })]
293
- })
294
- })
295
- })
296
- })]
297
- });
153
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
154
+ __experimental_before.map((widgetConfig, idx) => /* @__PURE__ */ jsxRuntime.jsx(WidgetContainer, { ...widgetConfig }, idx)),
155
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { height: "fill", marginTop: (__experimental_before == null ? void 0 : __experimental_before.length) > 0 ? 4 : 0, children: /* @__PURE__ */ jsxRuntime.jsx(
156
+ DashboardWidgetContainer,
157
+ {
158
+ footer: /* @__PURE__ */ jsxRuntime.jsx(
159
+ ui.Button,
160
+ {
161
+ style: { width: "100%" },
162
+ paddingX: 2,
163
+ paddingY: 4,
164
+ mode: "bleed",
165
+ tone: "primary",
166
+ text: "Manage project",
167
+ as: "a",
168
+ href: getManageUrl(projectId)
169
+ }
170
+ ),
171
+ children: /* @__PURE__ */ jsxRuntime.jsx(
172
+ ui.Card,
173
+ {
174
+ paddingY: 4,
175
+ radius: 2,
176
+ role: "table",
177
+ "aria-label": "Project info",
178
+ "aria-describedby": "project_info_table",
179
+ children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 4, children: [
180
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 3, as: "header", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { size: 1, as: "h2", id: "project_info_table", children: "Project info" }) }),
181
+ assembleTableRows.map((item) => !item || !item.rows ? null : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
182
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { borderBottom: !0, padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: 0, muted: !0, role: "columnheader", children: item.title }) }),
183
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 4, paddingX: 3, role: "rowgroup", children: item.rows.map((row) => {
184
+ var _a;
185
+ return /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { columns: 2, role: "row", children: [
186
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { weight: "medium", role: "rowheader", children: row.title }),
187
+ typeof row.value == "object" && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: (_a = row.value) == null ? void 0 : _a.error }),
188
+ typeof row.value == "string" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isUrl(row.value) ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, role: "cell", style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: row.value, children: row.value }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Code, { size: 1, role: "cell", style: { wordBreak: "break-word" }, children: row.value }) })
189
+ ] }, row.title);
190
+ }) })
191
+ ] }, item.title))
192
+ ] })
193
+ }
194
+ )
195
+ }
196
+ ) })
197
+ ] });
298
198
  }
299
199
  function projectInfoWidget(config) {
300
200
  var _a;
301
201
  return {
302
202
  name: "project-info",
303
203
  component: ProjectInfo,
304
- layout: (_a = config == null ? void 0 : config.layout) != null ? _a : {
305
- width: "medium"
306
- }
204
+ layout: (_a = config == null ? void 0 : config.layout) != null ? _a : { width: "medium" }
307
205
  };
308
206
  }
309
- var __freeze$2 = Object.freeze;
310
- var __defProp$2 = Object.defineProperty;
311
- var __template$2 = (cooked, raw) => __freeze$2(__defProp$2(cooked, "raw", {
312
- value: __freeze$2(raw || cooked.slice())
313
- }));
314
- var _a$2;
315
- const AvatarWrapper = styled__default.default(ui.Card)(_a$2 || (_a$2 = __template$2(["\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"])));
207
+ const Root$2 = styledComponents.styled(ui.Flex)`
208
+ height: ${ui.rem(33)}; // 33 = PREVIEW_SIZES.default.media.height
209
+ box-sizing: content-box;
210
+ `;
211
+ function ProjectUser({ user, isRobot, roles }) {
212
+ const listFormat = sanity.useListFormat({ style: "narrow" });
213
+ return /* @__PURE__ */ jsxRuntime.jsx(Root$2, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", flex: 1, gap: 2, children: [
214
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: "none", children: isRobot ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, children: /* @__PURE__ */ jsxRuntime.jsx(icons.RobotIcon, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(sanity.UserAvatar, { user }) }),
215
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { flex: 1, space: 2, children: [
216
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, style: { color: "inherit" }, textOverflow: "ellipsis", weight: "medium", children: user.displayName }),
217
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, textOverflow: "ellipsis", children: listFormat.format(roles) })
218
+ ] })
219
+ ] }) });
220
+ }
316
221
  function getInviteUrl(projectId) {
317
- return "https://manage.sanity.io/projects/".concat(projectId, "/team/invite");
222
+ return `https://manage.sanity.io/projects/${projectId}/members`;
318
223
  }
319
224
  function ProjectUsers() {
320
- const [project, setProject] = react.useState();
321
- const [users, setUsers] = react.useState();
322
- const [error, setError] = react.useState();
323
- const userStore = sanity.useUserStore();
324
- const versionedClient = useVersionedClient();
325
- const fetchData = react.useCallback(() => {
326
- const {
327
- projectId
328
- } = versionedClient.config();
329
- const subscription = versionedClient.observable.request({
330
- uri: "/projects/".concat(projectId)
331
- }).pipe(operators.switchMap(_project => rxjs.from(userStore.getUsers(_project.members.map(mem => mem.id))).pipe(operators.map(_users => ({
332
- project: _project,
333
- users: _users
334
- }))))).subscribe({
335
- next: _ref2 => {
336
- let {
337
- users: _users,
338
- project: _project
339
- } = _ref2;
340
- setProject(_project);
341
- setUsers((Array.isArray(_users) ? _users : [_users]).sort((userA, userB) => sortUsersByRobotStatus(userA, userB, _project)));
225
+ const [project, setProject] = react.useState(), [users, setUsers] = react.useState(), [error, setError] = react.useState(), userStore = sanity.useUserStore(), versionedClient = useVersionedClient(), fetchData = react.useCallback(() => {
226
+ const { projectId } = versionedClient.config(), subscription = versionedClient.observable.request({
227
+ uri: `/projects/${projectId}`,
228
+ tag: "dashboard.project-users"
229
+ }).pipe(
230
+ operators.switchMap(
231
+ (_project) => rxjs.from(userStore.getUsers(_project.members.map((mem) => mem.id))).pipe(
232
+ operators.map((_users) => ({ project: _project, users: _users }))
233
+ )
234
+ )
235
+ ).subscribe({
236
+ next: ({ users: _users, project: _project }) => {
237
+ setProject(_project), setUsers(
238
+ (Array.isArray(_users) ? _users : [_users]).sort(
239
+ (userA, userB) => sortUsersByRobotStatus(userA, userB, _project)
240
+ )
241
+ );
342
242
  },
343
- error: e => setError(e)
243
+ error: (e) => setError(e)
344
244
  });
345
245
  return () => subscription.unsubscribe();
346
246
  }, [userStore, versionedClient]);
347
247
  react.useEffect(() => fetchData(), [fetchData]);
348
- const handleRetryFetch = react.useCallback(() => fetchData(), [fetchData]);
349
- const isLoading = !users || !project;
350
- if (error) {
351
- return /* @__PURE__ */jsxRuntime.jsx(DashboardWidgetContainer, {
248
+ const handleRetryFetch = react.useCallback(() => fetchData(), [fetchData]), isLoading = !users || !project;
249
+ return error ? /* @__PURE__ */ jsxRuntime.jsx(DashboardWidgetContainer, { header: "Project users", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { children: [
250
+ "Something went wrong while fetching data. You could",
251
+ " ",
252
+ /* @__PURE__ */ jsxRuntime.jsx("a", { onClick: handleRetryFetch, title: "Retry users fetch", style: { cursor: "pointer" }, children: "retry" }),
253
+ "..?"
254
+ ] }) }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
255
+ DashboardWidgetContainer,
256
+ {
352
257
  header: "Project users",
353
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
354
- padding: 4,
355
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
356
- children: ["Something went wrong while fetching data. You could", " ", /* @__PURE__ */jsxRuntime.jsx("a", {
357
- onClick: handleRetryFetch,
358
- title: "Retry users fetch",
359
- style: {
360
- cursor: "pointer"
258
+ footer: /* @__PURE__ */ jsxRuntime.jsx(
259
+ ui.Button,
260
+ {
261
+ style: { width: "100%" },
262
+ paddingX: 2,
263
+ paddingY: 4,
264
+ mode: "bleed",
265
+ tone: "primary",
266
+ text: "Manage members",
267
+ as: "a",
268
+ loading: isLoading,
269
+ href: isLoading ? void 0 : getInviteUrl(project.id)
270
+ }
271
+ ),
272
+ children: [
273
+ isLoading && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingY: 5, paddingX: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 4, children: [
274
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { align: "center", muted: !0, size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {}) }),
275
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { align: "center", size: 1, muted: !0, children: "Loading items\u2026" })
276
+ ] }) }),
277
+ !isLoading && /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 3, padding: 3, children: users == null ? void 0 : users.map((user) => {
278
+ var _a;
279
+ const membership = project.members.find((member) => member.id === user.id);
280
+ return /* @__PURE__ */ jsxRuntime.jsx(
281
+ ProjectUser,
282
+ {
283
+ user,
284
+ isRobot: (_a = membership == null ? void 0 : membership.isRobot) != null ? _a : !1,
285
+ roles: (membership == null ? void 0 : membership.roles.map((role) => role.title)) || []
361
286
  },
362
- children: "retry"
363
- }), "..?"]
364
- })
365
- })
366
- });
367
- }
368
- return /* @__PURE__ */jsxRuntime.jsxs(DashboardWidgetContainer, {
369
- header: "Project users",
370
- footer: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
371
- style: {
372
- width: "100%"
373
- },
374
- paddingX: 2,
375
- paddingY: 4,
376
- mode: "bleed",
377
- tone: "primary",
378
- text: "Invite members",
379
- as: "a",
380
- loading: isLoading,
381
- href: isLoading ? void 0 : getInviteUrl(project.id)
382
- }),
383
- children: [isLoading && /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
384
- paddingY: 5,
385
- paddingX: 2,
386
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
387
- space: 4,
388
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
389
- align: "center",
390
- muted: true,
391
- size: 1,
392
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {})
393
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
394
- align: "center",
395
- size: 1,
396
- muted: true,
397
- children: "Loading items..."
398
- })]
399
- })
400
- }), !isLoading && /* @__PURE__ */jsxRuntime.jsx(ui.Stack, {
401
- space: 3,
402
- padding: 3,
403
- children: users == null ? void 0 : users.map(user => {
404
- const membership = project.members.find(member => member.id === user.id);
405
- const media = (membership == null ? void 0 : membership.isRobot) ? /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
406
- size: 3,
407
- children: /* @__PURE__ */jsxRuntime.jsx(icons.RobotIcon, {})
408
- }) : /* @__PURE__ */jsxRuntime.jsx(AvatarWrapper, {
409
- tone: "transparent",
410
- children: (user == null ? void 0 : user.imageUrl) && /* @__PURE__ */jsxRuntime.jsx("img", {
411
- src: user.imageUrl,
412
- alt: user == null ? void 0 : user.displayName
413
- })
414
- });
415
- return /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
416
- children: /* @__PURE__ */jsxRuntime.jsx(sanity.DefaultPreview, {
417
- title: user.displayName,
418
- subtitle: membership == null ? void 0 : membership.role,
419
- media
420
- })
421
- }, user.id);
422
- })
423
- })]
424
- });
287
+ user.id
288
+ );
289
+ }) })
290
+ ]
291
+ }
292
+ );
425
293
  }
426
294
  function sortUsersByRobotStatus(userA, userB, project) {
427
- const {
428
- members
429
- } = project;
430
- const membershipA = members.find(member => member.id === (userA == null ? void 0 : userA.id));
431
- const membershipB = members.find(member => member.id === (userB == null ? void 0 : userB.id));
432
- if (membershipA == null ? void 0 : membershipA.isRobot) {
433
- return 1;
434
- }
435
- if (membershipB == null ? void 0 : membershipB.isRobot) {
436
- return -1;
437
- }
438
- return 0;
295
+ const { members } = project, membershipA = members.find((member) => member.id === (userA == null ? void 0 : userA.id)), membershipB = members.find((member) => member.id === (userB == null ? void 0 : userB.id));
296
+ return (membershipA == null ? void 0 : membershipA.isRobot) === (membershipB == null ? void 0 : membershipB.isRobot) ? ((membershipA == null ? void 0 : membershipA.createdAt) || "") > ((membershipB == null ? void 0 : membershipB.createdAt) || "") ? 1 : -1 : membershipA != null && membershipA.isRobot ? 1 : -1;
439
297
  }
440
298
  function projectUsersWidget(config) {
441
299
  return {
@@ -444,33 +302,54 @@ function projectUsersWidget(config) {
444
302
  layout: config == null ? void 0 : config.layout
445
303
  };
446
304
  }
447
- var __freeze$1 = Object.freeze;
448
- var __defProp$1 = Object.defineProperty;
449
- var __template$1 = (cooked, raw) => __freeze$1(__defProp$1(cooked, "raw", {
450
- value: __freeze$1(raw || cooked.slice())
451
- }));
452
- var _a$1, _b$1, _c$1, _d$1;
453
- const PlayIconBox = styled__default.default(ui.Box)(_a$1 || (_a$1 = __template$1(["\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"])), _ref3 => {
454
- let {
455
- theme
456
- } = _ref3;
457
- return theme.sanity.color.card.enabled.bg;
458
- });
459
- const Root$1 = styled__default.default(ui.Flex)(_b$1 || (_b$1 = __template$1(["\n &:hover {\n ", " {\n &:before {\n opacity: 1;\n }\n }\n }\n"])), PlayIconBox);
460
- const PosterCard = styled__default.default(ui.Card)(_c$1 || (_c$1 = __template$1(["\n width: 100%;\n padding-bottom: calc(9 / 16 * 100%);\n position: relative;\n"])));
461
- const Poster = styled__default.default.img(_d$1 || (_d$1 = __template$1(["\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"])));
305
+ const PlayIconBox = styledComponents.styled(ui.Box)`
306
+ position: absolute;
307
+ top: 50%;
308
+ left: 50%;
309
+ transform: translate(-50%, -50%);
310
+
311
+ &:before {
312
+ content: '';
313
+ position: absolute;
314
+ top: 50%;
315
+ left: 50%;
316
+ transform: translate(-50%, -50%);
317
+ width: 2.75em;
318
+ height: 2.75em;
319
+ border-radius: 50%;
320
+ background: ${({ theme }) => theme.sanity.color.card.enabled.bg};
321
+ opacity: 0.75;
322
+ }
323
+ `, Root$1 = styledComponents.styled(ui.Flex)`
324
+ &:hover {
325
+ ${PlayIconBox} {
326
+ &:before {
327
+ opacity: 1;
328
+ }
329
+ }
330
+ }
331
+ `, PosterCard = styledComponents.styled(ui.Card)`
332
+ width: 100%;
333
+ padding-bottom: calc(9 / 16 * 100%);
334
+ position: relative;
335
+ `, Poster = styledComponents.styled.img`
336
+ position: absolute;
337
+ top: 0;
338
+ left: 0;
339
+ height: 100%;
340
+ width: 100%;
341
+ object-fit: cover;
342
+ display: block;
343
+
344
+ &:not([src]) {
345
+ display: none;
346
+ }
347
+ `;
462
348
  function Tutorial(props) {
463
- const {
464
- title,
465
- posterURL,
466
- showPlayIcon,
467
- href,
468
- presenterName,
469
- presenterSubtitle
470
- } = props;
471
- return /* @__PURE__ */jsxRuntime.jsx(Root$1, {
472
- flex: 1,
473
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
349
+ const { title, posterURL, showPlayIcon, href, presenterName, presenterSubtitle } = props;
350
+ return /* @__PURE__ */ jsxRuntime.jsx(Root$1, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
351
+ ui.Card,
352
+ {
474
353
  sizing: "border",
475
354
  flex: 1,
476
355
  padding: 2,
@@ -479,55 +358,22 @@ function Tutorial(props) {
479
358
  href,
480
359
  target: "_blank",
481
360
  rel: "noopener noreferrer",
482
- style: {
483
- position: "relative"
484
- },
485
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
486
- direction: "column",
487
- style: {
488
- height: "100%"
489
- },
490
- children: [posterURL && /* @__PURE__ */jsxRuntime.jsxs(PosterCard, {
491
- marginBottom: 1,
492
- children: [/* @__PURE__ */jsxRuntime.jsx(Poster, {
493
- src: posterURL
494
- }), showPlayIcon && /* @__PURE__ */jsxRuntime.jsx(PlayIconBox, {
495
- display: "flex",
496
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
497
- align: "center",
498
- children: /* @__PURE__ */jsxRuntime.jsx(icons.PlayIcon, {})
499
- })
500
- })]
501
- }), /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
502
- direction: "column",
503
- justify: "space-between",
504
- paddingY: 2,
505
- flex: 1,
506
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Heading, {
507
- as: "h3",
508
- size: 1,
509
- children: title
510
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
511
- marginTop: 4,
512
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
513
- space: 2,
514
- flex: 1,
515
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
516
- size: 1,
517
- children: presenterName
518
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
519
- size: 0,
520
- style: {
521
- opacity: 0.7
522
- },
523
- children: presenterSubtitle
524
- })]
525
- })
526
- })]
527
- })]
528
- })
529
- })
530
- });
361
+ style: { position: "relative" },
362
+ children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", style: { height: "100%" }, children: [
363
+ posterURL && /* @__PURE__ */ jsxRuntime.jsxs(PosterCard, { marginBottom: 1, children: [
364
+ /* @__PURE__ */ jsxRuntime.jsx(Poster, { src: posterURL }),
365
+ showPlayIcon && /* @__PURE__ */ jsxRuntime.jsx(PlayIconBox, { display: "flex", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(icons.PlayIcon, {}) }) })
366
+ ] }),
367
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", justify: "space-between", paddingY: 2, flex: 1, children: [
368
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { as: "h3", size: 1, children: title }),
369
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, flex: 1, children: [
370
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: presenterName }),
371
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 0, style: { opacity: 0.7 }, children: presenterSubtitle })
372
+ ] }) })
373
+ ] })
374
+ ] })
375
+ }
376
+ ) });
531
377
  }
532
378
  const tutorialsProjectConfig = {
533
379
  projectId: "3do82whm",
@@ -535,230 +381,195 @@ const tutorialsProjectConfig = {
535
381
  };
536
382
  function useDataAdapter() {
537
383
  const versionedClient = useVersionedClient();
538
- return react.useMemo(() => ({
539
- getFeed: templateRepoId => {
540
- const uri = templateRepoId ? "/addons/dashboard?templateRepoId=".concat(templateRepoId) : "/addons/dashboard";
541
- return versionedClient.observable.request({
542
- uri,
543
- withCredentials: false
544
- });
545
- },
546
- urlBuilder: imageUrlBuilder__default.default(tutorialsProjectConfig)
547
- }), [versionedClient]);
384
+ return react.useMemo(
385
+ () => ({
386
+ getFeed: (templateRepoId) => {
387
+ const uri = templateRepoId ? `/addons/dashboard?templateRepoId=${templateRepoId}` : "/addons/dashboard";
388
+ return versionedClient.observable.request({
389
+ uri,
390
+ tag: "dashboard.sanity-tutorials",
391
+ withCredentials: !1
392
+ });
393
+ },
394
+ urlBuilder: imageUrlBuilder__default.default(tutorialsProjectConfig)
395
+ }),
396
+ [versionedClient]
397
+ );
548
398
  }
549
399
  function createUrl(slug, type) {
550
- if (type === "tutorial") {
551
- return "https://www.sanity.io/docs/tutorials/".concat(slug.current);
552
- } else if (type === "guide") {
553
- return "https://www.sanity.io/docs/guides/".concat(slug.current);
554
- }
555
- return false;
400
+ return type === "tutorial" ? `https://www.sanity.io/docs/tutorials/${slug.current}` : type === "guide" ? `https://www.sanity.io/docs/guides/${slug.current}` : !1;
556
401
  }
557
402
  function SanityTutorials(props) {
558
- const {
559
- templateRepoId
560
- } = props;
561
- const [feedItems, setFeedItems] = react.useState([]);
562
- const {
563
- getFeed,
564
- urlBuilder
565
- } = useDataAdapter();
566
- react.useEffect(() => {
567
- const subscription = getFeed(templateRepoId).subscribe(response => {
403
+ const { templateRepoId } = props, [feedItems, setFeedItems] = react.useState([]), { getFeed, urlBuilder } = useDataAdapter();
404
+ return react.useEffect(() => {
405
+ const subscription = getFeed(templateRepoId).subscribe((response) => {
568
406
  setFeedItems(response.items);
569
407
  });
570
408
  return () => {
571
409
  subscription.unsubscribe();
572
410
  };
573
- }, [setFeedItems, getFeed, templateRepoId]);
574
- const title = "Learn about Sanity";
575
- return /* @__PURE__ */jsxRuntime.jsx(DashboardWidgetContainer, {
576
- header: title,
577
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
578
- as: "ul",
579
- overflow: "auto",
580
- align: "stretch",
581
- paddingY: 2,
582
- children: feedItems == null ? void 0 : feedItems.map((feedItem, index) => {
583
- var _a;
584
- if (!feedItem.title || !feedItem.guideOrTutorial && !feedItem.externalLink) {
585
- return null;
586
- }
587
- const presenter = feedItem.presenter || ((_a = feedItem.guideOrTutorial) == null ? void 0 : _a.presenter) || {};
588
- const subtitle = feedItem.category;
589
- const {
590
- guideOrTutorial = {}
591
- } = feedItem;
592
- const href = (guideOrTutorial.slug ? createUrl(guideOrTutorial.slug, guideOrTutorial._type) : feedItem.externalLink) || feedItem.externalLink;
593
- return /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
594
- as: "li",
595
- paddingRight: index < (feedItems == null ? void 0 : feedItems.length) - 1 ? 1 : 3,
596
- paddingLeft: index === 0 ? 3 : 0,
597
- align: "stretch",
598
- style: {
599
- minWidth: 272,
600
- width: "30%"
601
- },
602
- children: /* @__PURE__ */jsxRuntime.jsx(Tutorial, {
411
+ }, [setFeedItems, getFeed, templateRepoId]), /* @__PURE__ */ jsxRuntime.jsx(DashboardWidgetContainer, { header: "Learn about Sanity", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { as: "ul", overflow: "auto", align: "stretch", paddingY: 2, children: feedItems == null ? void 0 : feedItems.map((feedItem, index) => {
412
+ var _a;
413
+ if (!feedItem.title || !feedItem.guideOrTutorial && !feedItem.externalLink)
414
+ return null;
415
+ const presenter = feedItem.presenter || ((_a = feedItem.guideOrTutorial) == null ? void 0 : _a.presenter) || {}, subtitle = feedItem.category, { guideOrTutorial = {} } = feedItem, href = (guideOrTutorial.slug ? createUrl(guideOrTutorial.slug, guideOrTutorial._type) : feedItem.externalLink) || feedItem.externalLink;
416
+ return /* @__PURE__ */ jsxRuntime.jsx(
417
+ ui.Flex,
418
+ {
419
+ as: "li",
420
+ paddingRight: index < (feedItems == null ? void 0 : feedItems.length) - 1 ? 1 : 3,
421
+ paddingLeft: index === 0 ? 3 : 0,
422
+ align: "stretch",
423
+ style: { minWidth: 272, width: "30%" },
424
+ children: /* @__PURE__ */ jsxRuntime.jsx(
425
+ Tutorial,
426
+ {
603
427
  title: feedItem.title,
604
428
  href: href != null ? href : "",
605
429
  presenterName: presenter.name,
606
430
  presenterSubtitle: subtitle,
607
431
  showPlayIcon: feedItem.hasVideo,
608
432
  posterURL: feedItem.poster ? urlBuilder.image(feedItem.poster).height(360).url() : void 0
609
- })
610
- }, feedItem._id);
611
- })
612
- })
613
- });
433
+ }
434
+ )
435
+ },
436
+ feedItem._id
437
+ );
438
+ }) }) });
614
439
  }
615
440
  function sanityTutorialsWidget(config) {
616
441
  var _a;
617
442
  return {
618
443
  name: "sanity-tutorials",
619
444
  component: SanityTutorials,
620
- layout: (_a = config == null ? void 0 : config.layout) != null ? _a : {
621
- width: "full"
622
- }
445
+ layout: (_a = config == null ? void 0 : config.layout) != null ? _a : { width: "full" }
623
446
  };
624
447
  }
625
448
  function DashboardLayout(props) {
626
- return /* @__PURE__ */jsxRuntime.jsx(ui.Container, {
627
- width: 4,
628
- padding: 4,
629
- sizing: "border",
630
- style: {
631
- height: "100%",
632
- overflowY: "auto"
633
- },
634
- children: props.children
635
- });
449
+ return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { width: 4, padding: 4, sizing: "border", style: { height: "100%", overflowY: "auto" }, children: props.children });
636
450
  }
637
- var __freeze = Object.freeze;
638
- var __defProp = Object.defineProperty;
639
- var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", {
640
- value: __freeze(raw || cooked.slice())
641
- }));
642
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
643
451
  const media = {
644
- small: function () {
645
- return styled.css(_a || (_a = __template(["\n @media (min-width: ", "px) {\n ", "\n }\n "])), _ref4 => {
646
- let {
647
- theme
648
- } = _ref4;
649
- return theme.sanity.media[0];
650
- }, styled.css(...arguments));
651
- },
652
- medium: function () {
653
- return styled.css(_b || (_b = __template(["\n @media (min-width: ", "px) {\n ", "\n }\n "])), _ref5 => {
654
- let {
655
- theme
656
- } = _ref5;
657
- return theme.sanity.media[2];
658
- }, styled.css(...arguments));
452
+ small: (...args) => styledComponents.css`
453
+ @media (min-width: ${({ theme }) => theme.sanity.media[0]}px) {
454
+ ${styledComponents.css(...args)}
455
+ }
456
+ `,
457
+ medium: (...args) => styledComponents.css`
458
+ @media (min-width: ${({ theme }) => theme.sanity.media[2]}px) {
459
+ ${styledComponents.css(...args)}
460
+ }
461
+ `
462
+ }, Root = styledComponents.styled(ui.Grid)`
463
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
464
+
465
+ & > div {
466
+ overflow: hidden;
659
467
  }
660
- };
661
- const Root = styled__default.default(ui.Grid)(_k || (_k = __template(["\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(_c || (_c = __template(["\n grid-column: span 2;\n "]))), media.small(_d || (_d = __template(["\n grid-column: span 2;\n "]))), media.medium(_e || (_e = __template(["\n grid-column: span 3;\n "]))), media.small(_f || (_f = __template(["\n grid-column: 1 / -1;\n "]))), media.small(_g || (_g = __template(["\n grid-row: span 2;\n "]))), media.small(_h || (_h = __template(["\n grid-row: span 2;\n "]))), media.medium(_i || (_i = __template(["\n grid-row: span 3;\n "]))), media.medium(_j || (_j = __template(["\n grid-row: 1 / -1;\n "]))));
662
- const NO_WIDGETS = [];
663
- const NO_LAYOUT = {};
468
+
469
+ & > div[data-width='medium'] {
470
+ ${media.small`
471
+ grid-column: span 2;
472
+ `}
473
+ }
474
+
475
+ & > div[data-width='large'] {
476
+ ${media.small`
477
+ grid-column: span 2;
478
+ `}
479
+
480
+ ${media.medium`
481
+ grid-column: span 3;
482
+ `}
483
+ }
484
+
485
+ & > div[data-width='full'] {
486
+ ${media.small`
487
+ grid-column: 1 / -1;
488
+ `}
489
+ }
490
+
491
+ & > div[data-height='medium'] {
492
+ ${media.small`
493
+ grid-row: span 2;
494
+ `}
495
+ }
496
+
497
+ & > div[data-height='large'] {
498
+ ${media.small`
499
+ grid-row: span 2;
500
+ `}
501
+
502
+ ${media.medium`
503
+ grid-row: span 3;
504
+ `}
505
+ }
506
+
507
+ & > div[data-height='full'] {
508
+ ${media.medium`
509
+ grid-row: 1 / -1;
510
+ `}
511
+ }
512
+ `, NO_WIDGETS = [], NO_LAYOUT = {};
664
513
  function WidgetGroup(props) {
665
514
  const {
666
- config: {
667
- layout = NO_LAYOUT,
668
- widgets = NO_WIDGETS
669
- }
515
+ config: { layout = NO_LAYOUT, widgets = NO_WIDGETS }
670
516
  } = props;
671
- return /* @__PURE__ */jsxRuntime.jsxs(Root, {
672
- autoFlow: "row dense",
673
- "data-width": layout.width || "auto",
674
- "data-height": layout.height || "auto",
675
- gap: 4,
676
- children: [widgets.length ? null : /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
677
- padding: 4,
678
- shadow: 1,
679
- tone: "primary",
680
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
681
- align: "center",
682
- children: "Add some widgets to populate this space."
683
- })
684
- }), widgets.map((widgetConfig, index) => {
685
- if (widgetConfig.type === "__experimental_group") {
686
- return /* @__PURE__ */jsxRuntime.jsx(WidgetGroup, {
687
- config: widgetConfig
688
- }, index);
689
- }
690
- if (widgetConfig.component) {
691
- return /* @__PURE__ */jsxRuntime.jsx(WidgetContainer, {
692
- ...widgetConfig
693
- }, index);
694
- }
695
- return /* @__PURE__ */jsxRuntime.jsxs(ui.Box, {
696
- children: [widgetConfig.name, " is missing widget component"]
697
- }, index);
698
- })]
699
- });
517
+ return /* @__PURE__ */ jsxRuntime.jsxs(
518
+ Root,
519
+ {
520
+ autoFlow: "row dense",
521
+ "data-width": layout.width || "auto",
522
+ "data-height": layout.height || "auto",
523
+ gap: 4,
524
+ children: [
525
+ widgets.length ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 4, shadow: 1, tone: "primary", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { align: "center", children: "Add some widgets to populate this space." }) }),
526
+ widgets.map((widgetConfig, index) => widgetConfig.type === "__experimental_group" ? /* @__PURE__ */ jsxRuntime.jsx(WidgetGroup, { config: widgetConfig }, index) : widgetConfig.component ? /* @__PURE__ */ jsxRuntime.jsx(WidgetContainer, { ...widgetConfig }, index) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { children: [
527
+ widgetConfig.name,
528
+ " is missing widget component"
529
+ ] }, index))
530
+ ]
531
+ }
532
+ );
700
533
  }
701
- function Dashboard(_ref6) {
702
- let {
703
- config
704
- } = _ref6;
705
- if (!config) {
706
- return null;
707
- }
708
- return /* @__PURE__ */jsxRuntime.jsx(DashboardContext.Provider, {
709
- value: config,
710
- children: /* @__PURE__ */jsxRuntime.jsx(DashboardLayout, {
711
- children: /* @__PURE__ */jsxRuntime.jsx(WidgetGroup, {
712
- config
713
- })
714
- })
715
- });
534
+ function Dashboard({ config }) {
535
+ return config ? /* @__PURE__ */ jsxRuntime.jsx(DashboardContext.Provider, { value: config, children: /* @__PURE__ */ jsxRuntime.jsx(DashboardLayout, { children: /* @__PURE__ */ jsxRuntime.jsx(WidgetGroup, { config }) }) }) : null;
716
536
  }
717
537
  const strokeStyle = {
718
538
  stroke: "currentColor",
719
539
  strokeWidth: 1.2
720
- };
721
- const DashboardIcon = () => /* @__PURE__ */jsxRuntime.jsxs("svg", {
722
- "data-sanity-icon": true,
723
- viewBox: "0 0 25 25",
724
- fill: "none",
725
- xmlns: "http://www.w3.org/2000/svg",
726
- preserveAspectRatio: "xMidYMid",
727
- width: "1em",
728
- height: "1em",
729
- children: [/* @__PURE__ */jsxRuntime.jsx("path", {
730
- d: "M19.5 19.5H5.5V5.5H19.5V19.5Z",
731
- style: strokeStyle
732
- }), /* @__PURE__ */jsxRuntime.jsx("path", {
733
- d: "M5.5 12.5H19.5",
734
- style: strokeStyle
735
- }), /* @__PURE__ */jsxRuntime.jsx("path", {
736
- d: "M14.5 19.5V12.5M10.5 12.5V5.5",
737
- style: strokeStyle
738
- })]
739
- });
740
- const dashboardTool = sanity.definePlugin(function () {
741
- let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
540
+ }, DashboardIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
541
+ "svg",
542
+ {
543
+ "data-sanity-icon": !0,
544
+ viewBox: "0 0 25 25",
545
+ fill: "none",
546
+ xmlns: "http://www.w3.org/2000/svg",
547
+ preserveAspectRatio: "xMidYMid",
548
+ width: "1em",
549
+ height: "1em",
550
+ children: [
551
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.5 19.5H5.5V5.5H19.5V19.5Z", style: strokeStyle }),
552
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.5 12.5H19.5", style: strokeStyle }),
553
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.5 19.5V12.5M10.5 12.5V5.5", style: strokeStyle })
554
+ ]
555
+ }
556
+ ), dashboardTool = sanity.definePlugin((config = {}) => {
742
557
  var _a, _b, _c, _d, _e;
743
558
  const pluginConfig = {
744
559
  layout: (_a = config.defaultLayout) != null ? _a : {},
745
560
  widgets: (_b = config.widgets) != null ? _b : []
746
- };
747
- const title = (_c = config.title) != null ? _c : "Dashboard";
748
- const name = (_d = config.name) != null ? _d : "dashboard";
749
- const icon = (_e = config.icon) != null ? _e : DashboardIcon;
561
+ }, title = (_c = config.title) != null ? _c : "Dashboard", name = (_d = config.name) != null ? _d : "dashboard", icon = (_e = config.icon) != null ? _e : DashboardIcon;
750
562
  return {
751
563
  name: "dashboard",
752
- tools: (prev, context) => {
753
- return [...prev, {
564
+ tools: (prev, context) => [
565
+ ...prev,
566
+ {
754
567
  title,
755
568
  name,
756
569
  icon,
757
- component: () => /* @__PURE__ */jsxRuntime.jsx(Dashboard, {
758
- config: pluginConfig
759
- })
760
- }];
761
- }
570
+ component: () => /* @__PURE__ */ jsxRuntime.jsx(Dashboard, { config: pluginConfig })
571
+ }
572
+ ]
762
573
  };
763
574
  });
764
575
  exports.DashboardWidgetContainer = DashboardWidgetContainer;