next-sanity 0.0.0-dev.0

package/dist/webhook.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var sanityWebhook = require('@sanity/webhook');
+function _interopDefaultCompat(e) {
+  return e && typeof e === 'object' && 'default' in e ? e : {
+    default: e
+  };
+}
+var sanityWebhook__default = /*#__PURE__*/_interopDefaultCompat(sanityWebhook);
+const config = {
+  api: {
+    /**
+     * Next.js will by default parse the body, which can lead to invalid signatures.
+     */
+    bodyParser: false
+  },
+  /**
+   * `@sanity/webhook` isn't updated to support the edge runtime yet, and currently requires Node.js APIs such as Buffer.
+   */
+  runtime: "nodejs"
+};
+async function _readBody(readable) {
+  const chunks = [];
+  for await (const chunk of readable) {
+    chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
+  }
+  return Buffer.concat(chunks).toString("utf8");
+}
+const {
+  isValidSignature,
+  SIGNATURE_HEADER_NAME
+} = sanityWebhook__default.default;
+async function parseBody(req, secret) {
+  let waitForContentLakeEventualConsistency = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let signature = req.headers[SIGNATURE_HEADER_NAME];
+  if (Array.isArray(signature)) {
+    signature = signature[0];
+  }
+  const body = await _readBody(req);
+  const validSignature = secret ? isValidSignature(body, signature, secret.trim()) : null;
+  if (validSignature !== false && waitForContentLakeEventualConsistency) {
+    await new Promise(resolve => setTimeout(resolve, 1e3));
+  }
+  return {
+    body: body.trim() && JSON.parse(body),
+    isValidSignature: validSignature
+  };
+}
+exports.config = config;
+exports.parseBody = parseBody;
+//# sourceMappingURL=webhook.cjs.map

package/dist/webhook.cjs.js

@@ -0,0 +1,6 @@
+import cjs from './webhook.cjs';
+
+export const config = cjs.config;
+export const parseBody = cjs.parseBody;
+
+export default cjs.default;

