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

package/src/primitives/textArea/__workshop__/Plain.tsx

@@ -1,46 +0,0 @@
-import {FONT_TEXT_SIZE, RADIUS, SPACE, Stack, Text, TextArea} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useState} from 'react'
-
-import {CardWrapper, WORKSHOP_FONT_WEIGHT_OPTIONS} from '$workshop'
-
-export default function PropsStory(): React.JSX.Element {
-  const border = useBoolean('Border', true)
-  const customValidity = useText('Custom validity')
-  const disableFocusRing = useBoolean('Disable focus ring (unstable)', false)
-  const disabled = useBoolean('Disabled', false)
-  const fontSize = useSelect('Font size', FONT_TEXT_SIZE)
-  const fontWeight = useSelect('Font weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
-  const padding = useSelect('Padding', SPACE)
-  const placeholder = useText('Placeholder', 'Placeholder')
-  const radius = useSelect('Radius', RADIUS)
-  const readOnly = useBoolean('Read only', false)
-
-  const [value, setValue] = useState('')
-
-  return (
-    <CardWrapper pattern="halftone">
-      <Stack gap={3}>
-        <Text as="label" hidden htmlFor="text-area-example" size={1} weight="medium">
-          TextArea
-        </Text>
-        <TextArea
-          __unstable_disableFocusRing={disableFocusRing}
-          border={border}
-          customValidity={customValidity}
-          disabled={disabled}
-          fontSize={fontSize}
-          fontWeight={fontWeight}
-          id="text-area-example"
-          padding={padding}
-          placeholder={placeholder}
-          radius={radius}
-          readOnly={readOnly}
-          rows={10}
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-        />
-      </Stack>
-    </CardWrapper>
-  )
-}

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

@@ -1,16 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/text-area',
-  title: 'TextArea',
-  stories: [
-    {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./Plain')),
-    },
-  ],
-}
-
-export default scope

package/src/primitives/textInput/TextInput.tsx

