@spacemade/ui 0.0.1

package/src/components/common/dialog/RenameDialog.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useRef } from 'react'
+import {
+	AlertDialog,
+	AlertDialogBody,
+	AlertDialogContent,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogOverlay,
+} from '@chakra-ui/react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+
+interface FormValues extends FieldValues {
+	name: string
+}
+
+export const RenameDialog = ({
+	isOpen,
+	onClose,
+	title,
+	entityDescription,
+	initialName,
+	placeholder = 'Name',
+	onRename,
+}: {
+	isOpen: boolean
+	onClose: () => void
+	title: string
+	entityDescription: string
+	initialName: string
+	placeholder?: string
+	onRename: (name: string) => Promise<void>
+}) => {
+	const cancelRef = useRef<HTMLButtonElement>(null)
+	const {
+		register,
+		handleSubmit,
+		reset,
+		getValues,
+		clearErrors,
+		formState: { errors, isSubmitting },
+	} = useForm<FormValues>({
+		defaultValues: {
+			name: initialName,
+		},
+	})
+
+	useEffect(() => {
+		if (!isOpen) return
+		reset({ name: initialName })
+	}, [initialName, isOpen, reset])
+
+	const onSubmit: SubmitHandler<FormValues> = async (data) => {
+		try {
+			await onRename(data.name.trim())
+			onClose()
+		} catch (error) {
+			toast.error(DEFAULT_ERROR_MESSAGE)
+		}
+	}
+
+	return (
+		<AlertDialog
+			isOpen={isOpen}
+			leastDestructiveRef={cancelRef}
+			onClose={onClose}
+			isCentered
+		>
+			<AlertDialogOverlay className='dialog'>
+				<AlertDialogContent>
+					<div className='w-xs-300p w-md-450p'>
+						<AlertDialogHeader>{title}</AlertDialogHeader>
+
+						<AlertDialogBody>
+							<form onSubmit={handleSubmit(onSubmit)}>
+								<Input
+									register={register('name', {
+										required: 'This field is required',
+										maxLength: {
+											value: 120,
+											message: `${entityDescription} cannot be longer than 120 characters`,
+										},
+										validate: (value) =>
+											value.trim().length >= 2 ||
+											`${entityDescription} must have at least 2 characters`,
+									})}
+									errors={errors}
+									placeholder={placeholder}
+									label='Name'
+									getValues={getValues}
+								/>
+							</form>
+						</AlertDialogBody>
+
+						<AlertDialogFooter className='d-flex justify-content-end gap-3'>
+							<Button
+								className='me-2'
+								ariaLabel='Close Rename Dialog'
+								buttonRef={cancelRef}
+								onClick={onClose}
+							>
+								Cancel
+							</Button>
+
+							<Button
+								className='text-white'
+								ariaLabel={`Rename ${entityDescription}`}
+								color='primary'
+								onClick={() => {
+									clearErrors('server-error')
+									handleSubmit(onSubmit)()
+								}}
+								isLoading={isSubmitting}
+								disabled={isSubmitting}
+							>
+								Rename
+							</Button>
+						</AlertDialogFooter>
+					</div>
+				</AlertDialogContent>
+			</AlertDialogOverlay>
+		</AlertDialog>
+	)
+}

package/src/components/common/faq/FAQSection.tsx

