@sanity/ui 3.0.0-static.1 → 3.0.0-static.11

package/src/ui/primitives/card/__workshop__/selected.tsx

@@ -0,0 +1,93 @@
+import {EditIcon, PublishIcon} from '@sanity/icons'
+import {Box, Card, Container, Flex, Inline, Stack, Text, useRootTheme} from '@sanity/ui'
+import {getTheme_v2, Theme, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {useBoolean} from '@sanity/ui-workshop'
+import {css, styled} from 'styled-components'
+
+const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((props: {
+  $tone: ThemeColorStateToneKey
+  theme: Theme
+}) => {
+  const {$tone} = props
+  const {color} = getTheme_v2(props.theme)
+  const tone = color.button.default[$tone]
+
+  return css`
+    &:not([data-selected]) {
+      --card-fg-color: ${tone.enabled.bg};
+      --card-muted-fg-color: ${tone.enabled.bg};
+    }
+
+    [data-ui='Card']:disabled & {
+      --card-fg-color: inherit;
+      --card-muted-fg-color: inherit;
+    }
+  `
+})
+
+export default function SelectedStory() {
+  const disabled = useBoolean('Disabled', false) || false
+  const selected = useBoolean('Selected', false) || false
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Container width={0}>
+        <Stack space={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}) {
+  const rootTheme = useRootTheme()
+
+  return (
+    <Flex>
+      <Box flex={1}>
+        <Text size={1}>Title</Text>
+      </Box>
+      <Inline space={3}>
+        <TextWithTone
+          data-selected={selected ? '' : undefined}
+          muted
+          size={1}
+          weight="medium"
+          $tone={rootTheme.tone === 'default' ? 'caution' : 'default'}
+        >
+          <EditIcon />
+        </TextWithTone>
+        <TextWithTone
+          data-selected={selected ? '' : undefined}
+          muted
+          size={1}
+          $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
+        >
+          <PublishIcon />
+        </TextWithTone>
+      </Inline>
+    </Flex>
+  )
+}

package/src/ui/primitives/card/card.tsx

@@ -0,0 +1,118 @@
+import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
+import {createElement, ForwardedRef, forwardRef} from 'react'
+import {isValidElementType} from 'react-is'
+
+import {Props} from '../../types'
+import {Box, BoxProps} from '../box'
+import {CardProvider} from './cardProvider'
+import {useCard} from './useCard'
+
+/**
+ * @public
+ */
+export interface CardProps extends BoxProps, CardStyleProps {
+  /**
+   * Do not use in production.
+   * @beta
+   */
+  __unstable_checkered?: boolean
+  /**
+   * Do not use in production.
+   * @beta
+   */
+  __unstable_focusRing?: boolean
+  disabled?: boolean
+  href?: string
+  pressed?: boolean
+  selected?: boolean
+  target?: string
+}
+
+/**
+ * The `Card` component acts much like a `Box`, but with a background and foreground color.
+ * Components within a `Card` inherit its colors.
+ *
+ * @public
+ */
+export const Card = forwardRef(function Card(
+  props: Props<CardProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    __unstable_checkered: checkered = false,
+    __unstable_focusRing: focusRing = false,
+    as: asProp,
+    className,
+    pressed,
+    radius = 0,
+    scheme: schemeProp,
+    // selectable,
+    selected,
+    shadow,
+    style,
+    tone: toneProp = 'default',
+    ...restProps
+  } = props
+
+  const as = isValidElementType(asProp) ? asProp : 'div'
+
+  const parent = useCard()
+
+  const context = {
+    tone: parent?.tone ?? 'default',
+    scheme: parent?.scheme ?? 'light',
+  }
+
+  const tone = toneProp === 'inherit' ? context.tone : toneProp
+  const scheme = schemeProp === undefined ? context.scheme : schemeProp
+
+  let node = (
+    <Box
+      data-ui="Card"
+      {...restProps}
+      as={as}
+      className={composeClassNames(
+        className,
+        card({
+          scheme: scheme === context.scheme ? undefined : scheme,
+          shadow,
+          tone,
+        }),
+      )}
+      data-checkered={checkered ? '' : undefined}
+      data-focus-ring={focusRing ? '' : undefined}
+      data-pressed={pressed ? '' : undefined}
+      data-selected={selected ? '' : undefined}
+      radius={radius}
+      ref={ref}
+      style={style}
+    />
+  )
+
+  if (scheme === context.scheme && tone === context.tone) {
+    return node
+  }
+
+  node = (
+    <CardProvider
+      compat_provider={parent?.compat_provider}
+      rendered={true}
+      scheme={scheme}
+      tone={tone ?? context.tone}
+    >
+      {node}
+    </CardProvider>
+  )
+
+  if (parent?.compat_provider) {
+    return createElement(parent.compat_provider, {
+      children: node,
+      scheme,
+      tone: tone ?? context.tone,
+    })
+  }
+
+  return node
+})
+
+Card.displayName = 'ForwardRef(Card)'

