feat: initialize composer and add it to next app

.npm-registry/.gitignore

@@ -0,0 +1 @@
+!*.tgz

apps/nextjs/next.config.mjs

@@ -5,6 +5,9 @@ const nextConfig = {
   experimental: {
     logging: 'verbose',
   },
+
+  // todo: maybe remove this in production mode?
+  transpilePackages: ['@sanity/composer', '@sanity/overlays'],
 }
 
 export default withBundleAnalyzer({

apps/nextjs/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@next/bundle-analyzer": "13.4.19",
+    "@sanity/composer": "workspace:*",
     "@sanity/overlays": "workspace:*",
     "@types/node": "20.5.9",
     "@types/react": "18.2.21",
@@ -19,9 +20,11 @@
     "eslint": "8.48.0",
     "eslint-config-next": "13.4.19",
     "next": "13.4.19",
+    "next-sanity": "^5.4.6",
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "sanity": "^3.16.4",
     "styled-components": "^5.3.11",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"

apps/nextjs/sanity.cli.ts

@@ -0,0 +1,11 @@
+/* eslint-disable no-process-env */
+import { loadEnvConfig } from '@next/env'
+import { defineCliConfig } from 'sanity/cli'
+
+const dev = process.env.NODE_ENV !== 'production'
+loadEnvConfig(__dirname, dev, { info: () => null, error: console.error })
+
+const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
+const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET
+
+export default defineCliConfig({ api: { projectId, dataset } })

apps/nextjs/sanity.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'sanity'
+import { composerTool } from '@sanity/composer'
+
+const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!
+const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!
+
+export default defineConfig({
+  basePath: '/studio',
+
+  projectId,
+  dataset,
+
+  plugins: [
+    composerTool({
+      name: 'composer',
+      previewUrl: '/previews?',
+    }),
+  ],
+})

apps/nextjs/src/app/studio/[[...path]]/Studio.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import { NextStudio } from 'next-sanity/studio'
+
+import config from '../../../../sanity.config'
+
+export function Studio() {
+  //  Supports the same props as `import {Studio} from 'sanity'`, `config` is required
+  return <NextStudio config={config} />
+}

apps/nextjs/src/app/studio/[[...path]]/page.tsx

@@ -0,0 +1,11 @@
+import { Studio } from './Studio'
+
+// Ensures the Studio route is statically generated
+export const dynamic = 'force-static'
+
+// Set the right `viewport`, `robots` and `referer` meta tags
+export { metadata } from 'next-sanity/studio/metadata'
+
+export default function StudioPage() {
+  return <Studio />
+}

apps/nextjs/tsconfig.json

@@ -18,10 +18,20 @@
         "name": "next"
       }
     ],
+    "rootDir": "../..",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@sanity/composer": ["../../packages/composer/src"],
+      "@sanity/overlays": ["../../packages/overlays/src"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "../../packages/composer/src",
+    "../../packages/overlays/src",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }

package.json

@@ -12,5 +12,10 @@
     "prettier-plugin-packagejson": "^2.4.5",
     "turbo": "1.10.13"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "pnpm": {
+    "overrides": {
+      "sanity": "file:./.npm-registry/sanity-v3.16.4.tgz"
+    }
+  }
 }

packages/composer/.eslintignore

@@ -0,0 +1 @@
+dist

packages/composer/.releaserc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@sanity/semantic-release-preset",
+  "branches": ["main"]
+}

packages/composer/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Sanity
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/composer/package.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from '@sanity/pkg-utils'
+
+export default defineConfig({
+  extract: {
+    rules: {
+      'ae-forgotten-export': 'warn',
+      'ae-incompatible-release-tags': 'warn',
+      'ae-missing-release-tag': 'warn',
+    },
+  },
+  minify: true,
+  tsconfig: 'tsconfig.build.json',
+})

packages/composer/package.json

