@tradly/asset 1.0.3 → 1.0.5

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

package/src/components/Pagination.jsx

@@ -1,175 +0,0 @@
-import React from 'react'
-
-const Pagination = ({
-  className,
-  nextPage,
-  current_page,
-  pageCount,
-  // Styling props
-  navClassName,
-  previousButtonClassName,
-  nextButtonClassName,
-  pageButtonClassName,
-  pageButtonActiveClassName,
-  ellipsisClassName,
-}) => {
-  const totalPages = Math.ceil(pageCount) || 1
-  const currentPage = current_page || 1
-
-  // Generate page numbers to display
-  const getPageNumbers = () => {
-    const pages = []
-    const maxVisible = 5
-    let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2))
-    let endPage = Math.min(totalPages, startPage + maxVisible - 1)
-
-    if (endPage - startPage < maxVisible - 1) {
-      startPage = Math.max(1, endPage - maxVisible + 1)
-    }
-
-    // Add first page and ellipsis
-    if (startPage > 1) {
-      pages.push(1)
-      if (startPage > 2) {
-        pages.push('...')
-      }
-    }
-
-    // Add visible pages
-    for (let i = startPage; i <= endPage; i++) {
-      pages.push(i)
-    }
-
-    // Add ellipsis and last page
-    if (endPage < totalPages) {
-      if (endPage < totalPages - 1) {
-        pages.push('...')
-      }
-      pages.push(totalPages)
-    }
-
-    return pages
-  }
-
-  const handlePageClick = (page) => {
-    if (page !== currentPage && page >= 1 && page <= totalPages) {
-      nextPage(page)
-    }
-  }
-
-  const handlePrevious = () => {
-    if (currentPage > 1) {
-      nextPage(currentPage - 1)
-    }
-  }
-
-  const handleNext = () => {
-    if (currentPage < totalPages) {
-      nextPage(currentPage + 1)
-    }
-  }
-
-  if (totalPages <= 1) return null
-
-  const pageNumbers = getPageNumbers()
-
-  // Default classes with customization support
-  const defaultContainerClass = 'flex justify-center'
-  const defaultNavClass =
-    'relative z-0 inline-flex flex-wrap justify-center rounded-md shadow-sm -space-x-px'
-  const defaultPreviousButtonClass =
-    'relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50'
-  const defaultNextButtonClass =
-    'relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50'
-  const defaultPageButtonClass =
-    'relative inline-flex items-center px-4 py-2 border bg-white border-gray-300 text-gray-500 hover:bg-gray-50 text-sm font-medium'
-  const defaultPageButtonActiveClass =
-    'z-10 bg-primary border-primary text-white relative inline-flex items-center px-4 py-2 border text-md font-semibold'
-  const defaultEllipsisClass =
-    'relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700'
-
-  return (
-    <div className={className || defaultContainerClass}>
-      <nav className={navClassName || defaultNavClass}>
-        {/* Previous Button */}
-        <button
-          onClick={handlePrevious}
-          disabled={currentPage === 1}
-          className={`${previousButtonClassName || defaultPreviousButtonClass} ${
-            currentPage === 1 ? 'opacity-50 cursor-not-allowed' : ''
-          }`}
-          aria-label="Previous page"
-        >
-          <svg
-            className="h-5 w-5"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              fillRule="evenodd"
-              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-              clipRule="evenodd"
-            />
-          </svg>
-        </button>
-
-        {/* Page Numbers */}
-        {pageNumbers.map((page, index) => {
-          if (page === '...') {
-            return (
-              <span key={`ellipsis-${index}`} className={ellipsisClassName || defaultEllipsisClass}>
-                ...
-              </span>
-            )
-          }
-
-          const isActive = page === currentPage
-
-          return (
-            <button
-              key={page}
-              onClick={() => handlePageClick(page)}
-              className={
-                isActive
-                  ? pageButtonActiveClassName || defaultPageButtonActiveClass
-                  : pageButtonClassName || defaultPageButtonClass
-              }
-              aria-label={`Page ${page}`}
-              aria-current={isActive ? 'page' : undefined}
-            >
-              {page}
-            </button>
-          )
-        })}
-
-        {/* Next Button */}
-        <button
-          onClick={handleNext}
-          disabled={currentPage === totalPages}
-          className={`${nextButtonClassName || defaultNextButtonClass} ${
-            currentPage === totalPages ? 'opacity-50 cursor-not-allowed' : ''
-          }`}
-          aria-label="Next page"
-        >
-          <svg
-            className="h-5 w-5"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              fillRule="evenodd"
-              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-              clipRule="evenodd"
-            />
-          </svg>
-        </button>
-      </nav>
-    </div>
-  )
-}
-
-export default Pagination

package/src/components/VideosGallery.jsx

@@ -1,121 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import FileUpload from './FileUpload'
-import ImagesSkeleton from './ImagesSkeleton'
-import Pagination from './Pagination'
-
-const VIDEO_MIME_TYPES = [
-  'video/mp4',
-  'video/quicktime',
-  'video/x-ms-wmv',
-  'video/h265',
-  'video/hevc',
-  'video/webm',
-]
-
-const VideosGallery = ({
-  update_data,
-  closePopup,
-  apiService,
-  onError,
-  // Styling props
-  className,
-  gridClassName,
-  videoItemClassName,
-  paginationContainerClassName,
-}) => {
-  const [videos, setVideos] = useState([])
-  const [total_count, setTotalCount] = useState(0)
-  const [currentPage, setCurrentPage] = useState(1)
-  const [isLoading, setISLoading] = useState(false)
-
-  // Fetch videos
-  useEffect(() => {
-    loadMedia()
-  }, [])
-
-  const loadMedia = async (page_number = 1) => {
-    try {
-      const response = await apiService.fetchMedia({
-        mimeTypes: VIDEO_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
-
-      setVideos(Array.isArray(mediaData) ? mediaData : [])
-      setTotalCount(count)
-      setCurrentPage(page_number)
-    } catch (error) {
-      console.error('Error loading videos:', error)
-      if (onError) {
-        onError(error)
-      }
-    }
-  }
-
-  const handleVideoClick = (video) => {
-    if (update_data) {
-      update_data(video.url || video)
-    }
-    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(180px),1fr))] gap-5'
-  const defaultVideoItemClass =
-    'cursor-pointer w-full h-40 object-contain 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="video/*"
-          title="Add Video"
-          apiService={apiService}
-          onUploadError={onError}
-        />
-
-        {isLoading ? (
-          <ImagesSkeleton />
-        ) : (
-          videos?.map((video, index) => {
-            const videoUrl = typeof video === 'string' ? video : video.url
-            const videoKey = video.id || video.url || index
-
-            return (
-              <video
-                key={videoKey}
-                onClick={() => handleVideoClick(video)}
-                className={videoItemClassName || defaultVideoItemClass}
-                controls
-                src={videoUrl}
-              />
-            )
-          })
-        )}
-      </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 VideosGallery