@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/core/primitives/text/text.tsx

@@ -1,81 +0,0 @@
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {
-  ResponsiveFontStyleProps,
-  responsiveTextAlignStyle,
-  responsiveTextFont,
-} from '../../styles/internal'
-import {TextAlign} from '../../types'
-import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
-import {textBaseStyle} from './styles'
-
-/**
- * @public
- */
-export interface TextProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  /** When `true` the text color will be muted. */
-  muted?: boolean
-  size?: number | number[]
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey
-}
-
-const StyledText = styled.div<ResponsiveFontStyleProps>(
-  responsiveTextFont,
-  responsiveTextAlignStyle,
-  textBaseStyle,
-)
-
-/**
- * The `Text` component is an agile, themed typographic element.
- *
- * @public
- */
-export const Text = forwardRef(function Text(
-  props: TextProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    accent = false,
-    align,
-    children: childrenProp,
-    muted = false,
-    size = 2,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props
-
-  let children = childrenProp
-
-  if (textOverflow === 'ellipsis') {
-    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  }
-
-  return (
-    <StyledText
-      data-ui="Text"
-      {...restProps}
-      $accent={accent}
-      $align={_getArrayProp(align)}
-      $muted={muted}
-      ref={ref}
-      $size={_getArrayProp(size)}
-      $weight={weight}
-    >
-      <span>{children}</span>
-    </StyledText>
-  )
-})
-Text.displayName = 'ForwardRef(Text)'

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

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

package/src/core/primitives/textArea/__workshop__/plain.tsx

@@ -1,50 +0,0 @@
-import {Card, Container, Flex, Stack, Text, TextArea} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_CARD_TONE_OPTIONS,
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function PlainStory() {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
-
-  const border = useBoolean('Border', true, 'Props')
-  const customValidity = useText('Custom validity', '', 'Props') || undefined
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const placeholder = useText('Placeholder', '', 'Props') || undefined
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Card padding={3} tone={tone}>
-          <Stack space={3}>
-            <Text as="label" htmlFor="text-area-example" size={1} weight="medium">
-              TextArea
-            </Text>
-            <TextArea
-              border={border}
-              customValidity={customValidity}
-              disabled={disabled}
-              fontSize={fontSize}
-              id="text-area-example"
-              padding={padding}
-              placeholder={placeholder}
-              radius={radius}
-              readOnly={readOnly}
-              weight={weight}
-            />
-          </Stack>
-        </Card>
-      </Container>
-    </Flex>
-  )
-}

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

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

package/src/core/primitives/textArea/textArea.tsx

@@ -1,120 +0,0 @@
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
-
-import {useCustomValidity} from '../../hooks'
-import {_getArrayProp} from '../../styles'
-import {
-  responsiveInputPaddingStyle,
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-  textInputBaseStyle,
-  textInputFontSizeStyle,
-  TextInputInputStyleProps,
-  textInputRepresentationStyle,
-  TextInputRepresentationStyleProps,
-  TextInputResponsivePaddingStyleProps,
-  textInputRootStyle,
-} from '../../styles/internal'
-import {useRootTheme} from '../../theme'
-import {ResponsiveRadiusProps} from '../types'
-
-/**
- * @public
- */
-export interface TextAreaProps extends ResponsiveRadiusProps {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  border?: boolean
-  customValidity?: string
-  fontSize?: number | number[]
-  padding?: number | number[]
-  weight?: ThemeFontWeightKey
-}
-
-const StyledTextArea = styled.span(textInputRootStyle)
-
-const InputRoot = styled.span`
-  flex: 1;
-  min-width: 0;
-  display: block;
-  position: relative;
-`
-
-const Input = styled.textarea<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
-  responsiveInputPaddingStyle,
-  textInputBaseStyle,
-  textInputFontSizeStyle,
-)
-
-const Presentation = styled.div<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
-  responsiveRadiusStyle,
-  textInputRepresentationStyle,
-)
-
-/**
- * A multiline text input.
- *
-
- * @public
- */
-export const TextArea = forwardRef(function TextArea(
-  props: TextAreaProps & Omit<React.HTMLProps<HTMLTextAreaElement>, 'as'>,
-  forwardedRef: React.ForwardedRef<HTMLTextAreaElement>,
-) {
-  const {
-    border = true,
-    customValidity,
-    disabled = false,
-    fontSize = 2,
-    padding = 3,
-    radius = 2,
-    weight,
-    __unstable_disableFocusRing,
-    ...restProps
-  } = props
-
-  const ref = useRef<HTMLTextAreaElement | null>(null)
-
-  const rootTheme = useRootTheme()
-
-  useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <StyledTextArea data-ui="TextArea">
-      <InputRoot>
-        <Input
-          data-as="textarea"
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
-          {...restProps}
-          $fontSize={_getArrayProp(fontSize)}
-          $padding={_getArrayProp(padding)}
-          $scheme={rootTheme.scheme}
-          $space={_getArrayProp(0)}
-          $tone={rootTheme.tone}
-          $weight={weight}
-          disabled={disabled}
-          ref={ref}
-        />
-        <Presentation
-          $radius={_getArrayProp(radius)}
-          $unstableDisableFocusRing={__unstable_disableFocusRing}
-          $scheme={rootTheme.scheme}
-          $tone={rootTheme.tone}
-          data-border={border ? '' : undefined}
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
-        />
-      </InputRoot>
-    </StyledTextArea>
-  )
-})
-TextArea.displayName = 'ForwardRef(TextArea)'

