@hzblj/kara-components 0.1.0 → 0.2.1

package/src/atoms/countdown/countdown-frame.tsx

@@ -1,123 +0,0 @@
-import type {CountdownUnits} from '@hzblj/kara-native'
-import {MAX_FONT_SCALE, type TextVariant, useAppTheme} from '@hzblj/kara-theme'
-import {type ReactNode, useEffect, useMemo, useState} from 'react'
-import {StyleSheet, Text, useWindowDimensions, View} from 'react-native'
-
-const SECOND_MS = 1000
-const HOUR = 3600
-const DAY = 86_400
-const DIVIDER = ' / '
-
-/** Wakes a beat after the shape changes, so the frame never reads the boundary second twice. */
-const SHAPE_CHANGE_SLACK_MS = 50
-
-type CountdownShape = {
-  days: number
-  hasHours: boolean
-}
-
-const remainingSeconds = (endsAt: number) => Math.max(0, Math.round((endsAt - Date.now()) / SECOND_MS))
-
-const countdownShape = (endsAt: number): CountdownShape => {
-  const remaining = remainingSeconds(endsAt)
-
-  return {days: Math.floor(remaining / DAY), hasHours: remaining >= HOUR}
-}
-
-/** When the next segment drops out — the last day, then the last hour — or `null` once only minutes are left. */
-const nextShapeChange = (endsAt: number, {days, hasHours}: CountdownShape) => {
-  if (days > 0) {
-    return endsAt - (days * DAY - 0.5) * SECOND_MS
-  }
-
-  if (hasHours) {
-    return endsAt - (HOUR - 0.5) * SECOND_MS
-  }
-
-  return null
-}
-
-/** The countdown's shape changes twice at most, so this re-renders twice at most — never once a second. */
-const useCountdownShape = (endsAt: number) => {
-  const [shape, setShape] = useState(() => countdownShape(endsAt))
-
-  useEffect(() => {
-    let timeout: ReturnType<typeof setTimeout> | undefined
-
-    const update = () => {
-      const next = countdownShape(endsAt)
-
-      setShape(current => (current.days === next.days && current.hasHours === next.hasHours ? current : next))
-
-      const changesAt = nextShapeChange(endsAt, next)
-
-      if (changesAt !== null) {
-        timeout = setTimeout(update, Math.max(0, changesAt - Date.now()) + SHAPE_CHANGE_SLACK_MS)
-      }
-    }
-
-    update()
-
-    return () => clearTimeout(timeout)
-  }, [endsAt])
-
-  return shape
-}
-
-/** The widest string the countdown can show in its current shape, with zeros standing in for the digits. */
-const countdownTemplate = ({days, hasHours}: CountdownShape, [day, hour, minute, second]: CountdownUnits) => {
-  let template = ''
-
-  if (days > 0) {
-    template += `${'0'.repeat(String(days).length)}${day}${DIVIDER}`
-  }
-
-  if (hasHours) {
-    template += `00${hour}${DIVIDER}`
-  }
-
-  return `${template}00${minute}${DIVIDER}00${second}`
-}
-
-const styles = StyleSheet.create({
-  template: {opacity: 0},
-})
-
-type CountdownFrameProps = {
-  children: ReactNode
-  endsAt: number
-  testID?: string
-  units: CountdownUnits
-  variant: TextVariant
-}
-
-/**
- * What gives the native countdown its size: an invisible React Native text of exactly the shape it draws, set the way
- * `RnText` sets the same variant, so the countdown takes the space any text of that variant would — and the native view
- * laid over it has to match it to the point. Accessibility reads the native view, never this.
- */
-export const CountdownFrame = ({children, endsAt, testID, units, variant}: CountdownFrameProps) => {
-  const theme = useAppTheme()
-  const {fontScale} = useWindowDimensions()
-  const shape = useCountdownShape(endsAt)
-  const template = useMemo(() => countdownTemplate(shape, units), [shape, units])
-  const style = theme.typography[variant]
-
-  /** As in `RnText`: React Native grows the glyphs but not the line, so the line grows here by the same capped factor. */
-  const lineHeight = style.lineHeight * Math.min(fontScale, MAX_FONT_SCALE)
-
-  return (
-    <View testID={testID}>
-      <View accessibilityElementsHidden importantForAccessibility="no-hide-descendants" style={styles.template}>
-        <Text
-          maxFontSizeMultiplier={MAX_FONT_SCALE}
-          numberOfLines={1}
-          style={[style, {fontVariant: ['tabular-nums'], lineHeight}]}
-        >
-          {template}
-        </Text>
-      </View>
-      {children}
-    </View>
-  )
-}

