@sanity/ui 3.0.0-static.9 → 3.0.0

package/src/core/primitives/avatar/avatarStack.tsx

@@ -0,0 +1,101 @@
+import {getTheme_v2} from '@sanity/ui/theme'
+import {Children, cloneElement, forwardRef, isValidElement} from 'react'
+import {css, styled} from 'styled-components'
+
+import {EMPTY_RECORD} from '../../constants'
+import {useArrayProp} from '../../hooks'
+import {_responsive, rem, ThemeProps} from '../../styles'
+import {AvatarSize} from '../../types'
+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 {avatar, media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$size, (size) => {
+    const avatarSize = avatar.sizes[size]
+
+    if (!avatarSize) return EMPTY_RECORD
+
+    return {
+      '& > div + div': {
+        marginLeft: rem(avatarSize.distance),
+      },
+    }
+  })
+}
+
+const StyledAvatarStack = 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 = 1,
+    ...restProps
+  } = props
+  const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
+  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 (
+    <StyledAvatarStack data-ui="AvatarStack" {...restProps} ref={ref} $size={size}>
+      {len === 0 && (
+        <div>
+          <AvatarCounter count={len} size={size} />
+        </div>
+      )}
+
+      {len !== 0 && extraCount > 1 && (
+        <div>
+          <AvatarCounter count={extraCount} size={size} />
+        </div>
+      )}
+
+      {visibleChildren.map((child, childIndex) => (
+        <div key={String(childIndex)}>{cloneElement(child, {size})}</div>
+      ))}
+    </StyledAvatarStack>
+  )
+})
+AvatarStack.displayName = 'ForwardRef(AvatarStack)'

package/src/core/primitives/avatar/styles.ts

@@ -0,0 +1,167 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+
+import {_responsive, rem, 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,
+  image: avatarImageStyle,
+}
+
+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} = props
+  const {avatar} = getTheme_v2(props.theme)
+
+  return {
+    '--avatar-bg-color': `var(--card-avatar-${$color}-bg-color)`,
+    '--avatar-fg-color': `var(--card-avatar-${$color}-fg-color)`,
+
+    'backgroundColor': 'var(--avatar-bg-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"]': {
+      'WebkitFontSmoothing': 'inherit',
+      'appearance': 'none',
+      'margin': 0,
+      'padding': 0,
+      'border': 0,
+      'font': 'inherit',
+      'color': 'inherit',
+      'outline': 'none',
+
+      '&:focus': {
+        boxShadow: focusRingStyle({focusRing: avatar.focusRing}),
+      },
+
+      '&:focus:not(:focus-visible)': {
+        boxShadow: 'none',
+      },
+    },
+  }
+}
+
+export function responsiveAvatarSizeStyle(
+  props: ResponsiveAvatarSizeStyleProps & ThemeProps,
+): CSSObject[] {
+  const {avatar, media} = getTheme_v2(props.theme)
+
+  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 avatarImageStyle(): CSSObject {
+  return {
+    position: 'relative',
+  }
+}
+
+export function avatarInitialsStyle(): CSSObject {
+  return {
+    'width': '100%',
+    'height': '100%',
+    'color': 'var(--avatar-fg-color)',
+    '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': '2px',
+    'stroke': 'var(--avatar-bg-color)',
+
+    '[data-status="editing"] &': {
+      strokeDasharray: '2 4',
+      strokeLinecap: 'round',
+    },
+  }
+}

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

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

@@ -0,0 +1,21 @@
+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/badge/badge.tsx

@@ -0,0 +1,62 @@
+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 {Text} from '../text'
+import {ResponsiveRadiusProps} from '../types'
+import {badgeStyle} from './styles'
+import {BadgeStyleProps} from './types'
+
+/**
+ * @public
+ */
+export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  fontSize?: number | number[]
+  /** @deprecated No longer used. */
+  mode?: BadgeMode
+  tone?: BadgeTone
+}
+
+const StyledBadge = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
+  responsiveRadiusStyle,
+  badgeStyle,
+)
+
+/**
+ * Badges are used to tag resources.
+ *
+ * @public
+ */
+export const Badge = forwardRef(function Badge(
+  props: BadgeProps & React.HTMLProps<HTMLDivElement>,
+  ref,
+) {
+  const {
+    children,
+    fontSize = 1,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    mode: _deprecated_mode,
+    padding = 1,
+    radius = 'full',
+    tone = 'default',
+    ...restProps
+  } = props
+
+  return (
+    <StyledBadge
+      data-ui="Badge"
+      {...restProps}
+      $tone={tone}
+      $radius={useArrayProp(radius)}
+      padding={useArrayProp(padding)}
+      ref={ref}
+    >
+      <Text size={fontSize}>{children}</Text>
+    </StyledBadge>
+  )
+})
+Badge.displayName = 'ForwardRef(Badge)'

