@sanity/ui 1.0.0-beta.9 → 1.0.0-next.3

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

@@ -0,0 +1,41 @@
+import {Flex, Switch, useTheme} from '@sanity/ui'
+import {useBoolean, useNumber} from '@sanity/ui-workshop'
+import {useCallback, useMemo} from 'react'
+import {ThemeProvider} from 'styled-components'
+
+export default function PropsStory() {
+  const checked = useBoolean('Checked', false)
+  const indeterminate = useBoolean('Indeterminate', false)
+  const readOnly = useBoolean('Read only', false)
+  const theme = useTheme()
+  const focusRingOffset = useNumber('Focus ring offset', theme.sanity.focusRing.offset)
+  const focusRingWidth = useNumber('Focus ring width', theme.sanity.focusRing.width)
+  const handleChange = useCallback(() => undefined, [])
+
+  const customTheme = useMemo(
+    () => ({
+      ...theme,
+      sanity: {
+        ...theme.sanity,
+        focusRing: {
+          offset: focusRingOffset || theme.sanity.focusRing.offset,
+          width: focusRingWidth || theme.sanity.focusRing.width,
+        },
+      },
+    }),
+    [focusRingOffset, focusRingWidth, theme]
+  )
+
+  return (
+    <ThemeProvider theme={customTheme}>
+      <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+        <Switch
+          checked={checked}
+          indeterminate={indeterminate}
+          onChange={handleChange}
+          readOnly={readOnly}
+        />
+      </Flex>
+    </ThemeProvider>
+  )
+}

package/src/primitives/switch/index.ts

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

package/src/primitives/switch/styles.ts

@@ -0,0 +1,156 @@
+import {CSSObject} from 'styled-components'
+import {rem, ThemeProps} from '../../styles'
+import {focusRingStyle} from '../../styles/internal'
+
+/* Root */
+export function switchBaseStyles(): CSSObject {
+  return {
+    position: 'relative',
+    '&:not([hidden])': {
+      display: 'inline-block',
+    },
+  }
+}
+
+/* Input */
+export function switchInputStyles(): CSSObject {
+  // Visually hide the input element while keeping it interactive
+  return {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    opacity: 0,
+    height: '100%',
+    width: '100%',
+    outline: 'none',
+    padding: 0,
+    margin: 0,
+
+    /* Place the input element above the representation element */
+    zIndex: 1,
+  }
+}
+
+/* Representation */
+export function switchRepresentationStyles(props: ThemeProps): CSSObject {
+  const {theme} = props
+  const {focusRing, input} = theme.sanity
+  const color = theme.sanity.color.button.default
+
+  return {
+    '--switch-bg-color': color.default.enabled.bg,
+    '--switch-fg-color': color.default.enabled.fg,
+    '--switch-box-shadow': 'none',
+
+    '&:not([hidden])': {
+      display: 'block',
+    },
+    position: 'relative',
+    width: rem(input.switch.width),
+    height: rem(input.switch.height),
+    borderRadius: rem(input.switch.height / 2),
+
+    /* Make sure it’s not possible to interact with the wrapper element */
+    pointerEvents: 'none',
+
+    '&:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 1,
+      boxShadow: 'var(--switch-box-shadow)',
+      borderRadius: 'inherit',
+    },
+
+    /* Focus styles */
+    'input:focus + &&': {
+      '--switch-box-shadow': focusRingStyle({focusRing}),
+    },
+
+    'input:focus:not(:focus-visible) + &&': {
+      '--switch-box-shadow': 'none',
+    },
+
+    'input:checked + &&': {
+      '--switch-bg-color': color.positive.enabled.bg,
+      '--switch-fg-color': color.positive.enabled.fg,
+    },
+
+    '@media (hover: hover)': {
+      'input:not(:disabled):hover + &&': {
+        '--switch-bg-color': color.default.hovered.bg,
+        '--switch-fg-color': color.default.hovered.fg,
+      },
+
+      'input:not(:disabled):checked:hover + &&': {
+        '--switch-bg-color': color.positive.hovered.bg,
+        '--switch-fg-color': color.positive.hovered.fg,
+      },
+    },
+
+    'input:not([data-read-only]):disabled + &&': {
+      '--switch-bg-color': color.default.disabled.bg,
+      '--switch-fg-color': color.default.disabled.fg,
+    },
+  }
+}
+
+/* Track */
+export function switchTrackStyles(props: ThemeProps): CSSObject {
+  const {theme} = props
+  const {input} = theme.sanity
+
+  return {
+    '&:not([hidden])': {
+      display: 'block',
+    },
+    backgroundColor: 'var(--switch-bg-color)',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: rem(input.switch.width),
+    height: rem(input.switch.height),
+    borderRadius: rem(input.switch.height / 2),
+  }
+}
+
+/* Thumb */
+export function switchThumbStyles(
+  props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps
+): CSSObject {
+  const {$indeterminate, theme} = props
+  const {input} = theme.sanity
+  const trackWidth = input.switch.width
+  const trackHeight = input.switch.height
+  const trackPadding = input.switch.padding
+  const size = trackHeight - input.switch.padding * 2
+  const checkedOffset = trackWidth - trackPadding * 2 - size
+  const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
+  const checked = $indeterminate !== true && props.$checked === true
+
+  return {
+    '&:not([hidden])': {
+      display: 'block',
+    },
+    position: 'absolute',
+    left: rem(trackPadding),
+    top: rem(trackPadding),
+    height: rem(size),
+    width: rem(size),
+    borderRadius: rem(size / 2),
+    transitionProperty: 'transform',
+    transitionDuration: `${input.switch.transitionDurationMs}ms`,
+    transitionTimingFunction: input.switch.transitionTimingFunction,
+    background: 'var(--switch-fg-color)',
+    transform: 'translate3d(0, 0, 0)',
+
+    ...(checked ? {transform: `translate3d(${checkedOffset}px, 0, 0)`} : {}),
+    ...($indeterminate ? {transform: `translate3d(${indeterminateOffset}px, 0, 0)`} : {}),
+  }
+}

