next-sanity 3.0.4 → 3.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.
- package/README.md +17 -5
- package/dist/_chunks/NextStudioLoading-3a59a7d7.js +112 -0
- package/dist/_chunks/NextStudioLoading-3a59a7d7.js.map +1 -0
- package/dist/_chunks/NextStudioLoading-d668a359.cjs +116 -0
- package/dist/_chunks/NextStudioLoading-d668a359.cjs.map +1 -0
- package/dist/studio/index.cjs +39 -147
- package/dist/studio/index.cjs.map +1 -1
- package/dist/studio/index.d.ts +20 -18
- package/dist/studio/index.js +40 -144
- package/dist/studio/index.js.map +1 -1
- package/dist/studio/index.mjs +2 -4
- package/dist/studio/loading.cjs +10 -0
- package/dist/studio/loading.cjs.map +1 -0
- package/dist/studio/loading.d.ts +16 -0
- package/dist/studio/loading.js +7 -0
- package/dist/studio/loading.js.map +1 -0
- package/dist/studio/loading.mjs +5 -0
- package/dist/webhook.cjs.map +1 -1
- package/dist/webhook.js.map +1 -1
- package/package.json +19 -3
- package/src/studio/NextStudio.tsx +30 -26
- package/src/studio/NextStudioClientOnly.tsx +15 -0
- package/src/studio/NextStudioLoading.tsx +93 -0
- package/src/studio/index.ts +1 -2
- package/src/studio/loading.ts +1 -0
- package/src/webhook/parseBody.ts +1 -1
- package/dist/_chunks/LazyStudio-72ba8fe2.js +0 -2
- package/dist/_chunks/LazyStudio-72ba8fe2.js.map +0 -1
- package/dist/_chunks/LazyStudio-bf7e0fc9.cjs +0 -10
- package/dist/_chunks/LazyStudio-bf7e0fc9.cjs.map +0 -1
- package/src/studio/NextStudioFallback.tsx +0 -86
- package/src/studio/NextStudioSuspense.tsx +0 -15
package/README.md
CHANGED
|
@@ -224,14 +224,12 @@ export {PreviewSuspense as default} from 'next-sanity/preview'
|
|
|
224
224
|
`app/page.js`:
|
|
225
225
|
|
|
226
226
|
```jsx
|
|
227
|
-
import {lazy} from 'react'
|
|
228
227
|
import {previewData} from 'next/headers'
|
|
229
228
|
import PreviewSuspense from 'components/PreviewSuspense'
|
|
230
229
|
import {DocumentsCount, query} from 'components/DocumentsCount'
|
|
230
|
+
import PreviewDocumentsCount from 'components/PreviewDocumentsCount'
|
|
231
231
|
import {client} from 'lib/sanity.client'
|
|
232
232
|
|
|
233
|
-
const PreviewDocumentsCount = lazy(() => import('components/PreviewDocumentsCount'))
|
|
234
|
-
|
|
235
233
|
export default async function IndexPage() {
|
|
236
234
|
if (previewData()) {
|
|
237
235
|
return (
|
|
@@ -400,10 +398,9 @@ import {lazy} from 'react'
|
|
|
400
398
|
import {previewData} from 'next/headers'
|
|
401
399
|
import PreviewSuspense from 'components/PreviewSuspense'
|
|
402
400
|
import {DocumentsCount, query} from 'components/DocumentsCount'
|
|
401
|
+
import PreviewDocumentsCount from 'components/PreviewDocumentsCount'
|
|
403
402
|
import {client} from 'lib/sanity.client'
|
|
404
403
|
|
|
405
|
-
const PreviewDocumentsCount = lazy(() => import('components/PreviewDocumentsCount'))
|
|
406
|
-
|
|
407
404
|
export default async function IndexPage() {
|
|
408
405
|
if (previewData()?.token) {
|
|
409
406
|
return (
|
|
@@ -525,6 +522,7 @@ export default function StudioPage() {
|
|
|
525
522
|
}
|
|
526
523
|
```
|
|
527
524
|
|
|
525
|
+
Set the right `viewport` meta tag, favicons and mroe
|
|
528
526
|
`app/studio/[[...index]]/head.tsx`:
|
|
529
527
|
|
|
530
528
|
```tsx
|
|
@@ -549,6 +547,20 @@ export default function CustomStudioHead() {
|
|
|
549
547
|
}
|
|
550
548
|
```
|
|
551
549
|
|
|
550
|
+
Improve the Studio loading experience by setting a `loading.tsx` route.
|
|
551
|
+
`app/studio/[[...index]]/loading.tsx`:
|
|
552
|
+
|
|
553
|
+
```tsx
|
|
554
|
+
'use client'
|
|
555
|
+
|
|
556
|
+
import config from '../../../sanity.config'
|
|
557
|
+
import NextStudioLoading from 'next-sanity/studio/loading'
|
|
558
|
+
|
|
559
|
+
export default function Loading() {
|
|
560
|
+
return <NextStudioLoading config={config} />
|
|
561
|
+
}
|
|
562
|
+
```
|
|
563
|
+
|
|
552
564
|
#### Next 12 or `pages/studio`
|
|
553
565
|
|
|
554
566
|
Using just `NextStudio` gives you a fully working Sanity Studio v3. However we recommend also using `NextStudioHead` as it ensures CSS Media Queries that target mobile devices with display cutouts (for example iPhone's "The Notch" and "Dynamic Island") and other details.
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { SpinnerIcon } from '@sanity/icons';
|
|
3
|
+
import { _responsive, rem } from '@sanity/ui';
|
|
4
|
+
import { useMemo } from 'react';
|
|
5
|
+
import { defaultTheme } from 'sanity';
|
|
6
|
+
function isWorkspaces(config) {
|
|
7
|
+
return Array.isArray(config);
|
|
8
|
+
}
|
|
9
|
+
function isWorkspaceWithTheme(workspace) {
|
|
10
|
+
return Boolean(workspace.theme);
|
|
11
|
+
}
|
|
12
|
+
function useTheme(config) {
|
|
13
|
+
const workspace = useMemo(() => isWorkspaces(config) ? config[0] : config, [config]);
|
|
14
|
+
return useMemo(() => isWorkspaceWithTheme(workspace) ? workspace.theme : defaultTheme, [workspace]);
|
|
15
|
+
}
|
|
16
|
+
const style = {
|
|
17
|
+
__html: "\n.sanity-app-no-js__root {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: #fff;\n z-index: 1;\n}\n\n.sanity-app-no-js__content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n font-family: helvetica, arial, sans-serif;\n}\n"
|
|
18
|
+
};
|
|
19
|
+
const NextStudioNoScript = () => /* @__PURE__ */jsx("noscript", {
|
|
20
|
+
children: /* @__PURE__ */jsx("div", {
|
|
21
|
+
className: "sanity-app-no-js__root",
|
|
22
|
+
children: /* @__PURE__ */jsxs("div", {
|
|
23
|
+
className: "sanity-app-no-js__content",
|
|
24
|
+
children: [/* @__PURE__ */jsx("style", {
|
|
25
|
+
type: "text/css",
|
|
26
|
+
dangerouslySetInnerHTML: style
|
|
27
|
+
}), /* @__PURE__ */jsx("h1", {
|
|
28
|
+
children: "JavaScript disabled"
|
|
29
|
+
}), /* @__PURE__ */jsxs("p", {
|
|
30
|
+
children: ["Please ", /* @__PURE__ */jsx("a", {
|
|
31
|
+
href: "https://www.enable-javascript.com/",
|
|
32
|
+
children: "enable JavaScript"
|
|
33
|
+
}), " in your browser and reload the page to proceed."]
|
|
34
|
+
})]
|
|
35
|
+
})
|
|
36
|
+
})
|
|
37
|
+
});
|
|
38
|
+
const keyframes = "\nfrom {\n transform: rotate(0deg);\n}\n\nto {\n transform: rotate(360deg);\n}\n";
|
|
39
|
+
function NextStudioLoading(props) {
|
|
40
|
+
const {
|
|
41
|
+
config,
|
|
42
|
+
scheme = "light",
|
|
43
|
+
unstable__noScript = true
|
|
44
|
+
} = props;
|
|
45
|
+
const id = "next-sanity-spinner";
|
|
46
|
+
const theme = useTheme(config);
|
|
47
|
+
const {
|
|
48
|
+
fonts,
|
|
49
|
+
media
|
|
50
|
+
} = theme;
|
|
51
|
+
const styles = _responsive(media, [2], size => {
|
|
52
|
+
const {
|
|
53
|
+
ascenderHeight,
|
|
54
|
+
descenderHeight,
|
|
55
|
+
lineHeight,
|
|
56
|
+
iconSize
|
|
57
|
+
} = fonts.text.sizes[size];
|
|
58
|
+
const capHeight = lineHeight - ascenderHeight - descenderHeight;
|
|
59
|
+
return {
|
|
60
|
+
wrapper: {
|
|
61
|
+
animation: "".concat(id, " 500ms linear infinite"),
|
|
62
|
+
color: theme.color[scheme].default.muted.default.enabled.muted.fg,
|
|
63
|
+
width: rem(capHeight),
|
|
64
|
+
height: rem(capHeight)
|
|
65
|
+
},
|
|
66
|
+
svg: {
|
|
67
|
+
display: "block",
|
|
68
|
+
width: rem(iconSize),
|
|
69
|
+
height: rem(iconSize),
|
|
70
|
+
margin: (capHeight - iconSize) / 2
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
})[0];
|
|
74
|
+
return /* @__PURE__ */jsxs(Fragment, {
|
|
75
|
+
children: [unstable__noScript && /* @__PURE__ */jsx(NextStudioNoScript, {}), /* @__PURE__ */jsx("div", {
|
|
76
|
+
style: {
|
|
77
|
+
fontFamily: fonts.text.family,
|
|
78
|
+
backgroundColor: theme.color[scheme].default.base.bg,
|
|
79
|
+
height: "100vh",
|
|
80
|
+
maxHeight: "100dvh",
|
|
81
|
+
overscrollBehavior: "none",
|
|
82
|
+
WebkitFontSmoothing: "antialiased",
|
|
83
|
+
overflow: "auto"
|
|
84
|
+
},
|
|
85
|
+
children: /* @__PURE__ */jsxs("div", {
|
|
86
|
+
"data-ui": "Flex",
|
|
87
|
+
style: {
|
|
88
|
+
display: "flex",
|
|
89
|
+
minWidth: 0,
|
|
90
|
+
minHeight: 0,
|
|
91
|
+
alignItems: "center",
|
|
92
|
+
justifyContent: "center",
|
|
93
|
+
flexDirection: "column",
|
|
94
|
+
height: "100%",
|
|
95
|
+
margin: 0,
|
|
96
|
+
padding: 0
|
|
97
|
+
},
|
|
98
|
+
children: [/* @__PURE__ */jsx("style", {
|
|
99
|
+
children: "@keyframes ".concat(id, " {").concat(keyframes, "}")
|
|
100
|
+
}, scheme), /* @__PURE__ */jsx("div", {
|
|
101
|
+
"data-ui": "Spinner",
|
|
102
|
+
style: styles.wrapper,
|
|
103
|
+
children: /* @__PURE__ */jsx(SpinnerIcon, {
|
|
104
|
+
style: styles.svg
|
|
105
|
+
})
|
|
106
|
+
})]
|
|
107
|
+
})
|
|
108
|
+
})]
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
export { NextStudioLoading as N, NextStudioNoScript as a, useTheme as u };
|
|
112
|
+
//# sourceMappingURL=NextStudioLoading-3a59a7d7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NextStudioLoading-3a59a7d7.js","sources":["../../src/studio/useTheme.ts","../../src/studio/NextStudioNoScript.tsx","../../src/studio/NextStudioLoading.tsx"],"sourcesContent":["import {useMemo} from 'react'\nimport {\n type Config,\n type SingleWorkspace,\n type StudioTheme,\n type WorkspaceOptions,\n defaultTheme,\n} from 'sanity'\n\ntype WithTheme = {\n theme: StudioTheme\n}\ntype SingleWorkspaceWithTheme = Omit<SingleWorkspace, 'theme'> & WithTheme\ntype WorkspaceOptionsWithTheme = Omit<WorkspaceOptions, 'theme'> & WithTheme\n\nfunction isWorkspaces(config: Config): config is WorkspaceOptions[] {\n return Array.isArray(config)\n}\n\nfunction isWorkspaceWithTheme(\n workspace: SingleWorkspace | WorkspaceOptions\n): workspace is SingleWorkspaceWithTheme | WorkspaceOptionsWithTheme {\n return Boolean(workspace.theme)\n}\n\n/** @alpha */\nexport function useTheme(config: Config): StudioTheme {\n const workspace = useMemo<SingleWorkspace | WorkspaceOptions>(\n () => (isWorkspaces(config) ? config[0] : config),\n [config]\n )\n return useMemo<StudioTheme>(\n () => (isWorkspaceWithTheme(workspace) ? workspace.theme : defaultTheme),\n [workspace]\n )\n}\n","/* eslint-disable react/no-danger */\n\nconst style = {\n __html: `\n.sanity-app-no-js__root {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: #fff;\n z-index: 1;\n}\n\n.sanity-app-no-js__content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n font-family: helvetica, arial, sans-serif;\n}\n`,\n} as const\n\n/** @alpha */\nexport const NextStudioNoScript = () => (\n <noscript>\n <div className=\"sanity-app-no-js__root\">\n <div className=\"sanity-app-no-js__content\">\n <style type=\"text/css\" dangerouslySetInnerHTML={style} />\n <h1>JavaScript disabled</h1>\n <p>\n Please <a href=\"https://www.enable-javascript.com/\">enable JavaScript</a> in your\n browser and reload the page to proceed.\n </p>\n </div>\n </div>\n </noscript>\n)\n","// Intentionally not using `styled-components` to ensure it works in any `next` setup.\n// Wether 'styled-components' SSR is setup or not.\n\nimport {SpinnerIcon} from '@sanity/icons'\nimport {_responsive, rem} from '@sanity/ui'\nimport type {StudioProps} from 'sanity'\n\nimport {NextStudioNoScript} from './NextStudioNoScript'\nimport {useTheme} from './useTheme'\n\n/** @alpha */\nexport interface NextStudioLoadingProps extends Pick<StudioProps, 'config' | 'scheme'> {\n /**\n * Render the <noscript> tag\n * @defaultValue true\n * @alpha\n */\n unstable__noScript?: boolean\n}\n\nconst keyframes = `\nfrom {\n transform: rotate(0deg);\n}\n\nto {\n transform: rotate(360deg);\n}\n`\n\nexport function NextStudioLoading(props: NextStudioLoadingProps) {\n const {config, scheme = 'light', unstable__noScript = true} = props\n const id = 'next-sanity-spinner'\n const theme = useTheme(config)\n const {fonts, media} = theme\n\n const styles: any = _responsive(media, [2], (size: number) => {\n const {ascenderHeight, descenderHeight, lineHeight, iconSize} = fonts.text.sizes[size]\n const capHeight = lineHeight - ascenderHeight - descenderHeight\n\n return {\n wrapper: {\n animation: `${id} 500ms linear infinite`,\n color: theme.color[scheme].default.muted.default.enabled.muted.fg,\n width: rem(capHeight),\n height: rem(capHeight),\n },\n svg: {\n display: 'block',\n width: rem(iconSize),\n height: rem(iconSize),\n margin: (capHeight - iconSize) / 2,\n },\n }\n })[0]\n\n return (\n <>\n {unstable__noScript && <NextStudioNoScript />}\n <div\n style={{\n fontFamily: fonts.text.family,\n backgroundColor: theme.color[scheme].default.base.bg,\n height: '100vh',\n maxHeight: '100dvh',\n overscrollBehavior: 'none',\n WebkitFontSmoothing: 'antialiased',\n overflow: 'auto',\n }}\n >\n <div\n data-ui=\"Flex\"\n style={{\n display: 'flex',\n minWidth: 0,\n minHeight: 0,\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'column',\n height: '100%',\n margin: 0,\n padding: 0,\n }}\n >\n <style key={scheme}>{`@keyframes ${id} {${keyframes}}`}</style>\n <div data-ui=\"Spinner\" style={styles.wrapper}>\n <SpinnerIcon style={styles.svg} />\n </div>\n </div>\n </div>\n </>\n )\n}\n"],"names":["isWorkspaces","config","Array","isArray","isWorkspaceWithTheme","workspace","Boolean","theme","useTheme","useMemo","defaultTheme","style","__html","NextStudioNoScript","jsx","children","className","jsxs","type","dangerouslySetInnerHTML","href","keyframes","NextStudioLoading","props","scheme","unstable__noScript","id","fonts","media","styles","_responsive","size","ascenderHeight","descenderHeight","lineHeight","iconSize","text","sizes","capHeight","wrapper","animation","color","default","muted","enabled","fg","width","rem","height","svg","display","margin","Fragment","fontFamily","family","backgroundColor","base","bg","maxHeight","overscrollBehavior","WebkitFontSmoothing","overflow","minWidth","minHeight","alignItems","justifyContent","flexDirection","padding","SpinnerIcon"],"mappings":"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"}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var icons = require('@sanity/icons');
|
|
5
|
+
var ui = require('@sanity/ui');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
var sanity = require('sanity');
|
|
8
|
+
function isWorkspaces(config) {
|
|
9
|
+
return Array.isArray(config);
|
|
10
|
+
}
|
|
11
|
+
function isWorkspaceWithTheme(workspace) {
|
|
12
|
+
return Boolean(workspace.theme);
|
|
13
|
+
}
|
|
14
|
+
function useTheme(config) {
|
|
15
|
+
const workspace = react.useMemo(() => isWorkspaces(config) ? config[0] : config, [config]);
|
|
16
|
+
return react.useMemo(() => isWorkspaceWithTheme(workspace) ? workspace.theme : sanity.defaultTheme, [workspace]);
|
|
17
|
+
}
|
|
18
|
+
const style = {
|
|
19
|
+
__html: "\n.sanity-app-no-js__root {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: #fff;\n z-index: 1;\n}\n\n.sanity-app-no-js__content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n font-family: helvetica, arial, sans-serif;\n}\n"
|
|
20
|
+
};
|
|
21
|
+
const NextStudioNoScript = () => /* @__PURE__ */jsxRuntime.jsx("noscript", {
|
|
22
|
+
children: /* @__PURE__ */jsxRuntime.jsx("div", {
|
|
23
|
+
className: "sanity-app-no-js__root",
|
|
24
|
+
children: /* @__PURE__ */jsxRuntime.jsxs("div", {
|
|
25
|
+
className: "sanity-app-no-js__content",
|
|
26
|
+
children: [/* @__PURE__ */jsxRuntime.jsx("style", {
|
|
27
|
+
type: "text/css",
|
|
28
|
+
dangerouslySetInnerHTML: style
|
|
29
|
+
}), /* @__PURE__ */jsxRuntime.jsx("h1", {
|
|
30
|
+
children: "JavaScript disabled"
|
|
31
|
+
}), /* @__PURE__ */jsxRuntime.jsxs("p", {
|
|
32
|
+
children: ["Please ", /* @__PURE__ */jsxRuntime.jsx("a", {
|
|
33
|
+
href: "https://www.enable-javascript.com/",
|
|
34
|
+
children: "enable JavaScript"
|
|
35
|
+
}), " in your browser and reload the page to proceed."]
|
|
36
|
+
})]
|
|
37
|
+
})
|
|
38
|
+
})
|
|
39
|
+
});
|
|
40
|
+
const keyframes = "\nfrom {\n transform: rotate(0deg);\n}\n\nto {\n transform: rotate(360deg);\n}\n";
|
|
41
|
+
function NextStudioLoading(props) {
|
|
42
|
+
const {
|
|
43
|
+
config,
|
|
44
|
+
scheme = "light",
|
|
45
|
+
unstable__noScript = true
|
|
46
|
+
} = props;
|
|
47
|
+
const id = "next-sanity-spinner";
|
|
48
|
+
const theme = useTheme(config);
|
|
49
|
+
const {
|
|
50
|
+
fonts,
|
|
51
|
+
media
|
|
52
|
+
} = theme;
|
|
53
|
+
const styles = ui._responsive(media, [2], size => {
|
|
54
|
+
const {
|
|
55
|
+
ascenderHeight,
|
|
56
|
+
descenderHeight,
|
|
57
|
+
lineHeight,
|
|
58
|
+
iconSize
|
|
59
|
+
} = fonts.text.sizes[size];
|
|
60
|
+
const capHeight = lineHeight - ascenderHeight - descenderHeight;
|
|
61
|
+
return {
|
|
62
|
+
wrapper: {
|
|
63
|
+
animation: "".concat(id, " 500ms linear infinite"),
|
|
64
|
+
color: theme.color[scheme].default.muted.default.enabled.muted.fg,
|
|
65
|
+
width: ui.rem(capHeight),
|
|
66
|
+
height: ui.rem(capHeight)
|
|
67
|
+
},
|
|
68
|
+
svg: {
|
|
69
|
+
display: "block",
|
|
70
|
+
width: ui.rem(iconSize),
|
|
71
|
+
height: ui.rem(iconSize),
|
|
72
|
+
margin: (capHeight - iconSize) / 2
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
})[0];
|
|
76
|
+
return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
77
|
+
children: [unstable__noScript && /* @__PURE__ */jsxRuntime.jsx(NextStudioNoScript, {}), /* @__PURE__ */jsxRuntime.jsx("div", {
|
|
78
|
+
style: {
|
|
79
|
+
fontFamily: fonts.text.family,
|
|
80
|
+
backgroundColor: theme.color[scheme].default.base.bg,
|
|
81
|
+
height: "100vh",
|
|
82
|
+
maxHeight: "100dvh",
|
|
83
|
+
overscrollBehavior: "none",
|
|
84
|
+
WebkitFontSmoothing: "antialiased",
|
|
85
|
+
overflow: "auto"
|
|
86
|
+
},
|
|
87
|
+
children: /* @__PURE__ */jsxRuntime.jsxs("div", {
|
|
88
|
+
"data-ui": "Flex",
|
|
89
|
+
style: {
|
|
90
|
+
display: "flex",
|
|
91
|
+
minWidth: 0,
|
|
92
|
+
minHeight: 0,
|
|
93
|
+
alignItems: "center",
|
|
94
|
+
justifyContent: "center",
|
|
95
|
+
flexDirection: "column",
|
|
96
|
+
height: "100%",
|
|
97
|
+
margin: 0,
|
|
98
|
+
padding: 0
|
|
99
|
+
},
|
|
100
|
+
children: [/* @__PURE__ */jsxRuntime.jsx("style", {
|
|
101
|
+
children: "@keyframes ".concat(id, " {").concat(keyframes, "}")
|
|
102
|
+
}, scheme), /* @__PURE__ */jsxRuntime.jsx("div", {
|
|
103
|
+
"data-ui": "Spinner",
|
|
104
|
+
style: styles.wrapper,
|
|
105
|
+
children: /* @__PURE__ */jsxRuntime.jsx(icons.SpinnerIcon, {
|
|
106
|
+
style: styles.svg
|
|
107
|
+
})
|
|
108
|
+
})]
|
|
109
|
+
})
|
|
110
|
+
})]
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
exports.NextStudioLoading = NextStudioLoading;
|
|
114
|
+
exports.NextStudioNoScript = NextStudioNoScript;
|
|
115
|
+
exports.useTheme = useTheme;
|
|
116
|
+
//# sourceMappingURL=NextStudioLoading-d668a359.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NextStudioLoading-d668a359.cjs","sources":["../../src/studio/useTheme.ts","../../src/studio/NextStudioNoScript.tsx","../../src/studio/NextStudioLoading.tsx"],"sourcesContent":["import {useMemo} from 'react'\nimport {\n type Config,\n type SingleWorkspace,\n type StudioTheme,\n type WorkspaceOptions,\n defaultTheme,\n} from 'sanity'\n\ntype WithTheme = {\n theme: StudioTheme\n}\ntype SingleWorkspaceWithTheme = Omit<SingleWorkspace, 'theme'> & WithTheme\ntype WorkspaceOptionsWithTheme = Omit<WorkspaceOptions, 'theme'> & WithTheme\n\nfunction isWorkspaces(config: Config): config is WorkspaceOptions[] {\n return Array.isArray(config)\n}\n\nfunction isWorkspaceWithTheme(\n workspace: SingleWorkspace | WorkspaceOptions\n): workspace is SingleWorkspaceWithTheme | WorkspaceOptionsWithTheme {\n return Boolean(workspace.theme)\n}\n\n/** @alpha */\nexport function useTheme(config: Config): StudioTheme {\n const workspace = useMemo<SingleWorkspace | WorkspaceOptions>(\n () => (isWorkspaces(config) ? config[0] : config),\n [config]\n )\n return useMemo<StudioTheme>(\n () => (isWorkspaceWithTheme(workspace) ? workspace.theme : defaultTheme),\n [workspace]\n )\n}\n","/* eslint-disable react/no-danger */\n\nconst style = {\n __html: `\n.sanity-app-no-js__root {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: #fff;\n z-index: 1;\n}\n\n.sanity-app-no-js__content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n font-family: helvetica, arial, sans-serif;\n}\n`,\n} as const\n\n/** @alpha */\nexport const NextStudioNoScript = () => (\n <noscript>\n <div className=\"sanity-app-no-js__root\">\n <div className=\"sanity-app-no-js__content\">\n <style type=\"text/css\" dangerouslySetInnerHTML={style} />\n <h1>JavaScript disabled</h1>\n <p>\n Please <a href=\"https://www.enable-javascript.com/\">enable JavaScript</a> in your\n browser and reload the page to proceed.\n </p>\n </div>\n </div>\n </noscript>\n)\n","// Intentionally not using `styled-components` to ensure it works in any `next` setup.\n// Wether 'styled-components' SSR is setup or not.\n\nimport {SpinnerIcon} from '@sanity/icons'\nimport {_responsive, rem} from '@sanity/ui'\nimport type {StudioProps} from 'sanity'\n\nimport {NextStudioNoScript} from './NextStudioNoScript'\nimport {useTheme} from './useTheme'\n\n/** @alpha */\nexport interface NextStudioLoadingProps extends Pick<StudioProps, 'config' | 'scheme'> {\n /**\n * Render the <noscript> tag\n * @defaultValue true\n * @alpha\n */\n unstable__noScript?: boolean\n}\n\nconst keyframes = `\nfrom {\n transform: rotate(0deg);\n}\n\nto {\n transform: rotate(360deg);\n}\n`\n\nexport function NextStudioLoading(props: NextStudioLoadingProps) {\n const {config, scheme = 'light', unstable__noScript = true} = props\n const id = 'next-sanity-spinner'\n const theme = useTheme(config)\n const {fonts, media} = theme\n\n const styles: any = _responsive(media, [2], (size: number) => {\n const {ascenderHeight, descenderHeight, lineHeight, iconSize} = fonts.text.sizes[size]\n const capHeight = lineHeight - ascenderHeight - descenderHeight\n\n return {\n wrapper: {\n animation: `${id} 500ms linear infinite`,\n color: theme.color[scheme].default.muted.default.enabled.muted.fg,\n width: rem(capHeight),\n height: rem(capHeight),\n },\n svg: {\n display: 'block',\n width: rem(iconSize),\n height: rem(iconSize),\n margin: (capHeight - iconSize) / 2,\n },\n }\n })[0]\n\n return (\n <>\n {unstable__noScript && <NextStudioNoScript />}\n <div\n style={{\n fontFamily: fonts.text.family,\n backgroundColor: theme.color[scheme].default.base.bg,\n height: '100vh',\n maxHeight: '100dvh',\n overscrollBehavior: 'none',\n WebkitFontSmoothing: 'antialiased',\n overflow: 'auto',\n }}\n >\n <div\n data-ui=\"Flex\"\n style={{\n display: 'flex',\n minWidth: 0,\n minHeight: 0,\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'column',\n height: '100%',\n margin: 0,\n padding: 0,\n }}\n >\n <style key={scheme}>{`@keyframes ${id} {${keyframes}}`}</style>\n <div data-ui=\"Spinner\" style={styles.wrapper}>\n <SpinnerIcon style={styles.svg} />\n </div>\n </div>\n </div>\n </>\n )\n}\n"],"names":["isWorkspaces","config","Array","isArray","isWorkspaceWithTheme","workspace","Boolean","theme","useTheme","useMemo","defaultTheme","style","__html","NextStudioNoScript","jsx","children","className","jsxs","type","dangerouslySetInnerHTML","href","keyframes","NextStudioLoading","props","scheme","unstable__noScript","id","fonts","media","styles","_responsive","size","ascenderHeight","descenderHeight","lineHeight","iconSize","text","sizes","capHeight","wrapper","animation","color","default","muted","enabled","fg","width","rem","height","svg","display","margin","Fragment","fontFamily","family","backgroundColor","base","bg","maxHeight","overscrollBehavior","WebkitFontSmoothing","overflow","minWidth","minHeight","alignItems","justifyContent","flexDirection","padding","SpinnerIcon"],"mappings":"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"}
|
package/dist/studio/index.cjs
CHANGED
|
@@ -13,121 +13,52 @@ Object.defineProperty(exports, '__esModule', {
|
|
|
13
13
|
});
|
|
14
14
|
var jsxRuntime = require('react/jsx-runtime');
|
|
15
15
|
var react = require('react');
|
|
16
|
-
var icons = require('@sanity/icons');
|
|
17
|
-
var ui = require('@sanity/ui');
|
|
18
16
|
var sanity = require('sanity');
|
|
19
17
|
var styled = require('styled-components');
|
|
18
|
+
var NextStudioLoading = require('../_chunks/NextStudioLoading-d668a359.cjs');
|
|
19
|
+
require('@sanity/icons');
|
|
20
|
+
require('@sanity/ui');
|
|
20
21
|
function _interopDefaultLegacy(e) {
|
|
21
22
|
return e && typeof e === 'object' && 'default' in e ? e : {
|
|
22
23
|
'default': e
|
|
23
24
|
};
|
|
24
25
|
}
|
|
25
26
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
26
|
-
function
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
const keyframes = "\nfrom {\n transform: rotate(0deg);\n}\n\nto {\n transform: rotate(360deg);\n}\n";
|
|
37
|
-
function NextStudioFallbackComponent(props) {
|
|
38
|
-
const {
|
|
39
|
-
config,
|
|
40
|
-
scheme = "light"
|
|
41
|
-
} = props;
|
|
42
|
-
const id = "next-sanity-spinner";
|
|
43
|
-
const theme = useTheme(config);
|
|
44
|
-
const {
|
|
45
|
-
fonts,
|
|
46
|
-
media
|
|
47
|
-
} = theme;
|
|
48
|
-
const styles = ui._responsive(media, [2], size => {
|
|
49
|
-
const {
|
|
50
|
-
ascenderHeight,
|
|
51
|
-
descenderHeight,
|
|
52
|
-
lineHeight,
|
|
53
|
-
iconSize
|
|
54
|
-
} = fonts.text.sizes[size];
|
|
55
|
-
const capHeight = lineHeight - ascenderHeight - descenderHeight;
|
|
56
|
-
return {
|
|
57
|
-
wrapper: {
|
|
58
|
-
animation: "".concat(id, " 500ms linear infinite"),
|
|
59
|
-
color: theme.color[scheme].default.muted.default.enabled.muted.fg,
|
|
60
|
-
width: ui.rem(capHeight),
|
|
61
|
-
height: ui.rem(capHeight)
|
|
62
|
-
},
|
|
63
|
-
svg: {
|
|
64
|
-
display: "block",
|
|
65
|
-
width: ui.rem(iconSize),
|
|
66
|
-
height: ui.rem(iconSize),
|
|
67
|
-
margin: (capHeight - iconSize) / 2
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
})[0];
|
|
71
|
-
return /* @__PURE__ */jsxRuntime.jsx("div", {
|
|
72
|
-
style: {
|
|
73
|
-
fontFamily: fonts.text.family,
|
|
74
|
-
backgroundColor: theme.color[scheme].default.base.bg,
|
|
75
|
-
height: "100vh",
|
|
76
|
-
maxHeight: "100dvh",
|
|
77
|
-
overscrollBehavior: "none",
|
|
78
|
-
WebkitFontSmoothing: "antialiased",
|
|
79
|
-
overflow: "auto"
|
|
80
|
-
},
|
|
81
|
-
children: /* @__PURE__ */jsxRuntime.jsxs("div", {
|
|
82
|
-
"data-ui": "Flex",
|
|
83
|
-
style: {
|
|
84
|
-
display: "flex",
|
|
85
|
-
minWidth: 0,
|
|
86
|
-
minHeight: 0,
|
|
87
|
-
alignItems: "center",
|
|
88
|
-
justifyContent: "center",
|
|
89
|
-
flexDirection: "column",
|
|
90
|
-
height: "100%",
|
|
91
|
-
margin: 0,
|
|
92
|
-
padding: 0
|
|
93
|
-
},
|
|
94
|
-
children: [/* @__PURE__ */jsxRuntime.jsx("style", {
|
|
95
|
-
children: "@keyframes ".concat(id, " {").concat(keyframes, "}")
|
|
96
|
-
}, scheme), /* @__PURE__ */jsxRuntime.jsx("div", {
|
|
97
|
-
"data-ui": "Spinner",
|
|
98
|
-
style: styles.wrapper,
|
|
99
|
-
children: /* @__PURE__ */jsxRuntime.jsx(icons.SpinnerIcon, {
|
|
100
|
-
style: styles.svg
|
|
101
|
-
})
|
|
102
|
-
})]
|
|
103
|
-
})
|
|
27
|
+
function NextStudioClientOnly(_ref) {
|
|
28
|
+
let {
|
|
29
|
+
children,
|
|
30
|
+
fallback
|
|
31
|
+
} = _ref;
|
|
32
|
+
const [mounted, setMounted] = react.useState(false);
|
|
33
|
+
react.useEffect(() => react.startTransition(() => setMounted(true)), []);
|
|
34
|
+
return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
35
|
+
children: mounted ? children : fallback
|
|
104
36
|
});
|
|
105
37
|
}
|
|
106
|
-
const
|
|
107
|
-
const Layout = styled__default["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: ", ";\n background-color: ", ";\n height: 100vh;\n max-height: 100dvh;\n overscroll-behavior: none;\n -webkit-font-smoothing: antialiased;\n overflow: auto;\n\n ", "\n"])), _ref => {
|
|
38
|
+
const Layout = styled__default["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: ", ";\n background-color: ", ";\n height: 100vh;\n max-height: 100dvh;\n overscroll-behavior: none;\n -webkit-font-smoothing: antialiased;\n overflow: auto;\n\n ", "\n"])), _ref2 => {
|
|
108
39
|
let {
|
|
109
40
|
$fontFamily
|
|
110
|
-
} =
|
|
41
|
+
} = _ref2;
|
|
111
42
|
return $fontFamily;
|
|
112
|
-
},
|
|
43
|
+
}, _ref3 => {
|
|
113
44
|
let {
|
|
114
45
|
$bg
|
|
115
|
-
} =
|
|
46
|
+
} = _ref3;
|
|
116
47
|
return $bg;
|
|
117
|
-
},
|
|
48
|
+
}, _ref4 => {
|
|
118
49
|
let {
|
|
119
50
|
$unstable__tailwindSvgFix
|
|
120
|
-
} =
|
|
51
|
+
} = _ref4;
|
|
121
52
|
return $unstable__tailwindSvgFix ? styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n /* override tailwind reset */\n *:not([data-ui='Popover__arrow']):not([data-ui='Tooltip__arrow']) > svg {\n display: inline;\n }\n "]))) : "";
|
|
122
53
|
});
|
|
123
|
-
const NextStudioLayoutComponent =
|
|
54
|
+
const NextStudioLayoutComponent = _ref5 => {
|
|
124
55
|
let {
|
|
125
56
|
children,
|
|
126
57
|
config,
|
|
127
58
|
scheme = "light",
|
|
128
59
|
unstable__tailwindSvgFix = true
|
|
129
|
-
} =
|
|
130
|
-
const theme = useTheme(config);
|
|
60
|
+
} = _ref5;
|
|
61
|
+
const theme = NextStudioLoading.useTheme(config);
|
|
131
62
|
return /* @__PURE__ */jsxRuntime.jsx(Layout, {
|
|
132
63
|
"data-ui": "NextStudioLayout",
|
|
133
64
|
$unstable__tailwindSvgFix: unstable__tailwindSvgFix,
|
|
@@ -137,69 +68,31 @@ const NextStudioLayoutComponent = _ref4 => {
|
|
|
137
68
|
});
|
|
138
69
|
};
|
|
139
70
|
const NextStudioLayout = react.memo(NextStudioLayoutComponent);
|
|
140
|
-
const style = {
|
|
141
|
-
__html: "\n.sanity-app-no-js__root {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: #fff;\n z-index: 1;\n}\n\n.sanity-app-no-js__content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n font-family: helvetica, arial, sans-serif;\n}\n"
|
|
142
|
-
};
|
|
143
|
-
const NextStudioNoScript = () => /* @__PURE__ */jsxRuntime.jsx("noscript", {
|
|
144
|
-
children: /* @__PURE__ */jsxRuntime.jsx("div", {
|
|
145
|
-
className: "sanity-app-no-js__root",
|
|
146
|
-
children: /* @__PURE__ */jsxRuntime.jsxs("div", {
|
|
147
|
-
className: "sanity-app-no-js__content",
|
|
148
|
-
children: [/* @__PURE__ */jsxRuntime.jsx("style", {
|
|
149
|
-
type: "text/css",
|
|
150
|
-
dangerouslySetInnerHTML: style
|
|
151
|
-
}), /* @__PURE__ */jsxRuntime.jsx("h1", {
|
|
152
|
-
children: "JavaScript disabled"
|
|
153
|
-
}), /* @__PURE__ */jsxRuntime.jsxs("p", {
|
|
154
|
-
children: ["Please ", /* @__PURE__ */jsxRuntime.jsx("a", {
|
|
155
|
-
href: "https://www.enable-javascript.com/",
|
|
156
|
-
children: "enable JavaScript"
|
|
157
|
-
}), " in your browser and reload the page to proceed."]
|
|
158
|
-
})]
|
|
159
|
-
})
|
|
160
|
-
})
|
|
161
|
-
});
|
|
162
|
-
function NextStudioSuspense(_ref5) {
|
|
163
|
-
let {
|
|
164
|
-
children,
|
|
165
|
-
fallback
|
|
166
|
-
} = _ref5;
|
|
167
|
-
const [mounted, mount] = react.useReducer(() => true, false);
|
|
168
|
-
react.useEffect(mount, [mount]);
|
|
169
|
-
return /* @__PURE__ */jsxRuntime.jsx(react.Suspense, {
|
|
170
|
-
fallback,
|
|
171
|
-
children: mounted ? children : fallback
|
|
172
|
-
});
|
|
173
|
-
}
|
|
174
|
-
const Studio = react.memo(react.lazy(() => Promise.resolve().then(function () {
|
|
175
|
-
return require('../_chunks/LazyStudio-bf7e0fc9.cjs');
|
|
176
|
-
})));
|
|
177
71
|
const NextStudioComponent = _ref6 => {
|
|
178
72
|
let {
|
|
179
73
|
children,
|
|
180
74
|
config,
|
|
181
75
|
unstable__tailwindSvgFix = true,
|
|
182
|
-
unstable__noScript
|
|
76
|
+
unstable__noScript,
|
|
183
77
|
scheme
|
|
184
78
|
} = _ref6,
|
|
185
79
|
props = _objectWithoutProperties(_ref6, _excluded);
|
|
186
|
-
return /* @__PURE__ */jsxRuntime.
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
80
|
+
return /* @__PURE__ */jsxRuntime.jsx(NextStudioClientOnly, {
|
|
81
|
+
fallback: /* @__PURE__ */jsxRuntime.jsx(NextStudioLoading.NextStudioLoading, {
|
|
82
|
+
unstable__noScript,
|
|
83
|
+
config,
|
|
84
|
+
scheme
|
|
85
|
+
}),
|
|
86
|
+
children: /* @__PURE__ */jsxRuntime.jsx(NextStudioLayout, {
|
|
87
|
+
config,
|
|
88
|
+
scheme,
|
|
89
|
+
unstable__tailwindSvgFix,
|
|
90
|
+
children: children || /* @__PURE__ */jsxRuntime.jsx(sanity.Studio, _objectSpread({
|
|
193
91
|
config,
|
|
194
92
|
scheme,
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
scheme,
|
|
199
|
-
unstable_globalStyles: true
|
|
200
|
-
}, props))
|
|
201
|
-
})
|
|
202
|
-
})]
|
|
93
|
+
unstable_globalStyles: true
|
|
94
|
+
}, props))
|
|
95
|
+
})
|
|
203
96
|
});
|
|
204
97
|
};
|
|
205
98
|
const NextStudio = react.memo(NextStudioComponent);
|
|
@@ -225,11 +118,10 @@ const store = createStore();
|
|
|
225
118
|
function usePrefersColorScheme() {
|
|
226
119
|
return react.useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
|
|
227
120
|
}
|
|
121
|
+
exports.NextStudioNoScript = NextStudioLoading.NextStudioNoScript;
|
|
122
|
+
exports.useTheme = NextStudioLoading.useTheme;
|
|
228
123
|
exports.NextStudio = NextStudio;
|
|
229
|
-
exports.
|
|
124
|
+
exports.NextStudioClientOnly = NextStudioClientOnly;
|
|
230
125
|
exports.NextStudioLayout = NextStudioLayout;
|
|
231
|
-
exports.NextStudioNoScript = NextStudioNoScript;
|
|
232
|
-
exports.NextStudioSuspense = NextStudioSuspense;
|
|
233
126
|
exports.usePrefersColorScheme = usePrefersColorScheme;
|
|
234
|
-
exports.useTheme = useTheme;
|
|
235
127
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/studio/useTheme.ts","../../src/studio/NextStudioFallback.tsx","../../src/studio/NextStudioLayout.tsx","../../src/studio/NextStudioNoScript.tsx","../../src/studio/NextStudioSuspense.tsx","../../src/studio/NextStudio.tsx","../../src/studio/usePrefersColorScheme.ts"],"sourcesContent":["import {useMemo} from 'react'\nimport {\n type Config,\n type SingleWorkspace,\n type StudioTheme,\n type WorkspaceOptions,\n defaultTheme,\n} from 'sanity'\n\ntype WithTheme = {\n theme: StudioTheme\n}\ntype SingleWorkspaceWithTheme = Omit<SingleWorkspace, 'theme'> & WithTheme\ntype WorkspaceOptionsWithTheme = Omit<WorkspaceOptions, 'theme'> & WithTheme\n\nfunction isWorkspaces(config: Config): config is WorkspaceOptions[] {\n return Array.isArray(config)\n}\n\nfunction isWorkspaceWithTheme(\n workspace: SingleWorkspace | WorkspaceOptions\n): workspace is SingleWorkspaceWithTheme | WorkspaceOptionsWithTheme {\n return Boolean(workspace.theme)\n}\n\n/** @alpha */\nexport function useTheme(config: Config): StudioTheme {\n const workspace = useMemo<SingleWorkspace | WorkspaceOptions>(\n () => (isWorkspaces(config) ? config[0] : config),\n [config]\n )\n return useMemo<StudioTheme>(\n () => (isWorkspaceWithTheme(workspace) ? workspace.theme : defaultTheme),\n [workspace]\n )\n}\n","// Intentionally not using `styled-components` to ensure it works in any `next` setup.\n// Wether 'styled-components' SSR is setup or not.\n\nimport {SpinnerIcon} from '@sanity/icons'\nimport {_responsive, rem} from '@sanity/ui'\nimport {memo} from 'react'\nimport type {StudioProps} from 'sanity'\n\nimport {useTheme} from './useTheme'\n\n/** @alpha */\nexport type NextStudioFallbackProps = Pick<StudioProps, 'config' | 'scheme'>\n\nconst keyframes = `\nfrom {\n transform: rotate(0deg);\n}\n\nto {\n transform: rotate(360deg);\n}\n`\n\nfunction NextStudioFallbackComponent(props: NextStudioFallbackProps) {\n const {config, scheme = 'light'} = props\n const id = 'next-sanity-spinner'\n const theme = useTheme(config)\n const {fonts, media} = theme\n\n const styles: any = _responsive(media, [2], (size: number) => {\n const {ascenderHeight, descenderHeight, lineHeight, iconSize} = fonts.text.sizes[size]\n const capHeight = lineHeight - ascenderHeight - descenderHeight\n\n return {\n wrapper: {\n animation: `${id} 500ms linear infinite`,\n color: theme.color[scheme].default.muted.default.enabled.muted.fg,\n width: rem(capHeight),\n height: rem(capHeight),\n },\n svg: {\n display: 'block',\n width: rem(iconSize),\n height: rem(iconSize),\n margin: (capHeight - iconSize) / 2,\n },\n }\n })[0]\n\n return (\n <div\n style={{\n fontFamily: fonts.text.family,\n backgroundColor: theme.color[scheme].default.base.bg,\n height: '100vh',\n maxHeight: '100dvh',\n overscrollBehavior: 'none',\n WebkitFontSmoothing: 'antialiased',\n overflow: 'auto',\n }}\n >\n <div\n data-ui=\"Flex\"\n style={{\n display: 'flex',\n minWidth: 0,\n minHeight: 0,\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'column',\n height: '100%',\n margin: 0,\n padding: 0,\n }}\n >\n <style key={scheme}>{`@keyframes ${id} {${keyframes}}`}</style>\n <div data-ui=\"Spinner\" style={styles.wrapper}>\n <SpinnerIcon style={styles.svg} />\n </div>\n </div>\n </div>\n )\n}\n\n/** @alpha */\nexport const NextStudioFallback = memo(NextStudioFallbackComponent)\n","/* eslint-disable camelcase */\nimport {memo} from 'react'\nimport type {StudioProps} from 'sanity'\nimport styled, {css} from 'styled-components'\n\nimport {useTheme} from './useTheme'\n\n/** @alpha */\nexport interface NextStudioLayoutProps extends Pick<StudioProps, 'config' | 'scheme'> {\n children: React.ReactNode\n /**\n * Apply fix with SVG icon centering that happens if TailwindCSS is loaded\n * @defaultValue true\n */\n unstable__tailwindSvgFix?: boolean\n}\n\ntype LayoutProps = {\n $unstable__tailwindSvgFix: NextStudioLayoutProps['unstable__tailwindSvgFix']\n $bg: string\n $fontFamily: string\n}\nconst Layout = styled.div<LayoutProps>`\n font-family: ${({$fontFamily}) => $fontFamily};\n background-color: ${({$bg}: any) => $bg};\n height: 100vh;\n max-height: 100dvh;\n overscroll-behavior: none;\n -webkit-font-smoothing: antialiased;\n overflow: auto;\n\n ${({$unstable__tailwindSvgFix}: any) =>\n $unstable__tailwindSvgFix\n ? css`\n /* override tailwind reset */\n *:not([data-ui='Popover__arrow']):not([data-ui='Tooltip__arrow']) > svg {\n display: inline;\n }\n `\n : ''}\n`\n\nconst NextStudioLayoutComponent = ({\n children,\n config,\n scheme = 'light',\n unstable__tailwindSvgFix = true,\n}: NextStudioLayoutProps) => {\n const theme = useTheme(config)\n\n return (\n <Layout\n data-ui=\"NextStudioLayout\"\n $unstable__tailwindSvgFix={unstable__tailwindSvgFix}\n $fontFamily={theme.fonts.text.family}\n $bg={theme.color[scheme].default.base.bg}\n >\n {children}\n </Layout>\n )\n}\n\n/** @alpha */\nexport const NextStudioLayout = memo(NextStudioLayoutComponent)\n","/* eslint-disable react/no-danger */\n\nconst style = {\n __html: `\n.sanity-app-no-js__root {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: #fff;\n z-index: 1;\n}\n\n.sanity-app-no-js__content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n font-family: helvetica, arial, sans-serif;\n}\n`,\n} as const\n\n/** @alpha */\nexport const NextStudioNoScript = () => (\n <noscript>\n <div className=\"sanity-app-no-js__root\">\n <div className=\"sanity-app-no-js__content\">\n <style type=\"text/css\" dangerouslySetInnerHTML={style} />\n <h1>JavaScript disabled</h1>\n <p>\n Please <a href=\"https://www.enable-javascript.com/\">enable JavaScript</a> in your\n browser and reload the page to proceed.\n </p>\n </div>\n </div>\n </noscript>\n)\n","import {type ReactNode, Suspense, useEffect, useReducer} from 'react'\n\n/** @alpha */\nexport type NextStudioSuspenseProps = {\n children: ReactNode\n fallback: ReactNode\n}\n\n/** @alpha */\nexport function NextStudioSuspense({children, fallback}: NextStudioSuspenseProps) {\n const [mounted, mount] = useReducer(() => true, false)\n useEffect(mount, [mount])\n\n return <Suspense fallback={fallback}>{mounted ? children : fallback}</Suspense>\n}\n","import {lazy, memo} from 'react'\nimport type {StudioProps} from 'sanity'\n\nimport {NextStudioFallback} from './NextStudioFallback'\nimport {type NextStudioLayoutProps, NextStudioLayout} from './NextStudioLayout'\nimport {NextStudioNoScript} from './NextStudioNoScript'\nimport {NextStudioSuspense} from './NextStudioSuspense'\n\nconst Studio = memo(lazy(() => import('./LazyStudio')))\n\n/** @beta */\nexport interface NextStudioProps extends StudioProps {\n children?: React.ReactNode\n /**\n * Apply fix with SVG icon centering that happens if TailwindCSS is loaded\n * @defaultValue true\n * @alpha\n */\n unstable__tailwindSvgFix?: NextStudioLayoutProps['unstable__tailwindSvgFix']\n /**\n * Render the <noscript> tag\n * @defaultValue true\n * @alpha\n */\n unstable__noScript?: boolean\n}\n/**\n * Intended to render at the root of a page, letting the Studio own that page and render much like it would if you used `npx sanity start` to render\n * It's a drop-in replacement for `import {Studio} from 'sanity'`\n */\nconst NextStudioComponent = ({\n children,\n config,\n unstable__tailwindSvgFix = true,\n unstable__noScript = true,\n scheme,\n ...props\n}: NextStudioProps) => {\n return (\n <>\n {!unstable__noScript && <NextStudioNoScript />}\n <NextStudioSuspense fallback={<NextStudioFallback config={config} scheme={scheme} />}>\n <NextStudioLayout\n config={config}\n scheme={scheme}\n unstable__tailwindSvgFix={unstable__tailwindSvgFix}\n >\n {children || (\n <Studio config={config} scheme={scheme} unstable_globalStyles {...props} />\n )}\n </NextStudioLayout>\n </NextStudioSuspense>\n </>\n )\n}\n\n/**\n * Override how the Studio renders by passing children.\n * This is useful for advanced use cases where you're using StudioProvider and StudioLayout instead of Studio:\n * ```\n * import {StudioProvider, StudioLayout} from 'sanity'\n * import {NextStudio} from 'next-sanity/studio'\n * <NextStudio config={config}>\n * <StudioProvider config={config}>\n * <CustomComponentThatUsesContextFromStudioProvider />\n * <StudioLayout />\n * </StudioProvider>\n * </NextStudio>\n * ```\n * @beta\n */\nexport const NextStudio = memo(NextStudioComponent)\n","/* eslint-disable @typescript-eslint/no-empty-function */\nimport type {ThemeColorSchemeKey} from '@sanity/ui'\nimport {useSyncExternalStore} from 'react'\n\nfunction createStore() {\n if (typeof document === 'undefined') {\n return {\n subscribe: () => () => {},\n getSnapshot: () => 'light' as const,\n getServerSnapshot: () => 'light' as const,\n }\n }\n\n const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')\n\n return {\n subscribe: (onStoreChange: () => void) => {\n matchMedia.addEventListener('change', onStoreChange)\n return () => matchMedia.removeEventListener('change', onStoreChange)\n },\n getSnapshot: () => (matchMedia.matches ? 'dark' : 'light'),\n getServerSnapshot: () => 'light' as const,\n }\n}\nconst store = createStore()\n\n/** @alpha */\nexport function usePrefersColorScheme(): ThemeColorSchemeKey {\n return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot)\n}\n"],"names":["isWorkspaces","config","Array","isArray","isWorkspaceWithTheme","workspace","Boolean","theme","useTheme","useMemo","defaultTheme","keyframes","NextStudioFallbackComponent","props","scheme","id","fonts","media","styles","_responsive","size","ascenderHeight","descenderHeight","lineHeight","iconSize","text","sizes","capHeight","wrapper","animation","color","default","muted","enabled","fg","width","rem","height","svg","display","margin","jsx","style","fontFamily","family","backgroundColor","base","bg","maxHeight","overscrollBehavior","WebkitFontSmoothing","overflow","children","jsxs","minWidth","minHeight","alignItems","justifyContent","flexDirection","padding","SpinnerIcon","NextStudioFallback","memo","Layout","styled","div","$fontFamily","$bg","$unstable__tailwindSvgFix","css","NextStudioLayoutComponent","unstable__tailwindSvgFix","NextStudioLayout","__html","NextStudioNoScript","className","type","dangerouslySetInnerHTML","href","NextStudioSuspense","fallback","mounted","mount","useReducer","useEffect","Suspense","Studio","lazy","Promise","resolve","then","require","NextStudioComponent","unstable__noScript","Fragment","unstable_globalStyles","NextStudio","createStore","document","subscribe","getSnapshot","getServerSnapshot","matchMedia","window","onStoreChange","addEventListener","removeEventListener","matches","store","usePrefersColorScheme","useSyncExternalStore"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/studio/NextStudioClientOnly.tsx","../../src/studio/NextStudioLayout.tsx","../../src/studio/NextStudio.tsx","../../src/studio/usePrefersColorScheme.ts"],"sourcesContent":["import {type ReactNode, startTransition, useEffect, useState} from 'react'\n\n/** @alpha */\nexport type NextStudioClientOnlyProps = {\n children: ReactNode\n fallback: ReactNode\n}\n\n/** @alpha */\nexport function NextStudioClientOnly({children, fallback}: NextStudioClientOnlyProps) {\n const [mounted, setMounted] = useState(false)\n useEffect(() => startTransition(() => setMounted(true)), [])\n\n return <>{mounted ? children : fallback}</>\n}\n","/* eslint-disable camelcase */\nimport {memo} from 'react'\nimport type {StudioProps} from 'sanity'\nimport styled, {css} from 'styled-components'\n\nimport {useTheme} from './useTheme'\n\n/** @alpha */\nexport interface NextStudioLayoutProps extends Pick<StudioProps, 'config' | 'scheme'> {\n children: React.ReactNode\n /**\n * Apply fix with SVG icon centering that happens if TailwindCSS is loaded\n * @defaultValue true\n */\n unstable__tailwindSvgFix?: boolean\n}\n\ntype LayoutProps = {\n $unstable__tailwindSvgFix: NextStudioLayoutProps['unstable__tailwindSvgFix']\n $bg: string\n $fontFamily: string\n}\nconst Layout = styled.div<LayoutProps>`\n font-family: ${({$fontFamily}) => $fontFamily};\n background-color: ${({$bg}: any) => $bg};\n height: 100vh;\n max-height: 100dvh;\n overscroll-behavior: none;\n -webkit-font-smoothing: antialiased;\n overflow: auto;\n\n ${({$unstable__tailwindSvgFix}: any) =>\n $unstable__tailwindSvgFix\n ? css`\n /* override tailwind reset */\n *:not([data-ui='Popover__arrow']):not([data-ui='Tooltip__arrow']) > svg {\n display: inline;\n }\n `\n : ''}\n`\n\nconst NextStudioLayoutComponent = ({\n children,\n config,\n scheme = 'light',\n unstable__tailwindSvgFix = true,\n}: NextStudioLayoutProps) => {\n const theme = useTheme(config)\n\n return (\n <Layout\n data-ui=\"NextStudioLayout\"\n $unstable__tailwindSvgFix={unstable__tailwindSvgFix}\n $fontFamily={theme.fonts.text.family}\n $bg={theme.color[scheme].default.base.bg}\n >\n {children}\n </Layout>\n )\n}\n\n/** @alpha */\nexport const NextStudioLayout = memo(NextStudioLayoutComponent)\n","import {memo} from 'react'\nimport {type StudioProps, Studio} from 'sanity'\n\nimport {NextStudioClientOnly} from './NextStudioClientOnly'\nimport {type NextStudioLayoutProps, NextStudioLayout} from './NextStudioLayout'\nimport {type NextStudioLoadingProps, NextStudioLoading} from './NextStudioLoading'\n\nexport type {NextStudioLoadingProps}\n\n// eslint-disable-next-line no-warning-comments\n// FIXME: https://github.com/vercel/next.js/issues/43147\n// const Studio = memo(lazy(() => import('./LazyStudio')))\n\n/** @beta */\nexport interface NextStudioProps extends StudioProps {\n children?: React.ReactNode\n /**\n * Apply fix with SVG icon centering that happens if TailwindCSS is loaded\n * @defaultValue true\n * @alpha\n */\n unstable__tailwindSvgFix?: NextStudioLayoutProps['unstable__tailwindSvgFix']\n /**\n * Render the <noscript> tag\n * @defaultValue true\n * @alpha\n */\n unstable__noScript?: NextStudioLoadingProps['unstable__noScript']\n}\n/**\n * Intended to render at the root of a page, letting the Studio own that page and render much like it would if you used `npx sanity start` to render\n * It's a drop-in replacement for `import {Studio} from 'sanity'`\n */\nconst NextStudioComponent = ({\n children,\n config,\n unstable__tailwindSvgFix = true,\n unstable__noScript,\n scheme,\n ...props\n}: NextStudioProps) => (\n <NextStudioClientOnly\n fallback={\n <NextStudioLoading\n unstable__noScript={unstable__noScript}\n config={config}\n scheme={scheme}\n />\n }\n >\n <NextStudioLayout\n config={config}\n scheme={scheme}\n unstable__tailwindSvgFix={unstable__tailwindSvgFix}\n >\n {children || <Studio config={config} scheme={scheme} unstable_globalStyles {...props} />}\n </NextStudioLayout>\n </NextStudioClientOnly>\n)\n\n/**\n * Override how the Studio renders by passing children.\n * This is useful for advanced use cases where you're using StudioProvider and StudioLayout instead of Studio:\n * ```\n * import {StudioProvider, StudioLayout} from 'sanity'\n * import {NextStudio} from 'next-sanity/studio'\n * <NextStudio config={config}>\n * <StudioProvider config={config}>\n * <CustomComponentThatUsesContextFromStudioProvider />\n * <StudioLayout />\n * </StudioProvider>\n * </NextStudio>\n * ```\n * @beta\n */\nexport const NextStudio = memo(NextStudioComponent)\n","/* eslint-disable @typescript-eslint/no-empty-function */\nimport type {ThemeColorSchemeKey} from '@sanity/ui'\nimport {useSyncExternalStore} from 'react'\n\nfunction createStore() {\n if (typeof document === 'undefined') {\n return {\n subscribe: () => () => {},\n getSnapshot: () => 'light' as const,\n getServerSnapshot: () => 'light' as const,\n }\n }\n\n const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')\n\n return {\n subscribe: (onStoreChange: () => void) => {\n matchMedia.addEventListener('change', onStoreChange)\n return () => matchMedia.removeEventListener('change', onStoreChange)\n },\n getSnapshot: () => (matchMedia.matches ? 'dark' : 'light'),\n getServerSnapshot: () => 'light' as const,\n }\n}\nconst store = createStore()\n\n/** @alpha */\nexport function usePrefersColorScheme(): ThemeColorSchemeKey {\n return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot)\n}\n"],"names":["NextStudioClientOnly","children","fallback","mounted","setMounted","useState","useEffect","startTransition","jsx","Fragment","Layout","styled","div","$fontFamily","$bg","$unstable__tailwindSvgFix","css","NextStudioLayoutComponent","config","scheme","unstable__tailwindSvgFix","theme","useTheme","fonts","text","family","color","default","base","bg","NextStudioLayout","memo","NextStudioComponent","unstable__noScript","props","NextStudioLoading","Studio","unstable_globalStyles","NextStudio","createStore","document","subscribe","getSnapshot","getServerSnapshot","matchMedia","window","onStoreChange","addEventListener","removeEventListener","matches","store","usePrefersColorScheme","useSyncExternalStore"],"mappings":"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"}
|