package/src/ui/primitives/card/cardContext.ts

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

package/src/ui/primitives/card/cardProvider.tsx

@@ -0,0 +1,19 @@
+import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {ReactNode, useMemo} from 'react'
+
+import {CardContext} from './cardContext'
+import {CardCompatProviderComponent} from './types'
+
+export function CardProvider(props: {
+  compat_provider?: CardCompatProviderComponent
+  children?: ReactNode
+  rendered?: boolean
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey
+}) {
+  const {children, rendered = false, tone, scheme} = props
+
+  const context = useMemo(() => ({rendered, tone, scheme}), [rendered, tone, scheme])
+
+  return <CardContext.Provider value={context}>{children}</CardContext.Provider>
+}

package/src/ui/primitives/card/index.ts

@@ -0,0 +1,4 @@
+export * from './card'
+export * from './cardProvider'
+export * from './types'
+export * from './useCard'

package/src/ui/primitives/card/types.ts

@@ -0,0 +1,27 @@
+import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {ComponentType, ReactNode} from 'react'
+
+/**
+ * @internal
+ * @deprecated Use `CardStyleProps` from `@sanity/ui/css` instead.
+ */
+export interface CardStyleProps {
+  $checkered: boolean
+  $focusRing: boolean
+  $muted: boolean
+  $tone: ThemeColorCardToneKey
+}
+
+export type CardCompatProviderComponent = ComponentType<{
+  children?: ReactNode
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey
+}>
+
+/** @internal */
+export interface CardContextValue {
+  compat_provider?: CardCompatProviderComponent
+  rendered: boolean
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey
+}

package/src/ui/primitives/card/useCard.ts

@@ -0,0 +1,7 @@
+import {useContext} from 'react'
+
+import {CardContext} from './cardContext'
+
+export function useCard() {
+  return useContext(CardContext)
+}

package/src/ui/primitives/checkbox/__workshop__/tones.tsx

@@ -0,0 +1,28 @@
+import {Card, Checkbox, Flex, Stack} from '@sanity/ui'
+
+export default function MultipleTonesStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Stack>
+        <Card padding={3} tone="neutral">
+          <Checkbox />
+        </Card>
+        <Card padding={3} tone="primary">
+          <Checkbox />
+        </Card>
+        <Card padding={3} tone="suggest">
+          <Checkbox />
+        </Card>
+        <Card padding={3} tone="positive">
+          <Checkbox />
+        </Card>
+        <Card padding={3} tone="caution">
+          <Checkbox />
+        </Card>
+        <Card padding={3} tone="critical">
+          <Checkbox />
+        </Card>
+      </Stack>
+    </Flex>
+  )
+}

package/src/ui/primitives/checkbox/checkbox.tsx