package/src/primitives/switch/switch.tsx

@@ -0,0 +1,58 @@
+import {forwardRef, memo, useEffect} from 'react'
+import styled from 'styled-components'
+import {useForwardedRef} from '../../hooks'
+import {
+  switchBaseStyles,
+  switchRepresentationStyles,
+  switchThumbStyles,
+  switchTrackStyles,
+  switchInputStyles,
+} from './styles'
+
+/**
+ * @public
+ */
+export interface SwitchProps {
+  indeterminate?: boolean
+}
+
+const Root = memo(styled.span(switchBaseStyles))
+const Input = memo(styled.input(switchInputStyles))
+const Representation = memo(styled.span(switchRepresentationStyles))
+const Track = memo(styled.span(switchTrackStyles))
+const Thumb = memo(styled.span<{$checked?: boolean; $indeterminate?: boolean}>(switchThumbStyles))
+
+/**
+ * @public
+ */
+export const Switch = forwardRef(function Switch(
+  props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & SwitchProps,
+  forwardedRef: React.ForwardedRef<HTMLInputElement>
+) {
+  const {checked, className, disabled, indeterminate, readOnly, style, ...restProps} = props
+  const ref = useForwardedRef(forwardedRef)
+
+  useEffect(() => {
+    if (ref.current) {
+      // Set the indeterminate state
+      ref.current.indeterminate = indeterminate || false
+    }
+  }, [indeterminate, ref])
+
+  return (
+    <Root className={className} data-ui="Switch" style={style}>
+      <Input
+        data-read-only={!disabled && readOnly ? '' : undefined}
+        {...restProps}
+        checked={indeterminate !== true && checked}
+        disabled={disabled || readOnly}
+        type="checkbox"
+        ref={ref}
+      />
+      <Representation aria-hidden data-name="representation">
+        <Track />
+        <Thumb $checked={checked} $indeterminate={indeterminate} />
+      </Representation>
+    </Root>
+  )
+})

package/src/primitives/text/__workshop__/.eslintrc

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

package/src/primitives/text/__workshop__/colored.tsx

