@sanity/ui 3.3.1 → 3.3.2

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>
-  )
-}

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() {
-  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 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>
-                )}
-
-                {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 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/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__/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/core/primitives/tooltip/__workshop__/customPortal.tsx

@@ -1,102 +0,0 @@
-import {
-  BoundaryElementProvider,
-  Button,
-  Card,
-  Flex,
-  Portal,
-  PortalProvider,
-  Stack,
-  Text,
-  Tooltip,
-} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useMemo, useState} from 'react'
-
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
-
-const PORTAL_OPTIONS = {
-  '(true)': true,
-  '(false)': false,
-  'portal1': 'portal1',
-}
-
-export default function CustomPortalStory() {
-  const content = useText(
-    'Content',
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
-  )
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
-  const portal = useSelect('Portal', PORTAL_OPTIONS, undefined, 'Props')
-  const useBoundaryElement = useBoolean('Use boundary element', true)
-
-  const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-  const __unstable_elements = useMemo(
-    () => ({
-      portal1: portal1Element,
-    }),
-    [portal1Element],
-  )
-
-  return (
-    <PortalProvider __unstable_elements={__unstable_elements}>
-      <Flex align="center" height="fill" justify="center">
-        <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
-          <Card
-            border
-            padding={4}
-            ref={setBoundaryElement}
-            style={{
-              height: 'calc(100vh - 100px)',
-              position: 'relative',
-              width: '500px',
-            }}
-          >
-            <Text>Boundary element</Text>
-            <Flex align="center" height="fill" justify="center">
-              <Flex justify="center">
-                <Stack space={2}>
-                  <Tooltip
-                    boundaryElement={useBoundaryElement ? boundaryElement : null}
-                    content={<Text size={1}>{content}</Text>}
-                    padding={2}
-                    placement={placement}
-                    portal={portal}
-                  >
-                    <Button mode="bleed" text="Tooltip" />
-                  </Tooltip>
-                </Stack>
-              </Flex>
-            </Flex>
-          </Card>
-        </BoundaryElementProvider>
-      </Flex>
-
-      <Card
-        border
-        margin={4}
-        padding={4}
-        ref={setPortal1Element}
-        style={{
-          left: 0,
-          position: 'absolute',
-          top: 0,
-          width: '175px',
-        }}
-        tone="critical"
-      />
-
-      <Portal __unstable_name="portal1">
-        <Stack space={4}>
-          <Text size={1} weight="medium">
-            Portal 1 content
-          </Text>
-          <Text size={1}>
-            The tooltip's max-width should not exceed this container's width (minus padding) if it's
-            set to use this portal
-          </Text>
-        </Stack>
-      </Portal>
-    </PortalProvider>
-  )
-}

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

@@ -1,29 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/tooltip',
-  title: 'Tooltip',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./props')),
-    },
-    {
-      name: 'resizableBoundary',
-      title: 'Resizable Boundary',
-      component: lazy(() => import('./resizableBoundary')),
-    },
-    {
-      name: 'overflowBoundary',
-      title: 'Overflowing Boundary',
-      component: lazy(() => import('./overflowingBoundary')),
-    },
-    {
-      name: 'customPortalStory',
-      title: 'Custom Portal',
-      component: lazy(() => import('./customPortal')),
-    },
-  ],
-})