@sanity/dashboard 3.1.6 → 4.1.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 (22) 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 +460 -645
  5. package/lib/index.esm.js.map +1 -1
  6. package/lib/index.js +449 -654
  7. package/lib/index.js.map +1 -1
  8. package/lib/index.mjs +568 -0
  9. package/lib/index.mjs.map +1 -0
  10. package/package.json +43 -39
  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 +33 -45
  17. package/src/widgets/projectInfo/index.ts +1 -1
  18. package/src/widgets/projectInfo/types.ts +28 -0
  19. package/src/widgets/projectUsers/ProjectUser.tsx +45 -0
  20. package/src/widgets/projectUsers/ProjectUsers.tsx +28 -49
  21. package/src/widgets/sanityTutorials/Tutorial.tsx +1 -1
  22. package/src/widgets/sanityTutorials/dataAdapter.ts +2 -1
package/lib/index.js CHANGED
@@ -1,476 +1,342 @@
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-08-01" });
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
- function getGraphQlUrl(projectId, dataset) {
92
- return "https://".concat(projectId, ".api.sanity.io/v1/graphql/").concat(dataset, "/default");
67
+ function getGraphQLUrl(projectId, dataset) {
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, [studioApps, setStudioApps] = 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: "/user-applications", tag: "dashboard.project-info" }).subscribe({
83
+ next: (result) => setStudioApps(result.filter((app) => app.type === "studio")),
84
+ error: (error) => {
85
+ console.error("Error while resolving user applications", error), setStudioApps({
86
+ error: "Something went wrong while resolving user applications. See console."
144
87
  });
145
88
  }
146
- }
147
- }));
148
- return () => {
149
- subscriptions.forEach(s => s.unsubscribe());
89
+ })
90
+ ), subscriptions.push(
91
+ versionedClient.observable.request({
92
+ method: "HEAD",
93
+ uri: `/graphql/${dataset}/default`,
94
+ tag: "dashboard.project-info.graphql-api"
95
+ }).subscribe({
96
+ next: () => setGraphQLApi(getGraphQLUrl(projectId, dataset)),
97
+ error: (error) => {
98
+ error.statusCode === 404 ? setGraphQLApi(void 0) : (console.error("Error while looking for graphQLApi", error), setGraphQLApi({
99
+ error: "Something went wrong while looking up graphQLApi. See console."
100
+ }));
101
+ }
102
+ })
103
+ ), () => {
104
+ subscriptions.forEach((s) => s.unsubscribe());
150
105
  };
