@hzblj/kara-sx 0.0.0-stage → 0.2.0

package/src/sx-to-modifiers.android.ts

@@ -0,0 +1,224 @@
+import {
+  align,
+  alpha,
+  animateContentSize,
+  type BuiltinShape,
+  background,
+  blur,
+  clip,
+  defaultMinSize,
+  dropShadow,
+  fillMaxHeight,
+  fillMaxWidth,
+  graphicsLayer,
+  height as heightModifier,
+  imePadding,
+  innerShadow,
+  type ModifierConfig,
+  matchParentSize,
+  offset,
+  padding,
+  rotate,
+  Shapes,
+  weight,
+  width as widthModifier,
+  wrapContentHeight,
+  wrapContentWidth,
+  zIndex as zIndexModifier,
+} from '@expo/ui/jetpack-compose/modifiers'
+import {opacity, radii, resolvePaletteColor, resolveShadow, type Theme, zIndex} from '@hzblj/kara-theme'
+import type {ColorValue} from 'react-native'
+import type {AndroidSx, FrameAlignment, Sx} from './sx.types'
+import {sxPadding} from './sx-padding'
+
+/**
+ * The `full` radius token maps to `Circle` — Compose's `CircleShape` is a 50% rounding, so on any
+ * box it draws the same capsule the iOS resolver gets from SwiftUI's `Capsule`.
+ */
+const shapeOf = (sx: Sx) => {
+  if (sx.borderRadius === 'full') {
+    return Shapes.Circle
+  }
+
+  return sx.borderRadius ? Shapes.RoundedCorner(radii[sx.borderRadius]) : Shapes.Rectangle
+}
+
+/**
+ * A stroke that traces the box's own shape. `border` takes no shape, so on a rounded box it would
+ * draw a square — an inner shadow with no blur and the width as its spread is the same inset stroke
+ * that `strokeBorder` paints on iOS, and it follows the corner radius.
+ */
+const outline = (color: ColorValue, width: number, shape: BuiltinShape): ModifierConfig =>
+  innerShadow(shape, {color, radius: 0, spread: width})
+
+/**
+ * Compose has no single transform modifier, so `scale` goes through `graphicsLayer` while `rotate` and
+ * `offset` keep their own — `rotate` is the readable one for the Z axis, and `offset` moves the box
+ * before it is drawn rather than after, which is what the React Native and SwiftUI paths also do.
+ */
+const effectModifiers = (sx: Sx): ModifierConfig[] => {
+  const modifiers: ModifierConfig[] = []
+
+  if (sx.offsetX !== undefined || sx.offsetY !== undefined) {
+    modifiers.push(offset(sx.offsetX ?? 0, sx.offsetY ?? 0))
+  }
+
+  if (sx.rotate !== undefined) {
+    modifiers.push(rotate(sx.rotate))
+  }
+
+  if (sx.scale !== undefined) {
+    const scale = typeof sx.scale === 'number' ? {x: sx.scale, y: sx.scale} : sx.scale
+    modifiers.push(graphicsLayer({scaleX: scale.x ?? 1, scaleY: scale.y ?? 1}))
+  }
+
+  if (sx.blur !== undefined) {
+    modifiers.push(blur(sx.blur))
+  }
+
+  if (sx.opacity) {
+    modifiers.push(alpha(opacity[sx.opacity]))
+  }
+
+  if (sx.zIndex) {
+    modifiers.push(zIndexModifier(zIndex[sx.zIndex]))
+  }
+
+  return modifiers
+}
+
+/**
+ * `wrapContentWidth`/`Height` take an alignment, and `true` means "wrap, don't care where" — Compose's
+ * own default. Passing the flag straight through as the alignment would not type-check.
+ */
+const wrapAlignment = <T extends string>(value: T | boolean | undefined): T | undefined =>
+  typeof value === 'boolean' ? undefined : value
+
+/** The `android` bucket: Compose-only modifiers, which the SwiftUI resolver has no counterpart for. */
+const androidModifiers = (android: AndroidSx | undefined): ModifierConfig[] => {
+  if (!android) {
+    return []
+  }
+
+  const modifiers: ModifierConfig[] = []
+
+  if (android.align) {
+    modifiers.push(align(android.align))
+  }
+
+  if (android.fillMaxWidth !== undefined) {
+    modifiers.push(fillMaxWidth(android.fillMaxWidth))
+  }
+
+  if (android.fillMaxHeight !== undefined) {
+    modifiers.push(fillMaxHeight(android.fillMaxHeight))
+  }
+
+  if (android.weight !== undefined) {
+    modifiers.push(weight(android.weight))
+  }
+
+  if (android.wrapContentWidth) {
+    modifiers.push(wrapContentWidth(wrapAlignment(android.wrapContentWidth)))
+  }
+
+  if (android.wrapContentHeight) {
+    modifiers.push(wrapContentHeight(wrapAlignment(android.wrapContentHeight)))
+  }
+
+  if (android.matchParentSize) {
+    modifiers.push(matchParentSize())
+  }
+
+  if (android.imePadding) {
+    modifiers.push(imePadding())
+  }
+
+  if (android.animateContentSize) {
+    modifiers.push(animateContentSize())
+  }
+
+  if (android.modifiers) {
+    modifiers.push(...android.modifiers)
+  }
+
+  return modifiers
+}
+
+export const sxToModifiers = (sx: Sx, theme: Theme, _alignment: FrameAlignment = 'topLeading'): ModifierConfig[] => {
+  const modifiers: ModifierConfig[] = []
+  const shape = shapeOf(sx)
+  const shadow = sx.shadow ? resolveShadow(theme, sx.shadow) : undefined
+  const geometry = shadow?.geometry
+  const shadowColors = shadow?.colors
+
+  if (sx.wide) {
+    modifiers.push(fillMaxWidth())
+  }
+
+  if (sx.tall) {
+    modifiers.push(fillMaxHeight())
+  }
+
+  if (sx.w !== undefined) {
+    modifiers.push(widthModifier(sx.w))
+  }
+
+  if (sx.h !== undefined) {
+    modifiers.push(heightModifier(sx.h))
+  }
+
+  if (sx.minW !== undefined || sx.minH !== undefined) {
+    modifiers.push(defaultMinSize({minHeight: sx.minH, minWidth: sx.minW}))
+  }
+
+  if (geometry?.drop && shadowColors?.drop) {
+    modifiers.push(
+      dropShadow(shape, {
+        color: resolvePaletteColor(theme, shadowColors.drop),
+        offsetY: geometry.drop.y,
+        radius: geometry.drop.radius,
+      })
+    )
+  }
+
+  // A draw modifier is only clipped by a `clip` earlier in the chain, so the clip has to come
+  // between the drop shadow — which must paint outside the box — and everything drawn within it.
+  if (sx.borderRadius) {
+    modifiers.push(clip(shape))
+  }
+
+  if (sx.bg) {
+    modifiers.push(background(theme.color(sx.bg)))
+  }
+
+  if (geometry?.inset && shadowColors?.inset) {
+    modifiers.push(
+      innerShadow(shape, {
+        color: resolvePaletteColor(theme, shadowColors.inset),
+        radius: geometry.inset.radius,
+      })
+    )
+  }
+
+  if (sx.borderWidth !== undefined && sx.borderColor) {
+    modifiers.push(outline(theme.color(sx.borderColor), sx.borderWidth, shape))
+  }
+
+  if (geometry?.ring && shadowColors?.ring) {
+    modifiers.push(outline(resolvePaletteColor(theme, shadowColors.ring), geometry.ring.width, shape))
+  }
+
+  const boxPadding = sxPadding(sx)
+
+  if (boxPadding) {
+    modifiers.push(
+      padding(boxPadding.leading ?? 0, boxPadding.top ?? 0, boxPadding.trailing ?? 0, boxPadding.bottom ?? 0)
+    )
+  }
+
+  modifiers.push(...effectModifiers(sx))
+  modifiers.push(...androidModifiers(sx.android))
+
+  return modifiers
+}

