@bettercms-ai/kit 0.1.1 → 2.0.0

package/src/core/styles/font/responsiveFont.ts

@@ -1,103 +0,0 @@
-import {CSSObject, getTheme_v2, ThemeFontKey, ThemeFontSize} from '@bettercms-ai/kit/theme'
-
-import {_responsive, rem} 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} = props
-  const {font, media} = getTheme_v2(props.theme)
-  const {family, sizes, weights} = font[fontKey]
-  const fontWeight = ($weight && weights[$weight]) || weights.regular
-
-  // eslint-disable-next-line no-warning-comments
-  // @todo: make this configurable
-  const defaultSize = sizes[2]
-
-  const base: CSSObject = {
-    'position': 'relative',
-    'fontFamily': family,
-    'fontWeight': `${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',
-    },
-  }
-
-  // eslint-disable-next-line no-warning-comments
-  // @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-bcms-icon])': {
-      fontSize: `calc(${customIconSize} / 16 * 1rem)`,
-      margin: rem(customIconOffset),
-    },
-
-    '& [data-bcms-icon]': {
-      fontSize: `calc(${iconSize} / 16 * 1rem)`,
-      margin: rem(iconOffset),
-    },
-  }
-}

package/src/core/styles/font/textAlignStyle.ts

@@ -1,19 +0,0 @@
-import {CSSObject, getTheme_v2} from '@bettercms-ai/kit/theme'
-
-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 {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$align, (textAlign) => {
-    return {textAlign}
-  })
-}

package/src/core/styles/font/textFontStyle.ts

@@ -1,13 +0,0 @@
-import {CSSObject} from '@bettercms-ai/kit/theme'
-
-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/core/styles/font/types.ts

@@ -1,35 +0,0 @@
-import {ThemeFontWeightKey} from '@bettercms-ai/kit/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/core/styles/grid/gridItemStyle.ts

@@ -1,82 +0,0 @@
-import {CSSObject, getTheme_v2} from '@bettercms-ai/kit/theme'
-
-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 {media} = getTheme_v2(props.theme)
-
-  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 {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$rowStart, (rowStart) => ({
-    gridRowStart: `${rowStart}`,
-  }))
-}
-
-function responsiveGridItemRowEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$rowEnd, (rowEnd) => ({gridRowEnd: `${rowEnd}`}))
-}
-
-function responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  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 {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$columnStart, (columnStart) => ({
-    gridColumnStart: `${columnStart}`,
-  }))
-}
-
-function responsiveGridItemColumnEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$columnEnd, (columnEnd) => ({
-    gridColumnEnd: `${columnEnd}`,
-  }))
-}

package/src/core/styles/grid/gridStyle.ts

@@ -1,108 +0,0 @@
-import {CSSObject, getTheme_v2} from '@bettercms-ai/kit/theme'
-
-import {_responsive, rem} 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 {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$autoFlow, (autoFlow) => ({
-    gridAutoFlow: autoFlow,
-  }))
-}
-
-function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$autoRows, (autoRows) => ({
-    gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],
-  }))
-}
-
-function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$autoCols, (autoCols) => ({
-    gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],
-  }))
-}
-
-function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$columns, (columns) => ({
-    gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`,
-  }))
-}
-
-function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$rows, (rows) => ({
-    gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`,
-  }))
-}
-
-function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$gap, (gap) => ({
-    gridGap: gap ? rem(space[gap]) : undefined,
-  }))
-}
-
-function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$gapX, (gapX) => ({
-    columnGap: gapX ? rem(space[gapX]) : undefined,
-  }))
-}
-
-function responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$gapY, (gapY) => ({
-    rowGap: gapY ? rem(space[gapY]) : undefined,
-  }))
-}

package/src/core/styles/grid/index.ts

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

package/src/core/styles/grid/types.ts

@@ -1,37 +0,0 @@
-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/core/styles/helpers.ts

@@ -1,72 +0,0 @@
-import {CSSObject, getTheme_v2, Theme} from '@bettercms-ai/kit/theme'
-
-import {EMPTY_ARRAY} from '../constants'
-
-/**
- * @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
-  }
-
-  const {media, space} = getTheme_v2(theme)
-
-  return _responsive(media, spaceIndexes, (spaceIndex) =>
-    _fillCSSObject(props, rem(space[spaceIndex])),
-  )
-}

package/src/core/styles/index.ts

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

package/src/core/styles/input/index.ts

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

package/src/core/styles/input/responsiveInputPaddingStyle.ts

@@ -1,78 +0,0 @@
-import {CSSObject, getTheme_v2} from '@bettercms-ai/kit/theme'
-
-import {_responsive, rem} 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} = props
-  const {font, media, space} = getTheme_v2(props.theme)
-  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 = font.text.sizes[_fontSize[i]] || font.text.sizes[2]
-    const emSize = size.lineHeight - size.ascenderHeight - size.descenderHeight
-    const p = space[_padding[i]]
-    const s = space[_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})
-}