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

package/src/components/Upload/Upload.tsx

@@ -0,0 +1,135 @@
+import { forwardRef } from 'react'
+import type { View as RNView } from 'react-native'
+import {
+    InputSizeV2,
+    InputStateV2,
+    UploadState,
+    type UploadV2TokensType,
+} from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { Block } from '../../primitives/Block'
+import { FieldLabels } from '../shared/field/FieldLabels'
+import { FieldFooter } from '../shared/field/FieldFooter'
+import { UploadContainer } from './UploadContainer'
+import { getUploadDisplayState } from './upload.utils'
+import type { UploadNativeProps } from './upload.types'
+
+/**
+ * Upload — React Native implementation of web's `UploadV2`.
+ *
+ * A controlled file field: `files` + `onChange`, the caller owns state. The
+ * app also owns picking — `onBrowse` fires when the drop zone or Browse /
+ * Replace button is pressed, and the app produces `UploadFileNativeItem`s
+ * (running the exported `validateUploadFiles` to mark them) before calling
+ * `onChange`.
+ *
+ * State derivation is Upload-specific, not the shared `getFieldState`:
+ * invalid files force ERROR even when `state` is IDLE, matching web's
+ * `displayUploadState`.
+ */
+const Upload = forwardRef<RNView, UploadNativeProps>(function Upload(
+    {
+        label,
+        subLabel,
+        description = '',
+        size = InputSizeV2.SM,
+        required = false,
+        multiple = true,
+        disabled = false,
+        slot,
+        files = [],
+        onChange,
+        onBrowse,
+        state = UploadState.IDLE,
+        error = { show: false, message: '' },
+        maxSize = 0,
+        maxFiles,
+        errorText = '',
+        hintText,
+        progressBarValue = 0,
+        uploadHeaderText = 'Tap to upload files',
+        testID,
+        style,
+    },
+    ref
+) {
+    const tokens = useNativeTokens<UploadV2TokensType>('UPLOADV2')
+
+    const isDisabled = disabled || state === UploadState.DISABLED
+    const hasInvalidFiles = files.some((file) => !file.isValid)
+    const displayState = getUploadDisplayState(state, disabled, hasInvalidFiles)
+
+    // Labels/footer map the display state onto the InputStateV2 matrix the
+    // shared field chrome consumes — exactly how TextInput does it.
+    // `fieldState` below feeds the footer; the label uses `labelState`.
+
+    // Web's `showLabelError`: single-file uploads surface the error on the
+    // label as well; multi-file keeps the label neutral.
+    const showLabelError = Boolean(
+        error?.show || (!multiple && displayState === UploadState.ERROR)
+    )
+    const labelState = showLabelError
+        ? InputStateV2.ERROR
+        : displayState === UploadState.DISABLED
+          ? InputStateV2.DISABLED
+          : InputStateV2.DEFAULT
+
+    const handleFileRemove = (fileId: string) => {
+        const updatedFiles = files.filter(
+            (file, index) =>
+                (file.id ?? `${file.name}-${file.size}-${index}`) !== fileId
+        )
+        onChange?.(updatedFiles)
+    }
+
+    return (
+        <Block
+            ref={ref}
+            flexDirection="column"
+            gap={tokens.gap as string | number}
+            width="100%"
+            style={style}
+            testID={testID}
+        >
+            <FieldLabels
+                label={label}
+                sublabel={subLabel}
+                required={required}
+                size={size}
+                state={labelState}
+                tokens={tokens.topContainer}
+                testID={testID ? `${testID}-labels` : undefined}
+            />
+
+            <UploadContainer
+                tokens={tokens}
+                files={files}
+                onFileRemove={handleFileRemove}
+                onBrowse={onBrowse}
+                multiple={multiple}
+                state={displayState}
+                disabled={isDisabled}
+                description={description}
+                slot={slot}
+                errorText={error?.message ? '' : errorText}
+                progressBarValue={progressBarValue}
+                uploadHeaderText={uploadHeaderText}
+                maxSize={maxSize}
+                maxFiles={maxFiles ?? (multiple ? undefined : 1)}
+                testID={testID ? `${testID}-container` : undefined}
+            />
+
+            <FieldFooter
+                error={error}
+                hintText={hintText}
+                size={size}
+                tokens={tokens.bottomContainer}
+                testID={testID ? `${testID}-footer` : undefined}
+            />
+        </Block>
+    )
+})
+
+Upload.displayName = 'Upload'
+
+export default Upload

