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

package/src/primitives/box/Box.tsx

@@ -1,73 +0,0 @@
-import {box, BOX_STYLE_PROP_KEYS, type BoxStyleProps} from '@sanity/ui-css'
-
-import {_splitKeys} from '../../core/_keys'
-import type {ComponentType, Props} from '../../core/types'
-
-/** @public */
-export const DEFAULT_BOX_ELEMENT = 'div'
-
-/** @public */
-export type BoxOwnProps = BoxStyleProps
-
-/** @public */
-export type BoxElementType =
-  | 'a'
-  | 'article'
-  | 'aside'
-  | 'blockquote'
-  | 'body'
-  | 'button'
-  | 'details'
-  | 'div'
-  | 'header'
-  | 'fieldset'
-  | 'figure'
-  | 'figcaption'
-  | 'footer'
-  | 'form'
-  | 'html'
-  | 'iframe'
-  | 'kbd'
-  | 'label'
-  | 'legend'
-  | 'li'
-  | 'main'
-  | 'nav'
-  | 'ol'
-  | 'pre'
-  | 'section'
-  | 'span'
-  | 'summary'
-  | 'table'
-  | 'tbody'
-  | 'td'
-  | 'tfoot'
-  | 'th'
-  | 'thead'
-  | 'tr'
-  | 'ul'
-  | ComponentType
-
-/** @public */
-export type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, E>
-
-/**
- * The `Box` component is a basic layout wrapper component which provides utility properties
- * for flex, margins and padding.
- *
- * @public
- */
-export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(
-  props: BoxProps<E>,
-): React.JSX.Element {
-  const [
-    styleProps,
-    {
-      as: Element = DEFAULT_BOX_ELEMENT,
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(props as BoxProps<typeof DEFAULT_BOX_ELEMENT>, BOX_STYLE_PROP_KEYS)
-
-  return <Element data-ui="Box" {...domProps} className={box(styleProps)} />
-}

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

@@ -1,26 +0,0 @@
-import {Box, type BoxProps, Text} from '@sanity/ui'
-import {BORDER_STYLE, BORDER_WIDTH, RADIUS, SHADOW, SPACE} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-export default function PropsStory(): React.JSX.Element {
-  const boxProps: BoxProps = {
-    border: useSelect('Border', BORDER_STYLE),
-    borderWidth: useSelect('Border Width', BORDER_WIDTH),
-    muted: useBoolean('Muted'),
-    padding: useSelect('Padding', SPACE),
-    radius: useSelect('Radius', RADIUS),
-    shadow: useSelect('Shadow', SHADOW),
-  }
-
-  return (
-    <CardWrapper>
-      <Box {...boxProps}>
-        <Text muted size={1}>
-          Text within box with props
-        </Text>
-      </Box>
-    </CardWrapper>
-  )
-}

package/src/primitives/box/__workshop__/Responsive.tsx

@@ -1,19 +0,0 @@
-import {Box, Text, vars} from '@sanity/ui'
-
-export default function ResponsiveStory(): React.JSX.Element {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Box
-        display={['none', 'block', 'none', 'block', 'none', 'block', 'none']}
-        flex={[1, 2, 3, 4, 5, 6, 7]}
-        id="responsive-box"
-        padding={3}
-        style={{outline: `1px solid ${vars.color.border}`}}
-      >
-        <Text align="center" muted>
-          This is a box with responsive props
-        </Text>
-      </Box>
-    </Box>
-  )
-}

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

@@ -1,21 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/box',
-  title: 'Box',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./Props')),
-    },
-    {
-      name: 'responsive',
-      title: 'Responsive',
-      component: lazy(() => import('./Responsive')),
-    },
-  ],
-}
-
-export default scope

package/src/primitives/button/Button.test.tsx