@@ -0,0 +1,74 @@
+import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
+import {checkbox, checkboxInput, composeClassNames} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
+
+import {useCustomValidity} from '../../hooks'
+import {Props} from '../../types'
+
+/**
+ * @public
+ */
+export interface CheckboxProps {
+  indeterminate?: boolean
+  customValidity?: string
+}
+
+/**
+ * Checkboxes allow the user to select one or more items from a set.
+ *
+ * @public
+ */
+export const Checkbox = forwardRef(function Checkbox(
+  props: Props<CheckboxProps, 'input'>,
+  forwardedRef: ForwardedRef<HTMLInputElement>,
+) {
+  const {
+    checked,
+    className,
+    disabled,
+    indeterminate,
+    customValidity,
+    readOnly,
+    style,
+    ...restProps
+  } = props
+
+  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={composeClassNames(className, checkbox())} data-ui="Checkbox" style={style}>
+      <input
+        {...restProps}
+        checked={checked}
+        className={composeClassNames(className, checkboxInput())}
+        data-disabled={disabled ? '' : undefined}
+        data-read-only={!disabled && readOnly ? '' : undefined}
+        data-error={customValidity ? '' : undefined}
+        disabled={disabled || readOnly}
+        type="checkbox"
+        readOnly={readOnly}
+        ref={ref}
+      />
+      <span>
+        <CheckmarkIcon />
+        <RemoveIcon />
+      </span>
+    </span>
+  )
+})
+
+Checkbox.displayName = 'ForwardRef(Checkbox)'

package/src/ui/primitives/code/__workshop__/props.tsx

@@ -0,0 +1,21 @@
+import {Box, Code} from '@sanity/ui'
+import {useSelect, useText} from '@sanity/ui-workshop'
+
+import {
+  WORKSHOP_CODE_LANGUAGE_OPTIONS,
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '../../../../../workshop/constants'
+
+export default function PropsStory() {
+  const code = useText('Code', `console.log('Hello, world')`, 'Props')
+  const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript', 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1, 'Props')
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Code language={language} size={size}>
+        {code}
+      </Code>
+    </Box>
+  )
+}

package/src/ui/primitives/code/code.tsx

@@ -0,0 +1,49 @@
+import {code, composeClassNames, FontStyleProps} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef, lazy, Suspense} from 'react'
+
+import {Props} from '../../types'
+
+const LazyRefractor = lazy(() => import('./refractor'))
+
+/**
+ * @public
+ */
+export interface CodeProps extends Omit<FontStyleProps, 'align'> {
+  /** Define the language to use for syntax highlighting. */
+  language?: string
+  size?: number | number[]
+}
+
+/**
+ * @public
+ */
+export const Code = forwardRef(function Code(
+  props: Props<CodeProps, 'pre'>,
+  ref: ForwardedRef<HTMLPreElement>,
+) {
+  const {
+    as: As = 'pre',
+    children,
+    className,
+    language: languageProp,
+    size = 2,
+    weight,
+    ...restProps
+  } = props
+  const language = typeof languageProp === 'string' ? languageProp : undefined
+
+  return (
+    <As
+      data-ui="Code"
+      {...restProps}
+      className={composeClassNames(className, code({size, weight}))}
+      ref={ref}
+    >
+      <Suspense fallback={<code>{children}</code>}>
+        <LazyRefractor language={language} value={children} />
+      </Suspense>
+    </As>
+  )
+})
+
+Code.displayName = 'ForwardRef(Code)'

package/src/ui/primitives/code/refractor.tsx

@@ -0,0 +1,20 @@
+import Refractor from 'react-refractor'
+
+export default function LazyRefractor(
+  props: Partial<Pick<React.ComponentProps<typeof Refractor>, 'language'>> & {
+    value: React.ReactNode
+  },
+) {
+  const {language: languageProp, value} = props
+  const language = typeof languageProp === 'string' ? languageProp : undefined
+  const registered = language ? Refractor.hasLanguage(language as any) : false
+
+  return (
+    <>
+      {!(language && registered) && <code>{value}</code>}
+      {language && registered && <Refractor inline language={language} value={String(value)} />}
+    </>
+  )
+}
+
+LazyRefractor.displayName = 'LazyRefractor'