package/src/core/primitives/badge/styles.ts

@@ -0,0 +1,20 @@
+import {CSSObject} from '@sanity/ui/theme'
+
+import {BadgeStyleProps} from './types'
+
+export function badgeStyle(props: BadgeStyleProps): CSSObject {
+  const {$tone} = props
+
+  return {
+    '--card-bg-color': `var(--card-badge-${$tone}-bg-color)`,
+    '--card-fg-color': `var(--card-badge-${$tone}-fg-color)`,
+
+    'backgroundColor': 'var(--card-bg-color)',
+    'cursor': 'default',
+
+    '&:not([hidden])': {
+      display: 'inline-block',
+      verticalAlign: 'top',
+    },
+  }
+}

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

@@ -0,0 +1,20 @@
+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>
+  )
+}

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

@@ -0,0 +1,131 @@
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+import {useArrayProp} from '../../hooks'
+import {
+  boxStyle,
+  flexItemStyle,
+  FlexItemStyleProps,
+  responsiveBoxStyle,
+  ResponsiveBoxStyleProps,
+  responsiveGridItemStyle,
+  ResponsiveGridItemStyleProps,
+  responsiveMarginStyle,
+  ResponsiveMarginStyleProps,
+  responsivePaddingStyle,
+  ResponsivePaddingStyleProps,
+} from '../../styles/internal'
+import {
+  ResponsiveBoxProps,
+  ResponsiveFlexItemProps,
+  ResponsiveGridItemProps,
+  ResponsiveMarginProps,
+  ResponsivePaddingProps,
+} from '../types'
+
+/**
+ * @public
+ */
+export interface BoxProps
+  extends ResponsiveFlexItemProps,
+    ResponsiveBoxProps,
+    ResponsiveGridItemProps,
+    ResponsiveMarginProps,
+    ResponsivePaddingProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
+}
+
+const StyledBox = styled.div<
+  FlexItemStyleProps &
+    ResponsiveBoxStyleProps &
+    ResponsiveGridItemStyleProps &
+    ResponsiveMarginStyleProps &
+    ResponsivePaddingStyleProps
+>(
+  boxStyle,
+  flexItemStyle,
+  responsiveBoxStyle,
+  responsiveGridItemStyle,
+  responsiveMarginStyle,
+  responsivePaddingStyle,
+)
+
+/**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
+ * @public
+ */
+export const Box = forwardRef(function Box(
+  props: BoxProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    as: asProp = 'div',
+    column,
+    columnStart,
+    columnEnd,
+    display = 'block',
+    flex,
+    height,
+    margin = 0,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    overflow,
+    padding = 0,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    row,
+    rowStart,
+    rowEnd,
+    sizing,
+    ...restProps
+  } = props
+
+  return (
+    <StyledBox
+      data-as={typeof asProp === 'string' ? asProp : undefined}
+      data-ui="Box"
+      {...restProps}
+      $column={useArrayProp(column)}
+      $columnStart={useArrayProp(columnStart)}
+      $columnEnd={useArrayProp(columnEnd)}
+      $display={useArrayProp(display)}
+      $flex={useArrayProp(flex)}
+      $height={useArrayProp(height)}
+      $margin={useArrayProp(margin)}
+      $marginX={useArrayProp(marginX)}
+      $marginY={useArrayProp(marginY)}
+      $marginTop={useArrayProp(marginTop)}
+      $marginRight={useArrayProp(marginRight)}
+      $marginBottom={useArrayProp(marginBottom)}
+      $marginLeft={useArrayProp(marginLeft)}
+      $overflow={useArrayProp(overflow)}
+      $padding={useArrayProp(padding)}
+      $paddingX={useArrayProp(paddingX)}
+      $paddingY={useArrayProp(paddingY)}
+      $paddingTop={useArrayProp(paddingTop)}
+      $paddingRight={useArrayProp(paddingRight)}
+      $paddingBottom={useArrayProp(paddingBottom)}
+      $paddingLeft={useArrayProp(paddingLeft)}
+      $row={useArrayProp(row)}
+      $rowStart={useArrayProp(rowStart)}
+      $rowEnd={useArrayProp(rowEnd)}
+      $sizing={useArrayProp(sizing)}
+      as={asProp}
+      ref={ref}
+    >
+      {props.children}
+    </StyledBox>
+  )
+})
+Box.displayName = 'ForwardRef(Box)'