151
- }, [dataset, projectId, versionedClient, setGraphQlApi, setStudioHost]);
106
+ }, [dataset, projectId, versionedClient, setGraphQLApi]);
152
107
  const assembleTableRows = react.useMemo(() => {
153
- 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);
108
+ let result = [
109
+ {
110
+ title: "Sanity project",
111
+ rows: [
112
+ { title: "Project ID", value: projectId },
113
+ { title: "Dataset", value: dataset }
114
+ ]
191
115
  }
192
- });
193
- Object.keys(otherStuff).forEach(category => {
194
- result.push({
195
- title: category,
196
- rows: otherStuff[category]
116
+ ];
117
+ const apps = data.filter((item) => item.category === "apps");
118
+ (Array.isArray(studioApps) ? studioApps : []).forEach((app) => {
119
+ apps.push({
120
+ title: app.title || "Studio",
121
+ value: app.urlType === "internal" ? `https://${app.appHost}.sanity.studio` : app.appHost
197
122
  });
198
- });
199
- return result;
200
- }, [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
- });
123
+ }), apps.length > 0 && (result = result.concat([{ title: "Apps", rows: apps }])), result = result.concat(
124
+ [
125
+ {
126
+ title: "APIs",
127
+ rows: [
128
+ { title: "GROQ", value: getGroqUrl(projectId, dataset) },
129
+ {
130
+ title: "GraphQL",
131
+ value: (typeof graphQLApi == "object" ? "Error" : graphQLApi) ?? "Not deployed"
132
+ }
133
+ ]
134
+ }
135
+ ],
136
+ data.filter((item) => item.category === "apis")
137
+ );
138
+ const otherStuff = {};
139
+ return data.forEach((item) => {
140
+ item.category && item.category !== "apps" && item.category !== "apis" && (otherStuff[item.category] || (otherStuff[item.category] = []), otherStuff[item.category].push(item));
141
+ }), Object.keys(otherStuff).forEach((category) => {
142
+ result.push({ title: category, rows: otherStuff[category] });
143
+ }), result;
144
+ }, [graphQLApi, studioApps, projectId, dataset, data]);
145
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
146
+ __experimental_before.map((widgetConfig, idx) => /* @__PURE__ */ jsxRuntime.jsx(WidgetContainer, { ...widgetConfig }, idx)),
147
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { height: "fill", marginTop: __experimental_before?.length > 0 ? 4 : 0, children: /* @__PURE__ */ jsxRuntime.jsx(
148
+ DashboardWidgetContainer,
149
+ {
150
+ footer: /* @__PURE__ */ jsxRuntime.jsx(
151
+ ui.Button,
152
+ {
153
+ style: { width: "100%" },
154
+ paddingX: 2,
155
+ paddingY: 4,
156
+ mode: "bleed",
157
+ tone: "primary",
158
+ text: "Manage project",
159
+ as: "a",
160
+ href: getManageUrl(projectId)
161
+ }
162
+ ),
163
+ children: /* @__PURE__ */ jsxRuntime.jsx(
164
+ ui.Card,
165
+ {
166
+ paddingY: 4,
167
+ radius: 2,
168
+ role: "table",
169
+ "aria-label": "Project info",
170
+ "aria-describedby": "project_info_table",
171
+ children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 4, children: [
172
+ /* @__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" }) }),
173
+ assembleTableRows.map((item) => !item || !item.rows ? null : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
174
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { borderBottom: !0, padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: 0, muted: !0, role: "columnheader", children: item.title }) }),
175
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 4, paddingX: 3, role: "rowgroup", children: item.rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { columns: 2, role: "row", children: [
176
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { weight: "medium", role: "rowheader", children: row.title }),
177
+ typeof row.value == "object" && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: row.value?.error }),
178
+ 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 }) })
179
+ ] }, `${row.value}-${row.title}`)) })
180
+ ] }, item.title))
181
+ ] })
182
+ }
183
+ )
184
+ }
185
+ ) })
186
+ ] });
298
187
  }
299
188
  function projectInfoWidget(config) {
300
- var _a;
301
189
  return {
302
190
  name: "project-info",
303
191
  component: ProjectInfo,
304
- layout: (_a = config == null ? void 0 : config.layout) != null ? _a : {
305
- width: "medium"
306
- }
192
+ layout: config?.layout ?? { width: "medium" }
307
193
  };
308
194
  }
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"])));
195
+ const Root$2 = styledComponents.styled(ui.Flex)`
196
+ height: ${ui.rem(33)}; // 33 = PREVIEW_SIZES.default.media.height
197
+ box-sizing: content-box;
198
+ `;
199
+ function ProjectUser({ user, isRobot, roles }) {
200
+ const listFormat = sanity.useListFormat({ style: "narrow" });
201
+ return /* @__PURE__ */ jsxRuntime.jsx(Root$2, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", flex: 1, gap: 2, children: [
202
+ /* @__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 }) }),
203
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { flex: 1, space: 2, children: [
204
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, style: { color: "inherit" }, textOverflow: "ellipsis", weight: "medium", children: user.displayName }),
205
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, textOverflow: "ellipsis", children: listFormat.format(roles) })
206
+ ] })
207
+ ] }) });
208
+ }
316
209
  function getInviteUrl(projectId) {
317
- return "https://manage.sanity.io/projects/".concat(projectId, "/team/invite");
210
+ return `https://manage.sanity.io/projects/${projectId}/members`;
318
211
  }
319
212
  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)));
213
+ const [project, setProject] = react.useState(), [users, setUsers] = react.useState(), [error, setError] = react.useState(), userStore = sanity.useUserStore(), versionedClient = useVersionedClient(), fetchData = react.useCallback(() => {
214
+ const { projectId } = versionedClient.config(), subscription = versionedClient.observable.request({
215
+ uri: `/projects/${projectId}`,
216
+ tag: "dashboard.project-users"
217
+ }).pipe(
218
+ operators.switchMap(
219
+ (_project) => rxjs.from(userStore.getUsers(_project.members.map((mem) => mem.id))).pipe(
220
+ operators.map((_users) => ({ project: _project, users: _users }))
221
+ )
222
+ )
223
+ ).subscribe({
224
+ next: ({ users: _users, project: _project }) => {
225
+ setProject(_project), setUsers(
226
+ (Array.isArray(_users) ? _users : [_users]).sort(
227
+ (userA, userB) => sortUsersByRobotStatus(userA, userB, _project)
228
+ )
229
+ );
342
230
  },
343
- error: e => setError(e)
231
+ error: (e) => setError(e)
344
232
  });
345
233
  return () => subscription.unsubscribe();
346
234
  }, [userStore, versionedClient]);
347
235
  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, {
236
+ const handleRetryFetch = react.useCallback(() => fetchData(), [fetchData]), isLoading = !users || !project;
237
+ return error ? /* @__PURE__ */ jsxRuntime.jsx(DashboardWidgetContainer, { header: "Project users", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { children: [
238
+ "Something went wrong while fetching data. You could",
239
+ " ",
240
+ /* @__PURE__ */ jsxRuntime.jsx("a", { onClick: handleRetryFetch, title: "Retry users fetch", style: { cursor: "pointer" }, children: "retry" }),
241
+ "..?"
242
+ ] }) }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
243
+ DashboardWidgetContainer,
244
+ {
352
245
  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"
246
+ footer: /* @__PURE__ */ jsxRuntime.jsx(
247
+ ui.Button,
248
+ {
249
+ style: { width: "100%" },
250
+ paddingX: 2,
251
+ paddingY: 4,
252
+ mode: "bleed",
253
+ tone: "primary",
254
+ text: "Manage members",
255
+ as: "a",
256
+ loading: isLoading,
257
+ href: isLoading ? void 0 : getInviteUrl(project.id)
258
+ }
259
+ ),
260
+ children: [
261
+ isLoading && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingY: 5, paddingX: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 4, children: [
262
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { align: "center", muted: !0, size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {}) }),
263
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { align: "center", size: 1, muted: !0, children: "Loading items\u2026" })
264
+ ] }) }),
265
+ !isLoading && /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 3, padding: 3, children: users?.map((user) => {
266
+ const membership = project.members.find((member) => member.id === user.id);
267
+ return /* @__PURE__ */ jsxRuntime.jsx(
268
+ ProjectUser,
269
+ {
270
+ user,
271
+ isRobot: membership?.isRobot ?? !1,
272
+ roles: membership?.roles.map((role) => role.title) || []
361
273
  },
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
- });
274
+ user.id
275
+ );
276
+ }) })
277
+ ]
278
+ }
279
+ );
425
280
  }
