@idealyst/files 1.2.96

package/src/components/FilePickerButton.web.tsx

@@ -0,0 +1,84 @@
+import React, { forwardRef, useCallback, useState } from 'react';
+import { View, Text, Pressable, ActivityIndicator } from 'react-native';
+import type { FilePickerButtonProps, FilePickerResult, FilePickerError } from '../types';
+import { filePickerButtonStyles } from './FilePickerButton.styles';
+import { useFilePicker } from '../hooks';
+
+/**
+ * FilePickerButton - A styled button that opens the file picker.
+ */
+export const FilePickerButton = forwardRef<View, FilePickerButtonProps>((props, ref) => {
+  const {
+    children = 'Select File',
+    pickerConfig,
+    onPick,
+    onError,
+    disabled = false,
+    loading = false,
+    variant = 'solid',
+    size = 'md',
+    intent = 'primary',
+    leftIcon = 'file-upload',
+    style,
+    testID,
+  } = props;
+
+  const { pick, isPicking } = useFilePicker({ config: pickerConfig });
+  const [isHovered, setIsHovered] = useState(false);
+
+  const isDisabled = disabled || loading || isPicking;
+  const isLoading = loading || isPicking;
+
+  const handlePress = useCallback(async () => {
+    if (isDisabled) return;
+
+    try {
+      const result: FilePickerResult = await pick();
+      if (!result.cancelled) {
+        onPick?.(result);
+      }
+    } catch (err) {
+      onError?.(err as FilePickerError);
+    }
+  }, [isDisabled, pick, onPick, onError]);
+
+  // Apply variants
+  filePickerButtonStyles.useVariants({
+    size,
+    intent,
+    variant,
+    disabled: isDisabled,
+  });
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={handlePress}
+      disabled={isDisabled}
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+      style={[filePickerButtonStyles.button({ intent, variant }), style]}
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: isDisabled }}
+      accessibilityLabel={typeof children === 'string' ? children : 'Select file'}
+    >
+      {isLoading ? (
+        <ActivityIndicator
+          size="small"
+          color={filePickerButtonStyles.spinner({ intent, variant }).color as string}
+        />
+      ) : leftIcon ? (
+        <Text style={filePickerButtonStyles.icon({ intent, variant })}>
+          {/* Icon placeholder - in a real implementation, use MDI icon */}
+          📁
+        </Text>
+      ) : null}
+      <Text style={filePickerButtonStyles.text({ intent, variant })}>
+        {children}
+      </Text>
+    </Pressable>
+  );
+});
+
+FilePickerButton.displayName = 'FilePickerButton';

