@tradly/asset 1.0.13 → 1.0.15

package/README.md

@@ -10,9 +10,10 @@ videos, files) with Tradly authentication support.
 - 📁 Upload and browse files
 - 🔐 Tradly authentication support
 - 🎨 Customizable UI
-- 📱 Responsive design
+- 📱 Responsive design (Web) + Native mobile support (React Native)
 - 🔄 Pagination support
 - ⚡ Lightweight and performant
+- 🌐 **Cross-platform**: Works on Web (React) and Mobile (React Native)
 
 ## Installation
 
@@ -24,20 +25,33 @@ yarn add @tradly/asset
 
 ## Peer Dependencies
 
-This package requires the following peer dependencies:
+### Web (React)
 
 - `react` (>=16.8.0)
 - `react-dom` (>=16.8.0)
-- `@headlessui/react` (^1.7.0) - for Tab components
 - `axios` (^0.24.0) - for API calls
 
+### React Native
+
+- `react` (>=16.8.0)
+- `react-native` (>=0.60.0)
+- `axios` (^0.24.0) - for API calls
+- **File Picker Library** (choose one):
+     - `react-native-image-picker` - Recommended for React Native CLI
+     - `expo-image-picker` - For Expo projects
+     - Any other picker library that returns `{ uri, type, fileName }` format
+
 **Note:**
 
 - All pagination logic is built-in, no external pagination library needed!
 - No Tradly SDK dependency - uses direct API calls
+- **React Native**: File picker is configurable - you choose which library to
+  use
 
 ## Basic Usage
 
+### Web (React)
+
 ```jsx
 import React, { useState } from "react";
 import { MediaPopup, MediaApiService } from "@tradly/asset";
@@ -80,6 +94,273 @@ function MyComponent() {
 }
 ```
 