package/src/sx-to-modifiers.ios.ts

@@ -0,0 +1,322 @@
+import {
+  aspectRatio,
+  background,
+  blur,
+  brightness,
+  clipped,
+  clipShape,
+  colorInvert,
+  containerRelativeFrame,
+  contentTransition,
+  contrast,
+  controlSize,
+  fixedSize,
+  frame,
+  glassEffect,
+  grayscale,
+  hidden,
+  hueRotation,
+  ignoreSafeArea,
+  layoutPriority,
+  luminanceToAlpha,
+  type ModifierConfig,
+  offset,
+  opacity as opacityModifier,
+  padding,
+  privacySensitive,
+  redacted,
+  rotationEffect,
+  saturation,
+  scaleEffect,
+  shadow,
+  strokeBorder,
+  tint,
+  unredacted,
+  zIndex as zIndexModifier,
+} from '@expo/ui/swift-ui/modifiers'
+import {opacity, radii, resolvePaletteColor, resolveShadow, type Theme, zIndex} from '@hzblj/kara-theme'
+import type {ColorValue} from 'react-native'
+import type {FrameAlignment, IosSx, Sx} from './sx.types'
+import {sxPadding} from './sx-padding'
+
+/**
+ * The one shape every decoration traces — clip, strokes, drop shadow and glass all take it, so the
+ * box reads as a single surface. The `full` radius token maps to a real capsule: SwiftUI's
+ * `RoundedRectangle` degenerates when the radius outgrows the box, where `Capsule` stays clean.
+ */
+type BoxShape = {
+  cornerRadius?: number
+  shape: 'capsule' | 'rectangle' | 'roundedRectangle'
+}
+
+const boxShape = (sx: Sx): BoxShape => {
+  if (sx.borderRadius === 'full') {
+    return {shape: 'capsule'}
+  }
+
+  return sx.borderRadius ? {cornerRadius: radii[sx.borderRadius], shape: 'roundedRectangle'} : {shape: 'rectangle'}
+}
+
+/**
+ * A stroke that traces the box's own shape. `.border` always draws a square, so on a rounded box the
+ * following `.clipShape` cuts its corners off — `strokeBorder` follows the shape and stays inside.
+ */
+const outline = (color: ColorValue, width: number, box: BoxShape): ModifierConfig =>
+  strokeBorder({
+    color,
+    cornerRadius: box.cornerRadius,
+    shape: box.shape,
+    style: {lineWidth: width},
+  })
+
+/**
+ * `inset` is Android-only: SwiftUI has no inner-shadow modifier, and standing in with `.glassEffect`
+ * paints a whole Liquid Glass material over the box — a washed-out plate, not a shadow.
+ */
+const shadowModifiers = (sx: Sx, theme: Theme, box: BoxShape): ModifierConfig[] => {
+  if (!sx.shadow) {
+    return []
+  }
+
+  const {colors, geometry} = resolveShadow(theme, sx.shadow)
+  const modifiers: ModifierConfig[] = []
+
+  if (geometry.ring && colors.ring) {
+    modifiers.push(outline(resolvePaletteColor(theme, colors.ring), geometry.ring.width, box))
+  }
+
+  if (geometry.drop && colors.drop) {
+    modifiers.push(
+      shadow({
+        color: resolvePaletteColor(theme, colors.drop),
+        radius: geometry.drop.radius,
+        y: geometry.drop.y,
+      })
+    )
+  }
+
+  return modifiers
+}
+
+/**
+ * The native `FrameModifier` applies either the exact `width`/`height` pair or the min/max set —
+ * never both, so one call mixing them would silently drop its min/max half. Each set therefore gets
+ * its own `frame`: the exact one first, then the flexible one for the axes left free.
+ */
+const frameModifiers = (sx: Sx, alignment: FrameAlignment): ModifierConfig[] => {
+  const modifiers: ModifierConfig[] = []
+
+  if (sx.w !== undefined || sx.h !== undefined) {
+    modifiers.push(frame({alignment, height: sx.h, width: sx.w}))
+  }
+
+  if (sx.wide || sx.tall || sx.minW !== undefined || sx.minH !== undefined) {
+    modifiers.push(
+      frame({
+        alignment,
+        maxHeight: sx.tall ? Infinity : undefined,
+        maxWidth: sx.wide ? Infinity : undefined,
+        minHeight: sx.minH,
+        minWidth: sx.minW,
+      })
+    )
+  }
+
+  return modifiers
+}
+
+/** Transforms and filters, which SwiftUI applies to the box after it has been laid out and painted. */
+const effectModifiers = (sx: Sx): ModifierConfig[] => {
+  const modifiers: ModifierConfig[] = []
+
+  if (sx.offsetX !== undefined || sx.offsetY !== undefined) {
+    modifiers.push(offset({x: sx.offsetX, y: sx.offsetY}))
+  }
+
+  if (sx.rotate !== undefined) {
+    modifiers.push(rotationEffect(sx.rotate))
+  }
+
+  if (sx.scale !== undefined) {
+    modifiers.push(scaleEffect(typeof sx.scale === 'number' ? sx.scale : {x: sx.scale.x ?? 1, y: sx.scale.y ?? 1}))
+  }
+
+  if (sx.blur !== undefined) {
+    modifiers.push(blur(sx.blur))
+  }
+
+  if (sx.opacity) {
+    modifiers.push(opacityModifier(opacity[sx.opacity]))
+  }
+
+  if (sx.zIndex) {
+    modifiers.push(zIndexModifier(zIndex[sx.zIndex]))
+  }
+
+  return modifiers
+}
+
+const FIXED_SIZE_AXES = {
+  both: {horizontal: true, vertical: true},
+  horizontal: {horizontal: true},
+  vertical: {vertical: true},
+} as const
+
+/**
+ * Liquid Glass from either form of the `glass` key. With no shape of its own, the glass follows the
+ * box's `borderRadius` — a plate that ignored the box's corners would read as a different surface.
+ */
+const glassModifier = (glass: NonNullable<IosSx['glass']>, theme: Theme, box: BoxShape) => {
+  const config = typeof glass === 'string' ? {variant: glass} : glass
+  const followsBox = config.shape === undefined && box.shape !== 'rectangle'
+
+  return glassEffect({
+    cornerRadius: config.cornerRadius ?? (followsBox ? box.cornerRadius : undefined),
+    glass: {
+      interactive: config.interactive,
+      tint: config.tint === undefined ? undefined : theme.color(config.tint),
+      variant: config.variant,
+    },
+    shape: followsBox ? box.shape : config.shape,
+  })
+}
+
+/** The `ios` bucket: SwiftUI-only modifiers, which the Compose resolver has no counterpart for. */
+const iosModifiers = (ios: IosSx | undefined, theme: Theme, box: BoxShape): ModifierConfig[] => {
+  if (!ios) {
+    return []
+  }
+
+  const modifiers: ModifierConfig[] = []
+
+  if (ios.aspectRatio !== undefined) {
+    modifiers.push(aspectRatio({contentMode: 'fit', ratio: ios.aspectRatio}))
+  }
+
+  // The ideal sizes live in the native frame modifier's min/max branch, so they need their own
+  // `frame` call — one with an exact width or height would never reach them.
+  if (ios.idealW !== undefined || ios.idealH !== undefined) {
+    modifiers.push(frame({idealHeight: ios.idealH, idealWidth: ios.idealW}))
+  }
+
+  if (ios.containerRelativeFrame) {
+    modifiers.push(containerRelativeFrame(ios.containerRelativeFrame))
+  }
+
+  if (ios.ignoreSafeArea) {
+    modifiers.push(ignoreSafeArea(ios.ignoreSafeArea === true ? undefined : ios.ignoreSafeArea))
+  }
+
+  if (ios.glass) {
+    modifiers.push(glassModifier(ios.glass, theme, box))
+  }
+
+  if (ios.tint) {
+    modifiers.push(tint(theme.color(ios.tint)))
+  }
+
+  if (ios.controlSize) {
+    modifiers.push(controlSize(ios.controlSize))
+  }
+
+  if (ios.layoutPriority !== undefined) {
+    modifiers.push(layoutPriority(ios.layoutPriority))
+  }
+
+  if (ios.fixedSize) {
+    modifiers.push(fixedSize(FIXED_SIZE_AXES[ios.fixedSize]))
+  }
+
+  if (ios.clipped) {
+    modifiers.push(clipped(true))
+  }
+
+  if (ios.hidden) {
+    modifiers.push(hidden(true))
+  }
+
+  if (ios.redacted) {
+    modifiers.push(redacted(ios.redacted))
+  }
+
+  if (ios.unredacted) {
+    modifiers.push(unredacted())
+  }
+
+  if (ios.privacySensitive) {
+    modifiers.push(privacySensitive(true))
+  }
+
+  if (ios.saturation !== undefined) {
+    modifiers.push(saturation(ios.saturation))
+  }
+
+  if (ios.brightness !== undefined) {
+    modifiers.push(brightness(ios.brightness))
+  }
+
+  if (ios.contrast !== undefined) {
+    modifiers.push(contrast(ios.contrast))
+  }
+
+  if (ios.grayscale !== undefined) {
+    modifiers.push(grayscale(ios.grayscale))
+  }
+
+  if (ios.hueRotation !== undefined) {
+    modifiers.push(hueRotation(ios.hueRotation))
+  }
+
+  if (ios.colorInvert) {
+    modifiers.push(colorInvert(true))
+  }
+
+  if (ios.luminanceToAlpha) {
+    modifiers.push(luminanceToAlpha())
+  }
+
+  if (ios.contentTransition) {
+    modifiers.push(
+      contentTransition(ios.contentTransition.type, {
+        countsDown: ios.contentTransition.countsDown,
+      })
+    )
+  }
+
+  if (ios.modifiers) {
+    modifiers.push(...ios.modifiers)
+  }
+
+  return modifiers
+}
+
+export const sxToModifiers = (sx: Sx, theme: Theme, alignment: FrameAlignment = 'topLeading'): ModifierConfig[] => {
+  const modifiers: ModifierConfig[] = []
+  const boxPadding = sxPadding(sx)
+  const box = boxShape(sx)
+
+  if (boxPadding) {
+    modifiers.push(padding(boxPadding))
+  }
+
+  modifiers.push(...frameModifiers(sx, alignment))
+
+  if (sx.bg) {
+    modifiers.push(background(theme.color(sx.bg)))
+  }
+
+  // Clip before the strokes and the drop shadow, so all three trace the rounded box, not its bounds.
+  if (box.shape !== 'rectangle') {
+    modifiers.push(clipShape(box.shape, box.cornerRadius))
+  }
+
+  if (sx.borderWidth !== undefined && sx.borderColor) {
+    modifiers.push(outline(theme.color(sx.borderColor), sx.borderWidth, box))
+  }
+
+  modifiers.push(...shadowModifiers(sx, theme, box))
+  modifiers.push(...effectModifiers(sx))
+  modifiers.push(...iosModifiers(sx.ios, theme, box))
+
+  return modifiers
+}