package/src/core/primitives/button/__workshop__/custom.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import {Button, Flex, Grid, Stack, Text} from '@sanity/ui'
+
+import {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function CustomStory() {
+  const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
+  const len = tones.length
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Stack space={2}>
+        <Grid columns={len} gap={1}>
+          {tones.map(([title, tone]) => (
+            <Button key={tone} mode="ghost" padding={3} tone={tone}>
+              <Stack space={2}>
+                <Text>{title}</Text>
+                <Text muted>Muted</Text>
+                <Text muted>
+                  <a href="#">Link</a>
+                </Text>
+                <Text>
+                  <code>Code</code>
+                </Text>
+                <Text accent>Accent</Text>
+              </Stack>
+            </Button>
+          ))}
+        </Grid>
+        <Grid columns={len} gap={1}>
+          {tones.map(([title, tone]) => (
+            <Button key={tone} mode="default" padding={3} tone={tone}>
+              <Stack space={2}>
+                <Text>{title}</Text>
+                <Text muted>Muted</Text>
+                <Text muted>
+                  <a href="#">Link</a>
+                </Text>
+                <Text>
+                  <code>Code</code>
+                </Text>
+                <Text accent>Accent</Text>
+              </Stack>
+            </Button>
+          ))}
+        </Grid>
+      </Stack>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,55 @@
+import {icons} from '@sanity/icons'
+import {Button, Flex} from '@sanity/ui'
+import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+
+import {
+  WORKSHOP_BUTTON_MODE_OPTIONS,
+  WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS,
+  WORKSHOP_BUTTON_TONE_OPTIONS,
+  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
+  WORKSHOP_ICON_SYMBOL_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+  WORKSHOP_TEXT_SIZE_OPTIONS,
+  WORKSHOP_TEXT_WEIGHT_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function ButtonStory() {
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
+  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
+  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const selected = useBoolean('Selected', false, 'Props')
+  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default', 'Props')
+  const textAlign =
+    useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
+  const textProp = useText('Text', 'Label', 'Props')
+  const textWeight =
+    useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button
+        disabled={disabled}
+        fontSize={fontSize}
+        icon={icon && icons[icon]}
+        iconRight={iconRight && icons[iconRight]}
+        justify={justify}
+        mode={mode}
+        onClick={useAction('onClick')}
+        paddingX={paddingX}
+        paddingY={paddingY}
+        selected={selected}
+        space={space}
+        textAlign={textAlign}
+        text={textProp}
+        textWeight={textWeight}
+        tone={tone}
+      />
+    </Flex>
+  )
+}