@sanity/ui 3.0.0-static.0 → 3.0.0-static.10

package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx

@@ -1,57 +0,0 @@
-/** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * As this hook is used for top-level theming it's likely to be called while server-rendering
- * and that's why it's worth it to have a testing suite for hydration
- */
-import {waitFor} from '@testing-library/dom'
-import {hydrateRoot} from 'react-dom/client'
-
-import {usePrefersReducedMotion} from './usePrefersReducedMotion'
-
-function Log() {
-  const reduceMotion = usePrefersReducedMotion()
-
-  return <>prefers-motion: {JSON.stringify(reduceMotion)}</>
-}
-
-const originalMatchMedia = window.matchMedia
-
-describe('usePrefersReducedMotion SSR hydration', () => {
-  beforeAll(() => {
-    window.matchMedia = () =>
-      ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        matches: true,
-      }) as any
-  })
-
-  afterAll(() => {
-    window.matchMedia = originalMatchMedia
-  })
-
-  it(`hydrates without any warnings`, async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementation()
-
-    const node = document.createElement('div')
-
-    document.body.appendChild(node)
-
-    node.innerHTML = `prefers-motion: <!-- -->false`
-
-    hydrateRoot(node, <Log />)
-
-    // It's false initially
-    await waitFor(() => expect(node.innerHTML).toBe('prefers-motion: <!-- -->false'))
-
-    // After hydration it should switch to true
-    await waitFor(() => expect(node.innerHTML).toBe('prefers-motion: <!-- -->true'))
-
-    // eslint-disable-next-line no-console
-    expect(console.error).not.toHaveBeenCalled()
-
-    spy.mockReset()
-    spy.mockRestore()
-  })
-})

package/src/core/hooks/usePrefersReducedMotion.test.tsx

@@ -1,18 +0,0 @@
-/** @jest-environment node */
-import {renderToString, renderToStaticMarkup} from 'react-dom/server'
-import {usePrefersReducedMotion} from './usePrefersReducedMotion'
-
-function Log() {
-  const reduceMotion = usePrefersReducedMotion()
-
-  return <>prefers-motion: {JSON.stringify(reduceMotion)}</>
-}
-
-describe('usePrefersReducedMotion', () => {
-  it(`SSR to static markup returns false`, () => {
-    expect(renderToStaticMarkup(<Log />)).toBe('prefers-motion: false')
-  })
-  it(`SSR to markup for hydration doesn't throw`, () => {
-    expect(renderToString(<Log />)).toMatchInlineSnapshot(`"prefers-motion: <!-- -->false"`)
-  })
-})

package/src/core/hooks/usePrefersReducedMotion.ts

@@ -1,16 +0,0 @@
-import {useMatchMedia} from './useMatchMedia'
-
-/**
- * Returns true if motion should be reduced
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
- * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
- *
- * @public
- */
-export function usePrefersReducedMotion(getServerSnapshot = () => false): boolean {
-  return useMatchMedia('(prefers-reduced-motion: reduce)', getServerSnapshot)
-}

package/src/core/index.ts

@@ -1,11 +0,0 @@
-export * from './_compat'
-
-export * from './primitives'
-export * from './components'
-export * from './helpers'
-export * from './hooks'
-export * from './observers'
-export * from './styles'
-export * from './theme'
-export * from './types'
-export * from './utils'

package/src/core/lib/createGlobalScopedContext.ts

