@tradly/asset 1.0.2 → 1.0.4

package/package.json

@@ -1,11 +1,18 @@
 {
     "name": "@tradly/asset",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "description": "A reusable media gallery component for uploading and selecting images, videos, and files with Tradly authentication",
-    "main": "src/index.js",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
+    "files": [
+        "dist",
+        "README.md",
+        "LICENSE"
+    ],
     "scripts": {
-        "build": "echo 'Build script - configure with your bundler'",
-        "dev": "echo 'Dev script - configure with your bundler'"
+        "build": "node build.js",
+        "prepublishOnly": "npm run build",
+        "dev": "npm run build"
     },
     "keywords": [
         "media",
@@ -34,5 +41,10 @@
         "@headlessui/react": "^1.7.0",
         "axios": "^0.24.0"
     },
-    "devDependencies": {}
+    "devDependencies": {
+        "@babel/cli": "^7.28.3",
+        "@babel/core": "^7.28.5",
+        "@babel/preset-env": "^7.28.5",
+        "@babel/preset-react": "^7.28.5"
+    }
 }

package/EXAMPLE_USAGE.jsx

@@ -1,128 +0,0 @@
-/**
- * Example usage of @tradly/asset package
- *
- * This shows how to integrate the media gallery package into your existing project
- */
-
-import React, { useState } from "react";
-import { MediaPopup, MediaApiService } from "@tradly/asset";
-import { getAuthKey } from "constant/functions";
-
-function ExampleMediaGalleryUsage() {
-	const [isOpen, setIsOpen] = useState(false);
-	const [selectedMedia, setSelectedMedia] = useState(null);
-
-	// Initialize API service with auth key
-	// API base URL is automatically detected from ENVIRONMENT:
-	// - Dev: https://api.dev.tradly.app
-	// - Prod: https://api.tradly.app
-	// All API calls go directly to Tradly API (no proxy needed)
-	const apiService = new MediaApiService({
-		authKey: getAuthKey(), // Get auth key from your existing function (X-Auth-Key header)
-		bearerToken: "your-bearer-token", // Required: Bearer token for Authorization header
-		// environment is auto-detected from process.env.ENVIRONMENT
-		// apiBaseUrl is auto-set based on environment (can be overridden)
-		onError: (error) => {
-			console.error("Media API Error:", error);
-			// You can show a toast notification here
-		},
-	});
-
-	const handleSelect = (mediaUrl) => {
-		console.log("Selected media:", mediaUrl);
-		setSelectedMedia(mediaUrl);
-		setIsOpen(false);
-	};
-
-	const handleError = (error) => {
-		console.error("Media gallery error:", error);
-		// Handle error (show toast, etc.)
-	};
-
-	return (
-		<div className="p-4">
-			<h2 className="text-2xl font-bold mb-4">
-				Media Gallery Example
-			</h2>
-
-			<div className="mb-4">
-				<button
-					onClick={() => setIsOpen(true)}
-					className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark"
-				>
-					Open Media Gallery
-				</button>
-			</div>
-
-			{selectedMedia && (
-				<div className="mt-4">
-					<p className="font-semibold">
-						Selected Media:
-					</p>
-					<img
-						src={selectedMedia}
-						alt="Selected"
-						className="mt-2 max-w-xs rounded"
-					/>
-				</div>
-			)}
-
-			<MediaPopup
-				isOpen={isOpen}
-				onClose={() => setIsOpen(false)}
-				onSelect={handleSelect}
-				currentData={selectedMedia}
-				options={["image", "video"]} // Options: 'image', 'video', 'file'
-				apiService={apiService}
-				onError={handleError}
-				title="Select Media"
-			/>
-		</div>
-	);
-}
-
-// Example: Using only images
-function ImageOnlyExample() {
-	const [isOpen, setIsOpen] = useState(false);
-	const apiService = new MediaApiService({
-		authKey: getAuthKey(),
-		bearerToken: "your-bearer-token", // Required
-		// apiBaseUrl is auto-detected from ENVIRONMENT
-	});
-
-	return (
-		<MediaPopup
-			isOpen={isOpen}
-			onClose={() => setIsOpen(false)}
-			onSelect={(url) => console.log("Selected:", url)}
-			options={["image"]}
-			apiService={apiService}
-		/>
-	);
-}
-
-// Example: Using individual components
-function CustomGalleryExample() {
-	const apiService = new MediaApiService({
-		authKey: getAuthKey(),
-		bearerToken: "your-bearer-token", // Required
-		// apiBaseUrl is auto-detected from ENVIRONMENT
-	});
-
-	return (
-		<div className="p-4">
-			<ImagesGallery
-				update_data={(url) => {
-					console.log("Image selected:", url);
-				}}
-				closePopup={() => {
-					console.log("Gallery closed");
-				}}
-				apiService={apiService}
-			/>
-		</div>
-	);
-}
-
-export default ExampleMediaGalleryUsage;
-

