@sanity/ui 1.0.0-beta.32 → 1.0.0-beta.34

package/src/components/tree/__workshop__/basic.perf.ts

@@ -1,10 +1,6 @@
-import {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop'
+import {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop/plugin-perf'
 import {findByTestId, fireEvent} from '@testing-library/dom'
 
-// // function delay(ms: number) {
-// //   return new Promise((resolve) => setTimeout(resolve, ms))
-// // }
-
 function test<ElementType = unknown>(
   title: string,
   run: PerfTestRunFn<ElementType>
@@ -12,17 +8,8 @@ function test<ElementType = unknown>(
   return {name: title, run}
 }
 
-// export const toggleTreeGroupsTest = perfTest(
-//   'Toggle tree groups',
-//   async ({target}: {target: HTMLDivElement}) => {
-
-//   }
-// )
-
 export const perfTests = [
   test('Toggle tree groups', async ({target}: {target: HTMLDivElement}) => {
-    // await delay(50)
-
     const apples = await findByTestId(target, 'apples')
     const oranges = await findByTestId(target, 'oranges')
 

package/src/components/tree/__workshop__/basic.tsx

@@ -1,6 +1,6 @@
 import {LinkIcon} from '@sanity/icons'
 import {Box, Tree, TreeItem} from '@sanity/ui'
-import {usePerfTest} from '@sanity/ui-workshop'
+import {usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {useCallback, useState} from 'react'
 import {perfTests} from './basic.perf'
 

package/src/components/tree/__workshop__/index.ts

@@ -1,11 +1,15 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/tree', 'Tree', [
-  {
-    name: 'basic',
-    title: 'Basic',
-    component: lazy(() => import('./basic')),
-    // options: {perfTests: () => import('./basic.perf')},
-  },
-])
+export default defineScope({
+  name: 'components/tree',
+  title: 'Tree',
+  stories: [
+    {
+      name: 'basic',
+      title: 'Basic',
+      component: lazy(() => import('./basic')),
+      // options: {perfTests: () => import('./basic.perf')},
+    },
+  ],
+})

package/src/hooks/useElementRect/__workshop__/index.ts

@@ -1,6 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('hooks/useElementRect', 'useElementRect', [
-  {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-])
+export default defineScope({
+  name: 'hooks/useElementRect',
+  title: 'useElementRect',
+  stories: [
+    {
+      name: 'example',
+      title: 'Example',
+      component: lazy(() => import('./example')),
+    },
+  ],
+})

package/src/hooks/useMediaIndex/__workshop__/index.ts

@@ -1,6 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('hooks/use-media-index', 'useMediaIndex', [
-  {name: 'test', title: 'Test', component: lazy(() => import('./test'))},
-])
+export default defineScope({
+  name: 'hooks/use-media-index',
+  title: 'useMediaIndex',
+  stories: [
+    {
+      name: 'test',
+      title: 'Test',
+      component: lazy(() => import('./test')),
+    },
+  ],
+})

package/src/primitives/avatar/__workshop__/index.ts

@@ -1,15 +1,19 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/avatar', 'Avatar', [
-  {
-    name: 'as-button',
-    title: 'As button',
-    component: lazy(() => import('./asButton')),
-  },
-  {
-    name: 'avatar-stack',
-    title: 'Avatar stack',
-    component: lazy(() => import('./stack')),
-  },
-])
+export default defineScope({
+  name: 'primitives/avatar',
+  title: 'Avatar',
+  stories: [
+    {
+      name: 'as-button',
+      title: 'As button',
+      component: lazy(() => import('./asButton')),
+    },
+    {
+      name: 'avatar-stack',
+      title: 'Avatar stack',
+      component: lazy(() => import('./stack')),
+    },
+  ],
+})

package/src/primitives/badge/__workshop__/index.ts

@@ -1,15 +1,19 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/badge', 'Badge', [
-  {
-    name: 'props',
-    title: 'Props',
-    component: lazy(() => import('./props')),
-  },
-  {
-    name: 'tones',
-    title: 'Tones',
-    component: lazy(() => import('./tones')),
-  },
-])
+export default defineScope({
+  name: 'primitives/badge',
+  title: 'Badge',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'tones',
+      title: 'Tones',
+      component: lazy(() => import('./tones')),
+    },
+  ],
+})

package/src/primitives/badge/__workshop__/tones.tsx

@@ -6,7 +6,7 @@ export default function Tones() {
   const mode = useSelect('Mode', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
 
   return (
-    <Flex align="center" height="fill" justify="center">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Inline space={2}>
         <Badge mode={mode}>Default</Badge>
         <Badge mode={mode} tone="primary">

package/src/primitives/box/__workshop__/index.ts

@@ -1,7 +1,19 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/box', 'Box', [
-  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-  {name: 'responsive', title: 'Responsive', component: lazy(() => import('./responsive'))},
-])
+export default defineScope({
+  name: 'primitives/box',
+  title: 'Box',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'responsive',
+      title: 'Responsive',
+      component: lazy(() => import('./responsive')),
+    },
+  ],
+})

package/src/primitives/button/__workshop__/index.ts

