@sanity/ui 3.0.0-static.8 → 3.0.0

package/src/ui/primitives/card/__workshop__/props.tsx

@@ -1,55 +0,0 @@
-import {Card, Flex, Radius, Stack, Text} from '@sanity/ui'
-import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_CARD_AS_OPTIONS,
-  WORKSHOP_CARD_TONE_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SHADOW_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-} from '../../../../../workshop/constants'
-
-export default function PropsStory() {
-  const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div', 'Props')
-  const border = useBoolean('Border', false, 'Props')
-  const checkered = useBoolean('Checkered', false, 'Props')
-  const muted = useBoolean('Muted', false, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const pressed = useBoolean('Pressed', false, 'Props')
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
-  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0, 'Props')
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Card
-        __unstable_checkered={checkered}
-        as={as}
-        border={border}
-        muted={muted}
-        onClick={useAction('onClick')}
-        padding={padding}
-        pressed={pressed}
-        radius={radius as Radius}
-        selected={selected}
-        shadow={shadow}
-        tone={tone}
-      >
-        <Stack space={3}>
-          <Text size={1}>
-            Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
-            <code>shadow={shadow}</code>.
-          </Text>
-          <Text size={1}>
-            Text with {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <a href="#">link</a>.
-          </Text>
-          <Text accent size={1}>
-            Text with accent color.
-          </Text>
-        </Stack>
-      </Card>
-    </Flex>
-  )
-}

package/src/ui/primitives/card/__workshop__/selected.tsx

