@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/core/theme/themeColorProvider.tsx

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

package/src/core/theme/themeContext.ts

@@ -0,0 +1,12 @@
+import {Context, createContext} from 'react'
+import {globalScope} from '../lib/globalScope'
+import {ThemeContextValue} from './types'
+
+const key = Symbol.for('@sanity/ui/context/theme')
+
+globalScope[key] = globalScope[key] || createContext<ThemeContextValue | null>(null)
+
+/**
+ * @internal
+ */
+export const ThemeContext: Context<ThemeContextValue | null> = globalScope[key]

package/src/core/theme/themeProvider.tsx

@@ -0,0 +1,61 @@
+import {
+  RootTheme,
+  ThemeColorCardToneKey,
+  ThemeColorSchemeKey,
+  Theme,
+  getScopedTheme,
+} from '@sanity/ui/theme'
+import {useContext, useMemo} from 'react'
+import {ThemeProvider as StyledThemeProvider} from 'styled-components'
+import {ThemeContext} from './themeContext'
+import {ThemeContextValue} from './types'
+
+/**
+ * @public
+ */
+export interface ThemeProviderProps {
+  children?: React.ReactNode
+  scheme?: ThemeColorSchemeKey
+  theme?: RootTheme
+  tone?: ThemeColorCardToneKey
+}
+
+/**
+ * @public
+ */
+export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
+  const parentTheme = useContext(ThemeContext)
+  const {
+    children,
+    scheme = parentTheme?.scheme || 'light',
+    theme: rootTheme = parentTheme?.theme || null,
+    tone = parentTheme?.tone || 'default',
+  } = props
+
+  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 (
+    <ThemeContext.Provider value={themeContext}>
+      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
+    </ThemeContext.Provider>
+  )
+}

package/src/core/theme/types.ts

