@sanity/ui 4.0.0-beta.7 → 4.0.0-next.0

package/src/root/RootProvider.tsx

@@ -1,37 +0,0 @@
-import type {CardTone, ColorScheme} from '@sanity/ui-tokens'
-import type {ReactNode} from 'react'
-
-import {ToastProvider} from '../components/toast/ToastProvider'
-import {CardInternalProvider} from '../primitives/card/CardInternalProvider'
-import {CardProvider} from '../primitives/card/CardProvider'
-import {LayerProvider} from '../primitives/layer/LayerProvider'
-import {BoundaryElementProvider} from '../utils/boundaryElement/BoundaryElementProvider'
-import {PortalProvider} from '../utils/portal/PortalProvider'
-
-/** @public */
-export interface RootProviderProps {
-  boundaryElement: HTMLElement | null
-  children?: ReactNode
-  portalElement: HTMLElement | null
-  scheme: ColorScheme
-  tone: CardTone
-}
-
-/** @public */
-export function RootProvider(props: RootProviderProps): React.JSX.Element {
-  const {boundaryElement, children, portalElement, scheme, tone} = props
-
-  return (
-    <LayerProvider>
-      <CardInternalProvider root>
-        <CardProvider scheme={scheme} tone={tone}>
-          <ToastProvider>
-            <BoundaryElementProvider element={boundaryElement}>
-              <PortalProvider element={portalElement}>{children}</PortalProvider>
-            </BoundaryElementProvider>
-          </ToastProvider>
-        </CardProvider>
-      </CardInternalProvider>
-    </LayerProvider>
-  )
-}

package/src/root/__workshop__/Boundary.tsx

@@ -1,43 +0,0 @@
-import {Button, Root, Stack, Text, useCard, useToast} from '@sanity/ui'
-
-import {CardWrapper} from '$workshop'
-
-export default function BoundaryStory(): React.JSX.Element {
-  const {scheme} = useCard()
-
-  return (
-    <CardWrapper pattern="halftone">
-      <Root
-        as="div"
-        padding={4}
-        radius={5}
-        scheme={scheme}
-        shadow={3}
-        sizing="border"
-        style={{minHeight: 300}}
-      >
-        <Layout />
-      </Root>
-    </CardWrapper>
-  )
-}
-
-function Layout() {
-  const toast = useToast()
-
-  return (
-    <Stack gap={4}>
-      <Text size={1}>
-        Testing the root component. Toast messages will be rendered here, and should be contained
-        within the root element.
-      </Text>
-
-      <Button
-        mode="ghost"
-        text="Push toast message"
-        width="min"
-        onClick={() => toast.push({title: 'Hello!'})}
-      />
-    </Stack>
-  )
-}

package/src/root/__workshop__/index.ts

@@ -1,24 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'root',
-  title: 'Root',
-  stories: [
-    {
-      name: 'boundary',
-      title: 'Boundary',
-      component: lazy(() => import('./Boundary')),
-    },
-    {
-      name: 'primitives',
-      title: 'Primitives',
-      component: lazy(() => import('./primitives')),
-    },
-    {
-      name: 'tone-inheritance',
-      title: 'Tone inheritance',
-      component: lazy(() => import('./tone-inheritance')),
-    },
-  ],
-})

package/src/root/__workshop__/primitives.tsx

@@ -1,49 +0,0 @@
-import {SearchIcon} from '@sanity/icons'
-import {Badge, Card, Checkbox, Radio, Select, Switch, TextInput} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-export default function PrimitivesStory() {
-  const disabled = useBoolean('Disabled', false)
-
-  return (
-    <CardWrapper pattern="halftone">
-      <Card
-        display="flex"
-        flexDirection="column"
-        gap={4}
-        padding={4}
-        radius={5}
-        shadow={3}
-        sizing="border"
-      >
-        <Badge>Badge</Badge>
-        <TextInput
-          disabled={disabled}
-          fontSize={1}
-          icon={SearchIcon}
-          placeholder="Search"
-          radius="full"
-        />
-        <div>
-          <Checkbox disabled={disabled} />
-        </div>
-        <div>
-          <Radio disabled={disabled} />
-        </div>
-        <div>
-          <Switch disabled={disabled} />
-        </div>
-        <Select disabled={disabled} fontSize={1}>
-          <option disabled selected>
-            Choose an option
-          </option>
-          <option value="1">1</option>
-          <option value="2">2</option>
-          <option value="3">3</option>
-        </Select>
-      </Card>
-    </CardWrapper>
-  )
-}