@@ -1,30 +0,0 @@
-import {AddIcon} from '@sanity/icons'
-import {screen} from '@testing-library/react'
-import {describe, expect, it} from 'vitest'
-import {axe} from 'vitest-axe'
-
-import {render} from '$test/utils'
-
-import {Button} from './Button'
-
-describe('atoms/button', () => {
-  it('Axe: should have no violations', async () => {
-    const lightResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
-      scheme: 'light',
-    })
-
-    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
-
-    const darkResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
-      scheme: 'dark',
-    })
-
-    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
-  })
-
-  it('should render text', () => {
-    render(<Button text="Button text" />)
-
-    expect(screen.getByText('Button text')).toBeInTheDocument()
-  })
-})

package/src/primitives/button/Button.tsx

@@ -1,148 +0,0 @@
-import {
-  button,
-  button_loadingBox,
-  BUTTON_STYLE_PROP_KEYS,
-  type ButtonStyleProps,
-  type ResponsiveProp,
-} from '@sanity/ui-css'
-import type {FontTextSize} from '@sanity/ui-tokens'
-import {isValidElement} from 'react'
-import {isValidElementType} from 'react-is'
-
-import {_splitKeys} from '../../core/_keys'
-import type {ComponentType, Props} from '../../core/types'
-import {Box} from '../box/Box'
-import {Spinner} from '../spinner/Spinner'
-import {Text, type TextOwnProps} from '../text/Text'
-import {Tooltip, type TooltipProps} from '../tooltip/Tooltip'
-
-/** @public */
-export const DEFAULT_BUTTON_ELEMENT = 'button'
-
-/** @public */
-export interface ButtonOwnProps extends ButtonStyleProps {
-  'data-ui'?: string
-  'fontSize'?: ResponsiveProp<FontTextSize>
-  'icon'?: React.ElementType | React.ReactNode
-  'iconRight'?: React.ElementType | React.ReactNode
-  'loading'?: boolean
-  'muted'?: boolean
-  'pressed'?: boolean
-  /** @deprecated Use `pressed` instead. */
-  'selected'?: boolean
-  'textAlign'?: TextOwnProps['align']
-  'text'?: React.ReactNode
-  'textOverflow'?: TextOwnProps['textOverflow']
-  'textWeight'?: TextOwnProps['weight']
-  'tooltip'?: Omit<TooltipProps<'div'>, 'as' | 'children'>
-}
-
-/** @public */
-export type ButtonElementType = 'a' | 'button' | 'label' | ComponentType
-
-/** @public */
-export type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<ButtonOwnProps, E>
-
-/** @public */
-export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(
-  props: ButtonProps<E>,
-): React.JSX.Element {
-  const [
-    styleProps,
-    {
-      as: Element = DEFAULT_BUTTON_ELEMENT,
-      children,
-      disabled,
-      fontSize = 1,
-      icon: Icon,
-      iconRight: IconRight,
-      loading,
-      muted,
-      pressed = props.selected,
-      // eslint-disable-next-line no-warning-comments
-      selected: _selected, // TODO: remove in next major version
-      text,
-      textAlign,
-      textOverflow = 'ellipsis',
-      textWeight = 'medium',
-      tooltip,
-      type = 'button',
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(props as ButtonProps<typeof DEFAULT_BUTTON_ELEMENT>, BUTTON_STYLE_PROP_KEYS)
-
-  let href: string | undefined = undefined
-
-  if ('href' in domProps) {
-    href = typeof domProps.href === 'string' ? domProps.href : href
-    delete domProps.href
-  }
-
-  const node = (
-    <Element
-      data-ui="Button"
-      {...domProps}
-      className={button(styleProps)}
-      data-disabled={loading || disabled ? '' : props['data-disabled']}
-      data-pressed={pressed ? '' : (props['data-pressed'] ?? props['data-selected'])}
-      disabled={Boolean(loading || disabled)}
-      // WORKAROUND: Since `a` elements don't support the `disabled` prop,
-      // we need to remove the `href` prop from the DOM props when the button is disabled.
-      // @ts-expect-error - the default element is a `button` and does not have the `href` prop
-      href={disabled ? undefined : href}
-      type={type}
-    >
-      {Boolean(loading) && (
-        <Box
-          alignItems="center"
-          as="span"
-          className={button_loadingBox()}
-          display="flex"
-          flex={1}
-          justifyContent="center"
-          width="fill"
-        >
-          <Spinner size={fontSize} />
-        </Box>
-      )}
-
-      {Icon && (
-        <Text as="span" flex="none" muted size={fontSize}>
-          {isValidElement(Icon) && Icon}
-          {isValidElementType(Icon) && <Icon />}
-        </Text>
-      )}
-
-      {text && (
-        <Box as="span" maxWidth="auto">
-          <Text
-            align={textAlign}
-            as="span"
-            muted={muted}
-            size={fontSize}
-            textOverflow={textOverflow}
-            weight={textWeight}
-          >
-            {text}
-          </Text>
-        </Box>
-      )}
-
-      {children}
-
-      {IconRight && (
-        <Text as="span" flex="none" muted size={fontSize}>
-          {isValidElement(IconRight) && IconRight}
-          {isValidElementType(IconRight) && <IconRight />}
-        </Text>
-      )}
-    </Element>
-  )
-
-  if (tooltip) {
-    return <Tooltip {...tooltip}>{node}</Tooltip>
-  }
-
-  return node
-}

package/src/primitives/button/__workshop__/Custom.tsx

@@ -1,39 +0,0 @@
-import {
-  Avatar,
-  Badge,
-  Button,
-  BUTTON_MODES,
-  ELEMENT_TONES,
-  Flex,
-  Grid,
-  Hotkeys,
-  Stack,
-  Text,
-} from '@sanity/ui'
-
-export default function CustomStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Stack gap={2}>
-        {BUTTON_MODES.map((mode) => (
-          <Grid key={mode} gap={1} gridTemplateColumns={7}>
-            {ELEMENT_TONES.map((tone) => (
-              <Button key={tone} mode={mode} padding={3} tone={tone}>
-                <Stack gap={2}>
-                  <Text>Text</Text>
-                  <Text muted>Muted</Text>
-                  <Text>
-                    <code>Code</code>
-                  </Text>
-                  <Hotkeys keys={['mod', 'c']} />
-                  <Avatar />
-                  <Badge>Badge</Badge>
-                </Stack>
-              </Button>
-            ))}
-          </Grid>
-        ))}
-      </Stack>
-    </Flex>
-  )
-}

