@sanity/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/src/primitives/textArea/textArea.tsx

@@ -0,0 +1,102 @@
+import {forwardRef} from 'react'
+import styled from 'styled-components'
+import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
+import {
+  responsiveInputPaddingStyle,
+  responsiveRadiusStyle,
+  ResponsiveRadiusStyleProps,
+  TextInputResponsivePaddingStyleProps,
+  TextInputInputStyleProps,
+  TextInputRepresentationStyleProps,
+  textInputRootStyle,
+  textInputBaseStyle,
+  textInputFontSizeStyle,
+  textInputRepresentationStyle,
+} from '../../styles/internal'
+import {ThemeFontWeightKey, useRootTheme} from '../../theme'
+import {ResponsiveRadiusProps} from '../types'
+
+/**
+ * @public
+ */
+export interface TextAreaProps extends ResponsiveRadiusProps {
+  border?: boolean
+  customValidity?: string
+  fontSize?: number | number[]
+  padding?: number | number[]
+  weight?: ThemeFontWeightKey
+}
+
+const Root = 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
+)
+
+/**
+ * @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 = 1,
+    weight,
+    ...restProps
+  } = props
+
+  const ref = useForwardedRef(forwardedRef)
+
+  const rootTheme = useRootTheme()
+
+  useCustomValidity(ref, customValidity)
+
+  return (
+    <Root data-ui="TextArea">
+      <InputRoot>
+        <Input
+          data-as="textarea"
+          data-scheme={rootTheme.scheme}
+          data-tone={rootTheme.tone}
+          {...restProps}
+          $fontSize={useArrayProp(fontSize)}
+          $padding={useArrayProp(padding)}
+          $scheme={rootTheme.scheme}
+          $space={useArrayProp(0)}
+          $tone={rootTheme.tone}
+          $weight={weight}
+          disabled={disabled}
+          ref={ref}
+        />
+        <Presentation
+          $radius={useArrayProp(radius)}
+          $scheme={rootTheme.scheme}
+          $tone={rootTheme.tone}
+          data-border={border ? '' : undefined}
+          data-scheme={rootTheme.scheme}
+          data-tone={rootTheme.tone}
+        />
+      </InputRoot>
+    </Root>
+  )
+})

package/src/primitives/textInput/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

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

@@ -0,0 +1,30 @@
+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/primitives/textInput/__workshop__/customValidity.tsx

@@ -0,0 +1,17 @@
+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/primitives/textInput/__workshop__/index.ts

@@ -0,0 +1,45 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('primitives/text-input', 'TextInput', [
+  {
+    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: 'multiple-tones',
+    title: 'Multiple tones',
+    component: lazy(() => import('./multipleTones')),
+  },
+  {
+    name: 'states',
+    title: 'States',
+    component: lazy(() => import('./states')),
+  },
+])

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

@@ -0,0 +1,20 @@
+import {Card, Stack, TextInput} from '@sanity/ui'
+
+export default function MultipleTonesStory() {
+  return (
+    <Stack>
+      <Card padding={3} tone="primary">
+        <TextInput />
+      </Card>
+      <Card padding={3} tone="positive">
+        <TextInput />
+      </Card>
+      <Card padding={3} tone="caution">
+        <TextInput />
+      </Card>
+      <Card padding={3} tone="critical">
+        <TextInput />
+      </Card>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,97 @@
+import {icons, IconSymbol} from '@sanity/icons'
+import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
+import {PerfTestProps, useBoolean, usePerfTest, useSelect, useText} from '@sanity/ui-workshop'
+import {fireEvent} from '@testing-library/dom'
+import {useCallback, useState} from 'react'
+import {
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+  WORKSHOP_FONT_WEIGHT_OPTIONS,
+  WORKSHOP_ICON_SYMBOL_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+  WORKSHOP_SPACE_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="semibold">
+            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,
+    'close',
+    '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, 0, '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"
+      name="email"
+      onChange={handleChange}
+      padding={padding}
+      placeholder={placeholder}
+      radius={radius}
+      readOnly={readOnly}
+      ref={ref}
+      space={space}
+      value={value}
+      weight={weight}
+    />
+  )
+}

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

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

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

@@ -0,0 +1,45 @@
+import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
+import {useAction} from '@sanity/ui-workshop'
+
+export default function StatesStory() {
+  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="semibold">
+              <label htmlFor="enabled-example">Enabled (default)</label>
+            </Text>
+            <TextInput id="enabled-example" onChange={onChange} value="This is some text" />
+          </Stack>
+
+          <Stack space={3}>
+            <Text size={1} weight="semibold">
+              <label htmlFor="disabled-example">Disabled</label>
+            </Text>
+            <TextInput
+              disabled
+              id="disabled-example"
+              onChange={onChange}
+              value="This is some text"
+            />
+          </Stack>
+
+          <Stack space={3}>
+            <Text size={1} weight="semibold">
+              <label htmlFor="read-only-example">Read-only</label>
+            </Text>
+            <TextInput
+              id="read-only-example"
+              readOnly
+              onChange={onChange}
+              value="This is some text"
+            />
+          </Stack>
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,239 @@
+import {Box, Card, Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+export default function TonesStory() {
+  const transparentTone = useBoolean('Transparent', true)
+  const primaryTone = useBoolean('Primary', 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 padding={[3, 4, 5]} space={4}>
+                <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>
+            <Card flex={1} scheme="dark">
+              <Stack padding={[3, 4, 5]} space={4}>
+                <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/primitives/textInput/__workshop__/typed.tsx

@@ -0,0 +1,22 @@
+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__/constants'
+
+export default function TypedStory() {
+  const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text', 'Props')
+
+  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>
+  )
+}

package/src/primitives/textInput/index.ts

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