@sanity/ui 4.0.0-beta.7 → 4.0.0-next.0

package/src/primitives/card/__workshop__/Tones.tsx

@@ -1,26 +0,0 @@
-import {Card, CARD_TONES, Container, Flex, Stack, Text} from '@sanity/ui'
-
-export default function TonesStory(): React.JSX.Element {
-  return (
-    <Card height="fill" tone="transparent">
-      <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-        <Container width={0}>
-          <Stack gap={3}>
-            {CARD_TONES.map((tone) => (
-              <Card
-                key={tone}
-                padding={4}
-                radius={3}
-                shadow={2}
-                style={{textAlign: 'center'}}
-                tone={tone}
-              >
-                <Text size={1}>{tone}</Text>
-              </Card>
-            ))}
-          </Stack>
-        </Container>
-      </Flex>
-    </Card>
-  )
-}

package/src/primitives/card/__workshop__/index.ts

@@ -1,21 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/card',
-  title: 'Card',
-  stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
-    {name: 'styled', title: 'Styled', component: lazy(() => import('./Styled'))},
-    {name: 'interactive', title: 'Interactive', component: lazy(() => import('./Interactive'))},
-    {name: 'tones', title: 'Tones', component: lazy(() => import('./Tones'))},
-    {name: 'as-button', title: 'As button', component: lazy(() => import('./AsButton'))},
-    {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./ListNavigation'))},
-    {name: 'checkered', title: 'Checkered (legacy)', component: lazy(() => import('./Checkered'))},
-    {name: 'as-component', title: 'As component', component: lazy(() => import('./AsComponent'))},
-    {name: 'selected', title: 'Selected', component: lazy(() => import('./Selected'))},
-    {name: 'data-props', title: 'Data props', component: lazy(() => import('./DataProps'))},
-  ],
-}
-
-export default scope

package/src/primitives/card/types.ts

@@ -1,21 +0,0 @@
-import type {CardTone, ColorScheme} from '@sanity/ui-tokens'
-import type {ComponentType, ReactNode} from 'react'
-
-/** @public */
-export interface CardContextValue {
-  tone: CardTone
-  scheme: ColorScheme
-}
-
-/** @internal */
-export type _CardCompatProviderComponent = ComponentType<{
-  children?: ReactNode
-  tone: CardTone | 'inherit'
-  scheme: ColorScheme
-}>
-
-/** @internal */
-export interface _CardInternalContextValue {
-  CompatProvider?: _CardCompatProviderComponent
-  root: boolean
-}

package/src/primitives/card/useCard.ts

@@ -1,20 +0,0 @@
-import {use} from 'react'
-
-import {CardContext} from './CardContext'
-import type {CardContextValue} from './types'
-
-/** @public */
-export function useCard(): CardContextValue {
-  const card = use(CardContext)
-
-  assertCardContext(card)
-
-  return card
-}
-
-/** @internal */
-export function assertCardContext(card: CardContextValue | null): asserts card is CardContextValue {
-  if (!card) {
-    throw new Error('useCard(): missing context value', {cause: card})
-  }
-}

package/src/primitives/checkbox/Checkbox.tsx

@@ -1,80 +0,0 @@
-import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
-import {checkbox, checkbox_input, checkbox_presentation} from '@sanity/ui-css'
-import {useEffect, useImperativeHandle, useRef} from 'react'
-
-import type {ComponentType, Props} from '../../core/types'
-import {useCustomValidity} from '../../hooks/useCustomValidity'
-
-/** @public */
-export const DEFAULT_CHECKBOX_ELEMENT = 'input'
-
-/** @public */
-export type CheckboxOwnProps = {
-  indeterminate?: boolean
-  customValidity?: string
-}
-
-/** @public */
-export type CheckboxElementType = 'input' | ComponentType
-
-/** @public */
-export type CheckboxProps<E extends CheckboxElementType = CheckboxElementType> = Props<
-  CheckboxOwnProps,
-  E
->
-
-/**
- * Checkboxes allow the user to select one or more items from a set.
- *
- * @public
- */
-export function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX_ELEMENT>(
-  props: CheckboxProps<E>,
-): React.JSX.Element {
-  const {
-    as: Element = DEFAULT_CHECKBOX_ELEMENT,
-    className,
-    disabled,
-    indeterminate,
-    customValidity,
-    readOnly,
-    ref: forwardedRef,
-    style,
-    ...rest
-  } = props as CheckboxProps<typeof DEFAULT_CHECKBOX_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])
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <span className={checkbox({className})} data-ui="Checkbox" style={style}>
-      <Element
-        {...rest}
-        ref={ref}
-        className={checkbox_input()}
-        data-invalid={customValidity ? '' : undefined}
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        disabled={disabled || readOnly}
-        readOnly={readOnly}
-        type="checkbox"
-      />
-      <span className={checkbox_presentation()}>
-        <CheckmarkIcon />
-        <RemoveIcon />
-      </span>
-    </span>
-  )
-}

