@sanity/ui 4.0.0-v4.1 → 4.0.0

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

@@ -1,80 +0,0 @@
-import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
-import {checkbox, checkboxInput, checkboxPresentation} from '@sanity/ui/css'
-import {useEffect, useImperativeHandle, useRef} from 'react'
-
-import {useCustomValidity} from '../../hooks/useCustomValidity'
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_CHECKBOX_ELEMENT = 'input'
-
-/** @public */
-export type CheckboxOwnProps = {
-  indeterminate?: boolean
-  customValidity?: string
-}
-
-/** @public */
-export type CheckboxElementType = 'input' | ComponentType
-
-/** @public */
-export type CheckboxProps<E extends CheckboxElementType = CheckboxElementType> = Props<
-  CheckboxOwnProps,
-  E
->
-
-/**
- * Checkboxes allow the user to select one or more items from a set.
- *
- * @public
- */
-export function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX_ELEMENT>(
-  props: CheckboxProps<E>,
-): React.JSX.Element {
-  const {
-    as: Element = DEFAULT_CHECKBOX_ELEMENT,
-    className,
-    disabled,
-    indeterminate,
-    customValidity,
-    readOnly,
-    ref: forwardedRef,
-    style,
-    ...rest
-  } = props as CheckboxProps<typeof DEFAULT_CHECKBOX_ELEMENT>
-
-  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={checkbox({className})} data-ui="Checkbox" style={style}>
-      <Element
-        {...rest}
-        className={checkboxInput()}
-        data-invalid={customValidity ? '' : undefined}
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        disabled={disabled || readOnly}
-        type="checkbox"
-        readOnly={readOnly}
-        ref={ref}
-      />
-      <span className={checkboxPresentation()}>
-        <CheckmarkIcon />
-        <RemoveIcon />
-      </span>
-    </span>
-  )
-}

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

@@ -1,25 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-export default function ExampleStory(): React.JSX.Element {
-  const [checked, setChecked] = useState<boolean | undefined>(undefined)
-  const [indeterminate] = useState(checked === undefined)
-  const handleChange = useCallback(() => setChecked((val) => !val), [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox
-          checked={checked || false}
-          indeterminate={indeterminate}
-          onChange={handleChange}
-        />
-        <Box marginLeft={2}>
-          <Text size={1} weight="medium">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

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

@@ -1,35 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-export default function PropsStory(): React.JSX.Element {
-  const checked = useBoolean('Checked', false)
-  const disabled = useBoolean('Disabled', false)
-  const indeterminate = useBoolean('Indeterminate', false)
-  const invalid = useBoolean('Invalid', false)
-  const onChange = useAction('onChange')
-  const onFocus = useAction('onFocus')
-  const onBlur = useAction('onBlur')
-  const readOnly = useBoolean('Read only', false)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox
-          checked={checked}
-          customValidity={invalid ? 'Invalid' : undefined}
-          disabled={disabled}
-          indeterminate={indeterminate}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          readOnly={readOnly}
-        />
-        <Box marginLeft={2}>
-          <Text size={1} weight="medium">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

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

@@ -1,16 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-
-export default function ReadOnlyStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox id="checkbox-example" readOnly />
-        <Box marginLeft={2}>
-          <Text size={1} weight="medium">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

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

@@ -1,27 +0,0 @@
-import {Card, Checkbox, Flex, Stack, Text} from '@sanity/ui'
-import {CARD_TONES} from '@sanity/ui/theme'
-
-export default function MultipleTonesStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Stack gap={1}>
-        {CARD_TONES.map((tone) => (
-          <Card
-            alignItems="center"
-            as="label"
-            display="flex"
-            gap={2}
-            padding={3}
-            radius={3}
-            tone={tone}
-          >
-            <Checkbox />
-            <Text muted size={1}>
-              {tone}
-            </Text>
-          </Card>
-        ))}
-      </Stack>
-    </Flex>
-  )
-}

package/src/core/primitives/checkbox/__workshop__/index.ts

@@ -1,15 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/checkbox',
-  title: 'Checkbox',
-  stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./Example'))},
-    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./ReadOnly'))},
-    {name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./Tones'))},
-  ],
-}
-
-export default scope

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

@@ -1,48 +0,0 @@
-import {code, type CodeStyleProps, type ResponsiveProp} from '@sanity/ui/css'
-import type {FontCodeSize} from '@sanity/ui/theme'
-import {lazy, Suspense} from 'react'
-
-import type {ComponentType, Props} from '../../types'
-
-const LazyRefractor = lazy(() => import('./Refractor'))
-
-/** @public */
-export const DEFAULT_CODE_ELEMENT = 'pre'
-
-/** @public */
-export type CodeOwnProps = CodeStyleProps & {
-  /** Define the language to use for syntax highlighting. */
-  language?: string
-  size?: ResponsiveProp<FontCodeSize>
-}
-
-/** @public */
-export type CodeElementType = 'div' | 'pre' | ComponentType
-
-/** @public */
-export type CodeProps<E extends CodeElementType = CodeElementType> = Props<CodeOwnProps, E>
-
-/** @public */
-export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
-  props: CodeProps<E>,
-): React.JSX.Element {
-  const {
-    as: Element = DEFAULT_CODE_ELEMENT,
-    children,
-    className,
-    language: languageProp,
-    size = 2,
-    weight = 'regular',
-    ...rest
-  } = props as CodeProps<typeof DEFAULT_CODE_ELEMENT>
-
-  const language = typeof languageProp === 'string' ? languageProp : undefined
-
-  return (
-    <Element data-ui="Code" {...rest} className={code({className, size, weight})}>
-      <Suspense fallback={<code>{children}</code>}>
-        <LazyRefractor language={language} value={children} />
-      </Suspense>
-    </Element>
-  )
-}

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

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

