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

package/src/ui/primitives/select/__workshop__/readOnly.tsx

@@ -0,0 +1,23 @@
+import {Card, Container, Label, Select, Stack} from '@sanity/ui'
+
+export default function ReadOnlyStory() {
+  return (
+    <Container width={0}>
+      <Card padding={4}>
+        <Stack space={3}>
+          <Label as="label" htmlFor="select">
+            Select
+          </Label>
+
+          <Select id="select-example" readOnly>
+            <option value="a">Option A</option>
+            <option value="b">Option B</option>
+            <option value="c">Option C</option>
+            <option value="d">Option D</option>
+            <option value="e">Option E</option>
+          </Select>
+        </Stack>
+      </Card>
+    </Container>
+  )
+}

package/src/ui/primitives/select/select.tsx

@@ -0,0 +1,85 @@
+import {ChevronDownIcon} from '@sanity/icons'
+import {
+  _inputElement,
+  ResponsiveProp,
+  select,
+  selectPresentation,
+  SelectStyleProps,
+} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
+import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
+
+import {useCustomValidity} from '../../hooks'
+import {Props} from '../../types'
+import {Box} from '../box'
+import {Text} from '../text'
+
+/**
+ * @public
+ */
+export interface SelectProps extends SelectStyleProps {
+  customValidity?: string
+  readOnly?: boolean
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
+}
+
+/**
+ * The `Select` component provides control of options.
+ *
+ * @public
+ */
+export const Select = forwardRef(function Select(
+  props: Props<SelectProps, 'select'>,
+  forwardedRef: ForwardedRef<HTMLSelectElement>,
+) {
+  const {
+    border = true,
+    children,
+    customValidity,
+    disabled,
+    fontSize = 2,
+    gap,
+    padding = 3,
+    radius = 1,
+    readOnly,
+    space = 2,
+    ...restProps
+  } = props
+
+  const ref = useRef<HTMLSelectElement | null>(null)
+
+  useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  useCustomValidity(ref, customValidity)
+
+  return (
+    <div
+      data-ui="Select"
+      className={select({border, fontSize, padding, radius, gap: gap ?? space})}
+      data-icon-right=""
+    >
+      <select
+        data-read-only={!disabled && readOnly ? '' : undefined}
+        {...restProps}
+        className={_inputElement()}
+        disabled={disabled || readOnly}
+        ref={ref}
+      >
+        {children}
+      </select>
+      <span className={selectPresentation()}>
+        <Box as="span" display="inline-block" padding={padding}>
+          <Text size={fontSize}>
+            <ChevronDownIcon />
+          </Text>
+        </Box>
+      </span>
+    </div>
+  )
+})
+
+Select.displayName = 'ForwardRef(Select)'

package/src/ui/primitives/spinner/__workshop__/Props.tsx

@@ -0,0 +1,16 @@
+import {Flex, Spinner} from '@sanity/ui'
+import {FontTextSize} from '@sanity/ui/theme'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../../../workshop/constants'
+
+export default function Props() {
+  const muted = useBoolean('Muted', false, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Spinner muted={muted} size={size as FontTextSize} />
+    </Flex>
+  )
+}

package/src/ui/primitives/spinner/spinner.tsx

@@ -0,0 +1,33 @@
+import {ResponsiveProp, spinner} from '@sanity/ui/css'
+import {FontTextSize} from '@sanity/ui/theme'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
+import {Text} from '../text'
+import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
+
+/**
+ * @public
+ */
+export interface SpinnerProps {
+  muted?: boolean
+  size?: ResponsiveProp<FontTextSize>
+}
+
+/**
+ * Indicate that something is loading for an indeterminate amount of time.
+ *
+ * @public
+ */
+export const Spinner = forwardRef(function Spinner(
+  props: Props<SpinnerProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <Text data-ui="Spinner" {...props} className={spinner()} ref={ref}>
+      <AnimatedSpinnerIcon />
+    </Text>
+  )
+})
+
+Spinner.displayName = 'ForwardRef(Spinner)'

package/src/ui/primitives/stack/__workshop__/plain.tsx

@@ -0,0 +1,32 @@
+import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_SPACE_OPTIONS} from '../../../../../workshop/constants'
+
+export default function PlainStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container width={0}>
+        <Stack space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}>
+          <Card padding={[2, 3, 4]} shadow={1}>
+            <Text align="center" muted>
+              Stack item
+            </Text>
+          </Card>
+
+          <Card padding={[2, 3, 4]} shadow={1}>
+            <Text align="center" muted>
+              Stack item
+            </Text>
+          </Card>
+
+          <Card padding={[2, 3, 4]} shadow={1}>
+            <Text align="center" muted>
+              Stack item
+            </Text>
+          </Card>
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}

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

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