@@ -1,93 +0,0 @@
-import {EditIcon, PublishIcon} from '@sanity/icons'
-import {Box, Card, Container, Flex, Inline, Stack, Text, useRootTheme} from '@sanity/ui'
-import {getTheme_v2, Theme, ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {useBoolean} from '@sanity/ui-workshop'
-import {css, styled} from 'styled-components'
-
-const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((props: {
-  $tone: ThemeColorStateToneKey
-  theme: Theme
-}) => {
-  const {$tone} = props
-  const {color} = getTheme_v2(props.theme)
-  const tone = color.button.default[$tone]
-
-  return css`
-    &:not([data-selected]) {
-      --card-fg-color: ${tone.enabled.bg};
-      --card-muted-fg-color: ${tone.enabled.bg};
-    }
-
-    [data-ui='Card']:disabled & {
-      --card-fg-color: inherit;
-      --card-muted-fg-color: inherit;
-    }
-  `
-})
-
-export default function SelectedStory() {
-  const disabled = useBoolean('Disabled', false) || false
-  const selected = useBoolean('Selected', false) || false
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Container width={0}>
-        <Stack space={1}>
-          <Card
-            __unstable_focusRing
-            as="button"
-            disabled={disabled}
-            padding={3}
-            radius={2}
-            selected={selected}
-          >
-            <Preview selected={selected} />
-          </Card>
-
-          <Card
-            __unstable_focusRing
-            as="button"
-            disabled={disabled}
-            padding={3}
-            radius={2}
-            selected={selected}
-            tone="critical"
-          >
-            <Preview selected={selected} />
-          </Card>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}
-
-function Preview({selected}: {selected: boolean}) {
-  const rootTheme = useRootTheme()
-
-  return (
-    <Flex>
-      <Box flex={1}>
-        <Text size={1}>Title</Text>
-      </Box>
-      <Inline space={3}>
-        <TextWithTone
-          data-selected={selected ? '' : undefined}
-          muted
-          size={1}
-          weight="medium"
-          $tone={rootTheme.tone === 'default' ? 'caution' : 'default'}
-        >
-          <EditIcon />
-        </TextWithTone>
-        <TextWithTone
-          data-selected={selected ? '' : undefined}
-          muted
-          size={1}
-          $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
-        >
-          <PublishIcon />
-        </TextWithTone>
-      </Inline>
-    </Flex>
-  )
-}

package/src/ui/primitives/card/card.tsx

@@ -1,118 +0,0 @@
-import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
-import {createElement, ForwardedRef, forwardRef} from 'react'
-import {isValidElementType} from 'react-is'
-
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
-import {CardProvider} from './cardProvider'
-import {useCard} from './useCard'
-
-/**
- * @public
- */
-export interface CardProps extends BoxProps, CardStyleProps {
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_checkered?: boolean
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_focusRing?: boolean
-  disabled?: boolean
-  href?: string
-  pressed?: boolean
-  selected?: boolean
-  target?: string
-}
-
-/**
- * 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: Props<CardProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    __unstable_checkered: checkered = false,
-    __unstable_focusRing: focusRing = false,
-    as: asProp,
-    className,
-    pressed,
-    radius = 0,
-    scheme: schemeProp,
-    // selectable,
-    selected,
-    shadow,
-    style,
-    tone: toneProp = 'default',
-    ...restProps
-  } = props
-
-  const as = isValidElementType(asProp) ? asProp : 'div'
-
-  const parent = useCard()
-
-  const context = {
-    tone: parent?.tone ?? 'default',
-    scheme: parent?.scheme ?? 'light',
-  }
-
-  const tone = toneProp === 'inherit' ? context.tone : toneProp
-  const scheme = schemeProp === undefined ? context.scheme : schemeProp
-
-  let node = (
-    <Box
-      data-ui="Card"
-      {...restProps}
-      as={as}
-      className={composeClassNames(
-        className,
-        card({
-          scheme: scheme === context.scheme ? undefined : scheme,
-          shadow,
-          tone,
-        }),
-      )}
-      data-checkered={checkered ? '' : undefined}
-      data-focus-ring={focusRing ? '' : undefined}
-      data-pressed={pressed ? '' : undefined}
-      data-selected={selected ? '' : undefined}
-      radius={radius}
-      ref={ref}
-      style={style}
-    />
-  )
-
-  if (scheme === context.scheme && tone === context.tone) {
-    return node
-  }
-
-  node = (
-    <CardProvider
-      compat_provider={parent?.compat_provider}
-      rendered={true}
-      scheme={scheme}
-      tone={tone ?? context.tone}
-    >
-      {node}
-    </CardProvider>
-  )
-
-  if (parent?.compat_provider) {
-    return createElement(parent.compat_provider, {
-      children: node,
-      scheme,
-      tone: tone ?? context.tone,
-    })
-  }
-
-  return node
-})
-
-Card.displayName = 'ForwardRef(Card)'

package/src/ui/primitives/card/cardContext.ts

@@ -1,10 +0,0 @@
-import {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {CardContextValue} from './types'
-
-/**
- * @internal
- */
-export const CardContext: Context<CardContextValue | null> =
-  createGlobalScopedContext<CardContextValue | null>('@sanity/ui/context/card', null)

package/src/ui/primitives/card/cardProvider.tsx

@@ -1,19 +0,0 @@
-import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {ReactNode, useMemo} from 'react'
-
-import {CardContext} from './cardContext'
-import {CardCompatProviderComponent} from './types'
-
-export function CardProvider(props: {
-  compat_provider?: CardCompatProviderComponent
-  children?: ReactNode
-  rendered?: boolean
-  tone: ThemeColorCardToneKey
-  scheme: ThemeColorSchemeKey
-}) {
-  const {children, rendered = false, tone, scheme} = props
-
-  const context = useMemo(() => ({rendered, tone, scheme}), [rendered, tone, scheme])
-
-  return <CardContext.Provider value={context}>{children}</CardContext.Provider>
-}

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

@@ -1,4 +0,0 @@
-export * from './card'
-export * from './cardProvider'
-export * from './types'
-export * from './useCard'

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

@@ -1,27 +0,0 @@
-import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {ComponentType, ReactNode} from 'react'
-
-/**
- * @internal
- * @deprecated Use `CardStyleProps` from `@sanity/ui/css` instead.
- */
-export interface CardStyleProps {
-  $checkered: boolean
-  $focusRing: boolean
-  $muted: boolean
-  $tone: ThemeColorCardToneKey
-}
-
-export type CardCompatProviderComponent = ComponentType<{
-  children?: ReactNode
-  tone: ThemeColorCardToneKey
-  scheme: ThemeColorSchemeKey
-}>
-
-/** @internal */
-export interface CardContextValue {
-  compat_provider?: CardCompatProviderComponent
-  rendered: boolean
-  tone: ThemeColorCardToneKey
-  scheme: ThemeColorSchemeKey
-}

package/src/ui/primitives/card/useCard.ts

@@ -1,7 +0,0 @@
-import {useContext} from 'react'
-
-import {CardContext} from './cardContext'
-
-export function useCard() {
-  return useContext(CardContext)
-}

package/src/ui/primitives/checkbox/checkbox.tsx

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

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

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

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

@@ -1,21 +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/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/ui/primitives/code/code.tsx

@@ -1,49 +0,0 @@
-import {code, composeClassNames, FontStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, lazy, Suspense} from 'react'
-
-import {Props} from '../../types'
-
-const LazyRefractor = lazy(() => import('./refractor'))
-
-/**
- * @public
- */
-export interface CodeProps extends Omit<FontStyleProps, 'align'> {
-  /** Define the language to use for syntax highlighting. */
-  language?: string
-  size?: number | number[]
-}
-
-/**
- * @public
- */
-export const Code = forwardRef(function Code(
-  props: Props<CodeProps, 'pre'>,
-  ref: ForwardedRef<HTMLPreElement>,
-) {
-  const {
-    as: As = 'pre',
-    children,
-    className,
-    language: languageProp,
-    size = 2,
-    weight,
-    ...restProps
-  } = props
-  const language = typeof languageProp === 'string' ? languageProp : undefined
-
-  return (
-    <As
-      data-ui="Code"
-      {...restProps}
-      className={composeClassNames(className, code({size, weight}))}
-      ref={ref}
-    >
-      <Suspense fallback={<code>{children}</code>}>
-        <LazyRefractor language={language} value={children} />
-      </Suspense>
-    </As>
-  )
-})
-
-Code.displayName = 'ForwardRef(Code)'

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

@@ -1,20 +0,0 @@
-import 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 ? Refractor.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/ui/primitives/container/__workshop__/example.tsx

@@ -1,20 +0,0 @@
-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/ui/primitives/container/container.tsx

@@ -1,35 +0,0 @@
-import {composeClassNames, container, ContainerStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
-
-/**
- * @public
- */
-export interface ContainerProps extends Omit<BoxProps, 'width'>, ContainerStyleProps {}
-
-/**
- * The `Container` component wraps content layout in a defined set of widths.
- *
- * @public
- */
-export const Container = forwardRef(function Container(
-  props: Props<ContainerProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {as, className, sizing = 'border', width = 2, ...restProps} = props
-
-  return (
-    <Box
-      data-ui="Container"
-      {...restProps}
-      as={as}
-      className={composeClassNames(className, container({width}))}
-      ref={ref}
-      sizing={sizing}
-    />
-  )
-})
-
-Container.displayName = 'ForwardRef(Container)'

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

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

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

@@ -1,34 +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/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 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/ui/primitives/flex/__workshop__/gap.tsx

@@ -1,25 +0,0 @@
-import {Card, Flex, Text} from '@sanity/ui'
-
-export default function GapStory() {
-  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/ui/primitives/flex/flex.tsx

@@ -1,29 +0,0 @@
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
-
-/**
- * @public
- */
-export interface FlexProps extends Omit<BoxProps, 'display'> {
-  htmlFor?: string
-}
-
-/**
- * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
- *
- * @public
- */
-export const Flex = forwardRef(function Flex(
-  props: Props<FlexProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {as, direction = 'row', ...restProps} = props
-
-  return (
-    <Box data-ui="Flex" {...restProps} as={as} direction={direction} display="flex" ref={ref} />
-  )
-})
-
-Flex.displayName = 'ForwardRef(Flex)'