package/src/components/Upload/UploadContainer.tsx

@@ -0,0 +1,445 @@
+import { useMemo, useState } from 'react'
+import { Pressable, View } from 'react-native'
+import { ChevronDown, ChevronUp, Repeat2, X } from 'lucide-react-native'
+import {
+    ButtonV2Size,
+    ButtonV2Type,
+    TagV2Color,
+    TagV2Size,
+    TagV2SubType,
+    TagV2Type,
+    UploadState,
+    type UploadV2TokensType,
+} from '@juspay/blend-design-system/node'
+import { Block } from '../../primitives/Block'
+import { Text } from '../../primitives/Text'
+import { Button } from '../Button'
+import { Tag } from '../Tag'
+import { Tooltip } from '../Tooltip'
+import { Popover } from '../Popover'
+import { ProgressBar } from '../ProgressBar'
+import type { UploadFileNativeItem } from './upload.types'
+import {
+    getAggregatedErrorMessage,
+    getFileId,
+    getValidationMessage,
+    truncateFileNameForTag,
+} from './upload.utils'
+
+/** Web's `progressBarMaxWidth` default; there is no native prop for it. */
+const PROGRESS_MAX_WIDTH = 300
+
+/**
+ * The presentational drop zone — a port of web's `UploadContainerV2`.
+ *
+ * Everything visual resolves from the `uploadContainer` token group passed
+ * down by `Upload`; this component owns no tokens and no state derivation,
+ * only the overflow popover's open flag.
+ *
+ * Divergences from web, all documented in the plan:
+ *
+ * - The drop zone is a `Pressable` firing `onBrowse` — no drag handlers, no
+ *   hidden file input.
+ * - File tags wrap the native `Tooltip` (long-press) instead of `TooltipV2`.
+ * - The `+N` overflow surface is the native `Popover` — a BottomSheet on
+ *   phones (`sm`), the established native Popover behaviour.
+ */
+export type UploadContainerProps = {
+    tokens: UploadV2TokensType
+    files: UploadFileNativeItem[]
+    onFileRemove: (fileId: string) => void
+    onBrowse?: () => void
+    multiple: boolean
+    state: UploadState
+    disabled: boolean
+    description: string
+    slot?: React.ReactNode
+    errorText?: string
+    progressBarValue?: number
+    uploadHeaderText: string
+    maxSize?: number
+    maxFiles?: number
+    testID?: string
+}
+
+export function UploadContainer({
+    tokens,
+    files,
+    onFileRemove,
+    onBrowse,
+    multiple,
+    state,
+    disabled,
+    description = '',
+    slot,
+    errorText,
+    progressBarValue = 0,
+    uploadHeaderText,
+    maxSize,
+    maxFiles,
+    testID,
+}: UploadContainerProps) {
+    const [isOverflowPopoverOpen] = useState(false)
+    const { uploadContainer } = tokens
+    const isUploading = state === UploadState.UPLOADING
+    const isSuccess = state === UploadState.SUCCESS
+    const isInteractionBlocked = isUploading || isSuccess
+
+    const showEmptyDescription = files.length === 0 && !isUploading
+    const showSingleFileInfo = files.length > 0 && !multiple && !isUploading
+    const showBrowseButton = files.length === 0 && !isUploading
+    const showReplaceButton = files.length > 0 && !multiple && !isUploading
+    const showMultiFileTags = files.length > 0 && multiple && !isUploading
+
+    const validFileCount = files.filter((file) => file.isValid).length
+    const invalidFileCount = files.length - validFileCount
+    const showFilledMultiFileCopy = showMultiFileTags
+    const headerText = showFilledMultiFileCopy
+        ? invalidFileCount > 0
+            ? 'Files uploaded'
+            : 'Files successfully added'
+        : uploadHeaderText
+    const filledMultiFileDescription =
+        invalidFileCount > 0
+            ? `${validFileCount} succeeded, ${invalidFileCount} failed`
+            : "We've successfully uploaded the following files"
+
+    // Invalid files first, exactly web's sort; the first four render as
+    // tags, the rest collapse behind the `+N` overflow trigger.
+    const sortedFiles = useMemo(
+        () =>
+            [...files].sort((a, b) => {
+                if (!a.isValid && b.isValid) return -1
+                if (a.isValid && !b.isValid) return 1
+                return 0
+            }),
+        [files]
+    )
+    const visibleFiles = sortedFiles.slice(0, 4)
+    const overflowFiles = sortedFiles.slice(4)
+
+    const handleBrowse = () => {
+        if (disabled || isInteractionBlocked) return
+        onBrowse?.()
+    }
+
+    const renderFileTag = (uploadFile: UploadFileNativeItem, index: number) => {
+        const fileId = getFileId(uploadFile, index)
+        const fileColor = isSuccess
+            ? TagV2Color.SUCCESS
+            : uploadFile.isValid
+              ? TagV2Color.NEUTRAL
+              : TagV2Color.ERROR
+        const tooltipContent = uploadFile.isValid
+            ? uploadFile.name
+            : `${uploadFile.name} - ${getValidationMessage(
+                  uploadFile.errorReason,
+                  maxSize,
+                  maxFiles
+              )}`
+
+        return (
+            <Tooltip
+                key={fileId}
+                content={tooltipContent}
+                testID={testID ? `${testID}-file-tooltip` : undefined}
+            >
+                <Tag
+                    accessibilityLabel={`Remove ${uploadFile.name}`}
+                    rightSlot={{ slot: <X size={14} /> }}
+                    text={truncateFileNameForTag(uploadFile.name)}
+                    size={TagV2Size.SM}
+                    type={TagV2Type.SUBTLE}
+                    subType={TagV2SubType.ROUNDED}
+                    color={fileColor}
+                    onPress={() => {
+                        if (disabled || isInteractionBlocked) return
+                        onFileRemove(fileId)
+                    }}
+                    testID={testID ? `${testID}-file-tag` : undefined}
+                />
+            </Tooltip>
+        )
+    }
+
+    const renderOverflowFileRow = (
+        uploadFile: UploadFileNativeItem,
+        index: number
+    ) => {
+        const fileId = getFileId(uploadFile, index)
+        return (
+            <Block
+                key={fileId}
+                flexDirection="row"
+                alignItems="center"
+                justifyContent="space-between"
+                gap={uploadContainer.gap as string | number}
+                width="100%"
+            >
+                <Text
+                    fontSize={uploadContainer.header.description.fontSize}
+                    fontWeight={uploadContainer.header.description.fontWeight}
+                    color={String(uploadContainer.header.title.color)}
+                    numberOfLines={1}
+                    style={{ flexShrink: 1 }}
+                >
+                    {uploadFile.name}
+                </Text>
+                <Block
+                    flexDirection="row"
+                    alignItems="center"
+                    gap={uploadContainer.gap as string | number}
+                    style={{ flexShrink: 0 }}
+                >
+                    {!uploadFile.isValid && (
+                        <Tag
+                            text="Failed"
+                            size={TagV2Size.SM}
+                            type={TagV2Type.SUBTLE}
+                            subType={TagV2SubType.ROUNDED}
+                            color={TagV2Color.ERROR}
+                        />
+                    )}
+                    <Pressable
+                        accessibilityLabel={`Remove ${uploadFile.name}`}
+                        onPress={() => {
+                            if (disabled || isInteractionBlocked) return
+                            onFileRemove(fileId)
+                        }}
+                        hitSlop={8}
+                        testID={
+                            testID ? `${testID}-overflow-remove` : undefined
+                        }
+                    >
+                        <X size={18} />
+                    </Pressable>
+                </Block>
+            </Block>
+        )
+    }
+
+    return (
+        <Pressable
+            onPress={handleBrowse}
+            disabled={disabled || isInteractionBlocked}
+            accessibilityRole="button"
+            accessibilityLabel={uploadHeaderText}
+            accessibilityState={{ disabled: disabled || isInteractionBlocked }}
+            testID={testID ? `${testID}-dropzone` : undefined}
+            style={{
+                borderWidth: 0,
+            }}
+        >
+            <Block
+                flexDirection="column"
+                alignItems="center"
+                gap={uploadContainer.gap as string | number}
+                paddingTop={uploadContainer.paddingTop as string | number}
+                paddingBottom={uploadContainer.paddingBottom as string | number}
+                paddingLeft={uploadContainer.paddingLeft as string | number}
+                paddingRight={uploadContainer.paddingRight as string | number}
+                borderRadius={uploadContainer.borderRadius as string | number}
+                border={String(uploadContainer.border[state])}
+                backgroundColor={String(uploadContainer.backgroundColor[state])}
+                width="100%"
+            >
+                {slot && !showFilledMultiFileCopy && <View>{slot}</View>}
+                <Block
+                    flexDirection="column"
+                    alignItems="center"
+                    gap={uploadContainer.header.gap as string | number}
+                >
+                    <Text
+                        fontSize={uploadContainer.header.title.fontSize}
+                        fontWeight={uploadContainer.header.title.fontWeight}
+                        color={String(uploadContainer.header.title.color)}
+                        textAlign="center"
+                    >
+                        {headerText}
+                    </Text>
+                    {(showEmptyDescription || showFilledMultiFileCopy) && (
+                        <Text
+                            fontSize={
+                                uploadContainer.header.description.fontSize
+                            }
+                            fontWeight={
+                                uploadContainer.header.description.fontWeight
+                            }
+                            color={String(
+                                uploadContainer.header.description.color
+                            )}
+                            textAlign="center"
+                        >
+                            {showFilledMultiFileCopy
+                                ? filledMultiFileDescription
+                                : description}
+                        </Text>
+                    )}
+                    {showSingleFileInfo && (
+                        <Text
+                            fontSize={
+                                uploadContainer.header.description.fontSize
+                            }
+                            fontWeight={
+                                uploadContainer.header.description.fontWeight
+                            }
+                            color={String(
+                                uploadContainer.header.description.color
+                            )}
+                            textAlign="center"
+                        >
+                            {'Selected file: ' + files[0].name}
+                        </Text>
+                    )}
+                    {isUploading && (
+                        <Block width="100%" maxWidth={PROGRESS_MAX_WIDTH}>
+                            <Text
+                                fontSize={
+                                    uploadContainer.header.description.fontSize
+                                }
+                                fontWeight={
+                                    uploadContainer.header.description
+                                        .fontWeight
+                                }
+                                color={String(
+                                    uploadContainer.header.title.color
+                                )}
+                                textAlign="center"
+                            >
+                                {'Please wait while uploading'}
+                            </Text>
+                        </Block>
+                    )}
+                </Block>
+                {isUploading && (
+                    <Block width="100%" maxWidth={PROGRESS_MAX_WIDTH}>
+                        <ProgressBar
+                            value={progressBarValue}
+                            showLabel={true}
+                        />
+                    </Block>
+                )}
+                {showBrowseButton && !isInteractionBlocked && (
+                    <Button
+                        buttonType={ButtonV2Type.SECONDARY}
+                        size={ButtonV2Size.MEDIUM}
+                        text="Browse Files"
+                        disabled={disabled}
+                        onPress={handleBrowse}
+                        testID={testID ? `${testID}-browse` : undefined}
+                    />
+                )}
+                {showReplaceButton && !isInteractionBlocked && (
+                    <Button
+                        buttonType={ButtonV2Type.SECONDARY}
+                        size={ButtonV2Size.MEDIUM}
+                        text="Replace File"
+                        disabled={disabled}
+                        onPress={handleBrowse}
+                        leftSlot={{ slot: <Repeat2 size={16} /> }}
+                        testID={testID ? `${testID}-replace` : undefined}
+                    />
+                )}
+
+                {showMultiFileTags && (
+                    <Block
+                        flexDirection="row"
+                        alignItems="center"
+                        justifyContent="center"
+                        gap="10px"
+                        width="100%"
+                        style={{ flexWrap: 'wrap' }}
+                    >
+                        {visibleFiles.map((uploadFile) =>
+                            renderFileTag(uploadFile, files.indexOf(uploadFile))
+                        )}
+                        {overflowFiles.length > 0 && (
+                            <Popover
+                                trigger={
+                                    <Tag
+                                        accessibilityLabel={`Show ${overflowFiles.length} more files`}
+                                        text={`+ ${overflowFiles.length}`}
+                                        size={TagV2Size.SM}
+                                        type={TagV2Type.SUBTLE}
+                                        subType={TagV2SubType.ROUNDED}
+                                        color={TagV2Color.NEUTRAL}
+                                        rightSlot={{
+                                            slot: isOverflowPopoverOpen ? (
+                                                <ChevronUp size={16} />
+                                            ) : (
+                                                <ChevronDown size={16} />
+                                            ),
+                                        }}
+                                        testID={
+                                            testID
+                                                ? `${testID}-overflow-trigger`
+                                                : undefined
+                                        }
+                                    />
+                                }
+                                minWidth={240}
+                                maxWidth={340}
+                                maxHeight={280}
+                                showCloseButton={false}
+                                testID={
+                                    testID ? `${testID}-overflow` : undefined
+                                }
+                            >
+                                <Block
+                                    flexDirection="column"
+                                    gap={uploadContainer.gap as string | number}
+                                    paddingTop={
+                                        uploadContainer.gap as string | number
+                                    }
+                                    paddingBottom={
+                                        uploadContainer.gap as string | number
+                                    }
+                                    paddingLeft={
+                                        uploadContainer.gap as string | number
+                                    }
+                                    paddingRight={
+                                        uploadContainer.gap as string | number
+                                    }
+                                    style={{ overflow: 'scroll' }}
+                                >
+                                    {overflowFiles.map((uploadFile) =>
+                                        renderOverflowFileRow(
+                                            uploadFile,
+                                            files.indexOf(uploadFile)
+                                        )
+                                    )}
+                                </Block>
+                            </Popover>
+                        )}
+                    </Block>
+                )}
+                {state === UploadState.ERROR && !errorText && !multiple && (
+                    <Text
+                        accessibilityLiveRegion="polite"
+                        fontSize={uploadContainer.header.errorText.fontSize}
+                        fontWeight={uploadContainer.header.errorText.fontWeight}
+                        color={String(uploadContainer.header.errorText.color)}
+                        textAlign="center"
+                    >
+                        {getAggregatedErrorMessage(files, maxSize, maxFiles)}
+                    </Text>
+                )}
+                {errorText && (
+                    <Text
+                        accessibilityLiveRegion="polite"
+                        fontSize={uploadContainer.header.errorText.fontSize}
+                        fontWeight={uploadContainer.header.errorText.fontWeight}
+                        color={String(uploadContainer.header.errorText.color)}
+                        textAlign="center"
+                    >
+                        {errorText}
+                    </Text>
+                )}
+            </Block>
+        </Pressable>
+    )
+}
+
+UploadContainer.displayName = 'UploadContainer'
+
+export default UploadContainer

