@sanity/ui 3.3.0 → 3.3.2

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

@@ -1,105 +0,0 @@
-import {LinkIcon} from '@sanity/icons'
-import {Box, Tree, TreeItem} from '@sanity/ui'
-import {usePerfTest} from '@sanity/ui-workshop/plugin-perf'
-import {useCallback, useState} from 'react'
-
-import {perfTests} from './basic.perf'
-
-export default function BasicStory() {
-  const {ref, Wrapper} = usePerfTest(perfTests[0])
-
-  const [id, setId] = useState('')
-
-  const handleClick = useCallback((event: React.MouseEvent) => {
-    event.preventDefault()
-
-    const testid = event.currentTarget.getAttribute('data-testid')
-
-    if (testid) setId(testid)
-  }, [])
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Wrapper>
-        <Tree ref={ref} space={1}>
-          <TreeItem onClick={handleClick} expanded text="Fruit">
-            <TreeItem
-              data-testid="oranges"
-              onClick={handleClick}
-              selected={id === 'oranges'}
-              text="Oranges"
-            />
-            <TreeItem
-              data-testid="pineapples"
-              onClick={handleClick}
-              text="Pineapples"
-              selected={id === 'pineapples'}
-            />
-            <TreeItem data-testid="apples" onClick={handleClick} text="Apples">
-              <TreeItem
-                data-testid="apples/macintosh"
-                onClick={handleClick}
-                href="/apples/macintosh"
-                icon={LinkIcon}
-                text="Macintosh"
-              />
-              <TreeItem
-                data-testid="apples/granny-smith"
-                onClick={handleClick}
-                text="Granny Smith"
-              />
-              <TreeItem data-testid="apples/fuji" onClick={handleClick} text="Fuji" />
-            </TreeItem>
-            <TreeItem onClick={handleClick} text="Bananas" />
-            <TreeItem onClick={handleClick} text="Pears">
-              <TreeItem onClick={handleClick} text="Anjou" />
-              <TreeItem onClick={handleClick} text="Bartlett" />
-              <TreeItem onClick={handleClick} text="Bosc" />
-              <TreeItem onClick={handleClick} text="Concorde" />
-              <TreeItem onClick={handleClick} text="Seckel" />
-              <TreeItem onClick={handleClick} text="Starkrimson" />
-            </TreeItem>
-          </TreeItem>
-          <TreeItem onClick={handleClick} text="Vegetables">
-            <TreeItem onClick={handleClick} text="Podded vegetables">
-              <TreeItem onClick={handleClick} text="Lentil" />
-              <TreeItem onClick={handleClick} text="Pea" />
-              <TreeItem onClick={handleClick} text="Peanut" />
-            </TreeItem>
-            <TreeItem onClick={handleClick} text="Bulb and stem vegetables">
-              <TreeItem onClick={handleClick} text="Asparagus" />
-              <TreeItem onClick={handleClick} text="Celery" />
-              <TreeItem onClick={handleClick} text="Leek" />
-              <TreeItem onClick={handleClick} text="Onion" />
-            </TreeItem>
-            <TreeItem onClick={handleClick} text="Root and tuberous vegetables">
-              <TreeItem onClick={handleClick} text="Carrot" />
-              <TreeItem onClick={handleClick} text="Ginger" />
-              <TreeItem onClick={handleClick} text="Parsnip" />
-              <TreeItem onClick={handleClick} text="Potato" />
-            </TreeItem>
-          </TreeItem>
-          <TreeItem onClick={handleClick} text="Grains">
-            <TreeItem onClick={handleClick} text="Cereal grains">
-              <TreeItem onClick={handleClick} text="Barley" />
-              <TreeItem onClick={handleClick} text="Oats" />
-              <TreeItem onClick={handleClick} text="Rice" />
-            </TreeItem>
-            <TreeItem onClick={handleClick} text="Pseudocereal grains">
-              <TreeItem onClick={handleClick} text="Amaranth" />
-              <TreeItem onClick={handleClick} text="Buckwheat" />
-              <TreeItem onClick={handleClick} text="Chia" />
-              <TreeItem onClick={handleClick} text="Quinoa" />
-            </TreeItem>
-            <TreeItem onClick={handleClick} text="Oilseeds">
-              <TreeItem onClick={handleClick} text="India mustard" />
-              <TreeItem onClick={handleClick} text="Safflower" />
-              <TreeItem onClick={handleClick} text="Flax seed" />
-              <TreeItem onClick={handleClick} text="Poppy seed" />
-            </TreeItem>
-          </TreeItem>
-        </Tree>
-      </Wrapper>
-    </Box>
-  )
-}

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

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

