@sanity/ui 3.0.0-static.1 → 3.0.0-static.11

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

@@ -0,0 +1,101 @@
+/** @jest-environment jsdom */
+
+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/ui/components/toast/toast.tsx

@@ -0,0 +1,211 @@
+import {CloseIcon} from '@sanity/icons'
+import {
+  RadiusStyleProps,
+  toast,
+  toastLoadingBar,
+  toastLoadingBarMask,
+  toastLoadingBarProgress,
+} from '@sanity/ui/css'
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {motion, type Variant, type Variants} from 'framer-motion'
+import {ReactElement, ReactNode} from 'react'
+
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
+import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
+import {ButtonTone, Props} from '../../types'
+
+/**
+ * @public
+ */
+export interface ToastProps extends RadiusStyleProps {
+  closable?: boolean
+  description?: ReactNode
+  onClose?: () => void
+  title?: ReactNode
+  status?: 'error' | 'warning' | 'success' | 'info'
+  duration?: number
+  updatedAt?: number
+}
+
+const ROLES = {
+  error: 'alert',
+  warning: 'alert',
+  success: 'alert',
+  info: 'alert',
+} as const
+
+const STATUS_CARD_TONE = {
+  error: 'critical',
+  warning: 'caution',
+  success: 'positive',
+  info: 'neutral',
+} satisfies {[key: string]: ThemeColorStateToneKey}
+
+const BUTTON_TONE = {
+  error: 'critical',
+  warning: 'caution',
+  success: 'positive',
+  info: 'neutral',
+} satisfies {[key: string]: ButtonTone}
+
+// Support pattern used by Sanity Studio, that works around the lack of `duration: Infinity` support in older @sanity/ui versions
+// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value
+const LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24
+
+/**
+ * The `Toast` component gives feedback to users when an action has taken place.
+ *
+ * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ *
+ * @public
+ */
+export function Toast(
+  props: Omit<
+    Props<ToastProps, 'div'>,
+    'onDrag' | 'onDragEnd' | 'onDragStart' | 'onAnimationStart'
+  >,
+): ReactElement {
+  const {
+    closable,
+    description,
+    duration,
+    onClose,
+    radius = 3,
+    title,
+    status,
+    updatedAt,
+    ...restProps
+  } = props
+
+  const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
+  const buttonTone = status ? BUTTON_TONE[status] : 'default'
+  const role = status ? ROLES[status] : 'status'
+
+  const prefersReducedMotion = usePrefersReducedMotion()
+
+  const visualDuration: number = prefersReducedMotion ? 0 : 0.26
+  const transition = visualDuration ? {type: 'spring', visualDuration, bounce: 0.25} : {duration: 0}
+
+  const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG
+  const initial: ContainerVariants[] = ['hidden', 'initial']
+  const animate: ContainerVariants[] = ['visible', 'slideIn']
+  const exit: ContainerVariants[] = ['hidden', 'slideOut']
+
+  return (
+    <MotionCard
+      as="li"
+      className={toast()}
+      data-ui="Toast"
+      role={role}
+      {...restProps}
+      data-has-duration={hasDuration ? '' : undefined}
+      custom={visualDuration}
+      radius={radius}
+      shadow={2}
+      tone={cardTone}
+      layout="position"
+      variants={container}
+      initial={initial}
+      animate={animate}
+      exit={exit}
+      transition={transition}
+      position="relative"
+    >
+      <MotionFlex align="flex-start" variants={content} transition={transition}>
+        <Flex flex={1} overflowX="auto" padding={3}>
+          <Stack space={3}>
+            {title && (
+              <Text size={1} weight="medium">
+                {title}
+              </Text>
+            )}
+            {description && (
+              <MotionText muted size={1} variants={content} transition={transition}>
+                {description}
+              </MotionText>
+            )}
+          </Stack>
+        </Flex>
+
+        {closable && (
+          <Box padding={1}>
+            <Button
+              as="button"
+              icon={CloseIcon}
+              mode="bleed"
+              padding={2}
+              tone={buttonTone}
+              onClick={onClose}
+              style={{verticalAlign: 'top'}}
+            />
+          </Box>
+        )}
+      </MotionFlex>
+      {hasDuration && (
+        <MotionBox className={toastLoadingBar()} variants={content} transition={transition}>
+          <Card className={toastLoadingBarMask()} tone={cardTone} radius={radius} />
+          <MotionCard
+            // const MotionToast = motion.create(Card) // StyledToast
+            // const MotionFlex = motion.create(Flex)
+            // const MotionText = motion.create(Text)
+            // const MotionLoadingBar = motion.create(Box) // LoadingBar
+            // const MotionLoadingBarProgress = motion.create(Card)
+
+            className={toastLoadingBarProgress()}
+            key={`progress-${updatedAt}`}
+            tone={cardTone}
+            initial={{scaleX: 0}}
+            animate={{scaleX: 1}}
+            transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}
+            onAnimationComplete={onClose}
+          />
+        </MotionBox>
+      )}
+    </MotionCard>
+  )
+}
+
+Toast.displayName = 'Toast'
+
+const container = {
+  initial: {y: 32, scale: 0.5, zIndex: 1},
+  hidden: {opacity: 0},
+  visible: (visualDuration: number) => {
+    if (!visualDuration) return {opacity: 1}
+
+    return {
+      opacity: 1,
+      transition: {
+        when: 'beforeChildren',
+        staggerChildren: visualDuration / 3,
+        duration: visualDuration / 3,
+      },
+    }
+  },
+  slideIn: {
+    y: 0,
+    scale: 1,
+  },
+  slideOut: {
+    zIndex: 0,
+    scale: 0.75,
+  },
+} satisfies Variants
+type ContainerVariants = keyof typeof container
+
+const content = {
+  initial: {
+    willChange: 'transform',
+  },
+  hidden: {
+    opacity: 0,
+  },
+  visible: {
+    opacity: 1,
+  },
+} satisfies Partial<Record<ContainerVariants, Variant>>
+
+const MotionCard = motion.create(Card)
+const MotionFlex = motion.create(Flex)
+const MotionText = motion.create(Text)
+const MotionBox = motion.create(Box)

