@sanity/ui 2.16.22 → 2.16.23

package/src/core/primitives/popover/__workshop__/TestStory.tsx

@@ -1,97 +0,0 @@
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useRef, useState} from 'react'
-
-import {
-  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
-  WORKSHOP_PLACEMENT_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-} from '../../../__workshop__/constants'
-import {BoundaryElementProvider, PortalProvider} from '../../../utils'
-import {Button} from '../../button'
-import {Card} from '../../card'
-import {Text} from '../../text'
-import {Popover} from '../popover'
-import {PopoverUpdateCallback} from '../types'
-
-export default function TestStory(): React.JSX.Element {
-  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-
-  const mount = useBoolean('Mount', true)
-  const arrow = useBoolean('Arrow', true)
-  const constrainSize = useBoolean('Constrain size', true)
-  const matchReferenceWidth = useBoolean('Match reference width', false)
-  const open = useBoolean('Open', true)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
-  const portal = useBoolean('Render in portal', true)
-  const preventOverflow = useBoolean('Prevent overflow', true)
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
-  const referenceWide = useBoolean('Reference wide?', false)
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
-
-  const text = useText('Text', 'Test')
-
-  const updateRef = useRef<PopoverUpdateCallback>(undefined)
-
-  const button = (
-    <Button text="reference" selected style={{width: referenceWide ? 300 : undefined}} />
-  )
-
-  return (
-    <Card
-      ref={setBoundaryElement}
-      shadow={2}
-      style={{
-        position: 'absolute',
-        top: 50,
-        right: 50,
-        bottom: 50,
-        left: 50,
-      }}
-    >
-      <div
-        data-portal=""
-        ref={setPortalElement}
-        style={{
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-          overflow: 'hidden',
-          pointerEvents: 'none',
-        }}
-      />
-
-      <div style={{width: '100%', height: '100%', overflow: 'auto'}}>
-        <div style={{padding: '150vh'}}>
-          <PortalProvider element={portalElement}>
-            <BoundaryElementProvider element={boundaryElement}>
-              {!mount && button}
-              {mount && (
-                <Popover
-                  arrow={arrow}
-                  content={<Text size={1}>{text}</Text>}
-                  constrainSize={constrainSize}
-                  fallbackPlacements={['left', 'bottom', 'right', 'top']}
-                  matchReferenceWidth={matchReferenceWidth}
-                  open={open}
-                  overflow="hidden"
-                  padding={3}
-                  placement={placement}
-                  portal={portal}
-                  preventOverflow={preventOverflow}
-                  radius={radius}
-                  updateRef={updateRef}
-                  width={width}
-                >
-                  {button}
-                </Popover>
-              )}
-            </BoundaryElementProvider>
-          </PortalProvider>
-        </div>
-      </div>
-    </Card>
-  )
-}

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

@@ -1,49 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/popover',
-  title: 'Popover',
-  stories: [
-    {
-      name: 'test',
-      title: 'Test',
-      component: lazy(() => import('./TestStory')),
-    },
-    {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./PlainStory')),
-    },
-    {
-      name: 'recursive',
-      title: 'Recursive',
-      component: lazy(() => import('./RecursiveStory')),
-    },
-    {
-      name: 'match-ref-width',
-      title: 'Match reference width',
-      component: lazy(() => import('./MatchReferenceWidthStory')),
-    },
-    {
-      name: 'margins',
-      title: 'Margins',
-      component: lazy(() => import('./MarginsStory')),
-    },
-    {
-      name: 'aligned',
-      title: 'Aligned',
-      component: lazy(() => import('./AlignedStory')),
-    },
-    {
-      name: 'openOnMountStory',
-      title: 'Open on mount',
-      component: lazy(() => import('./OpenOnMountStory')),
-    },
-    {
-      name: 'side-panel',
-      title: 'Side panel',
-      component: lazy(() => import('./SidePanelStory')),
-    },
-  ],
-})

package/src/core/primitives/radio/__workshop__/example.tsx

