npm - next-sanity - Versions diffs - 0.0.0-dev.0 - Mend

next-sanity 0.0.0-dev.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 (65) hide show

package/LICENSE +21 -0
package/README.md +910 -0
package/dist/_chunks/NextStudioLoading-8cf56cdf.js +127 -0
package/dist/_chunks/NextStudioLoading-8cf56cdf.js.map +1 -0
package/dist/_chunks/NextStudioLoading-bf57e61a.cjs +131 -0
package/dist/_chunks/NextStudioLoading-bf57e61a.cjs.map +1 -0
package/dist/index.cjs +26 -0
package/dist/index.cjs.js +6 -0
package/dist/index.cjs.map +1 -0
package/dist/index.d.ts +14 -0
package/dist/index.js +3 -0
package/dist/index.js.map +1 -0
package/dist/preview.cjs +19 -0
package/dist/preview.cjs.js +6 -0
package/dist/preview.cjs.map +1 -0
package/dist/preview.d.ts +20 -0
package/dist/preview.js +2 -0
package/dist/preview.js.map +1 -0
package/dist/studio/head.cjs +51 -0
package/dist/studio/head.cjs.js +5 -0
package/dist/studio/head.cjs.map +1 -0
package/dist/studio/head.d.ts +79 -0
package/dist/studio/head.js +46 -0
package/dist/studio/head.js.map +1 -0
package/dist/studio/index.cjs +111 -0
package/dist/studio/index.cjs.js +10 -0
package/dist/studio/index.cjs.map +1 -0
package/dist/studio/index.d.ts +88 -0
package/dist/studio/index.js +96 -0
package/dist/studio/index.js.map +1 -0
package/dist/studio/loading.cjs +8 -0
package/dist/studio/loading.cjs.js +5 -0
package/dist/studio/loading.cjs.map +1 -0
package/dist/studio/loading.d.ts +23 -0
package/dist/studio/loading.js +2 -0
package/dist/studio/loading.js.map +1 -0
package/dist/webhook.cjs +54 -0
package/dist/webhook.cjs.js +6 -0
package/dist/webhook.cjs.map +1 -0
package/dist/webhook.d.ts +31 -0
package/dist/webhook.js +42 -0
package/dist/webhook.js.map +1 -0
package/package.json +207 -0
package/src/client.ts +2 -0
package/src/index.ts +3 -0
package/src/preview/definePreview.tsx +37 -0
package/src/preview/index.ts +2 -0
package/src/studio/NextStudio.tsx +61 -0
package/src/studio/NextStudioClientOnly.tsx +15 -0
package/src/studio/NextStudioLayout.tsx +46 -0
package/src/studio/NextStudioLoading.tsx +120 -0
package/src/studio/NextStudioNoScript.tsx +40 -0
package/src/studio/head/NextStudioHead.tsx +112 -0
package/src/studio/head/apple-touch-icon.png +0 -0
package/src/studio/head/favicon.ico +0 -0
package/src/studio/head/favicon.svg +7 -0
package/src/studio/head/index.ts +1 -0
package/src/studio/index.ts +6 -0
package/src/studio/loading.ts +1 -0
package/src/studio/usePrefersColorScheme.ts +30 -0
package/src/studio/useTheme.ts +13 -0
package/src/webhook/config.ts +18 -0
package/src/webhook/index.ts +2 -0
package/src/webhook/parseBody.ts +44 -0
package/src/webhook/readBody.ts +10 -0

package/src/studio/NextStudioNoScript.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+/* eslint-disable react/no-danger */
+const style = {
+  __html: `
+.sanity-app-no-js__root {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background: #fff;
+  z-index: 1;
+}
+.sanity-app-no-js__content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  font-family: helvetica, arial, sans-serif;
+}
+`,
+} as const
+/** @alpha */
+export const NextStudioNoScript = () => (
+  <noscript>
+    <div className="sanity-app-no-js__root">
+      <div className="sanity-app-no-js__content">
+        <style type="text/css" dangerouslySetInnerHTML={style} />
+        <h1>JavaScript disabled</h1>
+        <p>
+          Please <a href="https://www.enable-javascript.com/">enable JavaScript</a> in your
+          browser and reload the page to proceed.
+        </p>
+      </div>
+    </div>
+  </noscript>
+)

package/src/studio/head/NextStudioHead.tsx ADDED Viewed

