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

package/src/primitives/grid/__workshop__/Responsive.tsx

@@ -1,54 +0,0 @@
-import {Card, Code, Container, Flex, Grid} from '@sanity/ui'
-
-export default function ResponsiveStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width="auto">
-        <Grid
-          gap={[0, 1, 2, 3, 4, 5, 6]}
-          gridTemplateColumns={[1, 2, 3, 4, 5, 6, 7]}
-          gridTemplateRows={[1, 2, 3, 4, 5, 6, 7]}
-          id="responsive-grid"
-          style={{textAlign: 'center'}}
-        >
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>1</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>2</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>3</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>4</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>5</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>6</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>7</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>8</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>9</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>10</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>11</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>12</Code>
-          </Card>
-        </Grid>
-      </Container>
-    </Flex>
-  )
-}

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

@@ -1,12 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/grid',
-  title: 'Grid',
-  stories: [
-    {name: 'responsive', title: 'Responsive', component: lazy(() => import('./Responsive'))},
-  ],
-}
-
-export default scope

package/src/primitives/heading/Heading.tsx

@@ -1,68 +0,0 @@
-import {
-  heading,
-  HEADING_STYLE_PROP_KEYS,
-  type HeadingStyleProps,
-  textOverflow,
-  type TextOverflowStyleProps,
-} from '@sanity/ui-css'
-
-import {_splitKeys} from '../../core/_keys'
-import type {ComponentType, Props} from '../../core/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 [
-    // split style props
-    styleProps,
-    {
-      as: Element = DEFAULT_HEADING_ELEMENT,
-      children: childrenProp,
-      textOverflow: textOverflowProp,
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(props as HeadingProps<typeof DEFAULT_HEADING_ELEMENT>, HEADING_STYLE_PROP_KEYS)
-
-  let children = childrenProp
-
-  if (textOverflowProp) {
-    children = <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
-  }
-
-  return (
-    <Element data-ui="Heading" {...domProps} className={heading(styleProps)}>
-      {children}
-    </Element>
-  )
-}

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

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

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

@@ -1,25 +0,0 @@
-import {Flex, FONT_HEADING_SIZE, Heading} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-
-import {WORKSHOP_FONT_WEIGHT_OPTIONS, WORKSHOP_TEXT_OVERFLOW_OPTIONS} from '$workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  const muted = useBoolean('Muted', false)
-  const size = useSelect('Size', FONT_HEADING_SIZE, 2)
-  const textChild = useText('Text', 'Hello, world')
-  const textOverflow = useSelect(
-    'Text overflow',
-    WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-    undefined,
-    'Props',
-  )
-  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} size={size} textOverflow={textOverflow} weight={weight}>
-        {textChild}
-      </Heading>
-    </Flex>
-  )
-}

package/src/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/primitives/inline/Inline.tsx

