@sanity/cli 3.82.0 → 3.83.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/cli",
-  "version": "3.82.0",
+  "version": "3.83.0",
   "description": "Sanity CLI tool for managing Sanity installations, managing plugins, schemas and datasets",
   "keywords": [
     "sanity",
@@ -59,11 +59,11 @@
   "dependencies": {
     "@babel/traverse": "^7.23.5",
     "@sanity/client": "^6.28.4",
-    "@sanity/codegen": "3.82.0",
+    "@sanity/codegen": "3.83.0",
     "@sanity/runtime-cli": "^1.1.1",
     "@sanity/telemetry": "^0.8.0",
     "@sanity/template-validator": "^2.4.3",
-    "@sanity/util": "3.82.0",
+    "@sanity/util": "3.83.0",
     "chalk": "^4.1.2",
     "debug": "^4.3.4",
     "decompress": "^4.2.0",
@@ -77,13 +77,13 @@
     "validate-npm-package-name": "^3.0.0"
   },
   "devDependencies": {
-    "@repo/package.config": "3.82.0",
-    "@repo/test-config": "3.82.0",
+    "@repo/package.config": "3.83.0",
+    "@repo/test-config": "3.83.0",
     "@rexxars/gitconfiglocal": "^3.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@sanity/eslint-config-studio": "^4.0.0",
     "@sanity/generate-help-url": "^3.0.0",
-    "@sanity/types": "3.82.0",
+    "@sanity/types": "3.83.0",
     "@types/babel__traverse": "^7.20.5",
     "@types/configstore": "^5.0.1",
     "@types/cpx": "^1.5.2",
@@ -127,7 +127,7 @@
     "semver": "^7.3.5",
     "semver-compare": "^1.0.0",
     "tar": "^6.1.11",
-    "vite": "^6.2.3",
+    "vite": "^6.2.4",
     "vitest": "^3.1.1",
     "which": "^2.0.2",
     "xdg-basedir": "^4.0.0"
@@ -135,5 +135,5 @@
   "engines": {
     "node": ">=18"
   },
-  "gitHead": "4e83852759628260ad60f565bcaa61f95881eedc"
+  "gitHead": "33425815221b8705b9d83b9786475c01492bf6a0"
 }

package/src/actions/init-project/determineAppTemplate.ts

@@ -1,4 +1,4 @@
-const appTemplates = ['app-quickstart']
+const appTemplates = ['app-quickstart', 'app-sanity-ui']
 
 /**
  * Determine if a given template is a studio template.

package/src/actions/init-project/templates/appSanityUi.ts

@@ -0,0 +1,32 @@
+import {type ProjectTemplate} from '../initProject'
+
+const appSanityUiTemplate: ProjectTemplate = {
+  dependencies: {
+    '@sanity/sdk': '^0.0.0-rc',
+    '@sanity/sdk-react': '^0.0.0-rc',
+    '@sanity/ui': '^2',
+    'react': '^19',
+    'react-dom': '^19',
+    'styled-components': '^6.1.17',
+  },
+  devDependencies: {
+    /*
+     * this will be changed to eslint-config sanity,
+     *  eslint.config generation will be a fast follow
+     */
+    '@sanity/eslint-config-studio': '^5.0.1',
+    '@types/react': '^18.0.25',
+    'eslint': '^9.9.0',
+    'prettier': '^3.0.2',
+    'sanity': '^3',
+    'typescript': '^5.1.6',
+  },
+  entry: './src/App.tsx',
+  scripts: {
+    dev: 'sanity dev',
+    build: 'sanity build',
+    start: 'sanity start',
+  },
+}
+
+export default appSanityUiTemplate

package/src/actions/init-project/templates/index.ts

@@ -1,5 +1,6 @@
 import {type ProjectTemplate} from '../initProject'
 import appTemplate from './appQuickstart'
+import appSanityUiTemplate from './appSanityUi'
 import blog from './blog'
 import clean from './clean'
 import getStartedTemplate from './getStarted'