package/src/root/__workshop__/tone-inheritance.tsx

@@ -1,65 +0,0 @@
-import {Box, Card, Code, Portal, PortalProvider, Root, Text, usePrefersDark} from '@sanity/ui'
-import {useState} from 'react'
-
-import {CardWrapper} from '$workshop'
-
-export default function ToneInheritanceStory() {
-  const dark = usePrefersDark()
-  const [cardPortal, setCardPortal] = useState<HTMLDivElement | null>(null)
-
-  return (
-    <CardWrapper pattern="halftone" tone="transparent">
-      <Root as="div" radius={4} scheme={dark ? 'dark' : 'light'} shadow={4}>
-        <Box padding={4}>
-          <Code language="jsx" size={1}>{`<Root
-  scheme=${JSON.stringify(dark ? 'dark' : 'light')}
-  tone="transparent"
-/>`}</Code>
-
-          <PortalProvider element={cardPortal}>
-            <Card
-              marginTop={4}
-              radius={4}
-              scheme={dark ? 'light' : 'dark'}
-              shadow={1}
-              tone="suggest"
-            >
-              <Box padding={4}>
-                <Code language="jsx" size={1}>{`<Card
-  scheme=${JSON.stringify(dark ? 'light' : 'dark')}
-  tone="suggest"
-/>`}</Code>
-              </Box>
-              <Portal>
-                <Card
-                  padding={4}
-                  radius={4}
-                  shadow={1}
-                  // tone="critical"
-                >
-                  <Text muted size={1}>
-                    Card in portal (card)
-                  </Text>
-                </Card>
-              </Portal>
-              <div ref={setCardPortal} />
-            </Card>
-          </PortalProvider>
-        </Box>
-
-        <Portal>
-          <Card
-            padding={4}
-            radius={4}
-            shadow={1}
-            // tone="critical"
-          >
-            <Text muted size={1}>
-              Card in portal (root)
-            </Text>
-          </Card>
-        </Portal>
-      </Root>
-    </CardWrapper>
-  )
-}

package/src/utils/ErrorBoundary.tsx

@@ -1,50 +0,0 @@
-import {Component, type ErrorInfo, type PropsWithChildren, type ReactNode} from 'react'
-
-import {Code} from '../primitives/code/Code'
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export type ErrorBoundaryProps = PropsWithChildren<{
-  onCatch: (params: {error: Error; info: ErrorInfo}) => void
-}>
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export interface ErrorBoundaryState {
-  error: Error | null
-}
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  override state: ErrorBoundaryState = {error: null}
-
-  static displayName = 'ErrorBoundary'
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    // Update state so the next render will show the fallback UI.
-    return {error}
-  }
-
-  override componentDidCatch(error: Error, info: ErrorInfo): void {
-    this.props.onCatch({error, info})
-  }
-
-  override render(): ReactNode {
-    const {error} = this.state
-
-    if (error) {
-      const message = typeof error?.message === 'string' ? error.message : 'Error'
-
-      return <Code>{message}</Code>
-    }
-
-    return this.props.children
-  }
-}

package/src/utils/boundaryElement/BoundaryElementContext.ts

@@ -1,7 +0,0 @@
-import type {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../core/lib/createGlobalScopedContext'
-import type {BoundaryElementContextValue} from './types'
-
-export const BoundaryElementContext: Context<BoundaryElementContextValue> =
-  createGlobalScopedContext<BoundaryElementContextValue>('@sanity/ui/v4/boundaryElement', null)

package/src/utils/boundaryElement/BoundaryElementProvider.tsx

@@ -1,16 +0,0 @@
-import {type ReactNode} from 'react'
-
-import {BoundaryElementContext} from './BoundaryElementContext'
-
-/** @public */
-export interface BoundaryElementProviderProps {
-  children: ReactNode
-  element: HTMLElement | null
-}
-
-/** @public */
-export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
-  const {children, element} = props
-
-  return <BoundaryElementContext value={element}>{children}</BoundaryElementContext>
-}

package/src/utils/boundaryElement/__workshop__/Plain.tsx