package/MIGRATION_GUIDE.md

@@ -1,249 +0,0 @@
-# Migration Guide: From Existing Media Components to @tradly/asset Package
-
-## Overview
-
-This guide helps you migrate from the existing media components in
-`src/Shared/fields/MediaSections/` to the new reusable `@tradly/asset` package.
-
-## Benefits of Using the Package
-
-1. **Reusability**: Use the same media gallery across multiple projects
-2. **Maintainability**: Single source of truth for media gallery functionality
-3. **Flexibility**: Easy to configure with different auth keys and API endpoints
-4. **Separation of Concerns**: Media gallery logic is isolated from your main
-   app
-
-## Package Structure
-
-```
-packages/asset/
-├── src/
-│   ├── components/
-│   │   ├── MediaPopup.jsx      # Main popup component
-│   │   ├── MediaTab.jsx         # Tab navigation
-│   │   ├── MediaGallery.jsx     # Images gallery
-│   │   ├── VideosGallery.jsx    # Videos gallery
-│   │   ├── FileUpload.jsx       # File upload component
-│   │   ├── Pagination.jsx       # Pagination component
-│   │   ├── ImagesSkeleton.jsx   # Loading skeleton
-│   │   └── Icons.jsx            # Icon components
-│   ├── services/
-│   │   └── apiService.js        # API service layer
-│   └── index.js                 # Main export
-├── package.json
-├── README.md
-└── EXAMPLE_USAGE.jsx
-```
-
-## Migration Steps
-
-### Step 1: Install/Setup the Package
-
-Since this is a local package, you can either:
-
-**Option A: Use as local package (for now)**
-
-```json
-// In your main package.json, add:
-{
-	"dependencies": {
-		"@tradly/asset": "file:./packages/asset"
-	}
-}
-```
-
-**Option B: Publish to npm (later)**
-
-```bash
-cd packages/asset
-npm publish
-```
-
-### Step 2: Update Your Component
-
-**Before (Old way):**
-
-```jsx
-import MediaGallery from "@/Shared/fields/MediaSections/MediaPopup";
-
-function MyComponent() {
-	const [isOpen, setIsOpen] = useState(false);
-
-	return (
-		<MediaGallery
-			isOpenPopup={isOpen}
-			setIsOpenPopup={setIsOpen}
-			current_data={selectedMedia}
-			update_data={setSelectedMedia}
-			options={["image"]}
-		/>
-	);
-}
-```
-
-**After (New way):**
-
-```jsx
-import { MediaPopup, MediaApiService } from "@tradly/asset";
-import { getAuthKey } from "constant/functions";
-
-function MyComponent() {
-	const [isOpen, setIsOpen] = useState(false);
-	const [selectedMedia, setSelectedMedia] = useState(null);
-
-	// Initialize API service with Tradly SDK
-	const apiService = new MediaApiService({
-		authKey: getAuthKey(),
-		baseUrl: "/api",
-		tradly: tradly, // Pass Tradly SDK instance (required for uploads)
-	});
-
-	return (
-		<MediaPopup
-			isOpen={isOpen}
-			onClose={() => setIsOpen(false)}
-			onSelect={setSelectedMedia}
-			currentData={selectedMedia}
-			options={["image"]}
-			apiService={apiService}
-		/>
-	);
-}
-```
-
-### Step 3: Configure API Service
-
-The package handles all upload logic internally using direct API calls. The API
-base URL is automatically detected from your environment:
-
-```jsx
-const apiService = new MediaApiService({
-	authKey: getAuthKey(), // X-Auth-Key header
-	bearerToken: "your-bearer-token", // Required: Bearer token
-	// environment is auto-detected from process.env.ENVIRONMENT
-	// apiBaseUrl is auto-set based on environment:
-	//   - Dev: https://api.dev.tradly.app
-	//   - Prod: https://api.tradly.app
-});
-```
-
-The package will automatically:
-
-1. Detect environment from `process.env.ENVIRONMENT` (or you can pass
-   `environment: 'dev'` or `'production'`)
-2. Set the correct API base URL (`https://api.dev.tradly.app` for dev,
-   `https://api.tradly.app` for prod)
-3. Get S3 signed URLs via API call to `POST /v1/utils/S3signedUploadURL`
-4. Upload files to S3 using the signed URLs
-5. Save media metadata via `POST /v1/media` with `{ media: [...] }` format
-6. Fetch media list via `GET /v1/media?page=1&parent=0&mime_type=...`
-
-## Key Differences
-
-| Old Component                           | New Package                      |
-| --------------------------------------- | -------------------------------- |
-| `isOpenPopup` prop                      | `isOpen` prop                    |
-| `setIsOpenPopup` prop                   | `onClose` callback               |
-| `update_data` prop                      | `onSelect` callback              |
-| `current_data` prop                     | `currentData` prop               |
-| Uses `proxy_api_call` directly          | Uses `MediaApiService`           |
-| Auth key from `getAuthKey()` internally | Auth key passed via `apiService` |
-| Hardcoded API paths                     | Configurable via `apiService`    |
-
-## Complete Example
-
-Here's a complete example showing how to replace the old component:
-
-```jsx
-import React, { useState } from "react";
-import { MediaPopup, MediaApiService } from "@tradly/asset";
-import { getAuthKey } from "constant/functions";
-
-function MyMediaSelector() {
-	const [isOpen, setIsOpen] = useState(false);
-	const [selectedImage, setSelectedImage] = useState(null);
-
-	// Create API service instance
-	// API base URL is automatically detected from ENVIRONMENT
-	// All API calls go directly to Tradly API (no proxy needed)
-	const apiService = React.useMemo(() => {
-		return new MediaApiService({
-			authKey: getAuthKey(),
-			bearerToken: "your-bearer-token", // Required: Bearer token
-			// apiBaseUrl is auto-detected from process.env.ENVIRONMENT
-			onError: (error) => {
-				console.error("Media API Error:", error);
-				// Show error toast, etc.
-			},
-		});
-	}, []);
-
-	return (
-		<div>
-			<button onClick={() => setIsOpen(true)}>
-				Select Media
-			</button>
-
-			{selectedImage && (
-				<img
-					src={selectedImage}
-					alt="Selected"
-				/>
-			)}
-
-			<MediaPopup
-				isOpen={isOpen}
-				onClose={() => setIsOpen(false)}
-				onSelect={(url) => {
-					setSelectedImage(url);
-					setIsOpen(false);
-				}}
-				currentData={selectedImage}
-				options={["image", "video"]}
-				apiService={apiService}
-				onError={(error) => {
-					console.error("Gallery error:", error);
-				}}
-			/>
-		</div>
-	);
-}
-
-export default MyMediaSelector;
-```
-
-## Testing
-
-After migration, test the following:
-
-1. ✅ Opening/closing the media gallery
-2. ✅ Uploading new images/videos
-3. ✅ Selecting existing media
-4. ✅ Pagination works correctly
-5. ✅ Error handling works
-6. ✅ Authentication is working
-
-## Rollback Plan
-
-If you need to rollback:
-
-1. Keep the old components in `src/Shared/fields/MediaSections/`
-2. Import from the old location instead of the package
-3. The old components will continue to work as before
-
-## Next Steps
-
-1. Test the package in a development environment
-2. Gradually migrate components one by one
-3. Once stable, consider removing old components
-4. Optionally publish to npm for use in other projects
-
-## Support
-
-If you encounter issues during migration:
-
-1. Check the `EXAMPLE_USAGE.jsx` file
-2. Review the `README.md` for API documentation
-3. Ensure all peer dependencies are installed
-4. Verify your auth key and API base URL are correct
-