@@ -0,0 +1,12 @@
+import {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ */
+export interface ThemeContextValue {
+  /** @deprecated No longer used */
+  version: 0.0
+  scheme: ThemeColorSchemeKey
+  theme: RootTheme
+  tone: ThemeColorCardToneKey
+}

package/src/core/theme/useRootTheme.ts

@@ -0,0 +1,16 @@
+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/core/theme/useTheme.ts

@@ -0,0 +1,16 @@
+import {Theme, Theme_v2, getTheme_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/core/types/avatar.ts

@@ -0,0 +1,14 @@
+/**
+ * @public
+ */
+export type AvatarPosition = 'top' | 'bottom' | 'inside'
+
+/**
+ * @public
+ */
+export type AvatarSize = 0 | 1 | 2 | 3
+
+/**
+ * @public
+ */
+export type AvatarStatus = 'online' | 'editing' | 'inactive'

package/src/core/types/badge.ts

@@ -0,0 +1,12 @@
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated No longer used
+ */
+export type BadgeMode = 'default' | 'outline'
+
+/**
+ * @public
+ */
+export type BadgeTone = ThemeColorStateToneKey

package/src/core/types/button.ts

@@ -0,0 +1,21 @@
+import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ */
+export type ButtonMode = ThemeColorButtonModeKey
+
+/**
+ * @public
+ */
+export type ButtonTextAlign = 'left' | 'right' | 'center'
+
+/**
+ * @public
+ */
+export type ButtonTone = ThemeColorStateToneKey
+
+/**
+ * @public
+ */
+export type ButtonWidth = 'fill'

package/src/core/types/card.ts

@@ -0,0 +1,6 @@
+import {ThemeColorCardToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ */
+export type CardTone = ThemeColorCardToneKey | 'inherit'

package/src/core/types/index.ts

@@ -0,0 +1,14 @@
+export * from './avatar'
+export * from './badge'
+export * from './box'
+export * from './button'
+export * from './card'
+export * from './dialog'
+export * from './flex'
+export * from './grid'
+export * from './gridItem'
+export * from './placement'
+export * from './popover'
+export * from './radius'
+export * from './selectable'
+export * from './text'

package/src/core/types/selectable.ts

@@ -0,0 +1,6 @@
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ */
+export type SelectableTone = ThemeColorStateToneKey

package/src/core/utils/arrow/arrow.tsx

@@ -0,0 +1,121 @@
+import {ForwardedRef, HTMLProps, ReactElement, forwardRef} from 'react'
+import styled, {css} from 'styled-components'
+import {useTheme_v2} from '../../theme'
+import {Point, compileCommands, getRoundedCommands} from './cmds'
+
+const Root = styled.div<{$w: number}>(
+  ({$w: w}) => css`
+    position: absolute;
+    width: ${w}px;
+    height: ${w}px;
+
+    :empty + & {
+      display: none;
+    }
+
+    & > svg {
+      display: block;
+      line-height: 0;
+      transform-origin: ${w / 2}px ${w / 2}px;
+    }
+
+    [data-placement^='top'] > & {
+      bottom: -${w}px;
+
+      & > svg {
+        transform: rotate(0);
+      }
+    }
+
+    [data-placement^='right'] > & {
+      left: -${w}px;
+
+      & > svg {
+        transform: rotate(90deg);
+      }
+    }
+
+    [data-placement^='left'] > & {
+      right: -${w}px;
+
+      & > svg {
+        transform: rotate(-90deg);
+      }
+    }
+
+    [data-placement^='bottom'] > & {
+      top: -${w}px;
+
+      & > svg {
+        transform: rotate(180deg);
+      }
+    }
+  `,
+)
+
+const StrokePath = styled.path`
+  stroke: var(--card-shadow-outline-color);
+`
+
+const ShapePath = styled.path`
+  fill: var(--card-bg-color);
+`
+
+/** @internal */
+export const Arrow = forwardRef(function Arrow(
+  props: {width: number; height: number; radius?: number} & Omit<
+    HTMLProps<HTMLDivElement>,
+    'width' | 'height'
+  >,
+  ref: ForwardedRef<HTMLDivElement>,
+): ReactElement {
+  const {width: w, height: h, radius = 0, ...restProps} = props
+  const {card} = useTheme_v2()
+  const strokeWidth = card.shadow.outline
+
+  const center = w / 2
+
+  const points: Point[] = [
+    {
+      x: 0,
+      y: 0,
+    },
+    {
+      x: radius,
+      y: 0,
+      radius,
+    },
+    {
+      x: center,
+      y: h - 1,
+      radius,
+    },
+    {
+      x: w - radius,
+      y: 0,
+      radius,
+    },
+    {
+      x: w,
+      y: 0,
+    },
+  ]
+
+  const cmds = getRoundedCommands(points)
+  const path = compileCommands(cmds)
+
+  const strokePath = `${path}`
+  const fillPath = `${path} M ${w} -1 M 0 -1 Z`
+
+  return (
+    <Root {...restProps} $w={w} ref={ref}>
+      <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
+        <mask id="stroke-mask">
+          <rect x={0} y={strokeWidth} width={w} height={w} fill="white" />
+        </mask>
+        <StrokePath d={strokePath} mask="url(#stroke-mask)" strokeWidth={strokeWidth * 2} />
+        <ShapePath d={fillPath} />
+      </svg>
+    </Root>
+  )
+})

package/src/core/utils/arrow/cmds.ts

@@ -0,0 +1,91 @@
+export interface PointCmd {
+  type: 'point'
+  x: number
+  y: number
+  radius?: number
+}
+
+export interface CurveCmd {
+  type: 'curve'
+  startControl: Point
+  endControl: Point
+  curveEnd: Point
+}
+
+export type Cmd = PointCmd | CurveCmd
+
+export interface Point {
+  x: number
+  y: number
+  radius?: number
+}
+
+function moveTowardsLength(movingPoint: Point, targetPoint: Point, amount: number) {
+  const width = targetPoint.x - movingPoint.x
+  const height = targetPoint.y - movingPoint.y
+
+  const distance = Math.sqrt(width * width + height * height)
+
+  return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance))
+}
+
+function moveTowardsFractional(movingPoint: Point, targetPoint: Point, fraction: number): Point {
+  return {
+    x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
+    y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction,
+  }
+}
+
+export function getRoundedCommands(points: Point[]): Cmd[] {
+  const len = points.length
+
+  const cmds: Cmd[] = []
+
+  for (let i = 0; i < len; i += 1) {
+    const point = points[i]
+    const prevPoint = points[i - 1]
+    const nextPoint = points[i + 1]
+
+    if (prevPoint && point.radius) {
+      const curveStart = moveTowardsLength(point, prevPoint, point.radius)
+      const curveEnd = moveTowardsLength(point, nextPoint, point.radius)
+      const startControl = moveTowardsFractional(curveStart, point, 0.5)
+      const endControl = moveTowardsFractional(point, curveEnd, 0.5)
+
+      cmds.push({
+        type: 'point',
+        ...curveStart,
+      })
+
+      cmds.push({
+        type: 'curve',
+        curveEnd,
+        startControl,
+        endControl,
+      })
+    } else {
+      cmds.push({
+        type: 'point',
+        ...point,
+      })
+    }
+  }
+
+  return cmds
+}
+
+export function compileCommands(cmds: Cmd[]): string {
+  return cmds
+    .map((n, idx) => {
+      if (n.type === 'point') {
+        return `${idx === 0 ? 'M' : 'L'} ${n.x} ${n.y}`
+      }
+
+      if (n.type === 'curve') {
+        return `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}`
+      }
+
+      return ``
+    })
+    .join(' ')
+}

package/src/core/utils/arrow/index.ts

@@ -0,0 +1 @@
+export * from './arrow'

package/src/core/utils/boundaryElement/__workshop__/plain.tsx

@@ -0,0 +1,19 @@
+import {BoundaryElementProvider, Button, Card, Text, Tooltip} from '@sanity/ui'
+import {useState} from 'react'
+
+export default function PlainStory() {
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <Card padding={7} ref={setBoundaryElement}>
+      <BoundaryElementProvider element={boundaryElement}>
+        <Tooltip
+          content={<Text size={1}>Test aldsakm alkdmal dmalskdm alkdmlakds</Text>}
+          placement="top"
+        >
+          <Button text={<>Hover me</>} />
+        </Tooltip>
+      </BoundaryElementProvider>
+    </Card>
+  )
+}

