@sanity/ui 0.37.3 → 0.37.4

package/src/primitives/checkbox/checkbox.tsx

@@ -0,0 +1,63 @@
+import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
+import React, {forwardRef, useEffect} from 'react'
+import styled from 'styled-components'
+import {useForwardedRef, useCustomValidity} from '../../hooks'
+import {checkboxBaseStyles, inputElementStyles} from './styles'
+
+/**
+ * @public
+ */
+export interface CheckboxProps {
+  indeterminate?: boolean
+  customValidity?: string
+}
+
+const Root = styled.div(checkboxBaseStyles)
+const Input = styled.input(inputElementStyles)
+
+/**
+ * @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 = useForwardedRef(forwardedRef)
+
+  useCustomValidity(ref, customValidity)
+
+  useEffect(() => {
+    if (ref.current) {
+      // Set the indeterminate state
+      ref.current.indeterminate = indeterminate || false
+    }
+  }, [indeterminate, ref])
+
+  return (
+    <Root className={className} data-ui="Checkbox" style={style}>
+      <Input
+        data-read-only={!disabled && readOnly ? '' : undefined}
+        {...restProps}
+        checked={checked}
+        disabled={disabled || readOnly}
+        type="checkbox"
+        readOnly={readOnly}
+        ref={ref}
+      />
+      <span>
+        <CheckmarkIcon />
+        <RemoveIcon />
+      </span>
+    </Root>
+  )
+})

package/src/primitives/checkbox/index.ts

@@ -0,0 +1 @@
+export * from './checkbox'

package/src/primitives/checkbox/styles.ts

@@ -0,0 +1,97 @@
+import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {rem, ThemeProps} from '../../styles'
+import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
+
+export function checkboxBaseStyles(): FlattenSimpleInterpolation {
+  return css`
+    position: relative;
+    display: inline-block;
+  `
+}
+
+export function inputElementStyles(props: ThemeProps): FlattenSimpleInterpolation {
+  const {theme} = props
+  const color = theme.sanity.color.input
+  const {focusRing, input, radius} = theme.sanity
+
+  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.default.enabled.border,
+        width: input.border.width,
+      })};
+      border-radius: ${rem(radius[2])};
+      line-height: 1;
+      background-color: ${color.default.enabled.bg};
+
+      & > svg {
+        display: block;
+        position: absolute;
+        opacity: 0;
+        height: 100%;
+        width: 100%;
+
+        & > path {
+          vector-effect: non-scaling-stroke;
+          stroke-width: 2 !important;
+        }
+      }
+    }
+
+    &:not(:disabled):focus + span {
+      box-shadow: ${focusRingStyle({
+        border: {width: input.border.width, color: color.default.enabled.border},
+        focusRing,
+      })};
+    }
+
+    &:not(:disabled):focus:not(:focus-visible) + span {
+      box-shadow: ${focusRingBorderStyle({
+        color: color.default.enabled.border,
+        width: input.border.width,
+      })};
+    }
+
+    &:checked + span > svg:first-child {
+      opacity: 1;
+    }
+
+    &[data-read-only] + span {
+      background-color: ${color.default.readOnly.bg};
+      box-shadow: ${focusRingBorderStyle({
+        width: input.border.width,
+        color: color.default.readOnly.border,
+      })};
+      color: ${color.default.readOnly.fg};
+    }
+
+    &:not([data-read-only]):disabled + span {
+      background-color: ${color.default.disabled.bg};
+      box-shadow: ${focusRingBorderStyle({
+        width: input.border.width,
+        color: color.default.disabled.border,
+      })};
+      color: ${color.default.disabled.fg};
+    }
+
+    &:indeterminate + span > svg:last-child {
+      opacity: 1;
+    }
+  `
+}

package/src/primitives/code/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

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

@@ -0,0 +1,15 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('primitives/code', 'Code', [
+  {
+    name: 'props',
+    title: 'Props',
+    component: lazy(() => import('./props')),
+  },
+  {
+    name: 'optical-alignment',
+    title: 'Optical alignment',
+    component: lazy(() => import('./opticalAlignment')),
+  },
+])

package/src/primitives/code/__workshop__/opticalAlignment.tsx

@@ -0,0 +1,49 @@
+import {AddCircleIcon} from '@sanity/icons'
+import {Box, Card, Code, Flex, Stack} from '@sanity/ui'
+import React from 'react'
+
+export default function OpticalAlignment() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Stack space={1}>
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Code size={4}>Hamburgefonstiv M</Code>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Code size={3}>Hamburgefonstiv M</Code>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Code size={2}>Hamburgefonstiv M</Code>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Code size={1}>Hamburgefonstiv M</Code>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Code size={0}>Hamburgefonstiv M</Code>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={2} scheme="dark">
+            <Code>
+              <AddCircleIcon />
+            </Code>
+          </Card>
+        </Flex>
+      </Stack>
+    </Box>
+  )
+}

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

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

package/src/primitives/code/code.tsx

@@ -0,0 +1,36 @@
+import React, {forwardRef} from 'react'
+import Refractor from 'react-refractor'
+import styled from 'styled-components'
+import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
+import {codeBaseStyle} from './styles'
+
+/**
+ * @public
+ */
+export interface CodeProps {
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  language?: string
+  size?: number | number[]
+  weight?: string
+}
+
+const Root = 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: languageProp, size = 2, weight, ...restProps} = props
+  const language = typeof languageProp === 'string' ? languageProp : undefined
+  const registered = language ? Refractor.hasLanguage(language as any) : false
+
+  return (
+    <Root data-ui="Code" {...restProps} $size={size} $weight={weight} ref={ref}>
+      {!(language && registered) && <code>{children}</code>}
+      {language && registered && <Refractor inline language={language} value={String(children)} />}
+    </Root>
+  )
+})