package/src/ui/primitives/container/__workshop__/example.tsx

@@ -0,0 +1,20 @@
+import {Card, Container, Flex, Text} from '@sanity/ui'
+import {useAction, useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '../../../../../workshop/constants'
+
+export default function PlainStory() {
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0, 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container onClick={useAction('onClick')} width={width}>
+        <Card padding={4} shadow={1}>
+          <Text size={1}>
+            Container with <code>max-width={width}</code>
+          </Text>
+        </Card>
+      </Container>
+    </Flex>
+  )
+}

package/src/ui/primitives/container/container.tsx

@@ -0,0 +1,35 @@
+import {composeClassNames, container, ContainerStyleProps} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
+import {Box, BoxProps} from '../box'
+
+/**
+ * @public
+ */
+export interface ContainerProps extends Omit<BoxProps, 'width'>, ContainerStyleProps {}
+
+/**
+ * The `Container` component wraps content layout in a defined set of widths.
+ *
+ * @public
+ */
+export const Container = forwardRef(function Container(
+  props: Props<ContainerProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const {as, className, sizing = 'border', width = 2, ...restProps} = props
+
+  return (
+    <Box
+      data-ui="Container"
+      {...restProps}
+      as={as}
+      className={composeClassNames(className, container({width}))}
+      ref={ref}
+      sizing={sizing}
+    />
+  )
+})
+
+Container.displayName = 'ForwardRef(Container)'

package/src/ui/primitives/flex/__workshop__/example.tsx

@@ -0,0 +1,34 @@
+import {Card, Code, Flex} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+import {styled} from 'styled-components'
+
+import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../../../workshop/constants'
+
+const DebugCard = styled(Card)`
+  outline: 1px solid red;
+  &:not([hidden]) {
+    display: flex;
+  }
+  align-items: center;
+  justify-content: center;
+`
+
+export default function ExampleStory() {
+  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row', 'Props')
+
+  return (
+    <Flex direction={direction} height="fill" style={{width: '100%'}}>
+      <DebugCard flex={1}>
+        <Code size={1}>1</Code>
+      </DebugCard>
+
+      <DebugCard flex={[1, 2, 3]}>
+        <Code size={1}>[1,2,3]</Code>
+      </DebugCard>
+
+      <DebugCard flex={['none', 'none', 1]}>
+        <Code size={1}>['none', 'none', 1]</Code>
+      </DebugCard>
+    </Flex>
+  )
+}

package/src/ui/primitives/flex/__workshop__/gap.tsx

@@ -0,0 +1,25 @@
+import {Card, Flex, Text} from '@sanity/ui'
+
+export default function GapStory() {
+  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/ui/primitives/flex/flex.tsx

@@ -0,0 +1,29 @@
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
+import {Box, BoxProps} from '../box'
+
+/**
+ * @public
+ */
+export interface FlexProps extends Omit<BoxProps, 'display'> {
+  htmlFor?: string
+}
+
+/**
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+ *
+ * @public
+ */
+export const Flex = forwardRef(function Flex(
+  props: Props<FlexProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const {as, direction = 'row', ...restProps} = props
+
+  return (
+    <Box data-ui="Flex" {...restProps} as={as} direction={direction} display="flex" ref={ref} />
+  )
+})
+
+Flex.displayName = 'ForwardRef(Flex)'

package/src/ui/primitives/grid/__workshop__/responsive.tsx

@@ -0,0 +1,54 @@
+import {Card, Code, Container, Flex, Grid} from '@sanity/ui'
+
+export default function ResponsiveStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container width="auto">
+        <Grid
+          id="responsive-grid"
+          columns={[1, 2, 3, 4, 5, 6, 7]}
+          gap={[0, 1, 2, 3, 4, 5, 6]}
+          rows={[1, 2, 3, 4, 5, 6, 7]}
+          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>
+  )
+}