@sanity/ui 1.0.0-beta.9 → 1.0.0

package/src/styles/font/responsiveFont.ts

@@ -0,0 +1,101 @@
+import {CSSObject} from 'styled-components'
+import {ThemeFontSize, ThemeFontKey} from '../../theme'
+import {rem, _responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveFontStyleProps} from './types'
+
+/**
+ * A utility function getting responsive font styles.
+ * @internal
+ */
+export function responsiveFont(
+  fontKey: ThemeFontKey,
+  props: ResponsiveFontStyleProps & ThemeProps
+): CSSObject[] {
+  const {$size, $weight, theme} = props
+  const {fonts, media} = theme.sanity
+  const {family, sizes, weights} = fonts[fontKey]
+  const fontWeight = ($weight && weights[$weight]) || weights.regular
+
+  // @todo: make this configurable
+  const defaultSize = sizes[2]
+
+  const base: CSSObject = {
+    position: 'relative',
+    fontFamily: family,
+    fontWeight,
+    padding: '1px 0',
+    margin: 0,
+
+    '&:before': {
+      content: '""',
+      display: 'block',
+      height: 0,
+    },
+
+    '&:after': {
+      content: '""',
+      display: 'block',
+      height: 0,
+    },
+
+    '& > code, & > span': {
+      display: 'block',
+    },
+
+    '&:not([hidden])': {
+      display: 'block',
+    },
+  }
+
+  // @TODO fix the real condition that is causing $size to be undefined sometimes
+  if (!$size) {
+    // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it
+    if (!responsiveFont.warned) {
+      // eslint-disable-next-line no-console
+      console.warn('No size specified for responsive font', {fontKey, $size, props, base})
+      // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it
+      responsiveFont.warned = true
+    }
+
+    return [base]
+  }
+
+  const resp = _responsive(media, $size, (sizeIndex) => fontSize(sizes[sizeIndex] || defaultSize))
+
+  return [base, ...resp]
+}
+
+export function fontSize(size: ThemeFontSize): CSSObject {
+  const {ascenderHeight, descenderHeight, fontSize, iconSize, letterSpacing, lineHeight} = size
+  const negHeight = ascenderHeight + descenderHeight
+  const capHeight = lineHeight - negHeight
+  const iconOffset = (capHeight - iconSize) / 2
+  const customIconSize = Math.floor((fontSize * 1.125) / 2) * 2 + 1
+  const customIconOffset = (capHeight - customIconSize) / 2
+
+  return {
+    fontSize: rem(fontSize),
+    lineHeight: `calc(${lineHeight} / ${fontSize})`,
+    letterSpacing: rem(letterSpacing),
+    transform: `translateY(${rem(descenderHeight)})`,
+
+    '&:before': {
+      marginTop: `calc(${rem(0 - negHeight)} - 1px)`,
+    },
+
+    '&:after': {
+      marginBottom: '-1px',
+    },
+
+    '& svg:not([data-sanity-icon])': {
+      fontSize: `calc(${customIconSize} / 16 * 1rem)`,
+      margin: rem(customIconOffset),
+    },
+
+    '& [data-sanity-icon]': {
+      fontSize: `calc(${iconSize} / 16 * 1rem)`,
+      margin: rem(iconOffset),
+    },
+  }
+}

package/src/styles/font/textAlignStyle.ts

@@ -0,0 +1,18 @@
+import {CSSObject} from 'styled-components'
+import {_responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveTextAlignStyleProps} from './types'
+
+/**
+ * Get responsive text align styles.
+ * @internal
+ */
+export function responsiveTextAlignStyle(
+  props: ResponsiveTextAlignStyleProps & ThemeProps
+): CSSObject[] {
+  const {theme} = props
+
+  return _responsive(theme.sanity.media, props.$align, (textAlign) => {
+    return {textAlign}
+  })
+}

package/src/styles/font/textFontStyle.ts

