@sanity/ui 0.37.2 → 0.37.3

package/src/components/toast/__workshop__/hook.tsx

@@ -1,72 +0,0 @@
-import {Box, Button, Inline, ToastProvider, useToast} from '@sanity/ui'
-import React from 'react'
-
-export default function HookStory() {
-  const toast = useToast()
-
-  return (
-    <ToastProvider>
-      <Box padding={[4, 5, 6]}>
-        <Inline space={2}>
-          <Button
-            onClick={() =>
-              toast.push({
-                id: 'status',
-                closable: true,
-                title: 'Information',
-                status: 'info',
-                description: (
-                  <>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus
-                    pellentesque luctus. Curabitur sed tortor a elit tempus malesuada. Quisque sed
-                    dapibus ligula, id pulvinar nisl.
-                  </>
-                ),
-              })
-            }
-            text="Push info"
-            tone="primary"
-          />
-
-          <Button
-            onClick={() =>
-              toast.push({
-                id: 'status',
-                closable: true,
-                title: 'Warning',
-                status: 'warning',
-              })
-            }
-            text="Push warning"
-            tone="caution"
-          />
-
-          <Button
-            onClick={() =>
-              toast.push({
-                id: 'status',
-                closable: true,
-                title: 'Error',
-                status: 'error',
-              })
-            }
-            text="Push error"
-            tone="critical"
-          />
-
-          <Button
-            onClick={() =>
-              toast.push({
-                // id: 'status',
-                closable: true,
-                title: 'Some message',
-                // status: 'error',
-              })
-            }
-            text="Push some message"
-          />
-        </Inline>
-      </Box>
-    </ToastProvider>
-  )
-}

package/src/components/toast/__workshop__/index.ts

@@ -1,7 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('components/toast', 'Toast', [
-  {name: 'toast', title: 'Toast', component: lazy(() => import('./toast'))},
-  {name: 'hook', title: 'Hook', component: lazy(() => import('./hook'))},
-])

package/src/components/toast/__workshop__/toast.tsx

@@ -1,26 +0,0 @@
-import {Box, Container, Toast} from '@sanity/ui'
-import {useAction, useBoolean, useSelect, useString, useText} from '@sanity/ui-workshop'
-import React from 'react'
-import {WORKSHOP_TOAST_STATUS_OPTIONS} from '../../../__workshop__/constants'
-
-export default function ToastStory() {
-  const closable = useBoolean('Closable', false, 'Props')
-  const title = useString('Title', 'Toast title', 'Props')
-  const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS, '', 'Props') || undefined
-  const description = useText('Description', '', 'Props')
-  const handleClose = useAction('onClose')
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Container width={0}>
-        <Toast
-          closable={closable}
-          description={description}
-          onClose={handleClose}
-          status={status}
-          title={title}
-        />
-      </Container>
-    </Box>
-  )
-}

package/src/components/toast/index.ts

@@ -1,4 +0,0 @@
-export * from './toast'
-export * from './toastProvider'
-export * from './types'
-export * from './useToast'

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

@@ -1,100 +0,0 @@
-import React from 'react'
-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,87 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import React from 'react'
-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/toast/toastContext.ts

@@ -1,9 +0,0 @@
-import {createContext} from 'react'
-import {globalScope} from '../../lib/globalScope'
-import {ToastContextValue} from './types'
-
-const key = Symbol.for('@sanity/ui/context/toast')
-
-globalScope[key] = globalScope[key] || createContext<ToastContextValue | null>(null)
-
-export const ToastContext: React.Context<ToastContextValue | null> = globalScope[key]

package/src/components/toast/toastProvider.tsx