@@ -1,50 +1,54 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/button', 'Button', [
-  {
-    name: 'props',
-    title: 'Props',
-    component: lazy(() => import('./props')),
-  },
-  {
-    name: 'styled-1',
-    title: 'Styled #1',
-    component: lazy(() => import('./styled1')),
-  },
-  {
-    name: 'styled-2',
-    title: 'Styled #2',
-    component: lazy(() => import('./styled2')),
-  },
-  {
-    name: 'stacked',
-    title: 'Stacked',
-    component: lazy(() => import('./stacked')),
-  },
-  {
-    name: 'custom',
-    title: 'Custom',
-    component: lazy(() => import('./custom')),
-  },
-  {
-    name: 'mixed-children',
-    title: 'Mixed children',
-    component: lazy(() => import('./mixedChildren')),
-  },
-  {
-    name: 'upload-button',
-    title: 'Upload button',
-    component: lazy(() => import('./uploadButton')),
-  },
-  {
-    name: 'sanity-upload-button-workaround',
-    title: 'SanityUploadButtonWorkaroundStory',
-    component: lazy(() => import('./sanityUploadButton')),
-  },
-  {
-    name: 'custom-icons',
-    title: 'Custom icons',
-    component: lazy(() => import('./customIcons')),
-  },
-])
+export default defineScope({
+  name: 'primitives/button',
+  title: 'Button',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'styled-1',
+      title: 'Styled #1',
+      component: lazy(() => import('./styled1')),
+    },
+    {
+      name: 'styled-2',
+      title: 'Styled #2',
+      component: lazy(() => import('./styled2')),
+    },
+    {
+      name: 'stacked',
+      title: 'Stacked',
+      component: lazy(() => import('./stacked')),
+    },
+    {
+      name: 'custom',
+      title: 'Custom',
+      component: lazy(() => import('./custom')),
+    },
+    {
+      name: 'mixed-children',
+      title: 'Mixed children',
+      component: lazy(() => import('./mixedChildren')),
+    },
+    {
+      name: 'upload-button',
+      title: 'Upload button',
+      component: lazy(() => import('./uploadButton')),
+    },
+    {
+      name: 'sanity-upload-button-workaround',
+      title: 'SanityUploadButtonWorkaroundStory',
+      component: lazy(() => import('./sanityUploadButton')),
+    },
+    {
+      name: 'custom-icons',
+      title: 'Custom icons',
+      component: lazy(() => import('./customIcons')),
+    },
+  ],
+})

package/src/primitives/card/__workshop__/index.ts

@@ -1,14 +1,18 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/card', 'Card', [
-  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-  {name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
-  {name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
-  {name: 'tones', title: 'Tones', component: lazy(() => import('./allTones'))},
-  {name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
-  {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
-  {name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},
-  {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
-  {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
-])
+export default defineScope({
+  name: 'primitives/card',
+  title: 'Card',
+  stories: [
+    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
+    {name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
+    {name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
+    {name: 'tones', title: 'Tones', component: lazy(() => import('./allTones'))},
+    {name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
+    {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
+    {name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},
+    {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
+    {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
+  ],
+})

package/src/primitives/checkbox/__workshop__/index.ts

@@ -1,9 +1,13 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/checkbox', 'Checkbox', [
-  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-  {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-  {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
-  {name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./tones'))},
-])
+export default defineScope({
+  name: 'primitives/checkbox',
+  title: 'Checkbox',
+  stories: [
+    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
+    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
+    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
+    {name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./tones'))},
+  ],
+})

package/src/primitives/code/__workshop__/index.ts

@@ -1,15 +1,19 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/code', 'Code', [
-  {
-    name: 'props',
-    title: 'Props',
-    component: lazy(() => import('./props')),
-  },
-  {
-    name: 'optical-alignment',
-    title: 'Optical alignment',
-    component: lazy(() => import('./opticalAlignment')),
-  },
-])
+export default defineScope({
+  name: 'primitives/code',
+  title: 'Code',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'optical-alignment',
+      title: 'Optical alignment',
+      component: lazy(() => import('./opticalAlignment')),
+    },
+  ],
+})

package/src/primitives/container/__workshop__/index.ts

@@ -1,6 +1,8 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/container', 'Container', [
-  {name: 'plain', title: 'Plain', component: lazy(() => import('./example'))},
-])
+export default defineScope({
+  name: 'primitives/container',
+  title: 'Container',
+  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./example'))}],
+})

package/src/primitives/flex/__workshop__/index.ts

@@ -1,7 +1,11 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/flex', 'Flex', [
-  {name: 'plain', title: 'Plain', component: lazy(() => import('./example'))},
-  {name: 'gap', title: 'Gap', component: lazy(() => import('./gap'))},
-])
+export default defineScope({
+  name: 'primitives/flex',
+  title: 'Flex',
+  stories: [
+    {name: 'plain', title: 'Plain', component: lazy(() => import('./example'))},
+    {name: 'gap', title: 'Gap', component: lazy(() => import('./gap'))},
+  ],
+})

package/src/primitives/grid/__workshop__/index.ts

@@ -1,6 +1,10 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/grid', 'Grid', [
-  {name: 'responsive', title: 'Responsive', component: lazy(() => import('./responsive'))},
-])
+export default defineScope({
+  name: 'primitives/grid',
+  title: 'Grid',
+  stories: [
+    {name: 'responsive', title: 'Responsive', component: lazy(() => import('./responsive'))},
+  ],
+})

package/src/primitives/heading/__workshop__/index.ts

@@ -1,15 +1,19 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/heading', 'Heading', [
-  {
-    name: 'plain',
-    title: 'Plain',
-    component: lazy(() => import('./plain')),
-  },
-  {
-    name: 'optical-alignment',
-    title: 'Optical alignment',
-    component: lazy(() => import('./opticalAlignment')),
-  },
-])
+export default defineScope({
+  name: 'primitives/heading',
+  title: 'Heading',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+    {
+      name: 'optical-alignment',
+      title: 'Optical alignment',
+      component: lazy(() => import('./opticalAlignment')),
+    },
+  ],
+})

