@sanity/ui 4.0.0-beta.8 → 4.0.0-next.0

package/src/primitives/avatar/Avatar.tsx

@@ -1,145 +0,0 @@
-import {
-  avatar,
-  avatar_arrow,
-  avatar_arrowSvg,
-  avatar_image,
-  avatar_imageOutline,
-  avatar_initials,
-  type ResponsiveProp,
-} from '@sanity/ui-css'
-import type {AvatarColor, AvatarSize, FontLabelSize} from '@sanity/ui-tokens'
-import {startTransition, useEffect, useState} from 'react'
-
-import {_raf} from '../../core/helpers/animation'
-import {_getResponsiveProp} from '../../core/helpers/props'
-import type {ComponentType, Props} from '../../core/types'
-import {Box} from '../box/Box'
-import {Label} from '../label/Label'
-import type {AvatarPosition} from './types'
-
-/** @public */
-export const DEFAULT_AVATAR_ELEMENT = 'span'
-
-/** @public */
-export interface AvatarOwnProps {
-  /** @beta */
-  __unstable_hideInnerStroke?: boolean
-  animateArrowFrom?: AvatarPosition
-  arrowPosition?: AvatarPosition
-  color?: AvatarColor
-  initials?: string
-  onImageLoadError?: (event: Error) => void
-  size?: ResponsiveProp<AvatarSize>
-  src?: string
-  title?: string
-}
-
-/** @public */
-export type AvatarElementType = 'a' | 'button' | 'div' | 'span' | ComponentType
-
-/** @public */
-export type AvatarProps<E extends AvatarElementType = AvatarElementType> = Props<AvatarOwnProps, E>
-
-/**
- * Avatars are used to represent people and other agents (e.g. bots).
- *
- * @public
- */
-export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEMENT>(
-  props: AvatarProps<E>,
-): React.JSX.Element {
-  const {
-    __unstable_hideInnerStroke: hideInnerStroke,
-    as: Element = DEFAULT_AVATAR_ELEMENT,
-    className,
-    color = 'magenta',
-    src,
-    title,
-    initials: initialsProp,
-    onImageLoadError,
-    arrowPosition: arrowPositionProp,
-    animateArrowFrom,
-    size: sizeProp = 1,
-    ...rest
-  } = props as AvatarProps<typeof DEFAULT_AVATAR_ELEMENT>
-
-  const initials = typeof initialsProp === 'string' ? initialsProp.slice(0, 2) : undefined
-  const size = _getResponsiveProp(sizeProp)
-
-  const [arrowPosition, setArrowPosition] = useState<AvatarPosition | undefined>(
-    animateArrowFrom || arrowPositionProp || 'inside',
-  )
-
-  const [imageError, setImageError] = useState<boolean>(false)
-
-  const handleImageError = () => {
-    setImageError(true)
-
-    if (onImageLoadError) {
-      onImageLoadError(new Error('Avatar: the image failed to load'))
-    }
-  }
-
-  const initialsSize = size.map((s): FontLabelSize => {
-    if (s === 1) return 1
-    if (s === 2) return 3
-    if (s === 3) return 5
-
-    return 0
-  }) as ResponsiveProp<FontLabelSize>
-
-  useEffect(() => {
-    if (arrowPosition === arrowPositionProp) return undefined
-
-    // Start animation in the next frame
-    return _raf(() => setArrowPosition(arrowPositionProp))
-  }, [arrowPosition, arrowPositionProp])
-
-  useEffect(() => {
-    if (src) {
-      startTransition(() => setImageError(false))
-    }
-  }, [src])
-
-  return (
-    <Element
-      data-hide-inner-stroke={hideInnerStroke ? '' : undefined}
-      data-ui="Avatar"
-      {...rest}
-      aria-label={title}
-      className={avatar({className, color, size: sizeProp})}
-      data-arrow-position={arrowPosition}
-      data-image-error={imageError ? '' : undefined}
-      title={title}
-    >
-      <span className={avatar_arrow()}>
-        <svg className={avatar_arrowSvg()} fill="none" height="7" viewBox="0 0 11 7" width="11">
-          <path d="M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z" />
-        </svg>
-      </span>
-
-      <Box
-        alignItems="center"
-        as="span"
-        className={avatar_initials()}
-        display="flex"
-        inset={0}
-        justifyContent="center"
-        overflow="hidden"
-        position="absolute"
-        radius="full"
-      >
-        <Label align="center" as="span" size={initialsSize} weight="semibold">
-          {initials}
-        </Label>
-      </Box>
-
-      {src && (
-        <Box className={avatar_image()} inset={0} position="absolute">
-          <img alt={initials} src={src} onError={handleImageError} />
-          <span className={avatar_imageOutline()} />
-        </Box>
-      )}
-    </Element>
-  )
-}

