@spacemade/ui 0.0.1

package/src/components/media/form/MediaMiniForm.tsx

@@ -0,0 +1,105 @@
+import { useState } from 'react'
+import { FieldValues, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { Media } from '@store/model'
+import { useMediaStore } from '@hooks'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+
+interface FormValues extends FieldValues {
+	altText?: string
+	caption?: string
+	title?: string
+}
+
+export const MediaMiniForm = ({ media }: { media: Media }) => {
+	const { saveMedia } = useMediaStore()
+	const [isSubmitting, setIsSubmitting] = useState(false)
+
+	const {
+		register,
+		setError,
+		getValues,
+		clearErrors,
+		formState: { errors },
+	} = useForm<FormValues>({
+		defaultValues: {
+			altText: media.details?.altText || '',
+			caption: media.details?.caption || '',
+			title: media.details?.title || '',
+		},
+	})
+
+	const onSubmit = async () => {
+		try {
+			setIsSubmitting(true)
+			await saveMedia({
+				id: media.id,
+				altText: getValues('altText'),
+				caption: getValues('caption'),
+				title: getValues('title'),
+			})
+			toast.success('Your media has been saved successfully')
+		} catch (error: any) {
+			setError('server-error', { type: 'custom', message: 'server-error' })
+			toast.error(
+				error.status === HTTPErrorStatus.INTERNAL_SERVER_ERROR
+					? DEFAULT_ERROR_MESSAGE
+					: error.data.message
+			)
+		} finally {
+			setIsSubmitting(false)
+		}
+	}
+
+	return (
+		<div className='form'>
+			<div>
+				<Input
+					register={register('altText')}
+					errors={errors}
+					placeholder='Enter your alternative text'
+					label='Alternative Text'
+					helperText='Describe the purpose of the image. Leave empty if the image is purely decorative.'
+					getValues={getValues}
+				/>
+			</div>
+			<div className='mt-4'>
+				<Input
+					register={register('caption')}
+					errors={errors}
+					placeholder='Enter your caption'
+					label='Caption'
+					getValues={getValues}
+				/>
+			</div>
+			<div className='w-100 mt-4'>
+				<Input
+					register={register('title')}
+					errors={errors}
+					placeholder='Enter Your Media Title'
+					label='Title'
+					getValues={getValues}
+				/>
+			</div>
+			<div className='d-flex justify-content-end mt-4'>
+				<Button
+					type='submit'
+					className='text-white no-min-size px-4'
+					ariaLabel='Save Media'
+					color='primary'
+					isLoading={isSubmitting}
+					disabled={isSubmitting}
+					onClick={() => {
+						clearErrors(['server-error'])
+						onSubmit()
+					}}
+				>
+					Save
+				</Button>
+			</div>
+		</div>
+	)
+}

package/src/components/media/form/UpdateMediaForm.tsx

@@ -0,0 +1,209 @@
+/* eslint-disable @next/next/no-img-element */
+
+import { useDisclosure } from '@chakra-ui/react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { Media, MediaType } from '@store/model'
+import { useMediaStore } from '@hooks'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import AppPageTitle from '@components/common/header/AppPageTitle'
+import { MediaDetails } from '@components/media/blocks/MediaDetails'
+import { MediaSourcePreview } from '@components/media/items/MediaSourcePreview'
+import { AddMediaModal } from '@components/media/modal/AddMediaModal'
+import { MediaTableActions } from '@components/media/table/MediaTableActions'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { DEFAULT_ERROR_MESSAGE, SLUG_REGEX } from '@helpers/constants'
+
+interface FormValues extends FieldValues {
+	name: string
+	slug: string
+	alt_text?: string
+	caption?: string
+	title?: string
+}
+
+export const UpdateMediaForm = ({ media }: { media: Media }) => {
+	const { saveMedia, isMediaSlugAvailable } = useMediaStore()
+
+	const {
+		isOpen: isOpenAddMediaModal,
+		onOpen: onOpenAddMediaModal,
+		onClose: onCloseAddMediaModal,
+	} = useDisclosure()
+
+	const {
+		register,
+		handleSubmit,
+		setError,
+		getValues,
+		clearErrors,
+		formState: { errors, isSubmitting },
+	} = useForm<FormValues>({
+		defaultValues: {
+			name: media.name,
+			slug: media.slug,
+			altText: media.details?.altText || '',
+			caption: media.details?.caption || '',
+			title: media.details?.title || '',
+		},
+	})
+
+	const onSubmit: SubmitHandler<FormValues> = async (data) => {
+		try {
+			await saveMedia({
+				id: media.id,
+				name: data.name,
+				slug: data.slug,
+				altText: data.altText,
+				caption: data.caption,
+				title: data.title,
+			})
+			toast.success('Your media has been saved successfully')
+		} catch (error: any) {
+			setError('server-error', { type: 'custom', message: 'server-error' })
+			toast.error(
+				error.status === HTTPErrorStatus.INTERNAL_SERVER_ERROR
+					? DEFAULT_ERROR_MESSAGE
+					: error.data.message
+			)
+		}
+	}
+
+	return (
+		<>
+			<form onSubmit={handleSubmit(onSubmit)} className='pb-8 pb-lg-0'>
+				<div className='d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4 mt-3'>
+					<AppPageTitle title='Update Media' backUrl={`/admin/media`} />
+					<div className='d-flex justify-content-end btn-group-actions'>
+						<Button
+							type='submit'
+							className='text-white'
+							ariaLabel='Save Ad'
+							color='primary'
+							isLoading={isSubmitting}
+							disabled={isSubmitting}
+							onClick={() => clearErrors(['server-error'])}
+						>
+							Save
+						</Button>
+						<MediaTableActions
+							media={media}
+							btnBgColor='primary'
+							icon={<span className='bi bi-chevron-down'></span>}
+							textColor='white'
+							height={null}
+							skipEdit
+						/>
+					</div>
+				</div>
+				<div className='row mx-auto g-4 g-lg-5'>
+					<div className='col-lg-8 ps-lg-0'>
+						<div className='w-100 mt-4 mt-lg-0'>
+							<Input
+								register={register('name', {
+									required: 'This field is required',
+									minLength: {
+										value: 4,
+										message: 'Your name must have at least 4 characters',
+									},
+								})}
+								errors={errors}
+								placeholder='Enter Your Media Name'
+								label='Name'
+								getValues={getValues}
+							/>
+						</div>
+						<div className='mt-4'>
+							<Input
+								register={register('slug', {
+									required: 'This field is required',
+									pattern: {
+										value: SLUG_REGEX,
+										message:
+											'The slug must only contain lowercase letters, numbers, and hyphen',
+									},
+									minLength: {
+										value: 4,
+										message: 'Your media slug must have at least 4 characters',
+									},
+									validate: async (value) =>
+										await isMediaSlugAvailable(value, media),
+								})}
+								customErrorMessage='This slug is already taken'
+								errors={errors}
+								placeholder='Enter your media slug'
+								label='Slug'
+								getValues={getValues}
+							/>
+						</div>
+
+						<div className='mt-4'>
+							<h2 className='h5'>Preview:</h2>
+							<hr className='text-light-gray opacity-100' />
+							<MediaSourcePreview
+								key={media.id}
+								sourceUrl={media.sourceUrl}
+								type={media.mediaType}
+							/>
+						</div>
+
+						<Button
+							className='no-min-size border-light-gray w-md-140p mt-4 text-hover-white'
+							outline
+							color='primary'
+							onClick={onOpenAddMediaModal}
+						>
+							Edit
+						</Button>
+
+						{media.mediaType === MediaType.Image && (
+							<>
+								<div className='mt-4'>
+									<Input
+										register={register('altText')}
+										errors={errors}
+										placeholder='Enter your alternative text'
+										label='Alternative Text'
+										helperText='Describe the purpose of the image. Leave empty if the image is purely decorative.'
+										getValues={getValues}
+									/>
+								</div>
+								<div className='mt-4'>
+									<Input
+										register={register('caption')}
+										errors={errors}
+										placeholder='Enter your caption'
+										label='Caption'
+										getValues={getValues}
+									/>
+								</div>
+								<div className='w-100 mt-4'>
+									<Input
+										register={register('title')}
+										errors={errors}
+										placeholder='Enter Your Media Title'
+										label='Title'
+										getValues={getValues}
+									/>
+								</div>
+							</>
+						)}
+					</div>
+					<div className='col-lg-4 pe-lg-0'>
+						<div className='mb-3 bg-white border border-border-light-gray rounded-md p-3 mb-4'>
+							<h2 className='h5 mb-3'>Details</h2>
+							<MediaDetails media={media} />
+						</div>
+					</div>
+				</div>
+			</form>
+			<AddMediaModal
+				isOpen={isOpenAddMediaModal}
+				onClose={onCloseAddMediaModal}
+				allowMultiple={false}
+				media={media}
+			/>
+		</>
+	)
+}

package/src/components/media/items/CircleMediaPicker.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable @next/next/no-img-element */
+
+import { Dispatch, SetStateAction, useState } from 'react'
+import { useDisclosure } from '@chakra-ui/react'
+import { Media } from '@store/model'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Button from '@components/common/button/Button'
+import { MediaPickerModal } from '@components/media/modal/MediaPickerModal'
+import { defaultAvatar } from '@helpers/images'
+
+interface Props {
+	defaultMediaSelected?: Media | null
+	onSelectImage:
+		| Dispatch<SetStateAction<string | null>>
+		| ((mediaId: Media['id'] | null) => void)
+}
+
+export const CircleMediaPicker = ({
+	defaultMediaSelected,
+	onSelectImage,
+}: Props) => {
+	const [preview, setPreview] = useState<string | null>(
+		defaultMediaSelected?.sourceUrl || null
+	)
+	const [mediaSelected, setMediaSelected] = useState(defaultMediaSelected)
+
+	const {
+		isOpen: isOpenMediaModal,
+		onOpen: onOpenMediaModal,
+		onClose: onCloseMediaModal,
+	} = useDisclosure()
+
+	const onClearImageSelected = () => {
+		onSelectImage(null)
+		setPreview(null)
+	}
+
+	return (
+		<>
+			<div className='position-relative'>
+				<div className='circle-media-picker' onClick={onOpenMediaModal}>
+					<OptimizedImage
+						src={preview || defaultAvatar}
+						alt='avatar image'
+						width={200}
+						height={200}
+						className='object-fit-cover w-100 h-100 position-absolute top-0 left-0'
+					/>
+				</div>
+				{preview && (
+					<div className='position-absolute d-flex gap-2 z-index-10 bottom-0 right-0 mb-3'>
+						<Button
+							className='no-min-size text-white bg-danger rounded-pill shadow-lg'
+							ariaLabel='Clear drop zone'
+							color='none'
+							onClick={onClearImageSelected}
+						>
+							<span className='bi bi-x fs-4'></span>
+						</Button>
+					</div>
+				)}
+			</div>
+			<MediaPickerModal
+				key={mediaSelected?.id}
+				isOpen={isOpenMediaModal}
+				onClose={onCloseMediaModal}
+				defaultSelectedMedia={mediaSelected ? [mediaSelected] : undefined}
+				onMediaSelected={([media]) => {
+					setPreview(media.sourceUrl)
+					onSelectImage(media.id)
+					setMediaSelected(media)
+				}}
+			/>
+		</>
+	)
+}

package/src/components/media/items/MediaAttachmentLinks.tsx

@@ -0,0 +1,98 @@
+import { useMemo } from 'react'
+import Link from 'next/link'
+import { useDisclosure } from '@chakra-ui/react'
+import {
+	AttachmentObjectTypes,
+	MediaAttachment,
+	Post,
+	Product,
+	User,
+	Project
+} from '@store/model'
+import { MediaAttachmentsModal } from '@components/media/modal/MediaAttachmentsModal'
+import { truncateString } from '@helpers/string'
+
+export const MediaAttachmentLinks = ({
+	attachments,
+}: {
+	attachments: MediaAttachment[]
+}) => {
+	const firstAttachment = useMemo(
+		() =>
+			getAttachmentObjectNameAndLink(
+				attachments[0]?.object,
+				attachments[0]?.objectType
+			),
+		[attachments]
+	)
+
+	const { isOpen, onOpen, onClose } = useDisclosure()
+
+	return (
+		<div>
+			<Link
+				href={firstAttachment?.url || ''}
+				className='text-primary small-sm text-hover-medium-blue'
+				target='_blank'
+				rel='noopener noreferrer'
+			>
+				{truncateString(firstAttachment?.name, 20)}
+			</Link>
+			{attachments.length === 1 && (
+				<span className='bi bi-box-arrow-up-right small-sm ms-2 text-primary'></span>
+			)}
+			{attachments.length > 1 && (
+				<>
+					<span className='text-primary small-sm' onClick={onOpen}>
+						{', '}
+						and {attachments.length - 1} more.
+					</span>
+					<MediaAttachmentsModal
+						attachments={attachments}
+						isOpen={isOpen}
+						onClose={onClose}
+					/>
+				</>
+			)}
+		</div>
+	)
+}
+
+export const getAttachmentObjectNameAndLink = (
+	object: MediaAttachment['object'],
+	type: MediaAttachment['objectType'] | undefined
+) => {
+	if (!object) return
+
+	switch (type) {
+		case AttachmentObjectTypes.post:
+			const post = object as Post
+			return {
+				name: post.name,
+				url: `/admin/posts/${post.id}`,
+			}
+		case AttachmentObjectTypes.user:
+			const user = object as User
+			return {
+				name: user.name,
+				url: `/settings`,
+			}
+		case AttachmentObjectTypes.product:
+			const product = object as Product
+			return {
+				name: product.name,
+				url: `/admin/products/${product.id}`,
+			}
+		case AttachmentObjectTypes.project:
+			const project = object as Project
+			return {
+				name: project.name,
+				url: `/admin/projects/${project.id}`,
+			}
+		default:
+			return {
+				name: '',
+				url: '',
+			}
+	}
+}

package/src/components/media/items/MediaDocumentPreview.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react'
+import Spinner from '@components/common/loading/Spinner'
+
+export const MediaDocumentPreview = ({ sourceUrl }: { sourceUrl: string }) => {
+	const [isLoading, setIsLoading] = useState(true)
+	const [hasError, setHasError] = useState(false)
+
+	const handleLoad = () => {
+		setIsLoading(false)
+	}
+
+	const handleError = () => {
+		setIsLoading(false)
+		setHasError(true)
+	}
+
+	return (
+		<div>
+			{isLoading && (
+				<div className='d-flex justify-content-center align-items-center pt-4 flex-column'>
+					<Spinner />
+					<span className='pt-3 small'>Loading Preview</span>
+				</div>
+			)}
+			{hasError && (
+				<p className='text-danger'>{`We're sorry, the preview didn't load. Please refresh the page`}</p>
+			)}
+			{!hasError && (
+				<iframe
+					src={
+						'https://docs.google.com/viewer?url=' + sourceUrl + '&embedded=true'
+					}
+					title='File Preview'
+					width='100%'
+					height='600'
+					onLoad={handleLoad}
+					onError={handleError}
+					className={`${isLoading ? 'opacity-0' : ''}`}
+				></iframe>
+			)}
+		</div>
+	)
+}

package/src/components/media/items/MediaFileIcon.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable @next/next/no-img-element */
+import { MediaType } from '@store/model'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import { getIconMappedWithFileType } from '@helpers/images'
+
+export const MediaFileIcon = ({
+	type,
+	sourceUrl,
+	mimeType,
+}: {
+	type: string
+	sourceUrl?: string
+	mimeType: string
+}) => {
+	return (
+		<>
+			{type === MediaType.Image && sourceUrl ? (
+				<OptimizedImage
+					src={sourceUrl}
+					alt=''
+					width={65}
+					height={65}
+					className='object-fit-contain'
+				/>
+			) : (
+				<span className={`${getIconMappedWithFileType(mimeType)} fs-1`}></span>
+			)}
+		</>
+	)
+}

package/src/components/media/items/MediaPickerBox.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable @next/next/no-img-element */
+import { Dispatch, SetStateAction, useState } from 'react'
+import { useDisclosure } from '@chakra-ui/react'
+import { Media } from '@store/model'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Button from '@components/common/button/Button'
+import { MediaPickerModal } from '@components/media/modal/MediaPickerModal'
+
+export const MediaPickerBox = ({
+	label,
+	helperText,
+	defaultMediaSelected,
+	onSelectImage,
+}: {
+	label: string
+	helperText?: string
+	previewImage?: string
+	defaultMediaSelected?: Media
+	onSelectImage:
+		| Dispatch<SetStateAction<string | null>>
+		| ((
+				mediaId: Media['id'] | null,
+				previewSource: Media['sourceUrl'] | null
+		  ) => void)
+}) => {
+	const [mediaSelected, setMediaSelected] = useState(defaultMediaSelected)
+	const [preview, setPreview] = useState<string | null>(
+		defaultMediaSelected?.sourceUrl || null
+	)
+
+	const {
+		isOpen: isOpenMediaModal,
+		onOpen: onOpenMediaModal,
+		onClose: onCloseMediaModal,
+	} = useDisclosure()
+
+	const onClearImageSelected = () => {
+		onSelectImage(null, null)
+		setPreview(null)
+	}
+
+	return (
+		<>
+			<div className='position-relative h-xs-220p w-100'>
+				<button
+					type='button'
+					onClick={onOpenMediaModal}
+					className='border bg-transparent rounded-md p-3 d-flex align-items-center justify-content-center flex-column gap-2 h-100 w-100 overflow-hidden'
+				>
+					<span className='bi bi-image fs-6 d-block'></span>
+					<span>{label}</span>
+					<span className='d-block small'>{helperText}</span>
+					{preview && (
+						<div className='bg-white position-absolute top-0 left-0 bottom-0 right-0'>
+							<OptimizedImage
+								src={preview}
+								alt={mediaSelected?.details?.altText || ''}
+								width={500}
+								height={200}
+								className='object-fit-contain w-100 h-100 preview-background'
+							/>
+							<div className='bg-black-fade position-absolute bottom-0 left-0 right-0 z-index-10 p-2 text-start'>
+								<span className='text-white'>{label}</span>
+							</div>
+						</div>
+					)}
+				</button>
+				{preview && (
+					<div className='position-absolute d-flex gap-2 z-index-10 bottom-0 right-0'>
+						<Button
+							className='no-min-size text-white'
+							ariaLabel='Clear drop zone'
+							color='none'
+							onClick={onClearImageSelected}
+						>
+							<span className='bi bi-x fs-4'></span>
+						</Button>
+					</div>
+				)}
+			</div>
+			<MediaPickerModal
+				key={mediaSelected?.id}
+				isOpen={isOpenMediaModal}
+				onClose={onCloseMediaModal}
+				defaultSelectedMedia={mediaSelected ? [mediaSelected] : undefined}
+				onMediaSelected={([media]) => {
+					setPreview(media.sourceUrl)
+					onSelectImage(media.id, media.sourceUrl)
+					setMediaSelected(media)
+				}}
+			/>
+		</>
+	)
+}

package/src/components/media/items/MediaPickerButton.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable @next/next/no-img-element */
+import { useDisclosure } from '@chakra-ui/react'
+import { Media } from '@store/model'
+import Button from '@components/common/button/Button'
+import { MediaPickerModal } from '@components/media/modal/MediaPickerModal'
+
+export const MediaPickerButton = ({
+	onSelectImage,
+}: {
+	onSelectImage: (media: Media) => void
+}) => {
+	const {
+		isOpen: isOpenMediaModal,
+		onOpen: onOpenMediaModal,
+		onClose: onCloseMediaModal,
+	} = useDisclosure()
+
+	return (
+		<>
+			<Button
+				type='button'
+				className='border-light-gray text-hover-white float-end h-xs-40p'
+				ariaLabel='Add new media'
+				color='primary'
+				outline
+				onClick={onOpenMediaModal}
+			>
+				Add Media
+			</Button>
+			<MediaPickerModal
+				isOpen={isOpenMediaModal}
+				onClose={onCloseMediaModal}
+				onMediaSelected={([media]) => onSelectImage(media)}
+			/>
+		</>
+	)
+}