@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/primitives/button/__workshop__/UploadButton.tsx

@@ -0,0 +1,28 @@
+import {UploadIcon} from '@sanity/icons'
+import {Button, Flex} from '@sanity/ui'
+import {useCallback, useRef} from 'react'
+
+export default function UploadButtonStory(): React.JSX.Element {
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      inputRef.current?.click()
+    }
+  }, [])
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button
+        as="label"
+        htmlFor="file"
+        icon={UploadIcon}
+        tabIndex={0}
+        text="Upload"
+        onKeyDown={handleKeyDown}
+      >
+        <input ref={inputRef} id="file" style={{display: 'none'}} type="file" />
+      </Button>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,61 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'primitives/button',
+  title: 'Button',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./Props')),
+    },
+    {
+      name: 'styled-1',
+      title: 'Styled #1',
+      component: lazy(() => import('./Styled1')),
+    },
+    {
+      name: 'stacked',
+      title: 'Stacked',
+      component: lazy(() => import('./Stacked')),
+    },
+    {
+      name: 'custom',
+      title: 'Custom',
+      component: lazy(() => import('./Custom')),
+    },
+    {
+      name: 'mixed-children',
+      title: 'Mixed children',
+      component: lazy(() => import('./MixedChildren')),
+    },
+    {
+      name: 'upload-button',
+      title: 'Upload button',
+      component: lazy(() => import('./UploadButton')),
+    },
+    {
+      name: 'custom-icons',
+      title: 'Custom icons',
+      component: lazy(() => import('./CustomIcons')),
+    },
+    {
+      name: 'disabled',
+      title: 'Disabled',
+      component: lazy(() => import('./Disabled')),
+    },
+    {
+      name: 'text-overflow',
+      title: 'Text overflow',
+      component: lazy(() => import('./TextOverflow')),
+    },
+    {
+      name: 'data-props',
+      title: 'Data props',
+      component: lazy(() => import('./DataProps')),
+    },
+  ],
+}
+
+export default scope

package/src/primitives/button/types.ts

@@ -0,0 +1,2 @@
+/** @public */
+export type ButtonTextAlign = 'left' | 'right' | 'center'

package/src/primitives/card/Card.tsx

@@ -0,0 +1,124 @@
+import {card, CARD_STYLE_PROP_KEYS, type CardStyleProps} from '@sanity/ui-css'
+import type {CardTone} from '@sanity/ui-tokens'
+import {use} from 'react'
+
+import {_splitKeys} from '../../core/_keys'
+import type {Props} from '../../core/types'
+import type {BoxElementType} from '../box/Box'
+import {CardInternalContext} from './CardInternalContext'
+import {CardInternalProvider} from './CardInternalProvider'
+import {CardProvider} from './CardProvider'
+import {useCard} from './useCard'
+
+/** @public */
+export const DEFAULT_CARD_ELEMENT = 'div'
+
+/** @public */
+export interface CardOwnProps extends Omit<CardStyleProps, 'tone'> {
+  /**
+   * Do not use in production.
+   * @beta
+   * @deprecated Use `__unstable_pattern` instead.
+   */
+  __unstable_checkered?: boolean
+  /**
+   * Do not use in production.
+   * @beta
+   */
+  __unstable_focusRing?: boolean
+  disabled?: boolean
+  pressed?: boolean
+  selected?: boolean
+  target?: string
+  tone?: CardTone | 'inherit'
+}
+
+/** @public */
+export type CardElementType = BoxElementType
+
+/** @public */
+export type CardProps<E extends CardElementType = CardElementType> = Props<CardOwnProps, E>
+
+/**
+ * The `Card` component acts much like a `Box`, but with a background and foreground color.
+ * Components within a `Card` inherit its colors.
+ *
+ * @public
+ */
+export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
+  props: CardProps<E>,
+): React.JSX.Element {
+  const [
+    {
+      scheme: schemeProp,
+      tone: toneProp = 'inherit',
+      // split style props
+      ...styleProps
+    },
+    // split DOM props
+    domProps,
+  ] = _splitKeys(props as CardProps<typeof DEFAULT_CARD_ELEMENT>, CARD_STYLE_PROP_KEYS)
+
+  const {
+    __unstable_checkered: checkered = false,
+    __unstable_focusRing: focusRing = false,
+    as: As = DEFAULT_CARD_ELEMENT,
+
+    pressed,
+
+    selected,
+    ...restDomProps
+  } = domProps
+
+  const context = useCard()
+  const internalContext = use(CardInternalContext)
+  const tone = toneProp === 'inherit' ? context?.tone : toneProp
+  const scheme = schemeProp ?? context?.scheme
+
+  const styleTone = tone === context.tone && !internalContext?.root ? undefined : tone
+  const styleScheme = scheme === context.scheme && !internalContext?.root ? undefined : scheme
+
+  let node = (
+    <As
+      data-ui="Card"
+      {...restDomProps}
+      className={card({
+        ...styleProps,
+        __unstable_pattern: styleProps.__unstable_pattern ?? (checkered ? 'checkered' : undefined),
+        // If the style scheme is different from the context scheme, then set the tone
+        tone: styleScheme ? tone : styleTone,
+        scheme: styleScheme,
+      })}
+      // Extract the disabled prop without removing it from `...rest` so that the underlying
+      // <button> or <a> has `[data-disabled]` when needed
+      data-disabled={props.disabled ? '' : props['data-disabled']}
+      data-focus-ring={focusRing ? '' : props['data-focus-ring']}
+      data-pressed={pressed ? '' : props['data-pressed']}
+      data-selected={selected ? '' : props['data-selected']}
+    />
+  )
+
+  if (scheme === context.scheme && tone === context.tone) {
+    return node
+  }
+
+  node = (
+    <CardInternalProvider CompatProvider={internalContext?.CompatProvider}>
+      <CardProvider scheme={scheme ?? 'light'} tone={tone ?? 'default'}>
+        {node}
+      </CardProvider>
+    </CardInternalProvider>
+  )
+
+  if (internalContext?.CompatProvider) {
+    const CompatProvider = internalContext.CompatProvider
+
+    return (
+      <CompatProvider scheme={scheme ?? 'light'} tone={tone ?? context.tone}>
+        {node}
+      </CompatProvider>
+    )
+  }
+
+  return node
+}

