@sanity/ui 2.10.0-corel.0 → 3.0.0-static.1

package/src/core/theme/__workshop__/build/story.tsx

@@ -5,18 +5,16 @@ import {
   ThemeColorCard_v2,
   ThemeColorInputMode_v2,
   ThemeColorState_v2,
-} from '@sanity/ui/theme'
-import {
   THEME_COLOR_BUTTON_MODES,
   THEME_COLOR_CARD_TONES,
   THEME_COLOR_INPUT_MODES,
   THEME_COLOR_STATE_TONES,
   ThemeColorCardToneKey,
   ThemeColorInputModeKey,
+  buildTheme,
 } from '@sanity/ui/theme'
-import {buildTheme} from '@sanity/ui/theme'
 import {ReactElement} from 'react'
-import {rem} from '../../../styles'
+import {rem} from '../../../_compat'
 import {useTheme_v2} from '../../useTheme'
 import {getCSSProps} from './helpers'
 import {Root} from './Root'

package/src/core/theme/useTheme.ts

@@ -1,5 +1,5 @@
 import {Theme, Theme_v2, getTheme_v2} from '@sanity/ui/theme'
-import {useTheme as useStyledTheme} from 'styled-components'
+import {useTheme as useStyledTheme} from '../lib/styled'
 
 /**
  * @public

package/src/core/types/avatar.ts

@@ -1,3 +1,8 @@
+export {
+  /** @deprecated Use `AvatarSize` from `@sanity/ui/theme' instead. */
+  type AvatarSize,
+} from '@sanity/ui/theme'
+
 /**
  * @public
  */
@@ -6,7 +11,7 @@ export type AvatarPosition = 'top' | 'bottom' | 'inside'
 /**
  * @public
  */
-export type AvatarSize = 0 | 1 | 2 | 3
+// export type AvatarSize = 0 | 1 | 2 | 3
 
 /**
  * @public

package/src/core/types/box.ts

@@ -1,19 +1,25 @@
-/**
- * @public
- */
-export type BoxSizing = 'content' | 'border'
+export {
+  /**
+   * @public
+   * @deprecated use `Display` from `@sanity/ui/css` instead.
+   */
+  type Display as BoxDisplay,
 
-/**
- * @public
- */
-export type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+  /**
+   * @public
+   * @deprecated use `BoxHeight` from `@sanity/ui/css` instead.
+   */
+  type BoxHeight,
 
-/**
- * @public
- */
-export type BoxHeight = 'stretch' | 'fill'
+  /**
+   * @public
+   * @deprecated use `Overflow` from `@sanity/ui/css` instead.
+   */
+  type BoxOverflow,
 
-/**
- * @public
- */
-export type BoxOverflow = 'visible' | 'hidden' | 'auto'
+  /**
+   * @public
+   * @deprecated use `BoxSizing` from `@sanity/ui/css` instead.
+   */
+  type BoxSizing,
+} from '@sanity/ui/css'

package/src/core/types/button.ts

@@ -17,5 +17,6 @@ export type ButtonTone = ThemeColorStateToneKey
 
 /**
  * @public
+ * @deprecated Use `Width` from `@sanity/ui/css` instead.
  */
 export type ButtonWidth = 'fill'

package/src/core/types/flex.ts

@@ -1,30 +1,31 @@
-/**
- * @public
- */
-export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
+export {
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexAlign,
 
-/**
- * @public
- */
-export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexDirection,
 
-/**
- * @public
- */
-export type FlexJustify =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly'
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexJustify,
 
-/**
- * @public
- */
-export type FlexValue = number | 'none' | 'auto' | 'initial'
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexValue,
 
-/**
- * @public
- */
-export type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexWrap,
+} from '@sanity/ui/css'

package/src/core/types/grid.ts