package/src/core/components/tree/__workshop__/tabFromElement.tsx

@@ -1,84 +0,0 @@
-import {LinkIcon} from '@sanity/icons'
-import {Box, Text, TextInput, Tree, TreeItem} from '@sanity/ui'
-import {usePerfTest} from '@sanity/ui-workshop/plugin-perf'
-import {useCallback, useState} from 'react'
-
-import {perfTests} from './basic.perf'
-
-export default function BasicStory() {
-  const {ref, Wrapper} = usePerfTest(perfTests[0])
-
-  const [id, setId] = useState('')
-  const [focus, setFocus] = useState('')
-
-  const handleClick = useCallback((event: React.MouseEvent) => {
-    event.preventDefault()
-
-    const testid = event.currentTarget.getAttribute('data-testid')
-
-    if (testid) setId(testid)
-  }, [])
-
-  const handleFocus = useCallback((event: React.FocusEvent<HTMLElement>) => {
-    const elementFocus = event.target.getAttribute('data-testid')
-    if (elementFocus) setFocus(elementFocus)
-  }, [])
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Box paddingY={3}>
-        <Text muted size={1}>
-          This example is to demonstrate that when you tab from an outside element (using the
-          keyboard to navigate), you can still access the tree and tree item. Press the input
-          beneath and start tabbing / using the arrow.
-        </Text>
-      </Box>
-      <Box paddingY={3}>
-        <Text>Focus: {focus}</Text>
-      </Box>
-      <Wrapper>
-        <TextInput />
-        <Tree ref={ref} space={1} onFocus={handleFocus}>
-          <TreeItem data-testid="fruit" onClick={handleClick} expanded text="Fruit">
-            <TreeItem
-              data-testid="oranges"
-              onClick={handleClick}
-              selected={id === 'oranges'}
-              text="Oranges"
-            />
-            <TreeItem
-              data-testid="pineapples"
-              onClick={handleClick}
-              text="Pineapples"
-              selected={id === 'pineapples'}
-            />
-            <TreeItem data-testid="apples" onClick={handleClick} text="Apples">
-              <TreeItem
-                data-testid="apples/macintosh"
-                onClick={handleClick}
-                href="/apples/macintosh"
-                icon={LinkIcon}
-                text="Macintosh"
-              />
-              <TreeItem
-                data-testid="apples/granny-smith"
-                onClick={handleClick}
-                text="Granny Smith"
-              />
-              <TreeItem data-testid="apples/fuji" onClick={handleClick} text="Fuji" />
-            </TreeItem>
-            <TreeItem data-testid="bananas" onClick={handleClick} text="Bananas" />
-            <TreeItem data-testid="pears" onClick={handleClick} text="Pears">
-              <TreeItem data-testid="pears/anjou" onClick={handleClick} text="Anjou" />
-              <TreeItem data-testid="pears/bartlett" onClick={handleClick} text="Bartlett" />
-              <TreeItem data-testid="pears/bosc" onClick={handleClick} text="Bosc" />
-              <TreeItem data-testid="pears/concorde" onClick={handleClick} text="Concorde" />
-              <TreeItem data-testid="pears/seckel" onClick={handleClick} text="Seckel" />
-              <TreeItem data-testid="pears/starkrimson" onClick={handleClick} text="Starkrimson" />
-            </TreeItem>
-          </TreeItem>
-        </Tree>
-      </Wrapper>
-    </Box>
-  )
-}

package/src/core/hooks/useElementRect/__workshop__/example.tsx

