@spacemade/ui 0.0.1

package/src/components/marketplace/card/ProductCard.tsx

@@ -0,0 +1,178 @@
+/* eslint-disable @next/next/no-img-element */
+import React from 'react'
+import Link from 'next/link'
+import { SiteLogoIcon } from '@helpers/images'
+import { Product, EntityStatus } from '@store/model'
+
+interface ProductCardProps {
+  product: Product
+  basePath: string
+  customPath?: string
+  buttonLabel?: string
+  hideCta?: boolean
+  hideTitle?: boolean
+  hideIntro?: boolean
+  compact?: boolean
+  type?: string
+  status?: EntityStatus
+  src?: string
+  alt?: string
+  isLoggedIn?: boolean
+}
+
+export const ProductCard = ({
+  product,
+  basePath,
+  customPath,
+  buttonLabel,
+  hideCta = false,
+  hideTitle = false,
+  hideIntro = false,
+  compact = false,
+  type,
+  status,
+  src,
+  alt,
+  isLoggedIn = false,
+}: ProductCardProps) => {
+  const imgSrc =
+    src ||
+    product.productIconMedia?.media?.sourceUrl ||
+    SiteLogoIcon
+
+  const imgAlt =
+    alt || product.productIconMedia?.media?.details?.altText || 'Product Icon'
+
+  const safeSlug = encodeURIComponent(product.slug || String(product.id || 'item'))
+  const detailHref = customPath ?? `${basePath}/${safeSlug}`
+
+  const isSubscribed = (product as any).isSubscribed === true
+  const isConnected = (buttonLabel ?? '').toLowerCase() === 'connected'
+
+  let cta: React.ReactNode
+
+  if (isConnected) {
+    cta = (
+      <div className="btn btn-outline-success fw-semibold w-100 d-flex align-items-center justify-content-center">
+        <i className="bi bi-check-circle-fill text-success me-2" aria-hidden="true" />
+        Connected
+      </div>
+    )
+  } else if (isSubscribed) {
+    cta = (
+      <div className="btn btn-outline-success fw-semibold w-100 d-flex align-items-center justify-content-center">
+        <i className="bi bi-check-circle-fill text-success me-2" aria-hidden="true" />
+        Subscribed
+      </div>
+    )
+  } else if (buttonLabel) {
+    cta = <div className="btn btn-info fw-bold w-100 text-center">{buttonLabel}</div>
+  } else {
+    cta = <div className="btn btn-info fw-bold w-100 text-center">More Details</div>
+  }
+
+  const cardClasses = [
+    'card product-card position-relative h-100 text-center',
+    compact ? 'product-card--compact' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const cardBodyClasses = [
+    'card-body d-flex flex-column p-4',
+    compact ? 'product-card__body--compact' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const displayName = product.name?.trim() || 'Provider'
+
+  return (
+    <div className="col">
+      <div className={cardClasses}>
+        <div className={cardBodyClasses}>
+          {type && (
+            <div className="mb-3 d-flex justify-content-center">
+              <span className="badge bg-dark text-uppercase small">{type}</span>
+            </div>
+          )}
+
+          <img src={imgSrc} alt={imgAlt} className="product-card__img mb-4 mx-auto" />
+
+          {!hideTitle && <h2 className="h5 mb-3">{displayName}</h2>}
+          {!hideIntro && product.intro?.trim() && (
+            <p className="mb-4 flex-grow-1 text-truncate text-truncate--max-lines-4">
+              {product.intro}
+            </p>
+          )}
+
+          {!hideCta && <div>{cta}</div>}
+
+          {(type || status) && (
+            <div className="mt-3 d-flex justify-content-center gap-2 flex-wrap">
+              {status && (
+                <span
+                  className={`badge text-uppercase small ${
+                    status === EntityStatus.draft
+                      ? 'bg-warning text-dark'
+                      : 'bg-success text-white'
+                  }`}
+                >
+                  {status}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+
+        <Link
+          href={detailHref}
+          prefetch={false}
+          className="stretched-link"
+          aria-label={`View ${displayName}`}
+        >
+          <span aria-hidden="true" />
+        </Link>
+      </div>
+
+      <style jsx>{`
+        .product-card {
+          border: 1px solid #dee2e6;
+          border-radius: 0.75rem;
+          transition: all 0.2s ease-in-out;
+          background-color: #fff;
+        }
+        .product-card:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+          border-color: rgba(0, 0, 0, 0.2);
+        }
+        .product-card h2 {
+          transition: color 0.2s ease-in-out;
+        }
+        .product-card:hover h2 {
+          color: #096ef1ff;
+        }
+        .product-card__img {
+          max-width: 60px;
+          max-height: 60px;
+          object-fit: contain;
+          transition: transform 0.2s ease-in-out;
+        }
+        .product-card:hover .product-card__img {
+          transform: scale(1.05);
+        }
+        .product-card .card-body {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+        }
+        .product-card__body--compact {
+          min-height: 0;
+          justify-content: center;
+          gap: 0.75rem;
+        }
+      `}</style>
+    </div>
+  )
+}

package/src/components/media/blocks/MediaAttachmentsList.tsx

@@ -0,0 +1,79 @@
+import React, { useMemo } from 'react'
+import Link from 'next/link'
+import { AttachmentObjectTypes, MediaAttachment } from '@store/model'
+import { getAttachmentObjectNameAndLink } from '@components/media/items/MediaAttachmentLinks'
+
+export const MediaAttachmentsList = ({
+	attachments,
+}: {
+	attachments: MediaAttachment[]
+}) => {
+	const mediaForPosts = useMemo(
+		() =>
+			attachments.filter(
+				(att) => att.objectType === AttachmentObjectTypes.post
+			),
+		[attachments]
+	)
+	const mediaForUsers = useMemo(
+		() =>
+			attachments.filter(
+				(att) => att.objectType === AttachmentObjectTypes.user
+			),
+		[attachments]
+	)
+	const mediaForProducts = useMemo(
+		() =>
+			attachments.filter(
+				(att) => att.objectType === AttachmentObjectTypes.product
+			),
+		[attachments]
+	)
+
+	const List = ({
+		list,
+		title,
+	}: {
+		list: MediaAttachment[]
+		title: string
+	}) => (
+		<>
+			{list.length > 0 && (
+				<>
+					<h2 className='mt-3 mb-2 d-block small'>{title}</h2>
+					<hr className='text-light-gray opacity-100 my-0' />
+				</>
+			)}
+			<div className='w-100'>
+				{list.map((attachment, key) => {
+					const object = getAttachmentObjectNameAndLink(
+						attachment.object,
+						attachment.objectType
+					)
+
+					return (
+						<div className='border-bottom py-2' key={key}>
+							<Link
+								href={object?.url || ''}
+								className='d-flex align-items-center gap-2 text-primary small text-hover-medium-blue'
+								target='_blank'
+								rel='noopener noreferrer'
+							>
+								<span className='mb-0'>{object?.name}</span>
+								<span className='bi bi-box-arrow-up-right text-primary'></span>
+							</Link>
+						</div>
+					)
+				})}
+			</div>
+		</>
+	)
+
+	return (
+		<div>
+			<List list={mediaForPosts} title='Posts' />
+			<List list={mediaForUsers} title='Users' />
+			<List list={mediaForProducts} title='Products' />
+		</div>
+	)
+}

package/src/components/media/blocks/MediaDetails.tsx

@@ -0,0 +1,139 @@
+/* eslint-disable @next/next/no-img-element */
+import { Avatar, useDisclosure } from '@chakra-ui/react'
+import { toast } from 'react-toastify'
+import { Media, MediaType } from '@store/model'
+import { useBulkDeleteMediaMutation } from '@store/slice/api/mediaApiSlice'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Button from '@components/common/button/Button'
+import { MediaMiniForm } from '@components/media/form/MediaMiniForm'
+import { MediaAttachmentLinks } from '@components/media/items/MediaAttachmentLinks'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+import { bytesToSize } from '@helpers/data-transform'
+import { FullDateAndTimeFormat } from '@helpers/date'
+import { defaultAvatar } from '@helpers/images'
+import {
+	getFileExtension,
+	getUserNameFromUser,
+	truncateString,
+} from '@helpers/string'
+import { MediaBulkDeleteWarningModal } from '../modal/MediaBulkDeleteWarningModal'
+
+export const MediaDetails = ({
+	media,
+	showImagePreview,
+	includeUpdateForm,
+	includeDelete,
+	afterDelete,
+}: {
+	media: Media
+	showImagePreview?: boolean
+	includeUpdateForm?: boolean
+	includeDelete?: boolean
+	afterDelete?: (mediaDeleted: Media) => void
+}) => {
+	const [bulkDeleteMedia, { isLoading: isDeletingMedia }] =
+		useBulkDeleteMediaMutation()
+
+	const {
+		isOpen: isDialogOpen,
+		onOpen: onOpenDialog,
+		onClose: onCloseDialog,
+	} = useDisclosure()
+
+	const onDeleteMedia = async () => {
+		try {
+			await bulkDeleteMedia({ media: [media] }).unwrap()
+			toast.success('Your media has been deleted successfully')
+			afterDelete && afterDelete(media)
+		} catch (error) {
+			toast.error(DEFAULT_ERROR_MESSAGE)
+		}
+	}
+
+	return (
+		<div>
+			{showImagePreview && media.mediaType === MediaType.Image && (
+				<OptimizedImage
+					src={media.sourceUrl}
+					alt={media.name}
+					width={180}
+					height={180}
+					className='w-xs-180p img-fluid mb-4 preview-background'
+				/>
+			)}
+			<div className='d-flex gap-2 align-items-center mb-3'>
+				<Avatar
+					name={media.modifier?.name || '?'}
+					src={media.modifier?.profileMedia?.media.sourceUrl || defaultAvatar}
+				/>
+				<div>
+					<p className='mb-0'>
+						By{' '}
+						<span className='fw-bold'>
+							{media.modifier && getUserNameFromUser(media.modifier)}
+						</span>
+					</p>
+					<p className='mb-0'>
+						On <span>{FullDateAndTimeFormat(media.updatedAt)}</span>
+					</p>
+				</div>
+			</div>
+			{showImagePreview && (
+				<div className='d-flex gap-2 align-items-center mb-2'>
+					<p className='fw-bold mb-0'>Name:</p>
+					<p className='mb-0'>{truncateString(media.name, 30)}</p>
+				</div>
+			)}
+			<div className='d-flex gap-2 mb-2'>
+				<p className='fw-bold mb-0'>Uploaded To:</p>
+				<MediaAttachmentLinks attachments={media.mediaAttachments || []} />
+			</div>
+			<div className='d-flex gap-2 align-items-center mb-2'>
+				<p className='fw-bold mb-0'>File Type:</p>
+				<p className='mb-0 text-uppercase'>
+					{getFileExtension(media.sourceUrl)}
+				</p>
+			</div>
+			<div className='d-flex gap-2 align-items-center mb-2'>
+				<p className='fw-bold mb-0'>File Size:</p>
+				<p className='mb-0'>{bytesToSize(media.details?.fileSize || 0)}</p>
+			</div>
+			{media.details?.width && media.details?.height && (
+				<div className='d-flex gap-2 align-items-center mb-2'>
+					<p className='fw-bold mb-0'>Dimensions:</p>
+					<p className='mb-0'>
+						{media.details.width} x {media.details.height}
+					</p>
+				</div>
+			)}
+			{includeDelete && (
+				<>
+					<Button
+						type='button'
+						className='no-min-size w-xs-200p text-hover-white mt-2'
+						ariaLabel='Delete Media'
+						color='danger'
+						outline
+						spinnerColor='danger'
+						disabled={isDeletingMedia}
+						onClick={onOpenDialog}
+					>
+						Delete permanently
+					</Button>
+					<MediaBulkDeleteWarningModal
+						isOpen={isDialogOpen}
+						onClose={onCloseDialog}
+						mediaAssets={[media]}
+						onDelete={() => onDeleteMedia()}
+					/>
+				</>
+			)}
+			{includeUpdateForm && (
+				<>
+					<hr className='text-light-gray opacity-100' />
+					<MediaMiniForm key={media.id} media={media} />
+				</>
+			)}
+		</div>
+	)
+}

package/src/components/media/blocks/MediaGrid.tsx

@@ -0,0 +1,245 @@
+/* eslint-disable @next/next/no-img-element */
+import {
+	Dispatch,
+	SetStateAction,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react'
+import { useRouter } from '@lib/next-router'
+import isEmpty from 'lodash/isEmpty'
+import { isDesktop } from 'react-device-detect'
+import { Media, MediaType } from '@store/model'
+import { useGetInfinityMediaQuery } from '@store/slice/api/mediaApiSlice'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import InfinityScrollWrapper from '@components/common/blocks/InfinityScrollWrapper'
+import Spinner from '@components/common/loading/Spinner'
+import { MediaDetails } from '@components/media/blocks/MediaDetails'
+import { getIconMappedWithFileType } from '@helpers/images'
+import { truncateString } from '@helpers/string'
+
+type Props = {
+	type?: MediaType
+	canSelectMultiple?: boolean
+	nameLike?: string
+	ownerId?: string
+	date?: string
+	mode: 'list' | 'selection'
+	defaultItemsSelected?: Media[]
+	onSelectMedia?: Dispatch<SetStateAction<Media[]>>
+	externalPageState?: [number, Dispatch<SetStateAction<number>>]
+	topSpace?: number
+}
+
+export const MediaGrid = ({
+	type,
+	canSelectMultiple = false,
+	nameLike,
+	ownerId,
+	date,
+	mode,
+	defaultItemsSelected,
+	onSelectMedia,
+	externalPageState,
+	topSpace,
+}: Props) => {
+	const [externalPage, setExternalPage] = externalPageState || []
+	const { push: redirect } = useRouter()
+	const [itemsSelected, setItemsSelected] = useState<Media[]>(
+		defaultItemsSelected || []
+	)
+	const [page, setPage] = useState(1)
+	const { data, isLoading, isFetching } = useGetInfinityMediaQuery({
+		nameLike,
+		date,
+		type: type,
+		limit: 30,
+		ownerId,
+		selectedIds: defaultItemsSelected?.map((item) => item.id),
+		page: externalPage || page,
+	})
+
+	const containerRef = useRef<HTMLDivElement | null>(null)
+	const [isTopPosition, setIsTopPosition] = useState(true)
+
+	useEffect(() => {
+		if (!containerRef.current) return
+
+		const modalBody = containerRef.current.closest('#media-picker-modal-body')
+		if (!modalBody) return
+
+		const onScroll = (event: Event) => {
+			const position = (event.target as HTMLDivElement)?.scrollTop || 0
+			const PIXELS_TO_CHANGE_TO_POSITION_FIXED = 58
+			setIsTopPosition(position < PIXELS_TO_CHANGE_TO_POSITION_FIXED)
+		}
+
+		modalBody.addEventListener('scroll', onScroll)
+
+		return () => {
+			modalBody.removeEventListener('scroll', onScroll)
+		}
+	}, [])
+
+	const onMediaClick = (media: Media) => {
+		if (mode === 'list') {
+			redirect(`/admin/media/${media.id}`)
+			return
+		}
+
+		// Item is already selected. then remove from the list
+		if (itemsSelected.find((item) => item.id === media.id)) {
+			setItemsSelected((items) => items.filter((item) => item.id !== media.id))
+			onSelectMedia &&
+				onSelectMedia((items) => items.filter((item) => item.id !== media.id))
+			return
+		}
+
+		if (canSelectMultiple) {
+			setItemsSelected((items) => [...items, media])
+			onSelectMedia && onSelectMedia((items) => [...items, media])
+		} else {
+			setItemsSelected([media])
+			onSelectMedia && onSelectMedia([media])
+		}
+	}
+
+	const isItemSelected = useMemo(
+		() => !canSelectMultiple && itemsSelected[0] && mode === 'selection',
+		[canSelectMultiple, itemsSelected, mode]
+	)
+
+	const Grid = ({
+		items,
+		lastItemElementRef,
+		isFetching,
+	}: {
+		items: Media[]
+		isFetching?: boolean
+		lastItemElementRef?: (node: HTMLDivElement) => void
+	}) => (
+		<div className={`${topSpace ? `pt-${topSpace}` : ''} w-100`}>
+			<div
+				className={`d-flex gap-3 w-100 flex-wrap media-grid px-1 pb-3 mt-3 h-fit-content`}
+			>
+				{items.map((item, key) => (
+					<div
+						ref={items.length === key + 1 ? lastItemElementRef : null}
+						key={item.id}
+						className={`w-xs-150p h-xs-150p border rounded-md overflow-hidden pointer position-relative text-center ${
+							itemsSelected.find(
+								(itemSelected) => itemSelected.id === item.id
+							) && mode === 'selection'
+								? 'box-selected p-2'
+								: ''
+						}`}
+						onClick={() => onMediaClick(item)}
+					>
+						{item.mediaType === MediaType.Image ? (
+							<OptimizedImage
+								src={item.sourceUrl}
+								alt={item.details?.altText || ''}
+								width={150}
+								height={150}
+								className='object-fit-cover w-100 h-100 rounded-md'
+							/>
+						) : (
+							<div className='d-flex w-100 h-100 flex-column align-items-center justify-content-center'>
+								<span
+									className={`${getIconMappedWithFileType(
+										item.mimeType
+									)} fs-1`}
+								></span>
+								<span className='small pt-3 text-center'>
+									{truncateString(item.name, 20)}
+								</span>
+							</div>
+						)}
+						{itemsSelected.find(
+							(itemSelected) => itemSelected.id === item.id
+						) &&
+							mode === 'selection' && (
+								<>
+									<div className='position-absolute top-0 left-0 z-index-10 p-1'>
+										<span className='bi bi-check-circle fs-2 text-primary bg-white rounded-pill'></span>
+									</div>
+								</>
+							)}
+					</div>
+				))}
+				{isFetching && (
+					<div className='w-100 d-flex justify-content-center py-4'>
+						<Spinner color='primary' />
+					</div>
+				)}
+				{!isLoading && !isFetching && isEmpty(data?.results) && (
+					<div className='w-100 text-center mt-5'>
+						{nameLike || type || date || ownerId ? (
+							<p>{`There are no media to show that match your search`}</p>
+						) : (
+							<p>{`You don't have any media yet`}</p>
+						)}
+					</div>
+				)}
+			</div>
+		</div>
+	)
+
+	return (
+		<div
+			ref={containerRef}
+			className='d-flex gap-3 justify-content-between position-relative'
+		>
+			<div
+				style={{
+					width: isItemSelected && isDesktop ? `calc(100% - 450px)` : '100%',
+				}}
+			>
+				<InfinityScrollWrapper
+					Component={Grid}
+					props={{
+						items: data?.results || [],
+					}}
+					onLastItemIntersect={() => {
+						if (setExternalPage) {
+							setExternalPage((prev) => prev + 1)
+						} else {
+							setPage((prev) => prev + 1)
+						}
+					}}
+					isFetching={isFetching || isLoading}
+					hasNextPage={data?.next !== null}
+				/>
+			</div>
+			{isItemSelected && (
+				<div
+					className={`bg-white z-index-2 ${
+						isTopPosition
+							? 'position-absolute top-0 right-n1'
+							: 'position-fixed media-details-scroll-active-position right-1'
+					}`}
+				>
+					<div className='w-lg-450p border-start p-3 d-none d-lg-block h-fit-modal-body overflow-y-auto custom-scroll-bar'>
+						<h2 className='h5 mb-3'>Details</h2>
+						<MediaDetails
+							media={itemsSelected[0]}
+							showImagePreview
+							includeUpdateForm
+							includeDelete
+							afterDelete={(mediaDeleted) => {
+								setItemsSelected((items) =>
+									items.filter((item) => item.id !== mediaDeleted.id)
+								)
+								onSelectMedia &&
+									onSelectMedia((items) =>
+										items.filter((item) => item.id !== mediaDeleted.id)
+									)
+							}}
+						/>
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}