@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

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

@@ -1,103 +0,0 @@
-import {describe, expect, it, vi} from 'vitest'
-
-import {render} from '$test/utils'
-
-import {ToastContext} from './ToastContext'
-import type {ToastContextValue} from './types'
-import {useToast} from './useToast'
-
-describe('components/toast', () => {
-  describe('useToast', () => {
-    it('should get context value', async () => {
-      const log = vi.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 = vi.fn()
-
-      function Debug() {
-        try {
-          useToast()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        return (
-          <ToastContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={undefined}
-          >
-            <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 = vi.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
-
-        return (
-          <ToastContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={() => ({version: 1})}
-          >
-            <Debug />
-          </ToastContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useToast(): the context value is not compatible',
-      )
-    })
-  })
-})

package/src/core/components/toast/Toast.tsx

@@ -1,191 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {type RadiusStyleProps, toast} from '@sanity/ui/css'
-import {motion, type Variant, type Variants} from 'framer-motion'
-import {type ReactNode} from 'react'
-
-import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {Box} from '../../primitives/box/Box'
-import {Button} from '../../primitives/button/Button'
-import {Card} from '../../primitives/card/Card'
-import {Flex} from '../../primitives/flex/Flex'
-import {Stack} from '../../primitives/stack/Stack'
-import {Text} from '../../primitives/text/Text'
-import type {ComponentType, Props} from '../../types'
-
-/** @internal */
-export const DEFAULT_TOAST_ELEMENT = 'li'
-
-/** @internal */
-export type ToastOwnProps = RadiusStyleProps & {
-  closable?: boolean
-  description?: ReactNode
-  onClose?: () => void
-  title?: ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
-  duration?: number
-}
-
-/** @internal */
-export type ToastElementType = 'li' | ComponentType
-
-/** @internal */
-export type ToastProps<E extends ToastElementType = ToastElementType> = Props<ToastOwnProps, E>
-
-// 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
-
-const ROLES = {
-  error: 'alert',
-  warning: 'alert',
-  success: 'alert',
-  info: 'alert',
-} as const
-
-const STATUS_CARD_TONE = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'neutral',
-} as const
-
-const BUTTON_TONE = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'neutral',
-} as const
-
-/**
- * The `Toast` component gives feedback to users when an action has taken place.
- *
- * Toasts can be closed with a close button, or auto-dismiss when the duration expires.
- *
- * @internal
- */
-export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
-  props: ToastProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_TOAST_ELEMENT,
-    closable,
-    description,
-    duration,
-    onClose,
-    radius = 3,
-    title,
-    status,
-    ...rest
-  } = props as ToastProps<typeof DEFAULT_TOAST_ELEMENT>
-
-  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' as const, 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={as}
-      className={toast()}
-      data-ui="Toast"
-      role={role}
-      {...rest}
-      custom={visualDuration}
-      data-has-duration={hasDuration ? '' : undefined}
-      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 gap={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>
-    </MotionCard>
-  )
-}
-
-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)

package/src/core/components/toast/ToastContext.ts

@@ -1,7 +0,0 @@
-import type {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import type {ToastContextValue} from './types'
-
-export const ToastContext: Context<ToastContextValue | null> =
-  createGlobalScopedContext<ToastContextValue | null>('@sanity/ui/v3/toast', null)

package/src/core/components/toast/ToastLayer.tsx

@@ -1,54 +0,0 @@
-import {type GapStyleProps, type PaddingStyleProps, toastLayer} from '@sanity/ui/css'
-
-import {Grid} from '../../primitives/grid/Grid'
-import {useLayer} from '../../primitives/layer/useLayer'
-import type {ComponentType, Props} from '../../types'
-
-/** @internal */
-export const DEFAULT_TOAST_LAYER_ELEMENT = 'ul'
-
-/** @internal */
-export type ToastLayerOwnProps = GapStyleProps & PaddingStyleProps
-
-/** @internal */
-export type ToastLayerElementType = 'ul' | ComponentType
-
-/** @internal */
-export type ToastLayerProps<E extends ToastLayerElementType = ToastLayerElementType> = Props<
-  ToastLayerOwnProps,
-  E
->
-
-/**
- * @internal
- */
-export function ToastLayer<E extends ToastLayerElementType = typeof DEFAULT_TOAST_LAYER_ELEMENT>(
-  props: ToastLayerProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_TOAST_LAYER_ELEMENT,
-    children,
-    padding = 4,
-    paddingX,
-    paddingY,
-    gap = 3,
-  } = props as ToastLayerProps<typeof DEFAULT_TOAST_LAYER_ELEMENT>
-
-  const {zIndex} = useLayer()
-
-  return (
-    <Grid
-      as={as}
-      className={toastLayer()}
-      data-ui="ToastProvider"
-      padding={padding}
-      paddingX={paddingX}
-      paddingY={paddingY}
-      gap={gap}
-      gridTemplateColumns={1}
-      style={{zIndex}}
-    >
-      {children}
-    </Grid>
-  )
-}