@@ -0,0 +1,12 @@
+import {CSSObject} from 'styled-components'
+import {ThemeProps} from '../types'
+import {responsiveFont} from './responsiveFont'
+import {ResponsiveFontStyleProps} from './types'
+
+/**
+ * Get responsive CSS for the `text` font style.
+ * @internal
+ */
+export function responsiveTextFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {
+  return responsiveFont('text', props)
+}

package/src/styles/font/types.ts

@@ -0,0 +1,34 @@
+import {ThemeFontWeightKey} from '../../theme'
+import {TextAlign} from '../../types'
+
+/**
+ * @internal
+ */
+export interface ResponsiveFontSizeStyleProps {
+  $size: number[]
+}
+
+/**
+ * @internal
+ */
+export interface FontWeightStyleProps {
+  $weight?: ThemeFontWeightKey
+}
+
+/**
+ * @internal
+ */
+export interface ResponsiveTextAlignStyleProps {
+  $align: TextAlign[]
+}
+
+/**
+ * @internal
+ */
+export interface ResponsiveFontStyleProps
+  extends FontWeightStyleProps,
+    ResponsiveFontSizeStyleProps,
+    ResponsiveTextAlignStyleProps {
+  $accent?: boolean
+  $muted?: boolean
+}

package/src/styles/grid/gridItemStyle.ts

@@ -0,0 +1,87 @@
+import {CSSObject} from 'styled-components'
+import {_responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveGridItemStyleProps} from './types'
+
+export function responsiveGridItemStyle(): Array<
+  (props: ResponsiveGridItemStyleProps & ThemeProps) => CSSObject[]
+> {
+  return [
+    responsiveGridItemRowStyle,
+    responsiveGridItemRowStartStyle,
+    responsiveGridItemRowEndStyle,
+    responsiveGridItemColumnStyle,
+    responsiveGridItemColumnStartStyle,
+    responsiveGridItemColumnEndStyle,
+  ]
+}
+
+const GRID_ITEM_ROW = {
+  auto: 'auto',
+  full: '1 / -1',
+}
+
+const GRID_ITEM_COLUMN = {
+  auto: 'auto',
+  full: '1 / -1',
+}
+
+function responsiveGridItemRowStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$row, (row) => {
+    if (typeof row === 'number') {
+      return {gridRow: `span ${row} / span ${row}`}
+    }
+
+    return {gridRow: GRID_ITEM_ROW[row]}
+  })
+}
+
+function responsiveGridItemRowStartStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$rowStart, (rowStart) => ({
+    gridRowStart: rowStart,
+  }))
+}
+
+function responsiveGridItemRowEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$rowEnd, (rowEnd) => ({gridRowEnd: rowEnd}))
+}
+
+function responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$column, (column) => {
+    if (typeof column === 'number') {
+      return {gridColumn: `span ${column} / span ${column}`}
+    }
+
+    return {gridColumn: GRID_ITEM_COLUMN[column]}
+  })
+}
+
+function responsiveGridItemColumnStartStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$columnStart, (columnStart) => ({
+    gridColumnStart: columnStart,
+  }))
+}
+
+function responsiveGridItemColumnEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$columnEnd, (columnEnd) => ({
+    gridColumnEnd: columnEnd,
+  }))
+}

package/src/styles/grid/gridStyle.ts

