dev(sanity): update workshop stories with components API

sanity-io · Oct 6, 2022 · 287b20d · 287b20d
1 parent 6f41653
commit 287b20d
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 31 deletions.
diff --git a/packages/sanity/src/core/components/previews/__workshop__/GeneralPreviewStory.tsx b/packages/sanity/src/core/components/previews/__workshop__/GeneralPreviewStory.tsx
@@ -63,6 +63,23 @@ export default function GeneralPreviewStory() {
     return false
   }, [layout, mediaKey])
 
+  const previewProps: Omit<PreviewProps, 'renderDefault' | 'schemaType'> = useMemo(
+    () => ({
+      description,
+      isPlaceholder,
+      media,
+      progress,
+      status: status && (
+        <Text muted size={1}>
+          <EditIcon />
+        </Text>
+      ),
+      title,
+      subtitle,
+    }),
+    [description, isPlaceholder, media, progress, status, subtitle, title]
+  )
+
   const component = layout && previewComponents[layout]
 
   if (!component) {
@@ -84,19 +101,10 @@ export default function GeneralPreviewStory() {
             selected={interactive ? selected : undefined}
             style={{lineHeight: 0}}
           >
-            {createElement(component as React.ComponentType<PreviewProps>, {
-              description,
-              isPlaceholder,
-              media,
-              progress,
-              status: status && (
-                <Text muted size={1}>
-                  <EditIcon />
-                </Text>
-              ),
-              title,
-              subtitle,
-            })}
+            {createElement(
+              component as React.ComponentType<PreviewProps>,
+              previewProps as PreviewProps
+            )}
           </Card>
         </Container>
       </Flex>

diff --git a/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx b/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx
@@ -67,6 +67,24 @@ export default function PortableTextPreviewStory() {
     return false
   }, [layout, mediaKey])
 
+  const previewProps: Omit<PreviewProps, 'renderDefault'> = useMemo(
+    () => ({
+      actions: withActions && (
+        <Button fontSize={1} icon={EllipsisVerticalIcon} mode="bleed" paddingX={2} />
+      ),
+      isPlaceholder,
+      media,
+      status: status && (
+        <Text muted size={1}>
+          <EditIcon />
+        </Text>
+      ),
+      title,
+      subtitle,
+    }),
+    [isPlaceholder, media, status, subtitle, title, withActions]
+  )
+
   const component = layout && previewComponents[layout]
 
   if (!component) {
@@ -82,20 +100,7 @@ export default function PortableTextPreviewStory() {
       <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
         <Container width={1}>
           <Card border padding={padding[layout]} radius={1} style={{lineHeight: 0}}>
-            {createElement(component as ComponentType<PreviewProps>, {
-              actions: withActions && (
-                <Button fontSize={1} icon={EllipsisVerticalIcon} mode="bleed" paddingX={2} />
-              ),
-              isPlaceholder,
-              media,
-              status: status && (
-                <Text muted size={1}>
-                  <EditIcon />
-                </Text>
-              ),
-              title,
-              subtitle,
-            })}
+            {createElement(component as ComponentType<PreviewProps>, previewProps as PreviewProps)}
           </Card>
         </Container>
       </Flex>

diff --git a/packages/sanity/src/core/form/inputs/ObjectInput/__tests__/ObjectInput.test.tsx b/packages/sanity/src/core/form/inputs/ObjectInput/__tests__/ObjectInput.test.tsx
@@ -6,6 +6,8 @@ import {FormCallbacksProvider} from '../../../studio/contexts/FormCallbacks'
 import {createSchema} from '../../../../schema'
 import {render} from './test-utils'
 
+const noopRenderDefault = () => <></>
+
 const defs = {
   basic: defineType({
     title: 'very basic object',
@@ -76,7 +78,7 @@ function returnNull(...args: any[]): null {
   return null
 }
 
-const noopProps: Omit<ObjectInputProps, 'schemaType'> = {
+const noopProps: Omit<ObjectInputProps, 'schemaType' | 'renderDefault'> = {
   groups: [],
   onChange: noop,
   onCollapseField: noop,
@@ -105,7 +107,13 @@ const noopProps: Omit<ObjectInputProps, 'schemaType'> = {
 
 describe('basic examples', () => {
   it('renders as empty if given no members', () => {
-    const {container} = render(<ObjectInput {...noopProps} schemaType={getTestSchema('basic')} />)
+    const {container} = render(
+      <ObjectInput
+        {...noopProps}
+        renderDefault={noopRenderDefault}
+        schemaType={getTestSchema('basic')}
+      />
+    )
     expect(container).toBeEmptyDOMElement()
   })
   it('calls renderField and renderInput for each member', () => {
@@ -157,6 +165,7 @@ describe('basic examples', () => {
           schemaType={schemaType}
           renderInput={renderInput}
           renderField={renderField}
+          renderDefault={noopRenderDefault}
         />
       </FormCallbacksProvider>
     )

diff --git a/packages/sanity/src/core/studio/components/navbar/__workshop__/NavbarStory.tsx b/packages/sanity/src/core/studio/components/navbar/__workshop__/NavbarStory.tsx
@@ -13,8 +13,8 @@ import styled from 'styled-components'
 import {createConfig, Tool} from '../../../../config'
 import {isNonNullable} from '../../../../util/isNonNullable'
 import {isTruthy} from '../../../../util/isTruthy'
+import {useNavbarComponent} from '../../../studio-components-hooks'
 import {StudioProvider} from '../../../StudioProvider'
-import {useWorkspace} from '../../../workspace'
 
 const SearchFullscreenPortalCard = styled(Card)`
   display: flex;
@@ -40,7 +40,7 @@ export const NavbarContext = createContext<NavbarContextValue>({
 export default function NavbarStory() {
   const projectName = useString('Project name', undefined)
   const [portalEl, setPortalEl] = useState<HTMLDivElement | null>(null)
-  const {Navbar} = useWorkspace().studio.components
+  const Navbar = useNavbarComponent()
 
   // Create configuration
   const tools = useTools()