package/src/components/UploadProgress.native.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import type { UploadProgressProps, Intent } from '../types';
+import { uploadProgressStyles } from './UploadProgress.styles';
+import { formatBytes, formatDuration } from '../utils';
+
+/**
+ * UploadProgress - Shows upload progress with controls (Native).
+ */
+export const UploadProgress: React.FC<UploadProgressProps> = (props) => {
+  const {
+    upload,
+    showFileName = true,
+    showFileSize = true,
+    showSpeed = false,
+    showETA = false,
+    showCancel = true,
+    showRetry = true,
+    onCancel,
+    onRetry,
+    variant = 'linear',
+    size = 'md',
+    style,
+    testID,
+  } = props;
+
+  // Determine intent based on state
+  const getIntent = (): Intent => {
+    switch (upload.state) {
+      case 'completed':
+        return 'success';
+      case 'failed':
+        return 'error';
+      case 'cancelled':
+        return 'secondary';
+      default:
+        return 'primary';
+    }
+  };
+
+  const intent = getIntent();
+
+  // Apply variants
+  uploadProgressStyles.useVariants({
+    size,
+    intent,
+  });
+
+  // Render state icon
+  const renderStateIcon = () => {
+    switch (upload.state) {
+      case 'completed':
+        return <Text style={uploadProgressStyles.stateIcon({ intent: 'success' })}>✓</Text>;
+      case 'failed':
+        return <Text style={uploadProgressStyles.stateIcon({ intent: 'error' })}>✗</Text>;
+      case 'cancelled':
+        return <Text style={uploadProgressStyles.stateIcon({ intent: 'secondary' })}>⊘</Text>;
+      case 'paused':
+        return <Text style={uploadProgressStyles.stateIcon({ intent: 'secondary' })}>⏸</Text>;
+      case 'pending':
+        return <Text style={uploadProgressStyles.stateIcon({ intent: 'secondary' })}>⏳</Text>;
+      default:
+        return null;
+    }
+  };
+
+  // Render progress bar
+  const renderProgressBar = () => {
+    if (upload.state !== 'uploading' && upload.state !== 'paused') {
+      return null;
+    }
+
+    return (
+      <View style={uploadProgressStyles.progressContainer({})}>
+        <View
+          style={[
+            uploadProgressStyles.progressBar({ intent }),
+            { width: `${upload.percentage}%` },
+          ]}
+        />
+      </View>
+    );
+  };
+
+  // Render details
+  const renderDetails = () => {
+    const details: string[] = [];
+
+    if (showFileSize) {
+      details.push(`${formatBytes(upload.bytesUploaded)} / ${formatBytes(upload.bytesTotal)}`);
+    }
+
+    if (showSpeed && upload.state === 'uploading' && upload.speed > 0) {
+      details.push(`${formatBytes(upload.speed)}/s`);
+    }
+
+    if (showETA && upload.state === 'uploading' && upload.estimatedTimeRemaining > 0) {
+      details.push(`${formatDuration(upload.estimatedTimeRemaining)} remaining`);
+    }
+
+    if (upload.currentChunk !== undefined && upload.totalChunks !== undefined) {
+      details.push(`Chunk ${upload.currentChunk}/${upload.totalChunks}`);
+    }
+
+    if (details.length === 0) {
+      return null;
+    }
+
+    return (
+      <View style={uploadProgressStyles.detailsRow({})}>
+        {details.map((detail, index) => (
+          <Text key={index} style={uploadProgressStyles.detail({})}>
+            {detail}
+          </Text>
+        ))}
+      </View>
+    );
+  };
+
+  // Render actions
+  const renderActions = () => {
+    const actions: React.ReactNode[] = [];
+
+    if (showCancel && (upload.state === 'uploading' || upload.state === 'pending')) {
+      actions.push(
+        <TouchableOpacity
+          key="cancel"
+          onPress={onCancel}
+          style={uploadProgressStyles.actionButton({})}
+          accessibilityRole="button"
+          accessibilityLabel="Cancel upload"
+          activeOpacity={0.7}
+        >
+          <Text style={uploadProgressStyles.actionIcon({})}>✗</Text>
+        </TouchableOpacity>
+      );
+    }
+
+    if (showRetry && upload.state === 'failed') {
+      actions.push(
+        <TouchableOpacity
+          key="retry"
+          onPress={onRetry}
+          style={uploadProgressStyles.actionButton({})}
+          accessibilityRole="button"
+          accessibilityLabel="Retry upload"
+          activeOpacity={0.7}
+        >
+          <Text style={uploadProgressStyles.actionIcon({})}>↻</Text>
+        </TouchableOpacity>
+      );
+    }
+
+    if (actions.length === 0) {
+      return null;
+    }
+
+    return (
+      <View style={uploadProgressStyles.actions({})}>
+        {actions}
+      </View>
+    );
+  };
+
+  // Render error message
+  const renderError = () => {
+    if (upload.state !== 'failed' || !upload.error) {
+      return null;
+    }
+
+    return (
+      <Text style={uploadProgressStyles.errorText({})}>
+        {upload.error.message}
+      </Text>
+    );
+  };
+
+  return (
+    <View style={[uploadProgressStyles.container({}), style]} testID={testID}>
+      {/* File info row */}
+      <View style={uploadProgressStyles.infoRow({})}>
+        {showFileName && (
+          <Text style={uploadProgressStyles.fileName({})} numberOfLines={1}>
+            {upload.file.name}
+          </Text>
+        )}
+        {renderStateIcon()}
+        {renderActions()}
+      </View>
+
+      {/* Progress bar */}
+      {renderProgressBar()}
+
+      {/* Details row */}
+      {renderDetails()}
+
+      {/* Error message */}
+      {renderError()}
+    </View>
+  );
+};
+
+UploadProgress.displayName = 'UploadProgress';

package/src/components/UploadProgress.styles.tsx

