@app-studio/web 0.9.41 → 0.9.43

package/docs/components/Uploader.mdx

@@ -1,426 +1,280 @@
 # Uploader
 
-A versatile file upload component with support for single and multiple file uploads, drag & drop functionality, file validation, preview capabilities, and progress tracking. Perfect for handling images, videos, documents, and any file type with built-in error handling and customizable UI.
+A versatile file upload component with support for images, videos, and files, featuring drag-and-drop, preview, progress tracking, and validation.
 
 ### **Import**
-  ```tsx
-  import { Uploader } from '@app-studio/web';
-  ```
-
-### **Basic Usage**
 ```tsx
-import React from 'react';
 import { Uploader } from '@app-studio/web';
-import { UploadIcon } from '@app-studio/web';
-
-export const BasicUploader = () => {
-  const handleFileSelect = (file: File) => {
-    console.log('Selected file:', file);
-    // Handle the uploaded file
-  };
-
-  return (
-    <Uploader
-      icon={<UploadIcon widthHeight={32} />}
-      text="Click to upload a file"
-      onFileSelect={handleFileSelect}
-      maxSize={10 * 1024 * 1024} // 10MB limit
-    />
-  );
-};
 ```
 
-### **Multiple File Upload**
+### **Default**
 ```tsx
-import React, { useState } from 'react';
+import React from 'react';
 import { Uploader } from '@app-studio/web';
-import { UploadIcon } from '@app-studio/web';
 
-export const MultipleFileUploader = () => {
-  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+export const DefaultUploader = () => (
+  <Uploader 
+    onFileSelect={(file) => console.log('Selected:', file)}
+  />
+);
+```
 
-  const handleMultipleFileSelect = (files: File[]) => {
-    console.log('Selected files:', files);
-    setSelectedFiles(files);
-  };
+### **accept**
+Specifies which file types are accepted for upload.
 
-  return (
-    <Uploader
-      icon={<UploadIcon widthHeight={32} />}
-      text="Click to upload multiple files"
-      multiple={true}
-      onMultipleFileSelect={handleMultipleFileSelect}
-      maxSize={50 * 1024 * 1024} // 50MB limit per file
-      accept="image/*,video/*,.pdf,.doc,.docx"
-    />
-  );
-};
-```
+- **Type:** `string`
+- **Default:** `'*/*'`
 
-### **Image Upload with Preview**
 ```tsx
-import React, { useState } from 'react';
+import React from 'react';
 import { Uploader } from '@app-studio/web';
-import { ImageIcon } from '@app-studio/web';
-
-export const ImageUploader = () => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [progress, setProgress] = useState(0);
-
-  const handleImageSelect = (file: File) => {
-    console.log('Selected image:', file);
-
-    // Simulate upload progress
-    setIsLoading(true);
-    setProgress(0);
-
-    const interval = setInterval(() => {
-      setProgress((prev) => {
-        if (prev >= 100) {
-          clearInterval(interval);
-          setIsLoading(false);
-          return 100;
-        }
-        return prev + 10;
-      });
-    }, 200);
-  };
-
-  return (
-    <Uploader
-      accept="image/*"
-      icon={<ImageIcon widthHeight={32} />}
-      text="Upload Image"
-      onFileSelect={handleImageSelect}
-      isLoading={isLoading}
-      progress={progress}
-      fileType="image"
-      maxSize={5 * 1024 * 1024} // 5MB limit
-      containerProps={{
-        height: progress === 100 ? '200px' : 'auto',
-        minHeight: '120px'
-      }}
+import { Vertical } from 'app-studio';
+
+export const FileTypeUploader = () => (
+  <Vertical gap={15}>
+    <Uploader 
+      accept="image/*" 
+      onFileSelect={(file) => console.log(file)}
+      text="Upload Images"
     />
-  );
-};
+    <Uploader 
+      accept="video/*" 
+      onFileSelect={(file) => console.log(file)}
+      text="Upload Videos"
+    />
+    <Uploader 
+      accept=".pdf,.doc,.docx" 
+      onFileSelect={(file) => console.log(file)}
+      text="Upload Documents"
+    />
+  </Vertical>
+);
 ```
 
-### **Video Upload with Thumbnail**
+### **multiple**
+Allow multiple file selection.
+
+- **Type:** `boolean`
+- **Default:** `false`
+
 ```tsx
