blend-native 0.0.1-beta.0

package/src/theme/nativeTokenRegistry.ts

@@ -0,0 +1,57 @@
+import {
+    FOUNDATION_THEME,
+    Theme,
+    getAlertV2Tokens,
+    getButtonV2Tokens,
+    getSkeletonTokens,
+    getTagV2Tokens,
+    getTextInputV2Tokens,
+    type BreakpointType,
+} from '@juspay/blend-design-system/node'
+
+/**
+ * Slot name → token factory.
+ *
+ * **This is the only file to edit when adding a component.** Web needs three
+ * files changed in lockstep for a new token slot (`context/ThemeContext.tsx`
+ * for the type + default, `context/initComponentTokens.ts` for the `??`
+ * fallback, `context/useComponentToken.ts` for the union and `switch` case) —
+ * and missing one throws at runtime. Native collapses that to a single
+ * registry entry, with the slot union derived from the object rather than
+ * hand-maintained alongside it.
+ *
+ * Factories come from `@juspay/blend-design-system/node`, the React-free
+ * entry, so registering one pulls in no UI code.
+ */
+export const NATIVE_TOKEN_REGISTRY = {
+    ALERTV2: getAlertV2Tokens,
+    BUTTONV2: getButtonV2Tokens,
+    SKELETON: getSkeletonTokens,
+    TAGV2: getTagV2Tokens,
+    TEXT_INPUTV2: getTextInputV2Tokens,
+} as const
+
+/** Every component slot native can resolve. Derived, never hand-written. */
+export type NativeTokenSlot = keyof typeof NATIVE_TOKEN_REGISTRY
+
+/**
+ * A Blend token factory: pure, takes foundation tokens plus a theme, and
+ * returns one token object per breakpoint.
+ */
+export type TokenFactory<T> = (
+    foundation: typeof FOUNDATION_THEME,
+    theme?: Theme | string
+) => Record<keyof BreakpointType, T>
+
+/** Overrides accepted by `BlendNativeProvider`, keyed by slot. */
+export type NativeComponentTokenOverrides = Partial<
+    Record<NativeTokenSlot, unknown>
+>
+
+export const NATIVE_TOKEN_SLOTS = Object.keys(
+    NATIVE_TOKEN_REGISTRY
+) as NativeTokenSlot[]
+
+export function isNativeTokenSlot(value: string): value is NativeTokenSlot {
+    return Object.prototype.hasOwnProperty.call(NATIVE_TOKEN_REGISTRY, value)
+}

package/src/theme/systemTheme.ts

@@ -0,0 +1,34 @@
+import { Theme } from '@juspay/blend-design-system/node'
+
+/**
+ * `theme="system"` resolution.
+ *
+ * The provider accepts the sentinel and resolves it against the OS appearance
+ * (`useColorScheme`) before the value enters context, so token resolution and
+ * every consumer below only ever see a concrete theme.
+ *
+ * Kept as a leaf module with no `react-native` value import so the mapping is
+ * testable under plain vitest; the provider owns the `useColorScheme`
+ * subscription.
+ */
+
+/** Pass as `theme` to follow the OS light/dark setting. */
+export const SYSTEM_THEME = 'system' as const
+
+export type NativeThemeSetting = Theme | string | typeof SYSTEM_THEME
+
+/**
+ * Resolve a theme setting to a concrete theme.
+ *
+ * `colorScheme` is `useColorScheme()`'s value. Typed as `string` rather than
+ * a literal union because RN's `ColorSchemeName` has grown values across
+ * versions (`'unspecified'` on some platforms) — anything that is not
+ * `'dark'` resolves light, matching the provider's default.
+ */
+export function resolveThemeSetting(
+    theme: NativeThemeSetting,
+    colorScheme: string | null | undefined
+): Theme | string {
+    if (theme !== SYSTEM_THEME) return theme
+    return colorScheme === 'dark' ? Theme.DARK : Theme.LIGHT
+}

package/src/theme/useNativeBreakpoint.ts