package/src/primitives/inline/__workshop__/index.ts

@@ -1,6 +1,8 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/inline', 'Inline', [
-  {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-])
+export default defineScope({
+  name: 'primitives/inline',
+  title: 'Inline',
+  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
+})

package/src/primitives/kbd/__workshop__/index.ts

@@ -1,6 +1,8 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/kbd', 'KBD', [
-  {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-])
+export default defineScope({
+  name: 'primitives/kbd',
+  title: 'KBD',
+  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
+})

package/src/primitives/label/__workshop__/index.ts

@@ -1,15 +1,19 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/label', 'Label', [
-  {
-    name: 'plain',
-    title: 'Plain',
-    component: lazy(() => import('./plain')),
-  },
-  {
-    name: 'optical-alignment',
-    title: 'Optical alignment',
-    component: lazy(() => import('./opticalAlignment')),
-  },
-])
+export default defineScope({
+  name: 'primitives/label',
+  title: 'Label',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+    {
+      name: 'optical-alignment',
+      title: 'Optical alignment',
+      component: lazy(() => import('./opticalAlignment')),
+    },
+  ],
+})

package/src/primitives/popover/__workshop__/PlainStory.tsx

@@ -52,7 +52,6 @@ export default function PlainStory() {
               fallbackPlacements={['top', 'bottom']}
               matchReferenceWidth={matchReferenceWidth}
               open={open}
-              overflow="auto"
               padding={padding}
               placement={placement}
               portal={portal}

package/src/primitives/popover/__workshop__/TestStory.tsx

@@ -63,7 +63,6 @@ export default function TestStory(): ReactElement {
                 fallbackPlacements={['left', 'bottom', 'right', 'top']}
                 matchReferenceWidth={matchReferenceWidth}
                 open={open}
-                overflow="auto"
                 padding={3}
                 placement={placement}
                 portal

package/src/primitives/popover/__workshop__/index.ts

@@ -1,35 +1,39 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/popover', 'Popover', [
-  {
-    name: 'test',
-    title: 'Test',
-    component: lazy(() => import('./TestStory')),
-  },
-  {
-    name: 'plain',
-    title: 'Plain',
-    component: lazy(() => import('./PlainStory')),
-  },
-  {
-    name: 'recursive',
-    title: 'Recursive',
-    component: lazy(() => import('./RecursiveStory')),
-  },
-  {
-    name: 'match-ref-width',
-    title: 'Match reference width',
-    component: lazy(() => import('./MatchReferenceWidthStory')),
-  },
-  {
-    name: 'margins',
-    title: 'Margins',
-    component: lazy(() => import('./MarginsStory')),
-  },
-  {
-    name: 'aligned',
-    title: 'Aligned',
-    component: lazy(() => import('./AlignedStory')),
-  },
-])
+export default defineScope({
+  name: 'primitives/popover',
+  title: 'Popover',
+  stories: [
+    {
+      name: 'test',
+      title: 'Test',
+      component: lazy(() => import('./TestStory')),
+    },
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./PlainStory')),
+    },
+    {
+      name: 'recursive',
+      title: 'Recursive',
+      component: lazy(() => import('./RecursiveStory')),
+    },
+    {
+      name: 'match-ref-width',
+      title: 'Match reference width',
+      component: lazy(() => import('./MatchReferenceWidthStory')),
+    },
+    {
+      name: 'margins',
+      title: 'Margins',
+      component: lazy(() => import('./MarginsStory')),
+    },
+    {
+      name: 'aligned',
+      title: 'Aligned',
+      component: lazy(() => import('./AlignedStory')),
+    },
+  ],
+})

package/src/primitives/popover/constants.ts

@@ -1,10 +1,7 @@
 import {PopoverMargins} from '../../types'
 
 export const DEFAULT_POPOVER_DISTANCE = 4
-
 export const DEFAULT_POPOVER_PADDING = 4
-
 export const DEFAULT_POPOVER_ARROW_WIDTH = 27
 export const DEFAULT_POPOVER_ARROW_HEIGHT = 11
-
 export const DEFAULT_POPOVER_MARGINS: PopoverMargins = [0, 0, 0, 0]