package/dist/webhook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"webhook.cjs","sources":["../src/webhook/config.ts","../src/webhook/readBody.ts","../src/webhook/parseBody.ts"],"sourcesContent":["import type {PageConfig} from 'next/types'\n\n/**\n * Configurates the API function with the right runtime and body parsing to handle Sanity Webhook events.\n * @public\n */\nexport const config: PageConfig = {\n  api: {\n    /**\n     * Next.js will by default parse the body, which can lead to invalid signatures.\n     */\n    bodyParser: false,\n  },\n  /**\n   * `@sanity/webhook` isn't updated to support the edge runtime yet, and currently requires Node.js APIs such as Buffer.\n   */\n  runtime: 'nodejs',\n}\n","import type {NextApiRequest} from 'next'\n\n/** @internal */\nexport async function _readBody(readable: NextApiRequest): Promise<string> {\n  const chunks = []\n  for await (const chunk of readable) {\n    chunks.push(typeof chunk === 'string' ? Buffer.from(chunk) : chunk)\n  }\n  return Buffer.concat(chunks).toString('utf8')\n}\n","import type {SanityDocument} from '@sanity/types'\nimport sanityWebhook from '@sanity/webhook'\nimport type {NextApiRequest} from 'next'\n\n// As `@sanity/webhook` isn't shipping ESM, extracting from the default export have the best ecosystem support\nconst {isValidSignature, SIGNATURE_HEADER_NAME} = sanityWebhook\n\nimport {_readBody as readBody} from './readBody'\n\n/** @public */\nexport type ParseBody = {\n  /**\n   * If a secret is given then it returns a boolean. If no secret is provided then no validation is done on the signature, and it'll return `null`\n   */\n  isValidSignature: boolean | null\n  body: SanityDocument\n}\n/**\n * Handles parsing the body JSON, and validating its signature. Also waits for Content Lake eventual consistency so you can run your queries\n * without worrying about getting stale data.\n * @public\n */\nexport async function parseBody(\n  req: NextApiRequest,\n  secret?: string,\n  waitForContentLakeEventualConsistency: boolean = true\n): Promise<ParseBody> {\n  let signature = req.headers[SIGNATURE_HEADER_NAME]!\n  if (Array.isArray(signature)) {\n    signature = signature[0]\n  }\n\n  const body = await readBody(req)\n  const validSignature = secret ? isValidSignature(body, signature, secret.trim()) : null\n\n  if (validSignature !== false && waitForContentLakeEventualConsistency) {\n    await new Promise((resolve) => setTimeout(resolve, 1000))\n  }\n\n  return {\n    body: body.trim() && JSON.parse(body),\n    isValidSignature: validSignature,\n  }\n}\n"],"names":["config","api","bodyParser","runtime","_readBody","readable","chunks","chunk","push","Buffer","from","concat","toString","isValidSignature","SIGNATURE_HEADER_NAME","sanityWebhook","parseBody","req","secret","waitForContentLakeEventualConsistency","signature","headers","Array","isArray","body","readBody","validSignature","trim","Promise","resolve","setTimeout","JSON","parse"],"mappings":";;;;;;;;;;;;AAMO,MAAMA,MAAqB,GAAA;EAChCC,GAAK,EAAA;IAAA;AAAA;AAAA;IAIHC,UAAY,EAAA;EACd,CAAA;EAAA;AAAA;AAAA;EAIAC,OAAS,EAAA;AACX,CAAA;ACdA,eAAsBC,UAAUC,QAA2C,EAAA;EACzE,MAAMC,SAAS,EAAC;EAChB,WAAA,MAAiBC,SAASF,QAAU,EAAA;IAC3BC,MAAA,CAAAE,IAAA,CAAK,OAAOD,KAAU,KAAA,QAAA,GAAWE,OAAOC,IAAK,CAAAH,KAAK,IAAIA,KAAK,CAAA;EACpE;EACA,OAAOE,MAAO,CAAAE,MAAA,CAAOL,MAAM,CAAA,CAAEM,SAAS,MAAM,CAAA;AAC9C;ACJA,MAAM;EAACC,gBAAkB;EAAAC;AAAyB,CAAA,GAAAC,8BAAA;AAiBlD,eAAsBC,SACpB,CAAAC,GAAA,EACAC,MACA,EACoB;EAAA,IADpBC,qCAAA,uEAAiD,IAC7B;EAChB,IAAAC,SAAA,GAAYH,GAAI,CAAAI,OAAA,CAAQP,qBAAqB,CAAA;EAC7C,IAAAQ,KAAA,CAAMC,OAAQ,CAAAH,SAAS,CAAG,EAAA;IAC5BA,SAAA,GAAYA,UAAU,CAAC,CAAA;EACzB;EAEM,MAAAI,IAAA,GAAO,MAAMC,SAAA,CAASR,GAAG,CAAA;EACzB,MAAAS,cAAA,GAAiBR,SAASL,gBAAiB,CAAAW,IAAA,EAAMJ,WAAWF,MAAO,CAAAS,IAAA,EAAM,CAAI,GAAA,IAAA;EAE/E,IAAAD,cAAA,KAAmB,SAASP,qCAAuC,EAAA;IACrE,MAAM,IAAIS,OAAQ,CAACC,WAAYC,UAAW,CAAAD,OAAA,EAAS,GAAI,CAAC,CAAA;EAC1D;EAEO,OAAA;IACLL,MAAMA,IAAK,CAAAG,IAAA,EAAU,IAAAI,IAAA,CAAKC,MAAMR,IAAI,CAAA;IACpCX,gBAAkB,EAAAa;EAAA,CACpB;AACF;;"}

package/dist/webhook.d.ts