@@ -1,49 +0,0 @@
-import {BoundaryElementProvider, Button, Card, Text, TooltipDelayGroupProvider} from '@sanity/ui'
-import {useState} from 'react'
-
-import {CardWrapper} from '$workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-
-  return (
-    <CardWrapper pattern="halftone" tone="transparent" width={0}>
-      <Text marginBottom={4} muted size={1}>
-        Hover the button. The tooltip should render within the bounds of the box, despite of{' '}
-        <code>placement="bottom"</code>.
-      </Text>
-
-      <TooltipDelayGroupProvider>
-        <Card
-          ref={setBoundaryElement}
-          display="flex"
-          justifyContent="space-between"
-          padding={3}
-          radius={5}
-          shadow={1}
-          tone="default"
-        >
-          <BoundaryElementProvider element={boundaryElement}>
-            <Button
-              mode="ghost"
-              text="Button"
-              tooltip={{
-                placement: 'bottom',
-                text: 'Tooltip',
-              }}
-            />
-
-            <Button
-              mode="ghost"
-              text="Button"
-              tooltip={{
-                placement: 'bottom',
-                text: 'Tooltip',
-              }}
-            />
-          </BoundaryElementProvider>
-        </Card>
-      </TooltipDelayGroupProvider>
-    </CardWrapper>
-  )
-}

package/src/utils/boundaryElement/__workshop__/index.ts

@@ -1,16 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'utils/boundaryElement',
-  title: 'BoundaryElement',
-  stories: [
-    {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./Plain')),
-    },
-  ],
-}
-
-export default scope

package/src/utils/boundaryElement/types.ts

@@ -1,2 +0,0 @@
-/** @public */
-export type BoundaryElementContextValue = HTMLElement | null

package/src/utils/boundaryElement/useBoundaryElement.ts

@@ -1,12 +0,0 @@
-import {use, useMemo} from 'react'
-
-import {BoundaryElementContext} from './BoundaryElementContext'
-import type {BoundaryElementContextValue} from './types'
-
-/** @public */
-export function useBoundaryElement(): {version: 0.0; element: BoundaryElementContextValue} {
-  // eslint-disable-next-line no-warning-comments
-  // @TODO this wrapping is for BC and should be removed
-  const element = use(BoundaryElementContext)
-  return useMemo(() => ({version: 0.0, element}), [element])
-}

package/src/utils/elementQuery/ElementQuery.tsx

@@ -1,75 +0,0 @@
-import {BREAKPOINTS} from '@sanity/ui-css'
-import {useImperativeHandle, useMemo, useState} from 'react'
-
-import type {ComponentType, Props} from '../../core/types'
-import {useElementSize} from '../../hooks/useElementSize'
-import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
-
-/** @beta */
-export const DEFAULT_ELEMENT_QUERY_ELEMENT = 'div'
-
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-export type ElementQueryOwnProps = {
-  media?: number[]
-}
-
-/** @beta */
-export type ElementQueryElementType = 'div' | ComponentType
-
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-export type ElementQueryProps<E extends ElementQueryElementType = ElementQueryElementType> = Props<
-  ElementQueryOwnProps,
-  E
->
-
-const DEFAULT_BREAKPOINTS = Object.values(BREAKPOINTS)
-
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function ElementQuery<
-  E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT,
->(props: ElementQueryProps<E>): React.JSX.Element {
-  const {
-    as: Element = DEFAULT_ELEMENT_QUERY_ELEMENT,
-    children,
-    media: mediaProp,
-    ref: forwardedRef,
-    ...rest
-  } = props as ElementQueryProps<typeof DEFAULT_ELEMENT_QUERY_ELEMENT>
-
-  const breakpoints = mediaProp ?? DEFAULT_BREAKPOINTS
-
-  const [element, setElement] = useState<HTMLDivElement | null>(null)
-  const elementSize = useElementSize(element)
-  const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
-
-  const max = useMemo(() => {
-    const eq = findMaxBreakpoints(breakpoints, width)
-
-    return eq.length ? eq.join(' ') : undefined
-  }, [breakpoints, width])
-
-  const min = useMemo(() => {
-    const eq = findMinBreakpoints(breakpoints, width)
-
-    return eq.length ? eq.join(' ') : undefined
-  }, [breakpoints, width])
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => element, [
-    element,
-  ])
-
-  return (
-    <Element data-ui="ElementQuery" {...rest} ref={setElement} data-eq-max={max} data-eq-min={min}>
-      {children}
-    </Element>
-  )
-}