@@ -1,279 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {
-  _input_element,
-  _input_presentation,
-  type InputStyleProps,
-  type ResponsiveProp,
-  textInput,
-  textInput_element,
-  textInput_prefix,
-  textInput_suffix,
-} from '@sanity/ui-css'
-import type {FontWeight, Space} from '@sanity/ui-tokens'
-import {
-  type ElementType,
-  isValidElement,
-  type MouseEvent,
-  type ReactNode,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-} from 'react'
-import {isValidElementType} from 'react-is'
-
-import {EMPTY_RECORD} from '../../core/constants'
-import {_getResponsiveProp} from '../../core/helpers/props'
-import {isRecord} from '../../core/lib/isRecord'
-import type {ComponentType, Props} from '../../core/types'
-import {useCustomValidity} from '../../hooks/useCustomValidity'
-import {Box} from '../box/Box'
-import {Button, type ButtonProps} from '../button/Button'
-import {Text} from '../text/Text'
-
-/** @public */
-export const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
-
-/** @public */
-export type TextInputClearButtonProps = Omit<
-  ButtonProps<'button'>,
-  'as' | 'onClick' | 'onMouseDown'
->
-
-/** @public */
-export type TextInputOwnProps = InputStyleProps & {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  /**
-   * @beta
-   */
-  clearButton?: boolean | TextInputClearButtonProps
-  customValidity?: string
-  icon?: ElementType | ReactNode
-  iconRight?: ElementType | ReactNode
-  /**
-   * @beta
-   */
-  onClear?: () => void
-  prefix?: ReactNode
-  suffix?: ReactNode
-  /**
-   * @deprecated Use `fontWeight` instead
-   */
-  weight?: FontWeight
-}
-
-/** @public */
-export type TextInputElementType = 'input' | ComponentType
-
-/** @public */
-export type TextInputProps<E extends TextInputElementType = TextInputElementType> = Props<
-  TextInputOwnProps,
-  E
->
-
-/**
- * Single line text input.
- *
- * @public
- */
-export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_INPUT_ELEMENT>(
-  props: TextInputProps<E>,
-): React.JSX.Element {
-  const {
-    __unstable_disableFocusRing,
-    as: Element = DEFAULT_TEXT_INPUT_ELEMENT,
-    border,
-    className,
-    clearButton,
-    disabled = false,
-    flex,
-    fontSize = 2,
-    fontWeight: _fontWeight,
-    gap = 3,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    onClear,
-    padding: paddingProp = 3,
-    prefix,
-    radius,
-    readOnly,
-    ref: forwardedRef,
-    suffix,
-    customValidity,
-    type = 'text',
-    weight: _weight,
-    width,
-    ...rest
-  } = props as TextInputProps<typeof DEFAULT_TEXT_INPUT_ELEMENT>
-
-  const ref = useRef<HTMLInputElement | null>(null)
-
-  const fontWeight = _fontWeight ?? _weight
-  const padding = _getResponsiveProp(paddingProp)
-
-  const withClearButton = Boolean(clearButton)
-
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  // Prevent the clear button from taking the focus away from the input
-  const handleClearMouseDown = useCallback((event: MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault()
-    event.stopPropagation()
-  }, [])
-
-  const handleClearClick = useCallback(
-    (event: MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault()
-      event.stopPropagation()
-
-      if (onClear) onClear()
-
-      // Focus the input, in case focus has been lost when clicking the clear button
-      ref.current?.focus()
-    },
-    [onClear, ref],
-  )
-
-  return (
-    <span
-      className={textInput({
-        className,
-        border,
-        flex,
-        fontSize,
-        fontWeight,
-        padding,
-        radius,
-        gap,
-        width,
-      })}
-      data-icon-left={IconComponent ? '' : undefined}
-      data-icon-right={IconRightComponent ? '' : undefined}
-      data-prefix={prefix ? '' : undefined}
-      data-suffix={suffix ? '' : undefined}
-      data-ui="TextInput"
-    >
-      {prefix && (
-        <span className={textInput_prefix()}>
-          <span>{prefix}</span>
-        </span>
-      )}
-
-      <span className={textInput_element()}>
-        <Element
-          {...rest}
-          ref={ref}
-          className={_input_element()}
-          data-invalid={customValidity ? '' : undefined}
-          data-no-focus-ring={__unstable_disableFocusRing ? '' : undefined}
-          data-read-only={!disabled && readOnly ? '' : undefined}
-          disabled={disabled}
-          readOnly={readOnly}
-          type={type}
-        />
-
-        <span className={_input_presentation()}>
-          {IconComponent && (
-            <Box as="span" insetLeft={0} insetTop={0} padding={paddingProp} position="absolute">
-              <Text as="span" size={fontSize}>
-                {isValidElement(IconComponent) && IconComponent}
-                {isValidElementType(IconComponent) && <IconComponent />}
-              </Text>
-            </Box>
-          )}
-
-          {!withClearButton && IconRightComponent && (
-            <Box as="span" insetRight={0} insetTop={0} padding={paddingProp} position="absolute">
-              <Text as="span" size={fontSize}>
-                {isValidElement(IconRightComponent) && IconRightComponent}
-                {isValidElementType(IconRightComponent) && <IconRightComponent />}
-              </Text>
-            </Box>
-          )}
-        </span>
-
-        {!disabled && !readOnly && clearButton && (
-          <ClearButton
-            clearButtonProps={isRecord(clearButton) ? clearButton : EMPTY_RECORD}
-            fontSize={fontSize}
-            handleClearClick={handleClearClick}
-            handleClearMouseDown={handleClearMouseDown}
-            padding={padding}
-            radius={radius}
-          />
-        )}
-      </span>
-
-      {suffix && (
-        <span className={textInput_suffix()}>
-          <span>{suffix}</span>
-        </span>
-      )}
-    </span>
-  )
-}
-
-function ClearButton({
-  fontSize,
-  radius,
-  clearButtonProps,
-  handleClearClick,
-  handleClearMouseDown,
-  padding: paddingProp,
-}: {
-  clearButtonProps: TextInputClearButtonProps
-  handleClearClick: (event: MouseEvent<HTMLButtonElement>) => void
-  handleClearMouseDown: (event: MouseEvent<HTMLButtonElement>) => void
-  padding: ResponsiveProp<Space>
-} & Pick<TextInputOwnProps, 'fontSize' | 'radius'>) {
-  const padding = _getResponsiveProp(paddingProp)
-
-  const boxPadding = padding.map((p): Space => {
-    if (p === 0) return 0
-    if (p === 1) return 1
-    if (p === 2) return 1
-    if (p === 3) return 1
-
-    return typeof p === 'number' ? ((p - 2) as Space) : 0
-  }) as ResponsiveProp<Space>
-
-  const buttonPadding = padding.map((p): Space => {
-    if (p === 0) return 0
-    if (p === 1) return 0
-    if (p === 2) return 1
-    if (p === 3) return 2
-
-    return typeof p === 'number' ? ((p - 1) as Space) : 0
-  }) as ResponsiveProp<Space>
-
-  return (
-    <Box
-      as="span"
-      insetRight={0}
-      insetTop={0}
-      padding={boxPadding}
-      position="absolute"
-      style={{zIndex: 2}}
-    >
-      <Button
-        aria-label="Clear"
-        data-qa="clear-button"
-        fontSize={fontSize}
-        icon={CloseIcon}
-        mode="bleed"
-        padding={buttonPadding}
-        radius={radius}
-        {...clearButtonProps}
-        onClick={handleClearClick}
-        onMouseDown={handleClearMouseDown}
-      />
-    </Box>
-  )
-}