package/src/atoms/countdown/countdown-units.ts

@@ -1,37 +0,0 @@
-import type {CountdownUnits} from '@hzblj/kara-native'
-import {useMemo} from 'react'
-
-const FALLBACK_UNITS: CountdownUnits = ['d', 'h', 'm', 's']
-
-type Unit = 'day' | 'hour' | 'minute' | 'second'
-
-/** The first letter of the locale's short unit name — `d`, `h`, `m`, `s` in English, `d`, `h`, `m`, `s` in Czech too. */
-const unitInitial = (locale: string | undefined, unit: Unit, fallback: string) => {
-  try {
-    const parts = new Intl.NumberFormat(locale, {style: 'unit', unit, unitDisplay: 'short'}).formatToParts(1)
-    const initial = parts
-      .find(part => part.type === 'unit')
-      ?.value.trim()
-      .charAt(0)
-
-    return initial || fallback
-  } catch {
-    return fallback
-  }
-}
-
-/** The caller's units, else the locale's initials, else English ones. */
-export const useCountdownUnits = (locale: string | undefined, units: CountdownUnits | undefined): CountdownUnits =>
-  useMemo(
-    () =>
-      units ?? [
-        unitInitial(locale, 'day', FALLBACK_UNITS[0]),
-        unitInitial(locale, 'hour', FALLBACK_UNITS[1]),
-        unitInitial(locale, 'minute', FALLBACK_UNITS[2]),
-        unitInitial(locale, 'second', FALLBACK_UNITS[3]),
-      ],
-    [locale, units]
-  )
-
-/** `endsAt` as the epoch milliseconds the native views take. */
-export const toEpochMs = (endsAt: Date | number) => (typeof endsAt === 'number' ? endsAt : endsAt.getTime())

package/src/atoms/countdown/countdown.android.tsx

@@ -1,49 +0,0 @@
-import {Host} from '@expo/ui/jetpack-compose'
-import {Countdown as NativeCountdown} from '@hzblj/kara-native/jetpack-compose'
-import {MAX_FONT_SCALE, useAppTheme} from '@hzblj/kara-theme'
-import {StyleSheet, useWindowDimensions} from 'react-native'
-import type {CountdownComponent, CountdownProps} from './countdown.types'
-import {CountdownFrame} from './countdown-frame'
-import {toEpochMs, useCountdownUnits} from './countdown-units'
-
-export const Countdown: CountdownComponent = ({
-  color = 'content.primary',
-  endsAt,
-  locale,
-  testID,
-  units,
-  variant = 'body',
-}: CountdownProps) => {
-  const theme = useAppTheme()
-  const {fontScale} = useWindowDimensions()
-  const resolvedUnits = useCountdownUnits(locale, units)
-  const endsAtMs = toEpochMs(endsAt)
-  const style = theme.typography[variant]
-
-  /**
-   * Compose reads `sp` and scales it by the font scale itself — uncapped — while the React Native frame under it stops
-   * at `MAX_FONT_SCALE`. Pre-dividing by the part Compose would add past the cap lands both on the same size.
-   */
-  const scale = Math.min(fontScale, MAX_FONT_SCALE) / fontScale
-
-  return (
-    <CountdownFrame endsAt={endsAtMs} testID={testID} units={resolvedUnits} variant={variant}>
-      <Host
-        colorScheme={theme.dark ? 'dark' : 'light'}
-        pointerEvents="none"
-        seedColor={theme.materialSeed}
-        style={StyleSheet.absoluteFill}
-      >
-        <NativeCountdown
-          color={theme.color(color)}
-          endsAt={endsAtMs}
-          fontFamily={style.fontFamily}
-          fontSize={style.fontSize * scale}
-          fontWeight={style.weight}
-          lineHeight={style.lineHeight * scale}
-          units={resolvedUnits}
-        />
-      </Host>
-    </CountdownFrame>
-  )
-}

package/src/atoms/countdown/countdown.ios.tsx