package/STYLING_GUIDE.md

@@ -1,219 +0,0 @@
-# Styling Guide - Customizing Media Gallery with Tailwind CSS
-
-The `@tradly/asset` package supports full customization of all components using
-Tailwind CSS class names. You can customize styles at every level of the
-component hierarchy.
-
-## Overview
-
-All components accept `className` props that allow you to override default
-styles. The package uses sensible Tailwind defaults, but you can customize
-everything to match your design system.
-
-## MediaPopup Styling Props
-
-The main popup component supports these styling props:
-
-```jsx
-<MediaPopup
-	// ... other props
-	overlayClassName="..." // Overlay/backdrop styles
-	containerClassName="..." // Main popup container
-	headerClassName="..." // Header container
-	titleClassName="..." // Title text
-	closeButtonClassName="..." // Close button
-/>
-```
-
-### Example
-
-```jsx
-<MediaPopup
-	isOpen={isOpen}
-	onClose={() => setIsOpen(false)}
-	onSelect={handleSelect}
-	apiService={apiService}
-	overlayClassName="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm"
-	containerClassName="max-w-4xl bg-gray-900 text-white rounded-xl shadow-2xl"
-	titleClassName="text-3xl font-extrabold text-blue-400"
-	closeButtonClassName="text-white hover:text-red-400 hover:bg-red-900/20"
-/>
-```
-
-## MediaTab Styling Props
-
-Customize the tab navigation:
-
-```jsx
-<MediaTab
-	// ... other props
-	className="..." // Tab group container
-	tabListClassName="..." // Tab list container
-	tabButtonClassName="..." // Base tab button styles
-	tabButtonActiveClassName="..." // Active tab button styles
-	tabButtonInactiveClassName="..." // Inactive tab button styles
-	tabPanelClassName="..." // Tab panel container
-/>
-```
-
-### Example
-
-```jsx
-<MediaTab
-	options={["image", "video"]}
-	apiService={apiService}
-	tabListClassName="bg-gray-800 border-b-2 border-blue-500"
-	tabButtonClassName="text-gray-300 hover:text-white px-6 py-3 transition-all"
-	tabButtonActiveClassName="text-blue-400 border-b-4 border-blue-400 font-bold"
-	tabButtonInactiveClassName="text-gray-400"
-/>
-```
-
-## MediaGallery / VideosGallery Styling Props
-
-Customize the media grid and items:
-
-```jsx
-<ImagesGallery
-	// ... other props
-	className="..." // Container
-	gridClassName="..." // Grid layout
-	imageItemClassName="..." // Individual image item
-	paginationContainerClassName="..." // Pagination container
-/>
-```
-
-### Example
-
-```jsx
-<ImagesGallery
-	apiService={apiService}
-	gridClassName="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"
-	imageItemClassName="rounded-lg border-2 border-gray-300 hover:border-blue-500 transition-all cursor-pointer transform hover:scale-105"
-	paginationContainerClassName="bg-gray-100 p-6 rounded-lg mt-4"
-/>
-```
-
-## FileUpload Styling Props
-
-Customize the upload button:
-
-```jsx
-<FileUpload
-	// ... other props
-	className="..." // Container
-	buttonClassName="..." // Upload button
-	iconContainerClassName="..." // Icon container
-	titleClassName="..." // Title text
-	loadingClassName="..." // Loading state
-/>
-```
-
-### Example
-
-```jsx
-<FileUpload
-	accept="image/*"
-	title="Upload Image"
-	apiService={apiService}
-	buttonClassName="border-2 border-dashed border-blue-500 bg-blue-50 hover:bg-blue-100 rounded-xl p-8"
-	iconContainerClassName="bg-blue-500 p-4 rounded-full"
-	titleClassName="text-blue-600 font-semibold mt-4"
-	loadingClassName="bg-blue-100 border-2 border-blue-300 rounded-xl"
-/>
-```
-
-## Pagination Styling Props
-
-Customize pagination controls:
-
-```jsx
-<Pagination
-	// ... other props
-	className="..." // Container
-	navClassName="..." // Nav element
-	previousButtonClassName="..." // Previous button
-	nextButtonClassName="..." // Next button
-	pageButtonClassName="..." // Page number buttons
-	pageButtonActiveClassName="..." // Active page button
-	ellipsisClassName="..." // Ellipsis (...)
-/>
-```
-
-### Example
-
-```jsx
-<Pagination
-	nextPage={handlePageChange}
-	current_page={currentPage}
-	pageCount={totalPages}
-	navClassName="flex items-center space-x-2"
-	previousButtonClassName="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg"
-	nextButtonClassName="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg"
-	pageButtonClassName="px-4 py-2 bg-white border border-gray-300 hover:bg-gray-100 rounded"
-	pageButtonActiveClassName="px-4 py-2 bg-blue-500 text-white font-bold rounded"
-/>
-```
-
-## Complete Customization Example
-
-Here's a fully customized example:
-
-```jsx
-import { MediaPopup, MediaApiService } from "@tradly/asset";
-
-function CustomStyledGallery() {
-	const apiService = new MediaApiService({
-		authKey: "your-key",
-		bearerToken: "your-token",
-	});
-
-	return (
-		<MediaPopup
-			isOpen={isOpen}
-			onClose={() => setIsOpen(false)}
-			onSelect={handleSelect}
-			apiService={apiService}
-			// Popup styles
-			overlayClassName="fixed inset-0 bg-black/60 backdrop-blur-sm"
-			containerClassName="max-w-5xl bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl shadow-2xl border border-gray-700"
-			headerClassName="flex items-center justify-between p-6 border-b border-gray-700"
-			titleClassName="text-2xl font-bold text-white"
-			closeButtonClassName="text-gray-400 hover:text-white hover:bg-gray-700 rounded-full p-2 transition-all"
-			// Tab styles (passed to MediaTab internally)
-			tabListClassName="bg-gray-800/50 border-b border-gray-700"
-			tabButtonClassName="text-gray-400 hover:text-white px-6 py-4 transition-colors"
-			tabButtonActiveClassName="text-blue-400 border-b-2 border-blue-400 font-semibold"
-			tabButtonInactiveClassName="text-gray-500"
-			// Gallery styles (passed to MediaGallery internally)
-			gridClassName="grid grid-cols-3 md:grid-cols-5 gap-4 p-6"
-			imageItemClassName="rounded-xl border-2 border-gray-700 hover:border-blue-500 cursor-pointer transition-all hover:scale-105 shadow-lg"
-			paginationContainerClassName="bg-gray-800/50 p-4 border-t border-gray-700"
-		/>
-	);
-}
-```
-
-## Styling Tips
-
-1. **Use Tailwind's responsive prefixes**: `md:`, `lg:`, etc.
-2. **Combine with your design system**: Use your existing color palette and
-   spacing
-3. **Maintain accessibility**: Keep contrast ratios and focus states
-4. **Test hover states**: Ensure interactive elements have clear hover feedback
-5. **Use transitions**: Add `transition-all` or `transition-colors` for smooth
-   animations
-
-## Default Classes Reference
-
-If you want to see the default classes, check the component source files. All
-default classes use Tailwind utility classes and can be completely overridden.
-
-## Notes
-
-- All className props are optional
-- If not provided, sensible defaults are used
-- You can override individual parts without affecting others
-- Classes are merged/applied using the `||` operator, so your custom classes
-  completely replace defaults
-