@@ -0,0 +1,125 @@
+{
+  "name": "@sanity/composer",
+  "version": "0.0.0",
+  "license": "MIT",
+  "author": "Sanity.io <[email protected]>",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "require": "./dist/index.cjs",
+      "node": {
+        "module": "./dist/index.js",
+        "import": "./dist/index.cjs.js"
+      },
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "pkg build --strict && pkg --strict",
+    "lint": "eslint --max-warnings 0 .",
+    "prepublishOnly": "npm run build",
+    "release": "semantic-release || semantic-release --dry-run --debug",
+    "test": "tsc --noEmit",
+    "watch": "pkg watch --strict"
+  },
+  "browserslist": [
+    "> 0.2% and last 2 versions and supports es6-module and supports es6-module-dynamic-import and not dead and not IE 11",
+    "maintained node versions"
+  ],
+  "prettier": {
+    "semi": false,
+    "singleQuote": true
+  },
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaFeatures": {
+        "jsx": true
+      },
+      "ecmaVersion": 2018,
+      "sourceType": "module"
+    },
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
+    },
+    "plugins": [
+      "@typescript-eslint",
+      "react",
+      "react-hooks",
+      "simple-import-sort",
+      "prettier"
+    ],
+    "extends": [
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended",
+      "plugin:react/jsx-runtime",
+      "eslint:recommended",
+      "plugin:prettier/recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "rules": {
+      "no-console": "error",
+      "no-warning-comments": [
+        "warn",
+        {
+          "location": "start",
+          "terms": [
+            "todo",
+            "@todo",
+            "fixme"
+          ]
+        }
+      ],
+      "@typescript-eslint/explicit-module-boundary-types": "error",
+      "@typescript-eslint/member-delimiter-style": "off",
+      "@typescript-eslint/no-empty-interface": "off",
+      "prettier/prettier": "warn",
+      "react-hooks/exhaustive-deps": "error",
+      "react-hooks/rules-of-hooks": "error",
+      "react/prop-types": "off",
+      "simple-import-sort/exports": "warn",
+      "simple-import-sort/imports": "warn"
+    },
+    "root": true
+  },
+  "dependencies": {
+    "sanity": "^3.16.4"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "styled-components": "^5.3.11"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "react-is": "^18",
+    "styled-components": "^5.3.11",
+    "typescript": "^5.2.2"
+  },
+  "engines": {
+    "node": ">=16.14"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}

packages/composer/src/ComposerTool.tsx

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react'
+import { Tool } from 'sanity'
+
+import { ComposerPluginOptions } from './types'
+
+export default function ComposerTool(props: {
+  tool: Tool<ComposerPluginOptions>
+}): ReactElement {
+  const { tool } = props
+
+  return <div>ComposerTool: {tool.options?.previewUrl}</div>
+}

packages/composer/src/index.ts

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

packages/composer/src/plugin.ts

@@ -0,0 +1,24 @@
+import { lazy } from 'react'
+import { definePlugin } from 'sanity'
+
+import { ComposerPluginOptions } from './types'
+
+export const composerTool = definePlugin<ComposerPluginOptions>((options) => {
+  return {
+    tools: [
+      {
+        name: options.name || 'composer',
+        component: lazy(() => import('./ComposerTool')),
+        options,
+      },
+    ],
+
+    document: {
+      unstable_banners: (prev) => [
+        ...prev,
+        // todo: add locations banner
+        // todo: add document type header
+      ],
+    },
+  }
+})

packages/composer/src/types.ts

@@ -0,0 +1,4 @@
+export interface ComposerPluginOptions {
+  name?: string
+  previewUrl: string
+}

packages/composer/tsconfig.base.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  }
+}

packages/composer/tsconfig.build.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.base",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "declarationDir": "lib/dts"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "node_modules"]
+}

packages/composer/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.base",
+  "compilerOptions": {
+    "incremental": true,
+    "noEmit": true,
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["dist", "node_modules"]
+}