@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/__workshop__/constants.ts

@@ -1,297 +0,0 @@
-import {icons, IconSymbol} from '@sanity/icons'
-import {
-  AvatarSize,
-  BadgeMode,
-  BadgeTone,
-  ButtonMode,
-  ButtonTextAlign,
-  ButtonTone,
-  CardTone,
-  DialogPosition,
-  FlexAlign,
-  FlexJustify,
-  Placement,
-  TextAlign,
-  TextInputType,
-  ThemeColorSpotKey,
-  ThemeColorToneKey,
-  ThemeFontWeightKey,
-} from '@sanity/ui'
-
-export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
-  '0 (default)': 0,
-  '1': 1,
-  '2': 2,
-}
-
-export const WORKSHOP_BADGE_MODE_OPTIONS: {[key: string]: BadgeMode} = {
-  Default: 'default',
-  Outline: 'outline',
-}
-
-export const WORKSHOP_BADGE_TONE_OPTIONS: {[key: string]: BadgeTone} = {
-  Default: 'default',
-  Primary: 'primary',
-  Positive: 'positive',
-  Caution: 'caution',
-  Critical: 'critical',
-}
-
-export const WORKSHOP_BUTTON_MODE_OPTIONS: {[key: string]: ButtonMode} = {
-  Default: 'default',
-  Ghost: 'ghost',
-  Bleed: 'bleed',
-}
-
-export const WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS: {[key: string]: ButtonTextAlign | ''} = {
-  '(none)': '',
-  Left: 'left',
-  Right: 'right',
-  Center: 'center',
-}
-
-export const WORKSHOP_BUTTON_TONE_OPTIONS: {[key: string]: ButtonTone} = {
-  Default: 'default',
-  Primary: 'primary',
-  Positive: 'positive',
-  Caution: 'caution',
-  Critical: 'critical',
-}
-
-export const WORKSHOP_CARD_AS_OPTIONS: {
-  [key: string]: 'div' | 'button' | 'span' | 'ol' | 'pre' | 'ul'
-} = {
-  'DIV (default)': 'div',
-  BUTTON: 'button',
-  SPAN: 'span',
-  OL: 'ol',
-  PRE: 'pre',
-  UL: 'ul',
-}
-
-export const WORKSHOP_CARD_TONE_OPTIONS: {[key: string]: CardTone} = {
-  Default: 'default',
-  Inherit: 'inherit',
-  Transparent: 'transparent',
-  Primary: 'primary',
-  Positive: 'positive',
-  Caution: 'caution',
-  Critical: 'critical',
-}
-
-export const WORKSHOP_CODE_LANGUAGE_OPTIONS = {
-  JavaScript: 'javascript',
-  JSON: 'json',
-  JSX: 'jsx',
-  TypeScript: 'typescript',
-}
-
-export const WORKSHOP_CONTAINER_WIDTH_OPTIONS: {[key: string]: number | 'auto'} = {
-  '0': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-  '5': 5,
-  auto: 'auto',
-}
-
-export const WORKSHOP_DIALOG_POSITION_OPTIONS: {[key: string]: DialogPosition} = {
-  Fixed: 'fixed',
-  Absolute: 'absolute',
-}
-
-export const WORKSHOP_FLEX_DIRECTION_OPTIONS: {[key: string]: 'row' | 'column'} = {
-  Row: 'row',
-  Column: 'column',
-}
-
-export const WORKSHOP_FLEX_ALIGN_OPTIONS: Record<FlexAlign, FlexAlign> = {
-  baseline: 'baseline',
-  center: 'center',
-  'flex-end': 'flex-end',
-  'flex-start': 'flex-start',
-  stretch: 'stretch',
-}
-
-export const WORKSHOP_FLEX_JUSTIFY_OPTIONS: Record<FlexJustify, FlexJustify> = {
-  center: 'center',
-  'flex-end': 'flex-end',
-  'flex-start': 'flex-start',
-  'space-around': 'space-around',
-  'space-between': 'space-between',
-  'space-evenly': 'space-evenly',
-}
-
-export const WORKSHOP_FONT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey} = {
-  Regular: 'regular',
-  Medium: 'medium',
-  Semibold: 'semibold',
-  Bold: 'bold',
-}
-
-export const WORKSHOP_HEADING_FONT_SIZE_OPTIONS = {
-  '0': 0,
-  '1': 1,
-  '2 (default)': 2,
-  '3': 3,
-  '4': 4,
-}
-
-export const WORKSHOP_ICON_SYMBOL_OPTIONS: {[key: string]: IconSymbol | ''} = Object.keys(
-  icons,
-).reduce(
-  (acc: {[key: string]: IconSymbol | ''}, key) => {
-    acc[key] = key as IconSymbol
-
-    return acc
-  },
-  {'(none)': ''},
-)
-
-export const WORKSHOP_LABEL_FONT_SIZE_OPTIONS = {
-  '0': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-}
-
-export const WORKSHOP_PLACEMENT_OPTIONS: Record<Placement, Placement> = {
-  top: 'top',
-  'top-start': 'top-start',
-  'top-end': 'top-end',
-  right: 'right',
-  'right-start': 'right-start',
-  'right-end': 'right-end',
-  left: 'left',
-  'left-start': 'left-start',
-  'left-end': 'left-end',
-  bottom: 'bottom',
-  'bottom-start': 'bottom-start',
-  'bottom-end': 'bottom-end',
-}
-
-export const WORKSHOP_RADIUS_OPTIONS = {
-  '0': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-  '5': 5,
-  '6': 6,
-}
-
-export const WORKSHOP_SHADOW_OPTIONS = {
-  '0': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-  '5': 5,
-}
-
-export const WORKSHOP_SPACE_OPTIONS = {
-  '0': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-  '5': 5,
-  '6': 6,
-  '7': 7,
-  '8': 8,
-  '9': 9,
-}
-
-export const WORKSHOP_SPOT_COLOR_OPTIONS: {[key: string]: ThemeColorSpotKey} = {
-  Gray: 'gray',
-  Blue: 'blue',
-  Purple: 'purple',
-  Magenta: 'magenta',
-  Red: 'red',
-  Orange: 'orange',
-  Yellow: 'yellow',
-  Green: 'green',
-  Cyan: 'cyan',
-}
-
-export const WORKSHOP_TEXT_ALIGN_OPTIONS: {[key: string]: TextAlign | ''} = {
-  '(none)': '',
-  Initial: 'initial',
-  Left: 'left',
-  Right: 'right',
-  Center: 'center',
-  Justify: 'justify',
-}
-
-export const WORKSHOP_TEXT_FONT_SIZE_OPTIONS = {
-  '0': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-}
-
-export const WORKSHOP_TEXT_INPUT_TYPE_OPTIONS: {[key: string]: TextInputType} = {
-  date: 'date',
-  'datetime-local': 'datetime-local',
-  email: 'email',
-  month: 'month',
-  number: 'number',
-  password: 'password',
-  tel: 'tel',
-  time: 'time',
-  text: 'text',
-  week: 'week',
-  color: 'color',
-}
-
-export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | ''} = {
-  None: '',
-  Ellipsis: 'ellipsis',
-}
-
-export const WORKSHOP_TEXT_SIZE_OPTIONS = {
-  '0': 0,
-  '1': 1,
-  '2 (default)': 2,
-  '3': 3,
-  '4': 4,
-}
-
-export const WORKSHOP_TEXT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey | ''} = {
-  'Regular (default)': '',
-  Medium: 'medium',
-  Semibold: 'semibold',
-  Bold: 'bold',
-}
-
-export const WORKSHOP_THEME_COLOR_TONE_OPTIONS: {[key: string]: ThemeColorToneKey} = {
-  Default: 'default',
-  Transparent: 'transparent',
-  Primary: 'primary',
-  Positive: 'positive',
-  Caution: 'caution',
-  Critical: 'critical',
-}
-
-export const WORKSHOP_TOAST_STATUS_OPTIONS: {
-  [key: string]: 'error' | 'success' | 'warning' | 'info' | ''
-} = {
-  None: '',
-  Info: 'info',
-  Success: 'success',
-  Warning: 'warning',
-  Error: 'error',
-}
-
-export const WORKSHOP_WIDTH_OPTIONS: {[key: string]: number | 'auto'} = {
-  Auto: 'auto',
-  '0': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-  '5': 5,
-}

