@spacemade/ui 0.0.1

package/src/helpers/date/index.ts

@@ -0,0 +1,149 @@
+export const stringToDate = (
+  dateString?: string | null
+): Date | null => {
+  if (!dateString) return null
+
+  const date = new Date(dateString)
+
+  return isNaN(date.getTime()) ? null : date
+}
+
+export const MonthAndYearDateFormat = (dateString?: string | null) => {
+  const date = stringToDate(dateString)
+
+  if (!date) return '—'
+
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+  }).format(date)
+}
+
+export const FullDateAndTimeFormat = (dateString?: string | null) => {
+  const date = stringToDate(dateString)
+
+  if (!date) return '—'
+
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: '2-digit',
+    hour: 'numeric',
+    minute: 'numeric',
+  }).format(date)
+}
+
+export const FullDateFormat = (
+  dateValue: string | number | null | undefined,
+  monthFormat: 'long' | 'short' = 'short'
+) => {
+  const date =
+    typeof dateValue === 'number'
+      ? new Date(dateValue)
+      : stringToDate(dateValue)
+
+  if (!date || isNaN(date.getTime())) return '—'
+
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: monthFormat,
+    day: '2-digit',
+  }).format(date)
+}
+
+
+export const GetCurrentMonthAndDay = () => {
+	const date = new Date()
+	return new Intl.DateTimeFormat('en-US', {
+		month: 'long',
+		day: '2-digit',
+	}).format(date)
+}
+
+export const TransformDateToUnixFormat = (date: string | Date) => {
+	const dateInstance = new Date(date)
+	// Get the Unix timestamp by calling getTime() and dividing by 1000 to convert milliseconds to seconds
+	const unixTimestamp = Math.floor(dateInstance.getTime() / 1000)
+	return unixTimestamp
+}
+
+export const getOrdinalSuffix = (day: number) => {
+  if (day >= 11 && day <= 13) {
+    return 'th';
+  }
+  switch (day % 10) {
+    case 1:
+      return 'st';
+    case 2:
+      return 'nd';
+    case 3:
+      return 'rd';
+    default:
+      return 'th';
+  }
+};
+
+export const formatDateWithOrdinal = (date: Date, includeYear = false) => {
+  const day = date.getDate();
+  const suffix = getOrdinalSuffix(day);
+  const month = new Intl.DateTimeFormat('en-US', { month: 'short' }).format(date);
+  return `${month} ${day}${suffix}${includeYear ? `, ${date.getFullYear()}` : ''}`;
+};
+
+export function isYesterday(checkDate: Date) {
+	const yesterday = new Date();
+	yesterday.setDate(yesterday.getDate() - 1);
+
+  return (
+    checkDate.getFullYear() === yesterday.getFullYear() &&
+    checkDate.getMonth() === yesterday.getMonth() &&
+    checkDate.getDate() === yesterday.getDate()
+  );
+}
+
+export function formatTimestamp(timestamp: number): string {
+  const now = new Date();
+  const inputDate = new Date(timestamp);
+
+  const isSameDay =
+    now.getDate() === inputDate.getDate() &&
+    now.getMonth() === inputDate.getMonth() &&
+    now.getFullYear() === inputDate.getFullYear();
+
+  if (isSameDay) {
+    // Same day, format as "hour:minute AM/PM"
+    const formattedTime = inputDate.toLocaleString('en-US', {
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true,
+    });
+
+    return formattedTime;
+
+  } else if (isYesterday(inputDate)) {
+    // Day before, format as "yesterday at hour:minute AM/PM"
+    const formattedTime = inputDate.toLocaleString('en-US', {
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true,
+    });
+    return `Yesterday at ${formattedTime}`;
+
+  } else {
+    // Any other day, format as "DayName month/day/year hour:minute AM/PM"
+    const formattedTime = inputDate.toLocaleString('en-US', {
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true,
+    });
+
+    const formattedDate = inputDate.toLocaleString('en-US', {
+      weekday: 'long',
+      month: 'numeric',
+      day: 'numeric',
+      year: 'numeric',
+    });
+
+    return `${formattedDate} ${formattedTime}`;
+  }
+}