@@ -1,32 +0,0 @@
-import {Box, Card, Code, Container, Stack, Text, useElementRect} from '@sanity/ui'
-import {useState} from 'react'
-
-import {Grid} from '../../../primitives'
-
-export default function ExampleStory() {
-  const [element, setElement] = useState<HTMLElement | null>(null)
-  const rect = useElementRect(element)
-  const size = {width: rect?.width || 0, height: rect?.height || 0}
-
-  return (
-    <Box padding={[3, 4, 5]}>
-      <Container width={1}>
-        <Stack space={4}>
-          <Grid columns={[1, 2, 3]}>
-            <Card ref={setElement} tone="transparent">
-              <Text>rect</Text>
-            </Card>
-          </Grid>
-
-          <div style={{height: 11}}>
-            <Card scheme="dark" style={{position: 'absolute', ...size}} />
-          </div>
-
-          <Code language="json" size={1}>
-            {JSON.stringify(size)}
-          </Code>
-        </Stack>
-      </Container>
-    </Box>
-  )
-}

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

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

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

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

package/src/core/hooks/useMediaIndex/__workshop__/test.tsx

@@ -1,14 +0,0 @@
-import {Card, Stack, Text, useMediaIndex} from '@sanity/ui'
-
-export default function TestStory() {
-  const mediaIndex = useMediaIndex()
-
-  return (
-    <Card padding={[3, 4, 5]}>
-      <Stack space={2}>
-        <Text weight="medium">The current media index is {mediaIndex}.</Text>
-        <Text muted>Try resizing the browser.</Text>
-      </Stack>
-    </Card>
-  )
-}

package/src/core/primitives/avatar/__workshop__/asButton.tsx

@@ -1,14 +0,0 @@
-import {Avatar, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function AsButtonStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Avatar as="button" color="purple" initials="uq" size={size} />
-    </Flex>
-  )
-}

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

@@ -1,29 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-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')),
-    },
-    {
-      name: 'within-button',
-      title: 'Within button',
-      component: lazy(() => import('./withinButton')),
-    },
-    {
-      name: 'within-menu-item',
-      title: 'Within menu item',
-      component: lazy(() => import('./withinMenuItem')),
-    },
-  ],
-})

package/src/core/primitives/avatar/__workshop__/stack.tsx

@@ -1,25 +0,0 @@
-import {Avatar, AvatarCounter, AvatarStack, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function StackStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <AvatarStack size={size}>
-        <AvatarCounter count={2} />
-        <Avatar color="magenta" initials="uq" />
-        <Avatar
-          color="purple"
-          src="https://avatars3.githubusercontent.com/u/406933?s=400&u=af898b0a50ef2ef1248be32dfa1410ccb55f6f65&v=4"
-        />
-        <Avatar
-          color="blue"
-          src="https://avatars3.githubusercontent.com/u/406933?s=400&u=af898b0a50ef2ef1248be32dfa1410ccb55f6f65&v=4"
-        />
-      </AvatarStack>
-    </Flex>
-  )
-}

package/src/core/primitives/avatar/__workshop__/withinButton.tsx

@@ -1,63 +0,0 @@
-import {useBoolean} from '@sanity/ui-workshop'
-
-import {Box} from '../../box'
-import {Button} from '../../button'
-import {Container} from '../../container'
-import {Flex} from '../../flex'
-import {Stack} from '../../stack'
-import {Text} from '../../text'
-import {Avatar} from '../avatar'
-import {AvatarStack} from '../avatarStack'
-
-export default function WithinButtonStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-
-  return (
-    <Container width={1}>
-      <Stack paddingX={4} paddingY={[5, 6, 7]} space={1}>
-        <Button disabled={disabled} padding={1}>
-          <Flex align="center" gap={3} padding={2}>
-            <Box flex={1}>
-              <Text size={1}>Default button</Text>
-            </Box>
-            <Box flex="none">
-              <AvatarStack>
-                <Avatar color="blue" initials="AB" />
-                <Avatar color="magenta" initials="CD" />
-                <Avatar color="purple" initials="EF" />
-              </AvatarStack>
-            </Box>
-          </Flex>
-        </Button>
-        <Button disabled={disabled} mode="ghost" padding={1}>
-          <Flex align="center" gap={3} padding={2}>
-            <Box flex={1}>
-              <Text size={1}>Ghost button</Text>
-            </Box>
-            <Box flex="none">
-              <AvatarStack>
-                <Avatar color="blue" initials="AB" />
-                <Avatar color="magenta" initials="CD" />
-                <Avatar color="purple" initials="EF" />
-              </AvatarStack>
-            </Box>
-          </Flex>
-        </Button>
-        <Button disabled={disabled} mode="bleed" padding={1}>
-          <Flex align="center" gap={3} padding={2}>
-            <Box flex={1}>
-              <Text size={1}>Bleed button</Text>
-            </Box>
-            <Box flex="none">
-              <AvatarStack>
-                <Avatar color="blue" initials="AB" />
-                <Avatar color="magenta" initials="CD" />
-                <Avatar color="purple" initials="EF" />
-              </AvatarStack>
-            </Box>
-          </Flex>
-        </Button>
-      </Stack>
-    </Container>
-  )
-}

