@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/components/skeleton/textSkeleton.tsx

@@ -1,120 +0,0 @@
-import {forwardRef} from 'react'
-import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {_responsive} from '../../styles'
-import {Theme, ThemeFontKey} from '../../theme'
-import {Skeleton, SkeletonProps} from './skeleton'
-
-const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>(({
-  $size,
-  $style,
-  theme,
-}: {
-  $size: number[]
-  $style: ThemeFontKey
-  theme: Theme
-}) => {
-  const {media} = theme.sanity
-  const font = theme.sanity.fonts[$style]
-
-  const styles = _responsive(media, $size, (sizeIndex) => {
-    const fontSize = font.sizes[sizeIndex]
-    const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
-
-    return {height: capHeight}
-  })
-
-  return styles
-})
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface TextSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface LabelSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface HeadingSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface CodeSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const TextSkeleton = forwardRef(function TextSkeleton(
-  props: TextSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="text" />
-})
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const LabelSkeleton = forwardRef(function TextSkeleton(
-  props: LabelSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="label" />
-})
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const HeadingSkeleton = forwardRef(function TextSkeleton(
-  props: HeadingSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="heading" />
-})
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const CodeSkeleton = forwardRef(function TextSkeleton(
-  props: CodeSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="code" />
-})

package/src/components/tab/tab.tsx

@@ -1,100 +0,0 @@
-import {forwardRef, useCallback, useEffect, useRef} from 'react'
-import styled from 'styled-components'
-import {useForwardedRef} from '../../hooks'
-import {Button} from '../../primitives'
-import {ButtonTone} from '../../types'
-
-/**
- * @public
- */
-export interface TabProps {
-  /**
-   * The `id` of the correlating `TabPanel` component.
-   */
-  'aria-controls': string
-  id: string
-  icon?: React.ElementType | React.ReactNode
-  focused?: boolean
-  fontSize?: number | number[]
-  label?: React.ReactNode
-  padding?: number | number[]
-  selected?: boolean
-  tone?: ButtonTone
-}
-
-const CustomButton = styled(Button)`
-  max-width: 100%;
-`
-
-/**
- * @public
- */
-export const Tab = forwardRef(function Tab(
-  props: TabProps &
-    Omit<React.HTMLProps<HTMLButtonElement>, 'aria-controls' | 'as' | 'id' | 'label' | 'type'>,
-  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
-) {
-  const {
-    icon,
-    id,
-    focused,
-    fontSize = 1,
-    label,
-    onClick,
-    onFocus,
-    padding = 2,
-    selected,
-    ...restProps
-  } = props
-  const elementRef = useRef<HTMLButtonElement | null>(null)
-  const focusedRef = useRef(false)
-
-  const handleBlur = useCallback(() => {
-    focusedRef.current = false
-  }, [])
-
-  const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLButtonElement>) => {
-      focusedRef.current = true
-      if (onFocus) onFocus(event)
-    },
-    [onFocus],
-  )
-
-  const ref = useForwardedRef(forwardedRef)
-
-  useEffect(() => {
-    if (focused && !focusedRef.current) {
-      if (elementRef.current) elementRef.current.focus()
-      focusedRef.current = true
-    }
-  }, [focused])
-
-  const setRef = (el: HTMLButtonElement | null) => {
-    elementRef.current = el
-    ref.current = el
-  }
-
-  return (
-    <CustomButton
-      data-ui="Tab"
-      {...restProps}
-      aria-selected={selected ? 'true' : 'false'}
-      fontSize={fontSize}
-      icon={icon}
-      id={id}
-      mode="bleed"
-      onClick={onClick}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-      padding={padding}
-      radius="full"
-      ref={setRef}
-      role="tab"
-      selected={selected}
-      tabIndex={selected ? 0 : -1}
-      text={label}
-      type="button"
-    />
-  )
-})

package/src/components/toast/toast.test.tsx

