@sanity/ui 3.1.13 → 4.0.0-beta.0

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

@@ -0,0 +1,11 @@
+import {Card, Flex, Text} from '@sanity/ui'
+
+export default function StyledCardStory(): React.JSX.Element {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Card as="ol">
+        <Text as="li">Styled</Text>
+      </Card>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,27 @@
+import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
+import {CARD_TONES} from '@sanity/ui/tokens'
+
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,27 @@
+import {Card, Checkbox, Flex, Stack, Text} from '@sanity/ui'
+import {CARD_TONES} from '@sanity/ui/tokens'
+
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,26 @@
+import {CropIcon} from '@sanity/icons'
+import {Box, Code, Stack} from '@sanity/ui'
+import {FONT_CODE_SIZE} from '@sanity/ui/tokens'
+
+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

@@ -0,0 +1,19 @@
+import {Box, Code} from '@sanity/ui'
+import {FONT_CODE_SIZE} from '@sanity/ui/tokens'
+import {useSelect, useText} from '@sanity/ui-workshop'
+
+import {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 (
+    <Box padding={[4, 5, 6]}>
+      <Code language={language} size={size}>
+        {code}
+      </Code>
+    </Box>
+  )
+}

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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,17 @@
+import {Container, Flex, Text} from '@sanity/ui'
+import {CONTAINER_SCALE} from '@sanity/ui/tokens'
+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

@@ -0,0 +1,16 @@
+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/flex/Flex.tsx

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,38 @@
+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)} />
+}