@@ -0,0 +1,90 @@
+/**
+ * UploadProgress styles using defineStyle.
+ */
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+
+// Required: Unistyles must see StyleSheet usage to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+export type UploadProgressVariants = {
+  size: Size;
+  intent: Intent;
+};
+
+export type UploadProgressDynamicProps = {
+  intent?: Intent;
+  size?: Size;
+};
+
+export const uploadProgressStyles = defineStyle('UploadProgress', (theme: Theme) => ({
+  container: (_props: UploadProgressDynamicProps) => ({
+    backgroundColor: theme.colors.surface.secondary,
+    borderRadius: 8,
+    padding: 12,
+    gap: 8,
+  }),
+  infoRow: (_props: UploadProgressDynamicProps) => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  }),
+  fileName: (_props: UploadProgressDynamicProps) => ({
+    flex: 1,
+    fontSize: 14,
+    fontWeight: '500',
+    color: theme.colors.text.primary,
+  }),
+  stateIcon: ({ intent = 'primary' }: UploadProgressDynamicProps) => ({
+    fontSize: 20,
+    color: theme.intents[intent].primary,
+  }),
+  progressContainer: (_props: UploadProgressDynamicProps) => ({
+    height: 8,
+    backgroundColor: theme.colors.surface.tertiary,
+    borderRadius: 4,
+    overflow: 'hidden',
+  }),
+  progressBar: ({ intent = 'primary' }: UploadProgressDynamicProps) => ({
+    height: '100%',
+    backgroundColor: theme.intents[intent].primary,
+    borderRadius: 4,
+  }),
+  detailsRow: (_props: UploadProgressDynamicProps) => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    gap: 8,
+  }),
+  detail: (_props: UploadProgressDynamicProps) => ({
+    fontSize: 12,
+    color: theme.colors.text.secondary,
+  }),
+  actions: (_props: UploadProgressDynamicProps) => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  }),
+  actionButton: (_props: UploadProgressDynamicProps) => ({
+    padding: 4,
+    borderRadius: 4,
+    _web: {
+      cursor: 'pointer',
+    },
+  }),
+  actionIcon: ({ intent = 'neutral' }: UploadProgressDynamicProps) => ({
+    fontSize: 20,
+    color: theme.intents[intent].primary,
+  }),
+  errorText: (_props: UploadProgressDynamicProps) => ({
+    fontSize: 12,
+    color: theme.intents.danger.primary,
+    marginTop: 4,
+  }),
+}));