@@ -0,0 +1,112 @@
+import _faviconPng from './apple-touch-icon.png'
+import _faviconIco from './favicon.ico'
+import _faviconSvg from './favicon.svg'
+const faviconPng = typeof _faviconPng === 'string' ? _faviconPng : _faviconPng.default
+const faviconIco = typeof _faviconIco === 'string' ? _faviconIco : _faviconIco.default
+const faviconSvg = typeof _faviconSvg === 'string' ? _faviconSvg : _faviconSvg.default
+/** @public */
+export interface NextStudioHeadProps {
+  /**
+   * @defaultValue 'utf-8'
+   */
+  charSet?: false | string
+  /**
+   * Sets the viewport to `viewport-fit=cover` to integrate with iOS devices with display cutouts (The Notch, Dynamic Island).
+   * Also sets `width=device-width, initial-scale=1` to make the studio page responsive.
+   * @defaultValue true
+   */
+  viewport?: boolean
+  /**
+   * It's common practice to hide the address to your Sanity Studio from search engines by setting `robots` to `noindex`
+   * @defaultValue 'noindex'
+   */
+  robots?: false | string
+  /**
+   * @defaultValue 'same-origin'
+   */
+  referrer?: false | string
+  /**
+   * Adds the same favicons as the `npx sanity dev` pipeline.
+   * @defaultValue true
+   */
+  favicons?: boolean
+  /**
+   * @defaultValue 'Sanity'
+   */
+  title?: false | string
+}
+/**
+ * In Next 13 appDir mode (`/app/studio/[[...index]]/head.tsx`):
+ * ```tsx
+ * // If you don't want to change any defaults you can just re-export the head component directly:
+ * export {NextStudioHead as default} from 'next-sanity/studio/head'
+ *
+ * // To customize it, use it as a children component:
+ * import {NextStudioHead} from 'next-sanity/studio/head'
+ *
+ * export default function CustomStudioHead() {
+ *   return (
+ *     <>
+ *       <NextStudioHead favicons={false} />
+ *       <link
+ *         rel="icon"
+ *         type="image/png"
+ *         sizes="32x32"
+ *         href="https://www.sanity.io/static/images/favicons/favicon-32x32.png"
+ *       />
+ *     </>
+ *   )
+ * }
+ * ```
+ * If you're using Next 12 or the `pages` folder (`/pages/studio/[[...index]].tsx`):
+ * ```tsx
+ * import Head from 'next/head'
+ * import {NextStudio} from 'next-sanity/studio'
+ * import {NextStudioHead} from 'next-sanity/studio/head'
+ *
+ * export default function StudioPage() {
+ *   return (
+ *     <>
+ *       <Head>
+ *         <NextStudioHead />
+ *       </Head>
+ *       <NextStudio config={config} />
+ *     </>
+ *   )
+ * }
+ * ```
+ * @public
+ */
+export function NextStudioHead(props: NextStudioHeadProps) {
+  const {
+    charSet = 'utf-8',
+    viewport = true,
+    robots = 'noindex',
+    referrer = 'same-origin',
+    favicons = true,
+    title = 'Sanity',
+  } = props
+  return (
+    <>
+      {charSet && <meta key="charset" charSet={charSet} />}
+      {viewport && (
+        <meta
+          key="viewport"
+          name="viewport"
+          // Studio implements display cutouts CSS (The iPhone Notch ™ ) and needs `viewport-fit=covered` for it to work correctly
+          content="width=device-width,initial-scale=1,viewport-fit=cover"
+        />
+      )}
+      {robots && <meta key="robots" name="robots" content={robots} />}
+      {referrer && <meta key="referrer" name="referrer" content={referrer} />}
+      {title && <title>{title}</title>}
+      {favicons && <link key="favicon.ico" rel="icon" href={faviconIco} sizes="any" />}
+      {favicons && <link key="apple-touch-icon.png" rel="apple-touch-icon" href={faviconPng} />}
+      {favicons && <link key="favicon.svg" rel="icon" href={faviconSvg} type="image/svg+xml" />}
+    </>
+  )
+}

package/src/studio/head/apple-touch-icon.png ADDED Viewed

Binary file

package/src/studio/head/favicon.ico ADDED Viewed

Binary file