@@ -1,46 +0,0 @@
-import {Host} from '@expo/ui/swift-ui'
-import {Countdown as NativeCountdown} from '@hzblj/kara-native/swift-ui'
-import {MAX_FONT_SCALE, useAppTheme} from '@hzblj/kara-theme'
-import {StyleSheet, useWindowDimensions} from 'react-native'
-import type {CountdownComponent, CountdownProps} from './countdown.types'
-import {CountdownFrame} from './countdown-frame'
-import {toEpochMs, useCountdownUnits} from './countdown-units'
-
-export const Countdown: CountdownComponent = ({
-  color = 'content.primary',
-  endsAt,
-  locale,
-  testID,
-  units,
-  variant = 'body',
-}: CountdownProps) => {
-  const theme = useAppTheme()
-  const {fontScale} = useWindowDimensions()
-  const resolvedUnits = useCountdownUnits(locale, units)
-  const endsAtMs = toEpochMs(endsAt)
-  const style = theme.typography[variant]
-
-  /** SwiftUI is handed points, so it is scaled here exactly as React Native scales the frame text under it. */
-  const scale = Math.min(fontScale, MAX_FONT_SCALE)
-
-  return (
-    <CountdownFrame endsAt={endsAtMs} testID={testID} units={resolvedUnits} variant={variant}>
-      <Host
-        colorScheme={theme.dark ? 'dark' : 'light'}
-        ignoreSafeArea="all"
-        pointerEvents="none"
-        style={StyleSheet.absoluteFill}
-      >
-        <NativeCountdown
-          color={theme.color(color)}
-          endsAt={endsAtMs}
-          fontFamily={style.fontFamily}
-          fontSize={style.fontSize * scale}
-          fontWeight={style.weight}
-          lineHeight={style.lineHeight * scale}
-          units={resolvedUnits}
-        />
-      </Host>
-    </CountdownFrame>
-  )
-}

package/src/atoms/countdown/countdown.types.ts

@@ -1,24 +0,0 @@
-import type {CountdownUnits} from '@hzblj/kara-native'
-import type {ColorToken, TextVariant} from '@hzblj/kara-theme'
-import type {ReactNode} from 'react'
-
-export type {CountdownUnits} from '@hzblj/kara-native'
-
-/**
- * A live countdown — `2d / 05h / 09m / 41s` — drawn natively, so it ticks and rolls its digits without a React render
- * per second. The React Native tier: it sizes itself with an invisible React Native text of the same shape, and lays
- * its own native host over that, so it needs no `Screen` or `Island` around it.
- */
-export type CountdownProps = {
-  color?: ColorToken
-  /** The moment it reaches zero, as a `Date` or epoch milliseconds. It stops there. */
-  endsAt: Date | number
-  /** Picks the unit initials when `units` is not given. The device's locale by default. */
-  locale?: string
-  testID?: string
-  /** Overrides the locale's unit initials. */
-  units?: CountdownUnits
-  variant?: TextVariant
-}
-
-export type CountdownComponent = (props: CountdownProps) => ReactNode

package/src/atoms/countdown/index.ts

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

package/src/atoms/date-picker/date-picker.tsx

@@ -1,26 +0,0 @@
-import {DateTimePicker} from '@expo/ui/community/datetime-picker'
-import {useCallback} from 'react'
-
-import type {DatePickerComponent, DatePickerProps} from './date-picker.types'
-
-export const DatePicker: DatePickerComponent = ({
-  max,
-  min,
-  mode = 'date',
-  onValueChange,
-  testID,
-  value,
-}: DatePickerProps) => {
-  const onChange = useCallback(
-    (_event: unknown, date?: Date) => {
-      if (date) {
-        onValueChange?.(date)
-      }
-    },
-    [onValueChange]
-  )
-
-  return (
-    <DateTimePicker maximumDate={max} minimumDate={min} mode={mode} onChange={onChange} testID={testID} value={value} />
-  )
-}

package/src/atoms/icon/icon-names.ts