@@ -1,33 +0,0 @@
-/**
- * As `@sanity/ui` is declared as a dependency, and may be duplicated, sometimes across major versions
- * it's critical that vital react contexts are shared even when there is a duplicate.
- * If we used a model similar to `sanity` itself, or `styled-components`, this would be unnecessary as
- * those libraries enforce single instances.
- * Since we don't enforce it we have to support a sanity plugin being able to call hooks like `useToast`, and then
- * read the context setup by `sanity`, which calls `ToastProvider`, even if the provider and hook are different instances in memory.
- * It's also why it's vital that all changes to globally scoped providers remain fully backwards compatible to v1.
- */
-
-import {createContext, type Context} from 'react'
-import {globalScope} from './globalScope'
-
-export function createGlobalScopedContext<ContextType, const T extends ContextType = ContextType>(
-  /**
-   * Enforce that all Symbol.for keys used for globally scoped contexts have a predictable prefix
-   */
-  key: `@sanity/ui/context/${string}`,
-  defaultValue: T,
-): Context<ContextType> {
-  const symbol = Symbol.for(key)
-
-  /**
-   * Prevent errors about re-renders on React SSR on Next.js App Router
-   */
-  if (typeof document === 'undefined') {
-    return createContext<ContextType>(defaultValue)
-  }
-
-  globalScope[symbol] = globalScope[symbol] || createContext<T>(defaultValue)
-
-  return globalScope[symbol]
-}

package/src/core/lib/globalScope.ts

@@ -1,20 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * Gets the global scope instance in a given environment.
- *
- * The strategy is to return the most modern, and if not, the most common:
- * - The `globalThis` variable is the modern approach to accessing the global scope
- * - The `window` variable is the global scope in a web browser
- * - The `self` variable is the global scope in workers and others
- * - The `global` variable is the global scope in Node.js
- */
-function getGlobalScope() {
-  if (typeof globalThis !== 'undefined') return globalThis
-  if (typeof window !== 'undefined') return window
-  if (typeof self !== 'undefined') return self
-  if (typeof global !== 'undefined') return global
-
-  throw new Error('@sanity/ui: could not locate global scope')
-}
-
-export const globalScope = getGlobalScope() as any

package/src/core/lib/styled/elements.ts

@@ -1,135 +0,0 @@
-export const elements = [
-  'a',
-  'abbr',
-  'address',
-  'area',
-  'article',
-  'aside',
-  'audio',
-  'b',
-  'base',
-  'bdi',
-  'bdo',
-  'big',
-  'blockquote',
-  'body',
-  'br',
-  'button',
-  'canvas',
-  'caption',
-  'cite',
-  'code',
-  'col',
-  'colgroup',
-  'data',
-  'datalist',
-  'dd',
-  'del',
-  'details',
-  'dfn',
-  'dialog',
-  'div',
-  'dl',
-  'dt',
-  'em',
-  'embed',
-  'fieldset',
-  'figcaption',
-  'figure',
-  'footer',
-  'form',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'header',
-  'hgroup',
-  'hr',
-  'html',
-  'i',
-  'iframe',
-  'img',
-  'input',
-  'ins',
-  'kbd',
-  'keygen',
-  'label',
-  'legend',
-  'li',
-  'link',
-  'main',
-  'map',
-  'mark',
-  'menu',
-  'menuitem',
-  'meta',
-  'meter',
-  'nav',
-  'noscript',
-  'object',
-  'ol',
-  'optgroup',
-  'option',
-  'output',
-  'p',
-  'param',
-  'picture',
-  'pre',
-  'progress',
-  'q',
-  'rp',
-  'rt',
-  'ruby',
-  's',
-  'samp',
-  'script',
-  'section',
-  'select',
-  'small',
-  'source',
-  'span',
-  'strong',
-  'style',
-  'sub',
-  'summary',
-  'sup',
-  'table',
-  'tbody',
-  'td',
-  'textarea',
-  'tfoot',
-  'th',
-  'thead',
-  'time',
-  'tr',
-  'track',
-  'u',
-  'ul',
-  'use',
-  'var',
-  'video',
-  'wbr', // SVG
-  'circle',
-  'clipPath',
-  'defs',
-  'ellipse',
-  'foreignObject',
-  'g',
-  'image',
-  'line',
-  'linearGradient',
-  'marker',
-  'mask',
-  'path',
-  'pattern',
-  'polygon',
-  'polyline',
-  'radialGradient',
-  'rect',
-  'stop',
-  'svg',
-  'text',
-  'tspan',
-] as const

package/src/core/lib/styled/index.ts

@@ -1,2 +0,0 @@
-export * from './members'
-export * from './styled'

package/src/core/lib/styled/members.ts

