@sanity/ui 3.0.0-static.4 → 3.0.0-static.40

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

@@ -1,122 +0,0 @@
-import {_selectable, 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,
-        }),
-        selectable && _selectable({radius}),
-      )}
-      data-context-tone={context.tone}
-      data-context-scheme={context.scheme}
-      data-checkered={checkered ? '' : undefined}
-      data-focus-ring={focusRing ? '' : undefined}
-      data-pressed={pressed ? '' : undefined}
-      data-selected={selected ? '' : undefined}
-      data-tone={tone}
-      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/__workshop__/example.tsx

@@ -1,25 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-export default function ExampleStory() {
-  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/ui/primitives/checkbox/__workshop__/index.ts

@@ -1,13 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  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'))},
-  ],
-})

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

@@ -1,33 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-export default function PropsStory() {
-  const checked = useBoolean('Checked', false, 'Props')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const indeterminate = useBoolean('Indeterminate', false, 'Props')
-  const onChange = useAction('onChange')
-  const onFocus = useAction('onFocus')
-  const onBlur = useAction('onBlur')
-  const readOnly = useBoolean('Read only', false, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox
-          checked={checked}
-          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/ui/primitives/checkbox/__workshop__/readOnly.tsx

@@ -1,16 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-
-export default function ReadOnlyStory() {
-  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/ui/primitives/checkbox/__workshop__/tones.tsx

@@ -1,28 +0,0 @@
-import {Card, Checkbox, Flex, Stack} from '@sanity/ui'
-
-export default function MultipleTonesStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Stack>
-        <Card padding={3} tone="neutral">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="primary">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="suggest">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="positive">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="caution">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="critical">
-          <Checkbox />
-        </Card>
-      </Stack>
-    </Flex>
-  )
-}

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__/index.ts

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

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

@@ -1,48 +0,0 @@
-import {AddCircleIcon} from '@sanity/icons'
-import {Box, Card, Code, Flex, Stack} from '@sanity/ui'
-
-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/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 = 1,
-    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/index.ts

@@ -1 +0,0 @@
-export * from './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/__workshop__/index.ts

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

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>
-  )
-}