@sanity/ui 3.0.0-static.3 → 3.0.0-static.30

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

@@ -0,0 +1,54 @@
+import {AddCircleIcon} from '@sanity/icons'
+import {Box, Card, Flex, Heading, Stack} from '@sanity/ui'
+
+export default function OpticalAlignment() {
+  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

@@ -0,0 +1,29 @@
+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() {
+  const muted = useBoolean('Muted', false)
+  const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 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/core/primitives/heading/heading.tsx

@@ -0,0 +1,80 @@
+import {
+  heading,
+  type HeadingStyleProps,
+  textOverflow,
+  type TextOverflowStyleProps,
+} from '@sanity/ui/css'
+
+import type {ComponentType, Props} from '../../types/props'
+
+/** @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>,
+) {
+  const {
+    accent = false,
+    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,
+        accent,
+        align,
+        flex,
+        muted,
+        size,
+        weight,
+      })}
+    >
+      <span
+        className={textOverflow({
+          textOverflow: textOverflowProp,
+        })}
+      >
+        {children}
+      </span>
+    </Element>
+  )
+}

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

@@ -0,0 +1,24 @@
+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() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Inline 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/inline.tsx

@@ -0,0 +1,69 @@
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
+
+import type {Props} from '../../types/props'
+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
+> & {
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
+}
+
+/** @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>,
+) {
+  const {
+    as = DEFAULT_INLINE_ELEMENT,
+    children,
+    gap,
+    space,
+    ...rest
+  } = props as InlineProps<typeof DEFAULT_INLINE_ELEMENT>
+
+  return (
+    <Box
+      data-ui="Inline"
+      {...rest}
+      alignItems="center"
+      as={as}
+      display="flex"
+      gap={gap ?? space}
+      flexWrap="wrap"
+    >
+      {children}
+    </Box>
+  )
+}

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

@@ -0,0 +1,55 @@
+import {kbd, type RadiusStyleProps, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontTextSize} from '@sanity/ui/theme'
+
+import type {ComponentType, Props} from '../../types/props'
+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>) {
+  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/label/__workshop__/plain.tsx

@@ -0,0 +1,28 @@
+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() {
+  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS)
+  const muted = useBoolean('Muted', false)
+  const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS)
+  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/core/primitives/label/label.tsx

@@ -0,0 +1,77 @@
+import {
+  label,
+  type LabelStyleProps,
+  textOverflow,
+  type TextOverflowStyleProps,
+} from '@sanity/ui/css'
+
+import type {ComponentType, Props} from '../../types/props'
+
+/** @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>,
+) {
+  const {
+    accent,
+    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,
+        accent,
+        align,
+        muted,
+        size,
+        weight,
+      })}
+    >
+      <span
+        className={textOverflow({
+          textOverflow: textOverflowProp,
+        })}
+      >
+        {children}
+      </span>
+    </Element>
+  )
+}

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

@@ -0,0 +1,24 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/layer',
+  title: 'Layer',
+  stories: [
+    {
+      name: 'nested',
+      title: 'Nested',
+      component: lazy(() => import('./nested')),
+    },
+    {
+      name: 'multiple-roots',
+      title: 'Multiple roots',
+      component: lazy(() => import('./multipleRoots')),
+    },
+    {
+      name: 'responsive-z-offset',
+      title: 'Responsive z-offset',
+      component: lazy(() => import('./responsiveZOffset')),
+    },
+  ],
+})

package/src/core/primitives/layer/__workshop__/multipleRoots.tsx

@@ -0,0 +1,49 @@
+import {Card, Layer, LayerProvider, Stack} from '@sanity/ui'
+
+import {LayerDebugInfo} from './_debug'
+
+export default function MultipleRootsStory() {
+  return (
+    <Stack gap={4}>
+      <LayerProvider zOffset={100}>
+        <Card padding={3} shadow={1}>
+          <Stack gap={3}>
+            <LayerDebugInfo />
+            <Layer>
+              <Card padding={3} shadow={1}>
+                <Stack gap={3}>
+                  <LayerDebugInfo />
+                  <Layer>
+                    <Card padding={3} shadow={1}>
+                      <LayerDebugInfo />
+                    </Card>
+                  </Layer>
+                </Stack>
+              </Card>
+            </Layer>
+          </Stack>
+        </Card>
+      </LayerProvider>
+
+      <LayerProvider zOffset={200}>
+        <Card as={Layer} padding={3} shadow={5} style={{top: -50, left: 30}}>
+          <Stack gap={3}>
+            <LayerDebugInfo />
+            <Layer>
+              <Card padding={3} shadow={1}>
+                <Stack gap={3}>
+                  <LayerDebugInfo />
+                  <Layer>
+                    <Card padding={3} shadow={1}>
+                      <LayerDebugInfo />
+                    </Card>
+                  </Layer>
+                </Stack>
+              </Card>
+            </Layer>
+          </Stack>
+        </Card>
+      </LayerProvider>
+    </Stack>
+  )
+}

package/src/core/primitives/layer/__workshop__/nested.tsx

@@ -0,0 +1,98 @@
+import {CloseIcon} from '@sanity/icons'
+import {Box, Button, Card, Flex, Layer, LayerProvider, Stack, Text} from '@sanity/ui'
+import {useCallback, useState} from 'react'
+
+import {LayerDebugInfo} from './_debug'
+
+export default function PlainStory() {
+  return (
+    <Box padding={3}>
+      <Root />
+      <Root />
+      <Root />
+    </Box>
+  )
+}
+
+function Root() {
+  const [open, setOpen] = useState(false)
+  const handleOpen = useCallback(() => setOpen(true), [])
+  const handleClose = useCallback(() => setOpen(false), [])
+
+  return (
+    <LayerProvider>
+      <Card radius={2} shadow={1}>
+        <Box padding={3}>
+          <Text>
+            <strong>Root layer</strong>
+          </Text>
+        </Box>
+        <Box padding={3}>
+          <Stack gap={3}>
+            <LayerDebugInfo id="layer-debug-info-1" />
+            <Button id="open-layer-1" mode="ghost" onClick={handleOpen} text="Open layer 1" />
+            {open && (
+              <Layer style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+                <Layer1 onClose={handleClose} />
+              </Layer>
+            )}
+          </Stack>
+        </Box>
+      </Card>
+    </LayerProvider>
+  )
+}
+
+function Layer1({onClose}: {onClose: () => void}) {
+  const [open, setOpen] = useState(false)
+  const handleOpen = useCallback(() => setOpen(true), [])
+  const handleClose = useCallback(() => setOpen(false), [])
+
+  return (
+    <Card radius={2} shadow={3}>
+      <Flex>
+        <Box flex={1} padding={3}>
+          <Text>
+            <strong>Layer 1</strong>
+          </Text>
+        </Box>
+        <Box padding={1}>
+          <Button icon={CloseIcon} mode="bleed" onClick={onClose} padding={2} />
+        </Box>
+      </Flex>
+      <Box padding={3}>
+        <Stack gap={3}>
+          <LayerDebugInfo />
+          <Button id="open-layer-2" mode="ghost" onClick={handleOpen} text="Open layer 2" />
+          {open && (
+            <Layer style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+              <Layer2 onClose={handleClose} />
+            </Layer>
+          )}
+        </Stack>
+      </Box>
+    </Card>
+  )
+}
+
+function Layer2({onClose}: {onClose: () => void}) {
+  return (
+    <Card radius={2} shadow={3}>
+      <Flex>
+        <Box flex={1} padding={3}>
+          <Text>
+            <strong>Layer 2</strong>
+          </Text>
+        </Box>
+        <Box padding={1}>
+          <Button icon={CloseIcon} mode="bleed" onClick={onClose} padding={2} />
+        </Box>
+      </Flex>
+      <Box padding={3}>
+        <Stack gap={3}>
+          <LayerDebugInfo />
+        </Stack>
+      </Box>
+    </Card>
+  )
+}

package/src/core/primitives/layer/__workshop__/responsiveZOffset.tsx

@@ -0,0 +1,17 @@
+import {Layer} from '@sanity/ui'
+
+import {LayerDebugInfo} from './_debug'
+
+export default function ResponsiveZOffsetStory() {
+  return (
+    <Layer
+      id="responsive-layer"
+      padding={[1, 2, 3, 4, 5, 6, 7]}
+      sizing="border"
+      shadow={1}
+      zOffset={[1, 2, 3, 4, 5, 6, 7]}
+    >
+      <LayerDebugInfo />
+    </Layer>
+  )
+}

package/src/core/primitives/layer/getLayerContext.test.ts

@@ -0,0 +1,32 @@
+import {describe, expect, it} from 'vitest'
+
+import {getLayerContext} from './getLayerContext'
+import type {LayerContextValue} from './types'
+
+describe('getLayerContext', () => {
+  describe('0.0', () => {
+    it('should convert 0.0 to 0.0', () => {
+      const contextValue: LayerContextValue = {
+        version: 0.0,
+        isTopLayer: true,
+        level: 0,
+        registerChild: () => () => {
+          //
+        },
+        size: 0,
+        zIndex: 0,
+      }
+
+      const result = getLayerContext(contextValue)
+
+      expect(result).toEqual({
+        version: 0.0,
+        isTopLayer: true,
+        level: 0,
+        registerChild: expect.any(Function),
+        size: 0,
+        zIndex: 0,
+      })
+    })
+  })
+})

package/src/core/primitives/layer/getLayerContext.ts

@@ -0,0 +1,21 @@
+import {isRecord} from '../../lib/isRecord'
+import type {LayerContextValue} from './types'
+
+export function getLayerContext(contextValue: LayerContextValue): LayerContextValue {
+  // NOTE: This check is for future-compatiblity
+  // - If the value is not an object, it’s not compatible with the current version
+  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
+  if (!isRecord(contextValue) || contextValue.version !== 0.0) {
+    throw new Error('the context value is not compatible')
+  }
+
+  if (!contextValue) {
+    throw new Error('components using `useLayer()` should be wrapped in a <LayerProvider>.')
+  }
+
+  if (contextValue.version === 0.0) {
+    return contextValue
+  }
+
+  throw new Error('could not get layer context')
+}