@@ -1,15 +0,0 @@
-import {
-  css as _css,
-  createGlobalStyle as _createGlobalStyle,
-  type ExecutionContext as _ExecutionContext,
-  keyframes as _keyframes,
-  ThemeProvider as _ThemeProvider,
-  useTheme as _useTheme,
-} from 'styled-components'
-
-export const createGlobalStyle = _createGlobalStyle
-export const css = _css
-export type ExecutionContext = _ExecutionContext
-export const keyframes = _keyframes
-export const ThemeProvider = _ThemeProvider
-export const useTheme = _useTheme

package/src/core/lib/styled/styled.ts

@@ -1,79 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-import {createElement, forwardRef} from 'react'
-import {styled as _styled} from 'styled-components'
-import {elements} from './elements'
-
-const baseStyled = (tagName: string): any => {
-  const m = (_strings: TemplateStringsArray, ..._interpolations: any[]) => {
-    const Styled = forwardRef(function Styled(props: any, ref: any) {
-      const {as, forwardedAs, ...rest} = props
-
-      const sanitizedProps = Object.fromEntries(
-        Object.entries(rest)
-          .filter(([, val]) => Boolean(val) && (!isArray(val) || val.length > 0))
-          .map(([key, val]) => {
-            if (key.startsWith('$')) {
-              return [`data-${toSnakeCase(key.slice(1))}`, val]
-            }
-
-            return [key, val]
-          }),
-      )
-
-      const t = as ?? tagName
-
-      return createElement(t, {...sanitizedProps, as: forwardedAs, ref})
-    })
-
-    Styled.displayName = `Styled(${typeof tagName === 'function' ? (tagName as any).displayName : tagName})`
-
-    return Styled
-  }
-
-  m['attrs'] = (attrs: any) => {
-    return (_strings: TemplateStringsArray, ..._interpolations: any[]) => {
-      const StyledAttrs = forwardRef(function StyledAttrs(_props: any, ref: any) {
-        const props = {...attrs, ..._props}
-        const {as, forwardedAs, ...rest} = props
-
-        const sanitizedProps = Object.fromEntries(
-          Object.entries(rest)
-            .filter(([, val]) => Boolean(val) && (!isArray(val) || val.length > 0))
-            .map(([key, val]) => {
-              if (key.startsWith('$')) {
-                return [`data-${toSnakeCase(key.slice(1))}`, val]
-              }
-
-              return [key, val]
-            }),
-        )
-
-        const t = as ?? tagName
-
-        return createElement(t, {...sanitizedProps, as: forwardedAs, ref})
-      })
-
-      StyledAttrs.displayName = `StyledAttrs(${typeof tagName === 'function' ? (tagName as any).displayName : tagName})`
-
-      return StyledAttrs
-    }
-  }
-
-  return m
-}
-
-export const styled = baseStyled as typeof _styled
-
-for (const tagName of elements) {
-  ;(styled as any)[tagName] = baseStyled(tagName)
-}
-
-function toSnakeCase(str: string): string {
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
-}
-
-function isArray(value: unknown): value is unknown[] {
-  return Array.isArray(value)
-}

package/src/core/primitives/_selectable/selectable.tsx

@@ -1,27 +0,0 @@
-import {composeClassNames, selectable, SelectableStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, HTMLProps} from 'react'
-import {SelectableTone} from '../../types'
-import {Box, BoxProps} from '../box'
-
-/** @internal */
-export interface SelectableProps extends BoxProps, SelectableStyleProps {
-  tone?: SelectableTone
-}
-
-/** @internal */
-export const Selectable = forwardRef(function Selectable(
-  props: SelectableProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'wrap' | 'width'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, radius, tone, ...restProps} = props
-
-  return (
-    <Box
-      {...restProps}
-      className={composeClassNames(className, selectable({radius, tone}))}
-      ref={ref}
-    />
-  )
-})
-
-Selectable.displayName = 'ForwardRef(Selectable)'

package/src/core/primitives/avatar/__workshop__/.eslintrc

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

package/src/core/primitives/avatar/__workshop__/asButton.tsx