package/src/primitives/avatar/AvatarCounter.tsx

@@ -1,69 +0,0 @@
-import {avatar_counter, type ResponsiveProp} from '@sanity/ui-css'
-import type {AvatarSize, FontLabelSize} from '@sanity/ui-tokens'
-import {useMemo} from 'react'
-
-import {_getResponsiveProp} from '../../core/helpers/props'
-import type {ComponentType, Props} from '../../core/types'
-import {Box} from '../box/Box'
-import {Label} from '../label/Label'
-
-/** @public */
-export const DEFAULT_AVATAR_COUNTER_ELEMENT = 'span'
-
-/** @public */
-export interface AvatarCounterOwnProps {
-  count: number
-  size?: ResponsiveProp<AvatarSize>
-}
-
-/** @public */
-export type AvatarCounterElementType = 'button' | 'div' | 'span' | ComponentType
-
-/** @public */
-export type AvatarCounterProps<E extends AvatarCounterElementType = AvatarCounterElementType> =
-  Props<AvatarCounterOwnProps, E>
-
-/** @public */
-export function AvatarCounter<
-  E extends AvatarCounterElementType = typeof DEFAULT_AVATAR_COUNTER_ELEMENT,
->(props: AvatarCounterProps<E>): React.JSX.Element {
-  const {
-    as = DEFAULT_AVATAR_COUNTER_ELEMENT,
-    className,
-    count,
-    size: sizeProp = 1,
-    ...rest
-  } = props as AvatarCounterProps<typeof DEFAULT_AVATAR_COUNTER_ELEMENT>
-  const size = _getResponsiveProp(sizeProp)
-
-  const labelSize = useMemo(
-    () =>
-      size.map((s): FontLabelSize => {
-        if (s === 1) return 1
-        if (s === 2) return 3
-        if (s === 3) return 5
-
-        return 0
-      }) as ResponsiveProp<FontLabelSize>,
-    [size],
-  )
-
-  return (
-    <Box
-      data-ui="AvatarCounter"
-      {...rest}
-      alignItems="center"
-      as={as}
-      className={avatar_counter({className, size})}
-      display="flex"
-      flex="none"
-      justifyContent="center"
-      paddingX={2}
-      sizing="border"
-    >
-      <Label align="center" as="span" size={labelSize} weight="medium">
-        {count}
-      </Label>
-    </Box>
-  )
-}

package/src/primitives/avatar/AvatarStack.tsx