@@ -0,0 +1,31 @@
+import type {NextApiRequest} from 'next'
+import type {PageConfig} from 'next/types'
+import type {SanityDocument} from '@sanity/types'
+
+/**
+ * Configurates the API function with the right runtime and body parsing to handle Sanity Webhook events.
+ * @public
+ */
+export declare const config: PageConfig
+
+/** @public */
+export declare type ParseBody = {
+  /**
+   * If a secret is given then it returns a boolean. If no secret is provided then no validation is done on the signature, and it'll return `null`
+   */
+  isValidSignature: boolean | null
+  body: SanityDocument
+}
+
+/**
+ * Handles parsing the body JSON, and validating its signature. Also waits for Content Lake eventual consistency so you can run your queries
+ * without worrying about getting stale data.
+ * @public
+ */
+export declare function parseBody(
+  req: NextApiRequest,
+  secret?: string,
+  waitForContentLakeEventualConsistency?: boolean
+): Promise<ParseBody>
+
+export {}

package/dist/webhook.js

@@ -0,0 +1,42 @@
+import sanityWebhook from '@sanity/webhook';
+const config = {
+  api: {
+    /**
+     * Next.js will by default parse the body, which can lead to invalid signatures.
+     */
+    bodyParser: false
+  },
+  /**
+   * `@sanity/webhook` isn't updated to support the edge runtime yet, and currently requires Node.js APIs such as Buffer.
+   */
+  runtime: "nodejs"
+};
+async function _readBody(readable) {
+  const chunks = [];
+  for await (const chunk of readable) {
+    chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
+  }
+  return Buffer.concat(chunks).toString("utf8");
+}
+const {
+  isValidSignature,
+  SIGNATURE_HEADER_NAME
+} = sanityWebhook;
+async function parseBody(req, secret) {
+  let waitForContentLakeEventualConsistency = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let signature = req.headers[SIGNATURE_HEADER_NAME];
+  if (Array.isArray(signature)) {
+    signature = signature[0];
+  }
+  const body = await _readBody(req);
+  const validSignature = secret ? isValidSignature(body, signature, secret.trim()) : null;
+  if (validSignature !== false && waitForContentLakeEventualConsistency) {
+    await new Promise(resolve => setTimeout(resolve, 1e3));
+  }
+  return {
+    body: body.trim() && JSON.parse(body),
+    isValidSignature: validSignature
+  };
+}
+export { config, parseBody };
+//# sourceMappingURL=webhook.js.map