package/src/core/primitives/textInput/__workshop__/clearButton.tsx

@@ -1,30 +0,0 @@
-import {Box, TextInput} from '@sanity/ui'
-import {useText} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
-
-export default function ClearButtonStory() {
-  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 (
-    <Box padding={4}>
-      <TextInput
-        clearButton
-        customValidity={customValidity}
-        onChange={handleChange}
-        onClear={handleClear}
-        placeholder="Enter text"
-        value={value}
-      />
-    </Box>
-  )
-}

package/src/core/primitives/textInput/__workshop__/customValidity.tsx

@@ -1,17 +0,0 @@
-import {Button, Card, Container, Stack, TextInput} from '@sanity/ui'
-import {useText} from '@sanity/ui-workshop'
-
-export default function CustomValidityStory() {
-  const customValidity = useText('Custom validity', 'Invalid value', 'Props') || undefined
-
-  return (
-    <Container as="form" onSubmit={(event) => event.preventDefault()} width={0}>
-      <Card padding={4}>
-        <Stack space={4}>
-          <TextInput customValidity={customValidity} />
-          <Button text="Submit" type="submit" />
-        </Stack>
-      </Card>
-    </Container>
-  )
-}

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

@@ -1,44 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  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')),
-    },
-  ],
-})

package/src/core/primitives/textInput/__workshop__/plain.tsx

@@ -1,98 +0,0 @@
-import {icons, IconSymbol} from '@sanity/icons'
-import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
-import {fireEvent} from '@testing-library/dom'
-import {useCallback, useState} from 'react'
-
-import {
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
-  WORKSHOP_ICON_SYMBOL_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
-
-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() {
-  const {ref, Wrapper} = usePerfTest(typingPerfTest)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack space={3}>
-          <Text as="label" htmlFor="text-input-example" size={1} weight="medium">
-            TextInput
-          </Text>
-          <Wrapper>
-            <TextInputTest inputRef={ref} />
-          </Wrapper>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}
-
-function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
-  const {inputRef: ref} = props
-  const border = useBoolean('Border', true, 'Props')
-  const customValidity = useText('Custom validity', '', 'Props') || undefined
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'search', 'Props') as IconSymbol
-  const iconRight = useSelect(
-    'Icon (right)',
-    WORKSHOP_ICON_SYMBOL_OPTIONS,
-    'cube',
-    'Props',
-  ) as IconSymbol
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const placeholder = useText('Placeholder', '', 'Props') || undefined
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
-  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
-
-  const [value, setValue] = useState('')
-
-  const handleChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => setValue(event.currentTarget.value),
-    [],
-  )
-
-  return (
-    <TextInput
-      border={border}
-      customValidity={customValidity}
-      disabled={disabled}
-      fontSize={fontSize}
-      icon={icon && icons[icon]}
-      iconRight={iconRight && icons[iconRight]}
-      id="text-input-example"
-      onChange={handleChange}
-      padding={padding}
-      placeholder={placeholder}
-      radius={radius}
-      readOnly={readOnly}
-      ref={ref}
-      space={space}
-      value={value}
-      weight={weight}
-    />
-  )
-}

package/src/core/primitives/textInput/__workshop__/readOnly.tsx

@@ -1,9 +0,0 @@
-import {Flex, TextInput} from '@sanity/ui'
-
-export default function ReadOnlyStory() {
-  return (
-    <Flex padding={4}>
-      <TextInput id="text-input-example" readOnly />
-    </Flex>
-  )
-}

package/src/core/primitives/textInput/__workshop__/states.tsx

@@ -1,53 +0,0 @@
-import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-export default function StatesStory() {
-  const invalid = useBoolean('Invalid', false, 'Props')
-  const onChange = useAction('onChange')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={1}>
-        <Stack space={5}>
-          <Stack space={3}>
-            <Text size={1} weight="medium">
-              <label htmlFor="enabled-example">Enabled (default)</label>
-            </Text>
-            <TextInput
-              customValidity={invalid ? 'invalid' : undefined}
-              id="enabled-example"
-              onChange={onChange}
-              value="This is some text"
-            />
-          </Stack>
-
-          <Stack space={3}>
-            <Text size={1} weight="medium">
-              <label htmlFor="disabled-example">Disabled</label>
-            </Text>
-            <TextInput
-              customValidity={invalid ? 'invalid' : undefined}
-              disabled
-              id="disabled-example"
-              onChange={onChange}
-              value="This is some text"
-            />
-          </Stack>
-
-          <Stack space={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
-              onChange={onChange}
-              value="This is some text"
-            />
-          </Stack>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}