@sanity/ui 4.0.0-v4.1 → 4.0.0

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

@@ -1,72 +0,0 @@
-import {
-  Box,
-  Card,
-  CodeSkeleton,
-  Container,
-  Flex,
-  Grid,
-  HeadingSkeleton,
-  LabelSkeleton,
-  Skeleton,
-  Stack,
-  TextSkeleton,
-} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
-
-export default function SkeletonStory(): 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}>
-        <Stack gap={4}>
-          {[1, 2, 3].map((item) => (
-            <Card
-              key={item}
-              // @ts-expect-error - TODO: fix this
-              tone={tone}
-              padding={2}
-              radius={2}
-              border
-            >
-              <Flex align="center">
-                <Grid gap={2} gridTemplateColumns={2} marginRight={3}>
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                </Grid>
-                <Stack gap={2} flex={1}>
-                  <HeadingSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <TextSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <LabelSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <CodeSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                </Stack>
-              </Flex>
-              <Flex marginTop={2}>
-                <Skeleton
-                  style={{height: 50}}
-                  flex={1}
-                  marginRight={1}
-                  radius={2}
-                  animated={animated}
-                />
-                <Skeleton
-                  style={{height: 50}}
-                  flex={1}
-                  marginLeft={1}
-                  radius={2}
-                  animated={animated}
-                />
-              </Flex>
-            </Card>
-          ))}
-        </Stack>
-      </Container>
-    </Box>
-  )
-}

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

@@ -1,13 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/skeleton',
-  title: 'Skeleton',
-  stories: [
-    {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./Skeleton'))},
-    {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./Delay'))},
-  ],
-}
-
-export default scope

package/src/core/primitives/spinner/AnimatedSpinnerIcon.tsx

@@ -1,14 +0,0 @@
-import {SpinnerIcon} from '@sanity/icons'
-import {animatedSpinnerIcon} from '@sanity/ui/css'
-import type {SVGProps} from 'react'
-
-/** @internal */
-export function AnimatedSpinnerIcon(
-  props: Omit<SVGProps<SVGSVGElement>, 'className'>,
-): React.JSX.Element {
-  const {...rest} = props
-
-  return (
-    <SpinnerIcon data-sanity-icon="animated-spinner" {...rest} className={animatedSpinnerIcon()} />
-  )
-}

package/src/core/primitives/spinner/Spinner.tsx

@@ -1,45 +0,0 @@
-import {type ResponsiveProp, spinner} from '@sanity/ui/css'
-import type {FontTextSize} from '@sanity/ui/theme'
-
-import type {ComponentType, Props} from '../../types'
-import {Text} from '../text/Text'
-import {AnimatedSpinnerIcon} from './AnimatedSpinnerIcon'
-
-/** @public */
-export const DEFAULT_SPINNER_ELEMENT = 'div'
-
-/** @public */
-export type SpinnerOwnProps = {
-  muted?: boolean
-  size?: ResponsiveProp<FontTextSize>
-}
-
-/** @public */
-export type SpinnerElementType = 'div' | 'span' | ComponentType
-
-/** @public */
-export type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Props<
-  SpinnerOwnProps,
-  E
->
-
-/**
- * Indicate that something is loading for an indeterminate amount of time.
- *
- * @public
- */
-export function Spinner<E extends SpinnerElementType = typeof DEFAULT_SPINNER_ELEMENT>(
-  props: SpinnerProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_SPINNER_ELEMENT,
-    className,
-    ...rest
-  } = props as SpinnerProps<typeof DEFAULT_SPINNER_ELEMENT>
-
-  return (
-    <Text as={as} data-ui="Spinner" {...rest} className={spinner({className})}>
-      <AnimatedSpinnerIcon />
-    </Text>
-  )
-}

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

@@ -1,20 +0,0 @@
-import {Flex, Spinner} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
-
-export default function Props(): React.JSX.Element {
-  const muted = useBoolean('Muted', false)
-  // @ts-expect-error - TODO: fix this
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Spinner
-        muted={muted}
-        // @ts-expect-error - TODO: fix this
-        size={size}
-      />
-    </Flex>
-  )
-}

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

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

package/src/core/primitives/srOnly/SrOnly.tsx