package/dist/webhook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webhook.js","sources":["../src/webhook/config.ts","../src/webhook/readBody.ts","../src/webhook/parseBody.ts"],"sourcesContent":["import type {PageConfig} from 'next/types'\n\n/**\n * Configurates the API function with the right runtime and body parsing to handle Sanity Webhook events.\n * @public\n */\nexport const config: PageConfig = {\n  api: {\n    /**\n     * Next.js will by default parse the body, which can lead to invalid signatures.\n     */\n    bodyParser: false,\n  },\n  /**\n   * `@sanity/webhook` isn't updated to support the edge runtime yet, and currently requires Node.js APIs such as Buffer.\n   */\n  runtime: 'nodejs',\n}\n","import type {NextApiRequest} from 'next'\n\n/** @internal */\nexport async function _readBody(readable: NextApiRequest): Promise<string> {\n  const chunks = []\n  for await (const chunk of readable) {\n    chunks.push(typeof chunk === 'string' ? Buffer.from(chunk) : chunk)\n  }\n  return Buffer.concat(chunks).toString('utf8')\n}\n","import type {SanityDocument} from '@sanity/types'\nimport sanityWebhook from '@sanity/webhook'\nimport type {NextApiRequest} from 'next'\n\n// As `@sanity/webhook` isn't shipping ESM, extracting from the default export have the best ecosystem support\nconst {isValidSignature, SIGNATURE_HEADER_NAME} = sanityWebhook\n\nimport {_readBody as readBody} from './readBody'\n\n/** @public */\nexport type ParseBody = {\n  /**\n   * If a secret is given then it returns a boolean. If no secret is provided then no validation is done on the signature, and it'll return `null`\n   */\n  isValidSignature: boolean | null\n  body: SanityDocument\n}\n/**\n * Handles parsing the body JSON, and validating its signature. Also waits for Content Lake eventual consistency so you can run your queries\n * without worrying about getting stale data.\n * @public\n */\nexport async function parseBody(\n  req: NextApiRequest,\n  secret?: string,\n  waitForContentLakeEventualConsistency: boolean = true\n): Promise<ParseBody> {\n  let signature = req.headers[SIGNATURE_HEADER_NAME]!\n  if (Array.isArray(signature)) {\n    signature = signature[0]\n  }\n\n  const body = await readBody(req)\n  const validSignature = secret ? isValidSignature(body, signature, secret.trim()) : null\n\n  if (validSignature !== false && waitForContentLakeEventualConsistency) {\n    await new Promise((resolve) => setTimeout(resolve, 1000))\n  }\n\n  return {\n    body: body.trim() && JSON.parse(body),\n    isValidSignature: validSignature,\n  }\n}\n"],"names":["config","api","bodyParser","runtime","_readBody","readable","chunks","chunk","push","Buffer","from","concat","toString","isValidSignature","SIGNATURE_HEADER_NAME","sanityWebhook","parseBody","req","secret","waitForContentLakeEventualConsistency","signature","headers","Array","isArray","body","readBody","validSignature","trim","Promise","resolve","setTimeout","JSON","parse"],"mappings":";AAMO,MAAMA,MAAqB,GAAA;EAChCC,GAAK,EAAA;IAAA;AAAA;AAAA;IAIHC,UAAY,EAAA;EACd,CAAA;EAAA;AAAA;AAAA;EAIAC,OAAS,EAAA;AACX,CAAA;ACdA,eAAsBC,UAAUC,QAA2C,EAAA;EACzE,MAAMC,SAAS,EAAC;EAChB,WAAA,MAAiBC,SAASF,QAAU,EAAA;IAC3BC,MAAA,CAAAE,IAAA,CAAK,OAAOD,KAAU,KAAA,QAAA,GAAWE,OAAOC,IAAK,CAAAH,KAAK,IAAIA,KAAK,CAAA;EACpE;EACA,OAAOE,MAAO,CAAAE,MAAA,CAAOL,MAAM,CAAA,CAAEM,SAAS,MAAM,CAAA;AAC9C;ACJA,MAAM;EAACC,gBAAkB;EAAAC;AAAyB,CAAA,GAAAC,aAAA;AAiBlD,eAAsBC,SACpB,CAAAC,GAAA,EACAC,MACA,EACoB;EAAA,IADpBC,qCAAA,uEAAiD,IAC7B;EAChB,IAAAC,SAAA,GAAYH,GAAI,CAAAI,OAAA,CAAQP,qBAAqB,CAAA;EAC7C,IAAAQ,KAAA,CAAMC,OAAQ,CAAAH,SAAS,CAAG,EAAA;IAC5BA,SAAA,GAAYA,UAAU,CAAC,CAAA;EACzB;EAEM,MAAAI,IAAA,GAAO,MAAMC,SAAA,CAASR,GAAG,CAAA;EACzB,MAAAS,cAAA,GAAiBR,SAASL,gBAAiB,CAAAW,IAAA,EAAMJ,WAAWF,MAAO,CAAAS,IAAA,EAAM,CAAI,GAAA,IAAA;EAE/E,IAAAD,cAAA,KAAmB,SAASP,qCAAuC,EAAA;IACrE,MAAM,IAAIS,OAAQ,CAACC,WAAYC,UAAW,CAAAD,OAAA,EAAS,GAAI,CAAC,CAAA;EAC1D;EAEO,OAAA;IACLL,MAAMA,IAAK,CAAAG,IAAA,EAAU,IAAAI,IAAA,CAAKC,MAAMR,IAAI,CAAA;IACpCX,gBAAkB,EAAAa;EAAA,CACpB;AACF;"}

