@sanity/ui 1.0.0-beta.9 → 1.0.0

package/src/primitives/avatar/avatar.tsx

@@ -0,0 +1,172 @@
+import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
+import ReactIs from 'react-is'
+import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
+import {ThemeColorSpotKey, useTheme} from '../../theme'
+import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
+import {Text} from '../text'
+import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
+
+/**
+ * @public
+ */
+export interface AvatarProps {
+  animateArrowFrom?: AvatarPosition
+  arrowPosition?: AvatarPosition
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  color?: ThemeColorSpotKey
+  initials?: string
+  onImageLoadError?: (event: Error) => void
+  size?: AvatarSize | AvatarSize[]
+  src?: string
+  /**
+   * The status of the entity this Avatar represents.
+   * @alpha
+   */
+  status?: AvatarStatus
+  title?: string
+}
+
+const Root = styled.div<{$color: string; $size: AvatarSize[]}>(
+  responsiveAvatarSizeStyle,
+  avatarStyle.root
+)
+
+const Arrow = styled.div(avatarStyle.arrow)
+
+const BgStroke = styled.ellipse(avatarStyle.bgStroke)
+
+const Stroke = styled.ellipse(avatarStyle.stroke)
+
+const Initials = styled.div(avatarStyle.initials)
+
+/**
+ * @public
+ */
+export const Avatar = forwardRef(function Avatar(
+  props: AvatarProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const {
+    as: asProp,
+    color: colorKey = 'gray',
+    src,
+    title,
+    initials,
+    onImageLoadError,
+    arrowPosition: arrowPositionProp,
+    animateArrowFrom,
+    status = 'online',
+    size: sizeProp = 0,
+    ...restProps
+  } = props
+  const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
+  const size = useArrayProp(sizeProp)
+  const theme = useTheme()
+  const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray
+
+  // @todo: remove this
+  const avatarSize = theme.sanity.avatar.sizes[size[0]] || theme.sanity.avatar.sizes[0]
+  const _sizeRem = avatarSize.size
+  const _radius = _sizeRem / 2
+
+  const elementId = useId()
+  const [arrowPosition, setArrowPosition] = useState<AvatarPosition | undefined>(
+    animateArrowFrom || arrowPositionProp || 'inside'
+  )
+
+  const [imageFailed, setImageFailed] = useState<boolean>(false)
+
+  const imageId = `avatar-image-${elementId}`
+
+  useEffect(() => {
+    if (arrowPosition === arrowPositionProp) return undefined
+
+    // Start animation in the next frame
+    const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp))
+
+    return () => cancelAnimationFrame(raf)
+  }, [arrowPosition, arrowPositionProp])
+
+  useEffect(() => {
+    if (src) setImageFailed(false)
+  }, [src])
+
+  const handleImageError = useCallback(() => {
+    setImageFailed(true)
+
+    if (onImageLoadError) {
+      onImageLoadError(new Error('Avatar: the image failed to load'))
+    }
+  }, [onImageLoadError])
+
+  const initialsSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s + 1)), [size])
+
+  return (
+    <Root
+      as={as}
+      data-as={typeof as === 'string' ? as : undefined}
+      data-ui="Avatar"
+      {...restProps}
+      $size={size}
+      $color={color}
+      aria-label={title}
+      data-arrow-position={arrowPosition}
+      data-status={status}
+      ref={ref}
+      title={title}
+    >
+      <Arrow>
+        <svg width="11" height="7" viewBox="0 0 11 7" fill="none">
+          <path
+            d="M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z"
+            fill={color}
+          />
+        </svg>
+      </Arrow>
+
+      {!imageFailed && src && (
+        <svg viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
+          <defs>
+            <pattern id={imageId} patternContentUnits="objectBoundingBox" width="1" height="1">
+              <image
+                href={src}
+                width="1"
+                height="1"
+                // eslint-disable-next-line react/no-unknown-property
+                onError={handleImageError}
+              />
+            </pattern>
+          </defs>
+
+          <circle cx={_radius} cy={_radius} r={_radius} fill={`url(#${imageId})`} />
+          <BgStroke
+            cx={_radius}
+            cy={_radius}
+            rx={_radius}
+            ry={_radius}
+            vectorEffect="non-scaling-stroke"
+          />
+          <Stroke
+            cx={_radius}
+            cy={_radius}
+            rx={_radius}
+            ry={_radius}
+            stroke={color}
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      )}
+
+      {(imageFailed || !src) && initials && (
+        <>
+          <Initials>
+            <Text as="span" size={initialsSize}>
+              <strong>{initials}</strong>
+            </Text>
+          </Initials>
+        </>
+      )}
+    </Root>
+  )
+})