@@ -0,0 +1,115 @@
+import {CSSObject} from 'styled-components'
+import {rem, _responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveGridStyleProps} from './types'
+
+const GRID_CSS = {
+  '&&:not([hidden])': {
+    display: 'grid',
+  },
+  '&[data-as="ul"],&[data-as="ol"]': {
+    listStyle: 'none',
+  },
+}
+
+const GRID_AUTO_COLUMS = {
+  auto: 'auto',
+  min: 'min-content',
+  max: 'max-content',
+  fr: 'minmax(0, 1fr)',
+}
+
+const GRID_AUTO_ROWS = {
+  auto: 'auto',
+  min: 'min-content',
+  max: 'max-content',
+  fr: 'minmax(0, 1fr)',
+}
+
+export function responsiveGridStyle(): Array<
+  CSSObject | ((props: ResponsiveGridStyleProps & ThemeProps) => CSSObject[])
+> {
+  return [
+    GRID_CSS,
+    responsiveGridAutoFlowStyle,
+    responsiveGridAutoRowsStyle,
+    responsiveGridAutoColsStyle,
+    responsiveGridColumnsStyle,
+    responsiveGridRowsStyle,
+    responsiveGridGapStyle,
+    responsiveGridGapXStyle,
+    responsiveGridGapYStyle,
+  ]
+}
+
+function responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$autoFlow, (autoFlow) => ({
+    gridAutoFlow: autoFlow,
+  }))
+}
+
+function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$autoRows, (autoRows) => ({
+    gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],
+  }))
+}
+
+function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$autoCols, (autoCols) => ({
+    gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],
+  }))
+}
+
+function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$columns, (columns) => ({
+    gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`,
+  }))
+}
+
+function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$rows, (rows) => ({
+    gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`,
+  }))
+}
+
+function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media, space} = theme.sanity
+
+  return _responsive(media, props.$gap, (gap) => ({
+    gridGap: gap ? rem(space[gap]) : undefined,
+  }))
+}
+
+function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media, space} = theme.sanity
+
+  return _responsive(media, props.$gapX, (gapX) => ({
+    columnGap: gapX ? rem(space[gapX]) : undefined,
+  }))
+}
+
+function responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media, space} = theme.sanity
+
+  return _responsive(media, props.$gapY, (gapY) => ({
+    rowGap: gapY ? rem(space[gapY]) : undefined,
+  }))
+}

package/src/styles/grid/index.ts

@@ -0,0 +1,3 @@
+export * from './gridStyle'
+export * from './gridItemStyle'
+export * from './types'

package/src/styles/grid/types.ts

@@ -0,0 +1,37 @@
+import {
+  GridAutoCols,
+  GridAutoFlow,
+  GridAutoRows,
+  GridItemColumn,
+  GridItemColumnEnd,
+  GridItemColumnStart,
+  GridItemRow,
+  GridItemRowEnd,
+  GridItemRowStart,
+} from '../../types'
+
+/**
+ * @internal
+ */
+export interface ResponsiveGridStyleProps {
+  $autoRows: GridAutoRows[]
+  $autoCols: GridAutoCols[]
+  $autoFlow: GridAutoFlow[]
+  $columns: number[]
+  $gap: number[]
+  $gapX: number[]
+  $gapY: number[]
+  $rows: number[]
+}
+
+/**
+ * @internal
+ */
+export interface ResponsiveGridItemStyleProps {
+  $column: GridItemColumn[]
+  $columnStart: GridItemColumnStart[]
+  $columnEnd: GridItemColumnEnd[]
+  $row: GridItemRow[]
+  $rowStart: GridItemRowStart[]
+  $rowEnd: GridItemRowEnd[]
+}

package/src/styles/helpers.ts

