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

package/src/core/primitives/heading/Heading.tsx

@@ -1,78 +0,0 @@
-import {
-  heading,
-  type HeadingStyleProps,
-  textOverflow,
-  type TextOverflowStyleProps,
-} from '@sanity/ui/css'
-
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_HEADING_ELEMENT = 'div'
-
-/** @public */
-export type HeadingOwnProps = HeadingStyleProps & TextOverflowStyleProps
-
-/** @public */
-export type HeadingElementType =
-  | 'div'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'label'
-  | 'span'
-  | ComponentType
-
-/** @public */
-export type HeadingProps<E extends HeadingElementType = HeadingElementType> = Props<
-  HeadingOwnProps,
-  E
->
-
-/**
- * Typographic headings.
- *
- * @public
- */
-export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(
-  props: HeadingProps<E>,
-): React.JSX.Element {
-  const {
-    align,
-    as: Element = DEFAULT_HEADING_ELEMENT,
-    children,
-    className,
-    flex,
-    muted = false,
-    size = 2,
-    textOverflow: textOverflowProp,
-    weight = 'regular',
-    ...rest
-  } = props as HeadingProps<typeof DEFAULT_HEADING_ELEMENT>
-
-  return (
-    <Element
-      data-ui="Heading"
-      {...rest}
-      className={heading({
-        className,
-        align,
-        flex,
-        muted,
-        size,
-        weight,
-      })}
-    >
-      <span
-        className={textOverflow({
-          textOverflow: textOverflowProp,
-        })}
-      >
-        {children}
-      </span>
-    </Element>
-  )
-}

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

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

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

@@ -1,40 +0,0 @@
-import {Flex, Heading} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
-  WORKSHOP_HEADING_FONT_SIZE_OPTIONS,
-  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '$workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  const muted = useBoolean('Muted', false)
-  // @ts-expect-error - TODO: fix this
-  const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2)
-  const textChild = useText('Text', 'Hello, world')
-  const textOverflow = useSelect(
-    'Text overflow',
-    // @ts-expect-error - TODO: fix this
-    WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-    undefined,
-    'Props',
-  )
-  // @ts-expect-error - TODO: fix this
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Heading
-        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}
-      >
-        {textChild}
-      </Heading>
-    </Flex>
-  )
-}

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

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

package/src/core/primitives/inline/Inline.tsx

@@ -1,62 +0,0 @@
-import type {Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
-
-/** @public */
-export const DEFAULT_INLINE_ELEMENT = 'div'
-
-/** @public */
-export type InlineOwnProps = Omit<
-  BoxOwnProps,
-  | 'alignItems'
-  | 'flexDirection'
-  | 'flexWrap'
-  | 'justifyContent'
-  | 'gridAutoColumns'
-  | 'gridAutoFlow'
-  | 'gridAutoRows'
-  | 'gridColumnEnd'
-  | 'gridColumnStart'
-  | 'gridColumn'
-  | 'gridRowEnd'
-  | 'gridRowStart'
-  | 'gridRow'
-  | 'gridTemplateColumns'
-  | 'gridTemplateRows'
-  // todo: omit deprecated flex and grid props
->
-
-/** @public */
-export type InlineElementType = BoxElementType
-
-/** @public */
-export type InlineProps<E extends InlineElementType = InlineElementType> = Props<InlineOwnProps, E>
-
-/**
- * The `Inline` component is a layout utility for aligning and spacing items horizontally.
- *
- * @public
- */
-export function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(
-  props: InlineProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_INLINE_ELEMENT,
-    children,
-    gap,
-    ...rest
-  } = props as InlineProps<typeof DEFAULT_INLINE_ELEMENT>
-
-  return (
-    <Box
-      data-ui="Inline"
-      {...rest}
-      alignItems="center"
-      as={as}
-      display="flex"
-      gap={gap}
-      flexWrap="wrap"
-    >
-      {children}
-    </Box>
-  )
-}

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

@@ -1,28 +0,0 @@
-import {Card, Flex, Inline, Text} from '@sanity/ui'
-import {useAction, 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">
-      <Inline
-        // @ts-expect-error - TODO: fix this
-        gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0)}
-        onClick={useAction('onClick')}
-      >
-        <Card padding={1} shadow={1}>
-          <Text size={1}>Inline item</Text>
-        </Card>
-
-        <Card padding={2} shadow={1}>
-          <Text size={1}>Inline item</Text>
-        </Card>
-
-        <Card padding={3} shadow={1}>
-          <Text size={1}>Inline item</Text>
-        </Card>
-      </Inline>
-    </Flex>
-  )
-}

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

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

package/src/core/primitives/kbd/Kbd.tsx

@@ -1,57 +0,0 @@
-import {kbd, type RadiusStyleProps, type ResponsiveProp} from '@sanity/ui/css'
-import type {FontTextSize} from '@sanity/ui/theme'
-
-import type {ComponentType, Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
-import {Text} from '../text/Text'
-
-/** @public */
-export const DEFAULT_KBD_ELEMENT = 'kbd'
-
-/** @public */
-export type KBDOwnProps = BoxOwnProps &
-  RadiusStyleProps & {
-    fontSize?: ResponsiveProp<FontTextSize>
-  }
-
-/** @public */
-export type KBDElementType = 'kbd' | ComponentType
-
-/** @public */
-export type KBDProps<E extends KBDElementType = KBDElementType> = Props<KBDOwnProps, E>
-
-/**
- * Used to define some text as keyboard input.
- *
- * @public
- */
-export function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(
-  props: KBDProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_KBD_ELEMENT,
-    children,
-    className,
-    display = 'inline-block',
-    fontSize = 1,
-    padding = 1,
-    radius = 2,
-    ...rest
-  } = props as KBDProps<typeof DEFAULT_KBD_ELEMENT>
-
-  return (
-    <Box
-      data-ui="KBD"
-      {...rest}
-      as={as as BoxElementType}
-      className={kbd({className, radius})}
-      display={display}
-      muted
-      padding={padding}
-    >
-      <Text as="span" muted size={fontSize} weight="medium">
-        {children}
-      </Text>
-    </Box>
-  )
-}

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

