@hzblj/kara-components 0.0.0-stage → 0.2.0

package/src/atoms/spacer/spacer.types.ts

@@ -0,0 +1,9 @@
+import type {SpaceSize} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+export type SpacerProps = {
+  min?: SpaceSize
+  testID?: string
+}
+
+export type SpacerComponent = (props: SpacerProps) => ReactNode

package/src/atoms/surface/index.ts

@@ -0,0 +1,2 @@
+export * from './surface'
+export * from './surface.types'

package/src/atoms/surface/surface.android.tsx

@@ -0,0 +1,50 @@
+import {Column, Surface as ComposeSurface, Shape} from '@expo/ui/jetpack-compose'
+import {testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {radii, useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+import {useHostGuard} from '../../host-context'
+import type {SurfaceComponent, SurfaceProps} from './surface.types'
+
+const cornerRadii = (radius: number) => ({bottomEnd: radius, bottomStart: radius, topEnd: radius, topStart: radius})
+
+/**
+ * Material's `Surface`, with the padding on a `Column` inside it. Compose applies a `Surface`'s own modifiers before it
+ * draws the shape, so padding there would inset the background instead of the content — and a bare `Surface` stacks
+ * its children on top of each other rather than in a column.
+ */
+export const Surface: SurfaceComponent = ({
+  children,
+  glass = false,
+  p = 's16',
+  pb,
+  pl,
+  pr,
+  pt,
+  px,
+  py,
+  testID,
+  ...sx
+}: SurfaceProps) => {
+  useHostGuard('Surface')
+
+  const theme = useAppTheme()
+  const sxModifiers = useSxModifiers({...sx, bg: undefined})
+  const modifiers = useMemo(
+    () => (testID ? [...sxModifiers, testIdModifier(testID)] : sxModifiers),
+    [sxModifiers, testID]
+  )
+  const contentModifiers = useSxModifiers({p, pb, pl, pr, pt, px, py, wide: sx.wide})
+
+  return (
+    <ComposeSurface
+      color={theme.color(sx.bg ?? 'surface.primary')}
+      contentColor={theme.color('content.primary')}
+      modifiers={modifiers}
+      shape={Shape.RoundedCorner({cornerRadii: cornerRadii(radii[sx.borderRadius ?? 'large'])})}
+      tonalElevation={glass ? 3 : 0}
+    >
+      <Column modifiers={contentModifiers}>{children}</Column>
+    </ComposeSurface>
+  )
+}

package/src/atoms/surface/surface.ios.tsx

@@ -0,0 +1,21 @@
+import {GlassEffectContainer, VStack} from '@expo/ui/swift-ui'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {useHostGuard} from '../../host-context'
+import type {SurfaceComponent, SurfaceProps} from './surface.types'
+
+export const Surface: SurfaceComponent = ({children, glass = false, testID, ...sx}: SurfaceProps) => {
+  useHostGuard('Surface')
+
+  const modifiers = useSxModifiers({borderRadius: 'large', p: 's16', ...sx})
+  const content = (
+    <VStack alignment="leading" modifiers={modifiers} testID={testID}>
+      {children}
+    </VStack>
+  )
+
+  if (!glass) {
+    return content
+  }
+
+  return <GlassEffectContainer>{content}</GlassEffectContainer>
+}

package/src/atoms/surface/surface.types.ts

@@ -0,0 +1,10 @@
+import type {ResponsiveSx} from '@hzblj/kara-sx'
+import type {ReactNode} from 'react'
+
+export type SurfaceProps = ResponsiveSx & {
+  children?: ReactNode
+  glass?: boolean
+  testID?: string
+}
+
+export type SurfaceComponent = (props: SurfaceProps) => ReactNode

package/src/atoms/switch/index.ts

@@ -0,0 +1,2 @@
+export * from './switch'
+export * from './switch.types'

package/src/atoms/switch/switch.android.tsx

@@ -0,0 +1,45 @@
+import {Switch as ComposeSwitch, Row, Text} from '@expo/ui/jetpack-compose'
+import {clickable, fillMaxWidth} from '@expo/ui/jetpack-compose/modifiers'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+
+import {useHostGuard} from '../../host-context'
+import type {SwitchComponent, SwitchProps} from './switch.types'
+
+/**
+ * Material's switch, tinted with the accent like SwiftUI's toggle. With a label it is a full-width row — label at the
+ * start, switch at the end — and the whole row toggles, the way a Material settings row does.
+ */
+export const Switch: SwitchComponent = ({disabled = false, label, onValueChange, value}: SwitchProps) => {
+  useHostGuard('Switch')
+  const theme = useAppTheme()
+  const rowModifiers = useMemo(
+    () => (disabled || !onValueChange ? [fillMaxWidth()] : [fillMaxWidth(), clickable(() => onValueChange(!value))]),
+    [disabled, onValueChange, value]
+  )
+  const control = (
+    <ComposeSwitch
+      colors={{
+        checkedBorderColor: theme.color('fill.accent.primary'),
+        checkedThumbColor: theme.color('content.on.bg'),
+        checkedTrackColor: theme.color('fill.accent.primary'),
+      }}
+      enabled={!disabled}
+      onCheckedChange={onValueChange}
+      value={value}
+    />
+  )
+
+  if (!label) {
+    return control
+  }
+
+  return (
+    <Row horizontalArrangement="spaceBetween" modifiers={rowModifiers} verticalAlignment="center">
+      <Text color={theme.colorString(disabled ? 'content.tertiary' : 'content.primary')} style={theme.typography.body}>
+        {label}
+      </Text>
+      {control}
+    </Row>
+  )
+}

package/src/atoms/switch/switch.ios.tsx

@@ -0,0 +1,24 @@
+import {Toggle} from '@expo/ui/swift-ui'
+import {disabled as disabledModifier, tint} from '@expo/ui/swift-ui/modifiers'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+
+import {useHostGuard} from '../../host-context'
+import type {SwitchComponent, SwitchProps} from './switch.types'
+
+export const Switch: SwitchComponent = ({disabled = false, label, onValueChange, value}: SwitchProps) => {
+  useHostGuard('Switch')
+  const theme = useAppTheme()
+
+  const modifiers = useMemo(() => {
+    const list = [tint(theme.color('fill.accent.primary'))]
+
+    if (disabled) {
+      list.push(disabledModifier(true))
+    }
+
+    return list
+  }, [disabled, theme])
+
+  return <Toggle isOn={value} label={label} modifiers={modifiers} onIsOnChange={onValueChange} />
+}

package/src/atoms/switch/switch.types.ts

@@ -0,0 +1,10 @@
+import type {ReactNode} from 'react'
+
+export type SwitchProps = {
+  disabled?: boolean
+  label?: string
+  onValueChange?: (value: boolean) => void
+  value: boolean
+}
+
+export type SwitchComponent = (props: SwitchProps) => ReactNode

package/src/atoms/text/index.ts

@@ -0,0 +1,2 @@
+export * from './text'
+export * from './text.types'

package/src/atoms/text/text.android.tsx

@@ -0,0 +1,58 @@
+import {Text as ComposeText} from '@expo/ui/jetpack-compose'
+import {testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+
+import {useHostGuard} from '../../host-context'
+import type {TextComponent, TextDecoration, TextProps, TextTransform} from './text.types'
+
+const DECORATION = {
+  none: 'none',
+  strikethrough: 'lineThrough',
+  underline: 'underline',
+} as const
+
+const applyTransform = (children: TextProps['children'], transform: TextTransform | undefined) => {
+  if (!transform || typeof children !== 'string') {
+    return children
+  }
+
+  return transform === 'uppercase' ? children.toUpperCase() : children.toLowerCase()
+}
+
+const decorationOf = (decoration: TextDecoration | undefined) =>
+  decoration === undefined ? undefined : DECORATION[decoration]
+
+export const Text: TextComponent = ({
+  align,
+  children,
+  color = 'content.primary',
+  decoration,
+  numberOfLines,
+  testID,
+  transform,
+  variant = 'body',
+}: TextProps) => {
+  useHostGuard('Text')
+  const theme = useAppTheme()
+  const style = theme.typography[variant]
+  const modifiers = useMemo(() => (testID ? [testIdModifier(testID)] : undefined), [testID])
+
+  return (
+    <ComposeText
+      color={theme.colorString(color)}
+      maxLines={numberOfLines}
+      modifiers={modifiers}
+      style={{
+        fontFamily: style.fontFamily,
+        fontSize: style.fontSize,
+        fontWeight: style.fontWeight,
+        lineHeight: style.lineHeight,
+        textAlign: align,
+        textDecoration: decorationOf(decoration),
+      }}
+    >
+      {applyTransform(children, transform)}
+    </ComposeText>
+  )
+}

package/src/atoms/text/text.ios.tsx

@@ -0,0 +1,76 @@
+import {Text as SwiftUIText} from '@expo/ui/swift-ui'
+import {
+  foregroundStyle,
+  lineLimit,
+  lineSpacing,
+  type ModifierConfig,
+  multilineTextAlignment,
+  strikethrough,
+  textCase,
+  underline,
+} from '@expo/ui/swift-ui/modifiers'
+import {scaledFont} from '@hzblj/kara-native/swift-ui'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+
+import {useHostGuard} from '../../host-context'
+import type {TextComponent, TextProps} from './text.types'
+
+const ALIGNMENT = {
+  center: 'center',
+  left: 'leading',
+  right: 'trailing',
+} as const
+
+export const Text: TextComponent = ({
+  align,
+  children,
+  color = 'content.primary',
+  decoration,
+  numberOfLines,
+  testID,
+  transform,
+  variant = 'body',
+}: TextProps) => {
+  useHostGuard('Text')
+  const theme = useAppTheme()
+  const style = theme.typography[variant]
+
+  const modifiers = useMemo(() => {
+    const list: ModifierConfig[] = [
+      // Not `@expo/ui`'s `font()`: for the platform's face it gives either Apple's size or a size that ignores Dynamic
+      // Type. `scaledFont` keeps the variant's exact size and scales it along `scalesWith`, either face.
+      scaledFont({family: style.fontFamily, size: style.fontSize, textStyle: style.scalesWith, weight: style.weight}),
+      lineSpacing(Math.max(0, style.lineHeight - style.fontSize)),
+      foregroundStyle(theme.color(color)),
+    ]
+
+    if (align) {
+      list.push(multilineTextAlignment(ALIGNMENT[align]))
+    }
+
+    if (transform) {
+      list.push(textCase(transform))
+    }
+
+    if (decoration === 'underline') {
+      list.push(underline({isActive: true, pattern: 'solid'}))
+    }
+
+    if (decoration === 'strikethrough') {
+      list.push(strikethrough({isActive: true, pattern: 'solid'}))
+    }
+
+    if (numberOfLines !== undefined) {
+      list.push(lineLimit(numberOfLines))
+    }
+
+    return list
+  }, [align, color, decoration, numberOfLines, style, theme, transform])
+
+  return (
+    <SwiftUIText modifiers={modifiers} testID={testID}>
+      {children}
+    </SwiftUIText>
+  )
+}

package/src/atoms/text/text.types.ts

@@ -0,0 +1,21 @@
+import type {ColorToken, TextVariant} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+export type TextAlign = 'center' | 'left' | 'right'
+
+export type TextDecoration = 'none' | 'strikethrough' | 'underline'
+
+export type TextTransform = 'lowercase' | 'uppercase'
+
+export type TextProps = {
+  align?: TextAlign
+  children?: ReactNode
+  color?: ColorToken
+  decoration?: TextDecoration
+  numberOfLines?: number
+  testID?: string
+  transform?: TextTransform
+  variant?: TextVariant
+}
+
+export type TextComponent = (props: TextProps) => ReactNode

package/src/atoms/text-field/index.ts

@@ -0,0 +1,2 @@
+export * from './text-field'
+export * from './text-field.types'

package/src/atoms/text-field/text-field.android.tsx

@@ -0,0 +1,47 @@
+import {Column, Text as ComposeText, OutlinedTextField, useNativeState} from '@expo/ui/jetpack-compose'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useHostGuard} from '../../host-context'
+import type {TextFieldComponent, TextFieldProps} from './text-field.types'
+
+export const TextField: TextFieldComponent = ({
+  defaultValue = '',
+  disabled = false,
+  error = false,
+  label,
+  multiline = false,
+  onChangeText,
+  secure = false,
+}: TextFieldProps) => {
+  useHostGuard('TextField')
+  const theme = useAppTheme()
+  const value = useNativeState(defaultValue)
+  const modifiers = useSxModifiers({wide: true})
+
+  return (
+    <Column verticalArrangement={{spacedBy: 4}}>
+      {label ? (
+        <ComposeText
+          color={theme.colorString(error ? 'content.destructive' : 'content.secondary')}
+          style={theme.typography.labelMedium}
+        >
+          {label}
+        </ComposeText>
+      ) : null}
+      <OutlinedTextField
+        enabled={!disabled}
+        isError={error}
+        modifiers={modifiers}
+        onValueChange={onChangeText}
+        singleLine={!multiline}
+        textStyle={{
+          color: theme.colorString('content.primary'),
+          fontFamily: theme.typography.body.fontFamily,
+          fontWeight: theme.typography.body.fontWeight,
+        }}
+        value={value}
+        visualTransformation={secure ? 'password' : 'none'}
+      />
+    </Column>
+  )
+}

package/src/atoms/text-field/text-field.ios.tsx

@@ -0,0 +1,90 @@
+import {SecureField, TextField as SwiftUITextField, useNativeState, VStack} from '@expo/ui/swift-ui'
+import {disabled as disabledModifier, textFieldStyle} from '@expo/ui/swift-ui/modifiers'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {type ColorToken, spacing} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+import {useHostGuard} from '../../host-context'
+import {Text} from '../text'
+import type {TextFieldComponent, TextFieldProps} from './text-field.types'
+
+type FieldTone = 'default' | 'disabled' | 'error'
+
+type FieldToneColors = {
+  bg: ColorToken
+  border: ColorToken
+  label: ColorToken
+}
+
+const TONE = {
+  default: {bg: 'surface.primary', border: 'border.secondary.muted', label: 'content.secondary'},
+  disabled: {bg: 'surface.depth', border: 'border.quinary', label: 'content.quaternary'},
+  error: {bg: 'surface.primary', border: 'border.destructive', label: 'content.destructive'},
+} as const satisfies Record<FieldTone, FieldToneColors>
+
+/**
+ * Disabled outranks error — a field nobody can edit should recede rather than shout. `.disabled` only
+ * dims the text, so the chrome has to carry the state itself.
+ */
+const toneOf = (disabled: boolean, error: boolean): FieldTone => {
+  if (disabled) {
+    return 'disabled'
+  }
+
+  return error ? 'error' : 'default'
+}
+
+export const TextField: TextFieldComponent = ({
+  defaultValue = '',
+  disabled = false,
+  error = false,
+  label,
+  multiline = false,
+  onChangeText,
+  secure = false,
+  testID,
+}: TextFieldProps) => {
+  useHostGuard('TextField')
+  const text = useNativeState(defaultValue)
+  const tone = TONE[toneOf(disabled, error)]
+
+  const sxModifiers = useSxModifiers({
+    bg: tone.bg,
+    borderColor: tone.border,
+    borderRadius: 'small',
+    borderWidth: 1,
+    px: 's12',
+    py: 's8',
+    wide: true,
+  })
+
+  const modifiers = useMemo(() => {
+    const list = [textFieldStyle('plain'), ...sxModifiers]
+
+    if (disabled) {
+      list.push(disabledModifier(true))
+    }
+
+    return list
+  }, [disabled, sxModifiers])
+
+  return (
+    <VStack alignment="leading" spacing={spacing.s4}>
+      {label ? (
+        <Text color={tone.label} variant="labelMedium">
+          {label}
+        </Text>
+      ) : null}
+      {secure ? (
+        <SecureField modifiers={modifiers} onTextChange={onChangeText} testID={testID} text={text} />
+      ) : (
+        <SwiftUITextField
+          axis={multiline ? 'vertical' : 'horizontal'}
+          modifiers={modifiers}
+          onTextChange={onChangeText}
+          testID={testID}
+          text={text}
+        />
+      )}
+    </VStack>
+  )
+}

package/src/atoms/text-field/text-field.types.ts

@@ -0,0 +1,14 @@
+import type {ReactNode} from 'react'
+
+export type TextFieldProps = {
+  defaultValue?: string
+  disabled?: boolean
+  error?: boolean
+  label?: string
+  multiline?: boolean
+  onChangeText?: (text: string) => void
+  secure?: boolean
+  testID?: string
+}
+
+export type TextFieldComponent = (props: TextFieldProps) => ReactNode

package/src/atoms/v-stack/index.ts

@@ -0,0 +1,2 @@
+export * from './v-stack'
+export * from './v-stack.types'

package/src/atoms/v-stack/v-stack.android.tsx

@@ -0,0 +1,39 @@
+import {Column} from '@expo/ui/jetpack-compose'
+import {clickable, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {spacing} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+import {useHostGuard} from '../../host-context'
+import type {VStackAlign, VStackComponent, VStackProps} from './v-stack.types'
+
+const ALIGNMENT = {
+  center: 'center',
+  end: 'end',
+  start: 'start',
+} as const satisfies Record<VStackAlign, string>
+
+export const VStack: VStackComponent = ({
+  align = 'start',
+  children,
+  onPress,
+  spacing: gap,
+  testID,
+  ...sx
+}: VStackProps) => {
+  useHostGuard('VStack')
+  const sxModifiers = useSxModifiers(sx)
+  const modifiers = useMemo(
+    () => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...(onPress ? [clickable(onPress)] : [])],
+    [onPress, sxModifiers, testID]
+  )
+
+  return (
+    <Column
+      horizontalAlignment={ALIGNMENT[align]}
+      verticalArrangement={gap === undefined ? undefined : {spacedBy: spacing[gap]}}
+      modifiers={modifiers}
+    >
+      {children}
+    </Column>
+  )
+}

package/src/atoms/v-stack/v-stack.ios.tsx

@@ -0,0 +1,40 @@
+import {VStack as SwiftUIVStack} from '@expo/ui/swift-ui'
+import {onTapGesture} from '@expo/ui/swift-ui/modifiers'
+import {type FrameAlignment, useSxModifiers} from '@hzblj/kara-sx'
+import {spacing} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+import {useHostGuard} from '../../host-context'
+import type {VStackAlign, VStackComponent, VStackProps} from './v-stack.types'
+
+const ALIGNMENT = {
+  center: 'center',
+  end: 'trailing',
+  start: 'leading',
+} as const satisfies Record<VStackAlign, FrameAlignment>
+
+export const VStack: VStackComponent = ({
+  align = 'start',
+  children,
+  onPress,
+  spacing: gap,
+  testID,
+  ...sx
+}: VStackProps) => {
+  useHostGuard('VStack')
+  const sxModifiers = useSxModifiers(sx, ALIGNMENT[align])
+  const modifiers = useMemo(
+    () => (onPress ? [...sxModifiers, onTapGesture(onPress)] : sxModifiers),
+    [onPress, sxModifiers]
+  )
+
+  return (
+    <SwiftUIVStack
+      alignment={ALIGNMENT[align]}
+      modifiers={modifiers}
+      spacing={gap === undefined ? undefined : spacing[gap]}
+      testID={testID}
+    >
+      {children}
+    </SwiftUIVStack>
+  )
+}

package/src/atoms/v-stack/v-stack.types.ts

@@ -0,0 +1,15 @@
+import type {ResponsiveSx} from '@hzblj/kara-sx'
+import type {SpaceSize} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+export type VStackAlign = 'center' | 'end' | 'start'
+
+export type VStackProps = ResponsiveSx & {
+  align?: VStackAlign
+  children?: ReactNode
+  onPress?: () => void
+  spacing?: SpaceSize
+  testID?: string
+}
+
+export type VStackComponent = (props: VStackProps) => ReactNode

package/src/atoms/z-stack/index.ts

@@ -0,0 +1,2 @@
+export * from './z-stack'
+export * from './z-stack.types'

package/src/atoms/z-stack/z-stack.android.tsx

@@ -0,0 +1,27 @@
+import {Box} from '@expo/ui/jetpack-compose'
+import {clickable, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {useMemo} from 'react'
+import {useHostGuard} from '../../host-context'
+import type {ZStackAlign, ZStackComponent, ZStackProps} from './z-stack.types'
+
+const ALIGNMENT = {
+  bottom: 'bottomCenter',
+  center: 'center',
+  top: 'topCenter',
+} as const satisfies Record<ZStackAlign, string>
+
+export const ZStack: ZStackComponent = ({align = 'center', children, onPress, testID, ...sx}: ZStackProps) => {
+  useHostGuard('ZStack')
+  const sxModifiers = useSxModifiers(sx)
+  const modifiers = useMemo(
+    () => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...(onPress ? [clickable(onPress)] : [])],
+    [onPress, sxModifiers, testID]
+  )
+
+  return (
+    <Box contentAlignment={ALIGNMENT[align]} modifiers={modifiers}>
+      {children}
+    </Box>
+  )
+}

package/src/atoms/z-stack/z-stack.ios.tsx

@@ -0,0 +1,27 @@
+import {ZStack as SwiftUIZStack} from '@expo/ui/swift-ui'
+import {onTapGesture} from '@expo/ui/swift-ui/modifiers'
+import {type FrameAlignment, useSxModifiers} from '@hzblj/kara-sx'
+import {useMemo} from 'react'
+import {useHostGuard} from '../../host-context'
+import type {ZStackAlign, ZStackComponent, ZStackProps} from './z-stack.types'
+
+const ALIGNMENT = {
+  bottom: 'bottom',
+  center: 'center',
+  top: 'top',
+} as const satisfies Record<ZStackAlign, FrameAlignment>
+
+export const ZStack: ZStackComponent = ({align = 'center', children, onPress, testID, ...sx}: ZStackProps) => {
+  useHostGuard('ZStack')
+  const sxModifiers = useSxModifiers(sx, ALIGNMENT[align])
+  const modifiers = useMemo(
+    () => (onPress ? [...sxModifiers, onTapGesture(onPress)] : sxModifiers),
+    [onPress, sxModifiers]
+  )
+
+  return (
+    <SwiftUIZStack alignment={ALIGNMENT[align]} modifiers={modifiers} testID={testID}>
+      {children}
+    </SwiftUIZStack>
+  )
+}