@sanity/ui 4.0.0-v4.1 → 4.0.1

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

@@ -1,193 +0,0 @@
-import type {
-  BoxStyleProps,
-  ButtonStyleProps,
-  DisplayStyleProps,
-  GapStyleProps,
-  PaddingStyleProps,
-  ResponsiveProp,
-  Width,
-} from '@sanity/ui/css'
-import {button, buttonLoadingBox} from '@sanity/ui/css'
-import type {FontTextSize} from '@sanity/ui/theme'
-import {type ElementType as ReactElementType, isValidElement, type ReactNode} from 'react'
-import {isValidElementType} from 'react-is'
-
-import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/Box'
-import {Spinner} from '../spinner/Spinner'
-import {Text, type TextOwnProps} from '../text/Text'
-import type {ButtonTextAlign} from './types'
-
-/** @public */
-export const DEFAULT_BUTTON_ELEMENT = 'button'
-
-/** @public */
-export type ButtonOwnProps = ButtonStyleProps &
-  DisplayStyleProps &
-  GapStyleProps &
-  PaddingStyleProps & {
-    'align'?: BoxStyleProps['alignItems']
-    'data-ui'?: string
-    'disabled'?: boolean
-    'fontSize'?: ResponsiveProp<FontTextSize>
-    'icon'?: ReactElementType | ReactNode
-    'iconRight'?: ReactElementType | ReactNode
-    'justify'?: BoxStyleProps['justifyContent']
-    /** @beta Do not use in production, as this might change.*/
-    'loading'?: boolean
-    'selected'?: boolean
-    'textAlign'?: ButtonTextAlign
-    'muted'?: boolean
-    'target'?: string
-    'text'?: ReactNode
-    'textOverflow'?: TextOwnProps['textOverflow']
-    'textWeight'?: TextOwnProps['weight']
-    'width'?: ResponsiveProp<Width>
-  }
-
-/** @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 {
-    align = 'center',
-    as: Element = DEFAULT_BUTTON_ELEMENT,
-    children,
-    className,
-    disabled,
-    flex,
-    fontSize = 1,
-    gap = props.padding ?? 3,
-    gapX,
-    gapY,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    justify = 'center',
-    loading,
-    mode = 'default',
-    padding = 3,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    radius = 2,
-    selected,
-    text,
-    textAlign,
-    textOverflow = 'ellipsis',
-    textWeight = 'medium',
-    tone = 'default',
-    type = 'button',
-    muted = false,
-    width,
-    ...rest
-  } = props as ButtonProps<typeof DEFAULT_BUTTON_ELEMENT>
-
-  let href: string | undefined = undefined
-
-  if ('href' in rest) {
-    href = typeof rest.href === 'string' ? rest.href : href
-    delete rest.href
-  }
-
-  return (
-    <Element
-      data-ui="Button"
-      {...rest}
-      className={button({className, flex, mode, radius, tone, width})}
-      data-disabled={loading || disabled ? '' : undefined}
-      data-selected={selected ? '' : undefined}
-      disabled={Boolean(loading || disabled)}
-      // @ts-expect-error - TODO: fix this
-      href={disabled ? undefined : href}
-      type={type}
-    >
-      {Boolean(loading) && (
-        <Box
-          alignItems="center"
-          as="span"
-          className={buttonLoadingBox()}
-          display="flex"
-          flex={1}
-          justifyContent="center"
-          width="fill"
-        >
-          <Spinner size={fontSize} />
-        </Box>
-      )}
-
-      {(IconComponent || text || IconRightComponent) && (
-        <Box
-          alignItems={align}
-          as="span"
-          display="flex"
-          flex={1}
-          gap={gap}
-          gapX={gapX}
-          gapY={gapY}
-          justifyContent={justify}
-          padding={padding}
-          paddingX={paddingX}
-          paddingY={paddingY}
-          paddingTop={paddingTop}
-          paddingBottom={paddingBottom}
-          paddingLeft={paddingLeft}
-          paddingRight={paddingRight}
-        >
-          {IconComponent && (
-            <Text as="span" flex="none" muted size={fontSize}>
-              {isValidElement(IconComponent) && IconComponent}
-              {isValidElementType(IconComponent) && <IconComponent />}
-            </Text>
-          )}
-
-          {text && (
-            <Box as="span" maxWidth="auto">
-              <Text
-                align={textAlign}
-                as="span"
-                muted={muted}
-                size={fontSize}
-                textOverflow={textOverflow}
-                weight={textWeight}
-              >
-                {text}
-              </Text>
-            </Box>
-          )}
-
-          {IconRightComponent && (
-            <Text as="span" flex="none" muted size={fontSize}>
-              {isValidElement(IconRightComponent) && IconRightComponent}
-              {isValidElementType(IconRightComponent) && <IconRightComponent />}
-            </Text>
-          )}
-        </Box>
-      )}
-
-      {children && (
-        <Box
-          as="span"
-          flex={1}
-          padding={padding}
-          paddingX={paddingX}
-          paddingY={paddingY}
-          paddingTop={paddingTop}
-          paddingBottom={paddingBottom}
-          paddingLeft={paddingLeft}
-          paddingRight={paddingRight}
-        >
-          {children}
-        </Box>
-      )}
-    </Element>
-  )
-}

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

@@ -1,27 +0,0 @@
-import {Button, Flex, Grid, Hotkeys, Stack, Text} from '@sanity/ui'
-import {BUTTON_MODES, ELEMENT_TONES} from '@sanity/ui/theme'
-
-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 gridTemplateColumns={7} gap={1} key={mode}>
-            {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={['Cmd', 'C']} />
-                </Stack>
-              </Button>
-            ))}
-          </Grid>
-        ))}
-      </Stack>
-    </Flex>
-  )
-}

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

@@ -1,30 +0,0 @@
-import {RocketIcon} from '@sanity/icons'
-import {Button, Flex, Inline} from '@sanity/ui'
-
-export default function CustomIconsStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Inline gap={1}>
-        <Button fontSize={1} gap={2} icon={RocketIcon} padding={2} text="Rocket" />
-        <Button fontSize={1} gap={2} icon={CustomIcon} padding={2} text="Heart" />
-      </Inline>
-    </Flex>
-  )
-}
-
-function CustomIcon() {
-  return (
-    <svg
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 24 24"
-      height="1em"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path fill="none" d="M0 0h24v24H0z"></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/core/primitives/button/__workshop__/Disabled.tsx

@@ -1,54 +0,0 @@
-import {SquareIcon} from '@sanity/icons'
-import {Button, Card, Container, Grid, Stack, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-const GAP = 4
-const COLUMNS = 3
-
-const DEFAULT_PROPS = {
-  icon: SquareIcon,
-  iconRight: SquareIcon,
-} as const
-
-export default function DisabledButtonStory(): React.JSX.Element {
-  const muted = useBoolean('Muted', false)
-
-  return (
-    <Card padding={5}>
-      <Container width={2}>
-        <Stack gap={4}>
-          <Grid gridTemplateColumns={COLUMNS} gap={GAP}>
-            <Text size={1} weight="semibold">
-              Default
-            </Text>
-            <Text size={1} weight="semibold">
-              Ghost
-            </Text>
-            <Text size={1} weight="semibold">
-              Bleed
-            </Text>
-          </Grid>
-
-          <Stack gap={2}>
-            <Grid gridTemplateColumns={COLUMNS} gap={GAP}>
-              <Stack gap={2}>
-                <Button {...DEFAULT_PROPS} mode="default" muted={muted} text="Enabled" />
-                <Button {...DEFAULT_PROPS} disabled mode="default" muted={muted} text="Disabled" />
-              </Stack>
-
-              <Stack gap={2}>
-                <Button {...DEFAULT_PROPS} mode="ghost" muted={muted} text="Enabled" />
-                <Button {...DEFAULT_PROPS} disabled mode="ghost" muted={muted} text="Disabled" />
-              </Stack>
-
-              <Stack gap={2}>
-                <Button {...DEFAULT_PROPS} mode="bleed" muted={muted} text="Enabled" />
-                <Button {...DEFAULT_PROPS} mode="bleed" disabled muted={muted} text="Disabled" />
-              </Stack>
-            </Grid>
-          </Stack>
-        </Stack>
-      </Container>
-    </Card>
-  )
-}

package/src/core/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/core/primitives/button/__workshop__/Props.tsx

@@ -1,77 +0,0 @@
-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_FONT_SIZE_OPTIONS,
-  WORKSHOP_TEXT_WEIGHT_OPTIONS,
-} from '$workshop'
-
-export default function ButtonStory(): React.JSX.Element {
-  const disabled = useBoolean('Disabled')
-  // @ts-expect-error - TODO: fix this
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
-  // @ts-expect-error - TODO: fix this
-  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS)
-  // @ts-expect-error - TODO: fix this
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS)
-  // @ts-expect-error - TODO: fix this
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
-  // @ts-expect-error - TODO: fix this
-  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
-  const loading = useBoolean('Loading')
-  // @ts-expect-error - TODO: fix this
-  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS)
-  // @ts-expect-error - TODO: fix this
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS)
-  // @ts-expect-error - TODO: fix this
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS)
-  const selected = useBoolean('Selected')
-  // @ts-expect-error - TODO: fix this
-  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS)
-  // @ts-expect-error - TODO: fix this
-  const textAlign = useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS)
-  const textProp = useText('Text', 'Label')
-  // @ts-expect-error - TODO: fix this
-  const textWeight = useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS)
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Button
-        disabled={disabled}
-        // @ts-expect-error - TODO: fix this
-        fontSize={fontSize}
-        // @ts-expect-error - TODO: fix this
-        gap={gap}
-        // @ts-expect-error - TODO: fix this
-        icon={icon && icons[icon]}
-        // @ts-expect-error - TODO: fix this
-        iconRight={iconRight && icons[iconRight]}
-        // @ts-expect-error - TODO: fix this
-        justify={justify}
-        loading={loading}
-        // @ts-expect-error - TODO: fix this
-        mode={mode}
-        onClick={useAction('onClick')}
-        // @ts-expect-error - TODO: fix this
-        paddingX={paddingX}
-        // @ts-expect-error - TODO: fix this
-        paddingY={paddingY}
-        selected={selected}
-        // @ts-expect-error - TODO: fix this
-        textAlign={textAlign}
-        text={textProp}
-        // @ts-expect-error - TODO: fix this
-        textWeight={textWeight}
-        // @ts-expect-error - TODO: fix this
-        tone={tone}
-      />
-    </Flex>
-  )
-}

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

@@ -1,36 +0,0 @@
-import {UploadIcon} from '@sanity/icons'
-import {Button, Flex} from '@sanity/ui'
-import {styled} from 'styled-components'
-
-const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
-  & input {
-    appearance: none;
-    overflow: hidden;
-    overflow: clip;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    position: absolute;
-    max-width: 0;
-    width: -webkit-fill-available;
-    width: stretch;
-  }
-
-  & > span:nth-child(2) {
-    width: 0;
-    flex: none;
-    padding: 0;
-  }
-`
-
-export default function SanityUploadButtonWorkaroundStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <SanityUploadButton htmlFor="file" icon={UploadIcon} tabIndex={0} text="Upload">
-        <input type="file" />
-      </SanityUploadButton>
-    </Flex>
-  )
-}

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

@@ -1,74 +0,0 @@
-import {icons} from '@sanity/icons'
-import {Box, Button, Card, Container, Flex, Stack} from '@sanity/ui'
-import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_BUTTON_MODE_OPTIONS,
-  WORKSHOP_BUTTON_TONE_OPTIONS,
-  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
-  WORKSHOP_ICON_SYMBOL_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '$workshop'
-
-export default function StackedStory(): React.JSX.Element {
-  const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
-  const disabled = useBoolean('Disabled', false)
-  // @ts-expect-error - TODO: fix this
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
-  // @ts-expect-error - TODO: fix this
-  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3)
-  // @ts-expect-error - TODO: fix this
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle')
-  // @ts-expect-error - TODO: fix this
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
-  // @ts-expect-error - TODO: fix this
-  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center')
-  // @ts-expect-error - TODO: fix this
-  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default')
-  const onClick = useAction('onClick')
-  // @ts-expect-error - TODO: fix this
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3)
-  // @ts-expect-error - TODO: fix this
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3)
-  const selected = useBoolean('Selected', false)
-
-  return (
-    <Card height="fill">
-      <Flex align="center" height="fill" justify="center">
-        <Container width={0} style={{textAlign: 'center'}}>
-          <Box padding={4}>
-            <Stack gap={1}>
-              {tones.map(([title, tone]) => (
-                <Button
-                  disabled={disabled}
-                  // @ts-expect-error - TODO: fix this
-                  fontSize={fontSize}
-                  // @ts-expect-error - TODO: fix this
-                  gap={gap}
-                  // @ts-expect-error - TODO: fix this
-                  icon={icon && icons[icon]}
-                  // @ts-expect-error - TODO: fix this
-                  iconRight={iconRight && icons[iconRight]}
-                  // @ts-expect-error - TODO: fix this
-                  justify={justify}
-                  key={tone}
-                  // @ts-expect-error - TODO: fix this
-                  mode={mode}
-                  onClick={onClick}
-                  // @ts-expect-error - TODO: fix this
-                  paddingX={paddingX}
-                  // @ts-expect-error - TODO: fix this
-                  paddingY={paddingY}
-                  selected={selected}
-                  text={title}
-                  tone={tone}
-                />
-              ))}
-            </Stack>
-          </Box>
-        </Container>
-      </Flex>
-    </Card>
-  )
-}

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(): React.JSX.Element {
-  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(): React.JSX.Element {
-  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__/TextOverflow.tsx

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

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

@@ -1,29 +0,0 @@
-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"
-        onKeyDown={handleKeyDown}
-        tabIndex={0}
-        text={
-          <>
-            Upload
-            <input id="file" ref={inputRef} type="file" style={{display: 'none'}} />
-          </>
-        }
-      />
-    </Flex>
-  )
-}

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

@@ -1,66 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/button',
-  title: 'Button',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./Props')),
-    },
-    {
-      name: 'styled-1',
-      title: 'Styled #1',
-      component: lazy(() => import('./Styled1')),
-    },
-    {
-      name: 'styled-2',
-      title: 'Styled #2',
-      component: lazy(() => import('./Styled2')),
-    },
-    {
-      name: 'stacked',
-      title: 'Stacked',
-      component: lazy(() => import('./Stacked')),
-    },
-    {
-      name: 'custom',
-      title: 'Custom',
-      component: lazy(() => import('./Custom')),
-    },
-    {
-      name: 'mixed-children',
-      title: 'Mixed children',
-      component: lazy(() => import('./MixedChildren')),
-    },
-    {
-      name: 'upload-button',
-      title: 'Upload button',
-      component: lazy(() => import('./UploadButton')),
-    },
-    {
-      name: 'sanity-upload-button-workaround',
-      title: 'SanityUploadButtonWorkaroundStory',
-      component: lazy(() => import('./SanityUploadButton')),
-    },
-    {
-      name: 'custom-icons',
-      title: 'Custom icons',
-      component: lazy(() => import('./CustomIcons')),
-    },
-    {
-      name: 'disabled',
-      title: 'Disabled',
-      component: lazy(() => import('./Disabled')),
-    },
-    {
-      name: 'text-overflow',
-      title: 'Text overflow',
-      component: lazy(() => import('./TextOverflow')),
-    },
-  ],
-}
-
-export default scope

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

@@ -1,2 +0,0 @@
-/** @public */
-export type ButtonTextAlign = 'left' | 'right' | 'center'