426
281
  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;
282
+ const { members } = project, membershipA = members.find((member) => member.id === userA?.id), membershipB = members.find((member) => member.id === userB?.id);
283
+ return membershipA?.isRobot === membershipB?.isRobot ? (membershipA?.createdAt || "") > (membershipB?.createdAt || "") ? 1 : -1 : membershipA?.isRobot ? 1 : -1;
439
284
  }
440
285
  function projectUsersWidget(config) {
441
286
  return {
442
287
  name: "project-info",
443
288
  component: ProjectUsers,
444
- layout: config == null ? void 0 : config.layout
289
+ layout: config?.layout
445
290
  };
446
291
  }
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"])));
292
+ const PlayIconBox = styledComponents.styled(ui.Box)`
293
+ position: absolute;
294
+ top: 50%;
295
+ left: 50%;
296
+ transform: translate(-50%, -50%);
297
+
298
+ &:before {
299
+ content: '';
300
+ position: absolute;
301
+ top: 50%;
302
+ left: 50%;
303
+ transform: translate(-50%, -50%);
304
+ width: 2.75em;
305
+ height: 2.75em;
306
+ border-radius: 50%;
307
+ background: ${({ theme }) => theme.sanity.color.card.enabled.bg};
308
+ opacity: 0.75;
309
+ }
310
+ `, Root$1 = styledComponents.styled(ui.Flex)`
311
+ &:hover {
312
+ ${PlayIconBox} {
313
+ &:before {
314
+ opacity: 1;
315
+ }
316
+ }
317
+ }
318
+ `, PosterCard = styledComponents.styled(ui.Card)`
319
+ width: 100%;
320
+ padding-bottom: calc(9 / 16 * 100%);
321
+ position: relative;
322
+ `, Poster = styledComponents.styled.img`
323
+ position: absolute;
324
+ top: 0;
325
+ left: 0;
326
+ height: 100%;
327
+ width: 100%;
328
+ object-fit: cover;
329
+ display: block;
330
+
331
+ &:not([src]) {
332
+ display: none;
333
+ }
334
+ `;
462
335
  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, {
336
+ const { title, posterURL, showPlayIcon, href, presenterName, presenterSubtitle } = props;
337
+ return /* @__PURE__ */ jsxRuntime.jsx(Root$1, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
338
+ ui.Card,
339
+ {
474
340
  sizing: "border",
475
341
  flex: 1,
476
342
  padding: 2,
@@ -479,55 +345,22 @@ function Tutorial(props) {
479
345
  href,
480
346
  target: "_blank",
481
347
  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
- });
348
+ style: { position: "relative" },
349
+ children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", style: { height: "100%" }, children: [
350
+ posterURL && /* @__PURE__ */ jsxRuntime.jsxs(PosterCard, { marginBottom: 1, children: [
351
+ /* @__PURE__ */ jsxRuntime.jsx(Poster, { src: posterURL }),
352
+ showPlayIcon && /* @__PURE__ */ jsxRuntime.jsx(PlayIconBox, { display: "flex", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(icons.PlayIcon, {}) }) })
353
+ ] }),
354
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", justify: "space-between", paddingY: 2, flex: 1, children: [
355
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { as: "h3", size: 1, children: title }),
356
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, flex: 1, children: [
357
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: presenterName }),
358
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 0, style: { opacity: 0.7 }, children: presenterSubtitle })
359
+ ] }) })
360
+ ] })
361
+ ] })
362
+ }
363
+ ) });
531
364
  }
