@hzblj/kara-components 0.0.0-stage → 0.1.0

package/src/templates/screen/screen.ios.tsx

@@ -0,0 +1,33 @@
+import {Host, VStack} from '@expo/ui/swift-ui'
+import {dynamicTypeSize} from '@expo/ui/swift-ui/modifiers'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {MAX_DYNAMIC_TYPE_SIZE, useAppTheme} from '@hzblj/kara-theme'
+import {StyleSheet} from 'react-native'
+import {HostBoundary} from '../../host-context'
+import type {ScreenComponent, ScreenProps} from './screen.types'
+
+/**
+ * Set on the host so it cascades through the SwiftUI environment to every native atom below. Capping rather than
+ * opting out is Apple's own guidance — a capped layout still answers the setting, an opted-out one ignores the user.
+ */
+const DYNAMIC_TYPE_CAP = [dynamicTypeSize({max: MAX_DYNAMIC_TYPE_SIZE})]
+
+export const Screen: ScreenComponent = ({bg = 'surface.base', children, ignoreKeyboardInset, testID}: ScreenProps) => {
+  const theme = useAppTheme()
+  const modifiers = useSxModifiers({bg, tall: true, wide: true})
+
+  return (
+    <Host
+      colorScheme={theme.dark ? 'dark' : 'light'}
+      ignoreSafeArea={ignoreKeyboardInset ? 'keyboard' : undefined}
+      modifiers={DYNAMIC_TYPE_CAP}
+      seedColor={theme.materialSeed}
+      style={StyleSheet.absoluteFill}
+      testID={testID}
+    >
+      <VStack modifiers={modifiers}>
+        <HostBoundary>{children}</HostBoundary>
+      </VStack>
+    </Host>
+  )
+}

package/src/templates/screen/screen.types.ts

@@ -0,0 +1,11 @@
+import type {Sx} from '@hzblj/kara-sx'
+import type {ReactNode} from 'react'
+
+export type ScreenProps = {
+  bg?: Sx['bg']
+  children?: ReactNode
+  ignoreKeyboardInset?: boolean
+  testID?: string
+}
+
+export type ScreenComponent = (props: ScreenProps) => ReactNode

package/src/use-refresh-state.ts

@@ -0,0 +1,34 @@
+import {useCallback, useState} from 'react'
+
+export type RefreshState = {
+  isRefreshing: boolean
+  refresh: () => void
+}
+
+/**
+ * Bridges the two platforms' opposite takes on pull-to-refresh so both can expose one async
+ * `onRefresh`. SwiftUI's `refreshable` takes the promise and spins until it settles, so iOS hands the
+ * handler straight over; Compose's `PullToRefreshBox` is controlled and keeps spinning until
+ * `isRefreshing` goes false, which is the flag this derives.
+ *
+ * Errors are left to the caller: `Promise.resolve().then` turns even a synchronous throw into a
+ * rejection the caller still sees, while `finally` stops the spinner either way. Swallowing it here
+ * would leave a failed refresh looking like a successful one.
+ */
+export const useRefreshState = (onRefresh: (() => Promise<void>) | undefined): RefreshState => {
+  const [isRefreshing, setIsRefreshing] = useState(false)
+
+  const refresh = useCallback(() => {
+    if (!onRefresh) {
+      return
+    }
+
+    setIsRefreshing(true)
+
+    void Promise.resolve()
+      .then(onRefresh)
+      .finally(() => setIsRefreshing(false))
+  }, [onRefresh])
+
+  return {isRefreshing, refresh}
+}