blend-native 0.0.1-beta.0 → 0.0.1-beta.2

package/src/components/Snackbar/snackbar.types.ts

@@ -0,0 +1,42 @@
+import type React from 'react'
+import type { SnackbarV2Variant } from '@juspay/blend-design-system/node'
+
+/**
+ * Options for `addSnackbar` — the native port of web's `addSnackbarV2`.
+ *
+ * The web implementation is sonner-based; native rides the package's own
+ * toast host, so the API is imperative-only and the stack is bottom-only.
+ *
+ * Deliberately omitted rather than accepted-and-ignored (compile errors):
+ *
+ * - `position` — the native stack is bottom-centred (documented
+ *   divergence); web's six positions need a top outlet first.
+ * - `dismissOnClickAway` / `hotkey` — pointer/keyboard concepts.
+ * - `maxWidth` / `width` / `minWidth` — the outlet's horizontal insets
+ *   govern toast width on a phone.
+ */
+export type SnackbarAction = {
+    label: string
+    onPress: () => void
+    /** Keep the snackbar open after the action unless explicitly `false`. */
+    autoDismiss?: boolean
+}
+
+export type SnackbarOptions = {
+    /** Stable id replaces an existing snackbar in place. */
+    id?: string
+    header: string
+    description?: string
+    variant?: SnackbarV2Variant
+    /** Replaces the variant icon. */
+    slot?: React.ReactNode
+    actionButton?: SnackbarAction
+    onClose?: () => void
+    /**
+     * Auto-dismiss delay in ms. `Infinity` or `null` keeps the snackbar
+     * until dismissed. `0` is NOT persistent (web parity — it warns in dev
+     * and falls back to the default duration).
+     */
+    duration?: number | null
+    testID?: string
+}

package/src/components/Snackbar/snackbar.utils.ts

@@ -0,0 +1,31 @@
+/**
+ * Duration mapping for `addSnackbar`, mirroring web's sonner semantics:
+ * `Infinity`/`null` → persistent (the host's `null`); `0` → NOT persistent
+ * — web warns once in dev and lets the default apply; `undefined` →
+ * default.
+ */
+let warnedZeroDuration = false
+
+/** Test hook. */
+export function resetSnackbarWarnings() {
+    warnedZeroDuration = false
+}
+
+export function resolveSnackbarDuration(
+    duration: number | null | undefined
+): number | null | undefined {
+    if (duration === null || duration === Infinity) return null
+    if (duration === 0) {
+        if (typeof __DEV__ !== 'undefined' && __DEV__ && !warnedZeroDuration) {
+            warnedZeroDuration = true
+            console.warn(
+                '[blend-native] addSnackbar({ duration: 0 }) is not ' +
+                    'persistent — pass Infinity (or null) to keep a ' +
+                    'snackbar until dismissed. Falling back to the default ' +
+                    'duration, matching web.'
+            )
+        }
+        return undefined
+    }
+    return duration
+}

package/src/components/Sparkline/Sparkline.tsx