package/package.json

@@ -0,0 +1,207 @@
+{
+  "name": "next-sanity",
+  "version": "0.0.0-dev.0",
+  "description": "Sanity.io toolkit for Next.js",
+  "keywords": [
+    "sanity",
+    "sanity.io",
+    "next.js",
+    "studio",
+    "studio-v3",
+    "live",
+    "preview"
+  ],
+  "homepage": "https://github.com/sanity-io/next-sanity#readme",
+  "bugs": {
+    "url": "https://github.com/sanity-io/next-sanity/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/sanity-io/next-sanity.git"
+  },
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "require": "./dist/index.cjs",
+      "node": {
+        "import": "./dist/index.cjs.js",
+        "require": "./dist/index.cjs"
+      },
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "source": "./src/preview/index.ts",
+      "require": "./dist/preview.cjs",
+      "node": {
+        "import": "./dist/preview.cjs.js",
+        "require": "./dist/preview.cjs"
+      },
+      "import": "./dist/preview.js",
+      "default": "./dist/preview.js"
+    },
+    "./studio": {
+      "types": "./dist/studio/index.d.ts",
+      "source": "./src/studio/index.ts",
+      "require": "./dist/studio/index.cjs",
+      "node": {
+        "import": "./dist/studio/index.cjs.js",
+        "require": "./dist/studio/index.cjs"
+      },
+      "import": "./dist/studio/index.js",
+      "default": "./dist/studio/index.js"
+    },
+    "./studio/head": {
+      "types": "./dist/studio/head.d.ts",
+      "source": "./src/studio/head/index.ts",
+      "require": "./dist/studio/head.cjs",
+      "node": {
+        "import": "./dist/studio/head.cjs.js",
+        "require": "./dist/studio/head.cjs"
+      },
+      "import": "./dist/studio/head.js",
+      "default": "./dist/studio/head.js"
+    },
+    "./studio/loading": {
+      "types": "./dist/studio/loading.d.ts",
+      "source": "./src/studio/loading.ts",
+      "require": "./dist/studio/loading.cjs",
+      "node": {
+        "import": "./dist/studio/loading.cjs.js",
+        "require": "./dist/studio/loading.cjs"
+      },
+      "import": "./dist/studio/loading.js",
+      "default": "./dist/studio/loading.js"
+    },
+    "./webhook": {
+      "types": "./dist/webhook.d.ts",
+      "source": "./src/webhook/index.ts",
+      "require": "./dist/webhook.cjs",
+      "node": {
+        "import": "./dist/webhook.cjs.js",
+        "require": "./dist/webhook.cjs"
+      },
+      "import": "./dist/webhook.js",
+      "default": "./dist/webhook.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "preview": [
+        "./dist/preview.d.ts"
+      ],
+      "studio": [
+        "./dist/studio/index.d.ts"
+      ],
+      "studio/head": [
+        "./dist/studio/head.d.ts"
+      ],
+      "studio/loading": [
+        "./dist/studio/loading.d.ts"
+      ],
+      "webhook": [
+        "./dist/webhook.d.ts"
+      ]
+    }
+  },
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "prebuild": "npm run clean",
+    "build": "pkg build --strict && pkg --strict",
+    "clean": "rimraf dist",
+    "coverage": "npm test -- --coverage",
+    "dev": "next",
+    "format": "npm run prettier -- --write . && eslint --fix .",
+    "lint": "eslint --max-warnings 0 .",
+    "prepublishOnly": "npm run build",
+    "prettier": "npx prettier --ignore-path .gitignore",
+    "test": "jest",
+    "test:node-esm-cjs": "node test.mjs && node test.cjs",
+    "type-check": "tsc --noEmit",
+    "update:icons": "cp node_modules/@sanity/server/static/favicons/{apple-touch-icon.png,favicon.ico,favicon.svg} src/studio/head"
+  },
+  "browserslist": [
+    "> 0.2% and supports es6-module and supports es6-module-dynamic-import and not dead and not IE 11",
+    "maintained node versions"
+  ],
+  "prettier": {
+    "bracketSpacing": false,
+    "printWidth": 98,
+    "semi": false,
+    "singleQuote": true
+  },
+  "dependencies": {
+    "@sanity/client": "0.0.0-dev.3",
+    "@sanity/preview-kit": "0.0.0-dev.1",
+    "@sanity/webhook": "^2",
+    "groq": "^3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-url": "^8.0.1",
+    "@sanity/eslint-config-studio": "^2.0.1",
+    "@sanity/image-url": "^1.0.2",
+    "@sanity/pkg-utils": "^2.2.5",
+    "@sanity/semantic-release-preset": "^4.0.0",
+    "@sanity/ui": "^1.2.4",
+    "@sanity/vision": "^3.4.0",
+    "@types/eventsource": "^1.1.11",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.34.0",
+    "eslint-config-next": "13.1.6",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-sanity": "^6.0.0",
+    "eslint-gitignore": "^0.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "groqd": "^0.7.0",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
+    "ls-engines": "^0.9.0",
+    "next": "13.1.6",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.4",
+    "prettier-plugin-packagejson": "^2.4.3",
+    "prettier-plugin-tailwindcss": "^0.2.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "rollup": "^3.16.0",
+    "sanity": "^3.4.0",
+    "styled-components": "^5.3.6",
+    "tailwindcss": "^3.2.7",
+    "typescript": "^4.9.5",
+    "url-loader": "^4.1.1"
+  },
+  "peerDependencies": {
+    "@sanity/icons": "^2",
+    "@sanity/types": "^3",
+    "@sanity/ui": "^1",
+    "next": "^13",
+    "react": "^18",
+    "sanity": "^3",
+    "styled-components": "^5.2"
+  },
+  "engines": {
+    "node": ">=16"
+  }
+}