package/src/primitives/button/__workshop__/CustomIcons.tsx

@@ -1,37 +0,0 @@
-import {RocketIcon} from '@sanity/icons'
-import {Button, BUTTON_MODES, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-export default function CustomIconsStory(): React.JSX.Element {
-  const mode = useSelect('Mode', BUTTON_MODES, 'default')
-
-  return (
-    <CardWrapper>
-      <Flex align="center" gap={2} height="fill" justify="center">
-        {/* <Inline gap={1}> */}
-        <Button fontSize={1} icon={RocketIcon} mode={mode} text="Rocket" />
-        <Button fontSize={1} icon={CustomIcon} mode={mode} text="Heart" />
-        {/* </Inline> */}
-      </Flex>
-    </CardWrapper>
-  )
-}
-
-function CustomIcon() {
-  return (
-    <svg
-      fill="currentColor"
-      height="1em"
-      stroke="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 24 24"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M0 0h24v24H0z" fill="none"></path>
-      <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path>
-    </svg>
-  )
-}

package/src/primitives/button/__workshop__/DataProps.tsx

@@ -1,18 +0,0 @@
-import {Button, BUTTON_MODES, ELEMENT_TONES} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-export default function DataPropsStory(): React.JSX.Element {
-  const mode = useSelect('Mode', [undefined, ...BUTTON_MODES], 'default')
-  const tone = useSelect('Tone', [undefined, ...ELEMENT_TONES], 'default')
-
-  return (
-    <CardWrapper gap={3}>
-      <Button data-enabled="" mode={mode} text="Button" tone={tone} />
-      <Button data-hovered="" mode={mode} text="Button" tone={tone} />
-      <Button data-pressed="" mode={mode} text="Button" tone={tone} />
-      <Button data-selected="" mode={mode} text="Button" tone={tone} />
-    </CardWrapper>
-  )
-}

package/src/primitives/button/__workshop__/Disabled.tsx

@@ -1,43 +0,0 @@
-import {ArrowLeftIcon, ArrowRightIcon} from '@sanity/icons'
-import {Button, type ButtonProps, Stack, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-const sharedProps: ButtonProps<'button'> = {
-  icon: ArrowLeftIcon,
-  iconRight: ArrowRightIcon,
-  justify: 'space-between',
-}
-
-export default function DisabledButtonStory(): React.JSX.Element {
-  const muted = useBoolean('Muted', false)
-
-  return (
-    <CardWrapper gap={5} width={0}>
-      <Stack gap={3}>
-        <Text size={1} weight="medium">
-          Default button
-        </Text>
-        <Button {...sharedProps} mode="default" muted={muted} text="Enabled" />
-        <Button {...sharedProps} disabled mode="default" muted={muted} text="Disabled" />
-      </Stack>
-
-      <Stack gap={3}>
-        <Text size={1} weight="medium">
-          Ghost button
-        </Text>
-        <Button {...sharedProps} mode="ghost" muted={muted} text="Enabled" />
-        <Button {...sharedProps} disabled mode="ghost" muted={muted} text="Disabled" />
-      </Stack>
-
-      <Stack gap={3}>
-        <Text size={1} weight="medium">
-          Bleed button
-        </Text>
-        <Button {...sharedProps} mode="bleed" muted={muted} text="Enabled" />
-        <Button {...sharedProps} disabled mode="bleed" muted={muted} text="Disabled" />
-      </Stack>
-    </CardWrapper>
-  )
-}

package/src/primitives/button/__workshop__/MixedChildren.tsx

@@ -1,12 +0,0 @@
-import {AddIcon} from '@sanity/icons'
-import {Button, Flex} from '@sanity/ui'
-
-export default function MixedChildrenStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Button fontSize={[2, 2, 3]} icon={AddIcon} mode="ghost" padding={[3, 3, 4]} text="Create">
-        <span style={{display: 'none'}}>test</span>
-      </Button>
-    </Flex>
-  )
-}

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