package/src/primitives/card/CardContext.ts

@@ -0,0 +1,10 @@
+import type {Context} from 'react'
+
+import {createGlobalScopedContext} from '../../core/lib/createGlobalScopedContext'
+import type {CardContextValue} from './types'
+
+/**
+ * @internal
+ */
+export const CardContext: Context<CardContextValue | null> =
+  createGlobalScopedContext<CardContextValue | null>('@sanity/ui/v4/card', null)

package/src/primitives/card/CardInternalContext.ts

@@ -0,0 +1,10 @@
+import type {Context} from 'react'
+
+import {createGlobalScopedContext} from '../../core/lib/createGlobalScopedContext'
+import type {_CardInternalContextValue} from './types'
+
+/**
+ * @internal
+ */
+export const CardInternalContext: Context<_CardInternalContextValue | null> =
+  createGlobalScopedContext<_CardInternalContextValue | null>('@sanity/ui/v4/card-internal', null)

package/src/primitives/card/CardInternalProvider.tsx

@@ -0,0 +1,15 @@
+import {type ReactNode} from 'react'
+
+import {CardInternalContext} from './CardInternalContext'
+import type {_CardCompatProviderComponent} from './types'
+
+/** @internal */
+export function CardInternalProvider(props: {
+  children?: ReactNode
+  CompatProvider?: _CardCompatProviderComponent
+  root?: boolean
+}): React.JSX.Element {
+  const {children, root = false, CompatProvider} = props
+
+  return <CardInternalContext value={{root, CompatProvider}}>{children}</CardInternalContext>
+}

package/src/primitives/card/CardProvider.tsx

@@ -0,0 +1,16 @@
+import type {CardTone, ColorScheme} from '@sanity/ui-tokens'
+import {type ReactNode} from 'react'
+
+import {CardContext} from './CardContext'
+import type {_CardCompatProviderComponent} from './types'
+
+/** @public */
+export function CardProvider(props: {
+  children?: ReactNode
+  tone: CardTone
+  scheme: ColorScheme
+}): React.JSX.Element {
+  const {children, tone, scheme} = props
+
+  return <CardContext value={{tone, scheme}}>{children}</CardContext>
+}

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