package/src/client.ts

@@ -0,0 +1,2 @@
+/** @public */
+export {type ClientConfig, createClient} from '@sanity/client'

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './client'
+export type {ClientConfig, SanityClient} from '@sanity/client'
+export {default as groq} from 'groq'

package/src/preview/definePreview.tsx

@@ -0,0 +1,37 @@
+/*
+import type {GroqStore} from '@sanity/groq-store'
+import {
+  type Params,
+  type PreviewConfig,
+  type UsePreview,
+  _checkAuth,
+  _definePreview,
+  _lazyEventSourcePolyfill,
+  _lazyGroqStore,
+} from '@sanity/preview-kit'
+import {cache, use} from 'react'
+
+const lazyEventSourcePolyfill = cache(_lazyEventSourcePolyfill)
+const lazyGroqStore = cache(_lazyGroqStore)
+const checkAuth = cache(_checkAuth)
+const preload = cache((store: GroqStore, query: string, params?: Params) =>
+  store.query<any>(query, params)
+)
+// */
+
+/**
+ * @public
+ */
+/*
+export const definePreview = (config: PreviewConfig): UsePreview =>
+  _definePreview({
+    ...config,
+    importEventSourcePolyfill: () => use(lazyEventSourcePolyfill()),
+    importGroqStore: () => use(lazyGroqStore()),
+    checkAuth: (projectId, token) => use(checkAuth(projectId, token)),
+    preload: (store, query, params) => use(preload(store, query, params)),
+  })
+// */
+
+export type {Params, PreviewConfig, UsePreview} from '@sanity/preview-kit'
+export {definePreview} from '@sanity/preview-kit'

package/src/preview/index.ts