@@ -1,63 +0,0 @@
-import {Box, Container, Flex, Radio, Stack, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
-
-export default function ExampleStory() {
-  const [value, setValue] = useState('first-option')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
-
-  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value)
-  }, [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[3, 4, 5]} sizing="border">
-      <Container width={0}>
-        <Stack space={3}>
-          <Flex align="center" as="label">
-            <Radio
-              checked={value === 'first-option'}
-              disabled={disabled}
-              name="name"
-              onChange={handleChange}
-              readOnly={readOnly}
-              value="first-option"
-            />
-            <Box marginLeft={2}>
-              <Text>First option</Text>
-            </Box>
-          </Flex>
-
-          <Flex align="center" as="label">
-            <Radio
-              checked={value === 'second-option'}
-              disabled={disabled}
-              name="name"
-              onChange={handleChange}
-              readOnly={readOnly}
-              value="second-option"
-            />
-            <Box marginLeft={2}>
-              <Text>Second option</Text>
-            </Box>
-          </Flex>
-
-          <Flex align="center" as="label">
-            <Radio
-              checked={value === 'third-option'}
-              disabled={disabled}
-              name="name"
-              onChange={handleChange}
-              readOnly={readOnly}
-              value="third-option"
-            />
-            <Box marginLeft={2}>
-              <Text>Third option</Text>
-            </Box>
-          </Flex>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}

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

@@ -1,11 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/radio',
-  title: 'Radio',
-  stories: [
-    {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-  ],
-})

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

@@ -1,28 +0,0 @@
-import {Flex, Radio} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-export default function PlainStory() {
-  const checked = useBoolean('Checked', false, 'Props')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const id = 'radioStory'
-  const name = 'radioStory'
-  const onBlur = useAction('onBlur')
-  const onChange = useAction('onChange')
-  const onFocus = useAction('onFocus')
-  const readOnly = useBoolean('Read only', false, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[3, 4, 5]} sizing="border">
-      <Radio
-        checked={checked}
-        disabled={disabled}
-        id={id}
-        name={name}
-        onBlur={onBlur}
-        onChange={onChange}
-        onFocus={onFocus}
-        readOnly={readOnly}
-      />
-    </Flex>
-  )
-}

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

@@ -1,11 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/select',
-  title: 'Select',
-  stories: [
-    {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
-  ],
-})

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

@@ -1,27 +0,0 @@
-import {Card, Container, Label, Select, Stack} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-export default function PlainStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
-
-  return (
-    <Container width={0}>
-      <Card padding={4}>
-        <Stack space={3}>
-          <Label as="label" htmlFor="select">
-            Select
-          </Label>
-
-          <Select disabled={disabled} id="select-example" readOnly={readOnly}>
-            <option value="a">Option A</option>
-            <option value="b">Option B</option>
-            <option value="c">Option C</option>
-            <option value="d">Option D</option>
-            <option value="e">Option E</option>
-          </Select>
-        </Stack>
-      </Card>
-    </Container>
-  )
-}

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

@@ -1,23 +0,0 @@
-import {Card, Container, Label, Select, Stack} from '@sanity/ui'
-
-export default function ReadOnlyStory() {
-  return (
-    <Container width={0}>
-      <Card padding={4}>
-        <Stack space={3}>
-          <Label as="label" htmlFor="select">
-            Select
-          </Label>
-
-          <Select id="select-example" readOnly>
-            <option value="a">Option A</option>
-            <option value="b">Option B</option>
-            <option value="c">Option C</option>
-            <option value="d">Option D</option>
-            <option value="e">Option E</option>
-          </Select>
-        </Stack>
-      </Card>
-    </Container>
-  )
-}

package/src/core/primitives/spinner/__workshop__/Props.tsx

@@ -1,15 +0,0 @@
-import {Flex, Spinner} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function Props() {
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Spinner muted={muted} size={size} />
-    </Flex>
-  )
-}

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

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/spinner',
-  title: 'Spinner',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./Props')),
-    },
-  ],
-})

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

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

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

@@ -1,32 +0,0 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function PlainStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}>
-          <Card padding={[2, 3, 4]} shadow={1}>
-            <Text align="center" muted>
-              Stack item
-            </Text>
-          </Card>
-
-          <Card padding={[2, 3, 4]} shadow={1}>
-            <Text align="center" muted>
-              Stack item
-            </Text>
-          </Card>
-
-          <Card padding={[2, 3, 4]} shadow={1}>
-            <Text align="center" muted>
-              Stack item
-            </Text>
-          </Card>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}