package/src/primitives/textInput/__workshop__/ClearButton.tsx

@@ -1,32 +0,0 @@
-import {TextInput} from '@sanity/ui'
-import {useText} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
-
-import {CardWrapper} from '$workshop'
-
-export default function ClearButtonStory(): React.JSX.Element {
-  const customValidity = useText('Custom validitiy')
-
-  const [value, setValue] = useState('')
-
-  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.currentTarget.value)
-  }, [])
-
-  const handleClear = useCallback(() => {
-    setValue('')
-  }, [])
-
-  return (
-    <CardWrapper>
-      <TextInput
-        clearButton
-        customValidity={customValidity}
-        placeholder="Enter text"
-        value={value}
-        onChange={handleChange}
-        onClear={handleClear}
-      />
-    </CardWrapper>
-  )
-}

package/src/primitives/textInput/__workshop__/CustomValidity.tsx

@@ -1,17 +0,0 @@
-import {Button, Stack, TextInput} from '@sanity/ui'
-import {useText} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-export default function CustomValidityStory(): React.JSX.Element {
-  const customValidity = useText('Custom validity', 'Invalid value') || undefined
-
-  return (
-    <CardWrapper>
-      <Stack as="form" gap={3} onSubmit={(event) => event.preventDefault()}>
-        <TextInput customValidity={customValidity} />
-        <Button text="Submit" type="submit" />
-      </Stack>
-    </CardWrapper>
-  )
-}

package/src/primitives/textInput/__workshop__/Plain.tsx