package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx

@@ -1,70 +0,0 @@
-import {useBoolean} from '@sanity/ui-workshop'
-
-import {Menu, MenuItem} from '../../../components'
-import {Layer} from '../../../utils'
-import {Box} from '../../box'
-import {Card} from '../../card'
-import {Container} from '../../container'
-import {Flex} from '../../flex'
-import {Text} from '../../text'
-import {Avatar} from '../avatar'
-import {AvatarStack} from '../avatarStack'
-
-export default function WithinMenuItemStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-
-  return (
-    <Container width={1}>
-      <Layer>
-        <Box paddingX={4} paddingY={[5, 6, 7]}>
-          <Card radius={3} shadow={3}>
-            <Menu space={1}>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-            </Menu>
-          </Card>
-        </Box>
-      </Layer>
-    </Container>
-  )
-}

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

@@ -1,19 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-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/core/primitives/badge/__workshop__/props.tsx

@@ -1,30 +0,0 @@
-import {Badge, Flex} from '@sanity/ui'
-import {useAction, useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_BADGE_MODE_OPTIONS,
-  WORKSHOP_BADGE_TONE_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function PropsStory() {
-  const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
-  const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default', 'Props')
-  const textProp = useText('Text', 'Label', 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Badge
-        mode={mode}
-        onClick={useAction('onClick')}
-        paddingX={paddingX}
-        paddingY={paddingY}
-        tone={tone}
-      >
-        {textProp}
-      </Badge>
-    </Flex>
-  )
-}

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

@@ -1,21 +0,0 @@
-import {Badge, Flex, Inline} from '@sanity/ui'
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_BADGE_MODE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function Tones() {
-  const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Inline space={2}>
-        {THEME_COLOR_STATE_TONES.map((tone) => (
-          <Badge key={tone} mode={mode} tone={tone}>
-            {tone}
-          </Badge>
-        ))}
-      </Inline>
-    </Flex>
-  )
-}

package/src/core/primitives/box/__workshop__/asComponent.tsx

@@ -1,31 +0,0 @@
-import {Box, Flex, Text} from '@sanity/ui'
-import {forwardRef} from 'react'
-
-// A custom component with its own props. When passed to `Box`'s `as` prop, these props are
-// inferred on `Box` itself: `href` is required and `target` is optional, and unknown props
-// are rejected by the type checker.
-const Link = forwardRef(function Link(
-  props: {href: string; target?: string} & Omit<
-    React.HTMLProps<HTMLAnchorElement>,
-    'as' | 'href' | 'target'
-  >,
-  ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.JSX.Element {
-  const {children, ...restProps} = props
-
-  return (
-    <a {...restProps} ref={ref}>
-      {children}
-    </a>
-  )
-})
-
-export default function AsComponentStory() {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Box as={Link} href="/" padding={4} target="_new">
-        <Text size={1}>As component</Text>
-      </Box>
-    </Flex>
-  )
-}

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

@@ -1,24 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-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')),
-    },
-    {
-      name: 'as-component',
-      title: 'As component',
-      component: lazy(() => import('./asComponent')),
-    },
-  ],
-})

package/src/core/primitives/box/__workshop__/props.tsx

@@ -1,20 +0,0 @@
-import {Box, Card, Text} from '@sanity/ui'
-import {useAction, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function PropsStory() {
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Card border tone="inherit">
-        <Box onClick={useAction('onClick')} padding={padding}>
-          <Text>
-            Box with <code>padding={padding}</code>
-          </Text>
-        </Box>
-      </Card>
-    </Box>
-  )
-}