+### React Native
+
+```jsx
+import React, { useState } from "react";
+import { View, Button } from "react-native";
+import { MediaPopup, MediaApiService } from "@tradly/asset";
+import { launchImageLibrary } from "react-native-image-picker";
+
+function MyComponent() {
+	const [isOpen, setIsOpen] = useState(false);
+	const [selectedMedia, setSelectedMedia] = useState(null);
+
+	const apiService = new MediaApiService({
+		authKey: "your-tradly-auth-key",
+		bearerToken: "your-bearer-token",
+		environment: "dev", // or "production"
+	});
+
+	const handleSelect = (mediaUrl) => {
+		setSelectedMedia(mediaUrl);
+		setIsOpen(false);
+	};
+
+	// Configure file picker - REQUIRED for React Native
+	const picker = (options) => {
+		return new Promise((resolve) => {
+			launchImageLibrary(options, (response) => {
+				resolve(response.assets || []);
+			});
+		});
+	};
+
+	return (
+		<View>
+			<Button
+				title="Open Media Gallery"
+				onPress={() => setIsOpen(true)}
+			/>
+
+			<MediaPopup
+				isOpen={isOpen}
+				onClose={() => setIsOpen(false)}
+				onSelect={handleSelect}
+				options={["image", "video"]}
+				apiService={apiService}
+				picker={picker} // REQUIRED: Your file picker function
+			/>
+		</View>
+	);
+}
+```
+
+## React Native Setup
+
+### File Picker Configuration
+
+React Native requires you to provide a file picker function. The package
+supports any picker library that returns files in the format
+`{ uri, type, fileName }`.
+
+#### Option 1: Using react-native-image-picker
+
+```bash
+npm install react-native-image-picker
+# or
+yarn add react-native-image-picker
+```
+
+```jsx
+import { launchImageLibrary } from "react-native-image-picker";
+
+<MediaPopup
+	picker={(options) => {
+		return new Promise((resolve) => {
+			launchImageLibrary(options, (response) => {
+				if (response.didCancel) {
+					resolve([]);
+					return;
+				}
+				resolve(response.assets || []);
+			});
+		});
+	}}
+	apiService={apiService}
+	// ... other props
+/>;
+```
+
+#### Option 2: Using expo-image-picker
+
+```bash
+npx expo install expo-image-picker
+```
+
+```jsx
+import * as ImagePicker from "expo-image-picker";
+
+<MediaPopup
+	picker={async (options) => {
+		const result = await ImagePicker.launchImageLibraryAsync({
+			mediaTypes:
+				options.mediaType === "photo"
+					? ImagePicker.MediaTypeOptions.Images
+					: options.mediaType === "video"
+					? ImagePicker.MediaTypeOptions.Videos
+					: ImagePicker.MediaTypeOptions.All,
+			allowsMultipleSelection: options.allowsMultiple,
+			quality: options.quality,
+		});
+
+		if (result.canceled) {
+			return [];
+		}
+
+		return result.assets || [];
+	}}
+	apiService={apiService}
+	// ... other props
+/>;
+```
+
+#### Option 3: Custom Picker Options
+
+You can customize picker options based on the accept type:
+
+```jsx
+<MediaPopup
+	picker={yourPickerFunction}
+	pickerOptions={(accept) => ({
+		mediaType: accept?.includes("image") ? "photo" : "video",
+		quality: 0.9,
+		allowsMultiple: true,
+		// Add any other options your picker library supports
+	})}
+	apiService={apiService}
+	// ... other props
+/>
+```
+
+### React Native UI Differences
+
+- **Bottom Sheet**: Media gallery opens as a bottom sheet (slides up from
+  bottom) - defaults to 90% of screen height, customizable
+- **Native Styling**: Uses React Native `StyleSheet` instead of Tailwind CSS
+- **Components**: Uses React Native primitives (`View`, `Text`,
+  `TouchableOpacity`, `FlatList`, `Image`)
+- **File Upload**: Requires `picker` prop to be provided
+- **Theme System**: Full theme support for easy dark/light mode customization
+
+### React Native Theme & Customization
+
+The package includes a comprehensive theme system that makes it easy to
+customize colors, spacing, and styling for dark/light mode.
+
+#### Basic Theme Usage
+
+```jsx
+import { MediaPopup, MediaApiService } from "@tradly/asset";
+import { createTheme } from "@tradly/asset/native/theme";
+
+// Use dark mode
+const darkTheme = createTheme({ mode: "dark" });
+
+// Use light mode (default)
+const lightTheme = createTheme({ mode: "light" });
+
+<MediaPopup
+	apiService={apiService}
+	picker={picker}
+	theme={darkTheme} // Pass your theme
+	bottomSheetHeight={0.9} // 90% of screen (default), customize as needed
+/>;
+```
+
+#### Custom Theme Colors
+
+```jsx
+import { createTheme } from "@tradly/asset/native/theme";
+
+const customTheme = createTheme({
+  mode: "dark", // or "light"
+  colors: {
+    // Primary colors
+    primary: "#6366F1",
+    tabActive: "#6366F1",
+    tabIndicator: "#6366F1",
+
+    // Backgrounds
+    background: "#0F172A",
+    backgroundSecondary: "#1E293B",
+
+    // Text
+    text: "#F1F5F9",
+    textSecondary: "#CBD5E1",
+
+    // Tabs
+    tabActive: "#6366F1",
+    tabInactive: "#94A3B8",
+    tabBackground: "#0F172A",
+
+    // Borders
+    border: "#334155",
+
+    // Pagination
+    paginationButtonActive: "#6366F1",
+    paginationTextActive: "#FFFFFF",
+
+    // Upload button
+    uploadBorder: "#6366F1",
+    uploadIconBackground: "#6366F1",
+
+    // And many more...
+  },
+  bottomSheetHeight: 0.92, // 92% of screen height
+});
+
+<MediaPopup theme={customTheme} ... />
+```
+
+#### Available Theme Colors
+
+All colors are customizable via the theme object:
+
+- **Primary**: `primary`, `primaryLight`, `primaryDark`
+- **Backgrounds**: `background`, `backgroundSecondary`, `backgroundTertiary`
+- **Text**: `text`, `textSecondary`, `textTertiary`, `textInverse`
+- **Borders**: `border`, `borderLight`, `borderDark`
+- **Tabs**: `tabActive`, `tabInactive`, `tabIndicator`, `tabBackground`
+- **Pagination**: `paginationBackground`, `paginationButton`,
+  `paginationButtonActive`, `paginationText`, `paginationTextActive`,
+  `paginationBorder`
+- **Upload**: `uploadBorder`, `uploadBackground`, `uploadIconBackground`,
+  `uploadText`
+- **Items**: `itemBackground`, `itemShadow`
+- **Loading**: `loadingBackground`, `loadingText`
+- **Overlay**: `overlay`
+
+#### Customizing Bottom Sheet Height
+
+```jsx
+<MediaPopup
+	bottomSheetHeight={0.85} // 85% of screen height
+	// or via theme:
+	theme={createTheme({ bottomSheetHeight: 0.92 })}
+/>
+```
+
+#### Individual Component Styling
+
+You can also override individual component styles:
+
+```jsx
+<MediaPopup
+	theme={darkTheme}
+	// Override specific styles
+	containerStyle={{ padding: 24 }}
+	headerStyle={{ paddingBottom: 16 }}
+	titleStyle={{ fontSize: 28 }}
+	closeButtonStyle={{ padding: 12 }}
+	tabListStyle={{ paddingHorizontal: 8 }}
+	tabButtonStyle={{ paddingVertical: 16 }}
+	tabButtonActiveStyle={{ backgroundColor: "#F0F0F0" }}
+	tabButtonTextActiveStyle={{ fontWeight: "700" }}
+	// ... and many more style props
+/>
+```
+
 ## Advanced Usage
 
 ### Upload Functionality