@@ -1,53 +0,0 @@
-import type {IconName} from './icon.types'
-
-export const SF_SYMBOLS = {
-  add: 'plus',
-  arrowLeft: 'arrow.left',
-  arrowRight: 'arrow.right',
-  calendar: 'calendar',
-  check: 'checkmark',
-  chevronDown: 'chevron.down',
-  chevronRight: 'chevron.right',
-  close: 'xmark',
-  error: 'exclamationmark.octagon',
-  grid: 'square.grid.2x2',
-  heart: 'heart',
-  home: 'house',
-  info: 'info.circle',
-  lock: 'lock',
-  more: 'ellipsis',
-  notification: 'bell',
-  search: 'magnifyingglass',
-  settings: 'gearshape',
-  share: 'square.and.arrow.up',
-  star: 'star',
-  trash: 'trash',
-  user: 'person',
-  warning: 'exclamationmark.triangle',
-} as const satisfies Record<IconName, string>
-
-export const MATERIAL_ICONS = {
-  add: 'add',
-  arrowLeft: 'arrow-back',
-  arrowRight: 'arrow-forward',
-  calendar: 'calendar-today',
-  check: 'check',
-  chevronDown: 'expand-more',
-  chevronRight: 'chevron-right',
-  close: 'close',
-  error: 'error',
-  grid: 'grid-view',
-  heart: 'favorite',
-  home: 'home',
-  info: 'info',
-  lock: 'lock',
-  more: 'more-horiz',
-  notification: 'notifications',
-  search: 'search',
-  settings: 'settings',
-  share: 'share',
-  star: 'star',
-  trash: 'delete',
-  user: 'person',
-  warning: 'warning',
-} as const satisfies Record<IconName, string>

package/src/organisms/rn-context-menu/index.ts

@@ -1,2 +0,0 @@
-export * from './rn-context-menu'
-export * from './rn-context-menu.types'

package/src/organisms/rn-context-menu/rn-context-menu.android.tsx

@@ -1,90 +0,0 @@
-import {Text as ComposeText, DropdownMenu, DropdownMenuItem, Host} from '@expo/ui/jetpack-compose'
-import {useSx} from '@hzblj/kara-sx'
-import {useAppTheme} from '@hzblj/kara-theme'
-import {useCallback, useState} from 'react'
-import {Pressable, StyleSheet, View} from 'react-native'
-import type {MenuAction} from '../menu'
-import type {RnContextMenuComponent, RnContextMenuExclusionProps, RnContextMenuProps} from './rn-context-menu.types'
-
-/**
- * The menu's anchor: a point at the trigger's bottom start, so the dropdown opens just under it. The host lies outside
- * the touch path — the dropdown is a popup window of its own, which takes its touches regardless.
- */
-const styles = StyleSheet.create({
-  anchor: {bottom: 0, height: 1, left: 0, position: 'absolute', width: 1},
-})
-
-type MenuRowProps = {
-  action: MenuAction
-  onDismiss: () => void
-}
-
-/** A row's `onClick` closes over its own action, so memoising it needs a component per row. */
-const MenuRow = ({action, onDismiss}: MenuRowProps) => {
-  const theme = useAppTheme()
-
-  const onClick = useCallback(() => {
-    onDismiss()
-    action.onPress()
-  }, [action, onDismiss])
-
-  return (
-    <DropdownMenuItem onClick={onClick}>
-      <DropdownMenuItem.Text>
-        <ComposeText
-          color={theme.colorString(action.destructive ? 'content.destructive' : 'content.primary')}
-          style={theme.typography.body}
-        >
-          {action.label}
-        </ComposeText>
-      </DropdownMenuItem.Text>
-    </DropdownMenuItem>
-  )
-}
-
-/**
- * The trigger stays a plain React Native subtree; a long press on it expands a Compose `DropdownMenu` anchored under
- * it. The host behind the menu mounts on the first long press and stays — a list of triggers that are only scrolled
- * past never builds one. `preview` and `onPreviewPress` are iOS-only: Material has no lifted preview.
- */
-const RnContextMenuRoot = ({actions, children, testID, ...props}: RnContextMenuProps) => {
-  const {onPreviewPress: _onPreviewPress, preview: _preview, ...sx} = props
-  const theme = useAppTheme()
-  const style = useSx(sx)
-  const [isHostMounted, setIsHostMounted] = useState(false)
-  const [expanded, setExpanded] = useState(false)
-
-  const open = useCallback(() => {
-    setIsHostMounted(true)
-    setExpanded(true)
-  }, [])
-
-  const dismiss = useCallback(() => setExpanded(false), [])
-
-  return (
-    <Pressable onLongPress={open} style={style} testID={testID}>
-      {children}
-      {isHostMounted ? (
-        <Host
-          colorScheme={theme.dark ? 'dark' : 'light'}
-          pointerEvents="none"
-          seedColor={theme.materialSeed}
-          style={styles.anchor}
-        >
-          <DropdownMenu expanded={expanded} onDismissRequest={dismiss}>
-            <DropdownMenu.Items>
-              {actions.map(action => (
-                <MenuRow action={action} key={action.label} onDismiss={dismiss} />
-              ))}
-            </DropdownMenu.Items>
-          </DropdownMenu>
-        </Host>
-      ) : null}
-    </Pressable>
-  )
-}
-
-/** A touchable inside the trigger already claims its own long press on Android, so this only has to group. */
-const Exclusion = ({children}: RnContextMenuExclusionProps) => <View>{children}</View>
-
-export const RnContextMenu: RnContextMenuComponent = Object.assign(RnContextMenuRoot, {Exclusion})