package/src/helpers/error/formErrorHandler.tsx

@@ -0,0 +1,38 @@
+import { UseFormSetError } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+
+type ApiError = {
+	status?: HTTPErrorStatus
+	data?: {
+		message?: string
+	}
+	message?: string
+}
+
+export const formErrorHandler = (
+	error: ApiError,
+	setError?: UseFormSetError<any>
+) => {
+	const message = error?.data?.message || error?.message || DEFAULT_ERROR_MESSAGE
+
+	switch (error?.status) {
+		case HTTPErrorStatus.UNAUTHORIZED:
+		case HTTPErrorStatus.NOT_FOUND:
+		case HTTPErrorStatus.METHOD_NOT_ALLOWED:
+		case HTTPErrorStatus.CONFLICT:
+		case HTTPErrorStatus.UNPROCESSABLE_ENTITY:
+			toast.error(message)
+			break
+		case HTTPErrorStatus.FORBIDDEN:
+			// ignore forbidden error - it typically occurs when our security checks have not been satisfied.
+			break
+		default:
+			toast.error(DEFAULT_ERROR_MESSAGE)
+			break
+	}
+
+	setError &&
+		setError('server-error', { type: 'custom', message })
+}

package/src/helpers/images/assets.ts

@@ -0,0 +1,32 @@
+// Logos
+const SiteLogoIcon = '/images/logo/Osirus-Logo-Icon.svg'
+const OsirusHorizontalBlueLogo = '/images/logo/Osirus-Logo-Horizontal-Blue.svg'
+const AWSLogo = '/images/logo/AWS-Logo.png'
+const AmazonBedrockLogo = '/images/logo/Amazon-Bedrock-Logo.png'
+const AmazonSagemakerLogo = '/images/logo/Amazon-Sagemaker-Logo.png'
+const HuggingFaceLogo = '/images/logo/HuggingFace-Logo.png'
+const MLflowLogo = '/images/logo/MLflow-Logo.png'
+
+// Defaults
+const imageNotAvailable = '/images/default-profile/1.png'
+const defaultAvatar = '/images/defaults/default-avatar.png'
+const LoginPersonIconDark = '/images/defaults/Login-Person-Icon-dark.svg'
+const colorCirclePNG = '/images/defaults/osirus-circle-default.png'
+
+// Content
+const OsirusHeroHomepage = '/images/content/Osirus-Hero-Homepage.png'
+
+export {
+	imageNotAvailable,
+	defaultAvatar,
+	SiteLogoIcon,
+	LoginPersonIconDark,
+	colorCirclePNG,
+	AmazonBedrockLogo,
+	AmazonSagemakerLogo,
+	AWSLogo,
+	MLflowLogo,
+	OsirusHorizontalBlueLogo,
+	HuggingFaceLogo,
+	OsirusHeroHomepage,
+}

package/src/helpers/images/defaultProfileImage.ts

@@ -0,0 +1,21 @@
+const localStorageKey = 'default_image_path'
+const imagesAvailable = 7
+const defaultImage = '/images/default-profile/1.png'
+
+const getDefaultColoredImage = (): string => {
+	if (typeof window === 'undefined') return defaultImage
+	return localStorage.getItem(localStorageKey) || getRandomImage()
+}
+
+const setDefaultProfileImage = (): string => {
+	const path = getRandomImage()
+	localStorage.setItem(localStorageKey, path)
+	return getDefaultColoredImage() as string
+}
+
+export const getRandomImage = () => {
+	const getRandomNumber = Math.floor(Math.random() * imagesAvailable) + 1
+	return `/images/default-profile/${getRandomNumber}.png`
+}
+
+export { getDefaultColoredImage, setDefaultProfileImage }

package/src/helpers/images/fileType.ts