@@ -1,33 +0,0 @@
-import {srOnly} from '@sanity/ui/css'
-
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_SR_ONLY_ELEMENT = 'span'
-
-/** @public */
-export type SrOnlyOwnProps = {} // eslint-disable-line @typescript-eslint/no-empty-object-type
-
-/** @public */
-export type SrOnlyElementType = 'span' | ComponentType
-
-/** @public */
-export type SrOnlyProps<E extends SrOnlyElementType = SrOnlyElementType> = Props<SrOnlyOwnProps, E>
-
-/** @public */
-export function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEMENT>(
-  props: SrOnlyProps<E>,
-): React.JSX.Element {
-  const {
-    as: Element = DEFAULT_SR_ONLY_ELEMENT,
-    children,
-    className,
-    ...rest
-  } = props as SrOnlyProps<typeof DEFAULT_SR_ONLY_ELEMENT>
-
-  return (
-    <Element data-ui="SrOnly" {...rest} aria-hidden className={srOnly({className})}>
-      {children}
-    </Element>
-  )
-}

package/src/core/primitives/stack/Stack.tsx

@@ -1,60 +0,0 @@
-import {stack} from '@sanity/ui/css'
-
-import type {Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
-
-/** @public */
-export const DEFAULT_STACK_ELEMENT = 'div'
-
-/** @public */
-export type StackOwnProps = Omit<
-  BoxOwnProps,
-  | 'align'
-  | 'alignItems'
-  | 'columns'
-  | 'gridTemplateColumns'
-  | 'direction'
-  | 'display'
-  | 'flexDirection'
-  | 'flexWrap'
-  | 'gapX'
-  | 'gapY'
-  | 'justify'
-  | 'justifyContent'
-  | 'rows'
-  | 'gridTemplateRows'
->
-
-/** @public */
-export type StackElementType = BoxElementType
-
-/** @public */
-export type StackProps<E extends StackElementType = StackElementType> = Props<StackOwnProps, E>
-
-/**
- * The `Stack` component is used to place elements on top of each other.
- *
- * @public
- */
-export function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>(
-  props: StackProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_STACK_ELEMENT,
-    className,
-    gap,
-    ...rest
-  } = props as StackProps<typeof DEFAULT_STACK_ELEMENT>
-
-  return (
-    <Box
-      data-ui="Stack"
-      {...rest}
-      as={as}
-      gridAutoRows="min"
-      className={stack({className})}
-      display="grid"
-      gap={gap}
-    />
-  )
-}

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

@@ -1,35 +0,0 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack
-          // @ts-expect-error - TODO: fix this
-          gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0)}
-        >
-          <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/stack/__workshop__/index.ts

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

package/src/core/primitives/switch/Switch.tsx