@@ -0,0 +1,70 @@
+import {CSSObject} from 'styled-components'
+import {EMPTY_ARRAY} from '../constants'
+import {Theme} from '../theme'
+
+/**
+ * @internal
+ */
+export function _fillCSSObject(keys: string[], value: string | number | CSSObject): CSSObject {
+  return keys.reduce<CSSObject>((style, key) => {
+    style[key] = value
+
+    return style
+  }, {})
+}
+
+/**
+ * @public
+ */
+export function rem(pixelValue: number): string | 0 {
+  if (pixelValue === 0) return 0
+
+  return `${pixelValue / 16}rem`
+}
+
+/**
+ * @internal
+ */
+export function _responsive<T>(
+  media: number[],
+  values: T[],
+  callback: (value: T, index: number, array: T[]) => CSSObject
+): CSSObject[] {
+  const statements = values?.map(callback) || []
+
+  return statements.map((statement, mediaIndex) => {
+    if (mediaIndex === 0) return statement
+
+    return {[`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement}
+  })
+}
+
+/**
+ * @internal
+ */
+export function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
+  if (val === undefined) return defaultVal || EMPTY_ARRAY
+
+  return Array.isArray(val) ? val : [val]
+}
+
+/**
+ * @internal
+ */
+export function _getResponsiveSpace(
+  theme: Theme,
+  props: string[],
+  spaceIndexes: number[] = EMPTY_ARRAY
+): CSSObject[] | null {
+  if (!Array.isArray(spaceIndexes)) {
+    throw new Error('the property must be array of numbers')
+  }
+
+  if (spaceIndexes.length === 0) {
+    return null
+  }
+
+  return _responsive(theme.sanity.media, spaceIndexes, (spaceIndex) =>
+    _fillCSSObject(props, rem(theme.sanity.space[spaceIndex]))
+  )
+}

package/src/styles/index.ts

@@ -0,0 +1,5 @@
+export * from './helpers'
+export * from './types'
+
+// beta
+export * from './font'

package/src/styles/input/index.ts

@@ -0,0 +1,2 @@
+export * from './responsiveInputPaddingStyle'
+export * from './textInputStyle'

package/src/styles/input/responsiveInputPaddingStyle.ts

@@ -0,0 +1,77 @@
+import {CSSObject} from 'styled-components'
+import {rem, _responsive} from '../helpers'
+import {ThemeProps} from '../types'
+
+export interface TextInputResponsivePaddingStyleProps {
+  $fontSize: number[]
+  $iconLeft?: boolean
+  $iconRight?: boolean
+  $padding: number[]
+  $space: number[]
+}
+
+export function responsiveInputPaddingStyle(
+  props: TextInputResponsivePaddingStyleProps & ThemeProps
+): CSSObject[] {
+  const {$fontSize, $iconLeft, $iconRight, $padding, $space, theme} = props
+  const {fonts, media, space: spaceScale} = theme.sanity
+  const len = Math.max($padding.length, $space.length, $fontSize.length)
+  const _padding: number[] = []
+  const _space: number[] = []
+  const _fontSize: number[] = []
+
+  for (let i = 0; i < len; i += 1) {
+    _fontSize[i] = $fontSize[i] === undefined ? _fontSize[i - 1] : $fontSize[i]
+    _padding[i] = $padding[i] === undefined ? _padding[i - 1] : $padding[i]
+    _space[i] = $space[i] === undefined ? _space[i - 1] : $space[i]
+  }
+
+  return _responsive(media, _padding, (_, i) => {
+    const size = fonts.text.sizes[_fontSize[i]] || fonts.text.sizes[2]
+    const emSize = size.lineHeight - size.ascenderHeight - size.descenderHeight
+    const p = spaceScale[_padding[i]]
+    const s = spaceScale[_space[i]]
+
+    const styles = {
+      paddingTop: rem(p - size.ascenderHeight),
+      paddingRight: rem(p),
+      paddingBottom: rem(p - size.descenderHeight),
+      paddingLeft: rem(p),
+    }
+
+    if ($iconRight) styles.paddingRight = rem(p + emSize + s)
+    if ($iconLeft) styles.paddingLeft = rem(p + emSize + s)
+
+    return styles
+  })
+}
+
+export function responsiveInputPaddingIconsStyle(
+  props: {
+    $fontSize: number[]
+    $padding: number[]
+    $space: number[]
+  } & ThemeProps
+): CSSObject[] {
+  return responsiveInputPaddingStyle({...props, $iconLeft: true, $iconRight: true})
+}
+
+export function responsiveInputPaddingIconLeftStyle(
+  props: {
+    $fontSize: number[]
+    $padding: number[]
+    $space: number[]
+  } & ThemeProps
+): CSSObject[] {
+  return responsiveInputPaddingStyle({...props, $iconLeft: true})
+}
+
+export function responsiveInputPaddingIconRightStyle(
+  props: {
+    $fontSize: number[]
+    $padding: number[]
+    $space: number[]
+  } & ThemeProps
+): CSSObject[] {
+  return responsiveInputPaddingStyle({...props, $iconRight: true})
+}