@@ -0,0 +1,27 @@
+import {Flex, Text, Theme, ThemeColorSpotKey, useTheme} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+import styled, {css} from 'styled-components'
+import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
+
+const ColoredText = styled(Text)<{color?: ThemeColorSpotKey}>(
+  (props: {color?: ThemeColorSpotKey; theme: Theme}) => {
+    const {spot} = props.theme.sanity.color
+
+    return css`
+      color: ${spot[props.color || 'gray']};
+    `
+  }
+)
+
+export default function ColoredTextStory() {
+  const theme = useTheme()
+  const color = useSelect('Color', WORKSHOP_SPOT_COLOR_OPTIONS, 'gray')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <ColoredText align="center" color={color} size={4} theme={theme} weight="bold">
+        {color}
+      </ColoredText>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,38 @@
+import {Card, Container, Text} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {
+  WORKSHOP_TEXT_ALIGN_OPTIONS,
+  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
+  WORKSHOP_TEXT_SIZE_OPTIONS,
+  WORKSHOP_TEXT_WEIGHT_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function TextStory() {
+  const accent = useBoolean('Accent', false, 'Props')
+  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, '', 'Props') || undefined
+  const muted = useBoolean('Muted', false, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const text = useText('Text', 'Hello, world', 'Props')
+
+  const textOverflow =
+    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, undefined, 'Props') || undefined
+
+  const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
+
+  return (
+    <Container width={0}>
+      <Card padding={4}>
+        <Text
+          accent={accent}
+          align={align}
+          muted={muted}
+          size={size}
+          textOverflow={textOverflow}
+          weight={weight}
+        >
+          {text}
+        </Text>
+      </Card>
+    </Container>
+  )
+}

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

@@ -0,0 +1,20 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('primitives/text', 'Text', [
+  {
+    name: 'default',
+    title: 'Text',
+    component: lazy(() => import('./example')),
+  },
+  {
+    name: 'colored',
+    title: 'Colored text',
+    component: lazy(() => import('./colored')),
+  },
+  {
+    name: 'optical-alignment',
+    title: 'Optical alignment',
+    component: lazy(() => import('./opticalAlignment')),
+  },
+])

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

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

package/src/primitives/text/index.ts

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

package/src/primitives/text/styles.ts

@@ -0,0 +1,53 @@
+import {CSSObject} from 'styled-components'
+import {ThemeProps} from '../../styles'
+
+export function textBaseStyle(
+  props: {$accent?: boolean; $muted?: boolean} & ThemeProps
+): CSSObject {
+  const {$accent, $muted, theme} = props
+  const {weights} = theme.sanity.fonts.text
+
+  return {
+    color: 'var(--card-fg-color)',
+
+    ...($accent ? {color: 'var(--card-accent-fg-color)'} : {}),
+
+    ...($muted ? {color: 'var(--card-muted-fg-color)'} : {}),
+
+    '& code': {
+      fontFamily: theme.sanity.fonts.code.family,
+      borderRadius: 1,
+      backgroundColor: 'var(--card-code-bg-color)',
+      color: 'var(--card-code-fg-color)',
+    },
+
+    '& a': {
+      textDecoration: 'none',
+      borderRadius: 1,
+      color: 'var(--card-link-color)',
+      outline: 'none',
+
+      '@media (hover: hover)': {
+        '&:hover': {
+          textDecoration: 'underline',
+        },
+      },
+
+      '&:focus': {
+        boxShadow: '0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color)',
+      },
+
+      '&:focus:not(:focus-visible)': {
+        boxShadow: 'none',
+      },
+    },
+
+    '& strong': {
+      fontWeight: weights.bold,
+    },
+
+    '& [data-sanity-icon]': {
+      verticalAlign: 'baseline',
+    },
+  }
+}

package/src/primitives/text/text.tsx

@@ -0,0 +1,87 @@
+import {forwardRef, memo} from 'react'
+import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
+import {compose} from '../../styles'
+import {
+  ResponsiveFontStyleProps,
+  responsiveTextAlignStyle,
+  responsiveTextFont,
+} from '../../styles/internal'
+import {ThemeFontWeightKey} from '../../theme'
+import {TextAlign} from '../../types'
+import {textBaseStyle} from './styles'
+
+/**
+ * @public
+ */
+export interface TextProps {
+  accent?: boolean
+  align?: TextAlign | TextAlign[]
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  muted?: boolean
+  size?: number | number[]
+  /**
+   * Controls how overflowing text is treated.
+   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
+   * @beta
+   */
+  textOverflow?: 'ellipsis'
+  weight?: ThemeFontWeightKey
+}
+
+const Root = memo(
+  compose<ResponsiveFontStyleProps>('div', [
+    responsiveTextFont,
+    responsiveTextAlignStyle,
+    textBaseStyle,
+  ])
+)
+
+const SpanWithTextOverflow = memo(
+  styled.span({
+    display: 'block',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  })
+)
+
+/**
+ * @public
+ */
+export const Text = forwardRef(function Text(
+  props: TextProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const {
+    accent = false,
+    align,
+    children: childrenProp,
+    muted = false,
+    size = 2,
+    textOverflow,
+    weight,
+    ...restProps
+  } = props
+
+  let children = childrenProp
+
+  if (textOverflow === 'ellipsis') {
+    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
+  }
+
+  return (
+    <Root
+      data-ui="Text"
+      {...restProps}
+      $accent={accent}
+      $align={useArrayProp(align)}
+      $muted={muted}
+      ref={ref}
+      $size={useArrayProp(size)}
+      $weight={weight}
+    >
+      <span>{children}</span>
+    </Root>
+  )
+})

package/src/primitives/textArea/__workshop__/.eslintrc

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

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

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

package/src/primitives/textArea/__workshop__/plain.tsx

@@ -0,0 +1,49 @@
+import {Card, Container, Flex, Stack, Text, TextArea} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {
+  WORKSHOP_CARD_TONE_OPTIONS,
+  WORKSHOP_FONT_WEIGHT_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PlainStory() {
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
+
+  const border = useBoolean('Border', true, 'Props')
+  const customValidity = useText('Custom validity', '', 'Props') || undefined
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const placeholder = useText('Placeholder', '', 'Props') || undefined
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
+  const readOnly = useBoolean('Read only', false, 'Props')
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container width={0}>
+        <Card padding={3} tone={tone}>
+          <Stack space={3}>
+            <Text as="label" htmlFor="text-area-example" size={1} weight="semibold">
+              TextArea
+            </Text>
+            <TextArea
+              border={border}
+              customValidity={customValidity}
+              disabled={disabled}
+              fontSize={fontSize}
+              id="text-area-example"
+              padding={padding}
+              placeholder={placeholder}
+              radius={radius}
+              readOnly={readOnly}
+              weight={weight}
+            />
+          </Stack>
+        </Card>
+      </Container>
+    </Flex>
+  )
+}

package/src/primitives/textArea/index.ts

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