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