@@ -1,102 +0,0 @@
-import {icons} from '@sanity/icons'
-import {Box, FONT_TEXT_SIZE, RADIUS, SPACE, Stack, Text, TextInput} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {type PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
-import {fireEvent} from '@testing-library/dom'
-
-import {CardWrapper, WORKSHOP_FONT_WEIGHT_OPTIONS, WORKSHOP_ICON_SYMBOL_OPTIONS} from '$workshop'
-
-const typingPerfTest: PerfTestProps<HTMLInputElement> = {
-  name: 'typing',
-  title: 'Typing',
-  description: 'This test types one character at a time',
-  run({target}) {
-    const text = 'Hello, world & Hello, world & Hello, world'
-    const len = text.length
-
-    for (let i = 0; i < len; i += 1) {
-      const value = text.slice(0, i + 1)
-
-      fireEvent.change(target, {target: {value}})
-    }
-  },
-}
-
-export default function PlainStory(): React.JSX.Element {
-  const {ref, Wrapper} = usePerfTest(typingPerfTest)
-
-  return (
-    <CardWrapper pattern="halftone">
-      <Stack gap={3}>
-        <Text as="label" htmlFor="text-input-example" size={1} weight="medium">
-          TextInput
-        </Text>
-        <Wrapper>
-          <TextInputTest inputRef={ref} />
-        </Wrapper>
-      </Stack>
-    </CardWrapper>
-  )
-}
-
-function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
-  const {inputRef: ref} = props
-
-  const border = useBoolean('Border', true)
-  const clearButton = useBoolean('Clear button', false)
-  const customValidity = useText('Custom validity')
-  const disabled = useBoolean('Disabled', false)
-  const fontSize = useSelect('Font size', FONT_TEXT_SIZE)
-  const gap = useSelect('Gap', SPACE)
-  const fontWeight = useSelect('Font weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS)
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
-  const padding = useSelect('Padding', SPACE, 3)
-  const placeholder = useText('Placeholder')
-  const prefix = useBoolean('Prefix', false)
-  const radius = useSelect('Radius', RADIUS)
-  const readOnly = useBoolean('Read only', false)
-  const suffix = useBoolean('Suffix', false)
-  const value = useText('Value')
-
-  return (
-    <TextInput
-      ref={ref}
-      border={border}
-      clearButton={clearButton}
-      customValidity={customValidity}
-      disabled={disabled}
-      fontSize={fontSize}
-      fontWeight={fontWeight}
-      gap={gap}
-      icon={icon && icons[icon]}
-      iconRight={iconRight && icons[iconRight]}
-      id="text-input-example"
-      name="test"
-      padding={padding}
-      placeholder={placeholder}
-      prefix={
-        prefix && (
-          <Box padding={padding}>
-            <Text muted size={fontSize}>
-              Prefix
-            </Text>
-          </Box>
-        )
-      }
-      radius={radius}
-      readOnly={readOnly}
-      suffix={
-        suffix && (
-          <Box padding={padding}>
-            <Text muted size={fontSize}>
-              Suffix
-            </Text>
-          </Box>
-        )
-      }
-      value={value}
-      onChange={() => undefined}
-    />
-  )
-}

package/src/primitives/textInput/__workshop__/ReadOnly.tsx

@@ -1,14 +0,0 @@
-import {TextInput} from '@sanity/ui'
-import {useText} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-export default function ReadOnlyStory(): React.JSX.Element {
-  const value = useText('Value', 'This is some text')
-
-  return (
-    <CardWrapper>
-      <TextInput id="text-input-example" readOnly value={value} />
-    </CardWrapper>
-  )
-}

package/src/primitives/textInput/__workshop__/States.tsx

@@ -1,53 +0,0 @@
-import {Stack, Text, TextInput} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-export default function StatesStory(): React.JSX.Element {
-  const invalid = useBoolean('Invalid', false)
-  const onChange = useAction('onChange')
-
-  return (
-    <CardWrapper>
-      <Stack gap={5}>
-        <Stack gap={3}>
-          <Text size={1} weight="medium">
-            <label htmlFor="enabled-example">Enabled (default)</label>
-          </Text>
-          <TextInput
-            customValidity={invalid ? 'invalid' : undefined}
-            id="enabled-example"
-            value="This is some text"
-            onChange={onChange}
-          />
-        </Stack>
-
-        <Stack gap={3}>
-          <Text size={1} weight="medium">
-            <label htmlFor="disabled-example">Disabled</label>
-          </Text>
-          <TextInput
-            customValidity={invalid ? 'invalid' : undefined}
-            disabled
-            id="disabled-example"
-            value="This is some text"
-            onChange={onChange}
-          />
-        </Stack>
-
-        <Stack gap={3}>
-          <Text size={1} weight="medium">
-            <label htmlFor="read-only-example">Read-only</label>
-          </Text>
-          <TextInput
-            customValidity={invalid ? 'invalid' : undefined}
-            id="read-only-example"
-            readOnly
-            value="This is some text"
-            onChange={onChange}
-          />
-        </Stack>
-      </Stack>
-    </CardWrapper>
-  )
-}

package/src/primitives/textInput/__workshop__/Tones.tsx

@@ -1,40 +0,0 @@
-import {Box, Card, CARD_TONES, Text, TextInput} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-export default function TonesStory(): React.JSX.Element {
-  const disabled = useBoolean('Disabled', false)
-
-  return (
-    <CardWrapper>
-      <Box
-        alignItems="center"
-        display="flex"
-        flexDirection="column"
-        gap={2}
-        height="fill"
-        justifyContent="center"
-      >
-        {CARD_TONES.map((tone) => (
-          <Card key={tone} padding={3} radius={5} tone={tone}>
-            <TextInput
-              disabled={disabled}
-              placeholder="default"
-              prefix={
-                <Box padding={3}>
-                  <Text>prefix</Text>
-                </Box>
-              }
-              suffix={
-                <Box padding={3}>
-                  <Text>suffix</Text>
-                </Box>
-              }
-            />
-          </Card>
-        ))}
-      </Box>
-    </CardWrapper>
-  )
-}

package/src/primitives/textInput/__workshop__/Typed.tsx

@@ -1,23 +0,0 @@
-import {Box, Container, TextInput} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
-
-import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '$workshop'
-
-export default function TypedStory(): React.JSX.Element {
-  const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text')
-
-  const [value, setValue] = useState('')
-
-  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.currentTarget.value)
-  }, [])
-
-  return (
-    <Box padding={4}>
-      <Container width={1}>
-        <TextInput type={type} value={value} onChange={handleChange} />
-      </Container>
-    </Box>
-  )
-}

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

@@ -1,46 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/text-input',
-  title: 'TextInput',
-  stories: [
-    {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./Plain')),
-    },
-    {
-      name: 'custom-validity',
-      title: 'Custom validity',
-      component: lazy(() => import('./CustomValidity')),
-    },
-    {
-      name: 'typed',
-      title: 'Typed',
-      component: lazy(() => import('./Typed')),
-    },
-    {
-      name: 'tones',
-      title: 'Tones',
-      component: lazy(() => import('./Tones')),
-    },
-    {
-      name: 'clear-button',
-      title: 'Clear button',
-      component: lazy(() => import('./ClearButton')),
-    },
-    {
-      name: 'read-only',
-      title: 'Read only',
-      component: lazy(() => import('./ReadOnly')),
-    },
-    {
-      name: 'states',
-      title: 'States',
-      component: lazy(() => import('./States')),
-    },
-  ],
-}
-
-export default scope