package/src/core/primitives/code/__workshop__/OpticalAlignment.tsx

@@ -1,23 +0,0 @@
-import {CropIcon} from '@sanity/icons'
-import {Box, Code, Stack} from '@sanity/ui'
-import {vars} from '@sanity/ui/css'
-import {FONT_CODE_SIZE} from '@sanity/ui/theme'
-
-export default function OpticalAlignment(): React.JSX.Element {
-  return (
-    <Stack gap={3} padding={[4, 5, 6]}>
-      {FONT_CODE_SIZE.map((size) => (
-        <Box display="flex" gap={2} key={size}>
-          <div style={{outline: `0.5px solid ${vars.color.tinted.suggest.border[4]}`}}>
-            <Code size={size}>
-              <CropIcon />
-            </Code>
-          </div>
-          <div style={{outline: `0.5px solid ${vars.color.tinted.suggest.border[4]}`}}>
-            <Code size={size}>Hamburgefonstiv M</Code>
-          </div>
-        </Box>
-      ))}
-    </Stack>
-  )
-}

package/src/core/primitives/code/__workshop__/Props.tsx

@@ -1,23 +0,0 @@
-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'
-
-export default function PropsStory(): React.JSX.Element {
-  const code = useText('Code', `console.log('Hello, world')`)
-  const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript')
-  // @ts-expect-error - TODO: fix this
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Code
-        language={language}
-        // @ts-expect-error - TODO: fix this
-        size={size}
-      >
-        {code}
-      </Code>
-    </Box>
-  )
-}

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

@@ -1,21 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/code',
-  title: 'Code',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./Props')),
-    },
-    {
-      name: 'optical-alignment',
-      title: 'Optical alignment',
-      component: lazy(() => import('./OpticalAlignment')),
-    },
-  ],
-}
-
-export default scope

package/src/core/primitives/container/Container.tsx

@@ -1,37 +0,0 @@
-import {container, type ContainerStyleProps} from '@sanity/ui/css'
-
-import type {Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
-
-/** @public */
-export const DEFAULT_CONTAINER_ELEMENT = 'div'
-
-/** @public */
-export type ContainerOwnProps = Omit<BoxOwnProps, 'width'> & ContainerStyleProps
-
-/** @public */
-export type ContainerElementType = BoxElementType
-
-/** @public */
-export type ContainerProps<E extends ContainerElementType = ContainerElementType> = Props<
-  ContainerOwnProps,
-  E
->
-
-/**
- * The `Container` component wraps content layout in a defined set of widths.
- *
- * @public
- */
-export function Container<E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT>(
-  props: ContainerProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_CONTAINER_ELEMENT,
-    className,
-    width = 2,
-    ...rest
-  } = props as ContainerProps<typeof DEFAULT_CONTAINER_ELEMENT>
-
-  return <Box data-ui="Container" {...rest} as={as} className={container({className, width})} />
-}

