test(sanity): add components API test

cypress/integration/config/componentsApi.test.js

@@ -0,0 +1,55 @@
+describe('Config: studio.components', () => {
+  beforeEach(() => {
+    cy.visit('custom-components/content')
+  })
+
+  describe('createConfig', () => {
+    it('default layout is displayed inside renderLayout component', () => {
+      cy.get('[data-testid="test-layout-config"]')
+        .find('[data-testid="studio-layout"]')
+        .should('be.visible')
+    })
+
+    it('logo is displayed with context value from renderLayout', () => {
+      cy.get('[data-testid="logo"]').contains('Context value')
+    })
+
+    it('default navbar is displayed with banner from renderNavbar', () => {
+      cy.get('[data-testid="test-navbar-config"]')
+        .find('[data-testid="test-navbar-banner-config"]')
+        .should('be.visible')
+      cy.get('[data-testid="test-navbar-config"]')
+        .find('[data-testid="navbar"]')
+        .should('be.visible')
+    })
+
+    it('default tool menu is displayed inside renderToolMenu component', () => {
+      cy.get('[data-testid="test-tool-menu-config"]')
+        .find('[data-testid="tool-collapse-menu"]')
+        .should('be.visible')
+    })
+  })
+
+  describe('createPlugin', () => {
+    it('custom layout in createConfig is displayed inside renderLayout component', () => {
+      cy.get('[data-testid="test-layout-plugin"]')
+        .find('[data-testid="test-layout-config"]')
+        .find('[data-testid="studio-layout"]')
+        .should('be.visible')
+    })
+
+    it('custom navbar in createConfig is displayed inside renderNavbar component', () => {
+      cy.get('[data-testid="test-navbar-plugin"]')
+        .find('[data-testid="test-navbar-config"]')
+        .find('[data-testid="navbar"]')
+        .should('be.visible')
+    })
+
+    it('custom tool menu in createConfig is displayed inside renderToolMenu component', () => {
+      cy.get('[data-testid="test-tool-menu-plugin"]')
+        .find('[data-testid="test-tool-menu-config"]')
+        .find('[data-testid="tool-collapse-menu"]')
+        .should('be.visible')
+    })
+  })
+})

dev/test-studio/components/customComponents.tsx

@@ -0,0 +1,79 @@
+import React, {createContext, useContext} from 'react'
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+import {LogoProps, NavbarProps, LayoutProps, createPlugin, ToolMenuProps} from 'sanity'
+
+export const componentsPlugin = createPlugin({
+  name: 'components-plugin',
+  studio: {
+    components: {
+      Layout: (props) => (
+        <Box height="fill" data-testid="test-layout-plugin">
+          {props.renderLayout(props)}
+        </Box>
+      ),
+      Logo: (props) => <Box data-testid="test-logo-plugin">{props.renderLogo(props)}</Box>,
+      Navbar: (props) => <Box data-testid="test-navbar-plugin">{props.renderNavbar(props)}</Box>,
+      ToolMenu: (props) => (
+        <Box data-testid="test-tool-menu-plugin">{props.renderToolMenu(props)}</Box>
+      ),
+    },
+  },
+})
+
+// Layout
+const TitleContext = createContext<string>('')
+const useTitleContext = () => useContext(TitleContext)
+
+export function CustomLayout(props: LayoutProps) {
+  const {renderLayout} = props
+
+  return (
+    <TitleContext.Provider value="Context value">
+      <Box height="fill" data-testid="test-layout-config">
+        {renderLayout(props)}
+      </Box>
+    </TitleContext.Provider>
+  )
+}
+
+// Logo
+export function CustomLogo(props: LogoProps) {
+  const title = useTitleContext()
+
+  return props.renderLogo({...props, title})
+}
+
+// Navbar
+export function CustomNavbar(props: NavbarProps) {
+  return (
+    <Stack data-testid="test-navbar-config">
+      <Card padding={4} tone="primary" data-testid="test-navbar-banner-config">
+        <Flex align="center" gap={4}>
+          <Text weight="semibold" size={1}>
+            This banner is rendered with <code>{`components.Navbar`}</code> in{' '}
+            <code>{`createConfig`}</code>
+          </Text>
+        </Flex>
+      </Card>
+
+      {props.renderNavbar(props)}
+    </Stack>
+  )
+}
+
+// ToolMenu
+export function CustomToolMenu(props: ToolMenuProps) {
+  return (
+    <Card
+      data-testid="test-tool-menu-config"
+      paddingX={1}
+      paddingY={props.context === 'sidebar' ? 1 : undefined}
+      radius={2}
+      shadow={1}
+      sizing="border"
+      tone="primary"
+    >
+      {props.renderToolMenu(props)}
+    </Card>
+  )
+}

dev/test-studio/sanity.config.ts

@@ -1,4 +1,3 @@
-//import {codeInput} from '@sanity/code-input'
 import {BookIcon} from '@sanity/icons'
 import {visionTool} from '@sanity/vision'
 import {createConfig, createPlugin} from 'sanity'
@@ -11,23 +10,21 @@ import {languageFilter} from './plugins/language-filter'
 import {schemaTypes} from './schema'
 import {defaultDocumentNode, newDocumentOptions, structure} from './structure'
 import {workshopTool} from './workshop'
+import {
+  CustomLogo,
+  CustomLayout,
+  CustomNavbar,
+  CustomToolMenu,
+  componentsPlugin,
+} from './components/customComponents'
 
 const sharedSettings = createPlugin({
   name: 'sharedSettings',
   schema: {
     types: schemaTypes,
     templates: resolveInitialValueTemplates,
   },
-  // navbar: {
-  //   components: {
-  //     ToolMenu: ToolMenu,
-  //   },
-  // },
   form: {
-    // unstable: {
-    //   CustomMarkers,
-    //   Markers,
-    // },
     image: {
       assetSources: [imageAssetSource],
     },
@@ -37,12 +34,7 @@ const sharedSettings = createPlugin({
     newDocumentOptions,
   },
   plugins: [
-    // codeInput(),
     deskTool({
-      // TODO:
-      // components: {
-      //   LanguageFilter,
-      // },
       icon: BookIcon,
       name: 'content',
       title: 'Content',
@@ -79,19 +71,43 @@ export default createConfig([
   {
     name: 'default',
     title: 'Test Studio',
-    logo: Branding,
     projectId: 'ppsg7ml5',
     dataset: 'test',
     plugins: [sharedSettings()],
     basePath: '/test',
+    studio: {
+      components: {
+        Logo: Branding,
+      },
+    },
   },
   {
     name: 'playground',
     title: 'Test Studio (playground)',
-    logo: Branding,
     projectId: 'ppsg7ml5',
     dataset: 'playground',
     plugins: [sharedSettings()],
     basePath: '/playground',
+    studio: {
+      components: {
+        Logo: Branding,
+      },
+    },
+  },
+  {
+    name: 'custom-components',
+    title: 'Test Studio (custom-components)',
+    projectId: 'ppsg7ml5',
+    dataset: 'test',
+    plugins: [sharedSettings(), componentsPlugin()],
+    basePath: '/custom-components',
+    studio: {
+      components: {
+        Layout: CustomLayout,
+        Logo: CustomLogo,
+        Navbar: CustomNavbar,
+        ToolMenu: CustomToolMenu,
+      },
+    },
   },
 ])