@@ -0,0 +1,119 @@
+import { ReactNode, useState } from 'react'
+import Link from 'next/link'
+
+export type FAQItem = {
+  question: string
+  answer: ReactNode
+}
+
+type FAQSectionProps = {
+  title: string
+  items: FAQItem[]
+  helpText?: string
+  helpHref?: string
+  defaultOpenIndex?: number | null
+}
+
+const FAQSection = ({
+  title,
+  items,
+  helpText = 'Still have questions?',
+  helpHref = '/contact',
+  defaultOpenIndex = 0,
+}: FAQSectionProps) => {
+  const [openIndex, setOpenIndex] = useState<number | null>(defaultOpenIndex)
+
+  if (!items.length) return null
+
+  return (
+    <section className="faq-section">
+      <h2>{title}</h2>
+      <div className="faq-list">
+        {items.map((item, index) => {
+          const isOpen = openIndex === index
+          return (
+            <article key={item.question} className="faq-item">
+              <button
+                type="button"
+                className="faq-question"
+                onClick={() => setOpenIndex(isOpen ? null : index)}
+                aria-expanded={isOpen}
+              >
+                <span>{item.question}</span>
+                <i className={`bi ${isOpen ? 'bi-chevron-up' : 'bi-chevron-down'}`} />
+              </button>
+              {isOpen ? <div className="faq-answer">{item.answer}</div> : null}
+            </article>
+          )
+        })}
+      </div>
+      <p className="faq-help">
+        {helpText}{' '}
+        <Link href={helpHref} className="faq-help-link">
+          We are here to help.
+        </Link>
+      </p>
+
+      <style jsx>{`
+        .faq-section {
+          padding: 2rem 1.2rem 1.4rem;
+          border-radius: 1.25rem;
+          background: #0d0f14;
+          color: #f2f4fb;
+          border: 1px solid rgba(255, 255, 255, 0.12);
+        }
+
+        .faq-section h2 {
+          margin: 0;
+          font-family: 'Cormorant Garamond', Georgia, serif;
+          font-size: clamp(2rem, 4.3vw, 3.8rem);
+          line-height: 0.98;
+          font-weight: 600;
+        }
+
+        .faq-list {
+          margin-top: 1rem;
+        }
+
+        .faq-item {
+          border-top: 1px solid rgba(255, 255, 255, 0.22);
+        }
+
+        .faq-question {
+          width: 100%;
+          border: none;
+          background: transparent;
+          color: #f2f4fb;
+          padding: 0.9rem 0;
+          font-size: clamp(1rem, 1.8vw, 1.25rem);
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          text-align: left;
+          gap: 0.5rem;
+        }
+
+        .faq-answer {
+          padding: 0 0 0.9rem;
+          color: rgba(242, 244, 251, 0.88);
+          line-height: 1.55;
+        }
+
+        .faq-help {
+          margin: 0.5rem 0 0;
+          color: rgba(242, 244, 251, 0.78);
+          font-size: 0.95rem;
+        }
+
+        :global(a.faq-help-link) {
+          color: #f6e97a !important;
+          font-weight: 700;
+          text-decoration: underline;
+        }
+      `}</style>
+    </section>
+  )
+}
+
+export default FAQSection

package/src/components/common/filters/NameSearch.tsx

@@ -0,0 +1,87 @@
+import { useCallback } from 'react'
+import { useRouter } from 'next/router'
+import { debounce } from 'lodash'
+import { FieldValues, useForm } from 'react-hook-form'
+import { useSearchAndFilterCommon } from '@hooks'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+
+interface FormValues extends FieldValues {
+	name: string
+}
+
+const NameSearch = ({
+	onSearchChange,
+	mode = 'light',
+	placeholder = 'Search by name',
+	skipUrlChange = false,
+}: {
+	onSearchChange?: (value: string) => void
+	mode?: 'light' | 'dark' | 'white'
+	placeholder?: string
+	skipUrlChange?: boolean
+}) => {
+	const {
+		query: { nameLike },
+	} = useRouter()
+	const { updateURL } = useSearchAndFilterCommon({ includePage: false })
+
+	const { register, getValues, setValue, watch } = useForm<FormValues>({
+		defaultValues: {
+			name: nameLike?.toString() || '',
+		},
+	})
+
+	const nameValue = watch('name')
+
+	const nameFilterChangeHandler = async () => {
+		const value = getValues('name').trim()
+
+		if (!skipUrlChange) {
+			await updateURL('nameLike', value)
+		}
+		onSearchChange && onSearchChange(value)
+	}
+
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	const debouncedChangeNameHandler = useCallback(
+		debounce(nameFilterChangeHandler, 300),
+		[]
+	)
+
+	return (
+		<div className='d-flex flex-column flex-md-row gap-2'>
+			<form
+				onSubmit={(e) => e.preventDefault()}
+				className='w-100 search-form position-relative'
+			>
+				<Input
+					register={register('name')}
+					placeholder={placeholder}
+					className={`w-100 h-xs-45p py-3 pe-3 input-${mode}`}
+					label='Search'
+					getValues={getValues}
+					onKeyUp={debouncedChangeNameHandler}
+				/>
+				<div className='position-absolute d-flex justify-content-center align-items-center z-index-1 h-100 px-3 left-0 top-0'>
+					<span className='text-medium-gray bibi-search rotate-90'></span>
+				</div>
+				{nameValue && (
+					<div className='position-absolute d-flex justify-content-center align-items-center z-index-1 h-100 px-3 right-0 top-0'>
+						<Button
+							className='no-min-size p-0'
+							onClick={() => {
+								setValue('name', '')
+								nameFilterChangeHandler()
+							}}
+						>
+							<span className='text-medium-gray bibi-x'></span>
+						</Button>
+					</div>
+				)}
+			</form>
+		</div>
+	)
+}
+
+export default NameSearch

