@sanity/ui 4.0.0-static.9 → 5.0.0-alpha.1

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

@@ -1,84 +0,0 @@
-import {_inputElement, _inputPresentation, textArea, type TextAreaStyleProps} from '@sanity/ui/css'
-import {useImperativeHandle, useRef} from 'react'
-
-import {useCustomValidity} from '../../hooks/useCustomValidity'
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_TEXT_AREA_ELEMENT = 'textarea'
-
-/** @public */
-export type TextAreaOwnProps = TextAreaStyleProps & {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  customValidity?: string
-}
-
-/** @public */
-export type TextAreaElementType = 'textarea' | ComponentType
-
-/** @public */
-export type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<
-  TextAreaOwnProps,
-  E
->
-
-/**
- * A multiline text input.
- *
- * @public
- */
-export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(
-  props: TextAreaProps<E>,
-): React.JSX.Element {
-  const {
-    __unstable_disableFocusRing,
-    as: Element = DEFAULT_TEXT_AREA_ELEMENT,
-    border = true,
-    customValidity,
-    disabled = false,
-    fontSize = 2,
-    gap = 3,
-    padding = 3,
-    radius = 2,
-    readOnly,
-    ref: forwardedRef,
-    ...rest
-  } = props as TextAreaProps<typeof DEFAULT_TEXT_AREA_ELEMENT>
-
-  const ref = useRef<HTMLTextAreaElement | null>(null)
-
-  useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <span
-      className={textArea({
-        border,
-        fontSize,
-        padding,
-        radius,
-        gap,
-      })}
-      data-invalid={customValidity ? '' : undefined}
-      data-read-only={!disabled && readOnly ? '' : undefined}
-      data-ui="TextArea"
-    >
-      <Element
-        {...rest}
-        className={_inputElement()}
-        data-no-focus-ring={__unstable_disableFocusRing ? '' : undefined}
-        disabled={disabled}
-        readOnly={readOnly}
-        ref={ref}
-      />
-      <span className={_inputPresentation()} />
-    </span>
-  )
-}

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(): 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 (
-    <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(): React.JSX.Element {
-  const customValidity = useText('Custom validity', 'Invalid value') || undefined
-
-  return (
-    <Container as="form" onSubmit={(event) => event.preventDefault()} width={0}>
-      <Card padding={4}>
-        <Stack gap={4}>
-          <TextInput customValidity={customValidity} />
-          <Button text="Submit" type="submit" />
-        </Stack>
-      </Card>
-    </Container>
-  )
-}

package/src/core/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

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

@@ -1,110 +0,0 @@
-import {icons} from '@sanity/icons'
-import {Box, Container, Flex, 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 {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'
-
-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 (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack gap={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)
-  const customValidity = useText('Custom validity')
-  const disabled = useBoolean('Disabled', false)
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
-  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3)
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'search')
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, 'cube')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
-  const placeholder = useText('Placeholder')
-  const prefix = useBoolean('Prefix', false)
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
-  const readOnly = useBoolean('Read only', false)
-  const suffix = useBoolean('Suffix', false)
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
-
-  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}
-      gap={gap}
-      icon={icon && icons[icon]}
-      iconRight={iconRight && icons[iconRight]}
-      id="text-input-example"
-      name="test"
-      onChange={handleChange}
-      padding={padding}
-      placeholder={placeholder}
-      prefix={
-        prefix && (
-          <Box padding={padding}>
-            <Text size={fontSize}>Prefix</Text>
-          </Box>
-        )
-      }
-      radius={radius}
-      readOnly={readOnly}
-      ref={ref}
-      suffix={
-        suffix && (
-          <Box padding={padding}>
-            <Text size={fontSize}>Suffix</Text>
-          </Box>
-        )
-      }
-      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(): React.JSX.Element {
-  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(): React.JSX.Element {
-  const invalid = useBoolean('Invalid', false)
-  const onChange = useAction('onChange')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={1}>
-        <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"
-              onChange={onChange}
-              value="This is some text"
-            />
-          </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"
-              onChange={onChange}
-              value="This is some text"
-            />
-          </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
-              onChange={onChange}
-              value="This is some text"
-            />
-          </Stack>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}

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

@@ -1,277 +0,0 @@
-import {Box, Card, Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-export default function TonesStory(): React.JSX.Element {
-  const transparentTone = useBoolean('Transparent', true)
-  const neutralTone = useBoolean('Neutral', true)
-  const primaryTone = useBoolean('Primary', true)
-  const suggestTone = useBoolean('Suggest', true)
-  const positiveTone = useBoolean('Positive', true)
-  const cautionTone = useBoolean('Caution', true)
-  const criticalTone = useBoolean('Critical', true)
-
-  return (
-    <Card height="fill" tone="transparent">
-      <Flex align="center" height="fill" justify="center">
-        <Container width={1}>
-          <Flex>
-            <Card flex={1} scheme="light">
-              <Stack gap={4} padding={[3, 4, 5]}>
-                <Card padding={3}>
-                  <TextInput
-                    placeholder="default"
-                    prefix={
-                      <Box padding={3}>
-                        <Text>prefix</Text>
-                      </Box>
-                    }
-                    suffix={
-                      <Box padding={3}>
-                        <Text>suffix</Text>
-                      </Box>
-                    }
-                  />
-                </Card>
-
-                {transparentTone && (
-                  <Card padding={3} tone="transparent">
-                    <TextInput
-                      placeholder="transparent"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {neutralTone && (
-                  <Card padding={3} tone="neutral">
-                    <TextInput
-                      placeholder="neutral"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {primaryTone && (
-                  <Card padding={3} tone="primary">
-                    <TextInput
-                      placeholder="primary"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {suggestTone && (
-                  <Card padding={3} tone="suggest">
-                    <TextInput
-                      placeholder="suggest"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {positiveTone && (
-                  <Card padding={3} tone="positive">
-                    <TextInput
-                      placeholder="positive"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {cautionTone && (
-                  <Card padding={3} tone="caution">
-                    <TextInput
-                      placeholder="caution"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {criticalTone && (
-                  <Card padding={3} tone="critical">
-                    <TextInput
-                      placeholder="critical"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-              </Stack>
-            </Card>
-            <Card flex={1} scheme="dark">
-              <Stack gap={4} padding={[3, 4, 5]}>
-                <Card padding={3}>
-                  <TextInput
-                    placeholder="default"
-                    prefix={
-                      <Box padding={3}>
-                        <Text>prefix</Text>
-                      </Box>
-                    }
-                    suffix={
-                      <Box padding={3}>
-                        <Text>suffix</Text>
-                      </Box>
-                    }
-                  />
-                </Card>
-
-                {transparentTone && (
-                  <Card padding={3} tone="transparent">
-                    <TextInput
-                      placeholder="transparent"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {primaryTone && (
-                  <Card padding={3} tone="primary">
-                    <TextInput
-                      placeholder="primary"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {positiveTone && (
-                  <Card padding={3} tone="positive">
-                    <TextInput
-                      placeholder="positive"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {cautionTone && (
-                  <Card padding={3} tone="caution">
-                    <TextInput
-                      placeholder="caution"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {criticalTone && (
-                  <Card padding={3} tone="critical">
-                    <TextInput
-                      placeholder="critical"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-              </Stack>
-            </Card>
-          </Flex>
-        </Container>
-      </Flex>
-    </Card>
-  )
-}

package/src/core/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 onChange={handleChange} type={type} value={value} />
-      </Container>
-    </Box>
-  )
-}