@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

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(): React.JSX.Element {
-  const [value, setValue] = useState('first-option')
-  const disabled = useBoolean('Disabled', false)
-  const readOnly = useBoolean('Read only', false)
-
-  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 gap={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__/Plain.tsx

@@ -1,28 +0,0 @@
-import {Flex, Radio} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  const checked = useBoolean('Checked', false)
-  const disabled = useBoolean('Disabled', false)
-  const id = 'radioStory'
-  const name = 'radioStory'
-  const onBlur = useAction('onBlur')
-  const onChange = useAction('onChange')
-  const onFocus = useAction('onFocus')
-  const readOnly = useBoolean('Read only', false)
-
-  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/radio/__workshop__/index.ts

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

package/src/core/primitives/select/Select.tsx

@@ -1,75 +0,0 @@
-import {ChevronDownIcon} from '@sanity/icons'
-import {_inputElement, select, selectPresentation, type SelectStyleProps} from '@sanity/ui/css'
-import {useImperativeHandle, useRef} from 'react'
-
-import {useCustomValidity} from '../../hooks/useCustomValidity'
-import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/Box'
-import {Text} from '../text/Text'
-
-/** @public */
-export const DEFAULT_SELECT_ELEMENT = 'select'
-
-/** @public */
-export type SelectOwnProps = SelectStyleProps & {
-  customValidity?: string
-  readOnly?: boolean
-}
-
-/** @public */
-export type SelectElementType = 'select' | ComponentType
-
-/** @public */
-export type SelectProps<E extends SelectElementType = SelectElementType> = Props<SelectOwnProps, E>
-
-/**
- * The `Select` component provides control of options.
- *
- * @public
- */
-export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(
-  props: SelectProps<E>,
-): React.JSX.Element {
-  const {
-    as: Element = DEFAULT_SELECT_ELEMENT,
-    border = true,
-    children,
-    customValidity,
-    disabled,
-    fontSize = 2,
-    gap = 2,
-    padding = 3,
-    radius = 1,
-    readOnly,
-    ref: forwardedRef,
-    ...rest
-  } = props as SelectProps<typeof DEFAULT_SELECT_ELEMENT>
-
-  const ref = useRef<HTMLSelectElement | null>(null)
-
-  useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <div
-      data-ui="Select"
-      className={select({border, fontSize, gap, padding, radius})}
-      data-icon-right=""
-    >
-      <Element {...rest} className={_inputElement()} disabled={disabled || readOnly} ref={ref}>
-        {children}
-      </Element>
-      <span className={selectPresentation()}>
-        <Box as="span" display="inline-block" padding={padding}>
-          <Text size={fontSize}>
-            <ChevronDownIcon />
-          </Text>
-        </Box>
-      </span>
-    </div>
-  )
-}

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

@@ -1,43 +0,0 @@
-import {Card, Container, Label, Select, Stack} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_RADIUS_OPTIONS, WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  const border = useBoolean('Border', true)
-  const disabled = useBoolean('Disabled', false)
-  // @ts-expect-error - TODO: fix this
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
-  // @ts-expect-error - TODO: fix this
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS)
-  const readOnly = useBoolean('Read only', false)
-
-  return (
-    <Container width={0}>
-      <Card padding={4}>
-        <Stack gap={3}>
-          <Label as="label" htmlFor="select">
-            Select
-          </Label>
-
-          <Select
-            border={border}
-            disabled={disabled}
-            // @ts-expect-error - TODO: fix this
-            fontSize={fontSize}
-            id="select-example"
-            // @ts-expect-error - TODO: fix this
-            radius={radius}
-            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(): React.JSX.Element {
-  return (
-    <Container width={0}>
-      <Card padding={4}>
-        <Stack gap={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/select/__workshop__/index.ts

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

package/src/core/primitives/selectable/Selectable.tsx

@@ -1,50 +0,0 @@
-import {_selectable, type SelectableStyleProps} from '@sanity/ui/css'
-import type {ElementTone} from '@sanity/ui/theme'
-
-import type {ComponentType, Props} from '../../types'
-import {Box, type BoxOwnProps} from '../box/Box'
-
-/** @internal */
-export const DEFAULT_SELECTABLE_ELEMENT = 'button'
-
-/** @internal */
-export type SelectableOwnProps = BoxOwnProps &
-  SelectableStyleProps & {
-    disabled?: boolean
-    href?: string
-    selected?: boolean
-    tone?: ElementTone
-    type?: 'button'
-  }
-
-/** @internal */
-export type SelectableElementType = 'button' | 'a' | ComponentType
-
-/** @internal */
-export type SelectableProps<E extends SelectableElementType = SelectableElementType> = Props<
-  SelectableOwnProps,
-  E
->
-
-/** @internal */
-export function Selectable<E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT>(
-  props: SelectableProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_SELECTABLE_ELEMENT,
-    className,
-    radius,
-    selected,
-    tone,
-    ...rest
-  } = props as SelectableProps<typeof DEFAULT_SELECTABLE_ELEMENT>
-
-  return (
-    <Box
-      {...rest}
-      as={as}
-      className={_selectable({className, radius, tone})}
-      data-selected={selected ? '' : undefined}
-    />
-  )
-}

package/src/core/primitives/skeleton/CodeSkeleton.tsx

@@ -1,49 +0,0 @@
-import {codeSkeleton, type ResponsiveProp} from '@sanity/ui/css'
-import type {FontCodeSize} from '@sanity/ui/theme'
-
-import type {Props} from '../../types'
-import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
-
-/** @beta */
-export const DEFAULT_CODE_SKELETON_ELEMENT = 'div'
-
-/** @beta */
-export type CodeSkeletonOwnProps = SkeletonOwnProps & {
-  size?: ResponsiveProp<FontCodeSize>
-}
-
-/** @beta */
-export type CodeSkeletonElementType = SkeletonElementType
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export type CodeSkeletonProps<E extends CodeSkeletonElementType = CodeSkeletonElementType> = Props<
-  CodeSkeletonOwnProps,
-  E
->
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function CodeSkeleton<
-  E extends CodeSkeletonElementType = typeof DEFAULT_CODE_SKELETON_ELEMENT,
->(props: CodeSkeletonProps<E>): React.JSX.Element {
-  const {
-    className,
-    size = 2,
-    ...rest
-  } = props as CodeSkeletonProps<typeof DEFAULT_CODE_SKELETON_ELEMENT>
-
-  return (
-    <Skeleton
-      {...rest}
-      className={codeSkeleton({
-        className,
-        size,
-      })}
-    />
-  )
-}

package/src/core/primitives/skeleton/HeadingSkeleton.tsx

@@ -1,48 +0,0 @@
-import {headingSkeleton, type ResponsiveProp} from '@sanity/ui/css'
-import type {FontHeadingSize} from '@sanity/ui/theme'
-
-import type {Props} from '../../types'
-import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
-
-/** @beta */
-export const DEFAULT_HEADING_SKELETON_ELEMENT = 'div'
-
-/** @beta */
-export type HeadingSkeletonOwnProps = SkeletonOwnProps & {
-  size?: ResponsiveProp<FontHeadingSize>
-}
-
-/** @beta */
-export type HeadingSkeletonElementType = SkeletonElementType
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export type HeadingSkeletonProps<
-  E extends HeadingSkeletonElementType = HeadingSkeletonElementType,
-> = Props<HeadingSkeletonOwnProps, E>
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function HeadingSkeleton<
-  E extends HeadingSkeletonElementType = typeof DEFAULT_HEADING_SKELETON_ELEMENT,
->(props: HeadingSkeletonProps<E>): React.JSX.Element {
-  const {
-    className,
-    size = 2,
-    ...rest
-  } = props as HeadingSkeletonProps<typeof DEFAULT_HEADING_SKELETON_ELEMENT>
-
-  return (
-    <Skeleton
-      {...rest}
-      className={headingSkeleton({
-        className,
-        size,
-      })}
-    />
-  )
-}

package/src/core/primitives/skeleton/LabelSkeleton.tsx

@@ -1,47 +0,0 @@
-import {labelSkeleton, type ResponsiveProp} from '@sanity/ui/css'
-import type {FontLabelSize} from '@sanity/ui/theme'
-
-import type {Props} from '../../types'
-import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
-
-/** @beta */
-export const DEFAULT_LABEL_SKELETON_ELEMENT = 'div'
-
-/** @beta */
-export type LabelSkeletonOwnProps = SkeletonOwnProps & {
-  size?: ResponsiveProp<FontLabelSize>
-}
-
-/** @beta */
-export type LabelSkeletonElementType = SkeletonElementType
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export type LabelSkeletonProps<E extends LabelSkeletonElementType = LabelSkeletonElementType> =
-  Props<LabelSkeletonOwnProps, E>
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function LabelSkeleton<
-  E extends LabelSkeletonElementType = typeof DEFAULT_LABEL_SKELETON_ELEMENT,
->(props: LabelSkeletonProps<E>): React.JSX.Element {
-  const {
-    className,
-    size = 2,
-    ...rest
-  } = props as LabelSkeletonProps<typeof DEFAULT_LABEL_SKELETON_ELEMENT>
-
-  return (
-    <Skeleton
-      {...rest}
-      className={labelSkeleton({
-        className,
-        size,
-      })}
-    />
-  )
-}

package/src/core/primitives/skeleton/Skeleton.tsx

@@ -1,70 +0,0 @@
-import {skeleton, type SkeletonStyleProps} from '@sanity/ui/css'
-import {useEffect, useState} from 'react'
-
-import type {ComponentType, Props} from '../../types'
-
-/** @beta */
-export const DEFAULT_SKELETON_ELEMENT = 'div'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export type SkeletonOwnProps = SkeletonStyleProps & {
-  animated?: boolean
-  delay?: number
-}
-
-/** @beta */
-export type SkeletonElementType = 'div' | 'span' | ComponentType
-
-/** @beta */
-export type SkeletonProps<E extends SkeletonElementType = SkeletonElementType> = Props<
-  SkeletonOwnProps,
-  E
->
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON_ELEMENT>(
-  props: SkeletonProps<E>,
-): React.JSX.Element {
-  const {
-    as: As = DEFAULT_SKELETON_ELEMENT,
-    animated = false,
-    className,
-    delay,
-    ...rest
-  } = props as SkeletonProps<typeof DEFAULT_SKELETON_ELEMENT>
-
-  const [visible, setVisible] = useState<boolean>(delay ? false : true)
-
-  useEffect(() => {
-    if (!delay) {
-      return setVisible(true)
-    }
-
-    const timeout = setTimeout(() => {
-      setVisible(true)
-    }, delay)
-
-    return () => {
-      clearTimeout(timeout)
-    }
-  }, [delay])
-
-  return (
-    <As
-      data-ui="Skeleton"
-      {...rest}
-      className={skeleton({
-        className,
-        ...rest,
-      })}
-      data-animated={animated ? '' : undefined}
-      data-visible={visible ? '' : undefined}
-    />
-  )
-}

package/src/core/primitives/skeleton/TextSkeleton.tsx

@@ -1,49 +0,0 @@
-import {type ResponsiveProp, textSkeleton} from '@sanity/ui/css'
-import type {FontTextSize} from '@sanity/ui/theme'
-
-import type {Props} from '../../types'
-import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
-
-/** @beta */
-export const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
-
-/** @beta */
-export type TextSkeletonOwnProps = SkeletonOwnProps & {
-  size?: ResponsiveProp<FontTextSize>
-}
-
-/** @beta */
-export type TextSkeletonElementType = SkeletonElementType
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export type TextSkeletonProps<E extends TextSkeletonElementType = TextSkeletonElementType> = Props<
-  TextSkeletonOwnProps,
-  E
->
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function TextSkeleton<
-  E extends TextSkeletonElementType = typeof DEFAULT_TEXT_SKELETON_ELEMENT,
->(props: TextSkeletonProps<E>): React.JSX.Element {
-  const {
-    className,
-    size = 2,
-    ...rest
-  } = props as TextSkeletonProps<typeof DEFAULT_TEXT_SKELETON_ELEMENT>
-
-  return (
-    <Skeleton
-      {...rest}
-      className={textSkeleton({
-        className,
-        size,
-      })}
-    />
-  )
-}

package/src/core/primitives/skeleton/__workshop__/Delay.tsx

@@ -1,78 +0,0 @@
-import {
-  Box,
-  Card,
-  CodeSkeleton,
-  Container,
-  Flex,
-  HeadingSkeleton,
-  LabelSkeleton,
-  Skeleton,
-  Stack,
-  Text,
-  TextSkeleton,
-} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
-
-export default function SkeletonDelayStory(): React.JSX.Element {
-  // @ts-expect-error - TODO: fix this
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
-  const animated = useBoolean('Animated', true)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Container width={1}>
-        <Text muted>Delayed by 2000ms</Text>
-        <Card
-          // @ts-expect-error - TODO: fix this
-          tone={tone}
-          marginTop={4}
-          padding={2}
-          radius={2}
-          border
-        >
-          <Flex align="center">
-            <Skeleton
-              style={{width: 90, height: 90}}
-              radius={2}
-              animated={animated}
-              marginRight={3}
-              delay={1000}
-            />
-            <Stack flex={1} gap={2}>
-              <HeadingSkeleton
-                size={4}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <TextSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <LabelSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <CodeSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-            </Stack>
-          </Flex>
-        </Card>
-      </Container>
-    </Box>
-  )
-}