@@ -1,155 +0,0 @@
-import {AnimatePresence, motion} from 'framer-motion'
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import styled from 'styled-components'
-import {Box} from '../../primitives'
-import {Layer} from '../../utils'
-import {Toast} from './toast'
-import {ToastContext} from './toastContext'
-import {ToastContextValue, ToastParams} from './types'
-
-interface ToastState {
-  toasts: {
-    dismiss: () => void
-    id: string
-    params: ToastParams
-  }[]
-}
-
-/**
- * @public
- */
-export interface ToastProviderProps {
-  children?: React.ReactNode
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
-  zOffset?: number | number[]
-}
-
-const Root = styled(Layer)`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-`
-
-const ToastContainer = styled.div`
-  box-sizing: border-box;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  max-width: 420px;
-  width: 100%;
-`
-
-let toastId = 0
-
-/**
- * @public
- */
-export function ToastProvider(props: ToastProviderProps): React.ReactElement {
-  const {children, padding = 4, paddingX, paddingY, zOffset} = props
-  const [state, setState] = useState<ToastState>({toasts: []})
-  const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})
-
-  const push = useCallback((params: ToastParams) => {
-    const id = params.id || String(toastId++)
-    const duration = params.duration || 5000
-
-    const dismiss = () => {
-      const timeoutId = toastsRef.current[id]?.timeoutId
-
-      setState((prevState) => {
-        const idx = prevState.toasts.findIndex((t) => t.id === id)
-
-        if (idx > -1) {
-          const toasts = prevState.toasts.slice(0)
-
-          toasts.splice(idx, 1)
-
-          return {...prevState, toasts}
-        }
-
-        return prevState
-      })
-
-      if (timeoutId !== undefined) {
-        clearTimeout(timeoutId)
-        delete toastsRef.current[id]
-      }
-    }
-
-    setState((prevState) => {
-      return {
-        ...prevState,
-        toasts: prevState.toasts
-          .filter((t) => t.id !== id)
-          .concat([
-            {
-              dismiss,
-              id,
-              params: {...params, duration},
-            },
-          ]),
-      }
-    })
-
-    if (toastsRef.current[id]) {
-      clearTimeout(toastsRef.current[id].timeoutId)
-      delete toastsRef.current[id]
-    }
-
-    toastsRef.current[id] = {timeoutId: setTimeout(dismiss, duration)}
-
-    return id
-  }, [])
-
-  // clear timeouts on unmount
-  useEffect(
-    () => () => {
-      for (const {timeoutId} of Object.values(toastsRef.current)) {
-        clearTimeout(timeoutId)
-      }
-
-      toastsRef.current = {}
-    },
-    []
-  )
-
-  const value: ToastContextValue = useMemo(() => ({version: 0.0, push}), [push])
-
-  return (
-    <ToastContext.Provider value={value}>
-      {children}
-
-      <Root data-ui="ToastProvider" zOffset={zOffset}>
-        <ToastContainer>
-          <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
-            <AnimatePresence initial={false}>
-              {state.toasts.map(({dismiss, id, params}) => (
-                <motion.div
-                  animate={{opacity: 1, y: 0, scale: 1}}
-                  exit={{opacity: 0, scale: 0.5, transition: {duration: 0.2}}}
-                  initial={{opacity: 0, y: 32, scale: 0.25}}
-                  key={id}
-                  layout="position"
-                  transition={{type: 'spring', damping: 30, stiffness: 400}}
-                >
-                  <Toast
-                    closable={params.closable}
-                    description={params.description}
-                    onClose={dismiss}
-                    status={params.status}
-                    title={params.title}
-                  />
-                </motion.div>
-              ))}
-            </AnimatePresence>
-          </Box>
-        </ToastContainer>
-      </Root>
-    </ToastContext.Provider>
-  )
-}

package/src/components/toast/types.ts

@@ -1,20 +0,0 @@
-/**
- * @public
- */
-export interface ToastParams {
-  closable?: boolean
-  description?: React.ReactNode
-  duration?: number
-  id?: string
-  onClose?: () => void
-  title?: React.ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
-}
-
-/**
- * @public
- */
-export interface ToastContextValue {
-  version: 0.0
-  push: (params: ToastParams) => string
-}

package/src/components/toast/useToast.ts

@@ -1,24 +0,0 @@
-import {useContext} from 'react'
-import {isRecord} from '../../lib/isRecord'
-import {ToastContext} from './toastContext'
-import {ToastContextValue} from './types'
-
-/**
- * @public
- */
-export function useToast(): ToastContextValue {
-  const value = useContext(ToastContext)
-
-  if (!value) {
-    throw new Error('useToast(): missing context value')
-  }
-
-  // NOTE: This check is for future-compatiblity
-  // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (!isRecord(value) || value.version !== 0.0) {
-    throw new Error('useToast(): the context value is not compatible')
-  }
-
-  return value
-}

package/src/components/tree/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

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