@@ -0,0 +1,123 @@
+import { MediaType } from '@store/model'
+
+export function isImageFile(file: File) {
+	const acceptedTypes = [
+		'image/jpeg',
+		'image/png',
+		'image/gif',
+		'image/svg+xml',
+		'image/webp',
+	]
+	return acceptedTypes.includes(file.type)
+}
+
+enum Icons {
+  file = 'bi bi-file-earmark',          // generic file
+  powerpoint = 'bi bi-filetype-ppt',    // PowerPoint
+  image = 'bi bi-file-image',           // image file
+  pdf = 'bi bi-filetype-pdf',           // PDF file
+  csv = 'bi bi-filetype-csv',           // CSV file
+}
+
+export function getIconMappedWithFileType(type: File['type']) {
+	type FileIconMap = {
+		[key: File['type']]: Icons
+	}
+
+	const fileIconMap: FileIconMap = {
+		// Images
+		'image/jpeg': Icons.image,
+		'image/png': Icons.image,
+		'image/gif': Icons.image,
+		'image/svg+xml': Icons.image,
+		'image/webp': Icons.image,
+
+		// Text
+		'text/plain': Icons.file,
+
+		// Word
+		'application/msword': Icons.file,
+		'application/vnd.ms-word': Icons.file,
+		'application/doc': Icons.file,
+		'application/docx': Icons.file,
+		'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+			Icons.file,
+		'application/x-msword': Icons.file,
+		'application/x-doc': Icons.file,
+		'application/x-docx': Icons.file,
+
+		// Excel
+		'application/vnd.ms-excel': Icons.csv,
+		'application/x-excel': Icons.csv,
+		'application/x-msexcel': Icons.csv,
+		'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+			Icons.csv,
+		'application/excel': Icons.csv,
+		'application/x-xls': Icons.csv,
+		'application/xlsx': Icons.csv,
+		'text/csv': Icons.csv,
+
+		// PowerPoint
+		'application/vnd.ms-powerpoint': Icons.powerpoint,
+		'application/x-powerpoint': Icons.powerpoint,
+		'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+			Icons.powerpoint,
+		'application/ppt': Icons.powerpoint,
+		'application/pptx': Icons.powerpoint,
+		'application/x-ppt': Icons.powerpoint,
+		'application/x-pptx': Icons.powerpoint,
+
+		// PDF
+		'application/pdf': Icons.pdf,
+
+		// Apple Pages
+		'application/vnd.apple.pages': Icons.file,
+		'application/x-iwork-pages-sffpages': Icons.file,
+
+		// Add more mappings for other file types as needed
+	}
+
+	return fileIconMap[type] || Icons.file
+}
+
+export const IMAGE_FILES_ACCEPTED = {
+	'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.svg', '.webp'],
+}
+
+export const CSV_FILES_ACCEPTED = {
+	'application/*': ['.xls', '.xlsx'],
+	'text/*': ['.csv'],
+}
+
+export const PDF_FILES_ACCEPTED = {
+	'application/*': ['.pdf'],
+}
+
+export const DOCUMENT_FILES_ACCEPTED = {
+	'application/*': ['.doc', '.docx', '.ppt', '.pptx', '.pages'],
+	'text/*': ['.txt'],
+}
+
+export const ALL_TYPE_OF_FILES_ACCEPTED = {
+	...IMAGE_FILES_ACCEPTED,
+	'application/*': [
+		...CSV_FILES_ACCEPTED['application/*'],
+		...PDF_FILES_ACCEPTED['application/*'],
+		...DOCUMENT_FILES_ACCEPTED['application/*'],
+	],
+	'text/*': [
+		...CSV_FILES_ACCEPTED['text/*'],
+		...DOCUMENT_FILES_ACCEPTED['text/*'],
+	],
+}
+
+export const getFileTypeAcceptedByMediaType = (type: MediaType) => {
+	const FILES_ACCEPTED_BY_TYPE = {
+		[MediaType.Image]: IMAGE_FILES_ACCEPTED,
+		[MediaType.CSV]: CSV_FILES_ACCEPTED,
+		[MediaType.PDF]: PDF_FILES_ACCEPTED,
+		[MediaType.Document]: DOCUMENT_FILES_ACCEPTED,
+	}
+
+	return FILES_ACCEPTED_BY_TYPE[type]
+}