package/src/core/utils/boundaryElement/boundaryElement.test.tsx

@@ -0,0 +1,101 @@
+/** @jest-environment jsdom */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {render} from '../../../../test'
+import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContextValue} from './types'
+import {useBoundaryElement} from './useBoundaryElement'
+
+describe('utils/boundaryElement', () => {
+  describe('useBoundaryElement', () => {
+    it('should get context value', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        const rootBoundaryElement = useBoundaryElement()
+
+        log(rootBoundaryElement)
+
+        return <>debug</>
+      }
+
+      function Root() {
+        const value: BoundaryElementContextValue = {
+          version: 0.0,
+          element: null,
+        }
+
+        return (
+          <BoundaryElementContext.Provider value={value}>
+            <Debug />
+          </BoundaryElementContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(log.mock.calls[0][0].element).toBe(null)
+    })
+
+    it('should provide default value when no context value is provided', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        const rootBoundaryElement = useBoundaryElement()
+
+        log(rootBoundaryElement)
+
+        return null
+      }
+
+      function Root() {
+        const value = undefined
+
+        return (
+          <BoundaryElementContext.Provider value={value as any}>
+            <Debug />
+          </BoundaryElementContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(log.mock.calls[0][0].element).toBe(null)
+    })
+
+    it('should fail when context value is not compatible', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        try {
+          useBoundaryElement()
+        } 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 (
+          <BoundaryElementContext.Provider value={value as any}>
+            <Debug />
+          </BoundaryElementContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual(
+        'useBoundaryElement(): the context value is not compatible',
+      )
+    })
+  })
+})

package/src/core/utils/conditionalWrapper/conditionalWrapper.tsx

@@ -0,0 +1,18 @@
+/**
+ * @internal
+ */
+export function ConditionalWrapper({
+  children,
+  condition,
+  wrapper,
+}: {
+  children: React.ReactNode
+  condition: boolean
+  wrapper: (children: React.ReactNode) => React.ReactNode
+}): React.ReactNode {
+  if (!condition) {
+    return children
+  }
+
+  return wrapper(children)
+}

package/src/core/utils/conditionalWrapper/index.ts

@@ -0,0 +1 @@
+export * from './conditionalWrapper'

package/src/core/utils/elementQuery/__workshop__/customMedia.tsx

@@ -0,0 +1,30 @@
+import {Box, Card, ElementQuery, Text} from '@sanity/ui'
+import styled from 'styled-components'
+
+const TestCard = styled(Card)`
+  --card-fg-color: orange;
+
+  [data-eq-min~='0'] > & {
+    --card-fg-color: green;
+  }
+
+  [data-eq-min~='1'] > & {
+    --card-fg-color: blue;
+  }
+`
+
+export default function CustomMediaQuery() {
+  return (
+    <Box padding={[3, 4, 5]}>
+      <Box marginBottom={[3, 4, 5]}>
+        <Text>Resize this frame to see the text color change:</Text>
+      </Box>
+
+      <ElementQuery media={[100, 200, 300]}>
+        <TestCard padding={2} shadow={1}>
+          <Text>This card sits inside an element query.</Text>
+        </TestCard>
+      </ElementQuery>
+    </Box>
+  )
+}

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -0,0 +1,53 @@
+import {forwardRef, useCallback, useMemo, useState} from 'react'
+import {useElementSize, useForwardedRef} from '../../hooks'
+import {useTheme_v2} from '../../theme'
+import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface MediaQueryProps {
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  media?: number[]
+}
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const ElementQuery = forwardRef(function ElementQuery(
+  props: MediaQueryProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'media'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const theme = useTheme_v2()
+  const {children, media = theme.media, ...restProps} = props
+
+  const forwardedRef = useForwardedRef(ref)
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
+  const elementSize = useElementSize(element)
+  const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
+
+  const max = useMemo(() => findMaxBreakpoints(media, width), [media, width])
+  const min = useMemo(() => findMinBreakpoints(media, width), [media, width])
+
+  const setRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      forwardedRef.current = el
+      setElement(el)
+    },
+    [forwardedRef],
+  )
+
+  return (
+    <div
+      data-ui="ElementQuery"
+      {...restProps}
+      data-eq-max={max.length ? max.join(' ') : undefined}
+      data-eq-min={min.length ? min.join(' ') : undefined}
+      ref={setRef}
+    >
+      {children}
+    </div>
+  )
+})

package/src/core/utils/index.ts

@@ -0,0 +1,9 @@
+export * from './arrow'
+export * from './boundaryElement'
+export * from './conditionalWrapper'
+export * from './elementQuery'
+export * from './errorBoundary'
+export * from './layer'
+export * from './portal'
+export * from './srOnly'
+export * from './virtualList'