@@ -1,14 +1,19 @@
-/**
- * @public
- */
-export type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+export {
+  /**
+   * @public
+   * @deprecated Use `GridAutoRows` from `@sanity/ui/css` instead.
+   */
+  type GridAutoRows,
 
-/**
- * @public
- */
-export type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
+  /**
+   * @public
+   * @deprecated Use `GridAutoCols` from `@sanity/ui/css` instead.
+   */
+  type GridAutoCols,
 
-/**
- * @public
- */
-export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
+  /**
+   * @public
+   * @deprecated Use `GridAutoFlow` from `@sanity/ui/css` instead.
+   */
+  type GridAutoFlow,
+} from '@sanity/ui/css'

package/src/core/types/gridItem.ts

@@ -1,29 +1,37 @@
-/**
- * @public
- */
-export type GridItemColumn = 'auto' | 'full' | number
+export {
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemColumn,
 
-/**
- * @public
- */
-export type GridItemColumnStart = 'auto' | number
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemColumnStart,
 
-/**
- * @public
- */
-export type GridItemColumnEnd = 'auto' | number
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemColumnEnd,
 
-/**
- * @public
- */
-export type GridItemRow = 'auto' | 'full' | number
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemRow,
 
-/**
- * @public
- */
-export type GridItemRowStart = 'auto' | number
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemRowStart,
 
-/**
- * @public
- */
-export type GridItemRowEnd = 'auto' | number
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemRowEnd,
+} from '@sanity/ui/css'

package/src/core/types/radius.ts

@@ -1,4 +1,7 @@
-/**
- * @public
- */
-export type Radius = number | 'full'
+export {
+  /**
+   * @public
+   * @deprecated
+   */
+  type Radius,
+} from '@sanity/ui/theme'

package/src/core/types/text.ts

@@ -1,4 +1,7 @@
-/**
- * @public
- */
-export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
+export {
+  /**
+   * @public
+   * @deprecated Use `TextAlign` from `@sanity/ui/css` instead
+   */
+  type TextAlign,
+} from '@sanity/ui/css'

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

@@ -1,5 +1,5 @@
 import {ForwardedRef, HTMLProps, ReactElement, forwardRef} from 'react'
-import {styled, css} from 'styled-components'
+import {styled, css} from '../../lib/styled'
 import {useTheme_v2} from '../../theme'
 import {Point, compileCommands, getRoundedCommands} from './cmds'
 

package/src/core/utils/layer/layer.tsx

@@ -1,32 +1,41 @@
 import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
+// import {styled} from '../../lib/styled'
+import {Box, BoxProps} from '../../primitives'
 import {LayerProvider} from './layerProvider'
 import {useLayer} from './useLayer'
 
 /**
  * @public
  */
-export interface LayerProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+export interface LayerProps extends BoxProps {
+  // as?: React.ElementType | keyof JSX.IntrinsicElements
   /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
   onActivate?: (props: {activeElement: HTMLElement | null}) => void
   zOffset?: number | number[]
 }
 
-interface LayerChildrenProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+interface LayerChildrenProps extends BoxProps {
+  // as?: React.ElementType | keyof JSX.IntrinsicElements
   onActivate?: LayerProps['onActivate']
 }
 
