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

package/src/ui/_compat/theme/theme.test.tsx

@@ -0,0 +1,73 @@
+/** @jest-environment jsdom */
+
+import {buildTheme} from '@sanity/ui/theme'
+
+import {render} from '../../../../test'
+import {ThemeContext} from './themeContext'
+import {ThemeContextValue} from './types'
+import {useRootTheme} from './useRootTheme'
+
+describe('theme', () => {
+  describe('useRootTheme', () => {
+    it('should get context value', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        const rootTheme = useRootTheme()
+
+        log(rootTheme)
+
+        return <>debug</>
+      }
+
+      function Root() {
+        const value: ThemeContextValue = {
+          version: 0.0,
+          scheme: 'light',
+          theme: buildTheme(),
+          tone: 'default',
+        }
+
+        return (
+          <ThemeContext.Provider value={value}>
+            <Debug />
+          </ThemeContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(log.mock.calls[0][0].scheme).toBe('light')
+      expect(log.mock.calls[0][0].tone).toBe('default')
+    })
+
+    it('should fail when no context value is provided', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        try {
+          useRootTheme()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        const value = undefined
+
+        return (
+          <ThemeContext.Provider value={value as any}>
+            <Debug />
+          </ThemeContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual('useRootTheme(): missing context value')
+    })
+  })
+})

package/src/ui/_compat/theme/themeColorProvider.tsx

@@ -0,0 +1,30 @@
+import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {ReactElement, ReactNode} from 'react'
+
+import {ThemeProvider} from './themeProvider'
+import {useRootTheme} from './useRootTheme'
+
+/**
+ * @public
+ */
+export interface ThemeColorProviderProps {
+  children?: ReactNode
+  scheme?: ThemeColorSchemeKey
+  tone?: ThemeColorCardToneKey
+}
+
+/**
+ * @public
+ */
+export function ThemeColorProvider(props: ThemeColorProviderProps): ReactElement {
+  const {children, scheme, tone} = props
+  const root = useRootTheme()
+
+  return (
+    <ThemeProvider scheme={scheme || root.scheme} theme={root.theme} tone={tone}>
+      {children}
+    </ThemeProvider>
+  )
+}
+
+ThemeColorProvider.displayName = 'ThemeColorProvider'

package/src/ui/_compat/theme/themeContext.ts

@@ -0,0 +1,10 @@
+import {Context} from 'react'
+
+import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
+import {ThemeContextValue} from './types'
+
+/**
+ * @internal
+ */
+export const ThemeContext: Context<ThemeContextValue | null> =
+  createGlobalScopedContext<ThemeContextValue | null>('@sanity/ui/context/theme', null)

package/src/ui/_compat/theme/themeProvider.tsx

@@ -0,0 +1,74 @@
+import {
+  getScopedTheme,
+  type RootTheme,
+  type Theme,
+  type ThemeColorCardToneKey,
+  type ThemeColorSchemeKey,
+} from '@sanity/ui/theme'
+import {ReactElement, ReactNode, useContext, useMemo} from 'react'
+import {ThemeProvider as StyledThemeProvider} from 'styled-components'
+
+import {CardProvider} from '../../primitives/card/cardProvider'
+import {ThemeColorProvider} from './themeColorProvider'
+import {ThemeContext} from './themeContext'
+import {ThemeContextValue} from './types'
+
+/**
+ * @public
+ */
+export interface ThemeProviderProps {
+  children?: ReactNode
+  scheme?: ThemeColorSchemeKey
+  theme?: RootTheme
+  tone?: ThemeColorCardToneKey
+}
+
+/**
+ * @public
+ */
+export function ThemeProvider(props: ThemeProviderProps): ReactElement {
+  const parentTheme = useContext(ThemeContext)
+  const {children} = props
+  const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
+  const rootTheme = props.theme ?? (parentTheme?.theme || null)
+  const tone = props.tone ?? (parentTheme?.tone || 'default')
+
+  const themeContext: ThemeContextValue | null = useMemo(() => {
+    if (!rootTheme) return null
+
+    return {
+      version: 0.0,
+      theme: rootTheme,
+      scheme,
+      tone,
+    }
+  }, [rootTheme, scheme, tone])
+
+  const theme: Theme | null = useMemo(() => {
+    if (!rootTheme) return null
+
+    return getScopedTheme(rootTheme, scheme, tone)
+  }, [scheme, rootTheme, tone])
+
+  if (!theme) {
+    return <pre>ThemeProvider: no "theme" property provided</pre>
+  }
+
+  return (
+    <CardProvider
+      compat_provider={
+        // Render a theme provider around the card if the scheme or tone differs from the root theme.
+        // This is needed for backwards compatibility with the legacy theme API.
+        ThemeColorProvider
+      }
+      scheme={scheme}
+      tone={tone}
+    >
+      <ThemeContext.Provider value={themeContext}>
+        <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
+      </ThemeContext.Provider>
+    </CardProvider>
+  )
+}
+
+ThemeProvider.displayName = 'ThemeProvider'

package/src/ui/_compat/theme/useRootTheme.ts

@@ -0,0 +1,17 @@
+import {useContext} from 'react'
+
+import {ThemeContext} from './themeContext'
+import {ThemeContextValue} from './types'
+
+/**
+ * @public
+ */
+export function useRootTheme(): ThemeContextValue {
+  const value = useContext(ThemeContext)
+
+  if (!value) {
+    throw new Error('useRootTheme(): missing context value')
+  }
+
+  return value as unknown as ThemeContextValue
+}

package/src/ui/_compat/theme/useTheme.ts

@@ -0,0 +1,16 @@
+import {getTheme_v2, Theme, Theme_v2} from '@sanity/ui/theme'
+import {useTheme as useStyledTheme} from 'styled-components'
+
+/**
+ * @public
+ */
+export function useTheme(): Theme {
+  return useStyledTheme() as Theme
+}
+
+/**
+ * @public
+ */
+export function useTheme_v2(): Theme_v2 {
+  return getTheme_v2(useStyledTheme() as Theme)
+}

package/src/ui/_compat/types.ts

@@ -0,0 +1,274 @@
+// This file re-exports API members which existed in the `@sanity/ui` export in v1.
+
+import {
+  type BaseTheme as _BaseTheme,
+  buildTheme,
+  type HSL as _HSL,
+  type PartialThemeColorBuilderOpts,
+  type RGB as _RGB,
+  type RootTheme as _RootTheme,
+  type Theme as _Theme,
+  type ThemeAvatar,
+  type ThemeBoxShadow,
+  type ThemeColor,
+  type ThemeColorBase,
+  type ThemeColorBuilderOpts,
+  type ThemeColorButton,
+  type ThemeColorButtonModeKey as _ThemeColorButtonModeKey,
+  type ThemeColorButtonState,
+  type ThemeColorButtonStates,
+  type ThemeColorButtonTones,
+  type ThemeColorCard,
+  type ThemeColorCardState,
+  type ThemeColorGenericState,
+  type ThemeColorInput,
+  type ThemeColorInputState,
+  type ThemeColorInputStates,
+  type ThemeColorMuted,
+  type ThemeColorMutedTone,
+  type ThemeColorName,
+  type ThemeColorScheme,
+  type ThemeColorSchemeKey as _ThemeColorSchemeKey,
+  type ThemeColorSchemes,
+  type ThemeColorSelectable,
+  type ThemeColorSelectableState,
+  type ThemeColorSelectableStates,
+  type ThemeColorSolid,
+  type ThemeColorSolidTone,
+  type ThemeColorSpot,
+  type ThemeColorSpotKey,
+  type ThemeColorSyntax as _ThemeColorSyntax,
+  type ThemeColorToneKey,
+  type ThemeFont as _ThemeFont,
+  type ThemeFontKey as _ThemeFontKey,
+  type ThemeFonts as _ThemeFonts,
+  type ThemeFontSize as _ThemeFontSize,
+  type ThemeFontWeight as _ThemeFontWeight,
+  type ThemeFontWeightKey as _ThemeFontWeightKey,
+  type ThemeInput,
+  type ThemeLayer as _ThemeLayer,
+  type ThemeShadow as _ThemeShadow,
+  type ThemeStyles,
+} from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
+ */
+export type BaseTheme = _BaseTheme
+
+/**
+ * @public
+ * @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
+ */
+export type BoxShadow = ThemeBoxShadow
+
+/**
+ * @public
+ * @deprecated Use `HSL` from `@sanity/ui/theme` instead.
+ */
+export type HSL = _HSL
+
+/**
+ * @public
+ * @deprecated Use `RGB` from `@sanity/ui/theme` instead.
+ */
+export type RGB = _RGB
+
+/**
+ * @public
+ * @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
+ */
+export type RootTheme = _RootTheme
+
+/**
+ * @public
+ * @deprecated Use `ThemeStyles` from `@sanity/ui/theme` instead.
+ */
+export type Styles = ThemeStyles
+
+/**
+ * @public
+ * @deprecated Use `Theme` from `@sanity/ui/theme` instead.
+ */
+export type Theme = _Theme
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorButtonModeKey` from `@sanity/ui/theme` instead.
+ */
+export type ThemeColorButtonModeKey = _ThemeColorButtonModeKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSchemeKey` from `@sanity/ui/theme` instead.
+ */
+export type ThemeColorSchemeKey = _ThemeColorSchemeKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSyntax` from `@sanity/ui/theme` instead.
+ */
+export type ThemeColorSyntax = _ThemeColorSyntax
+
+/**
+ * @public
+ * @deprecated Use `ThemeFont` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFont = _ThemeFont
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontKey` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFontKey = _ThemeFontKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontSize` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFontSize = _ThemeFontSize
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontWeight` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFontWeight = _ThemeFontWeight
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontWeightKey` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFontWeightKey = _ThemeFontWeightKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeFonts` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFonts = _ThemeFonts
+
+/**
+ * @public
+ * @deprecated Use `ThemeLayer` from `@sanity/ui/theme` instead.
+ */
+export type ThemeLayer = _ThemeLayer
+
+/**
+ * @public
+ * @deprecated Use `ThemeShadow` from `@sanity/ui/theme` instead.
+ */
+export type ThemeShadow = _ThemeShadow
+
+export {
+  type PartialThemeColorBuilderOpts,
+  type ThemeAvatar,
+  type ThemeColor,
+  type ThemeColorBase,
+  type ThemeColorBuilderOpts,
+  type ThemeColorButton,
+  type ThemeColorButtonState,
+  type ThemeColorButtonStates,
+  type ThemeColorButtonTones,
+  type ThemeColorCard,
+  type ThemeColorCardState,
+  type ThemeColorGenericState,
+  type ThemeColorInput,
+  type ThemeColorInputState,
+  type ThemeColorInputStates,
+  type ThemeColorMuted,
+  type ThemeColorMutedTone,
+  type ThemeColorName,
+  type ThemeColorScheme,
+  type ThemeColorSchemes,
+  type ThemeColorSelectable,
+  type ThemeColorSelectableState,
+  type ThemeColorSelectableStates,
+  type ThemeColorSolid,
+  type ThemeColorSolidTone,
+  type ThemeColorSpot,
+  type ThemeColorSpotKey,
+  type ThemeColorToneKey,
+  type ThemeInput,
+}
+
+import {
+  createColorTheme as _createColorTheme,
+  hexToRgb as _hexToRgb,
+  hslToRgb as _hslToRgb,
+  multiply as _multiply,
+  parseColor as _parseColor,
+  rgba as _rgba,
+  rgbToHex as _rgbToHex,
+  rgbToHsl as _rgbToHsl,
+  screen as _screen,
+} from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
+ */
+export const createColorTheme = _createColorTheme
+
+/**
+ * @public
+ * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
+ */
+export const hexToRgb = _hexToRgb
+
+/**
+ * @public
+ * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
+ */
+export const hslToRgb = _hslToRgb
+
+/**
+ * @public
+ * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
+ */
+export const multiply = _multiply
+
+/**
+ * @public
+ * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
+ */
+export const parseColor = _parseColor
+
+/**
+ * @public
+ * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
+ */
+export const rgbToHex = _rgbToHex
+
+/**
+ * @public
+ * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
+ */
+export const rgbToHsl = _rgbToHsl
+
+/**
+ * @public
+ * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
+ */
+export const rgba = _rgba
+
+/**
+ * @public
+ * @deprecated Use `screen` from `@sanity/ui/theme` instead.
+ */
+export const screen = _screen
+
+/**
+ * @public
+ * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
+ */
+export const studioTheme = (() => {
+  let theme: ReturnType<typeof buildTheme> | undefined
+  return {
+    get value() {
+      if (!theme) {
+        theme = buildTheme()
+      }
+      return theme
+    },
+  }
+})()

package/src/ui/components/autocomplete/__mocks__/apiStore.ts

@@ -0,0 +1,49 @@
+import countries from './countries'
+
+export const countriesStore = {
+  search(
+    query: string,
+    onResults: (results: {value: string}[]) => void,
+    onLoading: (flag: boolean) => void,
+  ): {cancel: () => void} {
+    const fakeDelay = 350 + Math.random() * 800
+
+    onLoading(true)
+
+    const timeout = setTimeout(() => {
+      const results: {value: string}[] = countries
+        .filter((d) => d.name.toLowerCase().includes(query.toLowerCase()))
+        .map((d) => ({value: d.code}))
+
+      onResults(results)
+      onLoading(false)
+    }, fakeDelay)
+
+    return {
+      cancel: () => clearTimeout(timeout),
+    }
+  },
+
+  fetchDocument(
+    id: string,
+    onResult: (value: {code: string; title: string} | null) => void,
+    onLoading: (flag: boolean) => void,
+  ): {cancel: () => void} {
+    const fakeDelay = 50 + Math.random() * 400
+
+    onLoading(true)
+
+    const timeout = setTimeout(() => {
+      const rec = countries.find((c) => c.code === id)
+
+      const doc = rec && {code: rec.code, title: rec.name}
+
+      onResult(doc || null)
+      onLoading(false)
+    }, fakeDelay)
+
+    return {
+      cancel: () => clearTimeout(timeout),
+    }
+  },
+}

package/src/ui/components/autocomplete/__workshop__/async.tsx

@@ -0,0 +1,156 @@
+import {EarthAmericasIcon, SearchIcon} from '@sanity/icons'
+import {
+  Autocomplete,
+  BaseAutocompleteOption,
+  Box,
+  Card,
+  Code,
+  Flex,
+  LayerProvider,
+  Stack,
+  Text,
+} from '@sanity/ui'
+import {useCallback, useEffect, useRef, useState} from 'react'
+
+import {countriesStore} from '../__mocks__/apiStore'
+
+export default function AsyncStory() {
+  const [options, setOptions] = useState<BaseAutocompleteOption[]>([])
+  const [loading, setLoading] = useState(false)
+  const searchRef = useRef<{cancel: () => void} | null>(null)
+  const fetchRef = useRef<{cancel: () => void} | null>(null)
+  const [query, setQuery] = useState<string | null>(null)
+  const [value, setValue] = useState('')
+  const [optionTitle, setOptionTitle] = useState<string | null>(null)
+  const [loadingCurrentRef, setLoadingCurrentRef] = useState(false)
+
+  const doSearch = useCallback((query: string | null) => {
+    if (searchRef.current) searchRef.current.cancel()
+    searchRef.current = countriesStore.search(query || '', setOptions, setLoading)
+  }, [])
+
+  const filterOption = useCallback(() => true, [])
+
+  const handleQueryChange = useCallback(
+    (query: string | null) => {
+      setQuery(query)
+
+      if (query !== null) {
+        doSearch(query)
+      }
+    },
+    [doSearch],
+  )
+
+  const handleOpenButtonClick = useCallback(() => {
+    if (!value) {
+      doSearch('')
+    }
+  }, [doSearch, value])
+
+  const renderValue = useCallback(() => {
+    if (loadingCurrentRef) {
+      return 'Loading…'
+    }
+
+    return optionTitle || ''
+  }, [loadingCurrentRef, optionTitle])
+
+  const renderOption = useCallback((option: BaseAutocompleteOption) => {
+    return <AsyncOption documentId={option.value} />
+  }, [])
+
+  useEffect(() => {
+    if (fetchRef.current) fetchRef.current.cancel()
+
+    if (value) {
+      fetchRef.current = countriesStore.fetchDocument(
+        value,
+        (data) => setOptionTitle(data?.title || null),
+        setLoadingCurrentRef,
+      )
+    } else {
+      setOptionTitle(null)
+      setLoadingCurrentRef(false)
+    }
+  }, [value])
+
+  useEffect(() => {
+    if (optionTitle) doSearch(optionTitle)
+  }, [doSearch, optionTitle])
+
+  return (
+    <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
+      <Stack space={[3, 3, 4]}>
+        <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="medium">
+          Country
+        </Text>
+        <LayerProvider zOffset={100}>
+          <Autocomplete
+            disabled={loadingCurrentRef}
+            filterOption={filterOption}
+            icon={value ? EarthAmericasIcon : SearchIcon}
+            id="async"
+            loading={loading}
+            onChange={setValue}
+            onQueryChange={handleQueryChange}
+            openButton={{onClick: handleOpenButtonClick}}
+            options={options}
+            placeholder="Search"
+            renderOption={renderOption}
+            renderValue={renderValue}
+            value={value}
+          />
+        </LayerProvider>
+
+        <Card overflow="auto" padding={3} radius={2} tone="transparent">
+          <Code language="json" size={1}>
+            {JSON.stringify({loading, options, query, value}, null, 2)}
+          </Code>
+        </Card>
+      </Stack>
+    </Box>
+  )
+}
+
+function AsyncOption(props: {
+  documentId: string
+  disabled?: boolean
+  selected?: boolean
+  tabIndex?: number
+}) {
+  const {documentId, disabled, selected, tabIndex} = props
+  const [data, setData] = useState<{title: string} | null>(null)
+  const [loading, setLoading] = useState(false)
+  const ref = useRef<{cancel: () => void} | null>(null)
+
+  useEffect(() => {
+    if (ref.current) ref.current.cancel()
+    ref.current = countriesStore.fetchDocument(documentId, setData, setLoading)
+  }, [documentId])
+
+  return (
+    <Card
+      as="button"
+      disabled={disabled}
+      padding={3}
+      radius={1}
+      selected={selected}
+      tabIndex={tabIndex}
+    >
+      <Flex gap={3}>
+        <Text>
+          <EarthAmericasIcon />
+        </Text>
+
+        {loading && (
+          <Text muted>
+            <>Loading…</>
+          </Text>
+        )}
+
+        {!loading && <Text muted={!data}>{data ? data.title : <>Untitled</>}</Text>}
+      </Flex>
+    </Card>
+  )
+}