@@ -1,77 +0,0 @@
-import {avatar_stack, type ResponsiveProp} from '@sanity/ui-css'
-import type {AvatarSize} from '@sanity/ui-tokens'
-import {Children, cloneElement, Fragment, isValidElement, type ReactElement} from 'react'
-
-import type {ComponentType, Props} from '../../core/types'
-import {Box, type BoxOwnProps} from '../box/Box'
-import type {AvatarProps} from './Avatar'
-import {AvatarCounter} from './AvatarCounter'
-
-/** @public */
-export const DEFAULT_AVATAR_STACK_ELEMENT = 'span'
-
-/** @public */
-export type AvatarStackChild = ReactElement<AvatarProps<'div'>> | null | undefined | false
-
-/** @public */
-export type AvatarStackOwnProps = Omit<
-  BoxOwnProps,
-  'align' | 'alignItems' | 'display' | 'justify' | 'justifyContent'
-> & {
-  children: AvatarStackChild | AvatarStackChild[]
-  maxLength?: number
-  size?: ResponsiveProp<AvatarSize>
-}
-
-/** @public */
-export type AvatarStackElementType = 'div' | 'span' | ComponentType
-
-/** @public */
-export type AvatarStackProps<E extends AvatarStackElementType = AvatarStackElementType> = Props<
-  AvatarStackOwnProps,
-  E
->
-
-/** @public */
-export function AvatarStack<E extends AvatarStackElementType = typeof DEFAULT_AVATAR_STACK_ELEMENT>(
-  props: AvatarStackProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_AVATAR_STACK_ELEMENT,
-    children: childrenProp,
-    className,
-    maxLength: maxLengthProp = 4,
-    size = 1,
-    ...rest
-  } = props as AvatarStackProps<typeof DEFAULT_AVATAR_STACK_ELEMENT>
-
-  const children = Children.toArray(childrenProp).filter(isValidElement) as ReactElement<
-    AvatarProps<'span'>
-  >[]
-  const maxLength = Math.max(maxLengthProp, 0)
-
-  const len = children.length
-  const visibleCount = maxLength - 1
-  const extraCount = len - visibleCount
-  const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children
-
-  return (
-    <Box
-      data-ui="AvatarStack"
-      {...rest}
-      alignItems="center"
-      as={as}
-      className={avatar_stack({className, size})}
-      display="flex"
-      justifyContent="flex-start"
-    >
-      {len === 0 && <AvatarCounter count={len} size={size} />}
-
-      {len !== 0 && extraCount > 1 && <AvatarCounter count={extraCount} size={size} />}
-
-      {visibleChildren.map((child, childIndex) => (
-        <Fragment key={String(childIndex)}>{cloneElement(child, {size})}</Fragment>
-      ))}
-    </Box>
-  )
-}

package/src/primitives/avatar/__workshop__/AsButton.tsx

@@ -1,12 +0,0 @@
-import {Avatar, AVATAR_SIZE, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-export default function AsButtonStory(): React.JSX.Element {
-  const size = useSelect('Size', AVATAR_SIZE, 2)
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Avatar as="button" color="magenta" initials="ab" size={size} />
-    </Flex>
-  )
-}

package/src/primitives/avatar/__workshop__/PropsStory.tsx

@@ -1,24 +0,0 @@
-import {Avatar, AVATAR_SIZE, Box} from '@sanity/ui'
-import {useBoolean, useSelect, useString} from '@sanity/ui-workshop'
-
-import {WORKSHOP_AVATAR_SRC} from '$workshop'
-
-export default function PropsStory() {
-  const hideInnerStroke = useBoolean('Hide inner stroke', false)
-  const src = useBoolean('With image source (src)', false)
-  const size = useSelect('Size', [undefined, ...AVATAR_SIZE])
-  const arrowPosition = useSelect('Arrow position', [undefined, 'top', 'bottom', 'inside'])
-  const initials = useString('Initials', 'AB')
-
-  return (
-    <Box alignItems="center" display="flex" height="fill" justifyContent="center">
-      <Avatar
-        __unstable_hideInnerStroke={hideInnerStroke}
-        arrowPosition={arrowPosition}
-        initials={initials}
-        size={size}
-        src={src ? WORKSHOP_AVATAR_SRC : undefined}
-      />
-    </Box>
-  )
-}

package/src/primitives/avatar/__workshop__/Stack.tsx

@@ -1,27 +0,0 @@
-import {Avatar, AVATAR_SIZE, AvatarCounter, AvatarStack, Box} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-export default function StackStory(): React.JSX.Element {
-  const size = useSelect('Size', [undefined, ...AVATAR_SIZE])
-
-  return (
-    <CardWrapper gap={4}>
-      <Box display="flex" justifyContent="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>
-      </Box>
-    </CardWrapper>
-  )
-}

package/src/primitives/avatar/__workshop__/WithinButton.tsx