-import React, { useState } from 'react';
+import React from 'react';
 import { Uploader } from '@app-studio/web';
-import { VideoIcon } from '@app-studio/web';
 
-export const VideoUploader = () => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [progress, setProgress] = useState(0);
+export const MultipleUploader = () => (
+  <Uploader 
+    multiple
+    onMultipleFileSelect={(files) => {
+      console.log(`Selected ${files.length} files`);
+    }}
+    text="Upload Multiple Files"
+  />
+);
+```
 
-  const handleVideoSelect = (file: File) => {
-    console.log('Selected video:', file);
-
-    // Simulate upload progress
-    setIsLoading(true);
-    setProgress(0);
-
-    const interval = setInterval(() => {
-      setProgress((prev) => {
-        if (prev >= 100) {
-          clearInterval(interval);
-          setIsLoading(false);
-          return 100;
-        }
-        return prev + 5;
-      });
-    }, 300);
-  };
+### **maxSize**
+Maximum file size in bytes.
 
-  return (
-    <Uploader
-      accept="video/*"
-      icon={<VideoIcon widthHeight={32} />}
-      text="Upload Video"
-      onFileSelect={handleVideoSelect}
-      isLoading={isLoading}
-      progress={progress}
-      fileType="video"
-      maxSize={100 * 1024 * 1024} // 100MB limit
-      containerProps={{
-        height: progress === 100 ? '200px' : 'auto',
-        minHeight: '120px'
-      }}
-    />
-  );
-};
-```
+- **Type:** `number`
 
-### **File Validation**
 ```tsx
 import React from 'react';
 import { Uploader } from '@app-studio/web';
-import { UploadIcon } from '@app-studio/web';
 
-export const ValidatedUploader = () => {
-  const validateFile = (file: File): string | null => {
-    // Custom validation logic
-    if (file.size > 10 * 1024 * 1024) {
-      return 'File size must be less than 10MB';
-    }
+export const SizeLimitUploader = () => (
+  <Uploader 
+    maxSize={5 * 1024 * 1024} // 5MB
+    onFileSelect={(file) => console.log(file)}
+    text="Max 5MB"
+  />
+);
+```
 
-    if (!file.type.startsWith('image/')) {
-      return 'Only image files are allowed';
-    }
+### **validateFile**
+Custom validation function for uploaded files.
 
-    if (file.name.length > 50) {
-      return 'File name must be less than 50 characters';
-    }
+- **Type:** `(file: File) => string | null`
 
-    return null; // No validation errors
-  };
+```tsx
+import React from 'react';
+import { Uploader } from '@app-studio/web';
 
-  const handleFileSelect = (file: File) => {
-    console.log('Valid file selected:', file);
-  };
+export const ValidatedUploader = () => (
+  <Uploader 
+    validateFile={(file) => {
+      if (file.size > 10 * 1024 * 1024) {
+        return 'File must be less than 10MB';
+      }
+      if (!file.type.startsWith('image/')) {
+        return 'Only images are allowed';
+      }
+      return null;
+    }}
+    onFileSelect={(file) => console.log(file)}
+  />
+);
+```
 
-  const handleError = (error: string) => {
-    console.error('Upload error:', error);
-    // Show error message to user
-  };
+### **isLoading**
+Show loading state during upload.
 
-  return (
-    <Uploader
-      icon={<UploadIcon widthHeight={32} />}
-      text="Upload Image (Max 10MB)"
-      accept="image/*"
-      onFileSelect={handleFileSelect}
-      validateFile={validateFile}
-      onError={handleError}
-      maxSize={10 * 1024 * 1024}
-    />
-  );
-};
-```
+- **Type:** `boolean`
+- **Default:** `false`
 
-### **Custom Rendering**
 ```tsx