package/src/components/UploadProgress.web.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import type { UploadProgressProps, Intent } from '../types';
+import { uploadProgressStyles } from './UploadProgress.styles';
+import { formatBytes, formatDuration } from '../utils';
+
+/**
+ * UploadProgress - Shows upload progress with controls (Web).
+ */
+export const UploadProgress: React.FC<UploadProgressProps> = (props) => {
+  const {
+    upload,
+    showFileName = true,
+    showFileSize = true,
+    showSpeed = false,
+    showETA = false,
+    showCancel = true,
+    showRetry = true,
+    onCancel,
+    onRetry,
+    variant = 'linear',
+    size = 'md',
+    style,
+    testID,
+  } = props;
+
+  // Determine intent based on state
+  const getIntent = (): Intent => {
+    switch (upload.state) {
+      case 'completed':
+        return 'success';
+      case 'failed':
+        return 'error';
+      case 'cancelled':
+        return 'secondary';
+      default:
+        return 'primary';
+    }
+  };
+
+  const intent = getIntent();
+
+  // Apply variants
+  uploadProgressStyles.useVariants({
+    size,
+    intent,
+  });
+
+  // Render state icon
+  const renderStateIcon = () => {
+    switch (upload.state) {
+      case 'completed':
+        return <Text style={uploadProgressStyles.stateIcon({ intent: 'success' })}>✓</Text>;
+      case 'failed':
+        return <Text style={uploadProgressStyles.stateIcon({ intent: 'error' })}>✗</Text>;
+      case 'cancelled':
+        return <Text style={uploadProgressStyles.stateIcon({ intent: 'secondary' })}>⊘</Text>;
+      case 'paused':
+        return <Text style={uploadProgressStyles.stateIcon({ intent: 'secondary' })}>⏸</Text>;
+      case 'pending':
+        return <Text style={uploadProgressStyles.stateIcon({ intent: 'secondary' })}>⏳</Text>;
+      default:
+        return null;
+    }
+  };
+
+  // Render progress bar
+  const renderProgressBar = () => {
+    if (upload.state !== 'uploading' && upload.state !== 'paused') {
+      return null;
+    }
+
+    return (
+      <View style={uploadProgressStyles.progressContainer({})}>
+        <View
+          style={[
+            uploadProgressStyles.progressBar({ intent }),
+            { width: `${upload.percentage}%` },
+          ]}
+        />
+      </View>
+    );
+  };
+
+  // Render details
+  const renderDetails = () => {
+    const details: string[] = [];
+
+    if (showFileSize) {
+      details.push(`${formatBytes(upload.bytesUploaded)} / ${formatBytes(upload.bytesTotal)}`);
+    }
+
+    if (showSpeed && upload.state === 'uploading' && upload.speed > 0) {
+      details.push(`${formatBytes(upload.speed)}/s`);
+    }
+
+    if (showETA && upload.state === 'uploading' && upload.estimatedTimeRemaining > 0) {
+      details.push(`${formatDuration(upload.estimatedTimeRemaining)} remaining`);
+    }
+
+    if (upload.currentChunk !== undefined && upload.totalChunks !== undefined) {
+      details.push(`Chunk ${upload.currentChunk}/${upload.totalChunks}`);
+    }
+
+    if (details.length === 0) {
+      return null;
+    }
+
+    return (
+      <View style={uploadProgressStyles.detailsRow({})}>
+        {details.map((detail, index) => (
+          <Text key={index} style={uploadProgressStyles.detail({})}>
+            {detail}
+          </Text>
+        ))}
+      </View>
+    );
+  };
+
+  // Render actions
+  const renderActions = () => {
+    const actions: React.ReactNode[] = [];
+
+    if (showCancel && (upload.state === 'uploading' || upload.state === 'pending')) {
+      actions.push(
+        <Pressable
+          key="cancel"
+          onPress={onCancel}
+          style={uploadProgressStyles.actionButton({})}
+          accessibilityRole="button"
+          accessibilityLabel="Cancel upload"
+        >
+          <Text style={uploadProgressStyles.actionIcon({})}>✗</Text>
+        </Pressable>
+      );
+    }
+
+    if (showRetry && upload.state === 'failed') {
+      actions.push(
+        <Pressable
+          key="retry"
+          onPress={onRetry}
+          style={uploadProgressStyles.actionButton({})}
+          accessibilityRole="button"
+          accessibilityLabel="Retry upload"
+        >
+          <Text style={uploadProgressStyles.actionIcon({})}>↻</Text>
+        </Pressable>
+      );
+    }
+
+    if (actions.length === 0) {
+      return null;
+    }
+
+    return (
+      <View style={uploadProgressStyles.actions({})}>
+        {actions}
+      </View>
+    );
+  };
+
+  // Render error message
+  const renderError = () => {
+    if (upload.state !== 'failed' || !upload.error) {
+      return null;
+    }
+
+    return (
+      <Text style={uploadProgressStyles.errorText({})}>
+        {upload.error.message}
+      </Text>
+    );
+  };
+
+  return (
+    <View style={[uploadProgressStyles.container({}), style]} testID={testID}>
+      {/* File info row */}
+      <View style={uploadProgressStyles.infoRow({})}>
+        {showFileName && (
+          <Text style={uploadProgressStyles.fileName({})} numberOfLines={1}>
+            {upload.file.name}
+          </Text>
+        )}
+        {renderStateIcon()}
+        {renderActions()}
+      </View>
+
+      {/* Progress bar */}
+      {renderProgressBar()}
+
+      {/* Details row */}
+      {renderDetails()}
+
+      {/* Error message */}
+      {renderError()}
+    </View>
+  );
+};
+
+UploadProgress.displayName = 'UploadProgress';

package/src/components/index.native.ts

@@ -0,0 +1,8 @@
+export { FilePickerButton } from './FilePickerButton.native';
+export { DropZone } from './DropZone.native';
+export { UploadProgress } from './UploadProgress.native';
+
+// Styles
+export { filePickerButtonStyles } from './FilePickerButton.styles';
+export { dropZoneStyles } from './DropZone.styles';
+export { uploadProgressStyles } from './UploadProgress.styles';

package/src/components/index.ts

@@ -0,0 +1,6 @@
+// Styles (platform-agnostic)
+export { filePickerButtonStyles } from './FilePickerButton.styles';
+export { dropZoneStyles } from './DropZone.styles';
+export { uploadProgressStyles } from './UploadProgress.styles';
+
+// Platform-specific components are exported from index.web.ts and index.native.ts

package/src/components/index.web.ts

@@ -0,0 +1,8 @@
+export { FilePickerButton } from './FilePickerButton.web';
+export { DropZone } from './DropZone.web';
+export { UploadProgress } from './UploadProgress.web';
+
+// Styles
+export { filePickerButtonStyles } from './FilePickerButton.styles';
+export { dropZoneStyles } from './DropZone.styles';
+export { uploadProgressStyles } from './UploadProgress.styles';