package/src/organisms/rn-context-menu/rn-context-menu.ios.tsx

@@ -1,47 +0,0 @@
-import {
-  type ContextMenuItem,
-  ContextMenu as NativeContextMenu,
-  ContextMenuExclusion as NativeContextMenuExclusion,
-} from '@hzblj/kara-native/swift-ui'
-import {useSx} from '@hzblj/kara-sx'
-import {useCallback, useMemo} from 'react'
-import type {SFSymbol} from 'sf-symbols-typescript'
-import {SF_SYMBOLS} from '../../atoms/icon'
-import type {RnContextMenuComponent, RnContextMenuExclusionProps, RnContextMenuProps} from './rn-context-menu.types'
-
-const RnContextMenuRoot = ({actions, children, onPreviewPress, preview, testID, ...sx}: RnContextMenuProps) => {
-  const style = useSx(sx)
-
-  /** The native side hands back an id; the index is the one identity every action has. */
-  const items = useMemo<ContextMenuItem[]>(
-    () =>
-      actions.map((action, index) => ({
-        destructive: action.destructive,
-        id: String(index),
-        systemImage: action.icon ? (SF_SYMBOLS[action.icon] as SFSymbol) : undefined,
-        title: action.label,
-      })),
-    [actions]
-  )
-
-  const onSelectItem = useCallback((id: string) => actions[Number(id)]?.onPress(), [actions])
-
-  return (
-    <NativeContextMenu
-      items={items}
-      onPreviewPress={onPreviewPress}
-      onSelectItem={onSelectItem}
-      preview={preview}
-      style={style}
-      testID={testID}
-    >
-      {children}
-    </NativeContextMenu>
-  )
-}
-
-const Exclusion = ({children}: RnContextMenuExclusionProps) => (
-  <NativeContextMenuExclusion>{children}</NativeContextMenuExclusion>
-)
-
-export const RnContextMenu: RnContextMenuComponent = Object.assign(RnContextMenuRoot, {Exclusion})

package/src/organisms/rn-context-menu/rn-context-menu.types.ts

@@ -1,36 +0,0 @@
-import type {ResponsiveViewSx} from '@hzblj/kara-sx'
-import type {ReactNode} from 'react'
-import type {MenuAction} from '../menu'
-
-/**
- * A context menu on a React Native subtree — a card in a list, say — opened by a long press. iOS: a
- * `UIContextMenuInteraction`, with an optional React Native `preview` lifted while the menu is open and a callback for
- * a tap on it. Android: a Material dropdown under the subtree. The React Native tier, unlike `ContextMenu`, whose
- * trigger is a native view inside a host.
- */
-export type RnContextMenuProps = ResponsiveViewSx & {
-  actions: MenuAction[]
-  /** The trigger, laid out as usual. */
-  children: ReactNode
-  /** iOS: the user tapped the lifted preview, committing to it — open the detail the card stands for. */
-  onPreviewPress?: () => void
-  /**
-   * iOS: lifted in place of the trigger while the menu is open — a larger version of the card, say. A snapshot of the
-   * trigger when unset. Mounted only once a finger has rested on the trigger, so a list of cards does not pay for
-   * every preview up front.
-   */
-  preview?: ReactNode
-  testID?: string
-}
-
-export type RnContextMenuExclusionProps = {
-  children: ReactNode
-}
-
-export type RnContextMenuComponent = ((props: RnContextMenuProps) => ReactNode) & {
-  /**
-   * A region of the trigger that must not open the menu — a button inside the card. On iOS the interaction covers the
-   * whole trigger, so a long press on that button would otherwise open the card's menu.
-   */
-  Exclusion: (props: RnContextMenuExclusionProps) => ReactNode
-}