@@ -1,51 +0,0 @@
-import {Avatar, AvatarStack, Box, Button, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-export default function WithinButtonStory(): React.JSX.Element {
-  const disabled = useBoolean('Disabled', false)
-
-  return (
-    <CardWrapper gap={3}>
-      <Button disabled={disabled} padding={0}>
-        <Box flex={1} padding={3}>
-          <Text size={1}>Default button</Text>
-        </Box>
-        <Box flex="none" padding={2}>
-          <AvatarStack size={0}>
-            <Avatar color="blue" initials="AB" />
-            <Avatar color="magenta" initials="CD" />
-            <Avatar color="purple" initials="EF" />
-          </AvatarStack>
-        </Box>
-      </Button>
-
-      <Button disabled={disabled} mode="ghost" padding={0}>
-        <Box flex={1} padding={3}>
-          <Text size={1}>Ghost button</Text>
-        </Box>
-        <Box flex="none" padding={2}>
-          <AvatarStack size={0} style={{margin: -1}}>
-            <Avatar color="blue" initials="AB" />
-            <Avatar color="magenta" initials="CD" />
-            <Avatar color="purple" initials="EF" />
-          </AvatarStack>
-        </Box>
-      </Button>
-
-      <Button disabled={disabled} mode="bleed" padding={0}>
-        <Box flex={1} padding={3}>
-          <Text size={1}>Bleed button</Text>
-        </Box>
-        <Box flex="none" padding={2}>
-          <AvatarStack size={0} style={{margin: -1}}>
-            <Avatar color="blue" initials="AB" />
-            <Avatar color="magenta" initials="CD" />
-            <Avatar color="purple" initials="EF" />
-          </AvatarStack>
-        </Box>
-      </Button>
-    </CardWrapper>
-  )
-}

package/src/primitives/avatar/__workshop__/WithinMenuItem.tsx

@@ -1,52 +0,0 @@
-import {Avatar, AvatarStack, Box, Card, Menu, MenuItem, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-export default function WithinMenuItemStory(): React.JSX.Element {
-  const disabled = useBoolean('Disabled', false)
-
-  return (
-    <CardWrapper>
-      <Card radius={4} shadow={3}>
-        <Menu gap={1}>
-          <MenuItem disabled={disabled} padding={0}>
-            <Box flex={1} padding={3}>
-              <Text size={1}>Menu item 1</Text>
-            </Box>
-            <Box flex="none" padding={2}>
-              <AvatarStack size={0} style={{margin: -1}}>
-                <Avatar color="purple" initials="AB" />
-                <Avatar color="magenta" initials="CD" />
-                <Avatar color="orange" initials="EF" />
-              </AvatarStack>
-            </Box>
-          </MenuItem>
-
-          <MenuItem disabled={disabled} padding={0}>
-            <Box flex={1} padding={3}>
-              <Text size={1}>Menu item 1</Text>
-            </Box>
-            <Box flex="none" padding={2}>
-              <AvatarStack size={0} style={{margin: -1}}>
-                <Avatar color="magenta" initials="CD" />
-                <Avatar color="orange" initials="EF" />
-              </AvatarStack>
-            </Box>
-          </MenuItem>
-
-          <MenuItem disabled={disabled} padding={0}>
-            <Box flex={1} padding={3}>
-              <Text size={1}>Menu item 1</Text>
-            </Box>
-            <Box flex="none" padding={2}>
-              <AvatarStack size={0} style={{margin: -1}}>
-                <Avatar color="purple" initials="AB" />
-              </AvatarStack>
-            </Box>
-          </MenuItem>
-        </Menu>
-      </Card>
-    </CardWrapper>
-  )
-}

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

@@ -1,36 +0,0 @@
-import {type WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/avatar',
-  title: 'Avatar',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./PropsStory')),
-    },
-    {
-      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')),
-    },
-  ],
-}
-
-export default scope

package/src/primitives/avatar/types.ts

@@ -1,2 +0,0 @@
-/** @public */
-export type AvatarPosition = 'top' | 'bottom' | 'inside'

package/src/primitives/badge/Badge.test.tsx

@@ -1,16 +0,0 @@
-import {describe, expect, it} from 'vitest'
-import {axe} from 'vitest-axe'
-
-import {render} from '$test/utils'
-
-import {Badge} from './Badge'
-
-describe('atoms/badge', () => {
-  it('should have no violations (axe)', async () => {
-    const lightResult = render(<Badge tone="positive">Label</Badge>, {scheme: 'light'})
-    const darkResult = render(<Badge tone="positive">Label</Badge>, {scheme: 'dark'})
-
-    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
-    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
-  })
-})

package/src/primitives/badge/Badge.tsx