package/src/utils/elementQuery/__workshop__/CustomMedia.tsx

@@ -1,19 +0,0 @@
-import {Box, Card, ElementQuery, Text} from '@sanity/ui'
-
-import {testCard} from './styles.css'
-
-export default function CustomMediaQuery(): React.JSX.Element {
-  return (
-    <Box padding={4}>
-      <Box marginBottom={4}>
-        <Text>Resize this frame to see the text color change:</Text>
-      </Box>
-
-      <ElementQuery media={[0, 100, 200, 300]}>
-        <Card className={testCard} padding={3} shadow={1}>
-          <Text>This card sits inside an element query.</Text>
-        </Card>
-      </ElementQuery>
-    </Box>
-  )
-}

package/src/utils/elementQuery/__workshop__/index.ts

@@ -1,16 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'utils/elementQuery',
-  title: 'ElementQuery',
-  stories: [
-    {
-      name: 'custom-media',
-      title: 'Custom media',
-      component: lazy(() => import('./CustomMedia')),
-    },
-  ],
-}
-
-export default scope

package/src/utils/elementQuery/__workshop__/styles.css.ts

@@ -1,31 +0,0 @@
-import {vars} from '@sanity/ui'
-import {style} from '@vanilla-extract/css'
-
-export const testCard: string = style({
-  selectors: {
-    '[data-eq-min~="0"] > &': {
-      vars: {
-        [vars.color.fg]:
-          `light-dark(${vars.color.palette.orange[600]}, ${vars.color.palette.orange[400]})`,
-      },
-    },
-    '[data-eq-min~="1"] > &': {
-      vars: {
-        [vars.color.fg]:
-          `light-dark(${vars.color.palette.red[600]}, ${vars.color.palette.red[400]})`,
-      },
-    },
-    '[data-eq-min~="2"] > &': {
-      vars: {
-        [vars.color.fg]:
-          `light-dark(${vars.color.palette.magenta[600]}, ${vars.color.palette.magenta[400]})`,
-      },
-    },
-    '[data-eq-min~="3"] > &': {
-      vars: {
-        [vars.color.fg]:
-          `light-dark(${vars.color.palette.purple[600]}, ${vars.color.palette.purple[400]})`,
-      },
-    },
-  },
-})

package/src/utils/elementQuery/helpers.ts

@@ -1,27 +0,0 @@
-export function findMaxBreakpoints(media: number[], width: number): number[] {
-  const ret: number[] = []
-
-  for (let i = 0; i < media.length; i += 1) {
-    const bp = media[i]
-
-    if (bp > width) {
-      ret.push(i)
-    }
-  }
-
-  return ret
-}
-
-export function findMinBreakpoints(media: number[], width: number): number[] {
-  const ret: number[] = []
-
-  for (let i = 0; i < media.length; i += 1) {
-    const bp = media[i]
-
-    if (bp <= width) {
-      ret.push(i)
-    }
-  }
-
-  return ret
-}

package/src/utils/portal/Portal.test.tsx

@@ -1,105 +0,0 @@
-import {describe, expect, it, vi} from 'vitest'
-
-import {render} from '$test/utils'
-
-import {PortalContext} from './PortalContext'
-import type {PortalContextValue} from './types'
-import {usePortal} from './usePortal'
-
-describe('utils/portal', () => {
-  describe('usePortal', () => {
-    it('should get context value', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootPortal = usePortal()
-
-        log(rootPortal)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: PortalContextValue = {
-          version: 0.0,
-          boundaryElement: null,
-          element: null,
-        }
-
-        return (
-          <PortalContext value={value}>
-            <Debug />
-          </PortalContext>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].boundaryElement).toBe(null)
-      expect(log.mock.calls[0][0].element).toBe(null)
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          usePortal()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        return (
-          <PortalContext
-            // @ts-expect-error - we want to test the error case
-            value={undefined}
-          >
-            <Debug />
-          </PortalContext>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('usePortal(): missing context value')
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          usePortal()
-        } 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 (
-          <PortalContext
-            // @ts-expect-error - we want to test the error case
-            value={() => ({version: 1})}
-          >
-            <Debug />
-          </PortalContext>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'usePortal(): the context value is not compatible',
-      )
-    })
-  })
-})