532
365
  const tutorialsProjectConfig = {
533
366
  projectId: "3do82whm",
@@ -535,230 +368,192 @@ const tutorialsProjectConfig = {
535
368
  };
536
369
  function useDataAdapter() {
537
370
  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]);
371
+ return react.useMemo(
372
+ () => ({
373
+ getFeed: (templateRepoId) => {
374
+ const uri = templateRepoId ? `/addons/dashboard?templateRepoId=${templateRepoId}` : "/addons/dashboard";
375
+ return versionedClient.observable.request({
376
+ uri,
377
+ tag: "dashboard.sanity-tutorials",
378
+ withCredentials: !1
379
+ });
380
+ },
381
+ urlBuilder: imageUrlBuilder__default.default(tutorialsProjectConfig)
382
+ }),
383
+ [versionedClient]
384
+ );
548
385
  }
549
386
  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;
387
+ return type === "tutorial" ? `https://www.sanity.io/docs/tutorials/${slug.current}` : type === "guide" ? `https://www.sanity.io/docs/guides/${slug.current}` : !1;
556
388
  }
557
389
  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 => {
390
+ const { templateRepoId } = props, [feedItems, setFeedItems] = react.useState([]), { getFeed, urlBuilder } = useDataAdapter();
391
+ return react.useEffect(() => {
392
+ const subscription = getFeed(templateRepoId).subscribe((response) => {
568
393
  setFeedItems(response.items);
569
394
  });
570
395
  return () => {
571
396
  subscription.unsubscribe();
572
397
  };
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, {
398
+ }, [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?.map((feedItem, index) => {
399
+ if (!feedItem.title || !feedItem.guideOrTutorial && !feedItem.externalLink)
400
+ return null;
401
+ const presenter = feedItem.presenter || feedItem.guideOrTutorial?.presenter || {}, subtitle = feedItem.category, { guideOrTutorial = {} } = feedItem, href = (guideOrTutorial.slug ? createUrl(guideOrTutorial.slug, guideOrTutorial._type) : feedItem.externalLink) || feedItem.externalLink;
402
+ return /* @__PURE__ */ jsxRuntime.jsx(
403
+ ui.Flex,
404
+ {
405
+ as: "li",
406
+ paddingRight: index < feedItems?.length - 1 ? 1 : 3,
407
+ paddingLeft: index === 0 ? 3 : 0,
408
+ align: "stretch",
409
+ style: { minWidth: 272, width: "30%" },
410
+ children: /* @__PURE__ */ jsxRuntime.jsx(
411
+ Tutorial,
412
+ {
603
413
  title: feedItem.title,
604
- href: href != null ? href : "",
414
+ href: href ?? "",
605
415
  presenterName: presenter.name,
606
416
  presenterSubtitle: subtitle,
607
417
  showPlayIcon: feedItem.hasVideo,
608
418
  posterURL: feedItem.poster ? urlBuilder.image(feedItem.poster).height(360).url() : void 0
609
- })
610
- }, feedItem._id);
611
- })
612
- })
613
- });
419
+ }
420
+ )
421
+ },
422
+ feedItem._id
423
+ );
424
+ }) }) });
614
425
  }