package/src/primitives/code/index.ts

@@ -0,0 +1 @@
+export * from './code'

package/src/primitives/code/styles.ts

@@ -0,0 +1,70 @@
+import {css, FlattenInterpolation, ThemeProps as StyledThemeProps} from 'styled-components'
+import {ThemeProps} from '../../styles'
+import {Theme} from '../../theme'
+
+function codeSyntaxHighlightingStyle({theme}: ThemeProps) {
+  const color = theme.sanity.color.syntax
+
+  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(): FlattenInterpolation<StyledThemeProps<Theme>> {
+  return css`
+    color: var(--card-code-fg-color);
+
+    & code {
+      font-family: inherit;
+
+      &.refractor .token {
+        ${codeSyntaxHighlightingStyle}
+      }
+    }
+
+    & a {
+      color: inherit;
+      text-decoration: underline;
+      border-radius: 1px;
+    }
+
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+    }
+  `
+}

package/src/primitives/container/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

package/src/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 React from 'react'
+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>
+            Container with <code>max-width={width}</code>
+          </Text>
+        </Card>
+      </Container>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,6 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('primitives/container', 'Container', [
+  {name: 'plain', title: 'Plain', component: lazy(() => import('./example'))},
+])

package/src/primitives/container/container.tsx

@@ -0,0 +1,28 @@
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
+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 Root = styled(Box)<ResponsiveWidthStyleProps>(
+  containerBaseStyle,
+  responsiveContainerWidthStyle
+)
+
+/**
+ * @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 <Root data-ui="Container" {...restProps} $width={width} forwardedAs={as} ref={ref} />
+})

package/src/primitives/container/index.ts

@@ -0,0 +1,2 @@
+export * from './container'
+export * from './types'

package/src/primitives/container/styles.ts

@@ -0,0 +1,23 @@
+import {CSSObject} from 'styled-components'
+import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
+import {ResponsiveWidthStyleProps} from './types'
+
+const BASE_STYLE: CSSObject = {
+  width: '100%',
+  margin: '0 auto',
+}
+
+export function containerBaseStyle(): CSSObject {
+  return BASE_STYLE
+}
+
+export function responsiveContainerWidthStyle(
+  props: ResponsiveWidthStyleProps & ThemeProps
+): CSSObject[] {
+  const {theme} = props
+  const {container, media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$width), (val) => ({
+    maxWidth: val === 'auto' ? 'none' : rem(container[val]),
+  }))
+}

package/src/primitives/container/types.ts

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export interface ResponsiveWidthStyleProps {
+  $width?: number | number[] | 'auto'
+}

package/src/primitives/flex/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

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

@@ -0,0 +1,34 @@
+import {Card, Code, Flex} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+import React from 'react'
+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>1</Code>
+      </DebugCard>
+
+      <DebugCard flex={[1, 2, 3]}>
+        <Code>[1,2,3]</Code>
+      </DebugCard>
+
+      <DebugCard flex={['none', 'none', 1]}>
+        <Code>['none', 'none', 1]</Code>
+      </DebugCard>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,26 @@
+import {Card, Flex, Text} from '@sanity/ui'
+import React from 'react'
+
+export default function GapStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Flex align="center" gap={[2, 3, 4]} justify="center" wrap="wrap">
+        <Card padding={3} scheme="dark">
+          <Text size={0}>Card 0</Text>
+        </Card>
+        <Card padding={3} scheme="dark">
+          <Text size={1}>Card 1</Text>
+        </Card>
+        <Card padding={3} scheme="dark">
+          <Text size={2}>Card 2</Text>
+        </Card>
+        <Card padding={3} scheme="dark">
+          <Text size={3}>Card 3</Text>
+        </Card>
+        <Card padding={3} scheme="dark">
+          <Text size={4}>Card 4</Text>
+        </Card>
+      </Flex>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,7 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('primitives/flex', 'Flex', [
+  {name: 'plain', title: 'Plain', component: lazy(() => import('./example'))},
+  {name: 'gap', title: 'Gap', component: lazy(() => import('./gap'))},
+])

package/src/primitives/flex/flex.tsx

@@ -0,0 +1,49 @@
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
+import {
+  flexItemStyle,
+  FlexItemStyleProps,
+  responsiveFlexStyle,
+  ResponsiveFlexStyleProps,
+} from '../../styles/internal'
+import {Box, BoxProps} from '../box'
+import {ResponsiveFlexProps, ResponsiveFlexItemProps} from '../types'
+
+/**
+ * @public
+ */
+export interface FlexProps
+  extends Omit<BoxProps, 'display'>,
+    ResponsiveFlexProps,
+    ResponsiveFlexItemProps {
+  gap?: number | number[]
+}
+
+const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
+  flexItemStyle,
+  responsiveFlexStyle
+)
+
+/**
+ * @public
+ */
+export const Flex = forwardRef(function Flex(
+  props: FlexProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
+
+  return (
+    <Root
+      data-ui="Flex"
+      {...restProps}
+      $align={align}
+      $direction={direction}
+      $gap={gap}
+      $justify={justify}
+      $wrap={wrap}
+      forwardedAs={as}
+      ref={ref}
+    />
+  )
+})