@@ -0,0 +1,2 @@
+export * from './definePreview'
+export {PreviewSuspense, type PreviewSuspenseProps} from '@sanity/preview-kit'

package/src/studio/NextStudio.tsx

@@ -0,0 +1,61 @@
+import {memo} from 'react'
+import {Studio, type StudioProps} from 'sanity'
+
+import {NextStudioClientOnly} from './NextStudioClientOnly'
+import {NextStudioLayout} from './NextStudioLayout'
+import {NextStudioLoading, type NextStudioLoadingProps} from './NextStudioLoading'
+
+export type {NextStudioLoadingProps}
+
+/** @beta */
+export interface NextStudioProps extends StudioProps {
+  children?: React.ReactNode
+  /**
+   * Render the <noscript> tag
+   * @defaultValue true
+   * @alpha
+   */
+  unstable__noScript?: NextStudioLoadingProps['unstable__noScript']
+}
+/**
+ * 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
+ * It's a drop-in replacement for `import {Studio} from 'sanity'`
+ */
+const NextStudioComponent = ({
+  children,
+  config,
+  unstable__noScript,
+  scheme,
+  ...props
+}: NextStudioProps) => (
+  <NextStudioClientOnly
+    fallback={
+      <NextStudioLoading
+        unstable__noScript={unstable__noScript}
+        config={config}
+        scheme={scheme}
+      />
+    }
+  >
+    <NextStudioLayout config={config} scheme={scheme}>
+      {children || <Studio config={config} scheme={scheme} unstable_globalStyles {...props} />}
+    </NextStudioLayout>
+  </NextStudioClientOnly>
+)
+
+/**
+ * Override how the Studio renders by passing children.
+ * This is useful for advanced use cases where you're using StudioProvider and StudioLayout instead of Studio:
+ * ```
+ * import {StudioProvider, StudioLayout} from 'sanity'
+ * import {NextStudio} from 'next-sanity/studio'
+ * <NextStudio config={config}>
+ *   <StudioProvider config={config}>
+ *     <CustomComponentThatUsesContextFromStudioProvider />
+ *     <StudioLayout />
+ *   </StudioProvider>
+ * </NextStudio>
+ * ```
+ * @beta
+ */
+export const NextStudio = memo(NextStudioComponent)

package/src/studio/NextStudioClientOnly.tsx

@@ -0,0 +1,15 @@
+import {type ReactNode, startTransition, useEffect, useState} from 'react'
+
+/** @alpha */
+export type NextStudioClientOnlyProps = {
+  children: ReactNode
+  fallback: ReactNode
+}
+
+/** @alpha */
+export function NextStudioClientOnly({children, fallback}: NextStudioClientOnlyProps) {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => startTransition(() => setMounted(true)), [])
+
+  return <>{mounted ? children : fallback}</>
+}

package/src/studio/NextStudioLayout.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable camelcase */
+import {memo} from 'react'
+import type {StudioProps} from 'sanity'
+import styled from 'styled-components'
+
+import {useTheme} from './useTheme'
+
+/** @alpha */
+export interface NextStudioLayoutProps extends Pick<StudioProps, 'config' | 'scheme'> {
+  children: React.ReactNode
+}
+
+type LayoutProps = {
+  $bg: string
+  $fontFamily: string
+}
+const Layout = styled.div<LayoutProps>`
+  font-family: ${({$fontFamily}) => $fontFamily};
+  background-color: ${({$bg}: any) => $bg};
+  height: 100vh;
+  max-height: 100dvh;
+  overscroll-behavior: none;
+  -webkit-font-smoothing: antialiased;
+  overflow: auto;
+`
+
+const NextStudioLayoutComponent = ({
+  children,
+  config,
+  scheme = 'light',
+}: NextStudioLayoutProps) => {
+  const theme = useTheme(config)
+
+  return (
+    <Layout
+      data-ui="NextStudioLayout"
+      $fontFamily={theme.fonts.text.family}
+      $bg={theme.color[scheme].default.base.bg}
+    >
+      {children}
+    </Layout>
+  )
+}
+
+/** @alpha */
+export const NextStudioLayout = memo(NextStudioLayoutComponent)

