@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/primitives/avatar/Avatar.tsx

@@ -0,0 +1,145 @@
+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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,13 @@
+import {Avatar, Flex} from '@sanity/ui'
+import {AVATAR_SIZE} from '@sanity/ui/tokens'
+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

@@ -0,0 +1,25 @@
+import {Avatar, Box} from '@sanity/ui'
+import {AVATAR_SIZE} from '@sanity/ui/tokens'
+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

@@ -0,0 +1,28 @@
+import {Avatar, AvatarCounter, AvatarStack, Box} from '@sanity/ui'
+import {AVATAR_SIZE} from '@sanity/ui/tokens'
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,36 @@
+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

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

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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,28 @@
+import {Badge, Flex} from '@sanity/ui'
+import {ELEMENT_TONES, RADIUS, SPACE} from '@sanity/ui/tokens'
+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

@@ -0,0 +1,16 @@
+import {Badge, Flex} from '@sanity/ui'
+import {ELEMENT_TONES} from '@sanity/ui/tokens'
+
+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

@@ -0,0 +1,26 @@
+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