@sanity/ui 0.37.3 → 0.37.4

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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,26 @@
+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

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

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

@@ -0,0 +1,100 @@
+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

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,155 @@
+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

@@ -0,0 +1,20 @@
+/**
+ * @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

@@ -0,0 +1,24 @@
+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

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

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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,105 @@
+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()
+    }
+  }
+}