@@ -179,19 +460,33 @@ apiService.setBearerToken("new-bearer-token");
 
 ### MediaPopup Props
 
-| Prop          | Type              | Default           | Description                                         |
-| ------------- | ----------------- | ----------------- | --------------------------------------------------- |
-| `isOpen`      | `boolean`         | `false`           | Controls popup visibility                           |
-| `onClose`     | `function`        | -                 | Callback when popup closes                          |
-| `onSelect`    | `function`        | -                 | Callback when media is selected                     |
-| `currentData` | `any`             | -                 | Currently selected media data                       |
-| `options`     | `array`           | `['image']`       | Media types to show: `'image'`, `'video'`, `'file'` |
-| `apiService`  | `MediaApiService` | -                 | **Required**: API service instance                  |
-| `onError`     | `function`        | -                 | Error handler callback                              |
-| `title`       | `string`          | `'Media Gallery'` | Popup title                                         |
+| Prop                | Type              | Default           | Description                                         | Platform     |
+| ------------------- | ----------------- | ----------------- | --------------------------------------------------- | ------------ |
+| `isOpen`            | `boolean`         | `false`           | Controls popup visibility                           | Web & Native |
+| `onClose`           | `function`        | -                 | Callback when popup closes                          | Web & Native |
+| `onSelect`          | `function`        | -                 | Callback when media is selected                     | Web & Native |
+| `currentData`       | `any`             | -                 | Currently selected media data                       | Web & Native |
+| `options`           | `array`           | `['image']`       | Media types to show: `'image'`, `'video'`, `'file'` | Web & Native |
+| `apiService`        | `MediaApiService` | -                 | **Required**: API service instance                  | Web & Native |
+| `onError`           | `function`        | -                 | Error handler callback                              | Web & Native |
+| `title`             | `string`          | `'Media Gallery'` | Popup title                                         | Web & Native |
+| `picker`            | `function`        | -                 | **Required for React Native**: File picker function | Native only  |
+| `pickerOptions`     | `function`        | -                 | Optional: Function to generate picker options       | Native only  |
+| `theme`             | `object`          | -                 | Theme object for colors/spacing (see Theme docs)    | Native only  |
+| `bottomSheetHeight` | `number`          | `0.9`             | Bottom sheet height (0.85 = 85%, 0.9 = 90%, etc.)   | Native only  |
+
+**React Native Required Props:**
+
+- `picker`: A function that accepts options and returns a Promise resolving to
+  an array of file objects
+     - Each file object should have:
+       `{ uri: string, type?: string, fileName?: string }`
+     - Example: `picker={(options) => launchImageLibrary(options, callback)}`
 
 ## Styling
 
+### Web (React)
+
 This package uses Tailwind CSS classes and supports full customization at every
 component level. All components accept `className` props that allow you to
 override default styles.