@@ -0,0 +1,175 @@
+import { memo, useState } from 'react'
+import { View } from 'react-native'
+import type { LayoutChangeEvent } from 'react-native'
+import {
+    VictoryLine,
+    VictoryArea,
+    VictoryBar,
+    VictoryChart,
+    VictoryAxis,
+} from 'victory-native'
+import { FOUNDATION_THEME } from '@juspay/blend-design-system/node'
+import type { SparklineNativeProps } from './sparkline.types'
+
+const DEFAULT_HEIGHT = 50
+const DEFAULT_STROKE = 2
+
+/** A sparkline has no axes — suppress the default VictoryChart axis line,
+ * ticks, and labels so only the data shape shows. */
+const NO_AXIS = (
+    <>
+        <VictoryAxis
+            style={{
+                axis: { stroke: 'transparent' },
+                ticks: { size: 0 },
+                tickLabels: { fill: 'transparent' },
+            }}
+        />
+        <VictoryAxis
+            dependentAxis
+            style={{
+                axis: { stroke: 'transparent' },
+                ticks: { size: 0 },
+                tickLabels: { fill: 'transparent' },
+            }}
+        />
+    </>
+)
+
+/**
+ * Minimal sparkline used inside `StatCard`.
+ *
+ * The series colour defaults to the brand primary — the same default web's
+ * `StatCard` uses when no custom `series.color` is passed.
+ * Victory needs a concrete numeric width to lay out points; we measure the
+ * wrapping View with `onLayout` instead of asking the consumer for one.
+ */
+const SparklineImpl = ({
+    data,
+    type = 'area',
+    height = DEFAULT_HEIGHT,
+    color,
+    width,
+    strokeWidth = DEFAULT_STROKE,
+    style,
+    testID,
+}: SparklineNativeProps) => {
+    const stroke = color ?? String(FOUNDATION_THEME.colors.primary[500])
+    // `width` is an explicit override; the measured state only fills in when
+    // the consumer lets us auto-size. Initializing it from `width` would
+    // freeze a stale value if the prop later becomes `undefined`.
+    const [measuredWidth, setMeasuredWidth] = useState<number | undefined>(
+        undefined
+    )
+    const resolvedWidth = typeof width === 'number' ? width : measuredWidth
+    const onLayout = (event: LayoutChangeEvent) => {
+        const w = event.nativeEvent.layout.width
+        if (w > 0 && w !== measuredWidth) setMeasuredWidth(w)
+    }
+
+    if (data.length === 0) {
+        return (
+            <View
+                onLayout={onLayout}
+                testID={testID}
+                style={[{ height }, style]}
+            />
+        )
+    }
+
+    if (!resolvedWidth) {
+        return (
+            <View
+                onLayout={onLayout}
+                testID={testID}
+                style={[{ height, width: '100%' }, style]}
+            />
+        )
+    }
+
+    const victoryData = data.map((d, i) => ({ x: i, y: d.value }))
+
+    const chartContent =
+        type === 'bar' ? (
+            <VictoryChart
+                width={resolvedWidth}
+                height={height}
+                padding={0}
+                domainPadding={{ x: 2 }}
+            >
+                {NO_AXIS}
+                <VictoryBar
+                    data={victoryData}
+                    style={{
+                        data: { fill: stroke },
+                    }}
+                    barRatio={0.6}
+                    cornerRadius={2}
+                />
+            </VictoryChart>
+        ) : (
+            <VictoryChart width={resolvedWidth} height={height} padding={0}>
+                {NO_AXIS}
+                {/* VictoryChart cannot traverse plain Fragments for domain
+                    computation — array children with explicit keys are the
+                    equivalent but traverse correctly. VictoryArea's `stroke`
+                    styles the closed path (including baseline), so it stays
+                    stroke-less and the top edge is redrawn with VictoryLine. */}
+                {type === 'area'
+                    ? [
+                          <VictoryArea
+                              key="area-fill"
+                              data={victoryData}
+                              interpolation="monotoneX"
+                              style={{
+                                  data: {
+                                      fill: stroke,
+                                      fillOpacity: 0.15,
+                                      // VictoryArea strokes the entire
+                                      // closed path (including baseline) by
+                                      // default — suppress it so only the
+                                      // fill shows; the top edge is redrawn
+                                      // by VictoryLine below.
+                                      stroke: 'transparent',
+                                  },
+                              }}
+                          />,
+                          <VictoryLine
+                              key="area-edge"
+                              data={victoryData}
+                              interpolation="monotoneX"
+                              style={{
+                                  data: { stroke, strokeWidth },
+                              }}
+                          />,
+                      ]
+                    : null}
+                {type === 'line' && (
+                    <VictoryLine
+                        data={victoryData}
+                        interpolation="monotoneX"
+                        style={{
+                            data: {
+                                stroke,
+                                strokeWidth,
+                            },
+                        }}
+                    />
+                )}
+            </VictoryChart>
+        )
+
+    return (
+        <View
+            onLayout={onLayout}
+            testID={testID}
+            style={[{ height, width: '100%', overflow: 'hidden' }, style]}
+        >
+            {chartContent}
+        </View>
+    )
+}
+
+export const Sparkline = memo(SparklineImpl)
+Sparkline.displayName = 'Sparkline'
+export default Sparkline

package/src/components/Sparkline/index.ts

@@ -0,0 +1,6 @@
+export { default as Sparkline } from './Sparkline'
+export type {
+    SparklineDatum,
+    SparklineNativeProps,
+    SparklineType,
+} from './sparkline.types'

package/src/components/Sparkline/sparkline.types.ts

