@tradly/asset 1.0.0

package/STYLING_GUIDE.md

@@ -0,0 +1,210 @@
+# Styling Guide - Customizing Media Gallery with Tailwind CSS
+
+The `@tradly/media-gallery` 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/media-gallery'
+
+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/package.json

@@ -0,0 +1,40 @@
+{
+    "name": "@tradly/asset",
+    "version": "1.0.0",
+    "description": "A reusable media gallery component for uploading and selecting images, videos, and files with Tradly authentication",
+    "main": "dist/index.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "build": "echo 'Build script - configure with your bundler'",
+        "dev": "echo 'Dev script - configure with your bundler'"
+    },
+    "keywords": [
+        "media",
+        "gallery",
+        "upload",
+        "images",
+        "videos",
+        "files",
+        "tradly"
+    ],
+    "author": "tradly",
+    "license": "ISC",
+    "homepage": "https://tradly.app/",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/TRADLY-PLATFORM"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+    },
+    "dependencies": {
+        "@headlessui/react": "^1.7.0",
+        "axios": "^0.24.0"
+    },
+    "devDependencies": {}
+}

package/src/components/FileUpload.jsx

@@ -0,0 +1,114 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,18 @@
+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

package/src/components/MediaGallery.jsx

@@ -0,0 +1,125 @@
+import React, { useState, useEffect } from 'react'
+import FileUpload from './FileUpload'
+import ImagesSkeleton from './ImagesSkeleton'
+import Pagination from './Pagination'
+
+const IMAGE_MIME_TYPES = [
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/svg+xml',
+  'image/gif',
+  'image/avif',
+  'image/x-icon',
+  'image/vnd.microsoft.icon',
+  'image/heic',
+  'image/heif',
+]
+
+const ImagesGallery = ({
+  update_data,
+  closePopup,
+  apiService,
+  onError,
+  // Styling props
+  className,
+  gridClassName,
+  imageItemClassName,
+  paginationContainerClassName,
+}) => {
+  const [images, setImages] = useState([])
+  const [total_count, setTotalCount] = useState(0)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [isLoading, setISLoading] = useState(false)
+
+  // Fetch images
+  useEffect(() => {
+    loadMedia()
+  }, [])
+
+  const loadMedia = async (page_number = 1) => {
+    try {
+      const response = await apiService.fetchMedia({
+        mimeTypes: IMAGE_MIME_TYPES,
+        page: page_number,
+        setISLoading,
+        isLoading,
+      })
+
+      // Handle different response formats
+      // Response might be: { media: [...], count: ... } or { data: { media: [...], count: ... } } or directly [...]
+      const mediaData = response?.media || response?.data?.media || response?.data || response || []
+      const count = response?.count || response?.data?.count || response?.total || 0
+
+      setImages(Array.isArray(mediaData) ? mediaData : [])
+      setTotalCount(count)
+      setCurrentPage(page_number)
+    } catch (error) {
+      console.error('Error loading media:', error)
+      if (onError) {
+        onError(error)
+      }
+    }
+  }
+
+  const handleImageClick = (image) => {
+    if (update_data) {
+      update_data(image.url || image)
+    }
+    if (closePopup) {
+      closePopup()
+    }
+  }
+
+  // Default classes with customization support
+  const defaultContainerClass = 'h-full flex flex-col justify-between'
+  const defaultGridClass = 'grid grid-cols-[repeat(auto-fill,minmax(calc(160px),1fr))] gap-5'
+  const defaultImageItemClass =
+    'cursor-pointer w-full h-40 object-contain p-3 overflow-hidden bg-white rounded-md shadow-md hover:shadow-lg transition-shadow'
+  const defaultPaginationContainerClass = 'mb-4 bg-gray-100/90 p-4 sticky bottom-0'
+
+  return (
+    <div className={className || defaultContainerClass}>
+      <div className={gridClassName || defaultGridClass}>
+        <FileUpload
+          loadMedia={loadMedia}
+          accept="image/*"
+          title="Add Image"
+          apiService={apiService}
+          onUploadError={onError}
+        />
+
+        {isLoading ? (
+          <ImagesSkeleton />
+        ) : (
+          images?.map((image, index) => {
+            const imageUrl = typeof image === 'string' ? image : image.url
+            const imageKey = image.id || image.url || index
+
+            return (
+              <img
+                key={imageKey}
+                onClick={() => handleImageClick(image)}
+                className={imageItemClassName || defaultImageItemClass}
+                src={imageUrl}
+                alt={image.name || 'Media item'}
+              />
+            )
+          })
+        )}
+      </div>
+
+      <div className={paginationContainerClassName || defaultPaginationContainerClass}>
+        {total_count > 0 && (
+          <Pagination
+            nextPage={(value) => loadMedia(value)}
+            pageCount={Math.ceil(total_count / 30)}
+            current_page={currentPage}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ImagesGallery

package/src/components/MediaPopup.jsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { createPortal } from 'react-dom'
+import MediaTab from './MediaTab'
+import { CloseIcon } from './Icons'
+
+const MediaPopup = ({
+  isOpen,
+  onClose,
+  onSelect,
+  currentData,
+  options = ['image'],
+  apiService,
+  onError,
+  title = 'Media Gallery',
+  // Styling props
+  className,
+  overlayClassName,
+  containerClassName,
+  headerClassName,
+  titleClassName,
+  closeButtonClassName,
+  // Pass-through styling props for child components
+  tabListClassName,
+  tabButtonClassName,
+  tabButtonActiveClassName,
+  tabButtonInactiveClassName,
+  tabPanelClassName,
+  gridClassName,
+  imageItemClassName,
+  videoItemClassName,
+  paginationContainerClassName,
+}) => {
+  if (!isOpen) return null
+
+  const handleUpdate = (data) => {
+    if (onSelect) {
+      onSelect(data)
+    }
+  }
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose()
+    }
+  }
+
+  // Default classes with customization support
+  const defaultOverlayClass = 'fixed inset-0 w-screen h-screen bg-black opacity-10'
+  const defaultContainerClass =
+    'origin-top-right z-[9999] absolute inset-0 max-w-3xl mx-auto my-auto min-h-[200px] h-[600px] bg-white rounded shadow-inner cursor-auto p-6'
+  const defaultHeaderClass = 'flex items-center justify-between gap-4'
+  const defaultTitleClass = 'text-[#000] font-bold text-2xl'
+  const defaultCloseButtonClass =
+    'bg-transparent rounded-full hover:bg-gray-100 p-1 transition-colors'
+
+  return createPortal(
+    <>
+      <div
+        className={overlayClassName || defaultOverlayClass}
+        style={{ zIndex: 9998 }}
+        onClick={handleClose}
+      />
+      <div className={containerClassName || defaultContainerClass} style={{ zIndex: 9999 }}>
+        {/* Header */}
+        <div className={headerClassName || defaultHeaderClass}>
+          <p className={titleClassName || defaultTitleClass}>{title}</p>
+          <button
+            className={closeButtonClassName || defaultCloseButtonClass}
+            type="button"
+            onClick={handleClose}
+            aria-label="Close"
+          >
+            <CloseIcon />
+          </button>
+        </div>
+        <MediaTab
+          imagePopup={isOpen}
+          update_data={handleUpdate}
+          current_data={currentData}
+          closePopup={handleClose}
+          options={options}
+          apiService={apiService}
+          onError={onError}
+          // Pass styling props through
+          tabListClassName={tabListClassName}
+          tabButtonClassName={tabButtonClassName}
+          tabButtonActiveClassName={tabButtonActiveClassName}
+          tabButtonInactiveClassName={tabButtonInactiveClassName}
+          tabPanelClassName={tabPanelClassName}
+          gridClassName={gridClassName}
+          imageItemClassName={imageItemClassName}
+          videoItemClassName={videoItemClassName}
+          paginationContainerClassName={paginationContainerClassName}
+        />
+      </div>
+    </>,
+    document.body
+  )
+}
+
+export default MediaPopup