@sanity/ui 3.1.13 → 4.0.0-beta.0

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

@@ -1,17 +0,0 @@
-import {Button, Flex} from '@sanity/ui'
-import {styled} from 'styled-components'
-
-const StyledButton1 = styled.a`
-  &:hover {
-    background-color: red;
-    box-shadow: none;
-  }
-`
-
-export default function StyledButton1Story() {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Button as={StyledButton1} href="#" text="Test" />
-    </Flex>
-  )
-}

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

@@ -1,19 +0,0 @@
-import {Button, Flex} from '@sanity/ui'
-import {styled} from 'styled-components'
-
-const StyledButton2 = styled(Button)<{$color?: boolean}>`
-  &:hover {
-    background-color: red;
-    box-shadow: none;
-  }
-`
-
-export default function StyledButton2Story() {
-  const props = {href: '#', text: 'Test'}
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <StyledButton2 $color forwardedAs="a" {...props} />
-    </Flex>
-  )
-}

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

@@ -1,28 +0,0 @@
-import {Button, Flex} from '@sanity/ui'
-import {useCallback, useRef} from 'react'
-
-export default function UploadButtonStory() {
-  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" htmlFor="file" justify="center">
-      <Button
-        as="label"
-        onKeyDown={handleKeyDown}
-        tabIndex={0}
-        text={
-          <>
-            Upload
-            <input id="file" ref={inputRef} type="file" style={{display: 'none'}} />
-          </>
-        }
-      />
-    </Flex>
-  )
-}

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

@@ -1,44 +0,0 @@
-/** @jest-environment jsdom */
-
-import {AddIcon} from '@sanity/icons'
-import {screen} from '@testing-library/react'
-import {axe} from 'jest-axe'
-
-import {render} from '../../../../test'
-import {Button, ButtonProps} 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()
-  })
-
-  it('should wrap button', () => {
-    function WrappedButton({button: buttonProps}: {button: ButtonProps}) {
-      return <Button {...buttonProps} />
-    }
-
-    const buttonProps: ButtonProps = {
-      text: 'Button text',
-    }
-
-    render(<WrappedButton button={buttonProps} />)
-
-    expect(screen.getByText('Button text')).toBeInTheDocument()
-  })
-})

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