package/src/primitives/avatar/avatarCounter.tsx

@@ -0,0 +1,79 @@
+import {forwardRef, useMemo} from 'react'
+import styled, {css} from 'styled-components'
+import {EMPTY_RECORD} from '../../constants'
+import {useArrayProp} from '../../hooks'
+import {rem, _responsive, ThemeProps} from '../../styles'
+import {AvatarSize} from '../../types'
+import {Text} from '../text'
+
+function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
+  const {theme} = props
+  const {avatar, media} = theme.sanity
+
+  return _responsive(media, props.$size, (size) => {
+    const avatarSize = avatar.sizes[size]
+
+    if (!avatarSize) return EMPTY_RECORD
+
+    return {
+      borderRadius: rem(avatarSize.size / 2),
+      minWidth: rem(avatarSize.size),
+      height: rem(avatarSize.size),
+    }
+  })
+}
+
+function _avatarCounterBaseStyle(props: ThemeProps) {
+  const {theme} = props
+
+  return css`
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    user-select: none;
+    color: inherit;
+    color: var(--card-fg-color);
+    background: var(--card-bg-color);
+    box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);
+    padding: 0 ${rem(theme.sanity.space[2])};
+
+    &:not([hidden]) {
+      display: flex;
+    }
+  `
+}
+
+const Root = styled.div<{$size: AvatarSize[]}>(
+  _responsiveAvatarCounterSizeStyle,
+  _avatarCounterBaseStyle
+)
+
+/**
+ * @public
+ */
+export interface AvatarCounterProps {
+  count: number
+  size?: AvatarSize | AvatarSize[]
+  /** @deprecated No longer supported. */
+  tone?: 'navbar'
+}
+
+/**
+ * @public
+ */
+export const AvatarCounter = forwardRef(function AvatarCounter(
+  props: AvatarCounterProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const {count, size: sizeProp = 0} = props
+  const size = useArrayProp(sizeProp)
+  const counterSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s + 1)), [size])
+
+  return (
+    <Root $size={size} data-ui="AvatarCounter" ref={ref}>
+      <Text as="span" size={counterSize}>
+        <strong>{count}</strong>
+      </Text>
+    </Root>
+  )
+})

package/src/primitives/avatar/avatarStack.tsx

@@ -0,0 +1,99 @@
+import {cloneElement, forwardRef} from 'react'
+import styled, {css} from 'styled-components'
+import {EMPTY_RECORD} from '../../constants'
+import {useArrayProp} from '../../hooks'
+import {rem, _responsive, ThemeProps} from '../../styles'
+import {AvatarSize} from '../../types'
+import {childrenToElementArray} from '../helpers'
+import {AvatarCounter} from './avatarCounter'
+
+const BASE_STYLES = css`
+  white-space: nowrap;
+
+  & > div {
+    vertical-align: top;
+
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  }
+`
+
+function avatarStackStyle() {
+  return BASE_STYLES
+}
+
+function responsiveAvatarStackSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
+  const {theme} = props
+  const {avatar, media} = theme.sanity
+
+  return _responsive(media, props.$size, (size) => {
+    const avatarSize = avatar.sizes[size]
+
+    if (!avatarSize) return EMPTY_RECORD
+
+    return {
+      '& > div + div': {
+        marginLeft: rem(avatarSize.distance),
+      },
+    }
+  })
+}
+
+const Root = styled.div<{$size: AvatarSize[]}>(responsiveAvatarStackSizeStyle, avatarStackStyle)
+
+/**
+ * @public
+ */
+export interface AvatarStackProps {
+  children: React.ReactNode
+  maxLength?: number
+  size?: AvatarSize | AvatarSize[]
+  /** @deprecated No longer supported. */
+  tone?: 'navbar'
+}
+
+/**
+ * @public
+ */
+export const AvatarStack = forwardRef(function AvatarStack(
+  props: AvatarStackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const {
+    children: childrenProp,
+    maxLength: maxLengthProp = 4,
+    size: sizeProp = 0,
+    ...restProps
+  } = props
+  const children = childrenToElementArray(childrenProp).filter(
+    (child) => typeof child !== 'string'
+  ) as React.ReactElement[]
+  const maxLength = Math.max(maxLengthProp, 0)
+  const size = useArrayProp(sizeProp)
+
+  const len = children.length
+  const visibleCount = maxLength - 1
+  const extraCount = len - visibleCount
+  const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children
+
+  return (
+    <Root data-ui="AvatarStack" {...restProps} ref={ref} $size={size}>
+      {len === 0 && (
+        <div>
+          <AvatarCounter count={len} />
+        </div>
+      )}
+
+      {len !== 0 && extraCount > 1 && (
+        <div>
+          <AvatarCounter count={extraCount} size={size} />
+        </div>
+      )}
+
+      {visibleChildren.map((child, childIndex) => (
+        <div key={String(childIndex)}>{cloneElement(child, {size})}</div>
+      ))}
+    </Root>
+  )
+})