package/src/ui/components/toast/toastLayer.tsx

@@ -0,0 +1,38 @@
+import {GapStyleProps, PaddingStyleProps, toastLayer} from '@sanity/ui/css'
+import {ReactNode} from 'react'
+
+import {Grid} from '../../primitives/grid'
+import {useLayer} from '../../utils'
+
+/**
+ * @public
+ */
+export interface ToastLayerProps extends GapStyleProps, PaddingStyleProps {
+  children: ReactNode
+}
+
+/**
+ * @internal
+ */
+export function ToastLayer(props: ToastLayerProps): React.JSX.Element {
+  const {children, padding = 4, paddingX, paddingY, gap = 3} = props
+  const {zIndex} = useLayer()
+
+  return (
+    <Grid
+      as="ul"
+      className={toastLayer()}
+      data-ui="ToastProvider"
+      padding={padding}
+      paddingX={paddingX}
+      paddingY={paddingY}
+      gap={gap}
+      columns={1}
+      style={{zIndex}}
+    >
+      {children}
+    </Grid>
+  )
+}
+
+ToastLayer.displayName = 'ToastLayer'

package/src/ui/components/toast/toastProvider.tsx

@@ -0,0 +1,113 @@
+import {AnimatePresence} from 'framer-motion'
+import {startTransition, useMemo, useState} from 'react'
+
+import {useMounted} from '../../hooks/useMounted'
+import {LayerProvider} from '../../utils'
+import {Toast} from './toast'
+import {ToastContext} from './toastContext'
+import {ToastLayer, type ToastLayerProps} from './toastLayer'
+import {generateToastId} from './toastState'
+import {ToastContextValue, ToastParams} from './types'
+
+type ToastState = {
+  dismiss: () => void
+  id: string
+  updatedAt: number
+  params: ToastParams
+}[]
+
+/**
+ * @public
+ */
+export interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
+  children?: React.ReactNode
+  zOffset?: number | number[]
+}
+
+/**
+ * @public
+ */
+export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
+  const {children, padding, paddingX, paddingY, gap, zOffset = 1} = props
+  const [state, setState] = useState<ToastState>([])
+  const mounted = useMounted()
+
+  const value: ToastContextValue = useMemo(() => {
+    const push = (params: ToastParams) => {
+      const id = params.id || generateToastId()
+      const duration = params.duration || 5000
+
+      startTransition(() => {
+        setState((prevState): ToastState => {
+          /**
+           * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.
+           * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.
+           * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.
+           * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.
+           */
+          if (duration === 0.01) {
+            return prevState.filter((toast) => toast.id !== id)
+          }
+
+          /**
+           * Creates a function to dismiss this specific toast.
+           * This function will be passed to the Toast component
+           * and called either on close button click or after duration.
+           */
+          const dismiss = () =>
+            startTransition(() =>
+              setState((currentState) => currentState.filter((toast) => toast.id !== id)),
+            )
+
+          /**
+           * Create updated state by:
+           * 1. Removing any existing toast with the same ID (prevents duplicates)
+           * 2. Adding the new toast with its dismiss handler
+           * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.
+           */
+          return [
+            ...prevState.filter((toast) => toast.id !== id),
+            {
+              dismiss,
+              id,
+              updatedAt: Date.now(),
+              params: {...params, duration},
+            },
+          ]
+        })
+      })
+
+      return id
+    }
+
+    return {version: 0.0, push}
+  }, [])
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      {mounted && (
+        <LayerProvider zOffset={zOffset}>
+          <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>
+            <AnimatePresence initial={false} mode="popLayout">
+              {state.map(({dismiss, id, params, updatedAt}) => (
+                <Toast
+                  key={id}
+                  closable={params.closable}
+                  description={params.description}
+                  onClose={dismiss}
+                  status={params.status}
+                  title={params.title}
+                  duration={params.duration}
+                  updatedAt={updatedAt}
+                />
+              ))}
+            </AnimatePresence>
+          </ToastLayer>
+        </LayerProvider>
+      )}
+    </ToastContext.Provider>
+  )
+}
+
+ToastProvider.displayName = 'ToastProvider'