package/src/core/primitives/switch/__workshop__/example.tsx

@@ -1,23 +0,0 @@
-import {Box, Flex, Switch, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-export default function ExampleStory() {
-  const [checked, setChecked] = useState<boolean | undefined>(undefined)
-  const indeterminate = checked === undefined
-  const handleChange = useCallback((event: React.FormEvent<HTMLInputElement>) => {
-    setChecked(event.currentTarget.checked)
-  }, [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Switch checked={checked || false} indeterminate={indeterminate} onChange={handleChange} />
-        <Box marginLeft={3}>
-          <Text size={1} weight="medium">
-            Label
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

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

@@ -1,11 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/switch',
-  title: 'Switch',
-  stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-  ],
-})

package/src/core/primitives/switch/__workshop__/props.tsx

@@ -1,21 +0,0 @@
-import {Flex, Switch} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-import {useCallback} from 'react'
-
-export default function PropsStory() {
-  const checked = useBoolean('Checked', false)
-  const indeterminate = useBoolean('Indeterminate', false)
-  const readOnly = useBoolean('Read only', false)
-  const handleChange = useCallback(() => undefined, [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Switch
-        checked={checked}
-        indeterminate={indeterminate}
-        onChange={handleChange}
-        readOnly={readOnly}
-      />
-    </Flex>
-  )
-}

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

@@ -1,30 +0,0 @@
-import {Flex, Text, ThemeProps} from '@sanity/ui'
-import {getTheme_v2, ThemeColorAvatarColorKey, ThemeColorSpotKey} from '@sanity/ui/theme'
-import {useSelect} from '@sanity/ui-workshop'
-import {css, styled} from 'styled-components'
-
-import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
-
-const ColoredText = styled(Text)<{$color?: ThemeColorSpotKey}>((
-  props: {
-    $color?: ThemeColorAvatarColorKey
-  } & ThemeProps,
-) => {
-  const {color} = getTheme_v2(props.theme)
-
-  return css`
-    color: ${color.avatar[props.$color || 'gray'].bg};
-  `
-})
-
-export default function ColoredTextStory() {
-  const color = useSelect('Color', WORKSHOP_SPOT_COLOR_OPTIONS, 'gray')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <ColoredText align="center" $color={color} size={4} weight="bold">
-        {color}
-      </ColoredText>
-    </Flex>
-  )
-}

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

@@ -1,39 +0,0 @@
-import {Container, Flex, Text} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_TEXT_ALIGN_OPTIONS,
-  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-  WORKSHOP_TEXT_WEIGHT_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function TextStory() {
-  const accent = useBoolean('Accent', false, 'Props')
-  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, '', 'Props') || undefined
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
-  const text = useText('Text', 'Hello, world', 'Props')
-
-  const textOverflow =
-    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, undefined, 'Props') || undefined
-
-  const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Container width={0}>
-        <Text
-          accent={accent}
-          align={align}
-          muted={muted}
-          size={size}
-          textOverflow={textOverflow}
-          weight={weight}
-        >
-          {text}
-        </Text>
-      </Container>
-    </Flex>
-  )
-}

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

@@ -1,24 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/text',
-  title: 'Text',
-  stories: [
-    {
-      name: 'default',
-      title: 'Text',
-      component: lazy(() => import('./example')),
-    },
-    {
-      name: 'colored',
-      title: 'Colored text',
-      component: lazy(() => import('./colored')),
-    },
-    {
-      name: 'optical-alignment',
-      title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
-    },
-  ],
-})

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

@@ -1,48 +0,0 @@
-import {AddCircleIcon} from '@sanity/icons'
-import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
-
-export default function OpticalAlignment() {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={1}>
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={4}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={3}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={2}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={1}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={0}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={2} tone="neutral">
-            <Text>
-              <AddCircleIcon />
-            </Text>
-          </Card>
-        </Flex>
-      </Stack>
-    </Box>
-  )
-}

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