package/src/primitives/avatar/index.ts

@@ -0,0 +1,4 @@
+export * from './avatar'
+export * from './avatarCounter'
+export * from './avatarStack'
+export * from './types'

package/src/primitives/avatar/styles.ts

@@ -0,0 +1,159 @@
+import {CSSObject} from 'styled-components'
+import {rem, _responsive, ThemeProps} from '../../styles'
+import {focusRingStyle} from '../../styles/internal'
+import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
+
+export const avatarStyle = {
+  root: avatarRootStyle,
+  arrow: avatarArrowStyle,
+  bgStroke: avatarBgStrokeStyle,
+  stroke: avatarStrokeStyle,
+  initials: avatarInitialsStyle,
+}
+
+function avatarArrowStyle(): CSSObject {
+  return {
+    position: 'absolute',
+    boxSizing: 'border-box',
+    zIndex: 0,
+    opacity: 0,
+    transition: 'all 0.2s linear',
+    transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+
+    '& > svg': {
+      width: '11px',
+      height: '7px',
+      position: 'absolute',
+      top: '-5px',
+      left: '50%',
+      transform: 'translateX(-6px)',
+
+      '&:not([hidden])': {
+        display: 'block',
+      },
+    },
+
+    "[data-arrow-position='inside'] > &": {
+      transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
+      opacity: 0,
+    },
+
+    "[data-arrow-position='top'] > &": {
+      opacity: 1,
+      transform: 'rotate(0deg)',
+    },
+
+    "[data-arrow-position='bottom'] > &": {
+      opacity: 1,
+      transform: 'rotate(-180deg)',
+    },
+  }
+}
+
+export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSObject {
+  const {$color, theme} = props
+  const {focusRing} = theme.sanity
+
+  return {
+    backgroundColor: $color,
+    position: 'relative',
+    boxSizing: 'border-box',
+    userSelect: 'none',
+    boxShadow: '0 0 0 1px var(--card-bg-color)',
+
+    '&[data-status="inactive"]': {
+      opacity: 0.5,
+    },
+
+    '&>svg': {
+      '&:not([hidden])': {
+        display: 'block',
+      },
+    },
+
+    /* &:is(button) */
+    '&[data-as="button"]': {
+      '-webkit-font-smoothing': 'inherit',
+      appearance: 'none',
+      margin: 0,
+      padding: 0,
+      border: 0,
+      font: 'inherit',
+      color: 'inherit',
+      outline: 'none',
+
+      '&:focus': {
+        boxShadow: focusRingStyle({focusRing}),
+      },
+
+      '&:focus:not(:focus-visible)': {
+        boxShadow: 'none',
+      },
+    },
+  }
+}
+
+export function responsiveAvatarSizeStyle(
+  props: ResponsiveAvatarSizeStyleProps & ThemeProps
+): CSSObject[] {
+  const {theme} = props
+  const {avatar, media} = theme.sanity
+
+  return _responsive(media, props.$size, (size) => {
+    const avatarSize = avatar.sizes[size] || avatar.sizes[0]
+
+    return {
+      width: rem(avatarSize.size),
+      height: rem(avatarSize.size),
+      borderRadius: rem(avatarSize.size / 2),
+
+      '&>svg': {
+        width: rem(avatarSize.size),
+        height: rem(avatarSize.size),
+        borderRadius: rem(avatarSize.size / 2),
+      },
+    }
+  })
+}
+
+export function avatarInitialsStyle(props: ThemeProps): CSSObject {
+  const {theme} = props
+  const {base} = theme.sanity.color
+
+  return {
+    width: '100%',
+    height: '100%',
+    color: base.fg,
+    alignItems: 'center',
+    justifyContent: 'center',
+    textTransform: 'uppercase',
+    textAlign: 'center',
+    borderRadius: '50%',
+
+    '&:not([hidden])': {
+      display: 'flex',
+    },
+  }
+}
+
+function avatarBgStrokeStyle(): CSSObject {
+  return {
+    strokeWidth: '4px',
+    stroke: 'var(--card-bg-color)',
+  }
+}
+
+function avatarStrokeStyle(): CSSObject {
+  return {
+    strokeWidth: '3px',
+
+    '[data-status="editing"] &': {
+      strokeSasharray: '2 4',
+      strokeLinecap: 'round',
+    },
+  }
+}