package/src/components/common/footer/SmallFooter.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable @next/next/no-img-element */
+import Link from 'next/link'
+import { OsirusHorizontalBlueLogo } from '@helpers/images'
+
+const date = new Date();
+const year = date.getFullYear();
+
+export const SmallFooter = () => {
+	return (
+		<div className='bg-white py-3 footer'>
+			<div className='container'>
+				<nav className='d-lg-flex align-items-center justify-content-between'>
+					<Link
+						href='/'
+						className='navbar-brand w-xs-220p'
+						aria-label='Osirus AI home'
+					>
+						<img
+							alt='Osirus AI Logo'
+							src={OsirusHorizontalBlueLogo}
+							className='img-fluid h-xs-50p'
+						/>
+					</Link>
+					<ul className='navbar-nav d-flex flex-row align-items-center gap-4 pt-3 pt-lg-0'>
+						{/* <li className={`mb-0 navbar-item`}>
+							<Link
+								href='/origin-story'
+								aria-label='Origin Story'
+								className='text-dark fw-semibold'
+							>
+								Origin Story
+							</Link>
+						</li> */}
+						{/* {/* <li className={`mb-0 navbar-item`}>
+							<Link
+								href='/privacy'
+								aria-label='Link to Disclaimer'
+								className='text-dark fw-semibold'
+							>
+								Privacy
+							</Link>
+						</li> */}
+						<li className={`mb-0 navbar-item`}>
+							<Link
+								href='/pricing'
+								aria-label='Link to Pricing'
+								className='text-dark fw-semibold'
+							>
+								Pricing
+							</Link>
+						</li>
+					</ul>
+					<div className='w-xs-250p d-flex justify-content-lg-end pt-3 pt-lg-0'>
+						<p className='small mb-0'>
+							&copy;{year} Osirus AI. All rights reserved.
+						</p>
+					</div>
+				</nav>
+			</div>
+		</div>
+	)
+}

package/src/components/common/forms/AdvanceAccordion.tsx