@@ -1,13 +0,0 @@
-import {Avatar, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function AsButtonStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Avatar as="button" color="purple" initials="uq" size={size} />
-    </Flex>
-  )
-}

package/src/core/primitives/avatar/__workshop__/stack.tsx

@@ -1,24 +0,0 @@
-import {Avatar, AvatarCounter, AvatarStack, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function StackStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <AvatarStack size={size}>
-        <AvatarCounter count={2} />
-        <Avatar color="magenta" initials="uq" />
-        <Avatar
-          color="purple"
-          src="https://avatars3.githubusercontent.com/u/406933?s=400&u=af898b0a50ef2ef1248be32dfa1410ccb55f6f65&v=4"
-        />
-        <Avatar
-          color="blue"
-          src="https://avatars3.githubusercontent.com/u/406933?s=400&u=af898b0a50ef2ef1248be32dfa1410ccb55f6f65&v=4"
-        />
-      </AvatarStack>
-    </Flex>
-  )
-}

package/src/core/primitives/avatar/__workshop__/withinButton.tsx

@@ -1,62 +0,0 @@
-import {useBoolean} from '@sanity/ui-workshop'
-import {Box} from '../../box'
-import {Button} from '../../button'
-import {Container} from '../../container'
-import {Flex} from '../../flex'
-import {Stack} from '../../stack'
-import {Text} from '../../text'
-import {Avatar} from '../avatar'
-import {AvatarStack} from '../avatarStack'
-
-export default function WithinButtonStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-
-  return (
-    <Container width={1}>
-      <Stack paddingX={4} paddingY={[5, 6, 7]} space={1}>
-        <Button disabled={disabled} padding={1}>
-          <Flex align="center" gap={3} padding={2}>
-            <Box flex={1}>
-              <Text size={1}>Default button</Text>
-            </Box>
-            <Box flex="none">
-              <AvatarStack>
-                <Avatar color="blue" initials="AB" />
-                <Avatar color="magenta" initials="CD" />
-                <Avatar color="purple" initials="EF" />
-              </AvatarStack>
-            </Box>
-          </Flex>
-        </Button>
-        <Button disabled={disabled} mode="ghost" padding={1}>
-          <Flex align="center" gap={3} padding={2}>
-            <Box flex={1}>
-              <Text size={1}>Ghost button</Text>
-            </Box>
-            <Box flex="none">
-              <AvatarStack>
-                <Avatar color="blue" initials="AB" />
-                <Avatar color="magenta" initials="CD" />
-                <Avatar color="purple" initials="EF" />
-              </AvatarStack>
-            </Box>
-          </Flex>
-        </Button>
-        <Button disabled={disabled} mode="bleed" padding={1}>
-          <Flex align="center" gap={3} padding={2}>
-            <Box flex={1}>
-              <Text size={1}>Bleed button</Text>
-            </Box>
-            <Box flex="none">
-              <AvatarStack>
-                <Avatar color="blue" initials="AB" />
-                <Avatar color="magenta" initials="CD" />
-                <Avatar color="purple" initials="EF" />
-              </AvatarStack>
-            </Box>
-          </Flex>
-        </Button>
-      </Stack>
-    </Container>
-  )
-}

package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx

@@ -1,69 +0,0 @@
-import {useBoolean} from '@sanity/ui-workshop'
-import {Menu, MenuItem} from '../../../components'
-import {Layer} from '../../../utils'
-import {Box} from '../../box'
-import {Card} from '../../card'
-import {Container} from '../../container'
-import {Flex} from '../../flex'
-import {Text} from '../../text'
-import {Avatar} from '../avatar'
-import {AvatarStack} from '../avatarStack'
-
-export default function WithinMenuItemStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-
-  return (
-    <Container width={1}>
-      <Layer>
-        <Box paddingX={4} paddingY={[5, 6, 7]}>
-          <Card radius={3} shadow={3}>
-            <Menu space={1}>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-            </Menu>
-          </Card>
-        </Box>
-      </Layer>
-    </Container>
-  )
-}