package/src/studio/head/favicon.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect width="512" height="512" fill="#F03E2F" rx="30" />
+	<path d="M161.527 136.723C161.527 179.76 187.738 205.443 240.388 219.095L296 232.283C345.687 243.852 376 272.775 376 319.514C376 341.727 369.162 360.931 357.538 375.971C357.538 329.232 333.607 303.78 276.171 288.74L221.47 276.246C177.709 266.065 143.977 242.464 143.977 191.56C143.977 170.505 150.359 151.994 161.527 136.723Z" fill="white" />
+	<path opacity="0.5" d="M323.35 308.176C347.054 323.679 357.538 345.197 357.538 376.202C337.709 401.654 303.293 416 262.724 416C194.575 416 146.484 381.756 136 322.753H201.641C210.074 350.056 232.41 362.551 262.268 362.551C298.735 362.32 322.895 342.652 323.35 308.176Z" fill="white" />
+	<path opacity="0.5" d="M195.715 200.816C172.923 186.007 161.527 165.183 161.527 136.954C180.672 111.503 213.493 96 253.835 96C323.35 96 363.692 133.252 373.721 185.776H310.359C303.293 165.183 285.971 148.986 254.291 148.986C220.33 148.986 197.311 169.116 195.715 200.816Z" fill="white" />
+</svg>

package/src/studio/head/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './NextStudioHead'

package/src/studio/index.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export * from './NextStudio'
+export * from './NextStudioClientOnly'
+export * from './NextStudioLayout'
+export * from './NextStudioNoScript'
+export * from './usePrefersColorScheme'
+export * from './useTheme'

package/src/studio/loading.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {NextStudioLoading, type NextStudioLoadingProps} from './NextStudioLoading'

package/src/studio/usePrefersColorScheme.ts ADDED Viewed

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import type {ThemeColorSchemeKey} from '@sanity/ui'
+import {useSyncExternalStore} from 'react'
+function createStore() {
+  if (typeof document === 'undefined') {
+    return {
+      subscribe: () => () => {},
+      getSnapshot: () => 'light' as const,
+      getServerSnapshot: () => 'light' as const,
+    }
+  }
+  const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')
+  return {
+    subscribe: (onStoreChange: () => void) => {
+      matchMedia.addEventListener('change', onStoreChange)
+      return () => matchMedia.removeEventListener('change', onStoreChange)
+    },
+    getSnapshot: () => (matchMedia.matches ? 'dark' : 'light'),
+    getServerSnapshot: () => 'light' as const,
+  }
+}
+const store = createStore()
+/** @alpha */
+export function usePrefersColorScheme(): ThemeColorSchemeKey {
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot)
+}

package/src/studio/useTheme.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import {studioTheme} from '@sanity/ui'
+import {useMemo} from 'react'
+import type {Config, SingleWorkspace, StudioTheme} from 'sanity'
+/** @alpha */
+export function useTheme(
+  config?: Config | Required<Pick<SingleWorkspace, 'theme'>>
+): StudioTheme {
+  const workspace = useMemo<
+    SingleWorkspace | Required<Pick<SingleWorkspace, 'theme'>> | undefined
+  >(() => (Array.isArray(config) ? config[0] : config), [config])
+  return useMemo<StudioTheme>(() => workspace?.theme || studioTheme, [workspace])
+}

package/src/webhook/config.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import type {PageConfig} from 'next/types'
+/**
+ * Configurates the API function with the right runtime and body parsing to handle Sanity Webhook events.
+ * @public
+ */
+export const config: PageConfig = {
+  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',
+}

package/src/webhook/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './config'
2	+ export * from './parseBody'

package/src/webhook/parseBody.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import type {SanityDocument} from '@sanity/types'
+import sanityWebhook from '@sanity/webhook'
+import type {NextApiRequest} from 'next'
+// As `@sanity/webhook` isn't shipping ESM, extracting from the default export have the best ecosystem support
+const {isValidSignature, SIGNATURE_HEADER_NAME} = sanityWebhook
+import {_readBody as readBody} from './readBody'
+/** @public */
+export 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 async function parseBody(
+  req: NextApiRequest,
+  secret?: string,
+  waitForContentLakeEventualConsistency: boolean = true
+): Promise<ParseBody> {
+  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, 1000))
+  }
+  return {
+    body: body.trim() && JSON.parse(body),
+    isValidSignature: validSignature,
+  }
+}

package/src/webhook/readBody.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type {NextApiRequest} from 'next'
+/** @internal */
+export async function _readBody(readable: NextApiRequest): Promise<string> {
+  const chunks = []
+  for await (const chunk of readable) {
+    chunks.push(typeof chunk === 'string' ? Buffer.from(chunk) : chunk)
+  }
+  return Buffer.concat(chunks).toString('utf8')
+}