-const Root = styled.div({position: 'relative'})
+// const Root = styled.div({position: 'relative'})
 
 const LayerChildren = forwardRef(function LayerChildren(
-  props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
+  props: LayerChildrenProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows' | 'width' | 'wrap'>,
   forwardedRef: React.Ref<HTMLDivElement>,
 ) {
-  const {children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps} = props
+  const {
+    children,
+    onActivate,
+    onFocus,
+    position = 'relative',
+    style = EMPTY_RECORD,
+    ...restProps
+  } = props
   const {zIndex, isTopLayer} = useLayer()
   const lastFocusedRef = useRef<HTMLElement | null>(null)
   const ref = useRef<HTMLDivElement | null>(null)
@@ -65,9 +74,16 @@ const LayerChildren = forwardRef(function LayerChildren(
   )
 
   return (
-    <Root {...restProps} data-ui="Layer" onFocus={handleFocus} ref={ref} style={{...style, zIndex}}>
+    <Box
+      data-ui="Layer"
+      {...restProps}
+      onFocus={handleFocus}
+      position={position}
+      ref={ref}
+      style={{...style, zIndex}}
+    >
       {children}
-    </Root>
+    </Box>
   )
 })
 
@@ -75,7 +91,7 @@ const LayerChildren = forwardRef(function LayerChildren(
  * @public
  */
 export const Layer = forwardRef(function Layer(
-  props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
+  props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'rows' | 'width' | 'wrap'>,
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {children, zOffset = 1, ...restProps} = props
@@ -88,4 +104,5 @@ export const Layer = forwardRef(function Layer(
     </LayerProvider>
   )
 })
+
 Layer.displayName = 'ForwardRef(Layer)'

package/src/core/utils/srOnly/srOnly.tsx

@@ -1,5 +1,5 @@
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import {styled} from '../../lib/styled'
 
 /**
  * @public

package/src/core/utils/virtualList/virtualList.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
-import {styled} from 'styled-components'
 import {_isScrollable} from '../../helpers'
+import {styled} from '../../lib/styled'
 import {_ResizeObserver} from '../../observers'
 import {StackProps} from '../../primitives'
 import {useTheme_v2} from '../../theme'

package/src/css/_resp.ts

@@ -0,0 +1,28 @@
+import {ResponsiveProp} from './types'
+
+export function _resp<T>(
+  prefix: string | undefined,
+  prop: ResponsiveProp<T> | undefined,
+): string | undefined {
+  if (prop === undefined) {
+    return undefined
+  }
+
+  if (Array.isArray(prop)) {
+    return prop
+      .map((value, index) => {
+        const className = (typeof value === 'boolean' ? [prefix] : [prefix, value])
+          .filter((s) => s === 0 || Boolean(s))
+          .join('-')
+          .replace(/\./g, '_')
+
+        return index === 0 ? `${className}` : `_${index}:${className}`
+      })
+      .join(' ')
+  }
+
+  return (typeof prop === 'boolean' ? [prefix] : [prefix, prop])
+    .filter((s) => s === 0 || Boolean(s))
+    .join('-')
+    .replace(/\./g, '_')
+}

package/src/css/cli/buildCommand.ts

@@ -0,0 +1,36 @@
+import fs from 'fs/promises'
+import path from 'path'
+import {buildTheme as buildUITheme} from '@sanity/ui/theme'
+import {compileSystem} from '../compile/compileSystem'
+import {compileTheme} from '../compile/compileTheme'
+
+async function buildSystem(outDir: string) {
+  const css = compileSystem()
+
+  await fs.mkdir(outDir, {recursive: true})
+
+  await fs.writeFile(path.resolve(outDir, 'system.css'), css, 'utf-8')
+
+  // eslint-disable-next-line no-console
+  console.log('- system.css')
+}
+
+async function buildTheme(outDir: string) {
+  const css = compileTheme(buildUITheme().v2!)
+
+  await fs.mkdir(outDir, {recursive: true})
+
+  await fs.writeFile(path.resolve(outDir, 'sanity-theme.css'), css, 'utf-8')
+
+  // eslint-disable-next-line no-console
+  console.log('- sanity-theme.css')
+}
+
+export async function buildCommand(options: {cwd?: string; outDir?: string}): Promise<void> {
+  const cwd = options.cwd ?? process.cwd()
+  const outDir = options.outDir ?? path.resolve(cwd, 'dist')
+
+  await buildSystem(outDir)
+
+  await buildTheme(outDir)
+}

package/src/css/cli/index.ts

@@ -0,0 +1,38 @@
+import cac from 'cac'
+
+import {version} from '../../../package.json'
+
+const cli = cac('ui')
+
+// cli
+//   .command('dev')
+//   .option('--cwd [cwd]', 'Output directory')
+//   .action(async (options) => {
+//     const {devCommand} = await import('./devCommand')
+
+//     await devCommand({
+//       ...options,
+//       cwd: options.cwd || process.cwd(),
+//     })
+//   })
+
+cli
+  .command('build')
+  .option('--cwd [cwd]', 'Working directory')
+  .option('--outDir [outDir]', 'Output directory')
+  .action(async (options) => {
+    const {buildCommand} = await import('./buildCommand')
+
+    await buildCommand({
+      ...options,
+      cwd: options.cwd || process.cwd(),
+    })
+  })
+
+cli.command('').action(() => {
+  cli.outputHelp()
+})
+
+cli.help()
+cli.version(version)
+cli.parse()

package/src/css/compile/compileRule.ts

@@ -0,0 +1,58 @@
+import {type Properties} from '../types'
+
+export function compileRule(selector: string, props: Properties): string {
+  return compileProperties(selector, props) + compileNestedRules(selector, props['@nest'])
+}
+
+function compileProperties(selector: string, props: Properties) {
+  let css = '{'
+
+  for (const key in props) {
+    if (key === '@keyframes') continue // ignore
+    if (key === '@media') continue // ignore
+    if (key === '@nest') continue // ignore
+
+    const value = (props as Record<string, string>)[key]
+
+    const valueArr = Array.isArray(value) ? value : [value]
+
+    for (const v of valueArr) {
+      css += toSnakeCase(key) + ':' + v + ';'
+    }
+  }
+
+  if (css.length === 1) return ''
+
+  return selector + css + '}'
+}
+
+function compileNestedRules(selector: string, props?: Record<string, Properties>) {
+  if (!props) return ''
+
+  let css = ''
+
+  for (const key in props) {
+    const value = (props as Record<string, string>)[key]
+
+    css +=
+      '\n' +
+      key.replace(/&/g, selector) +
+      compileProperties(selector, value as Properties).substring(selector.length)
+  }
+
+  return css
+}
+
+export function compileMediaQueryRule(query: string, rules: Record<string, Properties>): string {
+  let css = `@media ${query}{`
+
+  for (const key in rules) {
+    css += '\n  ' + compileRule(`.${key}`.replace(/:/g, '\\:'), rules[key])
+  }
+
+  return css + '\n}'
+}
+
+function toSnakeCase(value: string) {
+  return value.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase())
+}

package/src/css/compile/compileRules.ts

@@ -0,0 +1,56 @@
+import {type Properties, type Rules} from '../types'
+import {compileRule, compileMediaQueryRule} from './compileRule'
+
+/** @public */
+export function compileRules(rules: Rules): string {
+  let css = ''
+
+  const keyframes: Record<string, Record<string, Properties>> = {}
+  const mediaQueries: Record<string, Record<string, Properties>> = {}
+
+  for (const [className, props] of Object.entries(rules)) {
+    const selectorCss = compileRule(`.${className}`.replace(/:/g, '\\:'), props)
+
+    css += selectorCss ? `${selectorCss}\n` : ''
+
+    if (props['@keyframes']) {
+      for (const name in props['@keyframes']) {
+        // if (!keyframes[name]) {
+        //   keyframes[name] = {from: {}, to: {}}
+        // }
+
+        keyframes[name] = props['@keyframes'][name]
+        // keyframes[name][className] = props['@keyframes'][key]
+      }
+    }
+
+    if (props['@media']) {
+      for (const key in props['@media']) {
+        if (!mediaQueries[key]) {
+          mediaQueries[key] = {}
+        }
+
+        mediaQueries[key][className] = props['@media'][key]
+      }
+    }
+  }
+
+  for (const [name, value] of Object.entries(keyframes)) {
+    let keyframesCss = `@keyframes ${name} {\n`
+
+    for (const [key, props] of Object.entries(value)) {
+      keyframesCss += `  ${key}`
+      keyframesCss += compileRule('', props).replace(/\n/g, '\n    ') + '\n'
+    }
+
+    keyframesCss += `\n}\n`
+
+    css += keyframesCss
+  }
+
+  for (const [query, queryRules] of Object.entries(mediaQueries)) {
+    css += compileMediaQueryRule(query, queryRules) + '\n'
+  }
+
+  return css.replace(/\n{2,}/g, '\n').trimStart()
+}

package/src/css/compile/compileSystem.ts

@@ -0,0 +1,7 @@
+import {rules} from '../rules'
+import {compileRules} from './compileRules'
+
+/** @public */
+export function compileSystem(): string {
+  return compileRules(rules)
+}