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

package/src/components/Menu/menu.utils.ts

@@ -0,0 +1,211 @@
+import {
+    MenuV2ItemVariant,
+    MenuV2ItemActionType,
+    type MenuV2ItemType,
+    type MenuV2GroupType,
+    type MenuV2TokensType,
+} from '@juspay/blend-design-system/node'
+import type {
+    DropdownItemAdapter,
+    DropdownContentTokens,
+    DropdownItemTokens,
+    DropdownItemState,
+} from '../shared/dropdown/dropdown.types'
+import type { FilterableItem } from '../shared/dropdown/dropdownFilter'
+
+/**
+ * Adapt a `MenuV2ItemType` to the common `DropdownItemAdapter` shape.
+ *
+ * Menu's item label is `{ text, leftSlot }` — the adapter unwraps it into
+ * `primaryText` + `leadingSlot`. `variant` and `actionType` are collapsed
+ * into a simpler `'default' | 'primary' | 'danger'` union for the row
+ * renderer.
+ */
+export function menuItemAdapter(
+    item: MenuV2ItemType,
+    index: number
+): DropdownItemAdapter<MenuV2ItemType> {
+    const variant: 'default' | 'primary' | 'danger' =
+        item.variant === MenuV2ItemVariant.ACTION
+            ? item.actionType === MenuV2ItemActionType.DANGER
+                ? 'danger'
+                : 'primary'
+            : 'default'
+
+    return {
+        id: item.id ?? `menu-item-${index}`,
+        primaryText: item.label.text,
+        secondaryText: item.subLabel,
+        leadingSlot: item.label.leftSlot,
+        disabled: item.disabled,
+        isSelected: item.selected,
+        hasSubMenu: Boolean(item.subMenu && item.subMenu.length > 0),
+        variant,
+        item,
+    }
+}
+
+/**
+ * Build a `FilterableItem` view of a menu item for `filterGroups`.
+ * The filter works on `primaryText` / `secondaryText` and recurses into
+ * `subItems` (which maps to `item.subMenu`).
+ */
+export function toFilterableItem(
+    item: MenuV2ItemType
+): FilterableItem<MenuV2ItemType> {
+    return {
+        primaryText: item.label.text,
+        secondaryText: item.subLabel,
+        subItems: item.subMenu?.map(toFilterableItem),
+    }
+}
+
+/** Searchable text extractor — the primary label text. */
+export function getMenuSearchableText(item: MenuV2ItemType): string {
+    return item.label.text
+}
+
+/**
+ * Map MenuV2 tokens to the `DropdownContentTokens` shape the shared
+ * `DropdownContent` expects.
+ */
+export function getMenuContentTokens(
+    tokens: MenuV2TokensType
+): DropdownContentTokens {
+    return {
+        backgroundColor: String(tokens.backgroundColor),
+        border: String(tokens.border),
+        borderRadius: tokens.borderRadius,
+        boxShadow: String(tokens.boxShadow),
+        paddingTop: tokens.paddingTop,
+        paddingRight: tokens.paddingRight,
+        paddingBottom: tokens.paddingBottom,
+        paddingLeft: tokens.paddingLeft,
+        minWidth: tokens.minWidth,
+        maxWidth: tokens.maxWidth,
+    }
+}
+
+/**
+ * Resolve the background color for an item given its variant, actionType,
+ * and state. The MenuV2 token tree nests:
+ * `backgroundColor[variant][actionType?][state]`.
+ */
+function resolveBackgroundColor(
+    tokens: MenuV2TokensType,
+    variant: MenuV2ItemVariant,
+    actionType: MenuV2ItemActionType,
+    state: DropdownItemState
+): string {
+    const bg = tokens.group.item.backgroundColor
+    if (variant === MenuV2ItemVariant.DEFAULT) {
+        return String(bg[variant][state])
+    }
+    return String(bg[variant][actionType][state])
+}
+
+function resolveTextColor(
+    tokens: MenuV2TokensType,
+    variant: MenuV2ItemVariant,
+    actionType: MenuV2ItemActionType,
+    state: DropdownItemState
+): string {
+    const color = tokens.group.item.text.color
+    if (variant === MenuV2ItemVariant.DEFAULT) {
+        return String(color[variant][state])
+    }
+    return String(color[variant][actionType][state])
+}
+
+function resolveSubTextColor(
+    tokens: MenuV2TokensType,
+    variant: MenuV2ItemVariant,
+    actionType: MenuV2ItemActionType,
+    state: DropdownItemState
+): string {
+    const color = tokens.group.item.text.subText.color
+    if (variant === MenuV2ItemVariant.DEFAULT) {
+        return String(color[variant][state])
+    }
+    return String(color[variant][actionType][state])
+}
+
+/**
+ * Map MenuV2 item tokens to the `DropdownItemTokens` shape. For the default
+ * variant; action variants resolve through the same state keys.
+ */
+export function getMenuItemTokens(
+    tokens: MenuV2TokensType,
+    variant: MenuV2ItemVariant = MenuV2ItemVariant.DEFAULT,
+    actionType: MenuV2ItemActionType = MenuV2ItemActionType.PRIMARY
+): DropdownItemTokens {
+    const itemTokens = tokens.group.item
+    const states: DropdownItemState[] = [
+        'default',
+        'hover',
+        'active',
+        'focus',
+        'focusVisible',
+        'disabled',
+        'selected',
+    ]
+    const bgRecord = {} as Record<DropdownItemState, string>
+    const colorRecord = {} as Record<DropdownItemState, string>
+    const subColorRecord = {} as Record<DropdownItemState, string>
+    for (const s of states) {
+        bgRecord[s] = resolveBackgroundColor(tokens, variant, actionType, s)
+        colorRecord[s] = resolveTextColor(tokens, variant, actionType, s)
+        subColorRecord[s] = resolveSubTextColor(tokens, variant, actionType, s)
+    }
+
+    return {
+        paddingTop: itemTokens.paddingTop,
+        paddingRight: itemTokens.paddingRight,
+        paddingBottom: itemTokens.paddingBottom,
+        paddingLeft: itemTokens.paddingLeft,
+        margin: itemTokens.marginTop,
+        gap: itemTokens.gap,
+        borderRadius: itemTokens.borderRadius,
+        backgroundColor: bgRecord,
+        text: {
+            fontSize: itemTokens.text.fontSize,
+            fontWeight: itemTokens.text.fontWeight,
+            lineHeight: itemTokens.text.lineHeight,
+            color: colorRecord,
+            subText: {
+                fontSize: itemTokens.text.subText.fontSize,
+                fontWeight: itemTokens.text.subText.fontWeight,
+                lineHeight: itemTokens.text.subText.lineHeight,
+                color: subColorRecord,
+            },
+            leftSlot: itemTokens.text.leftSlot,
+            checkmark: itemTokens.text.checkmark
+                ? {
+                      position: itemTokens.text.checkmark.position,
+                      width: Number(itemTokens.text.checkmark.width) || 16,
+                      color: String(itemTokens.text.checkmark.color),
+                  }
+                : undefined,
+            rightChevron: {
+                color: String(itemTokens.text.rightChevron.color),
+                width: Number(itemTokens.text.rightChevron.width) || 16,
+            },
+        },
+    }
+}
+
+/**
+ * Flatten menu groups into adapter-backed groups for `DropdownList`.
+ */
+export function flattenMenuGroups(groups: MenuV2GroupType[]): Array<{
+    label?: string
+    items: DropdownItemAdapter<MenuV2ItemType>[]
+    showSeparator?: boolean
+}> {
+    let globalIndex = 0
+    return groups.map((group) => ({
+        label: group.label,
+        items: group.items.map((item) => menuItemAdapter(item, globalIndex++)),
+        showSeparator: group.showSeparator,
+    }))
+}

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,292 @@
+import { useCallback, useEffect, useState } from 'react'
+import {
+    BackHandler,
+    Pressable,
+    ScrollView,
+    StyleSheet,
+    View,
+} from 'react-native'
+import Animated, {
+    Easing,
+    runOnJS,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated'
+import type { ModalV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { useNativeBreakpoint } from '../../theme/useNativeBreakpoint'
+import { Portal } from '../../overlay/portal'
+import { BottomSheet } from '../../overlay/sheet/BottomSheet'
+import { BottomSheetScrollable } from '../../overlay/sheet/SheetScrollable'
+import {
+    MOTION_EASING,
+    MOTION_PRESETS,
+    reducedMotionVariant,
+    type MotionEasing,
+} from '../../motion/motion'
+import { useReduceMotion } from '../../motion/useReduceMotion'
+import { parseDimension } from '../../adapters/cssStringAdapter'
+import { ModalHeader } from './ModalHeader'
+import { ModalFooter } from './ModalFooter'
+import type { ModalNativeProps } from './modal.types'
+
+/**
+ * Modal — the native port of web's `ModalV2`.
+ *
+ * Phones (`sm`) present a bottom sheet — exactly what web does under
+ * 1024px with vaul, styled from the same MODALV2 tokens — and tablets
+ * (`lg`) a centered dialog card with a dimmed backdrop, `scaleFade`
+ * entrance, hardware-back/VoiceOver-escape dismissal and the exit
+ * keep-mounted pattern.
+ */
+
+// Indexing MOTION_EASING with a dynamic key yields a union of tuples,
+// which cannot be spread into Easing.bezier directly.
+function bezierFor(name: MotionEasing) {
+    const [x1, y1, x2, y2] = MOTION_EASING[name]
+    return Easing.bezier(x1, y1, x2, y2)
+}
+
+export function Modal({
+    isOpen,
+    onClose,
+    title,
+    subtitle,
+    children,
+    primaryAction,
+    secondaryAction,
+    showCloseButton = true,
+    showHeader = true,
+    showFooter = true,
+    closeOnBackdropClick = true,
+    showDivider = true,
+    customHeader,
+    customFooter,
+    headerSlot,
+    dimensions,
+    maxHeightFraction,
+    testID,
+    style,
+}: ModalNativeProps) {
+    const tokens = useNativeTokens<ModalV2TokensType>('MODALV2')
+    const breakpoint = useNativeBreakpoint()
+    const reduceMotion = useReduceMotion()
+    const preset = reduceMotion
+        ? reducedMotionVariant(MOTION_PRESETS.scaleFade)
+        : MOTION_PRESETS.scaleFade
+
+    // Keep-mounted through the exit animation (the BottomSheet pattern).
+    const [mounted, setMounted] = useState(isOpen)
+    const progress = useSharedValue(0)
+    const unmount = useCallback(() => setMounted(false), [])
+
+    useEffect(() => {
+        if (isOpen) {
+            setMounted(true)
+            progress.value = withTiming(1, {
+                duration: preset.duration,
+                easing: bezierFor(preset.easing),
+            })
+        } else {
+            progress.value = withTiming(
+                0,
+                {
+                    duration: preset.exitDuration,
+                    easing: bezierFor(preset.exitEasing),
+                },
+                (finished) => {
+                    if (finished) runOnJS(unmount)()
+                }
+            )
+        }
+    }, [isOpen, progress, preset, unmount])
+
+    // Android hardware back closes the dialog instead of the screen.
+    useEffect(() => {
+        if (!isOpen || breakpoint === 'sm') return
+        const subscription = BackHandler.addEventListener(
+            'hardwareBackPress',
+            () => {
+                onClose()
+                return true
+            }
+        )
+        return () => subscription.remove()
+    }, [isOpen, breakpoint, onClose])
+
+    const fromOpacity = preset.from.opacity ?? 1
+    const toOpacity = preset.to.opacity ?? 1
+    const fromScale = preset.from.scale ?? 1
+    const toScale = preset.to.scale ?? 1
+    const cardStyle = useAnimatedStyle(() => ({
+        opacity: fromOpacity + (toOpacity - fromOpacity) * progress.value,
+        transform: [
+            { scale: fromScale + (toScale - fromScale) * progress.value },
+        ],
+    }))
+    const backdropStyle = useAnimatedStyle(() => ({
+        opacity: progress.value,
+    }))
+
+    const header = customHeader ?? (
+        <ModalHeader
+            title={title}
+            subtitle={subtitle}
+            headerSlot={headerSlot}
+            showCloseButton={showCloseButton}
+            showDivider={showDivider}
+            onClose={onClose}
+            tokens={tokens}
+            testID={testID ? `${testID}-header` : undefined}
+        />
+    )
+    const footer = customFooter ?? (
+        <ModalFooter
+            primaryAction={primaryAction}
+            secondaryAction={secondaryAction}
+            showDivider={showDivider}
+            tokens={tokens}
+            testID={testID ? `${testID}-footer` : undefined}
+        />
+    )
+
+    const bodyPadding = {
+        paddingTop: parseDimension(tokens.body.paddingTop as string | number),
+        paddingBottom: parseDimension(
+            tokens.body.paddingBottom as string | number
+        ),
+        paddingLeft: parseDimension(tokens.body.paddingLeft as string | number),
+        paddingRight: parseDimension(
+            tokens.body.paddingRight as string | number
+        ),
+    }
+
+    if (breakpoint === 'sm') {
+        return (
+            <BottomSheet
+                open={isOpen}
+                onClose={onClose}
+                backgroundColor={String(tokens.backgroundColor ?? '#FFFFFF')}
+                backdropColor={String(
+                    tokens.overlay.backgroundColor ?? 'rgba(0, 0, 0, 0.5)'
+                )}
+                topRadius={
+                    parseDimension(tokens.borderRadius as string | number) ?? 16
+                }
+                dismissOnBackdropPress={closeOnBackdropClick}
+                maxHeightFraction={maxHeightFraction}
+                accessibilityLabel={title}
+                testID={testID}
+                style={style}
+            >
+                {showHeader ? header : null}
+                <BottomSheetScrollable>
+                    <ScrollView
+                        contentContainerStyle={[
+                            bodyPadding,
+                            {
+                                backgroundColor: String(
+                                    tokens.body.backgroundColor ?? 'transparent'
+                                ),
+                            },
+                        ]}
+                    >
+                        {children}
+                    </ScrollView>
+                </BottomSheetScrollable>
+                {showFooter ? footer : null}
+            </BottomSheet>
+        )
+    }
+
+    if (!mounted) return null
+
+    const overlayOffset =
+        parseDimension(tokens.overlay.offset as string | number) ?? 16
+
+    return (
+        <Portal modal>
+            <Animated.View
+                style={[
+                    StyleSheet.absoluteFill,
+                    {
+                        backgroundColor: String(
+                            tokens.overlay.backgroundColor ??
+                                'rgba(0, 0, 0, 0.5)'
+                        ),
+                    },
+                    backdropStyle,
+                ]}
+                accessible={false}
+                importantForAccessibility="no-hide-descendants"
+                testID={testID ? `${testID}-backdrop` : undefined}
+            >
+                <Pressable
+                    style={StyleSheet.absoluteFill}
+                    onPress={closeOnBackdropClick ? onClose : undefined}
+                />
+            </Animated.View>
+            <View
+                style={[styles.center, { padding: overlayOffset }]}
+                pointerEvents="box-none"
+            >
+                <Animated.View
+                    accessibilityViewIsModal
+                    onAccessibilityEscape={onClose}
+                    accessibilityLabel={title}
+                    testID={testID}
+                    style={[
+                        {
+                            backgroundColor: String(
+                                tokens.backgroundColor ?? '#FFFFFF'
+                            ),
+                            borderRadius:
+                                parseDimension(
+                                    tokens.borderRadius as string | number
+                                ) ?? 16,
+                            overflow: 'hidden',
+                            minWidth: 320,
+                            maxWidth: '90%',
+                            maxHeight: '90%',
+                            ...dimensions,
+                        },
+                        cardStyle,
+                        style,
+                    ]}
+                >
+                    {showHeader ? header : null}
+                    <ScrollView
+                        contentContainerStyle={[
+                            bodyPadding,
+                            {
+                                backgroundColor: String(
+                                    tokens.body.backgroundColor ?? 'transparent'
+                                ),
+                            },
+                        ]}
+                    >
+                        {children}
+                    </ScrollView>
+                    {showFooter ? footer : null}
+                </Animated.View>
+            </View>
+        </Portal>
+    )
+}
+
+Modal.displayName = 'Modal'
+
+const styles = StyleSheet.create({
+    center: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+})
+
+export default Modal

package/src/components/Modal/ModalFooter.tsx

@@ -0,0 +1,90 @@
+import { View } from 'react-native'
+import { ButtonV2Size, ButtonV2Type } from '@juspay/blend-design-system/node'
+import type { ModalV2TokensType } from '@juspay/blend-design-system/node'
+import { parseBorder, parseDimension } from '../../adapters/cssStringAdapter'
+import { Button } from '../Button'
+import type { ModalAction } from './modal.types'
+
+/** Secondary/primary action row; the top divider follows `showDivider`. */
+export function ModalFooter({
+    primaryAction,
+    secondaryAction,
+    showDivider,
+    tokens,
+    testID,
+}: {
+    primaryAction?: ModalAction
+    secondaryAction?: ModalAction
+    showDivider: boolean
+    tokens: ModalV2TokensType
+    testID?: string
+}) {
+    if (!primaryAction && !secondaryAction) return null
+    const footer = tokens.footer
+
+    return (
+        <View
+            style={{
+                flexDirection: 'row',
+                justifyContent: 'flex-end',
+                gap: parseDimension(footer.gap as string | number) ?? 12,
+                paddingTop: parseDimension(
+                    footer.paddingTop as string | number
+                ),
+                paddingBottom: parseDimension(
+                    footer.paddingBottom as string | number
+                ),
+                paddingLeft: parseDimension(
+                    footer.paddingLeft as string | number
+                ),
+                paddingRight: parseDimension(
+                    footer.paddingRight as string | number
+                ),
+                backgroundColor: String(
+                    footer.backgroundColor ?? 'transparent'
+                ),
+                ...(showDivider
+                    ? {
+                          ...parseBorder(String(footer.borderTop ?? 'none')),
+                          borderTopWidth: 1,
+                          borderBottomWidth: 0,
+                          borderLeftWidth: 0,
+                          borderRightWidth: 0,
+                      }
+                    : null),
+            }}
+            testID={testID}
+        >
+            {secondaryAction ? (
+                <Button
+                    text={secondaryAction.text}
+                    buttonType={
+                        secondaryAction.buttonType ?? ButtonV2Type.SECONDARY
+                    }
+                    size={ButtonV2Size.SMALL}
+                    onPress={secondaryAction.onPress}
+                    disabled={secondaryAction.disabled}
+                    loading={secondaryAction.loading}
+                    accessibilityLabel={secondaryAction.accessibilityLabel}
+                    testID={testID ? `${testID}-secondary` : undefined}
+                />
+            ) : null}
+            {primaryAction ? (
+                <Button
+                    text={primaryAction.text}
+                    buttonType={
+                        primaryAction.buttonType ?? ButtonV2Type.PRIMARY
+                    }
+                    size={ButtonV2Size.SMALL}
+                    onPress={primaryAction.onPress}
+                    disabled={primaryAction.disabled}
+                    loading={primaryAction.loading}
+                    accessibilityLabel={primaryAction.accessibilityLabel}
+                    testID={testID ? `${testID}-primary` : undefined}
+                />
+            ) : null}
+        </View>
+    )
+}
+
+export default ModalFooter