package/src/components/Upload/index.ts

@@ -0,0 +1,3 @@
+export { default as Upload } from './Upload'
+export type { UploadNativeProps, UploadFileNativeItem } from './upload.types'
+export { validateUploadFiles } from './upload.utils'

package/src/components/Upload/upload.types.ts

@@ -0,0 +1,47 @@
+import type { StyleProp, ViewStyle } from 'react-native'
+import type {
+    UploadBaseProps,
+    UploadFileBase,
+} from '@juspay/blend-design-system/node'
+
+/**
+ * A file in the native Upload — web's `UploadFileBase` with the two fields a
+ * picker can supply that a DOM `File` cannot:
+ *
+ * - `uri` — opaque picker URI (content:// on Android, ph:// on iOS, file://
+ *   from some pickers). The component never reads it; the app keeps it for
+ *   its own upload call.
+ * - `type` — the mime type, used by `validateUploadFiles` for
+ *   `image/*`-style accept rules, mirroring web's `file.type`.
+ */
+export type UploadFileNativeItem = UploadFileBase & {
+    uri?: string
+    type?: string
+}
+
+/**
+ * Props for the native `Upload` — the port of web's `UploadV2`.
+ *
+ * Derives from web's platform-neutral `UploadBaseProps` with the file list
+ * re-typed to `UploadFileNativeItem`.
+ *
+ * Documented divergences (no drag-and-drop on RN):
+ *
+ * - No hidden `<input type="file">` and no drag handlers. The drop zone is a
+ *   Pressable and "Browse Files" / "Replace File" fire `onBrowse` — the app
+ *   owns file picking (the LinkButton "app owns navigation" precedent).
+ * - `helpIconText` is omitted, matching every other native field until the
+ *   cross-field FieldLabels+Tooltip follow-up lands.
+ * - Web's `progressBarMaxWidth` has no native prop; the bar is clamped by a
+ *   wrapping `Block` at 300.
+ * - The `UploadDragState` token keys exist in the web tokens but are never
+ *   indexed natively — there is no drag state to resolve.
+ */
+export type UploadNativeProps = Omit<UploadBaseProps, 'files' | 'onChange'> & {
+    files?: UploadFileNativeItem[]
+    onChange?: (files: UploadFileNativeItem[]) => void
+    /** App-owned file picking: fired when Browse Files / the drop zone is pressed. */
+    onBrowse?: () => void
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}