sanity-io · stipsan · Aug 12, 2024 · Sep 16, 2024 · Sep 16, 2024 · Sep 25, 2024
diff --git a/.github/renovate.json b/.github/renovate.json
@@ -1,4 +1,12 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["local>sanity-io/renovate-config"]
+  "extends": ["local>sanity-io/renovate-config"],
+  "packageRules": [
+    {
+      "matchDepNames": ["xstate"],
+      "matchDepTypes": ["devDependencies", "peerDependencies"],
+      "rangeStrategy": "bump",
+      "semanticCommitType": "fix"
+    }
+  ]
 }
diff --git a/examples/visual-editing/.env.example b/examples/visual-editing/.env.example
@@ -0,0 +1,3 @@
+VITE_SANITY_API_TOKEN=
+VITE_SANITY_API_PROJECT_ID=
+VITE_SANITY_API_DATASET=
diff --git a/examples/visual-editing/.eslintrc.cjs b/examples/visual-editing/.eslintrc.cjs
@@ -0,0 +1,53 @@
+module.exports = {
+  extends: '../../.eslintrc.cjs',
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  overrides: [
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: `${__dirname}`,
+      },
+      extends: [
+        'eslint:recommended',
+        'plugin:prettier/recommended',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react-hooks/recommended',
+        'plugin:react/jsx-runtime',
+      ],
+      plugins: ['import', '@typescript-eslint', 'prettier', 'react-compiler'],
+      rules: {
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/interface-name-prefix': 'off',
+        '@typescript-eslint/member-delimiter-style': 'off',
+        '@typescript-eslint/no-empty-interface': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/consistent-type-imports': [
+          'error',
+          {prefer: 'type-imports'},
+        ],
+        '@typescript-eslint/no-dupe-class-members': ['error'],
+        '@typescript-eslint/no-shadow': ['error'],
+        'unused-imports/no-unused-imports': 'error',
+        'unused-imports/no-unused-vars': ['warn'],
+        'import/no-duplicates': ['error', {'prefer-inline': true}],
+        'import/first': 'error',
+        'import/newline-after-import': 'error',
+        'import/consistent-type-specifier-style': ['error', 'prefer-inline'],
+        'import/order': 'off', // handled by simple-import-sort
+        'sort-imports': 'off', // handled by simple-import-sort
+        'simple-import-sort/imports': 'error',
+        'simple-import-sort/exports': 'error',
+        'react-compiler/react-compiler': 'error',
+      },
+    },
+  ],
+}
diff --git a/examples/visual-editing/.gitignore b/examples/visual-editing/.gitignore
@@ -0,0 +1,3 @@
+.env
+.vercel
+.env*.local
diff --git a/examples/visual-editing/index.html b/examples/visual-editing/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>Sanity Visual Editing example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/main.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/examples/visual-editing/main.tsx b/examples/visual-editing/main.tsx
@@ -0,0 +1,81 @@
+import {studioTheme, ThemeProvider} from '@sanity/ui'
+import {lazy, Suspense, useState, useSyncExternalStore} from 'react'
+import {createRoot} from 'react-dom/client'
+import {createGlobalStyle} from 'styled-components'
+
+const Studio = lazy(() => import('./studio'))
+const Preview = lazy(() => import('./preview'))
+
+const SCROLLBAR_SIZE = 12 // px
+const SCROLLBAR_BORDER_SIZE = 4 // px
+
+const GlobalStyle = createGlobalStyle`
+  html, body {
+    margin: 0;
+    padding: 0;
+    overscroll-behavior: none;
+  }
+
+  body {
+    scrollbar-gutter: stable;
+  }
+
+  ::-webkit-scrollbar {
+      width: ${SCROLLBAR_SIZE}px;
+      height: ${SCROLLBAR_SIZE}px;
+    }
+
+    ::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-clip: content-box;
+      background-color: var(--card-border-color, ${({theme}) => theme.sanity.color.border});
+      border: ${SCROLLBAR_BORDER_SIZE}px solid transparent;
+      border-radius: ${SCROLLBAR_SIZE * 2}px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: var(--card-muted-fg-color, ${({theme}) => theme.sanity.color.muted.fg});
+    }
+
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+`
+
+createRoot(document.getElementById('root') as HTMLElement).render(
+  <ThemeProvider theme={studioTheme}>
+    <Router />
+    <GlobalStyle />
+  </ThemeProvider>,
+)
+
+function Router() {
+  const [isPreview] = useState(() => {
+    const {searchParams} = new URL(location.href)
+    return searchParams.has('preview')
+  })
+  const [isDebug] = useState(() => {
+    const {searchParams} = new URL(location.href)
+    return searchParams.has('debug')
+  })
+  // If we're being inside an iframe, or spawned from another window, render the preview
+  const isStudio = useSyncExternalStore(
+    subscribe,
+    () => window.self === window.top && !window.opener,
+  )
+
+  return (
+    <Suspense>
+      {!isPreview && isStudio ? (
+        <Studio debug={isDebug} />
+      ) : (
+        <Preview debug={isDebug} />
+      )}
+    </Suspense>
+  )
+}
+
+const subscribe = () => () => {}
diff --git a/examples/visual-editing/package.json b/examples/visual-editing/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "example-visual-editing",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "main": "package.json",
+  "scripts": {
+    "dev": "vite dev",
+    "start": "vite dev",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@react-spring/three": "^9.7.5",
+    "@react-three/drei": "^9.115.0",
+    "@react-three/fiber": "^8.17.10",
+    "@sanity/client": "^6.22.4",
+    "@sanity/icons": "^3.4.0",
+    "@sanity/mutate": "workspace:*",
+    "@sanity/sanitype": "^0.6.1",
+    "@sanity/ui": "^2.8.23",
+    "@statelyai/inspect": "^0.4.0",
+    "@types/three": "^0.170.0",
+    "@xstate/react": "^5.0.0",
+    "comlink": "^4.4.2",
+    "groq-js": "^1.14.0",
+    "mendoza": "^3.0.7",
+    "nice-color-palettes": "^4.0.0",
+    "polished": "^4.3.1",
+    "react": "^18.3.1",
+    "react-colorful": "^5.6.1",
+    "react-compiler-runtime": "beta",
+    "react-dom": "^18.3.1",
+    "react-jason": "^1.1.2",
+    "rxjs": "^7.8.1",
+    "styled-components": "^6.1.13",
+    "three": "^0.170.0",
+    "xstate": "^5.19.0"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "catalog:",
+    "@typescript-eslint/parser": "catalog:",
+    "@vitejs/plugin-react": "^4.3.3",
+    "babel-plugin-react-compiler": "beta",
+    "eslint": "catalog:",
+    "eslint-config-prettier": "catalog:",
+    "eslint-config-sanity": "catalog:",
+    "eslint-plugin-import": "catalog:",
+    "eslint-plugin-prettier": "catalog:",
+    "eslint-plugin-react": "catalog:",
+    "eslint-plugin-react-compiler": "beta",
+    "eslint-plugin-react-hooks": "catalog:",
+    "eslint-plugin-simple-import-sort": "catalog:",
+    "eslint-plugin-unused-imports": "catalog:",
+    "typescript": "catalog:",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.4"
+  }
+}
diff --git a/examples/visual-editing/preview/App.tsx b/examples/visual-editing/preview/App.tsx
@@ -0,0 +1,94 @@
+import {Box, Card, Grid} from '@sanity/ui'
+import {useRef, useState} from 'react'
+
+import {DOCUMENT_IDS} from '../shared/constants'
+import {useVisualEditingDocumentSnapshot} from './context'
+import EditableShoeComponent from './EditableShoe'
+import PreviewShoeComponent from './PreviewShoe'
+
+export default function App() {
+  const [editing, setEditing] = useState(DOCUMENT_IDS[0]!)
+  const scrollRef = useRef(0)
+
+  return (
+    <>
+      <Box
+        style={{height: '144px', overflowX: 'scroll'}}
+        onScroll={e => {
+          scrollRef.current = e.currentTarget.scrollLeft / 320
+        }}
+      >
+        <Grid
+          style={{gridAutoFlow: 'column dense', width: 'max-content'}}
+          height="fill"
+          gap={3}
+        >
+          {DOCUMENT_IDS.map((id, index) => (
+            <PreviewShoe
+              key={id}
+              documentId={id}
+              selected={id === editing}
+              setEditing={setEditing}
+              scrollRef={scrollRef}
+              index={index}
+            />
+          ))}
+        </Grid>
+      </Box>
+      <EditableShoe documentId={editing} />
+    </>
+  )
+}
+
+function EditableShoe(props: {documentId: string}) {
+  const {documentId} = props
+  const snapshot = useVisualEditingDocumentSnapshot(documentId)
+
+  return (
+    <EditableShoeComponent
+      documentId={snapshot?._id}
+      title={snapshot?.name}
+      model={snapshot?.model || {}}
+    />
+  )
+}
+
+function PreviewShoe(props: {
+  documentId: string
+  selected: boolean
+  setEditing: React.Dispatch<React.SetStateAction<string>>
+  scrollRef: React.MutableRefObject<number>
+  index: number
+}) {
+  const {documentId, selected, setEditing, scrollRef, index} = props
+
+  const snapshot = useVisualEditingDocumentSnapshot(documentId) || ({} as any)
+  const {name, model} = snapshot
+
+  return (
+    <Card
+      __unstable_focusRing
+      as="button"
+      style={{
+        aspectRatio: '1 / 1',
+        position: 'relative',
+        boxSizing: 'content-box',
+        boxShadow: selected
+          ? 'inset 0 0 0 2px var(--card-avatar-blue-bg-color),inset 0 0 0 1px var(--card-border-color)'
+          : undefined,
+      }}
+      height="fill"
+      tone={selected ? 'primary' : 'transparent'}
+      radius={3}
+      onClick={() => setEditing(documentId)}
+      border={true}
+    >
+      <PreviewShoeComponent
+        title={model ? name : 'Loading…'}
+        model={model || {}}
+        scrollRef={scrollRef}
+        offsetLeft={index * 1.1}
+      />
+    </Card>
+  )
+}