package/src/helpers/images/index.ts

@@ -0,0 +1,3 @@
+export * from '@helpers/images/assets'
+export * from '@helpers/images/defaultProfileImage'
+export * from '@helpers/images/fileType'

package/src/helpers/navigation/routeScroll.ts

@@ -0,0 +1,29 @@
+export const scrollAppLayoutToTop = () => {
+  if (typeof window === 'undefined') return
+
+  window.scrollTo({ top: 0, left: 0, behavior: 'auto' })
+  document.documentElement.scrollTop = 0
+  document.body.scrollTop = 0
+
+  const mainContentArea = document.getElementById('mainContentArea')
+  const sideNavScroller = mainContentArea?.parentElement as HTMLElement | null
+  if (sideNavScroller) {
+    sideNavScroller.scrollTo({ top: 0, left: 0, behavior: 'auto' })
+    sideNavScroller.scrollTop = 0
+    return
+  }
+
+  const layoutScrollHost = Array.from(
+    document.querySelectorAll<HTMLElement>(
+      'div.flex-grow-1.d-flex.flex-column.align-items-center'
+    )
+  ).find((element) => {
+    const style = window.getComputedStyle(element)
+    return /auto|scroll/.test(style.overflowY)
+  })
+
+  if (layoutScrollHost) {
+    layoutScrollHost.scrollTo({ top: 0, left: 0, behavior: 'auto' })
+    layoutScrollHost.scrollTop = 0
+  }
+}

package/src/helpers/pageScreenshot.ts