package/src/ui/primitives/stack/stack.tsx

@@ -0,0 +1,45 @@
+import {composeClassNames, ResponsiveProp, stack} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
+import {Box, BoxProps} from '../box'
+
+/**
+ * @public
+ */
+export interface StackProps
+  extends Omit<
+    BoxProps,
+    'align' | 'columns' | 'direction' | 'display' | 'gapX' | 'gapY' | 'justify'
+  > {
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
+}
+
+/**
+ * The `Stack` component is used to place elements on top of each other.
+ *
+ * @public
+ */
+export const Stack = forwardRef(function Stack(
+  props: Props<StackProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const {as, className, gap, space, ...restProps} = props
+
+  return (
+    <Box
+      data-ui="Stack"
+      {...restProps}
+      as={as}
+      autoRows="min"
+      className={composeClassNames(className, stack())}
+      display="grid"
+      gap={gap ?? space}
+      ref={ref}
+    />
+  )
+})
+
+Stack.displayName = 'ForwardRef(Stack)'

package/src/ui/primitives/switch/switch.tsx

@@ -0,0 +1,75 @@
+import {
+  _switch,
+  _switchElement,
+  _switchPresentation,
+  _switchThumb,
+  _switchTrack,
+  composeClassNames,
+} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
+
+import {Props} from '../../types'
+import {Box} from '../box'
+
+/**
+ * @public
+ */
+export interface SwitchProps {
+  indeterminate?: boolean
+}
+
+/**
+ * The `Switch` component allows the user to toggle a setting on and off.
+ *
+ * Extends all properties of an `<input type="checkbox" />` element, except type.
+ *
+ * @public
+ */
+export const Switch = forwardRef(function Switch(
+  props: Props<SwitchProps, 'input'>,
+  forwardedRef: ForwardedRef<HTMLInputElement>,
+) {
+  const {checked, className, disabled, indeterminate, 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])
+
+  return (
+    <Box
+      className={composeClassNames(className, _switch())}
+      data-checked={checked ? '' : undefined}
+      data-indeterminate={indeterminate ? '' : undefined}
+      data-ui="Switch"
+      display="inline-block"
+      position="relative"
+      style={style}
+    >
+      <input
+        {...restProps}
+        checked={indeterminate !== true && checked}
+        className={_switchElement()}
+        data-disabled={disabled ? '' : undefined}
+        data-read-only={!disabled && readOnly ? '' : undefined}
+        disabled={disabled || readOnly}
+        type="checkbox"
+        ref={ref}
+      />
+      <span aria-hidden className={_switchPresentation()}>
+        <span className={_switchTrack()} />
+        <span className={_switchThumb()} />
+      </span>
+    </Box>
+  )
+})
+
+Switch.displayName = 'ForwardRef(Switch)'

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

@@ -0,0 +1,23 @@
+import {Flex, Text} from '@sanity/ui'
+import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import {useSelect} from '@sanity/ui-workshop'
+import {styled} from 'styled-components'
+
+import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../../../workshop/constants'
+import {varNames} from '../../../../css/varNames'
+
+const ColoredText = styled(Text)<{$color?: ThemeColorAvatarColorKey}>`
+  ${varNames.color.fg}: var(--color-avatar-${(props) => props.$color}-bg);
+`
+
+export default function ColoredTextStory() {
+  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} weight="bold">
+        {color}
+      </ColoredText>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,39 @@
+import {Container, Flex, 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, 1, '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 (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Container width={0}>
+        <Text
+          accent={accent}
+          align={align}
+          muted={muted}
+          size={size}
+          textOverflow={textOverflow}
+          weight={weight}
+        >
+          {text}
+        </Text>
+      </Container>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,48 @@
+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} tone="neutral">
+            <Text size={4}>Hamburgefonstiv M</Text>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} tone="neutral">
+            <Text size={3}>Hamburgefonstiv M</Text>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} tone="neutral">
+            <Text size={2}>Hamburgefonstiv M</Text>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} tone="neutral">
+            <Text size={1}>Hamburgefonstiv M</Text>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} tone="neutral">
+            <Text size={0}>Hamburgefonstiv M</Text>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={2} tone="neutral">
+            <Text>
+              <AddCircleIcon />
+            </Text>
+          </Card>
+        </Flex>
+      </Stack>
+    </Box>
+  )
+}