package/src/primitives/checkbox/__workshop__/Example.tsx

@@ -1,25 +0,0 @@
-import {Box, Checkbox, Flex, 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] = useState(checked === undefined)
-  const handleChange = useCallback(() => setChecked((val) => !val), [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox
-          checked={checked || false}
-          indeterminate={indeterminate}
-          onChange={handleChange}
-        />
-        <Box marginLeft={2}>
-          <Text size={1} weight="medium">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

package/src/primitives/checkbox/__workshop__/Props.tsx

@@ -1,35 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-export default function PropsStory(): React.JSX.Element {
-  const checked = useBoolean('Checked', false)
-  const disabled = useBoolean('Disabled', false)
-  const indeterminate = useBoolean('Indeterminate', false)
-  const invalid = useBoolean('Invalid', false)
-  const onChange = useAction('onChange')
-  const onFocus = useAction('onFocus')
-  const onBlur = useAction('onBlur')
-  const readOnly = useBoolean('Read only', false)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox
-          checked={checked}
-          customValidity={invalid ? 'Invalid' : undefined}
-          disabled={disabled}
-          indeterminate={indeterminate}
-          readOnly={readOnly}
-          onBlur={onBlur}
-          onChange={onChange}
-          onFocus={onFocus}
-        />
-        <Box marginLeft={2}>
-          <Text size={1} weight="medium">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

package/src/primitives/checkbox/__workshop__/ReadOnly.tsx

@@ -1,16 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-
-export default function ReadOnlyStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox id="checkbox-example" readOnly />
-        <Box marginLeft={2}>
-          <Text size={1} weight="medium">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

package/src/primitives/checkbox/__workshop__/Tones.tsx

@@ -1,26 +0,0 @@
-import {Card, CARD_TONES, Checkbox, Flex, Stack, Text} from '@sanity/ui'
-
-export default function MultipleTonesStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Stack gap={1}>
-        {CARD_TONES.map((tone) => (
-          <Card
-            alignItems="center"
-            as="label"
-            display="flex"
-            gap={2}
-            padding={3}
-            radius={3}
-            tone={tone}
-          >
-            <Checkbox />
-            <Text muted size={1}>
-              {tone}
-            </Text>
-          </Card>
-        ))}
-      </Stack>
-    </Flex>
-  )
-}

package/src/primitives/checkbox/__workshop__/index.ts

@@ -1,15 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/checkbox',
-  title: 'Checkbox',
-  stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./Example'))},
-    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./ReadOnly'))},
-    {name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./Tones'))},
-  ],
-}
-
-export default scope

package/src/primitives/code/Code.tsx