package/src/primitives/flex/index.ts

@@ -0,0 +1 @@
+export * from './flex'

package/src/primitives/grid/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

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

@@ -0,0 +1,6 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('primitives/grid', 'Grid', [
+  {name: 'responsive', title: 'Responsive', component: lazy(() => import('./responsive'))},
+])

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

@@ -0,0 +1,54 @@
+import {Card, Code, Container, Flex, Grid} from '@sanity/ui'
+import React from 'react'
+
+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]}
+        >
+          <Card tone="transparent">
+            <Code>1</Code>
+          </Card>
+          <Card tone="transparent">
+            <Code>2</Code>
+          </Card>
+          <Card tone="transparent">
+            <Code>3</Code>
+          </Card>
+          <Card tone="transparent">
+            <Code>4</Code>
+          </Card>
+          <Card tone="transparent">
+            <Code>5</Code>
+          </Card>
+          <Card tone="transparent">
+            <Code>6</Code>
+          </Card>
+          <Card tone="transparent">
+            <Code>7</Code>
+          </Card>
+          <Card tone="transparent">
+            <Code>8</Code>
+          </Card>
+          <Card tone="transparent">
+            <Code>9</Code>
+          </Card>
+          <Card tone="transparent">
+            <Code>10</Code>
+          </Card>
+          <Card tone="transparent">
+            <Code>11</Code>
+          </Card>
+          <Card tone="transparent">
+            <Code>12</Code>
+          </Card>
+        </Grid>
+      </Container>
+    </Flex>
+  )
+}