615
426
  function sanityTutorialsWidget(config) {
616
- var _a;
617
427
  return {
618
428
  name: "sanity-tutorials",
619
429
  component: SanityTutorials,
620
- layout: (_a = config == null ? void 0 : config.layout) != null ? _a : {
621
- width: "full"
622
- }
430
+ layout: config?.layout ?? { width: "full" }
623
431
  };
624
432
  }
625
433
  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
- });
434
+ return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { width: 4, padding: 4, sizing: "border", style: { height: "100%", overflowY: "auto" }, children: props.children });
636
435
  }
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
436
  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));
437
+ small: (...args) => styledComponents.css`
438
+ @media (min-width: ${({ theme }) => theme.sanity.media[0]}px) {
439
+ ${styledComponents.css(...args)}
440
+ }
441
+ `,
442
+ medium: (...args) => styledComponents.css`
443
+ @media (min-width: ${({ theme }) => theme.sanity.media[2]}px) {
444
+ ${styledComponents.css(...args)}
445
+ }
446
+ `
447
+ }, Root = styledComponents.styled(ui.Grid)`
448
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
449
+
450
+ & > div {
451
+ overflow: hidden;
659
452
  }
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 = {};
453
+
454
+ & > div[data-width='medium'] {
455
+ ${media.small`
456
+ grid-column: span 2;
457
+ `}
458
+ }
459
+
460
+ & > div[data-width='large'] {
461
+ ${media.small`
462
+ grid-column: span 2;
463
+ `}
464
+
465
+ ${media.medium`
466
+ grid-column: span 3;
467
+ `}
468
+ }
469
+
470
+ & > div[data-width='full'] {
471
+ ${media.small`
472
+ grid-column: 1 / -1;
473
+ `}
474
+ }
475
+
476
+ & > div[data-height='medium'] {
477
+ ${media.small`
478
+ grid-row: span 2;
479
+ `}
480
+ }
481
+
482
+ & > div[data-height='large'] {
483
+ ${media.small`
484
+ grid-row: span 2;
485
+ `}
486
+
487
+ ${media.medium`
488
+ grid-row: span 3;
489
+ `}
490
+ }
491
+
492
+ & > div[data-height='full'] {
493
+ ${media.medium`
494
+ grid-row: 1 / -1;
495
+ `}
496
+ }
497
+ `, NO_WIDGETS = [], NO_LAYOUT = {};
664
498
  function WidgetGroup(props) {
665
499
  const {
666
- config: {
667
- layout = NO_LAYOUT,
668
- widgets = NO_WIDGETS
669
- }
500
+ config: { layout = NO_LAYOUT, widgets = NO_WIDGETS }
670
501
  } = 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
- });
502
+ return /* @__PURE__ */ jsxRuntime.jsxs(
503
+ Root,
504
+ {
505
+ autoFlow: "row dense",
506
+ "data-width": layout.width || "auto",
507
+ "data-height": layout.height || "auto",
508
+ gap: 4,
509
+ children: [
510
+ 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." }) }),
511
+ 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: [
512
+ widgetConfig.name,
513
+ " is missing widget component"
514
+ ] }, index))
515
+ ]
516
+ }
517
+ );
700
518
  }
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
- });
519
+ function Dashboard({ config }) {
520
+ return config ? /* @__PURE__ */ jsxRuntime.jsx(DashboardContext.Provider, { value: config, children: /* @__PURE__ */ jsxRuntime.jsx(DashboardLayout, { children: /* @__PURE__ */ jsxRuntime.jsx(WidgetGroup, { config }) }) }) : null;
716
521
  }