@@ -1,47 +0,0 @@
-import {code, CODE_STYLE_PROP_KEYS, type CodeStyleProps} from '@sanity/ui-css'
-import {Suspense} from 'react'
-
-import {_splitKeys} from '../../core/_keys'
-import type {ComponentType, Props} from '../../core/types'
-import {LazySyntax} from '../_syntax/LazySyntax'
-
-/** @public */
-export const DEFAULT_CODE_ELEMENT = 'pre'
-
-/** @public */
-export type CodeOwnProps = CodeStyleProps & {
-  /** Define the language to use for syntax highlighting. */
-  language?: string
-}
-
-/** @public */
-export type CodeElementType = 'div' | 'pre' | ComponentType
-
-/** @public */
-export type CodeProps<E extends CodeElementType = CodeElementType> = Props<CodeOwnProps, E>
-
-/** @public */
-export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
-  props: CodeProps<E>,
-): React.JSX.Element {
-  const [
-    styleProps,
-    {
-      as: Element = DEFAULT_CODE_ELEMENT,
-      children,
-      language: languageProp,
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(props as CodeProps<typeof DEFAULT_CODE_ELEMENT>, CODE_STYLE_PROP_KEYS)
-
-  const language = typeof languageProp === 'string' ? languageProp : undefined
-
-  return (
-    <Element data-ui="Code" {...domProps} className={code(styleProps)}>
-      <Suspense fallback={<code>{children}</code>}>
-        <LazySyntax language={language} value={children} />
-      </Suspense>
-    </Element>
-  )
-}

package/src/primitives/code/__workshop__/OpticalAlignment.tsx

@@ -1,25 +0,0 @@
-import {CropIcon} from '@sanity/icons'
-import {Box, Code, FONT_CODE_SIZE, Stack} from '@sanity/ui'
-
-import {CardWrapper} from '$workshop'
-
-export default function OpticalAlignment(): React.JSX.Element {
-  return (
-    <CardWrapper width={0}>
-      <Stack gap={4}>
-        {FONT_CODE_SIZE.map((size) => (
-          <Box key={size} display="flex" gap={2}>
-            <Box flex="none" muted shadow={1}>
-              <Code size={size}>
-                <CropIcon />
-              </Code>
-            </Box>
-            <Box flex={1} muted shadow={1}>
-              <Code size={size}>Hamburgefonstiv M</Code>
-            </Box>
-          </Box>
-        ))}
-      </Stack>
-    </CardWrapper>
-  )
-}

package/src/primitives/code/__workshop__/Props.tsx

@@ -1,20 +0,0 @@
-import {Box, Code, FONT_CODE_SIZE} from '@sanity/ui'
-import {useSelect, useText} from '@sanity/ui-workshop'
-
-import {CardWrapper, WORKSHOP_CODE_LANGUAGE_OPTIONS} from '$workshop'
-
-export default function PropsStory(): React.JSX.Element {
-  const code = useText('Code', `console.log('Hello, world')`)
-  const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript')
-  const size = useSelect('Size', [undefined, ...FONT_CODE_SIZE], 1)
-
-  return (
-    <CardWrapper alignItems="center" display="flex" justifyContent="center">
-      <Box muted overflow="auto" padding={3} radius={3}>
-        <Code language={language} size={size}>
-          {code}
-        </Code>
-      </Box>
-    </CardWrapper>
-  )
-}

package/src/primitives/code/__workshop__/index.ts

@@ -1,21 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/code',
-  title: 'Code',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./Props')),
-    },
-    {
-      name: 'optical-alignment',
-      title: 'Optical alignment',
-      component: lazy(() => import('./OpticalAlignment')),
-    },
-  ],
-}
-
-export default scope

package/src/primitives/container/Container.tsx

@@ -1,43 +0,0 @@
-import {container, CONTAINER_STYLE_PROP_KEYS, type ContainerStyleProps} from '@sanity/ui-css'
-
-import {_splitKeys} from '../../core/_keys'
-import type {Props} from '../../core/types'
-import type {BoxElementType} from '../box/Box'
-
-/** @public */
-export const DEFAULT_CONTAINER_ELEMENT = 'div'
-
-/** @public */
-export type ContainerOwnProps = ContainerStyleProps
-
-/** @public */
-export type ContainerElementType = BoxElementType
-
-/** @public */
-export type ContainerProps<E extends ContainerElementType = ContainerElementType> = Props<
-  ContainerOwnProps,
-  E
->
-
-/**
- * The `Container` component wraps content layout in a defined set of widths.
- *
- * @public
- */
-export function Container<E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT>(
-  props: ContainerProps<E>,
-): React.JSX.Element {
-  const [
-    styleProps,
-    {
-      as: Element = DEFAULT_CONTAINER_ELEMENT,
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(
-    props as ContainerProps<typeof DEFAULT_CONTAINER_ELEMENT>,
-    CONTAINER_STYLE_PROP_KEYS,
-  )
-
-  return <Element data-ui="Container" {...domProps} className={container(styleProps)} />
-}

package/src/primitives/container/__workshop__/Example.tsx

@@ -1,16 +0,0 @@
-import {Container, CONTAINER_SCALE, Flex, Text} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  const width = useSelect('Width', [undefined, ...CONTAINER_SCALE])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container padding={3} radius={4} shadow={1} width={width}>
-        <Text size={1}>
-          Container with <code>max-width={width}</code>
-        </Text>
-      </Container>
-    </Flex>
-  )
-}

package/src/primitives/container/__workshop__/index.ts

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

package/src/primitives/container/types.ts

@@ -1,6 +0,0 @@
-/**
- * @internal
- */
-export interface ResponsiveWidthStyleProps {
-  $width: (number | 'auto')[]
-}