@@ -237,6 +532,74 @@ override default styles.
 **Individual Components:** You can also style individual components when using
 them separately. See `STYLING_GUIDE.md` for complete documentation.
 
+### React Native
+
+React Native components use `StyleSheet` for styling. You can customize styles
+using style props:
+
+```jsx
+<MediaPopup
+	apiService={apiService}
+	picker={picker}
+	// Customize styles
+	containerStyle={{ backgroundColor: "#F5F5F5" }}
+	headerStyle={{ padding: 20 }}
+	titleStyle={{ fontSize: 28, color: "#000" }}
+	// ... other props
+/>
+```
+
+**Available Style Props (React Native):**
+
+**MediaPopup:**
+
+- `overlayStyle` - Overlay/backdrop
+- `containerStyle` - Main popup container
+- `headerStyle` - Header container
+- `titleStyle` - Title text
+- `closeButtonStyle` - Close button
+- `closeButtonTextStyle` - Close button text/icon
+
+**MediaTab:**
+
+- `containerStyle` - Tab container
+- `tabListStyle` - Tab list
+- `tabButtonStyle` - Base tab button
+- `tabButtonActiveStyle` - Active tab button
+- `tabButtonInactiveStyle` - Inactive tab button
+- `tabButtonTextStyle` - Base tab text
+- `tabButtonTextActiveStyle` - Active tab text
+- `tabButtonTextInactiveStyle` - Inactive tab text
+- `tabIndicatorStyle` - Tab indicator line
+- `tabPanelStyle` - Tab panel container
+
+**ImagesGallery/VideosGallery:**
+
+- `containerStyle` - Gallery container
+- `gridStyle` - Media grid layout
+- `imageItemStyle` / `videoItemStyle` - Media item styles
+- `paginationContainerStyle` - Pagination container
+
+**FileUpload:**
+
+- `containerStyle` - Upload container
+- `buttonStyle` - Upload button
+- `iconContainerStyle` - Icon container
+- `titleStyle` - Upload title text
+- `loadingStyle` - Loading state container
+
+**Pagination:**
+
+- `containerStyle` - Pagination container
+- `navStyle` - Navigation container
+- `previousButtonStyle` - Previous button
+- `nextButtonStyle` - Next button
+- `pageButtonStyle` - Page number button
+- `pageButtonActiveStyle` - Active page button
+- `pageButtonTextStyle` - Page button text
+- `pageButtonTextActiveStyle` - Active page text
+- `ellipsisStyle` - Ellipsis container
+
 ### Full Styling Guide
 
 For detailed styling documentation with examples, see
@@ -270,6 +633,20 @@ For detailed styling documentation with examples, see
 
 ### All Media Types
 
+**Web:**
+
+```jsx
+<MediaPopup
+	isOpen={isOpen}
+	onClose={() => setIsOpen(false)}
+	onSelect={handleSelect}
+	options={["image", "video", "file"]}
+	apiService={apiService}
+/>
+```
+
+**React Native:**
+
 ```jsx
 <MediaPopup
 	isOpen={isOpen}
@@ -277,9 +654,27 @@ For detailed styling documentation with examples, see
 	onSelect={handleSelect}
 	options={["image", "video", "file"]}
 	apiService={apiService}
+	picker={picker} // Required
 />
 ```
 
+## Platform-Specific Notes
+
+### Web (React)
+
+- Uses `react-dom` for portal rendering
+- Tailwind CSS for styling
+- HTML file input for file selection
+- Canvas API for image compression
+
+### React Native
+
+- Uses `Modal` component for bottom sheet
+- React Native `StyleSheet` for styling
+- Requires file picker library (configurable)
+- Uses `FlatList` for efficient media rendering
+- Supports both iOS and Android
+
 ## Development
 
 To develop or modify this package:
@@ -290,6 +685,12 @@ npm install
 npm run dev
 ```
 
+**Note:** The package automatically detects the platform and uses the
+appropriate components:
+
+- Web bundlers will use `.web.jsx` files
+- React Native bundlers (Metro) will use `.native.jsx` files
+
 ## License
 
 MIT