@@ -1,37 +0,0 @@
-import {inline, INLINE_STYLE_PROP_KEYS, type InlineStyleProps} 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_INLINE_ELEMENT = 'div'
-
-/** @public */
-export type InlineOwnProps = InlineStyleProps
-
-/** @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 [
-    styleProps,
-    {
-      as: Element = DEFAULT_INLINE_ELEMENT,
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(props as InlineProps<typeof DEFAULT_INLINE_ELEMENT>, INLINE_STYLE_PROP_KEYS)
-
-  return <Element data-ui="Inline" {...domProps} className={inline(styleProps)} />
-}

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

@@ -1,22 +0,0 @@
-import {Card, Flex, Inline, SPACE, Text} from '@sanity/ui'
-import {useAction, useSelect} from '@sanity/ui-workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Inline gap={useSelect('Gap', SPACE, 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/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/primitives/kbd/Kbd.tsx

@@ -1,36 +0,0 @@
-import {kbd, KBD_STYLE_PROP_KEYS, type KBDStyleProps} from '@sanity/ui-css'
-
-import {_splitKeys} from '../../core/_keys'
-import type {ComponentType, Props} from '../../core/types'
-
-/** @public */
-export const DEFAULT_KBD_ELEMENT = 'kbd'
-
-/** @public */
-export type KBDOwnProps = KBDStyleProps
-
-/** @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 [
-    styleProps,
-    {
-      as: Element = DEFAULT_KBD_ELEMENT,
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(props as KBDProps<typeof DEFAULT_KBD_ELEMENT>, KBD_STYLE_PROP_KEYS)
-
-  return <Element data-ui="KBD" {...domProps} className={kbd(styleProps)} />
-}

package/src/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/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/primitives/label/Label.tsx

@@ -1,67 +0,0 @@
-import {
-  label,
-  LABEL_STYLE_PROP_KEYS,
-  type LabelStyleProps,
-  textOverflow,
-  type TextOverflowStyleProps,
-} from '@sanity/ui-css'
-
-import {_splitKeys} from '../../core/_keys'
-import type {ComponentType, Props} from '../../core/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 [
-    // split style props
-    styleProps,
-    {
-      as: Element = DEFAULT_LABEL_ELEMENT,
-      children: childrenProp,
-      textOverflow: textOverflowProp,
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(props as LabelProps<typeof DEFAULT_LABEL_ELEMENT>, LABEL_STYLE_PROP_KEYS)
-
-  let children = childrenProp
-
-  if (textOverflowProp) {
-    children = <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
-  }
-
-  return (
-    <Element data-ui="Label" {...domProps} className={label(styleProps)}>
-      {children}
-    </Element>
-  )
-}

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

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

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

@@ -1,27 +0,0 @@
-import {Container, Flex, FONT_TEXT_SIZE, Label} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
-  WORKSHOP_TEXT_ALIGN_OPTIONS,
-  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '$workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS)
-  const muted = useBoolean('Muted', false)
-  const size = useSelect('Size', FONT_TEXT_SIZE)
-  const textChild = useText('Text', 'Label text')
-  const textOverflow = useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS)
-  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 align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
-          {textChild}
-        </Label>
-      </Container>
-    </Flex>
-  )
-}

package/src/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/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 value={value}>
-            <Debug />
-          </LayerContext>
-        )
-      }
-
-      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
-            // @ts-expect-error - we want to test the error case
-            value={undefined}
-          >
-            <Debug />
-          </LayerContext>
-        )
-      }
-
-      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
-            // @ts-expect-error - we want to test the error case
-            value={() => ({version: 1})}
-          >
-            <Debug />
-          </LayerContext>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useLayer(): the context value is not compatible',
-      )
-    })
-  })
-})

package/src/primitives/layer/Layer.tsx

@@ -1,35 +0,0 @@
-import type {ResponsiveProp} from '@sanity/ui-css'
-
-import type {Props} from '../../core/types'
-import type {CardElementType, CardOwnProps} from '../../primitives/card/Card'
-import {LayerCard} from './LayerCard'
-import {LayerProvider} from './LayerProvider'
-
-/** @public */
-export const DEFAULT_LAYER_ELEMENT = 'div'
-
-/** @public */
-export interface LayerOwnProps extends CardOwnProps {
-  /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
-  onActivate?: (props: {activeElement: HTMLElement | null}) => void
-  zOffset?: ResponsiveProp<number>
-}
-
-/** @public */
-export type LayerElementType = CardElementType
-
-/** @public */
-export type LayerProps<E extends LayerElementType = LayerElementType> = Props<LayerOwnProps, E>
-
-/** @public */
-export function Layer<E extends LayerElementType = typeof DEFAULT_LAYER_ELEMENT>(
-  props: LayerProps<E>,
-): React.JSX.Element {
-  const {zOffset = 1, ...rest} = props as LayerProps<typeof DEFAULT_LAYER_ELEMENT>
-
-  return (
-    <LayerProvider zOffset={zOffset}>
-      <LayerCard {...rest} />
-    </LayerProvider>
-  )
-}