@sanity/ui 3.0.0-static.8 → 3.0.0

package/src/core/primitives/card/card.tsx

@@ -0,0 +1,116 @@
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {forwardRef} from 'react'
+import {isValidElementType} from 'react-is'
+import {styled} from 'styled-components'
+
+import {useArrayProp} from '../../hooks'
+import {
+  responsiveBorderStyle,
+  ResponsiveBorderStyleProps,
+  responsiveRadiusStyle,
+  ResponsiveRadiusStyleProps,
+  responsiveShadowStyle,
+  ResponsiveShadowStyleProps,
+} from '../../styles/internal'
+import {ThemeColorProvider, useRootTheme} from '../../theme'
+import {CardTone} from '../../types'
+import {Box, BoxProps} from '../box'
+import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
+import {cardStyle} from './styles'
+import {CardStyleProps} from './types'
+
+/**
+ * @public
+ */
+export interface CardProps
+  extends BoxProps,
+    ResponsiveBorderProps,
+    ResponsiveRadiusProps,
+    ResponsiveShadowProps {
+  /**
+   * Do not use in production.
+   * @beta
+   */
+  __unstable_checkered?: boolean
+  /**
+   * Do not use in production.
+   * @beta
+   */
+  __unstable_focusRing?: boolean
+  muted?: boolean
+  pressed?: boolean
+  scheme?: ThemeColorSchemeKey
+  tone?: CardTone
+}
+
+const StyledCard = styled(Box)<
+  CardStyleProps &
+    ResponsiveRadiusStyleProps &
+    ResponsiveBorderStyleProps &
+    ResponsiveShadowStyleProps
+>(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
+
+/**
+ * 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: CardProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    __unstable_checkered: checkered = false,
+    __unstable_focusRing: focusRing = false,
+    as: asProp,
+    border,
+    borderTop,
+    borderRight,
+    borderBottom,
+    borderLeft,
+    muted,
+    pressed,
+    radius = 0,
+    scheme,
+    selected,
+    shadow,
+    tone: toneProp = 'default',
+    ...restProps
+  } = props
+
+  const as = isValidElementType(asProp) ? asProp : 'div'
+  const rootTheme = useRootTheme()
+  const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
+
+  // todo: Consider adding the wrapper approach for nested cards in which the tones are not changing, avoid unnecessary ThemeColorProvider
+  return (
+    <ThemeColorProvider scheme={scheme} tone={tone}>
+      <StyledCard
+        data-as={typeof as === 'string' ? as : undefined}
+        data-scheme={rootTheme.scheme}
+        data-ui="Card"
+        data-tone={tone}
+        {...restProps}
+        $border={useArrayProp(border)}
+        $borderTop={useArrayProp(borderTop)}
+        $borderRight={useArrayProp(borderRight)}
+        $borderBottom={useArrayProp(borderBottom)}
+        $borderLeft={useArrayProp(borderLeft)}
+        $checkered={checkered}
+        $focusRing={focusRing}
+        $muted={muted}
+        $radius={useArrayProp(radius)}
+        $shadow={useArrayProp(shadow)}
+        $tone={tone}
+        data-checkered={checkered ? '' : undefined}
+        data-pressed={pressed ? '' : undefined}
+        data-selected={selected ? '' : undefined}
+        forwardedAs={as}
+        ref={ref}
+        selected={selected}
+      />
+    </ThemeColorProvider>
+  )
+})
+Card.displayName = 'ForwardRef(Card)'

package/src/core/primitives/card/styles.ts

@@ -0,0 +1,147 @@
+import {getTheme_v2} from '@sanity/ui/theme'
+import {css} from 'styled-components'
+
+import {ThemeProps} from '../../styles'
+import {_cardColorStyle} from '../../styles/card'
+import {focusRingStyle} from '../../styles/focusRing'
+import {CardStyleProps} from './types'
+
+export function cardStyle(
+  props: CardStyleProps & ThemeProps,
+): Array<ReturnType<typeof css> | (() => ReturnType<typeof css>)> {
+  return [cardBaseStyle(props), cardColorStyle(props)]
+}
+
+export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
+  const {$checkered} = props
+  const {space} = getTheme_v2(props.theme)
+
+  return css`
+    ${$checkered &&
+    css`
+      background-size: ${space[3]}px ${space[3]}px;
+      background-position: 50% 50%;
+      background-image: var(--card-bg-image);
+    `}
+
+    &[data-as='button'] {
+      -webkit-font-smoothing: inherit;
+      appearance: none;
+      outline: none;
+      font: inherit;
+      text-align: inherit;
+      border: 0;
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+    }
+
+    /* &:is(a) */
+    &[data-as='a'] {
+      outline: none;
+      text-decoration: none;
+    }
+
+    /* &:is(pre) */
+    &[data-as='pre'] {
+      font: inherit;
+    }
+  `
+}
+
+export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
+  const {$checkered, $focusRing, $muted} = props
+  const {card, color, style} = getTheme_v2(props.theme)
+  const border = {width: card.border.width, color: 'var(--card-border-color)'}
+
+  return css`
+    color-scheme: ${color._dark ? 'dark' : 'light'};
+
+    ${_cardColorStyle(color, color, $checkered)}
+
+    background-color: ${$muted ? 'var(--card-muted-bg-color)' : 'var(--card-bg-color)'};
+    color: var(--card-fg-color);
+
+    /* &:is(button) */
+    &[data-as='button'] {
+      --card-focus-ring-box-shadow: none;
+
+      cursor: default;
+      box-shadow: var(--card-focus-ring-box-shadow);
+
+      &:disabled {
+        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
+      }
+
+      &:not(:disabled) {
+        &[data-pressed] {
+          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+        }
+
+        &[data-selected] {
+          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-pressed]):not([data-selected]) {
+            &[data-hovered],
+            &:hover {
+              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
+            }
+
+            &:active {
+              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+            }
+          }
+        }
+
+        &:focus-visible {
+          --card-focus-ring-box-shadow: ${$focusRing
+            ? focusRingStyle({base: color, border, focusRing: card.focusRing})
+            : undefined};
+        }
+      }
+    }
+
+    /* &:is(a) */
+    &[data-as='a'] {
+      cursor: pointer;
+      box-shadow: var(--card-focus-ring-box-shadow);
+
+      &[data-disabled] {
+        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
+      }
+
+      &:not([data-disabled]) {
+        &[data-pressed] {
+          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+        }
+
+        &[data-selected] {
+          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-pressed]):not([data-selected]) {
+            &[data-hovered],
+            &:hover {
+              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
+            }
+
+            &:active {
+              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+            }
+          }
+        }
+
+        &:focus-visible {
+          --card-focus-ring-box-shadow: ${$focusRing
+            ? focusRingStyle({base: color, border, focusRing: card.focusRing})
+            : undefined};
+        }
+      }
+    }
+
+    ${style?.card?.root}
+  `
+}

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

@@ -0,0 +1,11 @@
+import {ThemeColorToneKey} from '@sanity/ui/theme'
+
+/**
+ * @internal
+ */
+export interface CardStyleProps {
+  $checkered: boolean
+  $focusRing: boolean
+  $muted: boolean
+  $tone: ThemeColorToneKey
+}

package/src/core/primitives/checkbox/checkbox.tsx

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

package/src/core/primitives/checkbox/styles.ts

@@ -0,0 +1,128 @@
+import {getTheme_v2} from '@sanity/ui/theme'
+import {css} from 'styled-components'
+
+import {rem, ThemeProps} from '../../styles'
+import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
+
+export function checkboxBaseStyles(): ReturnType<typeof css> {
+  return css`
+    position: relative;
+    display: inline-block;
+  `
+}
+
+export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
+  const {color, input, radius} = getTheme_v2(props.theme)
+  const {focusRing} = input.checkbox
+
+  return css`
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    opacity: 0;
+    z-index: 1;
+    padding: 0;
+    margin: 0;
+
+    & + span {
+      position: relative;
+      display: block;
+      height: ${rem(input.checkbox.size)};
+      width: ${rem(input.checkbox.size)};
+      box-sizing: border-box;
+      box-shadow: ${focusRingBorderStyle({
+        color: color.input.default.enabled.border,
+        width: input.border.width,
+      })};
+      border-radius: ${rem(radius[2])};
+      line-height: 1;
+      background-color: ${color.input.default.enabled.bg};
+
+      & > svg {
+        display: block;
+        position: absolute;
+        opacity: 0;
+        height: 100%;
+        width: 100%;
+
+        & > path {
+          vector-effect: non-scaling-stroke;
+          stroke-width: 1.5px !important;
+        }
+      }
+    }
+
+    &:checked + span {
+      background: ${color.input.default.enabled.fg};
+      box-shadow: ${focusRingBorderStyle({
+        color: color.input.default.enabled.fg,
+        width: input.border.width,
+      })};
+      color: ${color.input.default.enabled.bg};
+    }
+
+    /* focus */
+    &:not(:disabled):focus:focus-visible + span {
+      box-shadow: ${focusRingStyle({focusRing})};
+    }
+
+    /* focus when checked - uses a different offset */
+    &:not(:disabled):focus:focus-visible&:checked + span {
+      box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})};
+    }
+
+    &[data-error] + span {
+      background-color: ${color.input.invalid.enabled.border};
+      box-shadow: ${focusRingBorderStyle({
+        width: input.border.width,
+        color: color.input.invalid.enabled.muted.bg,
+      })};
+      color: ${color.input.default.disabled.fg};
+    }
+    &[data-error]&:checked + span {
+      background-color: ${color.input.invalid.enabled.muted.bg};
+      color: ${color.input.default.enabled.bg};
+    }
+    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
+      box-shadow: ${focusRingStyle({
+        border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
+        focusRing: {width: 1, offset: 1},
+      })};
+    }
+
+    &:disabled + span {
+      background-color: ${color.input.default.disabled.bg};
+      box-shadow: ${focusRingBorderStyle({
+        width: input.border.width,
+        color: color.input.default.disabled.border,
+      })};
+      color: ${color.input.default.disabled.fg};
+    }
+    &:disabled&:checked + span {
+      background-color: ${color.input.default.disabled.muted.bg};
+    }
+
+    &[data-read-only] + span {
+      background-color: ${color.input.default.readOnly.bg};
+      box-shadow: ${focusRingBorderStyle({
+        width: input.border.width,
+        color: color.input.default.readOnly.border,
+      })};
+      color: ${color.input.default.readOnly.fg};
+    }
+
+    &[data-read-only]&:checked + span {
+      background-color: ${color.input.default.readOnly.muted.bg};
+    }
+
+    &:checked + span > svg:first-child {
+      opacity: 1;
+    }
+    &:indeterminate + span > svg:last-child {
+      opacity: 1;
+    }
+  `
+}

package/src/core/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/core/primitives/code/code.tsx

@@ -0,0 +1,40 @@
+import {forwardRef, lazy, Suspense} from 'react'
+import {styled} from 'styled-components'
+
+import {useArrayProp} from '../../hooks'
+import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
+import {codeBaseStyle} from './styles'
+
+const LazyRefractor = lazy(() => import('./refractor'))
+
+/**
+ * @public
+ */
+export interface CodeProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  /** Define the language to use for syntax highlighting. */
+  language?: string
+  size?: number | number[]
+  weight?: string
+}
+
+const StyledCode = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
+
+/**
+ * @public
+ */
+export const Code = forwardRef(function Code(
+  props: CodeProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
+  ref: React.ForwardedRef<HTMLElement>,
+) {
+  const {children, language, size = 2, weight, ...restProps} = props
+
+  return (
+    <StyledCode data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
+      <Suspense fallback={<code>{children}</code>}>
+        <LazyRefractor language={language} value={children} />
+      </Suspense>
+    </StyledCode>
+  )
+})
+Code.displayName = 'ForwardRef(Code)'

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

@@ -0,0 +1,20 @@
+import { hasLanguage,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 ? 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/core/primitives/code/styles.ts

@@ -0,0 +1,77 @@
+import {getTheme_v2} from '@sanity/ui/theme'
+import {css, ExecutionContext} from 'styled-components'
+
+function codeSyntaxHighlightingStyle({theme}: ExecutionContext) {
+  const {
+    color: {syntax: color},
+  } = getTheme_v2(theme)
+
+  return {
+    '&.atrule': {color: color.atrule},
+    '&.attr-name': {color: color.attrName},
+    '&.attr-value': {color: color.attrValue},
+    '&.attribute': {color: color.attribute},
+    '&.boolean': {color: color.boolean},
+    '&.builtin': {color: color.builtin},
+    '&.cdata': {color: color.cdata},
+    '&.char': {color: color.char},
+    '&.class': {color: color.class},
+    '&.class-name': {color: color.className},
+    '&.comment': {color: color.comment},
+    '&.constant': {color: color.constant},
+    '&.deleted': {color: color.deleted},
+    '&.doctype': {color: color.doctype},
+    '&.entity': {color: color.entity},
+    '&.function': {color: color.function},
+    '&.hexcode': {color: color.hexcode},
+    '&.id': {color: color.id},
+    '&.important': {color: color.important},
+    '&.inserted': {color: color.inserted},
+    '&.keyword': {color: color.keyword},
+    '&.number': {color: color.number},
+    '&.operator': {color: color.operator},
+    '&.prolog': {color: color.prolog},
+    '&.property': {color: color.property},
+    '&.pseudo-class': {color: color.pseudoClass},
+    '&.pseudo-element': {color: color.pseudoElement},
+    '&.punctuation': {color: color.punctuation},
+    '&.regex': {color: color.regex},
+    '&.selector': {color: color.selector},
+    '&.string': {color: color.string},
+    '&.symbol': {color: color.symbol},
+    '&.tag': {color: color.tag},
+    '&.unit': {color: color.unit},
+    '&.url': {color: color.url},
+    '&.variable': {color: color.variable},
+  }
+}
+
+export function codeBaseStyle(): ReturnType<typeof css> {
+  return css`
+    color: var(--card-code-fg-color);
+
+    & code {
+      font-family: inherit;
+
+      &.refractor .token {
+        ${codeSyntaxHighlightingStyle}
+      }
+    }
+
+    & a {
+      color: inherit;
+      text-decoration: underline;
+      border-radius: 1px;
+    }
+
+    & svg {
+      /* Certain popular CSS libraries changes the defaults for SVG display */
+      /* Make sure SVGs are rendered as inline elements */
+      display: inline;
+    }
+
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+    }
+  `
+}

package/src/core/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/core/primitives/container/container.tsx

@@ -0,0 +1,41 @@
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+import {useArrayProp} from '../../hooks'
+import {Box, BoxProps} from '../box'
+import {ResponsiveWidthProps} from '../types'
+import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
+import {ResponsiveWidthStyleProps} from './types'
+
+/**
+ * @public
+ */
+export interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
+
+const StyledContainer = styled(Box)<ResponsiveWidthStyleProps>(
+  containerBaseStyle,
+  responsiveContainerWidthStyle,
+)
+
+/**
+ * The `Container` component wraps content layout in a defined set of widths.
+ *
+ * @public
+ */
+export const Container = forwardRef(function Container(
+  props: ContainerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {as, width = 2, ...restProps} = props
+
+  return (
+    <StyledContainer
+      data-ui="Container"
+      {...restProps}
+      $width={useArrayProp(width)}
+      forwardedAs={as}
+      ref={ref}
+    />
+  )
+})
+Container.displayName = 'ForwardRef(Container)'