@@ -1,68 +0,0 @@
-import {LinkIcon} from '@sanity/icons'
-import {Box, Tree, TreeItem} from '@sanity/ui'
-import React from 'react'
-
-export default function BasicStory() {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Tree space={1}>
-        <TreeItem expanded text="Fruit">
-          <TreeItem text="Oranges" />
-          <TreeItem text="Pineapple" selected />
-          <TreeItem text="Apples">
-            <TreeItem href="#apples-macintosh" icon={LinkIcon} text="Macintosh" />
-            <TreeItem text="Granny Smith" />
-            <TreeItem text="Fuji" />
-          </TreeItem>
-          <TreeItem text="Bananas" />
-          <TreeItem text="Pears">
-            <TreeItem text="Anjou" />
-            <TreeItem text="Bartlett" />
-            <TreeItem text="Bosc" />
-            <TreeItem text="Concorde" />
-            <TreeItem text="Seckel" />
-            <TreeItem text="Starkrimson" />
-          </TreeItem>
-        </TreeItem>
-        <TreeItem text="Vegetables">
-          <TreeItem text="Podded vegetables">
-            <TreeItem text="Lentil" />
-            <TreeItem text="Pea" />
-            <TreeItem text="Peanut" />
-          </TreeItem>
-          <TreeItem text="Bulb and stem vegetables">
-            <TreeItem text="Asparagus" />
-            <TreeItem text="Celery" />
-            <TreeItem text="Leek" />
-            <TreeItem text="Onion" />
-          </TreeItem>
-          <TreeItem text="Root and tuberous vegetables">
-            <TreeItem text="Carrot" />
-            <TreeItem text="Ginger" />
-            <TreeItem text="Parsnip" />
-            <TreeItem text="Potato" />
-          </TreeItem>
-        </TreeItem>
-        <TreeItem text="Grains">
-          <TreeItem text="Cereal grains">
-            <TreeItem text="Barley" />
-            <TreeItem text="Oats" />
-            <TreeItem text="Rice" />
-          </TreeItem>
-          <TreeItem text="Pseudocereal grains">
-            <TreeItem text="Amaranth" />
-            <TreeItem text="Buckwheat" />
-            <TreeItem text="Chia" />
-            <TreeItem text="Quinoa" />
-          </TreeItem>
-          <TreeItem text="Oilseeds">
-            <TreeItem text="India mustard" />
-            <TreeItem text="Safflower" />
-            <TreeItem text="Flax seed" />
-            <TreeItem text="Poppy seed" />
-          </TreeItem>
-        </TreeItem>
-      </Tree>
-    </Box>
-  )
-}

package/src/components/tree/__workshop__/index.ts

@@ -1,6 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('components/tree', 'Tree', [
-  {name: 'basic', title: 'Basic', component: lazy(() => import('./basic'))},
-])

package/src/components/tree/helpers.ts

@@ -1,105 +0,0 @@
-import {TreeState} from './types'
-
-export function _findPrevItemElement(
-  state: TreeState,
-  itemElements: HTMLElement[],
-  focusedElement: HTMLElement
-): HTMLElement | null {
-  const idx = itemElements.indexOf(focusedElement)
-  const els = itemElements.slice(0, idx)
-  const len = els.length
-
-  for (let i = len - 1; i >= 0; i -= 1) {
-    const itemKey = els[i].getAttribute('data-tree-key')
-
-    if (!itemKey) {
-      continue
-    }
-
-    const segments = itemKey.split('/')
-
-    segments.pop()
-
-    const p: string[] = []
-
-    let expanded = true
-
-    for (let j = 0; j < segments.length; j += 1) {
-      p.push(segments[j])
-
-      const k = p.join('/')
-
-      if (!state[k]?.expanded) {
-        expanded = false
-        break
-      }
-    }
-
-    if (expanded) {
-      return els[i]
-    }
-  }
-
-  return null
-}
-
-export function _findNextItemElement(
-  state: TreeState,
-  itemElements: HTMLElement[],
-  focusedElement: HTMLElement
-): HTMLElement | null {
-  const idx = itemElements.indexOf(focusedElement)
-  const els = itemElements.slice(idx)
-  const len = itemElements.length
-
-  for (let i = 1; i < len; i += 1) {
-    if (!els[i]) {
-      continue
-    }
-
-    const itemKey = els[i].getAttribute('data-tree-key')
-
-    if (!itemKey) {
-      continue
-    }
-
-    const segments = itemKey.split('/')
-
-    segments.pop()
-
-    const p: string[] = []
-
-    let expanded = true
-
-    for (let j = 0; j < segments.length; j += 1) {
-      p.push(segments[j])
-
-      const k = p.join('/')
-
-      if (!state[k]?.expanded) {
-        expanded = false
-        break
-      }
-    }
-
-    if (expanded) {
-      return els[i]
-    }
-  }
-
-  return null
-}
-
-export function _focusItemElement(el: HTMLElement): void {
-  if (el.getAttribute('role') === 'treeitem') {
-    el.focus()
-  }
-
-  if (el.getAttribute('role') === 'none') {
-    const firstChild = el.firstChild
-
-    if (firstChild && firstChild instanceof HTMLElement) {
-      firstChild.focus()
-    }
-  }
-}