@@ -1,102 +0,0 @@
-/** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import {render} from '../../../test'
-import {ToastContext} from './toastContext'
-import {ToastContextValue} from './types'
-import {useToast} from './useToast'
-
-describe('components/toast', () => {
-  describe('useToast', () => {
-    it('should get context value', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        const rootToast = useToast()
-
-        log(rootToast)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: ToastContextValue = {
-          version: 0.0,
-          push: () => '',
-        }
-
-        return (
-          <ToastContext.Provider value={value}>
-            <Debug />
-          </ToastContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(typeof log.mock.calls[0][0].push).toBe('function')
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          useToast()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        const value = undefined
-
-        return (
-          <ToastContext.Provider value={value as any}>
-            <Debug />
-          </ToastContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useToast(): missing context value')
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          useToast()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
-
-        return (
-          <ToastContext.Provider value={value as any}>
-            <Debug />
-          </ToastContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useToast(): the context value is not compatible',
-      )
-    })
-  })
-})

package/src/components/toast/toast.tsx

@@ -1,86 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import styled from 'styled-components'
-import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
-import {ThemeColorToneKey} from '../../theme'
-
-/**
- * @public
- */
-export interface ToastProps {
-  closable?: boolean
-  description?: React.ReactNode
-  onClose?: () => void
-  title?: React.ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
-}
-
-const STATUS_CARD_TONE: {[key: string]: ThemeColorToneKey} = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'primary',
-}
-
-const ROLES = {
-  error: 'alert',
-  warning: 'alert',
-  success: 'alert',
-  info: 'alert',
-}
-
-const Root = styled(Card)`
-  pointer-events: all;
-`
-
-const TextBox = styled(Flex)`
-  overflow-x: auto;
-`
-
-/**
- * @public
- */
-export function Toast(
-  props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
-): React.ReactElement {
-  const {closable, description, onClose, title, status, ...restProps} = props
-  const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
-  const role = status ? ROLES[status] : 'status'
-
-  return (
-    <Root
-      data-ui="Toast"
-      role={role}
-      {...restProps}
-      marginTop={3}
-      radius={2}
-      shadow={2}
-      tone={cardTone}
-    >
-      <Flex align="flex-start">
-        <TextBox flex={1} padding={3}>
-          <Stack space={3}>
-            {title && <Text weight="semibold">{title}</Text>}
-            {description && (
-              <Text muted size={1}>
-                {description}
-              </Text>
-            )}
-          </Stack>
-        </TextBox>
-
-        {closable && (
-          <Box padding={1}>
-            <Button
-              as="button"
-              icon={CloseIcon}
-              mode="bleed"
-              padding={2}
-              onClick={onClose}
-              style={{verticalAlign: 'top'}}
-            />
-          </Box>
-        )}
-      </Flex>
-    </Root>
-  )
-}

package/src/components/tree/__workshop__/tabFromElement.tsx

@@ -1,83 +0,0 @@
-import {LinkIcon} from '@sanity/icons'
-import {Box, TextInput, Tree, TreeItem, Text} from '@sanity/ui'
-import {usePerfTest} from '@sanity/ui-workshop/plugin-perf'
-import {useCallback, useState} from 'react'
-import {perfTests} from './basic.perf'
-
-export default function BasicStory() {
-  const {ref, Wrapper} = usePerfTest(perfTests[0])
-
-  const [id, setId] = useState('')
-  const [focus, setFocus] = useState('')
-
-  const handleClick = useCallback((event: React.MouseEvent) => {
-    event.preventDefault()
-
-    const testid = event.currentTarget.getAttribute('data-testid')
-
-    if (testid) setId(testid)
-  }, [])
-
-  const handleFocus = useCallback((event: React.FocusEvent<HTMLDivElement>) => {
-    const elementFocus = event.target.getAttribute('data-testid')
-    if (elementFocus) setFocus(elementFocus)
-  }, [])
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Box paddingY={3}>
-        <Text>
-          This example is to demonstrate that when you tab from an outside element (using the
-          keyboard to navigate), you can still access the tree and tree item. Press the input
-          beneath and start tabbing / using the arrow.
-        </Text>
-      </Box>
-      <Box paddingY={3}>
-        <Text>Focus: {focus}</Text>
-      </Box>
-      <Wrapper>
-        <TextInput />
-        <Tree ref={ref} space={1} onFocus={handleFocus}>
-          <TreeItem data-testid="fruit" onClick={handleClick} expanded text="Fruit">
-            <TreeItem
-              data-testid="oranges"
-              onClick={handleClick}
-              selected={id === 'oranges'}
-              text="Oranges"
-            />
-            <TreeItem
-              data-testid="pineapples"
-              onClick={handleClick}
-              text="Pineapples"
-              selected={id === 'pineapples'}
-            />
-            <TreeItem data-testid="apples" onClick={handleClick} text="Apples">
-              <TreeItem
-                data-testid="apples/macintosh"
-                onClick={handleClick}
-                href="/apples/macintosh"
-                icon={LinkIcon}
-                text="Macintosh"
-              />
-              <TreeItem
-                data-testid="apples/granny-smith"
-                onClick={handleClick}
-                text="Granny Smith"
-              />
-              <TreeItem data-testid="apples/fuji" onClick={handleClick} text="Fuji" />
-            </TreeItem>
-            <TreeItem data-testid="bananas" onClick={handleClick} text="Bananas" />
-            <TreeItem data-testid="pears" onClick={handleClick} text="Pears">
-              <TreeItem data-testid="pears/anjou" onClick={handleClick} text="Anjou" />
-              <TreeItem data-testid="pears/bartlett" onClick={handleClick} text="Bartlett" />
-              <TreeItem data-testid="pears/bosc" onClick={handleClick} text="Bosc" />
-              <TreeItem data-testid="pears/concorde" onClick={handleClick} text="Concorde" />
-              <TreeItem data-testid="pears/seckel" onClick={handleClick} text="Seckel" />
-              <TreeItem data-testid="pears/starkrimson" onClick={handleClick} text="Starkrimson" />
-            </TreeItem>
-          </TreeItem>
-        </Tree>
-      </Wrapper>
-    </Box>
-  )
-}