package/src/components/autocomplete/__workshop__/async.tsx

@@ -1,156 +0,0 @@
-import {EarthAmericasIcon, SearchIcon} from '@sanity/icons'
-import {
-  Autocomplete,
-  BaseAutocompleteOption,
-  Box,
-  Card,
-  Code,
-  Flex,
-  LayerProvider,
-  Stack,
-  Text,
-} from '@sanity/ui'
-import {useCallback, useEffect, useRef, useState} from 'react'
-import {countriesStore} from '../__mocks__/apiStore'
-
-export default function AsyncStory() {
-  const [options, setOptions] = useState<BaseAutocompleteOption[]>([])
-  const [loading, setLoading] = useState(false)
-  const searchRef = useRef<{cancel: () => void} | null>(null)
-  const fetchRef = useRef<{cancel: () => void} | null>(null)
-  const [query, setQuery] = useState<string | null>(null)
-  const [value, setValue] = useState('')
-  const [optionTitle, setOptionTitle] = useState<string | null>(null)
-  const [loadingCurrentRef, setLoadingCurrentRef] = useState(false)
-
-  const doSearch = useCallback((query: string | null) => {
-    if (searchRef.current) searchRef.current.cancel()
-    searchRef.current = countriesStore.search(query || '', setOptions, setLoading)
-  }, [])
-
-  const filterOption = useCallback(() => true, [])
-
-  const handleQueryChange = useCallback(
-    (query: string | null) => {
-      setQuery(query)
-
-      if (query !== null) {
-        doSearch(query)
-      }
-    },
-    [doSearch],
-  )
-
-  const handleOpenButtonClick = useCallback(() => {
-    if (!value) {
-      doSearch('')
-    }
-  }, [doSearch, value])
-
-  const renderValue = useCallback(() => {
-    if (loadingCurrentRef) {
-      return 'Loading…'
-    }
-
-    return optionTitle || ''
-  }, [loadingCurrentRef, optionTitle])
-
-  const renderOption = useCallback((option: BaseAutocompleteOption) => {
-    return <AsyncOption documentId={option.value} />
-  }, [])
-
-  useEffect(() => {
-    if (fetchRef.current) fetchRef.current.cancel()
-
-    if (value) {
-      fetchRef.current = countriesStore.fetchDocument(
-        value,
-        (data) => setOptionTitle(data?.title || null),
-        setLoadingCurrentRef,
-      )
-    } else {
-      setOptionTitle(null)
-      setLoadingCurrentRef(false)
-    }
-  }, [value])
-
-  useEffect(() => {
-    if (optionTitle) doSearch(optionTitle)
-  }, [doSearch, optionTitle])
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={[3, 3, 4]}>
-        <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="semibold">
-          Country
-        </Text>
-        <LayerProvider zOffset={100}>
-          <Autocomplete
-            disabled={loadingCurrentRef}
-            filterOption={filterOption}
-            icon={value ? EarthAmericasIcon : SearchIcon}
-            id="async"
-            loading={loading}
-            onChange={setValue}
-            onQueryChange={handleQueryChange}
-            openButton={{onClick: handleOpenButtonClick}}
-            options={options}
-            placeholder="Search"
-            radius={1}
-            renderOption={renderOption}
-            renderValue={renderValue}
-            value={value}
-          />
-        </LayerProvider>
-
-        <Card border overflow="auto" padding={3} radius={1}>
-          <Code language="json" size={[1, 1, 2]}>
-            {JSON.stringify({loading, options, query, value}, null, 2)}
-          </Code>
-        </Card>
-      </Stack>
-    </Box>
-  )
-}
-
-function AsyncOption(props: {
-  documentId: string
-  disabled?: boolean
-  selected?: boolean
-  tabIndex?: number
-}) {
-  const {documentId, disabled, selected, tabIndex} = props
-  const [data, setData] = useState<{title: string} | null>(null)
-  const [loading, setLoading] = useState(false)
-  const ref = useRef<{cancel: () => void} | null>(null)
-
-  useEffect(() => {
-    if (ref.current) ref.current.cancel()
-    ref.current = countriesStore.fetchDocument(documentId, setData, setLoading)
-  }, [documentId])
-
-  return (
-    <Card
-      data-as="button"
-      disabled={disabled}
-      padding={3}
-      radius={1}
-      selected={selected}
-      tabIndex={tabIndex}
-    >
-      <Flex gap={3}>
-        <Text>
-          <EarthAmericasIcon />
-        </Text>
-
-        {loading && (
-          <Text muted>
-            <>Loading…</>
-          </Text>
-        )}
-
-        {!loading && <Text muted={!data}>{data ? data.title : <>Untitled</>}</Text>}
-      </Flex>
-    </Card>
-  )
-}