@@ -1,186 +0,0 @@
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, isValidElement, useMemo} from 'react'
-import {isValidElementType} from 'react-is'
-import {styled} from 'styled-components'
-
-import {_getArrayProp, ThemeProps} from '../../styles'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {useTheme_v2} from '../../theme'
-import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from '../../types'
-import {Box} from '../box'
-import {Flex} from '../flex'
-import {Spinner} from '../spinner'
-import {Text} from '../text'
-import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../types'
-import {buttonBaseStyles, buttonColorStyles} from './styles'
-
-/**
- * @public
- */
-export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  fontSize?: number | number[]
-  mode?: ButtonMode
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
-  justify?: FlexJustify | FlexJustify[]
-  /**
-   * @beta Do not use in production, as this might change.
-   */
-  loading?: boolean
-  selected?: boolean
-  space?: number | number[]
-  muted?: boolean
-  text?: React.ReactNode
-  textAlign?: ButtonTextAlign
-  textWeight?: ThemeFontWeightKey
-  tone?: ButtonTone
-  type?: 'button' | 'reset' | 'submit'
-  width?: ButtonWidth
-}
-
-const StyledButton = styled.button<
-  {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
-    ThemeProps
->(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)
-
-const LoadingBox = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--card-bg-color);
-  border-radius: inherit;
-  z-index: 1;
-  box-shadow: inherit;
-`
-
-/**
- * @public
- */
-export const Button = forwardRef(function Button(
-  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'width'>,
-  ref: React.ForwardedRef<HTMLButtonElement>,
-) {
-  const {
-    children,
-    disabled,
-    fontSize = 1,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    justify: justifyProp = 'center',
-    loading,
-    mode = 'default',
-    padding: paddingProp = 3,
-    paddingX: paddingXProp,
-    paddingY: paddingYProp,
-    paddingTop: paddingTopProp,
-    paddingBottom: paddingBottomProp,
-    paddingLeft: paddingLeftProp,
-    paddingRight: paddingRightProp,
-    radius: radiusProp = 2,
-    selected,
-    space: spaceProp = 3,
-    text,
-    textAlign,
-    textWeight,
-    tone = 'default',
-    type = 'button',
-    muted = false,
-    width,
-    ...restProps
-  } = props
-  const {button} = useTheme_v2()
-
-  const justify = _getArrayProp(justifyProp)
-  const padding = _getArrayProp(paddingProp)
-  const paddingX = _getArrayProp(paddingXProp)
-  const paddingY = _getArrayProp(paddingYProp)
-  const paddingTop = _getArrayProp(paddingTopProp)
-  const paddingBottom = _getArrayProp(paddingBottomProp)
-  const paddingLeft = _getArrayProp(paddingLeftProp)
-  const paddingRight = _getArrayProp(paddingRightProp)
-  const radius = _getArrayProp(radiusProp)
-  const space = _getArrayProp(spaceProp)
-
-  const boxProps = useMemo(
-    () => ({
-      // flex: 1,
-      padding,
-      paddingX,
-      paddingY,
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-    }),
-    [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],
-  )
-
-  return (
-    <StyledButton
-      data-ui="Button"
-      {...restProps}
-      $mode={mode}
-      $radius={radius}
-      $tone={tone}
-      data-disabled={Boolean(loading || disabled)}
-      data-selected={selected ? '' : undefined}
-      disabled={Boolean(loading || disabled)}
-      ref={ref}
-      type={type}
-      $width={width}
-    >
-      {Boolean(loading) && (
-        <LoadingBox>
-          <Spinner />
-        </LoadingBox>
-      )}
-
-      {(IconComponent || text || IconRightComponent) && (
-        <Box as="span" {...boxProps}>
-          <Flex as="span" justify={justify} gap={space}>
-            {IconComponent && (
-              <Text size={fontSize}>
-                {isValidElement(IconComponent) && IconComponent}
-                {isValidElementType(IconComponent) && <IconComponent />}
-              </Text>
-            )}
-
-            {text && (
-              <Box>
-                <Text
-                  muted={muted}
-                  align={textAlign}
-                  size={fontSize}
-                  textOverflow="ellipsis"
-                  weight={textWeight ?? button.textWeight}
-                >
-                  {text}
-                </Text>
-              </Box>
-            )}
-
-            {IconRightComponent && (
-              <Text size={fontSize}>
-                {isValidElement(IconRightComponent) && IconRightComponent}
-                {isValidElementType(IconRightComponent) && <IconRightComponent />}
-              </Text>
-            )}
-          </Flex>
-        </Box>
-      )}
-
-      {children && (
-        <Box as="span" {...boxProps}>
-          {children}
-        </Box>
-      )}
-    </StyledButton>
-  )
-})
-Button.displayName = 'ForwardRef(Button)'

package/src/core/primitives/button/index.ts

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

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

@@ -1,117 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
-import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
-
-/**
- * @internal
- */
-export function buttonBaseStyles(
-  props: {$width?: ButtonWidth} & ThemeProps,
-): ReturnType<typeof css> {
-  const {$width} = props
-  const {style} = getTheme_v2(props.theme)
-
-  return css`
-    ${style?.button};
-
-    -webkit-font-smoothing: inherit;
-    appearance: none;
-    display: inline-flex;
-    align-items: center;
-    font: inherit;
-    border: 0;
-    outline: none;
-    user-select: none;
-    text-decoration: none;
-    border: 0;
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    white-space: nowrap;
-    text-align: left;
-    position: relative;
-    vertical-align: top;
-
-    ${$width === 'fill' &&
-    css`
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    `}
-
-    & > span {
-      display: block;
-      flex: 1;
-      min-width: 0;
-      border-radius: inherit;
-    }
-
-    &::-moz-focus-inner {
-      border: 0;
-      padding: 0;
-    }
-  `
-}
-
-function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
-  return boxShadows.filter(Boolean).join(',')
-}
-
-/**
- * @internal
- */
-export function buttonColorStyles(
-  props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
-): CSSObject[] {
-  const {$mode} = props
-  const {button, color: baseColor, style} = getTheme_v2(props.theme)
-  const shadow = props.$mode === 'ghost'
-  const mode = baseColor.button[$mode] || baseColor.button.default
-  const color = mode[props.$tone] || mode.default
-  const border = {
-    width: button.border.width,
-    color: 'var(--card-border-color)',
-  }
-  // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--card-border-color) 25%, var(--card-bg-color))`
-  const defaultBoxShadow = undefined
-
-  return [
-    _cardColorStyle(baseColor, color.enabled),
-    {
-      'backgroundColor': 'var(--card-bg-color)',
-      'color': 'var(--card-fg-color)',
-      'boxShadow': focusRingBorderStyle(border),
-      '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
-      "&:not([data-disabled='true'])": {
-        'boxShadow': combineBoxShadow(
-          focusRingBorderStyle(border),
-          shadow ? defaultBoxShadow : undefined,
-        ),
-        '&:focus': {
-          boxShadow: focusRingStyle({
-            base: baseColor,
-            border: {width: 2, color: baseColor.bg},
-            focusRing: button.focusRing,
-          }),
-        },
-        '&:focus:not(:focus-visible)': {
-          boxShadow: combineBoxShadow(
-            focusRingBorderStyle(border),
-            shadow ? defaultBoxShadow : undefined,
-          ),
-        },
-        '@media (hover: hover)': {
-          '&:hover': _cardColorStyle(baseColor, color.hovered),
-          '&:active': _cardColorStyle(baseColor, color.pressed),
-          '&[data-hovered]': _cardColorStyle(baseColor, color.hovered),
-        },
-        '&[data-selected]': _cardColorStyle(baseColor, color.pressed),
-      },
-    },
-    style?.button?.root,
-  ].filter(Boolean) as CSSObject[]
-}

package/src/core/primitives/card/__workshop__/allTones.tsx