-import React from 'react';
+import React, { useState } from 'react';
 import { Uploader } from '@app-studio/web';
-import { View, Text } from '@app-studio/web';
-import { CheckIcon, ErrorIcon } from '@app-studio/web';
-
-export const CustomUploader = () => {
-  const handleFileSelect = (file: File) => {
-    console.log('File selected:', file);
-  };
-
-  const customErrorRenderer = ({ errorMessage }: any) => (
-    <View
-      padding={8}
-      backgroundColor="color.red.50"
-      borderRadius={4}
-      marginTop={8}
-    >
-      <Text color="color.red.600" fontSize={12}>
-        <ErrorIcon widthHeight={16} /> {errorMessage}
-      </Text>
-    </View>
-  );
-
-  const customFileRenderer = ({ selectedFile }: any) => (
-    <View
-      padding={12}
-      backgroundColor="color.green.50"
-      borderRadius={4}
-      marginTop={8}
-    >
-      <Text color="color.green.700" fontSize={14}>
-        <CheckIcon widthHeight={16} /> {selectedFile.name}
-      </Text>
-      <Text color="color.green.600" fontSize={12}>
-        Size: {Math.round(selectedFile.size / 1024)} KB
-      </Text>
-    </View>
-  );
 
+export const LoadingUploader = () => {
+  const [loading, setLoading] = useState(false);
+  
   return (
-    <Uploader
-      text="Drop your file here or click to browse"
-      onFileSelect={handleFileSelect}
-      renderError={customErrorRenderer}
-      renderFile={customFileRenderer}
-      views={{
-        container: {
-          border: '2px dashed',
-          borderColor: 'color.blue.300',
-          backgroundColor: 'color.blue.50',
-          borderRadius: 12,
-          padding: 24,
-        },
-        text: {
-          color: 'color.blue.700',
-          fontWeight: 'medium',
-        },
+    <Uploader 
+      isLoading={loading}
+      onFileSelect={(file) => {
+        setLoading(true);
+        // Simulate upload
+        setTimeout(() => setLoading(false), 2000);
       }}
     />
   );
 };
 ```
 
-### **Integration with ChatInput**
-The Uploader component is seamlessly integrated into the ChatInput component for file attachments:
+### **progress**
+Upload progress percentage (0-100).
+
+- **Type:** `number`
+- **Default:** `0`
 
 ```tsx
 import React, { useState } from 'react';
-import { ChatInput } from '@app-studio/web';
-import { View } from '@app-studio/web';
-
-export const ChatWithFileUpload = () => {
-  const [inputValue, setInputValue] = useState('');
-
-  const handleSubmit = (message: string, options?: any) => {
-    console.log('Message with files:', message);
-    console.log('Upload options:', options);
-    setInputValue('');
-  };
+import { Uploader } from '@app-studio/web';
 
+export const ProgressUploader = () => {
+  const [progress, setProgress] = useState(0);
+  
   return (
-    <View width="100%">
-      <ChatInput
-        onSubmit={handleSubmit}
-        value={inputValue}
-        onChange={setInputValue}
-        placeholder="Type a message or upload files..."
-        hideAttachments={false} // Enable file upload button
-      />
-    </View>
+    <Uploader 
+      isLoading={progress > 0 && progress < 100}
+      progress={progress}
+      onFileSelect={(file) => {
+        // Simulate upload progress
+        let current = 0;
+        const interval = setInterval(() => {
+          current += 10;
+          setProgress(current);
+          if (current >= 100) clearInterval(interval);
+        }, 200);
+      }}
+    />
   );
 };
 ```
 
-### **Props**
-
-| Prop | Type | Default | Description |
-| ---- | ---- | ------- | ----------- |
-| accept | string | '*/*' | File types to accept (MIME types) |
-| icon | React.ReactNode | undefined | Icon to display in the upload area |
-| text | string | undefined | Text to display in the upload area |
-| maxSize | number | 100MB | Maximum file size in bytes |
-| onFileSelect | `(file: File) => void` | undefined | Callback when a single file is selected |
-| onMultipleFileSelect | `(files: File[]) => void` | undefined | Callback when multiple files are selected |
-| validateFile | `(file: File) => string \| null` | undefined | Custom validation function |
-| isLoading | boolean | false | Whether the uploader is in loading state |
-| progress | number | 0 | Upload progress (0-100) |
-| fileType | `'video' \| 'image' \| 'file'` | undefined | Type of file for preview rendering |
-| multiple | boolean | false | Allow multiple file selection |
-| onError | `(error: string) => void` | undefined | Error callback function |
-| thumbnail | string | undefined | Thumbnail URL for preview |
-
-### **Custom Rendering Props**
-
-| Prop | Type | Description |
-| ---- | ---- | ----------- |
-| renderVideo | `(props: any) => React.ReactNode` | Custom video preview renderer |
-| renderText | `(props: any) => React.ReactNode` | Custom text renderer |
-| renderImage | `(props: any) => React.ReactNode` | Custom image preview renderer |
-| renderError | `(props: any) => React.ReactNode` | Custom error message renderer |
-| renderFile | `(props: any) => React.ReactNode` | Custom file info renderer |
-| renderProgress | `(props: any) => React.ReactNode` | Custom progress indicator renderer |
-
-### **View Customization**
-
-The `views` prop allows you to customize different parts of the component:
+### **fileType**
+Explicitly set the file type for rendering.
+
+- **Type:** `'image' | 'video' | 'file'`
 
 ```tsx
-<Uploader
-  // ...other props
-  views={{
-    container: { /* styles for the main container */ },
-    view: { /* styles for the content wrapper */ },
-    image: { /* styles for image preview */ },
-    horizontal: { /* styles for horizontal layout */ },
-    text: { /* styles for text elements */ },
-  }}
-/>
+import React from 'react';
+import { Uploader } from '@app-studio/web';
+import { Horizontal } from 'app-studio';
+
+export const TypedUploaders = () => (
+  <Horizontal gap={15}>
+    <Uploader fileType="image" text="Image" />
+    <Uploader fileType="video" text="Video" />
+    <Uploader fileType="file" text="File" />
+  </Horizontal>
+);
 ```
 
-### **File Type Detection**
-
-The Uploader automatically detects file types and renders appropriate previews:
-
-- **Images**: Shows image preview with proper scaling
-- **Videos**: Generates thumbnail and shows video preview
-- **Files**: Displays file name and size information
-
-### **Error Handling**
-
-The component provides comprehensive error handling:
-
-- **File size validation**: Automatic validation against `maxSize` prop
-- **Custom validation**: Use `validateFile` prop for custom rules
-- **Error callbacks**: Handle errors with `onError` callback
-- **Visual feedback**: Error messages displayed in the UI
+### **icon**
+Custom icon to display in the uploader.
 
-### **Best Practices**
+- **Type:** `React.ReactNode`
 
-**File Size Limits:**
-- Set appropriate `maxSize` limits based on your use case
-- Consider server-side validation as well
-- Provide clear feedback about size limits to users
+```tsx
+import React from 'react';
+import { Uploader } from '@app-studio/web';
+import { UploadIcon } from '@app-studio/web';
 
-**File Type Restrictions:**
-- Use the `accept` prop to limit file types
-- Implement additional validation in `validateFile` if needed
-- Consider security implications of allowed file types
+export const CustomIconUploader = () => (
+  <Uploader 
+    icon={<UploadIcon widthHeight={32} />}
+    text="Click to upload"
+    onFileSelect={(file) => console.log(file)}
+  />
+);
+```
 
-**User Experience:**
-- Provide clear instructions with the `text` prop
-- Use appropriate icons to indicate file types
-- Show progress feedback for large uploads
-- Handle errors gracefully with user-friendly messages
+### **text**
+Text to display in the uploader.
 
-**Performance:**
-- Consider lazy loading for large file previews
-- Implement proper cleanup for object URLs
-- Use appropriate file size limits to prevent memory issues
+- **Type:** `string`
 
-### **Accessibility**
+```tsx
+import React from 'react';
+import { Uploader } from '@app-studio/web';
 
-The Uploader component includes built-in accessibility features:
+export const CustomTextUploader = () => (
+  <Uploader 
+    text="Drag & drop your files here"
+    onFileSelect={(file) => console.log(file)}
+  />
+);
+```
 
-- Keyboard navigation support
-- ARIA attributes for screen readers
-- Focus management
-- Proper contrast for visual elements
+### **views**
+Custom styles for different parts of the uploader.
 
-### **Integration Examples**
+- **Type:** `{ container?: ViewProps; view?: ViewProps; image?: ImageProps; horizontal?: ViewProps; text?: ViewProps }`
 
-**With Form Libraries:**
 ```tsx
-// Integration with Formik
-import { useFormikContext } from 'formik';
-
-const FormikUploader = ({ name, ...props }) => {
-  const { setFieldValue } = useFormikContext();
+import React from 'react';
+import { Uploader } from '@app-studio/web';
 
-  return (
-    <Uploader
-      onFileSelect={(file) => setFieldValue(name, file)}
-      {...props}
-    />
-  );
-};
+export const StyledUploader = () => (
+  <Uploader 
+    onFileSelect={(file) => console.log(file)}
+    views={{
+      container: {
+        borderRadius: 12,
+        borderColor: '#3b82f6',
+        borderWidth: 2,
+      },
+      text: {
+        color: '#3b82f6',
+        fontSize: 16,
+      }
+    }}
+  />
+);
 ```
 
-**With State Management:**
-```tsx
-// Integration with Redux or other state management
-const ConnectedUploader = () => {
-  const dispatch = useDispatch();
+### **Custom Render Functions**
+Override default rendering for different file types.
 
-  return (
-    <Uploader
-      onFileSelect={(file) => dispatch(uploadFile(file))}
-      onMultipleFileSelect={(files) => dispatch(uploadMultipleFiles(files))}
-    />
-  );
-};
+```tsx
+import React from 'react';
+import { Uploader } from '@app-studio/web';
+import { Text, View } from 'app-studio';
+
+export const CustomRenderUploader = () => (
+  <Uploader 
+    onFileSelect={(file) => console.log(file)}
+    renderImage={(props) => (
+      <View>
+        <Text>Custom Image Preview</Text>
+        {/* Custom image rendering */}
+      </View>
+    )}
+    renderError={(props) => (
+      <Text color="error">{props.errorMessage}</Text>
+    )}
+  />
+);
 ```
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.41",
+  "version": "0.9.43",
   "main": "dist/index.js",
   "typings": "dist/components/index.d.ts",
   "files": [

package/dist/components/AuthGuard/AuthGuard.d.ts

@@ -1,35 +0,0 @@
-import React, { ReactNode } from 'react';
-/**
- * Authentication guard props
- */
-interface AuthGuardProps {
-    children: ReactNode;
-    fallback?: ReactNode;
-    requireAuth?: boolean;
-    autoLogin?: boolean;
-}
-/**
- * Authentication guard component
- *
- * Protects routes by checking authentication status and auto-logging in for ADK pages
- */
-export declare const AuthGuard: React.FC<AuthGuardProps>;
-/**
- * HOC for protecting components with authentication
- */
-export declare const withAuthGuard: <P extends object>(Component: React.ComponentType<P>, options?: {
-    requireAuth?: boolean | undefined;
-    fallback?: ReactNode;
-} | undefined) => React.FC<P>;
-/**
- * Route-based authentication guard
- * Automatically determines if auth is required based on the current path
- */
-export declare const RouteAuthGuard: React.FC<{
-    children: ReactNode;
-}>;
-/**
- * Authentication status indicator component
- */
-export declare const AuthStatus: React.FC;
-export {};

package/dist/components/AuthGuard/index.d.ts

@@ -1 +0,0 @@
-export { AuthGuard, withAuthGuard, RouteAuthGuard, AuthStatus, } from './AuthGuard';