package/src/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -1,131 +0,0 @@
-import {
-  Autocomplete,
-  BoundaryElementProvider,
-  Box,
-  Card,
-  LayerProvider,
-  Stack,
-  Text,
-} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-import {Popover} from '../../../primitives'
-import countries from '../__fixtures__/countries'
-import {AutocompleteProps} from '../autocomplete'
-import {ExampleOption} from './types'
-
-export default function ConstrainedHeightStory() {
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-
-  return (
-    <Card height="fill" tone="transparent">
-      <Card
-        ref={setBoundaryElement}
-        radius={3}
-        shadow={3}
-        style={{position: 'absolute', top: 20, right: 20, bottom: 20, left: 20}}
-      >
-        <Box height="fill" overflow="auto" padding={[3, 4, 5]} sizing="border">
-          <Stack space={5}>
-            <BoundaryElementProvider element={boundaryElement}>
-              <ConstrainedHeightExampleField id="example-1" label="Example 1" />
-              <ConstrainedHeightExampleField id="example-2" label="Example 2" />
-              <ConstrainedHeightExampleField id="example-3" label="Example 3" />
-              <ConstrainedHeightExampleField id="example-4" label="Example 4" />
-              <ConstrainedHeightExampleField id="example-5" label="Example 5" />
-              <ConstrainedHeightExampleField id="example-6" label="Example 6" />
-              <ConstrainedHeightExampleField id="example-7" label="Example 7" />
-              <ConstrainedHeightExampleField id="example-8" label="Example 8" />
-              <ConstrainedHeightExampleField id="example-9" label="Example 9" />
-            </BoundaryElementProvider>
-          </Stack>
-        </Box>
-      </Card>
-    </Card>
-  )
-}
-
-function ConstrainedHeightExampleField({id, label}: {id: string; label: string}) {
-  const [value, setValue] = useState('')
-
-  const renderOption = useCallback((option: ExampleOption) => {
-    return (
-      <Card
-        as="a"
-        data-qa={`option-${option.value}`}
-        href="#"
-        key={option.value}
-        onClick={(event) => event.preventDefault()}
-        padding={3}
-        radius={2}
-      >
-        <Text textOverflow="ellipsis">{option.title}</Text>
-      </Card>
-    )
-  }, [])
-
-  const renderValue = useCallback((currentValue: string, option?: ExampleOption) => {
-    return option ? option.title : currentValue
-  }, [])
-
-  const filterOption = useCallback((query: string, option: ExampleOption) => {
-    return option.title.toLowerCase().indexOf(query.toLowerCase()) > -1
-  }, [])
-
-  const options = countries.map((item) => ({value: item.code, title: item.name}))
-
-  const renderPopover: AutocompleteProps['renderPopover'] = useCallback(
-    (
-      popoverProps: {
-        content: React.ReactElement | null
-        hidden: boolean
-        inputElement: HTMLInputElement | null
-        onMouseEnter: () => void
-        onMouseLeave: () => void
-      },
-      popoverRef: React.Ref<HTMLDivElement>,
-    ) => {
-      const {hidden, inputElement, ...restProps} = popoverProps
-
-      if (hidden) return null
-
-      return (
-        <Popover
-          {...restProps}
-          arrow={false}
-          constrainSize
-          matchReferenceWidth
-          open
-          overflow="auto"
-          placement="bottom-start"
-          radius={1}
-          ref={popoverRef}
-          referenceElement={inputElement}
-        />
-      )
-    },
-    [],
-  )
-
-  return (
-    <Stack space={3}>
-      <Text size={1} weight="medium">
-        {label}
-      </Text>
-      <LayerProvider zOffset={100}>
-        <Autocomplete
-          filterOption={filterOption}
-          id={id}
-          onChange={setValue}
-          openButton
-          options={options}
-          placeholder="Search"
-          radius={1}
-          renderOption={renderOption}
-          renderPopover={renderPopover}
-          renderValue={renderValue}
-          value={value}
-        />
-      </LayerProvider>
-    </Stack>
-  )
-}