@@ -12,6 +13,7 @@ const templates: Record<string, ProjectTemplate | undefined> = {
   blog,
   clean,
   'app-quickstart': appTemplate,
+  'app-sanity-ui': appSanityUiTemplate,
   'get-started': getStartedTemplate,
   moviedb,
   shopify,

package/src/studioDependencies.ts

@@ -10,7 +10,7 @@ export const studioDependencies = {
     // Non-Sanity dependencies
     'react': '^18.2.0',
     'react-dom': '^18.2.0',
-    'styled-components': '^6.1.8',
+    'styled-components': '^6.1.15',
   },
 
   devDependencies: {

package/templates/app-quickstart/src/ExampleComponent.css

@@ -5,13 +5,70 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
+.example-avatar-container {
+  position: relative;
+  margin-block-end: 1rem;
+}
+
+@keyframes wave {
+  0% {
+    rotate: 0deg;
+  }
+  2% {
+    rotate: 20deg;
+    filter: blur(1px);
+  }
+  4% {
+    rotate: 0deg;
+  }
+  6% {
+    rotate: -20deg;
+  }
+  8% {
+    rotate: 0deg;
+  }
+  10% {
+    rotate: 20deg;
+  }
+  12% {
+    rotate: 0deg;
+  }
+  14% {
+    rotate: -20deg;
+  }
+  16% {
+    rotate: 0deg;
+    filter: blur(0);
+  }
+}
+
+.example-avatar-container:after {
+  content: '👋';
+  position: absolute;
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-container: center;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  translate: -25% -25%;
+  transform-origin: 100% 100%;
+  animation: wave 4s infinite linear;
+}
+
+.example-avatar {
+  inline-size: 4rem;
+  aspect-ratio: 1;
+  border-radius: 50%;
+}
+
 .example-heading {
   color: #333;
   margin-top: 0;
-  font-size: 1.8rem;
+  font-size: 2rem;
 }
 
-.example-text {
+p {
   color: #666;
   line-height: 1.6;
 }
@@ -23,4 +80,5 @@
   font-family: monospace;
   margin-top: 1.5rem;
   border-left: 3px solid #e0e0e0;
+  line-height: 1.5;
 }

package/templates/app-quickstart/src/ExampleComponent.tsx

@@ -1,18 +1,33 @@
+import {useCurrentUser, type CurrentUser} from '@sanity/sdk-react'
 import './ExampleComponent.css'
 
 export function ExampleComponent() {
+  const user: CurrentUser | null = useCurrentUser()
+
   return (
     <div className="example-container">
-      <h1 className="example-heading">Welcome to your Sanity App!</h1>
+      {user?.profileImage ? (
+        <div className="example-avatar-container">
+          <img src={user.profileImage} alt="" className="example-avatar" />
+        </div>
+      ) : (
+        ''
+      )}
+      <h1 className="example-heading">
+        Welcome to your Sanity App{user?.name ? `, ${user.name}` : ''}!
+      </h1>
       <p className="example-text">
-        This is an example component. You can replace this with your own content
-        by creating a new component and importing it in App.tsx.
+        This is an example component. You can replace this with your own content by creating a new
+        component and importing it in App.tsx.
       </p>
       <div className="code-hint">
-        <p>Quick tip: Create new components in separate files and import them like this in App.tsx / App.jsx:</p>
+        <p>
+          Quick tip: Create new components in separate files and import them like this in App.tsx /
+          App.jsx:
+        </p>
         <pre>{`import {YourComponent} from './YourComponent'
 
-// Then use it in your JSX 
+// Then use it in your JSX
 <SanityApp sanityConfigs={sanityConfigs}>
   <YourComponent />
 </SanityApp>`}</pre>

package/templates/app-sanity-ui/src/App.tsx

@@ -0,0 +1,30 @@
+import {type SanityConfig} from '@sanity/sdk'
+import {SanityApp} from '@sanity/sdk-react'
+import {ThemeProvider} from '@sanity/ui'
+import {buildTheme} from '@sanity/ui/theme'
+import {ExampleComponent} from './ExampleComponent'
+
+const theme = buildTheme()
+
+export function App() {
+  // apps can access many different projects or other sources of data
+  const sanityConfigs: SanityConfig[] = [
+    {
+      projectId: 'project-id',
+      dataset: 'dataset-name',
+    }
+  ]
+
+  return (
+    <div className="app-container">
+      <SanityApp sanityConfigs={sanityConfigs} fallback={<div>Loading...</div>}>
+        <ThemeProvider theme={theme}>
+          {/* add your own components here! */}
+          <ExampleComponent />
+        </ThemeProvider>
+      </SanityApp>
+    </div>
+  )
+}
+
+export default App

package/templates/app-sanity-ui/src/ExampleComponent.tsx

@@ -0,0 +1,33 @@
+import {type CurrentUser, useCurrentUser} from '@sanity/sdk-react'
+import {Avatar, Card, Container, Flex, Heading, Stack, Text} from '@sanity/ui'
+
+export function ExampleComponent() {
+  const user: CurrentUser | null = useCurrentUser()
+
+  return (
+    <Container width={1}>
+      <Card padding={5} shadow={3} radius={3} marginY={5}>
+        <Flex align="center" direction="column" gap={5} marginY={4}>
+          <Avatar size={3} src={user?.profileImage} />
+          <Heading as="h1">Welcome to your Sanity App, {user?.name}!</Heading>
+          <Stack space={4}>
+            <Text muted>
+              This is an example component, rendered with Sanity UI and the{' '}
+              <code>useCurrentUser</code> hook from the Sanity App SDK. You can import and use any
+              Sanity UI components and App SDK hooks anywhere in this application.
+            </Text>
+            <Text muted>
+              You can also replace this component with components of your own. Render them in your
+              app by importing and using them in your application’s <code>src/App.tsx|jsx</code>{' '}
+              file.
+            </Text>
+            <Text muted>
+              Looking for more guidance? See the <a href="https://sanity.io/ui">Sanity UI docs</a>{' '}
+              and the <a href="https://sdk-docs.sanity.dev">Sanity App SDK docs</a>!
+            </Text>
+          </Stack>
+        </Flex>
+      </Card>
+    </Container>
+  )
+}