@tradly/asset 1.0.0

package/EXAMPLE_USAGE.jsx

@@ -0,0 +1,119 @@
+/**
+ * Example usage of @tradly/media-gallery package
+ *
+ * This shows how to integrate the media gallery package into your existing project
+ */
+
+import React, { useState } from 'react'
+import { MediaPopup, MediaApiService } from '@tradly/media-gallery'
+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

@@ -0,0 +1,236 @@
+# Migration Guide: From Existing Media Components to @tradly/media-gallery Package
+
+## Overview
+
+This guide helps you migrate from the existing media components in `src/Shared/fields/MediaSections/` to the new reusable `@tradly/media-gallery` 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/media-gallery/
+├── 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/media-gallery": "file:./packages/media-gallery"
+  }
+}
+```
+
+**Option B: Publish to npm (later)**
+
+```bash
+cd packages/media-gallery
+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/media-gallery'
+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/media-gallery'
+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/README.md

@@ -0,0 +1,292 @@
+# @tradly/media-gallery
+
+A reusable React component package for uploading and selecting media (images, videos, files) with Tradly authentication support.
+
+## Features
+
+- 📸 Upload and browse images
+- 🎥 Upload and browse videos
+- 📁 Upload and browse files
+- 🔐 Tradly authentication support
+- 🎨 Customizable UI
+- 📱 Responsive design
+- 🔄 Pagination support
+- ⚡ Lightweight and performant
+
+## Installation
+
+```bash
+npm install @tradly/media-gallery
+# or
+yarn add @tradly/media-gallery
+```
+
+## Peer Dependencies
+
+This package requires the following peer dependencies:
+
+- `react` (>=16.8.0)
+- `react-dom` (>=16.8.0)
+- `@headlessui/react` (^1.7.0) - for Tab components
+- `axios` (^0.24.0) - for API calls
+
+**Note:**
+
+- All pagination logic is built-in, no external pagination library needed!
+- No Tradly SDK dependency - uses direct API calls
+
+## Basic Usage
+
+```jsx
+import React, { useState } from 'react'
+import { MediaPopup, MediaApiService } from '@tradly/media-gallery'
+
+function MyComponent() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [selectedMedia, setSelectedMedia] = useState(null)
+
+  // Initialize API service with your auth key
+  // API base URL is automatically detected from ENVIRONMENT:
+  // - Dev: https://api.dev.tradly.app
+  // - Prod: https://api.tradly.app
+  const apiService = new MediaApiService({
+    authKey: 'your-tradly-auth-key', // Required: 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)
+  })
+
+  const handleSelect = (mediaUrl) => {
+    setSelectedMedia(mediaUrl)
+    setIsOpen(false)
+  }
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>Open Media Gallery</button>
+
+      <MediaPopup
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onSelect={handleSelect}
+        options={['image', 'video']} // Options: 'image', 'video', 'file'
+        apiService={apiService}
+      />
+    </>
+  )
+}
+```
+
+## Advanced Usage
+
+### Upload Functionality
+
+The package includes complete upload functionality using direct API calls. All upload logic is handled internally:
+
+1. **Get S3 signed URLs** via API call to `/v1/utils/S3signedUploadURL`
+2. **Upload files to S3** using the signed URLs
+3. **Save media metadata** to your API
+
+Configuration:
+
+```jsx
+import { MediaApiService } from '@tradly/media-gallery'
+
+const apiService = new MediaApiService({
+  authKey: 'your-auth-key', // Required: X-Auth-Key header
+  bearerToken: 'your-bearer-token', // Required: Bearer token for Authorization header
+  environment: 'dev', // Optional: 'dev' or 'production' (auto-detected from process.env.ENVIRONMENT)
+  apiBaseUrl: 'https://api.tradly.app', // Optional: Override auto-detected base URL
+})
+```
+
+**API Base URL Auto-Detection:**
+
+- If `environment` includes 'dev' → `https://api.dev.tradly.app`
+- Otherwise → `https://api.tradly.app`
+- You can override by providing `apiBaseUrl` explicitly
+
+### Using Individual Components
+
+You can also use the components individually:
+
+```jsx
+import { ImagesGallery, MediaApiService } from '@tradly/media-gallery'
+
+function CustomGallery() {
+  const apiService = new MediaApiService({
+    authKey: 'your-auth-key',
+    baseUrl: '/api',
+  })
+
+  return (
+    <ImagesGallery
+      update_data={(url) => console.log('Selected:', url)}
+      closePopup={() => console.log('Closed')}
+      apiService={apiService}
+    />
+  )
+}
+```
+
+### Error Handling
+
+```jsx
+<MediaPopup
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  onSelect={handleSelect}
+  apiService={apiService}
+  onError={(error) => {
+    console.error('Media gallery error:', error)
+    // Handle error (show toast, etc.)
+  }}
+/>
+```
+
+## API Service Configuration
+
+### MediaApiService Options
+
+```jsx
+const apiService = new MediaApiService({
+  authKey: 'string', // Required: Authentication key for X-Auth-Key header
+  bearerToken: 'string', // Required: Bearer token for Authorization header
+  environment: 'string', // Optional: 'dev' or 'production' (auto-detected from process.env.ENVIRONMENT)
+  apiBaseUrl: 'string', // Optional: Override auto-detected base URL (defaults: https://api.dev.tradly.app for dev, https://api.tradly.app for prod)
+  onError: (error) => {}, // Optional: Global error handler
+})
+```
+
+### Methods
+
+```jsx
+// Update auth key
+apiService.setAuthKey('new-auth-key')
+
+// Update API base URL (used for all API calls)
+apiService.setApiBaseUrl('https://api.tradly.app')
+
+// Set Bearer token
+apiService.setBearerToken('new-bearer-token')
+```
+
+## Props
+
+### 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                                         |
+
+## Styling
+
+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.
+
+### Quick Customization Example
+
+```jsx
+<MediaPopup
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  onSelect={handleSelect}
+  apiService={apiService}
+  // Customize popup
+  overlayClassName="bg-black/60 backdrop-blur-sm"
+  containerClassName="max-w-4xl bg-gray-900 rounded-xl"
+  titleClassName="text-2xl font-bold text-white"
+  // Customize tabs
+  tabButtonActiveClassName="text-blue-400 border-b-2 border-blue-400"
+  // Customize gallery
+  gridClassName="grid grid-cols-4 gap-4"
+  imageItemClassName="rounded-lg border-2 hover:border-blue-500"
+/>
+```
+
+### Available Styling Props
+
+**MediaPopup:**
+
+- `overlayClassName` - Overlay/backdrop
+- `containerClassName` - Main popup container
+- `headerClassName` - Header container
+- `titleClassName` - Title text
+- `closeButtonClassName` - Close button
+- `tabListClassName` - Tab list (passed to MediaTab)
+- `tabButtonClassName` - Base tab button
+- `tabButtonActiveClassName` - Active tab button
+- `tabButtonInactiveClassName` - Inactive tab button
+- `gridClassName` - Media grid layout
+- `imageItemClassName` - Image item styles
+- `videoItemClassName` - Video item styles
+- `paginationContainerClassName` - Pagination container
+
+**Individual Components:**
+You can also style individual components when using them separately. See `STYLING_GUIDE.md` for complete documentation.
+
+### Full Styling Guide
+
+For detailed styling documentation with examples, see [STYLING_GUIDE.md](./STYLING_GUIDE.md).
+
+## Examples
+
+### Image Only Gallery
+
+```jsx
+<MediaPopup
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  onSelect={handleSelect}
+  options={['image']}
+  apiService={apiService}
+/>
+```
+
+### Video Only Gallery
+
+```jsx
+<MediaPopup
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  onSelect={handleSelect}
+  options={['video']}
+  apiService={apiService}
+/>
+```
+
+### All Media Types
+
+```jsx
+<MediaPopup
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  onSelect={handleSelect}
+  options={['image', 'video', 'file']}
+  apiService={apiService}
+/>
+```
+
+## Development
+
+To develop or modify this package:
+
+```bash
+cd packages/media-gallery
+npm install
+npm run dev
+```
+
+## License
+
+MIT
+
+## Support
+
+For issues and questions, please open an issue on the repository.