@@ -0,0 +1,176 @@
+type CapturePageScreenshotOptions = {
+  maxWidth?: number;
+  maxHeight?: number;
+  quality?: number;
+  mimeType?: 'image/jpeg' | 'image/png' | 'image/webp';
+  maxDataUrlChars?: number;
+  timeoutMs?: number;
+};
+
+const DEFAULT_CAPTURE_OPTIONS: Required<CapturePageScreenshotOptions> = {
+  maxWidth: 960,
+  maxHeight: 540,
+  quality: 0.62,
+  mimeType: 'image/jpeg',
+  maxDataUrlChars: 1_100_000,
+  timeoutMs: 2200,
+};
+
+const sleep = (ms: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, Math.max(0, ms));
+  });
+
+function loadImage(url: string, timeoutMs: number): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    let done = false;
+    const timer = window.setTimeout(() => {
+      if (done) return;
+      done = true;
+      reject(new Error('Page screenshot load timeout'));
+    }, Math.max(200, timeoutMs));
+
+    image.onload = () => {
+      if (done) return;
+      done = true;
+      window.clearTimeout(timer);
+      resolve(image);
+    };
+    image.onerror = () => {
+      if (done) return;
+      done = true;
+      window.clearTimeout(timer);
+      reject(new Error('Page screenshot image load failed'));
+    };
+
+    image.src = url;
+  });
+}
+
+function isLikelyImageDataUrl(value: string): boolean {
+  return /^data:image\/(?:png|jpeg|jpg|webp);base64,[a-z0-9+/=\s]+$/i.test(
+    String(value || '').trim()
+  );
+}
+
+export async function captureCurrentPageScreenshotDataUrl(
+  options?: CapturePageScreenshotOptions
+): Promise<string | null> {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return null;
+
+  const merged: Required<CapturePageScreenshotOptions> = {
+    ...DEFAULT_CAPTURE_OPTIONS,
+    ...(options || {}),
+  };
+
+  const viewportWidth = Math.max(
+    320,
+    Math.floor(window.innerWidth || document.documentElement.clientWidth || 0)
+  );
+  const viewportHeight = Math.max(
+    240,
+    Math.floor(window.innerHeight || document.documentElement.clientHeight || 0)
+  );
+
+  const scale = Math.min(
+    1,
+    merged.maxWidth / viewportWidth,
+    merged.maxHeight / viewportHeight
+  );
+  const targetWidth = Math.max(320, Math.floor(viewportWidth * scale));
+  const targetHeight = Math.max(240, Math.floor(viewportHeight * scale));
+
+  const scrollX = Math.max(0, Math.floor(window.scrollX || window.pageXOffset || 0));
+  const scrollY = Math.max(0, Math.floor(window.scrollY || window.pageYOffset || 0));
+
+  const root = document.documentElement;
+  const clone = root.cloneNode(true) as HTMLElement;
+  clone.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+
+  const scriptNodes = clone.querySelectorAll('script,noscript');
+  scriptNodes.forEach((node) => node.remove());
+
+  const htmlStyle =
+    `margin:0!important;padding:0!important;` +
+    `width:${Math.max(root.scrollWidth, viewportWidth)}px!important;` +
+    `height:${Math.max(root.scrollHeight, viewportHeight)}px!important;`;
+  const bodyStyle =
+    `margin:0!important;` +
+    `transform:translate(${-scrollX}px,${-scrollY}px)!important;` +
+    `transform-origin:top left!important;`;
+  clone.style.cssText = `${clone.style.cssText || ''};${htmlStyle}`;
+  const body = clone.querySelector('body') as HTMLElement | null;
+  if (body) {
+    body.style.cssText = `${body.style.cssText || ''};${bodyStyle}`;
+  }
+
+  const serialized = new XMLSerializer().serializeToString(clone);
+  const svgMarkup =
+    `<svg xmlns="http://www.w3.org/2000/svg" ` +
+    `width="${viewportWidth}" height="${viewportHeight}" viewBox="0 0 ${viewportWidth} ${viewportHeight}">` +
+    `<foreignObject width="100%" height="100%">` +
+    `${serialized}` +
+    `</foreignObject>` +
+    `</svg>`;
+  const svgBlob = new Blob([svgMarkup], {
+    type: 'image/svg+xml;charset=utf-8',
+  });
+  const objectUrl = URL.createObjectURL(svgBlob);
+
+  try {
+    const image = await loadImage(objectUrl, merged.timeoutMs);
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return null;
+
+    const attempts = [1, 0.82, 0.67];
+    for (let idx = 0; idx < attempts.length; idx += 1) {
+      const attemptScale = attempts[idx];
+      canvas.width = Math.max(200, Math.floor(targetWidth * attemptScale));
+      canvas.height = Math.max(120, Math.floor(targetHeight * attemptScale));
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+      const quality = Math.max(0.35, merged.quality * Math.pow(0.86, idx));
+      const dataUrl = canvas.toDataURL(merged.mimeType, quality);
+      if (
+        isLikelyImageDataUrl(dataUrl) &&
+        dataUrl.length <= merged.maxDataUrlChars
+      ) {
+        return dataUrl;
+      }
+      await sleep(12);
+    }
+  } catch {
+    return null;
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+
+  return null;
+}
+
+export function buildPageContextSnapshot(args?: {
+  screenshotDataUrl?: string | null;
+}): {
+  url: string;
+  title: string;
+  capturedAt: string;
+  screenshotDataUrl?: string;
+} | null {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return null;
+  const url = String(window.location.href || '').trim();
+  const title = String(document.title || '').trim();
+  const capturedAt = new Date().toISOString();
+  const screenshotDataUrl = String(args?.screenshotDataUrl || '').trim();
+
+  if (!url && !title && !screenshotDataUrl) return null;
+  return {
+    url,
+    title,
+    capturedAt,
+    ...(isLikelyImageDataUrl(screenshotDataUrl) ? { screenshotDataUrl } : {}),
+  };
+}
+
+export type { CapturePageScreenshotOptions };