@@ -1,25 +0,0 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
-
-export default function AllTonesStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack space={3}>
-          {THEME_COLOR_CARD_TONES.map((tone) => (
-            <Card
-              key={tone}
-              padding={3}
-              radius={2}
-              shadow={2}
-              style={{textAlign: 'center'}}
-              tone={tone}
-            >
-              <Text size={1}>{tone}</Text>
-            </Card>
-          ))}
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}

package/src/core/primitives/card/__workshop__/asButton.tsx

@@ -1,107 +0,0 @@
-import {Box, Card, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function AsButtonStory() {
-  const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Container>
-        <Grid columns={3} gap={2}>
-          <Box>
-            <Text align="center" size={1} weight="medium">
-              Enabled
-            </Text>
-            <Stack marginTop={3} space={2}>
-              {tones.map(([title, tone]) => (
-                <Card
-                  __unstable_focusRing
-                  as="button"
-                  key={tone}
-                  padding={3}
-                  style={{textAlign: 'center'}}
-                  tone={tone}
-                >
-                  <Stack space={2}>
-                    <Text size={1} weight="medium">
-                      {title}
-                    </Text>
-                    <Text muted size={1}>
-                      Muted
-                    </Text>
-                    <Text accent size={1}>
-                      Accent
-                    </Text>
-                  </Stack>
-                </Card>
-              ))}
-            </Stack>
-          </Box>
-
-          <Box>
-            <Text align="center" size={1} weight="medium">
-              Disabled
-            </Text>
-            <Stack marginTop={3} space={2}>
-              {tones.map(([title, tone]) => (
-                <Card
-                  __unstable_focusRing
-                  as="button"
-                  disabled
-                  key={tone}
-                  padding={3}
-                  style={{textAlign: 'center'}}
-                  tone={tone}
-                >
-                  <Stack space={2}>
-                    <Text size={1} weight="medium">
-                      {title}
-                    </Text>
-                    <Text size={1} muted>
-                      Muted
-                    </Text>
-                    <Text accent size={1}>
-                      Accent
-                    </Text>
-                  </Stack>
-                </Card>
-              ))}
-            </Stack>
-          </Box>
-
-          <Box>
-            <Text align="center" size={1} weight="medium">
-              Selected
-            </Text>
-            <Stack marginTop={3} space={2}>
-              {tones.map(([title, tone]) => (
-                <Card
-                  __unstable_focusRing
-                  as="button"
-                  key={tone}
-                  padding={3}
-                  selected
-                  style={{textAlign: 'center'}}
-                  tone={tone}
-                >
-                  <Stack space={2}>
-                    <Text size={1} weight="medium">
-                      {title}
-                    </Text>
-                    <Text size={1} muted>
-                      Muted
-                    </Text>
-                    <Text accent size={1}>
-                      Accent
-                    </Text>
-                  </Stack>
-                </Card>
-              ))}
-            </Stack>
-          </Box>
-        </Grid>
-      </Container>
-    </Flex>
-  )
-}

package/src/core/primitives/card/__workshop__/asComponent.tsx

@@ -1,27 +0,0 @@
-import {Card, Flex, Text} from '@sanity/ui'
-import {forwardRef} from 'react'
-
-const CustomLink = forwardRef(function CustomLink(
-  props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
-  ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.JSX.Element {
-  const {children, req, ...restProps} = props
-
-  return (
-    <a data-required={req} {...restProps} ref={ref}>
-      {children}
-    </a>
-  )
-})
-
-export default function AsComponentStory() {
-  const props = {href: '#'}
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Card as={CustomLink} data-as="a" {...props} padding={3}>
-        <Text size={1}>As component</Text>
-      </Card>
-    </Flex>
-  )
-}

package/src/core/primitives/card/__workshop__/checkered.tsx

@@ -1,26 +0,0 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
-import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
-
-export default function CheckeredStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Stack space={1}>
-        {THEME_COLOR_CARD_TONES.map((tone) => (
-          <Card
-            __unstable_checkered
-            border
-            key={tone}
-            padding={3}
-            sizing="border"
-            style={{width: 120, height: 60}}
-            tone={tone}
-          >
-            <Text muted size={1}>
-              {tone}
-            </Text>
-          </Card>
-        ))}
-      </Stack>
-    </Flex>
-  )
-}

package/src/core/primitives/card/__workshop__/index.ts

@@ -1,18 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/card',
-  title: 'Card',
-  stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
-    {name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
-    {name: 'tones', title: 'Tones', component: lazy(() => import('./allTones'))},
-    {name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
-    {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
-    {name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},
-    {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
-    {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
-  ],
-})

package/src/core/primitives/card/__workshop__/interactive.tsx

@@ -1,30 +0,0 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-export default function InteractiveCardStory() {
-  const pressed = useBoolean('Pressed', false, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <div>
-        <Card
-          __unstable_focusRing
-          as="button"
-          padding={3}
-          pressed={pressed}
-          selected={selected}
-          tabIndex={0}
-        >
-          <Stack space={3}>
-            <Text>
-              Text <code>Code</code>
-            </Text>
-            <Text muted>Muted</Text>
-            <Text accent>Accent</Text>
-          </Stack>
-        </Card>
-      </div>
-    </Flex>
-  )
-}