@tradly/asset 1.0.3 → 1.0.5

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
-

package/src/components/FileUpload.jsx

@@ -1,114 +0,0 @@
-import React, { useState } from 'react'
-import { CameraIcon } from './Icons'
-
-const FileUpload = ({
-  loadMedia,
-  accept,
-  title,
-  apiService,
-  onUploadStart,
-  onUploadComplete,
-  onUploadError,
-  // Styling props
-  className,
-  buttonClassName,
-  iconContainerClassName,
-  titleClassName,
-  loadingClassName,
-}) => {
-  const [files, setFiles] = useState([])
-  const [isLoading, setISLoading] = useState(false)
-  const [length, setLength] = useState(0)
-
-  // Upload files
-  const uploadFiles = async (fileList) => {
-    if (onUploadStart) {
-      onUploadStart(fileList)
-    }
-
-    setISLoading(true)
-    setLength(fileList.length)
-
-    try {
-      // Use the API service to upload files
-      // The apiService.uploadMedia handles:
-      // 1. Generate S3 signed URLs via tradly.app.generateS3ImageURL
-      // 2. Upload files to S3
-      // 3. Save media metadata to API
-      const uploadedUrls = await apiService.uploadMedia(fileList, apiService.authKey)
-
-      if (onUploadComplete) {
-        onUploadComplete(uploadedUrls)
-      }
-
-      setLength(0)
-      if (loadMedia) {
-        loadMedia()
-      }
-    } catch (error) {
-      console.error('Upload error:', error)
-      if (onUploadError) {
-        onUploadError(error)
-      }
-    } finally {
-      setISLoading(false)
-    }
-  }
-
-  // Default classes with customization support
-  const defaultContainerClass = 'min-w-40 h-40'
-  const defaultButtonClass =
-    'w-full h-full flex flex-col justify-center items-center text-sm border border-primary border-dashed rounded-lg hover:bg-gray-50 transition-colors'
-  const defaultIconContainerClass = 'p-[10px] bg-primary rounded-full'
-  const defaultTitleClass = 'mt-2'
-  const defaultLoadingClass =
-    'flex items-center justify-center h-40 bg-gray-200 rounded-lg shadow-md animate-pulse'
-
-  return (
-    <>
-      <div className={className || defaultContainerClass}>
-        <input
-          required
-          id={`media_select_${files?.length}`}
-          type="file"
-          className="hidden"
-          accept={accept}
-          placeholder=""
-          onChange={async (e) => {
-            e.stopPropagation()
-            const all_files = Array.from(e.target.files)
-            if (all_files?.length > 0) {
-              await uploadFiles(all_files)
-            }
-            // Reset input
-            e.target.value = ''
-          }}
-          multiple={true}
-        />
-
-        <button
-          type="button"
-          className={buttonClassName || defaultButtonClass}
-          onClick={() => document.getElementById(`media_select_${files?.length}`).click()}
-          disabled={isLoading}
-        >
-          <span className={iconContainerClassName || defaultIconContainerClass}>
-            <CameraIcon />
-          </span>
-          <span className={titleClassName || defaultTitleClass}>{title}</span>
-        </button>
-      </div>
-
-      {isLoading &&
-        Array.from({ length: length }).map((_, index) => {
-          return (
-            <div key={index} className={loadingClassName || defaultLoadingClass}>
-              File Uploading... {index + 1}/{length}
-            </div>
-          )
-        })}
-    </>
-  )
-}
-
-export default FileUpload

package/src/components/Icons.jsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-export const CloseIcon = ({ className = 'w-8 h-8' }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    strokeWidth="1.5"
-    stroke="currentColor"
-    className={className}
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-  </svg>
-)
-
-export const CameraIcon = () => (
-  <svg width="22" height="18" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M7.75033 0.166672L5.76783 2.33334H2.33366C1.14199 2.33334 0.166992 3.30834 0.166992 4.50001V17.5C0.166992 18.6917 1.14199 19.6667 2.33366 19.6667H19.667C20.8587 19.6667 21.8337 18.6917 21.8337 17.5V4.50001C21.8337 3.30834 20.8587 2.33334 19.667 2.33334H16.2328L14.2503 0.166672H7.75033ZM11.0003 16.4167C8.01033 16.4167 5.58366 13.99 5.58366 11C5.58366 8.01001 8.01033 5.58334 11.0003 5.58334C13.9903 5.58334 16.417 8.01001 16.417 11C16.417 13.99 13.9903 16.4167 11.0003 16.4167Z"
-      fill="white"
-    />
-  </svg>
-)

package/src/components/ImagesSkeleton.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-
-const ImagesSkeleton = ({ per_page = 30 }) => {
-  const gridItems = []
-
-  for (let i = 0; i < per_page; i++) {
-    gridItems.push(
-      <div
-        key={i}
-        className="w-full min-h-[160px] bg-[#3B3269] bg-opacity-[20%] rounded-card animate-pulse"
-      ></div>
-    )
-  }
-
-  return gridItems
-}
-
-export default ImagesSkeleton