@@ -0,0 +1,154 @@
+import { useState } from 'react'
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+} from '@chakra-ui/react'
+import { FieldValues, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+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 {
+  confirm: string
+}
+
+function getErrorMessage(err: unknown) {
+  // RTK Query error shape: { status, data: { message } } or { error: string }
+  if (err && typeof err === 'object') {
+    const anyErr = err as any
+    if (anyErr?.data?.message) return String(anyErr.data.message)
+    if (anyErr?.data?.error) return String(anyErr.data.error)
+    if (anyErr?.error) return String(anyErr.error)
+    if (anyErr?.message) return String(anyErr.message)
+    // Axios-ish: err.response?.data?.message
+    if (anyErr?.response?.data?.message) return String(anyErr.response.data.message)
+  }
+  if (typeof err === 'string') return err
+  try {
+    return JSON.stringify(err)
+  } catch {
+    return DEFAULT_ERROR_MESSAGE
+  }
+}
+
+const AdvanceAccordion = ({
+  objectName,
+  entityName,
+  onDelete,
+  children,
+  canDelete = true,
+  isUnableToDeleteMessage,
+}: {
+  objectName: string
+  entityName: string
+  onDelete: () => Promise<void>
+  children?: React.ReactNode
+  canDelete?: boolean
+  isUnableToDeleteMessage?: string
+}) => {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const {
+    register,
+    getValues,
+    setError,
+    clearErrors,
+    trigger,
+    formState: { errors },
+  } = useForm<FormValues>()
+
+  const onDeleteClick = async () => {
+    const isValid = await trigger()
+    if (!isValid) return
+
+    setIsSubmitting(true)
+    try {
+      await onDelete()
+      // success toast should be shown by caller if desired
+    } catch (err: any) {
+      // keep a generic server-error flag for the form
+      setError('server-error' as any, { type: 'custom', message: 'server-error' })
+
+      const status = err?.status
+      const msg =
+        status === HTTPErrorStatus.INTERNAL_SERVER_ERROR
+          ? DEFAULT_ERROR_MESSAGE
+          : getErrorMessage(err)
+
+      toast.error(msg)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <Accordion className='accordion-group' allowToggle>
+      <AccordionItem>
+        <AccordionButton>
+          <span className='text-dark'>
+            <span className='bi bi-gear me-2'></span> Advanced
+          </span>
+          <AccordionIcon />
+        </AccordionButton>
+        <AccordionPanel>
+          {children}
+
+          {!canDelete && (
+            <p className='text-danger'>{isUnableToDeleteMessage}</p>
+          )}
+          <div className={canDelete ? '' : 'opacity-3'}>
+            <h5>{`Are you sure you want to delete "${objectName}"?`}</h5>
+            <p className='text-danger'>
+              This action cannot be undone. This will permanently delete this {entityName} and all of its content.
+            </p>
+            <div className='form'>
+              <div className='d-flex form-group mw-md-550p'>
+                <div className='w-100'>
+                  <Input
+                    register={register('confirm', {
+                      required: 'This field is required',
+                      validate: (value) =>
+                        value === 'DELETE'
+                          ? undefined
+                          : 'Please confirm the action with word "DELETE"',
+                    })}
+                    errors={errors}
+                    placeholder='DELETE'
+                    label='Type DELETE to confirm'
+                    getValues={getValues}
+                    disabled={!canDelete}
+                  />
+                </div>
+                <div>
+                  <Button
+                    color='danger'
+                    ariaLabel='Delete item'
+                    className='text-white h-xs-70p rounded-left-none'
+                    isLoading={isSubmitting}
+                    disabled={isSubmitting || !canDelete}
+                    onClick={() => {
+                      if (canDelete) {
+                        clearErrors(['server-error' as any])
+                        onDeleteClick()
+                      }
+                    }}
+                  >
+                    <>
+                      <span className='bi bi-x me-2'></span> Delete
+                    </>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+
+export default AdvanceAccordion

package/src/components/common/forms/CheckBox.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Control, Controller } from 'react-hook-form'
+import { Checkbox } from '@chakra-ui/react'
+
+type Props = {
+	name: string
+	label: string
+	control: Control<any, any>
+}
+
+export const CheckBox = ({ control, name, label } : Props) => {
+	return (
+		<Controller
+			control={ control }
+			name={ name }
+			defaultValue={ false }
+			render={({ field: { onChange, value, ref } }) => (
+				<Checkbox
+					className='checkbox-lg'
+					onChange={onChange}
+					ref={ref}
+					isChecked={value}
+				>
+					{ label }
+				</Checkbox>
+			)}
+		/>
+	)
+}

package/src/components/common/forms/DateTimePicker.tsx

@@ -0,0 +1,101 @@
+import { useState, useRef } from 'react'
+import { Tooltip } from '@chakra-ui/react'
+import Flatpickr from 'react-flatpickr'
+import { Control, Controller, UseFormGetValues, FieldErrors, FieldValues, UseFormSetValue, UseFormRegisterReturn } from 'react-hook-form'
+import Button from '@components/common/button/Button'
+
+interface DateTimePickerProps {
+	register: UseFormRegisterReturn<string>
+	label: string
+	control: Control<any, any>
+	getValues: UseFormGetValues<any>
+	onDateChange?: (value: Date[] | undefined) => void
+	errors?: FieldErrors<FieldValues>
+	customErrorMessage?: string
+	helperText?: string
+	includeClearButton?: boolean
+	enableTime?: boolean
+	minDate?: Date
+	maxDate?: Date
+	setValue: UseFormSetValue<any>
+}
+
+const DateTimePicker = ({
+	register: { ref: refRegister, ...register},
+	label,
+	control,
+	getValues,
+	setValue,
+	onDateChange,
+	errors,
+	customErrorMessage,
+	helperText,
+	minDate,
+	maxDate,
+	includeClearButton = true,
+	enableTime = true,
+} : DateTimePickerProps) => {
+	const refComp = useRef<Flatpickr|null>(null);
+	const [isLabelFloating, setIsLabelFloating] = useState(!!getValues(register.name))
+	const [isFocus, setIsFocus] = useState(false)
+
+	const error = errors ? errors[register.name || ''] : null
+	const message = error ? (error.message || customErrorMessage) : null
+
+	const clearDate = () => {
+		refComp.current?.flatpickr.clear()
+		setValue(register.name, null)
+	}
+
+	return (
+		<div className={`field-container field-container--${ (isFocus || isLabelFloating) ? 'labelFloating' : 'labelResting' } ${ message ? 'is-invalid' : ''}`}>
+			<label htmlFor={ register.name } className={`field-label ${ ( !isLabelFloating ? 'field-label--empty' : '' ) } field-label--${ isFocus ? 'floating' : 'resting' }`}>{ label }</label>
+				<Controller
+					name={ register.name }
+					control={ control }
+					render={({ field: { value, onChange, onBlur } }) => {
+						return (
+							<div className='d-flex'>
+								<Flatpickr
+									ref={(e) => {
+										refRegister(e)
+										refComp.current = e
+									}}
+									{ ...register }
+									value={ value }
+									onChange={ date => {
+										onChange(date)
+										setIsLabelFloating(true)
+										onDateChange && onDateChange(date)
+									} }
+									className={`Input ${ isFocus ? 'Input--focused' : '' } ${ includeClearButton ? 'rounded-right-none' : '' } `}
+									onFocus={ () => setIsFocus(true) }
+									onBlur={ (e) => {
+										onBlur()
+										setIsFocus(false)
+									}}
+									data-enable-time={ enableTime }
+									options={{
+										minDate,
+										maxDate,
+										dateFormat: enableTime ? 'F d, Y at h:i K' : 'F d, Y'
+									}}
+								/>
+								{ includeClearButton && (
+									<Button className='no-min-size btn-lg p-0 border-light-gray rounded-left-none' onClick={ clearDate } disabled={ !value }>
+										<Tooltip className='tooltip tooltip-md' label={'Clear Date'} hasArrow placement='top' fontSize='md' mb='6'>
+											<span className='bi bi-x h-xs-45p w-xs-45p d-flex align-items-center justify-content-center border-left rounded-none'></span>
+										</Tooltip>
+									</Button>
+								)}
+							</div>
+						)
+					}}
+				/>
+			{ message && <span className='invalid-feedback'>{`${ message }`}</span> }
+			{ helperText && <span className='small d-block mt-2'>{ helperText }</span> }
+		</div>
+	)
+}
+
+export default DateTimePicker