package/src/studio/NextStudioLoading.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable no-warning-comments */
+// Intentionally not using `styled-components` to ensure it works in any `next` setup.
+// Whether 'styled-components' SSR is setup or not.
+
+import {SpinnerIcon} from '@sanity/icons'
+import {_responsive, rem} from '@sanity/ui'
+import type {Config, SingleWorkspace, StudioProps} from 'sanity'
+
+import {NextStudioNoScript} from './NextStudioNoScript'
+import {useTheme} from './useTheme'
+
+/** @alpha */
+export interface NextStudioLoadingProps extends Pick<StudioProps, 'scheme'> {
+  /**
+   * If your Studio Config has a custom theme you can pass it here to ensure the loading screen matches your theme.
+   */
+  config?: Config | Required<Pick<SingleWorkspace, 'theme'>>
+  /**
+   * Render the <noscript> tag
+   * @defaultValue true
+   * @alpha
+   */
+  unstable__noScript?: boolean
+}
+
+const keyframes = `
+from {
+  transform: rotate(0deg);
+}
+
+to {
+  transform: rotate(360deg);
+}
+`
+
+export function NextStudioLoading(props: NextStudioLoadingProps) {
+  const {config, scheme = 'light', unstable__noScript = true} = props
+  const id = 'next-sanity-spinner'
+  const theme = useTheme(config)
+  const {fonts, media} = theme
+
+  const styles: any = _responsive(media, [2], (size: number) => {
+    const {ascenderHeight, descenderHeight, lineHeight, iconSize} = fonts.text.sizes[size]
+    const capHeight = lineHeight - ascenderHeight - descenderHeight
+
+    return {
+      wrapper: {
+        display: 'block',
+        animation: `${id} 500ms linear infinite`,
+        color: theme.color[scheme].default.muted.default.enabled.muted.fg,
+        width: rem(capHeight),
+        height: rem(capHeight),
+      },
+      svg: {
+        display: 'block',
+        width: rem(iconSize),
+        height: rem(iconSize),
+        margin: (capHeight - iconSize) / 2,
+      },
+    }
+  })[0]
+
+  return (
+    <>
+      {unstable__noScript && <NextStudioNoScript />}
+      <div
+        style={{
+          fontFamily: fonts.text.family,
+          backgroundColor: theme.color[scheme].default.base.bg,
+          height: '100vh',
+          maxHeight: '100dvh',
+          overscrollBehavior: 'none',
+          WebkitFontSmoothing: 'antialiased',
+          overflow: 'auto',
+        }}
+      >
+        <div
+          data-ui="Flex"
+          style={{
+            display: 'flex',
+            minWidth: 0,
+            minHeight: 0,
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            height: '100%',
+            margin: 0,
+            padding: 0,
+            // @TODO use rem calc
+            gap: '10px',
+          }}
+        >
+          <style key={scheme}>{`@keyframes ${id} {${keyframes}}`}</style>
+          <div
+            data-ui="Text"
+            style={{
+              position: 'relative',
+              // @TODO read from theme
+              fontWeight: 400,
+              // @TODO read from theme
+              padding: '1px 0px',
+              // @TODO use rem calc
+              fontSize: '1rem',
+              // @TODO use rem calc
+              lineHeight: 'calc(1.3125)',
+              // @TODO use rem calc
+              transform: 'translateY(-5px)',
+              color: theme.color[scheme].default.muted.default.enabled.muted.fg,
+            }}
+          >
+            <span>Loading…</span>
+          </div>
+          <div data-ui="Spinner" style={styles.wrapper}>
+            <SpinnerIcon style={styles.svg} />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}