package/src/components/tree/style.ts

@@ -1,106 +0,0 @@
-import {css} from 'styled-components'
-import {rem, ThemeProps} from '../../styles'
-import {
-  _colorVarStyleActive,
-  _colorVarStyleHover,
-  _colorVarStyleSelected,
-} from '../../styles/colorVars'
-import {cssVars} from '../../theme'
-import {cardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
-
-export function treeItemRootStyle(): ReturnType<typeof css> {
-  return css`
-    &[role='none'] > [role='treeitem'] {
-      outline: none;
-      cursor: default;
-      border-radius: 3px;
-
-      &:focus {
-        position: relative;
-      }
-    }
-
-    &[role='treeitem'] {
-      outline: none;
-
-      & > div {
-        cursor: default;
-        border-radius: 3px;
-      }
-
-      &:focus > div {
-        position: relative;
-      }
-    }
-  `
-}
-
-export function treeItemRootColorStyle(): ReturnType<typeof css> {
-  return css`
-    /* <div role="none"><a data-ui="TreeItem__box" role="treeitem" tabIndex="0"></div> */
-    &[role='none'] {
-      & > [role='treeitem'] {
-        ${cardVariables}
-
-        background-color:${cssVars.mutable['bg-color']};
-        color: var(--treeitem-fg-color);
-      }
-
-      &[data-selected] > [role='treeitem'] {
-        ${_colorVarStyleActive()}
-      }
-
-      @media (hover: hover) {
-        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
-          ${_colorVarStyleHover()}
-        }
-
-        & > [role='treeitem']:focus {
-          ${_colorVarStyleSelected()}
-        }
-      }
-    }
-
-    /* <div role="treeitem" tabIndex="0"><div data-ui="TreeItem__box"></div> */
-    &[role='treeitem'] {
-      & > [data-ui='TreeItem__box'] {
-        ${cardVariables}
-        background-color: ${cssVars.mutable['bg-color']};
-        color: ${cssVars.mutable['fg-color']};
-      }
-
-      &[data-selected] > [data-ui='TreeItem__box'] {
-        ${_colorVarStyleActive()}
-      }
-
-      @media (hover: hover) {
-        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
-          ${_colorVarStyleHover()}
-        }
-
-        &:focus > [data-ui='TreeItem__box'] {
-          ${_colorVarStyleSelected()}
-        }
-      }
-    }
-  `
-}
-
-export interface TreeItemBoxStyleProps {
-  $level: number
-}
-
-export function treeItemBoxStyle(
-  props: TreeItemBoxStyleProps & ThemeProps,
-): ReturnType<typeof css> {
-  const {$level, theme} = props
-  const {space} = theme.sanity
-
-  return css`
-    padding-left: ${rem(space[2] * $level)};
-
-    &[data-as='a'] {
-      text-decoration: none;
-    }
-  `
-}