package/src/ui/components/toast/toastState.ts

@@ -0,0 +1,6 @@
+let toastId = 0
+
+/** @internal */
+export function generateToastId(): string {
+  return String(toastId++)
+}

package/src/ui/components/toast/types.ts

@@ -0,0 +1,28 @@
+import {ReactNode} from 'react'
+
+/**
+ * @public
+ */
+export interface ToastParams {
+  closable?: boolean
+  description?: ReactNode
+  duration?: number
+  id?: string
+  onClose?: () => void
+  title?: ReactNode
+  status?: 'error' | 'warning' | 'success' | 'info'
+}
+
+/**
+ * @public
+ */
+export interface ToastContextValue {
+  version: 0.0
+  /**
+   * Creates or updates a toast notification.
+   * If a toast with the same ID already exists, it will be updated.
+   * If an ID is not provided, a random one will be generated.
+   * The returned ID can be used to programatically update a toast.
+   */
+  push: (params: ToastParams) => string
+}

package/src/ui/components/toast/useToast.ts

@@ -0,0 +1,25 @@
+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/ui/components/tree/__workshop__/basic.tsx

@@ -0,0 +1,105 @@
+import {LinkIcon} from '@sanity/icons'
+import {Box, Tree, TreeItem} 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 handleClick = useCallback((event: React.MouseEvent) => {
+    event.preventDefault()
+
+    const testid = event.currentTarget.getAttribute('data-testid')
+
+    if (testid) setId(testid)
+  }, [])
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Wrapper>
+        <Tree ref={ref} space={1}>
+          <TreeItem 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 onClick={handleClick} text="Bananas" />
+            <TreeItem onClick={handleClick} text="Pears">
+              <TreeItem onClick={handleClick} text="Anjou" />
+              <TreeItem onClick={handleClick} text="Bartlett" />
+              <TreeItem onClick={handleClick} text="Bosc" />
+              <TreeItem onClick={handleClick} text="Concorde" />
+              <TreeItem onClick={handleClick} text="Seckel" />
+              <TreeItem onClick={handleClick} text="Starkrimson" />
+            </TreeItem>
+          </TreeItem>
+          <TreeItem onClick={handleClick} text="Vegetables">
+            <TreeItem onClick={handleClick} text="Podded vegetables">
+              <TreeItem onClick={handleClick} text="Lentil" />
+              <TreeItem onClick={handleClick} text="Pea" />
+              <TreeItem onClick={handleClick} text="Peanut" />
+            </TreeItem>
+            <TreeItem onClick={handleClick} text="Bulb and stem vegetables">
+              <TreeItem onClick={handleClick} text="Asparagus" />
+              <TreeItem onClick={handleClick} text="Celery" />
+              <TreeItem onClick={handleClick} text="Leek" />
+              <TreeItem onClick={handleClick} text="Onion" />
+            </TreeItem>
+            <TreeItem onClick={handleClick} text="Root and tuberous vegetables">
+              <TreeItem onClick={handleClick} text="Carrot" />
+              <TreeItem onClick={handleClick} text="Ginger" />
+              <TreeItem onClick={handleClick} text="Parsnip" />
+              <TreeItem onClick={handleClick} text="Potato" />
+            </TreeItem>
+          </TreeItem>
+          <TreeItem onClick={handleClick} text="Grains">
+            <TreeItem onClick={handleClick} text="Cereal grains">
+              <TreeItem onClick={handleClick} text="Barley" />
+              <TreeItem onClick={handleClick} text="Oats" />
+              <TreeItem onClick={handleClick} text="Rice" />
+            </TreeItem>
+            <TreeItem onClick={handleClick} text="Pseudocereal grains">
+              <TreeItem onClick={handleClick} text="Amaranth" />
+              <TreeItem onClick={handleClick} text="Buckwheat" />
+              <TreeItem onClick={handleClick} text="Chia" />
+              <TreeItem onClick={handleClick} text="Quinoa" />
+            </TreeItem>
+            <TreeItem onClick={handleClick} text="Oilseeds">
+              <TreeItem onClick={handleClick} text="India mustard" />
+              <TreeItem onClick={handleClick} text="Safflower" />
+              <TreeItem onClick={handleClick} text="Flax seed" />
+              <TreeItem onClick={handleClick} text="Poppy seed" />
+            </TreeItem>
+          </TreeItem>
+        </Tree>
+      </Wrapper>
+    </Box>
+  )
+}