@@ -1,60 +0,0 @@
-import {icons} from '@sanity/icons'
-import {Button, Flex, type TooltipProps} from '@sanity/ui'
-import {BUTTON_MODES, ELEMENT_TONES, FONT_TEXT_SIZE, FONT_WEIGHT, SPACE} from '@sanity/ui'
-import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  CardWrapper,
-  WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS,
-  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
-  WORKSHOP_ICON_SYMBOL_OPTIONS,
-} from '$workshop'
-
-export default function ButtonStory(): React.JSX.Element {
-  const disabled = useBoolean('Disabled')
-  const fontSize = useSelect('Font size', [undefined, ...FONT_TEXT_SIZE])
-  const gap = useSelect('Gap', [undefined, ...SPACE])
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS)
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
-  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
-  const loading = useBoolean('Loading')
-  const mode = useSelect('Mode', [undefined, ...BUTTON_MODES])
-  const paddingX = useSelect('Padding X', [undefined, ...SPACE])
-  const paddingY = useSelect('Padding Y', [undefined, ...SPACE])
-  const selected = useBoolean('Selected')
-  const tone = useSelect('Tone', [undefined, ...ELEMENT_TONES])
-  const textAlign = useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS)
-  const textProp = useText('Text', 'Text')
-  const textWeight = useSelect('Text weight', [undefined, ...FONT_WEIGHT])
-  const tooltip = useText('Tooltip text', 'Tooltip')
-
-  return (
-    <CardWrapper width={0}>
-      <Flex align="center" height="fill" justify="center">
-        <Button
-          disabled={disabled}
-          fontSize={fontSize}
-          gap={gap}
-          icon={icon && icons[icon]}
-          iconRight={iconRight && icons[iconRight]}
-          justify={justify}
-          loading={loading}
-          mode={mode}
-          paddingX={paddingX}
-          paddingY={paddingY}
-          selected={selected}
-          text={textProp}
-          textAlign={textAlign}
-          textWeight={textWeight}
-          tone={tone}
-          tooltip={
-            tooltip
-              ? ({hotkeys: ['⌘', 'K'], id: 'test-button-tooltip', text: tooltip} as TooltipProps)
-              : undefined
-          }
-          onClick={useAction('onClick')}
-        />
-      </Flex>
-    </CardWrapper>
-  )
-}