package/src/core/components/toast/ToastProvider.tsx

@@ -1,112 +0,0 @@
-import type {ResponsiveProp} from '@sanity/ui/css'
-import {AnimatePresence} from 'framer-motion'
-import {startTransition, useMemo, useState} from 'react'
-
-import {useMounted} from '../../hooks/useMounted'
-import {LayerProvider} from '../../primitives/layer/LayerProvider'
-import {Toast} from './Toast'
-import {ToastContext} from './ToastContext'
-import {ToastLayer, type ToastLayerProps} from './ToastLayer'
-import {generateToastId} from './toastState'
-import type {ToastContextValue, ToastParams} from './types'
-
-type ToastState = {
-  dismiss: () => void
-  id: string
-  params: ToastParams
-}[]
-
-/** @public */
-export interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
-  children?: React.ReactNode
-  zOffset?: ResponsiveProp<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(() => {
-              if (timeoutId) {
-                clearTimeout(timeoutId)
-              }
-
-              setState((currentState) => currentState.filter((toast) => toast.id !== id))
-            })
-          }
-
-          const timeoutId = setTimeout(dismiss, duration)
-
-          /**
-           * 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,
-              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}) => (
-                <Toast
-                  key={id}
-                  closable={params.closable}
-                  description={params.description}
-                  onClose={dismiss}
-                  status={params.status}
-                  title={params.title}
-                  duration={params.duration}
-                />
-              ))}
-            </AnimatePresence>
-          </ToastLayer>
-        </LayerProvider>
-      )}
-    </ToastContext.Provider>
-  )
-}

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

@@ -1,71 +0,0 @@
-import {Box, Button, Inline, ToastProvider, useToast} from '@sanity/ui'
-
-export default function HookStory(): React.JSX.Element {
-  const toast = useToast()
-
-  return (
-    <ToastProvider>
-      <Box padding={[4, 5, 6]}>
-        <Inline gap={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="neutral"
-          />
-
-          <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/core/components/toast/__workshop__/Toast.tsx

@@ -1,28 +0,0 @@
-import {Box, Container, Toast} from '@sanity/ui'
-import {useAction, useBoolean, useSelect, useString, useText} from '@sanity/ui-workshop'
-
-import {WORKSHOP_TOAST_STATUS_OPTIONS} from '$workshop'
-
-export default function ToastStory(): React.JSX.Element {
-  const closable = useBoolean('Closable', false)
-  const title = useString('Title', 'Toast title')
-  // @ts-expect-error - TODO: fix this
-  const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS)
-  const description = useText('Description')
-  const handleClose = useAction('onClose')
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Container width={0}>
-        <Toast
-          closable={closable}
-          description={description}
-          onClose={handleClose}
-          // @ts-expect-error - TODO: fix this
-          status={status}
-          title={title}
-        />
-      </Container>
-    </Box>
-  )
-}

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

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

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

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

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

@@ -1,24 +0,0 @@
-import type {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/core/components/toast/useToast.ts

@@ -1,23 +0,0 @@
-import {useContext} from 'react'
-
-import {isRecord} from '../../lib/isRecord'
-import {ToastContext} from './ToastContext'
-import type {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
-}