717
522
  const strokeStyle = {
718
523
  stroke: "currentColor",
719
524
  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] : {};
742
- var _a, _b, _c, _d, _e;
525
+ }, DashboardIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
526
+ "svg",
527
+ {
528
+ "data-sanity-icon": !0,
529
+ viewBox: "0 0 25 25",
530
+ fill: "none",
531
+ xmlns: "http://www.w3.org/2000/svg",
532
+ preserveAspectRatio: "xMidYMid",
533
+ width: "1em",
534
+ height: "1em",
535
+ children: [
536
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.5 19.5H5.5V5.5H19.5V19.5Z", style: strokeStyle }),
537
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.5 12.5H19.5", style: strokeStyle }),
538
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.5 19.5V12.5M10.5 12.5V5.5", style: strokeStyle })
539
+ ]
540
+ }
541
+ ), dashboardTool = sanity.definePlugin((config = {}) => {
743
542
  const pluginConfig = {
744
- layout: (_a = config.defaultLayout) != null ? _a : {},
745
- 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;
543
+ layout: config.defaultLayout ?? {},
544
+ widgets: config.widgets ?? []
545
+ }, title = config.title ?? "Dashboard", name = config.name ?? "dashboard", icon = config.icon ?? DashboardIcon;
750
546
  return {
751
547
  name: "dashboard",
752
- tools: (prev, context) => {
753
- return [...prev, {
548
+ tools: (prev, context) => [
549
+ ...prev,
550
+ {
754
551
  title,
755
552
  name,
756
553
  icon,
757
- component: () => /* @__PURE__ */jsxRuntime.jsx(Dashboard, {
758
- config: pluginConfig
759
- })
760
- }];
761
- }
554
+ component: () => /* @__PURE__ */ jsxRuntime.jsx(Dashboard, { config: pluginConfig })
555
+ }
556
+ ]
762
557
  };
763
558
  });
764
559
  exports.DashboardWidgetContainer = DashboardWidgetContainer;