package/src/primitives/avatar/types.ts

@@ -0,0 +1,15 @@
+import {AvatarSize} from '../../types'
+
+/**
+ * @internal
+ */
+export interface AvatarRootStyleProps {
+  $color: string
+}
+
+/**
+ * @internal
+ */
+export interface ResponsiveAvatarSizeStyleProps {
+  $size: AvatarSize[]
+}

package/src/primitives/badge/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

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

@@ -0,0 +1,19 @@
+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/primitives/badge/__workshop__/props.tsx

@@ -0,0 +1,29 @@
+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', 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/primitives/badge/__workshop__/tones.tsx

@@ -0,0 +1,27 @@
+import {Badge, Flex, Inline} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+import {WORKSHOP_BADGE_MODE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function Tones() {
+  const mode = useSelect('Mode', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Inline space={2}>
+        <Badge mode={mode}>Default</Badge>
+        <Badge mode={mode} tone="primary">
+          Primary
+        </Badge>
+        <Badge mode={mode} tone="positive">
+          Positive
+        </Badge>
+        <Badge mode={mode} tone="caution">
+          Caution
+        </Badge>
+        <Badge mode={mode} tone="critical">
+          Critical
+        </Badge>
+      </Inline>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,15 @@
+/** @jest-environment jsdom */
+
+import {axe} from 'jest-axe'
+import {render} from '../../../test'
+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,57 @@
+import {forwardRef} from 'react'
+import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
+import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
+import {BadgeMode, BadgeTone} from '../../types'
+import {Box, BoxProps} from '../box'
+import {Label} from '../label'
+import {ResponsiveRadiusProps} from '../types'
+import {badgeStyle} from './styles'
+import {BadgeStyleProps} from './types'
+
+/**
+ * @public
+ */
+export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  fontSize?: number | number[]
+  mode?: BadgeMode
+  tone?: BadgeTone
+}
+
+const Root = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
+  responsiveRadiusStyle,
+  badgeStyle
+)
+
+/**
+ * @public
+ */
+export const Badge = forwardRef(function Badge(
+  props: BadgeProps & React.HTMLProps<HTMLDivElement>,
+  ref
+) {
+  const {
+    children,
+    fontSize,
+    mode = 'default',
+    padding = 1,
+    radius = 2,
+    tone = 'default',
+    ...restProps
+  } = props
+
+  return (
+    <Root
+      data-ui="Badge"
+      {...restProps}
+      $mode={mode}
+      $tone={tone}
+      $radius={useArrayProp(radius)}
+      padding={useArrayProp(padding)}
+      ref={ref}
+    >
+      <Label size={fontSize}>{children}</Label>
+    </Root>
+  )
+})

package/src/primitives/badge/index.ts

@@ -0,0 +1 @@
+export * from './badge'