@@ -0,0 +1,104 @@
+import {Box, Card, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
+import {CARD_TONES} from '@sanity/ui/tokens'
+
+export default function AsButtonStory(): React.JSX.Element {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Container>
+        <Grid gap={1} gridTemplateColumns={3}>
+          <Box>
+            <Text align="center" size={1} weight="medium">
+              Enabled
+            </Text>
+            <Stack gap={1} marginTop={3}>
+              {CARD_TONES.map((tone) => (
+                <Card
+                  key={tone}
+                  __unstable_focusRing
+                  as="button"
+                  padding={3}
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack gap={3}>
+                    <Text size={1} weight="medium">
+                      {tone}
+                    </Text>
+                    <Text muted size={1}>
+                      Muted
+                    </Text>
+                    <Text size={1}>
+                      <code>Code</code>
+                    </Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </Box>
+
+          <Box>
+            <Text align="center" size={1} weight="medium">
+              Disabled
+            </Text>
+            <Stack gap={1} marginTop={3}>
+              {CARD_TONES.map((tone) => (
+                <Card
+                  key={tone}
+                  __unstable_focusRing
+                  as="button"
+                  disabled
+                  padding={3}
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack gap={3}>
+                    <Text size={1} weight="medium">
+                      {tone}
+                    </Text>
+                    <Text muted size={1}>
+                      Muted
+                    </Text>
+                    <Text size={1}>
+                      <code>Code</code>
+                    </Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </Box>
+
+          <Box>
+            <Text align="center" size={1} weight="medium">
+              Selected
+            </Text>
+            <Stack gap={1} marginTop={3}>
+              {CARD_TONES.map((tone) => (
+                <Card
+                  key={tone}
+                  __unstable_focusRing
+                  as="button"
+                  padding={3}
+                  selected
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack gap={3}>
+                    <Text size={1} weight="medium">
+                      {tone}
+                    </Text>
+                    <Text muted size={1}>
+                      Muted
+                    </Text>
+                    <Text size={1}>
+                      <code>Code</code>
+                    </Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </Box>
+        </Grid>
+      </Container>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,25 @@
+import {Card, Flex, Text} from '@sanity/ui'
+
+function CustomLink(
+  props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
+): React.JSX.Element {
+  const {children, req, ...rest} = props
+
+  return (
+    <a data-required={req} {...rest}>
+      {children}
+    </a>
+  )
+}
+
+export default function AsComponentStory(): React.JSX.Element {
+  const props = {href: '#'}
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Card as={CustomLink} data-as="a" {...props} padding={3} req="1">
+        <Text size={1}>As component</Text>
+      </Card>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,26 @@
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {CARD_TONES} from '@sanity/ui/tokens'
+
+export default function CheckeredStory(): 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
+            key={tone}
+            __unstable_checkered
+            border
+            padding={3}
+            sizing="border"
+            style={{width: 120, height: 60}}
+            tone={tone}
+          >
+            <Text muted size={1}>
+              {tone}
+            </Text>
+          </Card>
+        ))}
+      </Stack>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,25 @@
+import {Card, Text} from '@sanity/ui'
+
+import {CardWrapper} from '$workshop'
+
+export default function DataPropsStory(): React.JSX.Element {
+  return (
+    <CardWrapper gap={1}>
+      <Card as="button" data-enabled="" padding={3} radius={4}>
+        <Text size={1}>Card</Text>
+      </Card>
+      <Card as="button" data-hovered="" padding={3} radius={4}>
+        <Text size={1}>Card</Text>
+      </Card>
+      <Card as="button" data-pressed="" padding={3} radius={4}>
+        <Text size={1}>Card</Text>
+      </Card>
+      <Card as="button" data-selected="" padding={3} radius={4}>
+        <Text size={1}>Card</Text>
+      </Card>
+      <Card as="button" data-disabled="" padding={3} radius={4}>
+        <Text size={1}>Card</Text>
+      </Card>
+    </CardWrapper>
+  )
+}

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

@@ -0,0 +1,29 @@
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+export default function InteractiveCardStory(): React.JSX.Element {
+  const pressed = useBoolean('Pressed', false)
+  const selected = useBoolean('Selected', false)
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <div>
+        <Card
+          __unstable_focusRing
+          as="button"
+          padding={3}
+          pressed={pressed}
+          selected={selected}
+          tabIndex={0}
+        >
+          <Stack gap={3}>
+            <Text>
+              Text <code>Code</code>
+            </Text>
+            <Text muted>Muted</Text>
+          </Stack>
+        </Card>
+      </div>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,78 @@
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+
+export default function ListNavigationStory(): React.JSX.Element {
+  return (
+    <Box height="fill" padding={[3, 4, 5]} sizing="border">
+      <Card height="fill" shadow={1}>
+        <Flex height="fill">
+          <Card flex={1} padding={2}>
+            <List1 />
+          </Card>
+          <Card borderLeft flex={1} padding={2}>
+            <List2 />
+          </Card>
+        </Flex>
+      </Card>
+    </Box>
+  )
+}
+
+function List1() {
+  return (
+    <Stack gap={1}>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} pressed radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+    </Stack>
+  )
+}
+
+function List2() {
+  return (
+    <Stack gap={1}>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} pressed radius={2} selected>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+    </Stack>
+  )
+}
+
+function Preview() {
+  return (
+    <Flex align="center" gap={2}>
+      <Box muted radius="full" style={{width: 33, height: 33}} />
+      <Stack flex={1} gap={2}>
+        <Text size={1} weight="medium">
+          Preview
+        </Text>
+        <Text muted size={1}>
+          Preview
+        </Text>
+      </Stack>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,49 @@
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {BG_PATTERNS, BORDER_WIDTH, CARD_TONES, RADIUS, SHADOW, SPACE} from '@sanity/ui/tokens'
+import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_CARD_AS_OPTIONS} from '$workshop'
+
+export default function PropsStory(): React.JSX.Element {
+  const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div')
+  const border = useBoolean('Border', false)
+  const borderWidth = useSelect('Border Width', BORDER_WIDTH, 0)
+  const muted = useBoolean('Muted', false)
+  const padding = useSelect('Padding', SPACE, 3)
+  const pattern = useSelect('Pattern', BG_PATTERNS, undefined)
+  const pressed = useBoolean('Pressed', false)
+  const radius = useSelect('Radius', RADIUS, 0)
+  const selected = useBoolean('Selected', false)
+  const shadow = useSelect('Shadow', SHADOW, 0)
+  const tone = useSelect('Tone', CARD_TONES, 'default')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Card
+        __unstable_pattern={pattern}
+        as={as}
+        border={border}
+        borderWidth={borderWidth}
+        muted={muted}
+        padding={padding}
+        pressed={pressed}
+        radius={radius}
+        selected={selected}
+        shadow={shadow}
+        tone={tone}
+        onClick={useAction('onClick')}
+      >
+        <Stack gap={3}>
+          <Text size={1}>
+            Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
+            <code>shadow={shadow}</code>.
+          </Text>
+          <Text size={1}>
+            Text with {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+            <a href="#">link</a>.
+          </Text>
+        </Stack>
+      </Card>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,62 @@
+import {EditIcon, PublishIcon} from '@sanity/icons'
+import {Box, Card, Container, Flex, Inline, Stack, Text} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+export default function SelectedStory(): React.JSX.Element {
+  const disabled = useBoolean('Disabled', false)
+  const selected = useBoolean('Selected', false)
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Container width={0}>
+        <Stack gap={1}>
+          <Card
+            __unstable_focusRing
+            as="button"
+            disabled={disabled}
+            padding={3}
+            radius={2}
+            selected={selected}
+          >
+            <Preview selected={selected} />
+          </Card>
+
+          <Card
+            __unstable_focusRing
+            as="button"
+            disabled={disabled}
+            padding={3}
+            radius={2}
+            selected={selected}
+            tone="critical"
+          >
+            <Preview selected={selected} />
+          </Card>
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}
+
+function Preview({selected}: {selected: boolean | undefined}) {
+  return (
+    <Flex>
+      <Box flex={1}>
+        <Text size={1}>Title</Text>
+      </Box>
+      <Inline gap={3}>
+        <Text data-selected={selected ? '' : undefined} muted size={1} weight="medium">
+          <EditIcon />
+        </Text>
+        <Text
+          data-selected={selected ? '' : undefined}
+          muted
+          size={1}
+          // $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
+        >
+          <PublishIcon />
+        </Text>
+      </Inline>
+    </Flex>
+  )
+}