package/src/ui/primitives/text/text.tsx

@@ -0,0 +1,64 @@
+import {
+  composeClassNames,
+  text,
+  textOverflow,
+  TextOverflowStyleProps,
+  TextStyleProps,
+} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
+
+/**
+ * @public
+ */
+export interface TextProps extends TextStyleProps, TextOverflowStyleProps {
+  htmlFor?: string
+}
+
+/**
+ * The `Text` component is an agile, themed typographic element.
+ *
+ * @public
+ */
+export const Text = forwardRef(function Text(
+  props: Props<TextProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    accent = false,
+    align,
+    as: As = 'div',
+    children,
+    className,
+    flex,
+    muted = false,
+    size = 2,
+    textOverflow: textOverflowProp,
+    weight,
+    ...restProps
+  } = props
+
+  return (
+    <As
+      data-ui="Text"
+      {...restProps}
+      ref={ref}
+      className={composeClassNames(
+        className,
+        text({
+          accent,
+          align,
+          flex,
+          muted,
+          size,
+          weight,
+        }),
+      )}
+    >
+      <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
+    </As>
+  )
+})
+
+Text.displayName = 'ForwardRef(Text)'

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

@@ -0,0 +1,50 @@
+import {Card, Container, Flex, Radius, 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, 2, 'Props')
+  const readOnly = useBoolean('Read only', false, 'Props')
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props') || undefined
+
+  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="medium">
+              TextArea
+            </Text>
+            <TextArea
+              border={border}
+              customValidity={customValidity}
+              disabled={disabled}
+              fontSize={fontSize}
+              id="text-area-example"
+              padding={padding}
+              placeholder={placeholder}
+              radius={radius as Radius}
+              readOnly={readOnly}
+              weight={weight}
+            />
+          </Stack>
+        </Card>
+      </Container>
+    </Flex>
+  )
+}

package/src/ui/primitives/textArea/textArea.tsx

@@ -0,0 +1,71 @@
+import {
+  _inputElement,
+  _inputPresentation,
+  ResponsiveProp,
+  textArea,
+  TextAreaStyleProps,
+} from '@sanity/ui/css'
+import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
+
+import {useCustomValidity} from '../../hooks'
+import {Props} from '../../types'
+
+/**
+ * @public
+ */
+export interface TextAreaProps extends TextAreaStyleProps {
+  /**
+   * @beta
+   */
+  __unstable_disableFocusRing?: boolean
+  customValidity?: string
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
+  weight?: ThemeFontWeightKey
+}
+
+/**
+ * A multiline text input.
+ *
+ * @public
+ */
+export const TextArea = forwardRef(function TextArea(
+  props: Props<TextAreaProps, 'textarea'>,
+  forwardedRef: ForwardedRef<HTMLTextAreaElement>,
+) {
+  const {
+    border = true,
+    customValidity,
+    disabled = false,
+    fontSize = 2,
+    gap,
+    padding = 3,
+    radius = 2,
+    space = 3,
+    // weight,
+    // __unstable_disableFocusRing,
+    ...restProps
+  } = props
+
+  const ref = useRef<HTMLTextAreaElement | null>(null)
+
+  useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  useCustomValidity(ref, customValidity)
+
+  return (
+    <span
+      className={textArea({border, fontSize, padding, radius, gap: gap ?? space})}
+      data-ui="TextArea"
+    >
+      <textarea {...restProps} className={_inputElement()} disabled={disabled} ref={ref} />
+      <span className={_inputPresentation()} />
+    </span>
+  )
+})
+
+TextArea.displayName = 'ForwardRef(TextArea)'

package/src/ui/primitives/textInput/__workshop__/index.ts

@@ -0,0 +1,44 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/text-input',
+  title: 'TextInput',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+    {
+      name: 'custom-validity',
+      title: 'Custom validity',
+      component: lazy(() => import('./customValidity')),
+    },
+    {
+      name: 'typed',
+      title: 'Typed',
+      component: lazy(() => import('./typed')),
+    },
+    {
+      name: 'tones',
+      title: 'Tones',
+      component: lazy(() => import('./tones')),
+    },
+    {
+      name: 'clear-button',
+      title: 'Clear button',
+      component: lazy(() => import('./clearButton')),
+    },
+    {
+      name: 'read-only',
+      title: 'Read only',
+      component: lazy(() => import('./readOnly')),
+    },
+    {
+      name: 'states',
+      title: 'States',
+      component: lazy(() => import('./states')),
+    },
+  ],
+})