@@ -1,9 +0,0 @@
-import {Flex, KBD} from '@sanity/ui'
-
-export default function PlainStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <KBD style={{verticalAlign: 'top'}}>Ctrl</KBD>
-    </Flex>
-  )
-}

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

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

package/src/core/primitives/label/Label.tsx

@@ -1,75 +0,0 @@
-import {
-  label,
-  type LabelStyleProps,
-  textOverflow,
-  type TextOverflowStyleProps,
-} from '@sanity/ui/css'
-
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_LABEL_ELEMENT = 'div'
-
-/** @public */
-export type LabelOwnProps = LabelStyleProps & TextOverflowStyleProps
-
-/** @public */
-export type LabelElementType =
-  | 'div'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'label'
-  | 'li'
-  | 'p'
-  | 'span'
-  | ComponentType
-
-/** @public */
-export type LabelProps<E extends LabelElementType = LabelElementType> = Props<LabelOwnProps, E>
-
-/**
- * Typographic labels.
- *
- * @public
- */
-export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>(
-  props: LabelProps<E>,
-): React.JSX.Element {
-  const {
-    align,
-    as: Element = DEFAULT_LABEL_ELEMENT,
-    children,
-    className,
-    muted = false,
-    size = 1,
-    textOverflow: textOverflowProp,
-    weight = 'regular',
-    ...rest
-  } = props
-
-  return (
-    <Element
-      data-ui="Label"
-      {...rest}
-      className={label({
-        className,
-        align,
-        muted,
-        size,
-        weight,
-      })}
-    >
-      <span
-        className={textOverflow({
-          textOverflow: textOverflowProp,
-        })}
-      >
-        {children}
-      </span>
-    </Element>
-  )
-}

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

@@ -1,54 +0,0 @@
-import {AddCircleIcon} from '@sanity/icons'
-import {Box, Card, Flex, Label, Stack} from '@sanity/ui'
-
-export default function OpticalAlignment(): React.JSX.Element {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack gap={1}>
-        <Flex>
-          <Card padding={0} shadow={1} tone="suggest">
-            <Label size={5}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} shadow={1} tone="suggest">
-            <Label size={4}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} shadow={1} tone="suggest">
-            <Label size={3}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} shadow={1} tone="suggest">
-            <Label size={2}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} shadow={1} tone="suggest">
-            <Label size={1}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} shadow={1} tone="suggest">
-            <Label size={0}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={2} shadow={1} tone="suggest">
-            <Label>
-              <AddCircleIcon />
-            </Label>
-          </Card>
-        </Flex>
-      </Stack>
-    </Box>
-  )
-}

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

@@ -1,42 +0,0 @@
-import {Container, Flex, Label} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
-  WORKSHOP_LABEL_FONT_SIZE_OPTIONS,
-  WORKSHOP_TEXT_ALIGN_OPTIONS,
-  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '$workshop'
-
-export default function PlainStory(): 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_LABEL_FONT_SIZE_OPTIONS)
-  const textChild = useText('Text', 'Label text')
-  // @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_FONT_WEIGHT_OPTIONS)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Label
-          // @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}
-        >
-          {textChild}
-        </Label>
-      </Container>
-    </Flex>
-  )
-}

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

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

package/src/core/primitives/layer/Layer.test.tsx

@@ -1,110 +0,0 @@
-import {describe, expect, it, vi} from 'vitest'
-
-import {render} from '$test/utils'
-
-import {LayerContext} from './LayerContext'
-import type {LayerContextValue} from './types'
-import {useLayer} from './useLayer'
-
-describe('primitives/layer', () => {
-  describe('useLayer', () => {
-    it('should get context value', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootLayer = useLayer()
-
-        log(rootLayer)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: LayerContextValue = {
-          version: 0.0,
-          isTopLayer: true,
-          level: 0,
-          registerChild: () => () => undefined,
-          size: 0,
-          zIndex: 0,
-        }
-
-        return (
-          <LayerContext.Provider value={value}>
-            <Debug />
-          </LayerContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].isTopLayer).toBe(true)
-      expect(typeof log.mock.calls[0][0].registerChild).toBe('function')
-      expect(log.mock.calls[0][0].size).toBe(0)
-      expect(log.mock.calls[0][0].zIndex).toBe(0)
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          useLayer()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        return (
-          <LayerContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={undefined}
-          >
-            <Debug />
-          </LayerContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useLayer(): missing context value')
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          useLayer()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // NOTE: we’re testing this because the context value may be a function in the future
-
-        return (
-          <LayerContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={() => ({version: 1})}
-          >
-            <Debug />
-          </LayerContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useLayer(): the context value is not compatible',
-      )
-    })
-  })
-})