@@ -0,0 +1,27 @@
+import { useWindowDimensions } from 'react-native'
+import {
+    BREAKPOINTS,
+    type BreakpointType,
+} from '@juspay/blend-design-system/node'
+import { resolveBreakpoint, type NativeBreakpoint } from './breakpoint'
+
+export { resolveBreakpoint }
+export type { NativeBreakpoint }
+
+/**
+ * The active breakpoint for the current RN viewport.
+ *
+ * `useWindowDimensions` is RN's equivalent of web's resize listener — it
+ * re-renders on rotation, split-screen, and foldable unfold. The previous
+ * implementation hardcoded `'sm'` on the assumption that native is
+ * phone-only, which silently gave tablets and landscape the wrong tokens.
+ *
+ * The width→label mapping itself lives in `./breakpoint`, which imports
+ * nothing from `react-native` and is therefore unit-testable.
+ */
+export function useNativeBreakpoint(
+    breakpoints: BreakpointType = BREAKPOINTS
+): NativeBreakpoint {
+    const { width } = useWindowDimensions()
+    return resolveBreakpoint(width, breakpoints)
+}

package/src/theme/useNativeTokens.ts

@@ -0,0 +1,99 @@
+import { useContext, useMemo } from 'react'
+import {
+    FOUNDATION_THEME,
+    Theme,
+    mergeTokenTree,
+    type BreakpointType,
+} from '@juspay/blend-design-system/node'
+import { BlendNativeThemeContext } from './BlendNativeProvider'
+import {
+    NATIVE_TOKEN_REGISTRY,
+    NATIVE_TOKEN_SLOTS,
+    isNativeTokenSlot,
+    type NativeTokenSlot,
+    type TokenFactory,
+} from './nativeTokenRegistry'
+import { useNativeBreakpoint } from './useNativeBreakpoint'
+
+/**
+ * Resolve one component's tokens, flattened for the active breakpoint and
+ * with any provider overrides deep-merged in.
+ *
+ * The native counterpart of web's `useResponsiveTokens('BUTTONV2')`, and
+ * deliberately the same call shape so component code reads the same on both
+ * platforms.
+ *
+ * Note `mergeTokenTree` is imported from the web package rather than
+ * reimplemented — override semantics (plain objects merge key-by-key,
+ * everything else replaces, `undefined` is skipped) must not drift between
+ * web and native.
+ */
+
+/** Resolution cache, keyed the way web's `initTokens` keys its own. */
+const resolutionCache = new WeakMap<
+    object,
+    Map<string, Record<keyof BreakpointType, unknown>>
+>()
+
+function resolveResponsive(
+    slot: NativeTokenSlot,
+    foundationTokens: typeof FOUNDATION_THEME,
+    theme: Theme | string,
+    overrides: unknown
+): Record<keyof BreakpointType, unknown> {
+    let byKey = resolutionCache.get(foundationTokens)
+    if (!byKey) {
+        byKey = new Map()
+        resolutionCache.set(foundationTokens, byKey)
+    }
+
+    // Overrides participate in the key by identity — they are expected to be
+    // a stable object from the consumer, exactly as on web.
+    const hasOverride = overrides !== undefined
+    const cacheKey = `${slot}::${String(theme)}::${hasOverride ? 'o' : '-'}`
+
+    if (!hasOverride) {
+        const cached = byKey.get(cacheKey)
+        if (cached) return cached
+    }
+
+    const factory = NATIVE_TOKEN_REGISTRY[slot] as TokenFactory<unknown>
+    const responsive = factory(foundationTokens, theme)
+    const resolved = (
+        hasOverride ? mergeTokenTree(responsive, overrides) : responsive
+    ) as Record<keyof BreakpointType, unknown>
+
+    if (!hasOverride) byKey.set(cacheKey, resolved)
+    return resolved
+}
+
+export function useNativeTokens<T>(slot: NativeTokenSlot): T {
+    const { theme, componentTokens, foundationTokens, breakpoints } =
+        useContext(BlendNativeThemeContext)
+    // The provider's `breakpoints` must reach the resolver — calling
+    // `useNativeBreakpoint()` bare silently ignores a consumer's override
+    // and resolves against the defaults.
+    const breakpoint = useNativeBreakpoint(breakpoints)
+
+    if (!isNativeTokenSlot(slot)) {
+        throw new Error(
+            `[blend-native] Unknown component token slot "${slot}". ` +
+                `Known slots: ${NATIVE_TOKEN_SLOTS.join(', ')}. ` +
+                `Register new components in src/theme/nativeTokenRegistry.ts.`
+        )
+    }
+
+    const overrides = componentTokens?.[slot]
+
+    return useMemo(() => {
+        const responsive = resolveResponsive(
+            slot,
+            foundationTokens,
+            theme,
+            overrides
+        )
+        return responsive[breakpoint] as T
+    }, [slot, foundationTokens, theme, overrides, breakpoint])
+}
+
+export default useNativeTokens