@@ -1,53 +0,0 @@
-import {
-  badge,
-  BADGE_STYLE_PROP_KEYS,
-  type BadgeStyleProps,
-  type ResponsiveProp,
-} from '@sanity/ui-css'
-import type {FontTextSize} from '@sanity/ui-tokens'
-
-import {_splitKeys} from '../../core/_keys'
-import type {ComponentType, Props} from '../../core/types'
-import {Text} from '../text/Text'
-
-/** @public */
-export const DEFAULT_BADGE_ELEMENT = 'span'
-
-/** @public */
-export interface BadgeOwnProps extends BadgeStyleProps {
-  fontSize?: ResponsiveProp<FontTextSize>
-}
-
-/** @public */
-export type BadgeElementType = 'div' | 'span' | ComponentType
-
-/** @public */
-export type BadgeProps<E extends BadgeElementType = BadgeElementType> = Props<BadgeOwnProps, E>
-
-/**
- * Badges are used to tag resources.
- *
- * @public
- */
-export function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>(
-  props: BadgeProps<E>,
-): React.JSX.Element {
-  const [
-    styleProps,
-    {
-      as: Element = DEFAULT_BADGE_ELEMENT,
-      children,
-      fontSize = 1,
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(props as BadgeProps<typeof DEFAULT_BADGE_ELEMENT>, BADGE_STYLE_PROP_KEYS)
-
-  return (
-    <Element data-ui="Badge" {...domProps} className={badge(styleProps)}>
-      <Text as="span" size={fontSize}>
-        {children}
-      </Text>
-    </Element>
-  )
-}

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

@@ -1,27 +0,0 @@
-import {Badge, ELEMENT_TONES, Flex, RADIUS, SPACE} from '@sanity/ui'
-import {useAction, useSelect, useText} from '@sanity/ui-workshop'
-
-export default function PropsStory() {
-  const padding = useSelect('Padding', SPACE)
-  const paddingX = useSelect('Padding X', SPACE)
-  const paddingY = useSelect('Padding Y', SPACE)
-  const radius = useSelect('Radius', [undefined, ...RADIUS])
-  const tone = useSelect('Tone', ELEMENT_TONES, 'default')
-
-  const text = useText('Text', 'Label')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Badge
-        padding={padding}
-        paddingX={paddingX}
-        paddingY={paddingY}
-        radius={radius}
-        tone={tone}
-        onClick={useAction('onClick')}
-      >
-        {text}
-      </Badge>
-    </Flex>
-  )
-}

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

@@ -1,15 +0,0 @@
-import {Badge, ELEMENT_TONES, Flex} from '@sanity/ui'
-
-export default function Tones(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Flex align="center" direction="column" gap={2}>
-        {ELEMENT_TONES.map((tone) => (
-          <Badge key={tone} tone={tone}>
-            {tone}
-          </Badge>
-        ))}
-      </Flex>
-    </Flex>
-  )
-}

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

@@ -1,26 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/badge',
-  title: 'Badge',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./Props')),
-    },
-    {
-      name: 'tones',
-      title: 'Tones',
-      component: lazy(() => import('./Tones')),
-    },
-    {
-      name: 'within-button',
-      title: 'Within button',
-      component: lazy(() => import('./within-button')),
-    },
-  ],
-}
-
-export default scope

package/src/primitives/badge/__workshop__/within-button.tsx

@@ -1,36 +0,0 @@
-import {Badge, Box, Button, Text} from '@sanity/ui'
-
-import {CardWrapper} from '$workshop'
-
-export default function WithinButtonStory(): React.JSX.Element {
-  return (
-    <CardWrapper gap={4} width={0}>
-      <Box display="flex" justifyContent="center">
-        <Button mode="default" padding={2}>
-          <Box flex={1} padding={1}>
-            <Text size={1}>Button</Text>
-          </Box>
-          <Badge tone="suggest">Badge</Badge>
-        </Button>
-      </Box>
-
-      <Box display="flex" justifyContent="center">
-        <Button mode="ghost" padding={2}>
-          <Box flex={1} padding={1}>
-            <Text size={1}>Button</Text>
-          </Box>
-          <Badge tone="suggest">Badge</Badge>
-        </Button>
-      </Box>
-
-      <Box display="flex" justifyContent="center">
-        <Button mode="bleed" padding={2}>
-          <Box flex={1} padding={1}>
-            <Text size={1}>Button</Text>
-          </Box>
-          <Badge tone="suggest">Badge</Badge>
-        </Button>
-      </Box>
-    </CardWrapper>
-  )
-}