@@ -0,0 +1,29 @@
+import type { StyleProp, ViewStyle } from 'react-native'
+
+/** One datum in the sparkline series. */
+export type SparklineDatum = {
+    /** Y-axis value. */
+    value: number
+}
+
+export type SparklineType = 'line' | 'area' | 'bar'
+
+/**
+ * Minimal chart surface embedded inside `StatCard` (and usable standalone later).
+ * Wraps `victory-native` with Blend token styling and sane RN defaults.
+ */
+export type SparklineNativeProps = {
+    data: SparklineDatum[]
+    /** Shape of the series. Defaults to `area`, web parity with sparklines. */
+    type?: SparklineType
+    /** Total height of the canvas. */
+    height?: number
+    /** Stroke colour for line/area, bar colour for bar. Defaults to the active theme. */
+    color?: string
+    /** Width of the canvas; defaults to full container width. */
+    width?: number | string
+    /** Stroke thickness for line/area. */
+    strokeWidth?: number
+    style?: StyleProp<ViewStyle>
+    testID?: string
+}

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,132 @@
+import { memo, useEffect } from 'react'
+import { StyleSheet, View } from 'react-native'
+import Animated, {
+    Easing,
+    cancelAnimation,
+    useAnimatedStyle,
+    useSharedValue,
+    withRepeat,
+    withTiming,
+} from 'react-native-reanimated'
+import Svg, { Circle } from 'react-native-svg'
+import type { SpinnerTokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { useReduceMotion } from '../../motion/useReduceMotion'
+import type { SpinnerNativeProps } from './spinner.types'
+import {
+    SPINNER_CENTER,
+    SPINNER_VIEWBOX,
+    getSpinDuration,
+    getSpinnerGeometry,
+} from './spinner.utils'
+
+/**
+ * Loading spinner — the native port of web's `Spinner`.
+ *
+ * Same arc: a track circle at 30% opacity under a quarter-circumference
+ * arc, drawn in web's 48-unit viewBox and scaled to the size token. Web
+ * spins the arc with SVG SMIL; native rotates it with a Reanimated linear
+ * loop at the token duration. Reduce-motion renders the static arc, web
+ * parity.
+ */
+const SpinnerImpl = ({
+    size = 'md',
+    color = 'default',
+    label = 'Loading',
+    overlay = false,
+    testID,
+    style,
+}: SpinnerNativeProps) => {
+    const tokens = useNativeTokens<SpinnerTokensType>('SPINNER')
+    const reduceMotion = useReduceMotion()
+    const rotation = useSharedValue(0)
+
+    const geometry = getSpinnerGeometry(size, tokens)
+    const duration = getSpinDuration(tokens)
+
+    useEffect(() => {
+        if (reduceMotion) {
+            cancelAnimation(rotation)
+            rotation.value = 0
+            return
+        }
+        rotation.value = 0
+        rotation.value = withRepeat(
+            withTiming(360, { duration, easing: Easing.linear }),
+            -1
+        )
+        return () => cancelAnimation(rotation)
+    }, [rotation, reduceMotion, duration])
+
+    const spinStyle = useAnimatedStyle(
+        () => ({ transform: [{ rotate: `${rotation.value}deg` }] }),
+        []
+    )
+
+    const indicator = (
+        <View
+            accessibilityRole="progressbar"
+            accessibilityLabel={label}
+            testID={testID}
+            style={overlay ? undefined : style}
+        >
+            <Animated.View style={spinStyle}>
+                <Svg
+                    width={geometry.size}
+                    height={geometry.size}
+                    viewBox={`0 0 ${SPINNER_VIEWBOX} ${SPINNER_VIEWBOX}`}
+                >
+                    <Circle
+                        cx={SPINNER_CENTER}
+                        cy={SPINNER_CENTER}
+                        r={geometry.radius}
+                        stroke={String(tokens.trackColor)}
+                        strokeWidth={geometry.strokeWidth}
+                        strokeOpacity={0.3}
+                        fill="none"
+                    />
+                    <Circle
+                        cx={SPINNER_CENTER}
+                        cy={SPINNER_CENTER}
+                        r={geometry.radius}
+                        stroke={String(tokens.colors[color])}
+                        strokeWidth={geometry.strokeWidth}
+                        strokeLinecap="round"
+                        strokeDasharray={geometry.dashArray}
+                        fill="none"
+                        // Start the arc at 12 o'clock, web parity.
+                        transform={`rotate(-90 ${SPINNER_CENTER} ${SPINNER_CENTER})`}
+                    />
+                </Svg>
+            </Animated.View>
+        </View>
+    )
+
+    if (!overlay) return indicator
+
+    return (
+        <View
+            style={[
+                StyleSheet.absoluteFill,
+                styles.overlay,
+                { backgroundColor: String(tokens.overlay.backgroundColor) },
+                style,
+            ]}
+            testID={testID ? `${testID}-overlay` : undefined}
+        >
+            {indicator}
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    overlay: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+})
+
+export const Spinner = memo(SpinnerImpl)
+Spinner.displayName = 'Spinner'
+
+export default Spinner

package/src/components/Spinner/index.ts

@@ -0,0 +1,9 @@
+export { default as Spinner } from './Spinner'
+export type { SpinnerNativeProps } from './spinner.types'
+export {
+    getSpinnerGeometry,
+    getSpinDuration,
+    SPINNER_VIEWBOX,
+    SPINNER_CENTER,
+} from './spinner.utils'
+export type { SpinnerGeometry } from './spinner.utils'

package/src/components/Spinner/spinner.types.ts

@@ -0,0 +1,30 @@
+import type { StyleProp, ViewStyle } from 'react-native'
+import type {
+    SpinnerColor,
+    SpinnerSize,
+} from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native `Spinner` — the port of web's `Spinner`.
+ *
+ * Web animates an SVG arc with SMIL (`<animateTransform>`), which RN lacks;
+ * native rotates the same arc geometry with Reanimated. Under reduce-motion
+ * both render the static arc (web omits the animation element).
+ *
+ * Web's `Omit<BlockProps>` surface passthrough is replaced by the explicit
+ * props below — the spinner is a leaf indicator, not a layout surface.
+ */
+export type SpinnerNativeProps = {
+    size?: SpinnerSize
+    color?: SpinnerColor
+    /** Announced to screen readers. Web renders it visually hidden. */
+    label?: string
+    /**
+     * Absolute-fill scrim behind a centred spinner (blocking overlays).
+     * The token `overlay.zIndex` is ignored on RN — layer order is tree
+     * order.
+     */
+    overlay?: boolean
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}

package/src/components/Spinner/spinner.utils.ts

@@ -0,0 +1,51 @@
+import type {
+    SpinnerSize,
+    SpinnerTokensType,
+} from '@juspay/blend-design-system/node'
+import { parseDimension, parseDuration } from '../../adapters/cssStringAdapter'
+
+/** Web's fixed SVG coordinate space (`Spinner.tsx` viewBox 0 0 48 48). */
+export const SPINNER_VIEWBOX = 48
+export const SPINNER_CENTER = SPINNER_VIEWBOX / 2
+
+/** Fallback when the duration token fails to parse. Web token is '0.8s'. */
+export const DEFAULT_SPIN_DURATION = 800
+
+export type SpinnerGeometry = {
+    /** Rendered square size in points. */
+    size: number
+    /** Stroke width in viewBox units. */
+    strokeWidth: number
+    /** Arc radius in viewBox units. */
+    radius: number
+    /** `strokeDasharray` — a quarter arc, web parity. */
+    dashArray: [number, number]
+}
+
+/**
+ * The arc geometry web computes inline (`Spinner.tsx:24-26,73-76`):
+ * radius inset by half the stroke, quarter-circumference dash.
+ */
+export function getSpinnerGeometry(
+    size: SpinnerSize,
+    tokens: SpinnerTokensType
+): SpinnerGeometry {
+    const rendered = parseDimension(tokens.size[size] as string | number) ?? 24
+    const strokeWidth = tokens.strokeWidth[size]
+    const radius = SPINNER_CENTER - strokeWidth / 2
+    const circumference = 2 * Math.PI * radius
+    return {
+        size: rendered,
+        strokeWidth,
+        radius,
+        dashArray: [circumference * 0.25, circumference],
+    }
+}
+
+/** Rotation-loop duration from the `animation.duration` token ('0.8s'). */
+export function getSpinDuration(tokens: SpinnerTokensType): number {
+    return (
+        parseDuration(tokens.animation.duration as string | number) ??
+        DEFAULT_SPIN_DURATION
+    )
+}