package/src/sx-to-style.ts

@@ -0,0 +1,142 @@
+import {opacity, radii, resolvePaletteColor, resolveShadow, type Theme, zIndex} from '@hzblj/kara-theme'
+import {StyleSheet, type ViewStyle} from 'react-native'
+import type {StyleSx} from './sx.types'
+import {sxPadding} from './sx-padding'
+
+/**
+ * React Native takes transforms as one ordered array, so — unlike the modifier paths, where each is
+ * its own entry — they have to be collected before any of them can be written to the style.
+ */
+/** React Native also accepts `transform` as a CSS string; `Extract` keeps the array form's element. */
+type Transform = Extract<NonNullable<ViewStyle['transform']>, readonly unknown[]>[number]
+
+const transform = (sx: StyleSx): ViewStyle['transform'] => {
+  const transforms: Transform[] = []
+
+  if (sx.offsetX !== undefined) {
+    transforms.push({translateX: sx.offsetX})
+  }
+
+  if (sx.offsetY !== undefined) {
+    transforms.push({translateY: sx.offsetY})
+  }
+
+  if (sx.rotate !== undefined) {
+    transforms.push({rotate: `${sx.rotate}deg`})
+  }
+
+  if (typeof sx.scale === 'number') {
+    transforms.push({scale: sx.scale})
+  } else if (sx.scale !== undefined) {
+    if (sx.scale.x !== undefined) {
+      transforms.push({scaleX: sx.scale.x})
+    }
+
+    if (sx.scale.y !== undefined) {
+      transforms.push({scaleY: sx.scale.y})
+    }
+  }
+
+  return transforms.length > 0 ? transforms : undefined
+}
+
+/**
+ * A React Native view has a single border slot, so a ring shadow rides it — an explicit
+ * `borderColor`/`borderWidth` on the same box is written later and wins, where the modifier paths
+ * draw the ring and the border as two separate strokes.
+ */
+const shadowStyle = (sx: StyleSx, theme: Theme): ViewStyle => {
+  if (!sx.shadow) {
+    return {}
+  }
+
+  const {colors, geometry} = resolveShadow(theme, sx.shadow)
+  const style: ViewStyle = {}
+
+  if (geometry.ring && colors.ring) {
+    style.borderColor = resolvePaletteColor(theme, colors.ring)
+    style.borderWidth = Math.max(geometry.ring.width, StyleSheet.hairlineWidth)
+  }
+
+  if (geometry.drop && colors.drop) {
+    style.elevation = geometry.drop.y * 2
+    style.shadowColor = resolvePaletteColor(theme, colors.drop)
+    style.shadowOffset = {height: geometry.drop.y, width: 0}
+    style.shadowOpacity = 1
+    style.shadowRadius = geometry.drop.radius
+  }
+
+  return style
+}
+
+export const sxToStyle = (sx: StyleSx, theme: Theme): ViewStyle => {
+  const style: ViewStyle = {...shadowStyle(sx, theme)}
+  const padding = sxPadding(sx)
+
+  if (padding) {
+    style.paddingTop = padding.top
+    style.paddingBottom = padding.bottom
+    style.paddingLeft = padding.leading
+    style.paddingRight = padding.trailing
+  }
+
+  if (sx.wide) {
+    style.width = '100%'
+  }
+
+  if (sx.tall) {
+    style.height = '100%'
+  }
+
+  if (sx.w !== undefined) {
+    style.width = sx.w
+  }
+
+  if (sx.h !== undefined) {
+    style.height = sx.h
+  }
+
+  if (sx.minW !== undefined) {
+    style.minWidth = sx.minW
+  }
+
+  if (sx.minH !== undefined) {
+    style.minHeight = sx.minH
+  }
+
+  if (sx.bg) {
+    style.backgroundColor = theme.color(sx.bg)
+  }
+
+  if (sx.borderColor) {
+    style.borderColor = theme.color(sx.borderColor)
+  }
+
+  if (sx.borderWidth !== undefined) {
+    style.borderWidth = sx.borderWidth
+  }
+
+  if (sx.borderRadius) {
+    style.borderRadius = radii[sx.borderRadius]
+  }
+
+  if (sx.opacity) {
+    style.opacity = opacity[sx.opacity]
+  }
+
+  if (sx.zIndex) {
+    style.zIndex = zIndex[sx.zIndex]
+  }
+
+  if (sx.blur !== undefined) {
+    style.filter = [{blur: sx.blur}]
+  }
+
+  const transforms = transform(sx)
+
+  if (transforms) {
+    style.transform = transforms
+  }
+
+  return style
+}