package/src/primitives/flex/Flex.tsx

@@ -1,38 +0,0 @@
-import {flex, FLEX_STYLE_PROP_KEYS, type FlexStyleProps} from '@sanity/ui-css'
-
-import {_splitKeys} from '../../core/_keys'
-import type {Props} from '../../core/types'
-import type {BoxElementType} from '../box/Box'
-
-/** @public */
-export const DEFAULT_FLEX_ELEMENT = 'div'
-
-/** @public */
-export type FlexOwnProps = FlexStyleProps
-
-/** @public */
-export type FlexElementType = BoxElementType
-
-/** @public */
-export type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexOwnProps, E>
-
-/**
- * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
- *
- * @public
- */
-export function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(
-  props: FlexProps<E>,
-): React.JSX.Element {
-  const [
-    // split style props
-    styleProps,
-    {
-      as: Element = DEFAULT_FLEX_ELEMENT,
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(props as FlexProps<typeof DEFAULT_FLEX_ELEMENT>, FLEX_STYLE_PROP_KEYS)
-
-  return <Element data-ui="Flex" {...domProps} className={flex(styleProps)} />
-}

package/src/primitives/flex/__workshop__/Example.tsx

@@ -1,26 +0,0 @@
-import {Card, Code, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '$workshop'
-
-import {debugCard} from './styles.css'
-
-export default function ExampleStory(): React.JSX.Element {
-  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row')
-
-  return (
-    <Flex direction={direction} height="fill" style={{width: '100%'}}>
-      <Card className={debugCard} flex={1}>
-        <Code size={1}>1</Code>
-      </Card>
-
-      <Card className={debugCard} flex={[1, 2, 3]}>
-        <Code size={1}>[1,2,3]</Code>
-      </Card>
-
-      <Card className={debugCard} flex={['none', 'none', 1]}>
-        <Code size={1}>['none', 'none', 1]</Code>
-      </Card>
-    </Flex>
-  )
-}

package/src/primitives/flex/__workshop__/Gap.tsx

@@ -1,25 +0,0 @@
-import {Card, Flex, Text} from '@sanity/ui'
-
-export default function GapStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" gap={[1, 2, 3, 4]} justify="center" wrap="wrap">
-        <Card padding={3} shadow={1}>
-          <Text size={0}>Card 0</Text>
-        </Card>
-        <Card padding={3} shadow={1}>
-          <Text size={1}>Card 1</Text>
-        </Card>
-        <Card padding={3} shadow={1}>
-          <Text size={2}>Card 2</Text>
-        </Card>
-        <Card padding={3} shadow={1}>
-          <Text size={3}>Card 3</Text>
-        </Card>
-        <Card padding={3} shadow={1}>
-          <Text size={4}>Card 4</Text>
-        </Card>
-      </Flex>
-    </Flex>
-  )
-}

package/src/primitives/flex/__workshop__/index.ts

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

package/src/primitives/flex/__workshop__/styles.css.ts

@@ -1,12 +0,0 @@
-import {style} from '@vanilla-extract/css'
-
-export const debugCard: string = style({
-  outline: '1px solid red',
-  alignItems: 'center',
-  justifyContent: 'center',
-  selectors: {
-    '&:not([hidden])': {
-      display: 'flex',
-    },
-  },
-})

package/src/primitives/grid/Grid.tsx

@@ -1,38 +0,0 @@
-import {grid, GRID_STYLE_PROP_KEYS, type GridStyleProps} from '@sanity/ui-css'
-
-import {_splitKeys} from '../../core/_keys'
-import type {Props} from '../../core/types'
-import type {BoxElementType} from '../box/Box'
-
-/** @public */
-export const DEFAULT_GRID_ELEMENT = 'div'
-
-/** @public */
-export type GridOwnProps = GridStyleProps
-
-/** @public */
-export type GridElementType = BoxElementType
-
-/** @public */
-export type GridProps<E extends GridElementType = GridElementType> = Props<GridOwnProps, E>
-
-/**
- * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
- *
- * @public
- */
-export function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(
-  props: GridProps<E>,
-): React.JSX.Element {
-  const [
-    // split style props
-    styleProps,
-    {
-      as: Element = DEFAULT_GRID_ELEMENT,
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(props as GridProps<typeof DEFAULT_GRID_ELEMENT>, GRID_STYLE_PROP_KEYS)
-
-  return <Element data-ui="Grid" {...domProps} className={grid(styleProps)} />
-}