package/src/primitives/button/__workshop__/Stacked.tsx

@@ -1,60 +0,0 @@
-import {icons} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  BUTTON_MODES,
-  Container,
-  ELEMENT_TONES,
-  Flex,
-  FONT_TEXT_SIZE,
-  SPACE,
-  Stack,
-} from '@sanity/ui'
-import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {CardWrapper, WORKSHOP_FLEX_JUSTIFY_OPTIONS, WORKSHOP_ICON_SYMBOL_OPTIONS} from '$workshop'
-
-export default function StackedStory(): React.JSX.Element {
-  const disabled = useBoolean('Disabled', false)
-  const fontSize = useSelect('Font size', FONT_TEXT_SIZE)
-  const gap = useSelect('Gap', SPACE)
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS)
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
-  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
-  const mode = useSelect('Mode', BUTTON_MODES)
-  const onClick = useAction('onClick')
-  const paddingX = useSelect('Padding X', SPACE)
-  const paddingY = useSelect('Padding Y', SPACE)
-  const selected = useBoolean('Selected', false)
-
-  return (
-    <CardWrapper>
-      <Flex align="center" height="fill" justify="center">
-        <Container style={{textAlign: 'center'}} width={0}>
-          <Box padding={4}>
-            <Stack gap={1}>
-              {ELEMENT_TONES.map((tone) => (
-                <Button
-                  key={tone}
-                  disabled={disabled}
-                  fontSize={fontSize}
-                  gap={gap}
-                  icon={icon && icons[icon]}
-                  iconRight={iconRight && icons[iconRight]}
-                  justify={justify}
-                  mode={mode}
-                  paddingX={paddingX}
-                  paddingY={paddingY}
-                  selected={selected}
-                  text={tone}
-                  tone={tone}
-                  onClick={onClick}
-                />
-              ))}
-            </Stack>
-          </Box>
-        </Container>
-      </Flex>
-    </CardWrapper>
-  )
-}

package/src/primitives/button/__workshop__/Styled1.css.ts

@@ -1,7 +0,0 @@
-import {style} from '@vanilla-extract/css'
-
-export const styledButton1: string = style({
-  ':hover': {
-    backgroundColor: 'red',
-  },
-})

package/src/primitives/button/__workshop__/Styled1.tsx

@@ -1,11 +0,0 @@
-import {Button, Flex} from '@sanity/ui'
-
-import {styledButton1} from './Styled1.css'
-
-export default function StyledButton1Story(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Button as="a" className={styledButton1} href="#" text="Test" />
-    </Flex>
-  )
-}

package/src/primitives/button/__workshop__/TextOverflow.tsx

@@ -1,17 +0,0 @@
-import {Button, Flex} from '@sanity/ui'
-import {useText} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-export default function TextOverflowStory(): React.JSX.Element {
-  const text = useText('Text', 'Long text that should overflow')
-
-  return (
-    <CardWrapper gap={3} width={0}>
-      <Flex gap={2}>
-        <Button text={text} />
-        <Button flex="none" mode="bleed" text="Cancel" />
-      </Flex>
-    </CardWrapper>
-  )
-}

package/src/primitives/button/__workshop__/UploadButton.tsx

@@ -1,28 +0,0 @@
-import {UploadIcon} from '@sanity/icons'
-import {Button, Flex} from '@sanity/ui'
-import {useCallback, useRef} from 'react'
-
-export default function UploadButtonStory(): React.JSX.Element {
-  const inputRef = useRef<HTMLInputElement | null>(null)
-
-  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      inputRef.current?.click()
-    }
-  }, [])
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Button
-        as="label"
-        htmlFor="file"
-        icon={UploadIcon}
-        tabIndex={0}
-        text="Upload"
-        onKeyDown={handleKeyDown}
-      >
-        <input ref={inputRef} id="file" style={{display: 'none'}} type="file" />
-      </Button>
-    </Flex>
-  )
-}