@@ -1,84 +0,0 @@
-import {
-  _switch,
-  _switchElement,
-  _switchPresentation,
-  _switchThumb,
-  _switchTrack,
-} from '@sanity/ui/css'
-import {useEffect, useImperativeHandle, useRef} from 'react'
-
-import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/Box'
-
-/** @public */
-export const DEFAULT_SWITCH_ELEMENT = 'input'
-
-/** @public */
-export type SwitchOwnProps = {
-  indeterminate?: boolean
-}
-
-/** @public */
-export type SwitchElementType = 'input' | ComponentType
-
-/** @public */
-export type SwitchProps<E extends SwitchElementType = SwitchElementType> = Props<SwitchOwnProps, E>
-
-/**
- * The `Switch` component allows the user to toggle a setting on and off.
- *
- * Extends all properties of an `<input type="checkbox" />` element, except type.
- *
- * @public
- */
-export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEMENT>(
-  props: SwitchProps<E>,
-): React.JSX.Element {
-  const {
-    as: Element = DEFAULT_SWITCH_ELEMENT,
-    className,
-    disabled,
-    indeterminate,
-    readOnly,
-    ref: forwardedRef,
-    style,
-    ...rest
-  } = props as SwitchProps<typeof DEFAULT_SWITCH_ELEMENT>
-
-  const ref = useRef<HTMLInputElement | null>(null)
-
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useEffect(() => {
-    if (ref.current) {
-      // Set the indeterminate state
-      ref.current.indeterminate = indeterminate || false
-    }
-  }, [indeterminate])
-
-  return (
-    <Box
-      className={_switch({className})}
-      data-ui="Switch"
-      display="block"
-      position="relative"
-      style={style}
-    >
-      <Element
-        {...rest}
-        className={_switchElement()}
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        disabled={disabled || readOnly}
-        type="checkbox"
-        ref={ref}
-      />
-      <span aria-hidden className={_switchPresentation()}>
-        <span className={_switchTrack()} />
-        <span className={_switchThumb()} />
-      </span>
-    </Box>
-  )
-}

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(): React.JSX.Element {
-  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__/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(): React.JSX.Element {
-  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/switch/__workshop__/index.ts

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

package/src/core/primitives/text/Text.tsx

@@ -1,76 +0,0 @@
-import {text, textOverflow, type TextOverflowStyleProps, type TextStyleProps} from '@sanity/ui/css'
-
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_TEXT_ELEMENT = 'div'
-
-/** @public */
-export type TextOwnProps = TextStyleProps & TextOverflowStyleProps
-
-/** @public */
-export type TextElementType =
-  | 'div'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'label'
-  | 'li'
-  | 'p'
-  | 'span'
-  | 'summary'
-  | 'time'
-  | ComponentType
-
-/** @public */
-export type TextProps<E extends TextElementType = TextElementType> = Props<TextOwnProps, E>
-
-/**
- * The `Text` component is an agile, themed typographic element.
- *
- * @public
- */
-export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
-  props: TextProps<E>,
-): React.JSX.Element {
-  const {
-    align,
-    as: Element = DEFAULT_TEXT_ELEMENT,
-    children,
-    className,
-    flex,
-    maxWidth = 'fill',
-    muted,
-    size = 2,
-    textOverflow: textOverflowProp,
-    weight = 'regular',
-    ...rest
-  } = props as TextProps<typeof DEFAULT_TEXT_ELEMENT>
-
-  return (
-    <Element
-      data-ui="Text"
-      {...rest}
-      className={text({
-        className,
-        align,
-        flex,
-        maxWidth,
-        muted,
-        size,
-        weight,
-      })}
-    >
-      <span
-        className={textOverflow({
-          textOverflow: textOverflowProp,
-        })}
-      >
-        {children}
-      </span>
-    </Element>
-  )
-}

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

@@ -1,30 +0,0 @@
-import {Flex, Text} from '@sanity/ui'
-import {vars} from '@sanity/ui/css'
-import type {AvatarColor} from '@sanity/ui/theme'
-import {useSelect} from '@sanity/ui-workshop'
-import {styled} from 'styled-components'
-
-import {WORKSHOP_AVATAR_COLOR_OPTIONS} from '$workshop'
-
-const ColoredText = styled(Text)<{$color: AvatarColor}>`
-  ${vars.color.fg.slice(4, -1)}: ${({$color}) => vars.color.avatar[$color].bg};
-`
-
-export default function ColoredTextStory(): React.JSX.Element {
-  // @ts-expect-error - TODO: fix this
-  const color = useSelect('Color', WORKSHOP_AVATAR_COLOR_OPTIONS, 'gray') ?? 'gray'
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <ColoredText
-        align="center"
-        // @ts-expect-error - TODO: fix this
-        $color={color}
-        size={4}
-        weight="bold"
-      >
-        {color}
-      </ColoredText>
-    </Flex>
-  )
-}

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

@@ -1,42 +0,0 @@
-import {Container, Flex, Text} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_TEXT_ALIGN_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-  WORKSHOP_TEXT_WEIGHT_OPTIONS,
-} from '$workshop'
-
-export default function TextStory(): React.JSX.Element {
-  // @ts-expect-error - TODO: fix this
-  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS)
-  const muted = useBoolean('Muted', false)
-  // @ts-expect-error - TODO: fix this
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1)
-  const text = useText('Text', 'Hello, world')
-  // @ts-expect-error - TODO: fix this
-  const textOverflow = useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS)
-  // @ts-expect-error - TODO: fix this
-  const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Container width={0}>
-        <Text
-          // @ts-expect-error - TODO: fix this
-          align={align}
-          muted={muted}
-          // @ts-expect-error - TODO: fix this
-          size={size}
-          // @ts-expect-error - TODO: fix this
-          textOverflow={textOverflow}
-          // @ts-expect-error - TODO: fix this
-          weight={weight}
-        >
-          {text}
-        </Text>
-      </Container>
-    </Flex>
-  )
-}

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

@@ -1,23 +0,0 @@
-import {CropIcon} from '@sanity/icons'
-import {Box, Stack, Text} from '@sanity/ui'
-import {vars} from '@sanity/ui/css'
-import {FONT_TEXT_SIZE} from '@sanity/ui/theme'
-
-export default function OpticalAlignment(): React.JSX.Element {
-  return (
-    <Stack gap={4} padding={[4, 5, 6]}>
-      {FONT_TEXT_SIZE.map((size) => (
-        <Box display="flex" gap={2} key={size}>
-          <div style={{outline: `0.5px solid ${vars.color.tinted.suggest.border[4]}`}}>
-            <Text size={size}>
-              <CropIcon />
-            </Text>
-          </div>
-          <div style={{outline: `0.5px solid ${vars.color.tinted.suggest.border[4]}`}}>
-            <Text size={size}>Hamburgefonstiv M</Text>
-          </div>
-        </Box>
-      ))}
-    </Stack>
-  )
-}

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

@@ -1,26 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  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')),
-    },
-  ],
-}
-
-export default scope