@tradly/asset 1.0.2 → 1.0.4

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

package/src/components/MediaGallery.jsx

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

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

package/src/components/MediaTab.jsx

@@ -1,152 +0,0 @@
-import React, { useState } from 'react'
-import { Tab } from '@headlessui/react'
-import ImagesGallery from './MediaGallery'
-import VideosGallery from './VideosGallery'
-
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ')
-}
-
-const MediaTab = ({
-  imagePopup,
-  current_data,
-  update_data,
-  closePopup,
-  options,
-  apiService,
-  onError,
-  // Styling props
-  className,
-  tabListClassName,
-  tabButtonClassName,
-  tabButtonActiveClassName,
-  tabButtonInactiveClassName,
-  tabPanelClassName,
-  // Pass-through styling props for gallery components
-  gridClassName,
-  imageItemClassName,
-  videoItemClassName,
-  paginationContainerClassName,
-}) => {
-  const [selectedIndex, setSelectedIndex] = useState(0)
-
-  // Default classes with customization support
-  const defaultTabGroupClass = 'h-[520px] overflow-y-auto scrollbar-none'
-  const defaultTabListClass = 'sticky top-0 z-30 bg-white w-full flex border-b-2 border-gray-200'
-  const defaultTabButtonBaseClass =
-    'rounded-lg py-2.5 px-8 text-base font-medium leading-5 flex flex-col md:flex-row items-center justify-center gap-3 ring-0 focus:outline-none'
-  const defaultTabButtonActiveClass =
-    'relative text-primary after:content-[""] after:h-1 after:w-full after:block after:absolute after:-bottom-0.5 after:bg-primary after:rounded-card'
-  const defaultTabButtonInactiveClass = 'text-[#4F4F4F]'
-  const defaultTabPanelClass = 'h-full py-4 relative'
-
-  return (
-    <Tab.Group
-      as="div"
-      key={selectedIndex}
-      className={className || defaultTabGroupClass}
-      onChange={setSelectedIndex}
-      selectedIndex={selectedIndex}
-    >
-      <Tab.List className={tabListClassName || defaultTabListClass}>
-        {options.includes('image') && (
-          <Tab
-            as="p"
-            id="image-tab-button"
-            className={({ selected }) =>
-              classNames(
-                tabButtonClassName || defaultTabButtonBaseClass,
-                selected
-                  ? tabButtonActiveClassName || defaultTabButtonActiveClass
-                  : tabButtonInactiveClassName || defaultTabButtonInactiveClass
-              )
-            }
-          >
-            <span>Images</span>
-          </Tab>
-        )}
-        {options.includes('video') && (
-          <Tab
-            as="p"
-            id="video-tab-button"
-            className={({ selected }) =>
-              classNames(
-                tabButtonClassName || defaultTabButtonBaseClass,
-                selected
-                  ? tabButtonActiveClassName || defaultTabButtonActiveClass
-                  : tabButtonInactiveClassName || defaultTabButtonInactiveClass
-              )
-            }
-          >
-            <span>Videos</span>
-          </Tab>
-        )}
-        {options.includes('file') && (
-          <Tab
-            as="p"
-            id="file-tab-button"
-            className={({ selected }) =>
-              classNames(
-                tabButtonClassName || defaultTabButtonBaseClass,
-                selected
-                  ? tabButtonActiveClassName || defaultTabButtonActiveClass
-                  : tabButtonInactiveClassName || defaultTabButtonInactiveClass
-              )
-            }
-          >
-            <span>Files</span>
-          </Tab>
-        )}
-      </Tab.List>
-      <Tab.Panels className="h-full" selectedIndex={selectedIndex}>
-        {options.includes('image') && (
-          <Tab.Panel className={tabPanelClassName || defaultTabPanelClass}>
-            <ImagesGallery
-              imagePopup={imagePopup}
-              update_data={update_data}
-              current_data={current_data}
-              closePopup={closePopup}
-              apiService={apiService}
-              onError={onError}
-              gridClassName={gridClassName}
-              imageItemClassName={imageItemClassName}
-              paginationContainerClassName={paginationContainerClassName}
-            />
-          </Tab.Panel>
-        )}
-        {options.includes('video') && (
-          <Tab.Panel className={tabPanelClassName || defaultTabPanelClass}>
-            <VideosGallery
-              imagePopup={imagePopup}
-              update_data={update_data}
-              current_data={current_data}
-              closePopup={closePopup}
-              apiService={apiService}
-              onError={onError}
-              gridClassName={gridClassName}
-              videoItemClassName={videoItemClassName}
-              paginationContainerClassName={paginationContainerClassName}
-            />
-          </Tab.Panel>
-        )}
-        {options.includes('file') && (
-          <Tab.Panel className={tabPanelClassName || defaultTabPanelClass}>
-            <ImagesGallery
-              imagePopup={imagePopup}
-              update_data={update_data}
-              current_data={current_data}
-              closePopup={closePopup}
-              apiService={apiService}
-              onError={onError}
-              gridClassName={gridClassName}
-              imageItemClassName={imageItemClassName}
-              paginationContainerClassName={paginationContainerClassName}
-            />
-          </Tab.Panel>
-        )}
-      </Tab.Panels>
-    </Tab.Group>
-  )
-}
-
-export default MediaTab