package/src/core/primitives/container/__workshop__/Example.tsx

@@ -1,25 +0,0 @@
-import {Card, Container, Flex, Text} from '@sanity/ui'
-import {useAction, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '$workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  // @ts-expect-error - TODO: fix this
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container
-        onClick={useAction('onClick')}
-        // @ts-expect-error - TODO: fix this
-        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/__workshop__/index.ts

@@ -1,10 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/container',
-  title: 'Container',
-  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./Example'))}],
-}
-
-export default scope

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

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

package/src/core/primitives/flex/Flex.tsx

@@ -1,58 +0,0 @@
-import type {
-  AlignItems,
-  FlexDirection,
-  FlexWrap,
-  JustifyContent,
-  ResponsiveProp,
-} from '@sanity/ui/css'
-
-import type {Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
-
-/** @public */
-export const DEFAULT_FLEX_ELEMENT = 'div'
-
-/** @public */
-export type FlexOwnProps = Omit<BoxOwnProps, 'align' | 'display' | 'flexDirection' | 'flexWrap'> & {
-  align?: ResponsiveProp<AlignItems>
-  direction?: ResponsiveProp<FlexDirection>
-  justify?: ResponsiveProp<JustifyContent>
-  wrap?: ResponsiveProp<FlexWrap>
-}
-
-/** @public */
-export type FlexElementType = BoxElementType
-
-/** @public */
-export type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexOwnProps, E>
-
-/**
- * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
- *
- * @public
- */
-export function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(
-  props: FlexProps<E>,
-): React.JSX.Element {
-  const {
-    align,
-    as = DEFAULT_FLEX_ELEMENT,
-    direction = 'row',
-    justify,
-    wrap,
-    ...rest
-  } = props as FlexProps<typeof DEFAULT_FLEX_ELEMENT>
-
-  return (
-    <Box
-      data-ui="Flex"
-      {...rest}
-      alignItems={align}
-      as={as}
-      display="flex"
-      flexDirection={direction}
-      flexWrap={wrap}
-      justifyContent={justify}
-    />
-  )
-}

package/src/core/primitives/flex/__workshop__/Example.tsx

@@ -1,40 +0,0 @@
-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'
-
-const DebugCard = styled(Card)`
-  outline: 1px solid red;
-  &:not([hidden]) {
-    display: flex;
-  }
-  align-items: center;
-  justify-content: center;
-`
-
-export default function ExampleStory(): React.JSX.Element {
-  // @ts-expect-error - TODO: fix this
-  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row')
-
-  return (
-    <Flex
-      // @ts-expect-error - TODO: fix this
-      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/core/primitives/flex/__workshop__/Gap.tsx

@@ -1,25 +0,0 @@
-import {Card, Flex, Text} from '@sanity/ui'
-
-export default function GapStory(): React.JSX.Element {
-  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/core/primitives/flex/__workshop__/index.ts

@@ -1,13 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/flex',
-  title: 'Flex',
-  stories: [
-    {name: 'plain', title: 'Plain', component: lazy(() => import('./Example'))},
-    {name: 'gap', title: 'Gap', component: lazy(() => import('./Gap'))},
-  ],
-}
-
-export default scope

package/src/core/primitives/grid/Grid.tsx

@@ -1,35 +0,0 @@
-import type {Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
-
-/** @public */
-export const DEFAULT_GRID_ELEMENT = 'div'
-
-/** @public */
-export type GridOwnProps = Omit<BoxOwnProps, 'display'>
-
-/** @public */
-export type GridElementType = BoxElementType
-
-/** @public */
-export type GridProps<E extends GridElementType = GridElementType> = Props<GridOwnProps, E>
-
-/**
- * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
- *
- * @public
- */
-export function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(
-  props: GridProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_GRID_ELEMENT,
-    children,
-    ...rest
-  } = props as GridProps<typeof DEFAULT_GRID_ELEMENT>
-
-  return (
-    <Box data-ui="Grid" {...rest} as={as} display="grid">
-      {children}
-    </Box>
-  )
-}

package/src/core/primitives/grid/__workshop__/Responsive.tsx

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

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

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