package/src/components/autocomplete/__workshop__/custom.tsx

@@ -1,83 +0,0 @@
-import {Autocomplete, Box, Button, Card, Code, Stack, Text} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
-import {
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
-import countries from '../__fixtures__/countries'
-import {ExampleOption} from './types'
-
-export default function CustomStory() {
-  const data: ExampleOption[] = countries.map((d) => ({value: d.code, title: d.name}))
-  const border = useBoolean('Border', true, 'Props')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = Number(useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props'))
-  const openButton = useBoolean('Open button', true, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const radius = Number(useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props'))
-  const readOnly = useBoolean('Read only', false, 'Props')
-  const [value, setValue] = useState('')
-
-  const renderOption = useCallback(
-    (option: ExampleOption) => (
-      <Card
-        as="a"
-        data-qa={`option-${option.value}`}
-        href="#"
-        key={option.value}
-        onClick={(event) => event.preventDefault()}
-        padding={padding}
-        radius={radius - 1}
-      >
-        <Text size={fontSize}>{option.title}</Text>
-      </Card>
-    ),
-    [fontSize, padding, radius],
-  )
-
-  const renderValue = useCallback((currentValue: string, option?: ExampleOption) => {
-    return option ? option.title : currentValue
-  }, [])
-
-  const filterOption = useCallback((query: string, option: ExampleOption) => {
-    return option.title.toLowerCase().indexOf(query.toLowerCase()) > -1
-  }, [])
-
-  const options = data.map((item) => ({value: item.value, title: item.title}))
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={3}>
-        <Text as="label" htmlFor="custom" id="custom-label" size={1} weight="semibold">
-          Country
-        </Text>
-        <Autocomplete
-          aria-describedby="custom-label"
-          border={border}
-          disabled={disabled}
-          filterOption={filterOption}
-          fontSize={fontSize}
-          id="custom"
-          onChange={setValue}
-          openButton={openButton}
-          options={options}
-          padding={padding}
-          placeholder="Search"
-          radius={radius}
-          readOnly={readOnly}
-          renderOption={renderOption}
-          renderValue={renderValue}
-          value={value}
-        />
-        <Card padding={3} radius={1} tone="transparent">
-          <Code>{JSON.stringify(value)}</Code>
-        </Card>
-        <Box>
-          <Button id="set-value-btn" onClick={() => setValue('NO')} text="Set to NO" />
-        </Box>
-      </Stack>
-    </Box>
-  )
-}