@spacemade/ui 0.0.1

package/src/components/media/table/MediaTableFilter.tsx

@@ -0,0 +1,163 @@
+import { Dispatch, SetStateAction, useCallback, useMemo } from 'react'
+import { useRouter } from '@lib/next-router'
+import { debounce } from 'lodash'
+import { FieldValues, useForm } from 'react-hook-form'
+import { MediaType } from '@store/model'
+import { useGetDateOptionsQuery } from '@store/slice/api/mediaApiSlice'
+import {
+	SearchState,
+	useSearchAndFilterCommon,
+	useAccountStore,
+} from '@hooks'
+import Input from '@components/common/forms/Input'
+import Select from '@components/common/forms/Select'
+import { OptionType } from '@helpers/types'
+
+interface FormValues extends FieldValues {
+	name: string
+	status: string
+	categoryId: string
+}
+
+export const MediaTableFilter = ({
+	onChangeFilter,
+	setSearchState,
+	hideTypeSearch = false,
+}: {
+	hideTypeSearch?: boolean
+	onChangeFilter?: () => void
+	setSearchState?: Dispatch<SetStateAction<SearchState>>
+}) => {
+	const {
+		query: { type, date, name },
+	} = useRouter()
+
+	const { user, userHasAdminRole } = useAccountStore()
+
+	const { updateURL } = useSearchAndFilterCommon()
+
+	const { data: dateOptions } = useGetDateOptionsQuery()
+
+	const { register, getValues, control } = useForm<FormValues>({
+		defaultValues: {
+			name: name?.toString() || '',
+			type: type?.toString() || 'all',
+			date: date?.toString() || 'all',
+		},
+	})
+
+	const nameFilterChangeHandler = () => {
+		const value = getValues('name').trim()
+		if (setSearchState) {
+			setSearchState((prev) => ({ ...prev, nameLike: value }))
+		} else {
+			updateURL('nameLike', value)
+		}
+		onChangeFilter && onChangeFilter()
+	}
+
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	const debouncedChangeNameHandler = useCallback(
+		debounce(nameFilterChangeHandler, 300),
+		[]
+	)
+
+	const mediaTypeOptions = useMemo(() => {
+		const options: OptionType[] = [
+			{
+				label: 'All Items',
+				value: 'all',
+			},
+			{
+				label: 'Images',
+				value: MediaType.Image,
+			},
+			{
+				label: 'Documents',
+				value: MediaType.Document,
+			},
+			{
+				label: 'Unattached',
+				value: 'unattached',
+			},
+		]
+
+		if (userHasAdminRole && user) {
+			options.push({
+				label: 'Mine',
+				value: user.id,
+			})
+		}
+
+		return options
+	}, [user, userHasAdminRole])
+
+	return (
+		<form
+			onSubmit={(e) => e.preventDefault()}
+			className='row row-cols-1 row-cols-md-3 g-3'
+		>
+			<div className='col'>
+				<Input
+					register={register('name')}
+					placeholder={`Enter media name to filter`}
+					label='Filter by name'
+					getValues={getValues}
+					onKeyUp={debouncedChangeNameHandler}
+				/>
+			</div>
+			{!hideTypeSearch && (
+				<div className='col'>
+					<Select
+						name='type'
+						label='Media Filter'
+						options={mediaTypeOptions}
+						control={control}
+						getValues={getValues}
+						onSelectChange={async (value) => {
+							const valueAsString = value?.toString()
+
+							if (
+								![...Object.values(MediaType), 'unattached'].includes(
+									valueAsString || ''
+								)
+							) {
+								await updateURL('ownerId', valueAsString)
+								await updateURL('type', undefined)
+							} else {
+								await updateURL('type', valueAsString)
+								await updateURL('ownerId', undefined)
+							}
+							onChangeFilter && onChangeFilter()
+						}}
+					/>
+				</div>
+			)}
+			<div className='col'>
+				<Select
+					name='date'
+					label='Date'
+					options={[
+						{
+							label: 'All Dates',
+							value: 'all',
+						},
+						...(dateOptions || []),
+					]}
+					control={control}
+					getValues={getValues}
+					onSelectChange={(value) => {
+						const valueAsString = value?.toString()
+
+						if (setSearchState) {
+							setSearchState((prev) => ({ ...prev, date: valueAsString }))
+						} else {
+							updateURL('date', valueAsString)
+						}
+						onChangeFilter && onChangeFilter()
+					}}
+				/>
+			</div>
+		</form>
+	)
+}

package/src/components/modules/module-card-grid.tsx

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+import { coreModuleDefs } from '@/config/modules'
+
+export function ModuleCardGrid() {
+  return (
+    <section className="row g-3 mt-1">
+      {coreModuleDefs.map((moduleDef) => (
+        <div className="col-sm-6 col-lg-4" key={moduleDef.key}>
+          <Link href={moduleDef.href} className="text-decoration-none text-dark">
+            <article className="border rounded p-3 h-100">
+              <h2 className="h6 mb-2">{moduleDef.title}</h2>
+              <p className="small text-muted mb-0">{moduleDef.description}</p>
+            </article>
+          </Link>
+        </div>
+      ))}
+    </section>
+  )
+}

package/src/components/modules/module-page.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react'
+
+type Props = {
+  eyebrow?: string
+  title: string
+  description?: string
+  bullets?: string[]
+  children?: ReactNode
+}
+
+export function ModulePage({ eyebrow, title, description, bullets = [], children }: Props) {
+  return (
+    <main className="container py-5">
+      {eyebrow ? <p className="text-uppercase small text-muted mb-2">{eyebrow}</p> : null}
+      <h1 className="h2 mb-2">{title}</h1>
+      {description ? <p className="text-muted mb-4">{description}</p> : null}
+      {bullets.length > 0 ? (
+        <ul className="mb-4">
+          {bullets.map((item) => (
+            <li key={item}>{item}</li>
+          ))}
+        </ul>
+      ) : null}
+      {children}
+    </main>
+  )
+}

package/src/components/modules/resource-page.tsx

@@ -0,0 +1,15 @@
+import { moduleDefs, type ModuleKey } from '@/config/modules'
+import { ModulePage } from '@/components/modules/module-page'
+
+export function ResourcePage({ moduleKey, bullets = [] }: { moduleKey: ModuleKey; bullets?: string[] }) {
+  const moduleDef = moduleDefs.find((m) => m.key === moduleKey)
+
+  return (
+    <ModulePage
+      eyebrow={moduleDef?.category === 'core' ? 'Core' : 'Module'}
+      title={moduleDef?.title || moduleKey}
+      description={moduleDef?.description || ''}
+      bullets={bullets}
+    />
+  )
+}

package/src/components/nav/AdminMobileMenu.tsx

@@ -0,0 +1,228 @@
+/* eslint-disable @next/next/no-img-element */
+import { useEffect } from 'react'
+import Link from 'next/link'
+import { useRouter } from '@lib/next-router'
+import {
+	Drawer,
+	DrawerBody,
+	DrawerContent,
+	DrawerHeader,
+	DrawerOverlay,
+} from '@chakra-ui/react'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Button from '@components/common/button/Button'
+import { defaultAvatar } from '@helpers/images'
+import { NavOption } from '@helpers/types'
+
+const NavOptions: NavOption[] = [
+	{
+		label: 'Console',
+		path: '/admin',
+	},
+	{
+		label: 'Products',
+		path: '/admin/products',
+		children: [
+			{
+				label: 'Plans',
+				path: '/admin/plans',
+			},
+			{
+				label: 'Versions',
+				path: '/admin/versions',
+			},
+		],
+	},
+	{
+		label: 'Coupons',
+		path: '/admin/coupons',
+	},
+	{
+		label: 'Providers',
+		path: '/admin/providers',
+	},
+	{
+		label: 'Posts',
+		path: '/admin/posts',
+	},
+	{
+		label: 'Categories',
+		path: '/admin/categories',
+	},
+	{
+		label: 'Tags',
+		path: '/admin/tags',
+	},
+	{
+		label: 'Orgs',
+		path: '/admin/orgs',
+	},
+	{
+		label: 'Users',
+		path: '/admin/users',
+	},
+	{
+		label: 'Activity',
+		path: '/admin/activity',
+	},
+	{
+		label: 'Activity Bans',
+		path: '/admin/activity/bans',
+	},
+	{
+		label: 'Security Settings',
+		path: '/admin/activity/settings',
+	},
+	{
+		label: 'Media',
+		path: '/admin/media',
+	},
+]
+
+export const AdminMobileMenu = ({
+	isOpen,
+	onClose,
+}: {
+	isOpen: boolean
+	onClose: () => void
+}) => {
+	const router = useRouter()
+	const { user, isConnected, signOut } = useUserAuthContext()
+
+	const onSignOut = async () => {
+		await signOut()
+		onClose()
+		router.reload()
+	}
+
+	const renderNavItem = (item: NavOption, key: number) => {
+		if (item.children?.length) {
+			return (
+				<li
+					key={key}
+					className='nav-item py-1 border-bottom border-light-gray mt-1'
+				>
+					<Link
+						href={item.path}
+						className='nav-link text-dark d-flex align-items-center justify-content-between px-0'
+					>
+						<span>{item.label}</span>
+						<span className='bi bi-chevron-right text-medium-gray'></span>
+					</Link>
+					<ul className='nav flex-column ps-3'>
+						{item.children.map((child, childKey) => (
+							<li key={childKey} className='nav-item py-1'>
+								<Link
+									href={child.path}
+									className='nav-link text-dark d-flex align-items-center justify-content-between px-0'
+								>
+									<span>{child.label}</span>
+									<span className='bi bi-chevron-right text-medium-gray'></span>
+								</Link>
+							</li>
+						))}
+					</ul>
+				</li>
+			)
+		}
+
+		return (
+			<li
+				key={key}
+				className='nav-item py-1 border-bottom border-light-gray mt-1'
+			>
+				<Link
+					href={item.path}
+					className='nav-link text-dark d-flex align-items-center justify-content-between px-0'
+				>
+					<span>{item.label}</span>
+					<span className='bi bi-chevron-right text-medium-gray'></span>
+				</Link>
+			</li>
+		)
+	}
+
+	useEffect(() => {
+		router.events.on('routeChangeStart', onClose)
+
+		return () => {
+			router.events.off('routeChangeStart', onClose)
+		}
+	}, [onClose, router])
+
+	return (
+		<Drawer isOpen={isOpen} onClose={onClose} size='xl'>
+			<DrawerOverlay />
+			<DrawerContent className='drawer bg-white'>
+				<DrawerHeader className='border-0'>
+					<div className='d-flex align-items-center justify-content-between'>
+						<Button
+							className='text-primary no-min-size p-0 me-4'
+							onClick={onClose}
+						>
+							<span className='bi bi-x fs-4'></span>
+						</Button>
+						{isConnected ? (
+							<Link href={`/admin/profile`} aria-label={'Link to My Profile'}>
+								<OptimizedImage
+									key={user?.profileMedia?.mediaId}
+									src={user?.profileMedia?.media.sourceUrl || defaultAvatar}
+									alt={user?.profileMedia?.media.details?.altText || ''}
+									width={35}
+									height={35}
+									className='rounded-circle object-fit-cover'
+								/>
+							</Link>
+						) : (
+							<Link
+								href='/login'
+								aria-label={'Link to Login'}
+								className='text-primary fs-5 fw-bold'
+							>
+								Login
+							</Link>
+						)}
+					</div>
+				</DrawerHeader>
+				<DrawerBody>
+					<ul className='nav flex-column'>
+						{NavOptions.map(renderNavItem)}
+						<span className='fw-bold mt-4'>Account</span>
+						<li
+							className='nav-item py-1 border-bottom border-light-gray mt-1'
+						>
+							<Link
+								href={'/admin/profile'}
+								className='nav-link text-dark d-flex align-items-center justify-content-between px-0'
+							>
+								<span>Profile</span>
+								<span className='bi bi-chevron-right text-medium-gray'></span>
+							</Link>
+						</li>
+						<li
+							className='nav-item py-1 border-bottom border-light-gray mt-1'
+						>
+							<Link
+								href={'/'}
+								className='nav-link text-dark d-flex align-items-center justify-content-between px-0'
+							>
+								<span>Public Website</span>
+								<span className='bi bi-chevron-right text-medium-gray'></span>
+							</Link>
+						</li>
+						<li className='py-2'>
+							<Button
+								ariaLabel='Log out'
+								className='d-block w-100 p-0 text-dark-900 text-start no-min-size'
+								onClick={onSignOut}
+							>
+								<span className='bi bi-box-arrow-right me-1'></span> Log Out
+							</Button>
+						</li>
+					</ul>
+				</DrawerBody>
+			</DrawerContent>
+		</Drawer>
+	)
+}

package/src/components/nav/AppTopNav.tsx

@@ -0,0 +1,53 @@
+/* eslint-disable @next/next/no-img-element */
+import { useRouter } from '@lib/next-router'
+import { useRouterContext } from '@context/RouterContext'
+import Button from '@components/common/button/Button'
+import { useDisclosure } from '@chakra-ui/react'
+import { AdminMobileMenu } from './AdminMobileMenu'
+
+export const AppTopNav = ({
+	pageTitle,
+} : {
+	pageTitle: string
+}) => {
+	const { push: redirect, route } = useRouter()
+	const { backUrl } = useRouterContext()
+
+	const {
+		isOpen: isOpenMenuMobile,
+		onToggle: onToggleMenuMobile,
+		onClose: onCloseMenuMobile,
+	} = useDisclosure()
+
+	return (
+		<div
+			className='container-fluid fixed-top bg-white px-0 mx-0 vw-100 border-bottom d-lg-none'
+			data-nav-status='toggle'
+		>
+			<nav className='top-nav d-flex align-items-center justify-content-between minh-xs-50p position-relative py-2'>
+				<Button
+					onClick={() => route !== '/' && redirect(backUrl)}
+					className={`no-min-size p-0 ms-2 w-xs-80p text-start ${
+						route === '/' ? 'opacity-0' : ''
+					}`}
+				>
+					<span className='bi bi-arrow-left fs-4'></span>
+				</Button>
+				<div className='w-xs-200p text-center'>
+					<h2 className='h6 fw-bold text-dark mb-0 text-truncate text-truncate--max-lines-2'>
+						{pageTitle}
+					</h2>
+				</div>
+				<div className='me-2 d-flex align-items-center justify-content-end gap-3 w-xs-80p'>
+					<Button className={`btn p-0 no-min-size`} onClick={onToggleMenuMobile}>
+						<span className='bi bi-list fs-4'></span>
+					</Button>
+					<AdminMobileMenu
+						isOpen={isOpenMenuMobile}
+						onClose={onCloseMenuMobile}
+					/>
+				</div>
+			</nav>
+		</div>
+	)
+}

package/src/components/nav/MobileMenu.tsx

@@ -0,0 +1,132 @@
+/* eslint-disable @next/next/no-img-element */
+import { Fragment, useEffect } from 'react'
+import Link from 'next/link'
+import { useRouter } from '@lib/next-router'
+import {
+	Drawer,
+	DrawerBody,
+	DrawerContent,
+	DrawerHeader,
+	DrawerOverlay,
+} from '@chakra-ui/react'
+import { XTwitterIcon } from '@components/common/Icons/XTwitterIcon'
+import Button from '@components/common/button/Button'
+import { OsirusHorizontalBlueLogo } from '@helpers/images'
+import { useNavOptions } from '@hooks'
+
+export const MobileMenu = ({
+	isOpen,
+	onClose,
+}: {
+	isOpen: boolean
+	onClose: () => void
+}) => {
+	const router = useRouter()
+	const { PLATFORM_OPTIONS } = useNavOptions()
+
+	useEffect(() => {
+		router.events.on('routeChangeStart', onClose)
+
+		return () => {
+			router.events.off('routeChangeStart', onClose)
+		}
+	}, [onClose, router])
+
+	return (
+		<Drawer isOpen={isOpen} onClose={onClose} size='xl'>
+			<DrawerOverlay />
+			<DrawerContent className='drawer bg-white'>
+				<DrawerHeader className='border-0'>
+					<div className='d-flex align-items-center justify-content-end'>
+						<Button
+							className='text-primary no-min-size p-0'
+							onClick={onClose}
+						>
+							<span className='bi bi-x fs-4'></span>
+						</Button>
+					</div>
+				</DrawerHeader>
+				<DrawerBody>
+					<span className='fw-bold lead'>Explore</span>
+					<ul className='nav flex-column'>
+						<li className='nav-item py-1 border-bottom border-light-gray mt-1'>
+							<Link
+								href='/marketplace'
+								className='nav-link text-dark d-flex align-items-center justify-content-between px-0'
+							>
+								<span>Marketplace</span>
+								<span className='bi bi-chevron-right text-medium-gray'></span>
+							</Link>
+						</li>
+						<li className='nav-item py-1 border-bottom border-light-gray mt-1'>
+							<Link
+								href='/pricing'
+								className='nav-link text-dark d-flex align-items-center justify-content-between px-0'
+							>
+								<span>Pricing</span>
+								<span className='bi bi-chevron-right text-medium-gray'></span>
+							</Link>
+						</li>
+						<li className='nav-item py-1 border-bottom border-light-gray mt-1'>
+							<Link
+								href='/blog'
+								className='nav-link text-dark d-flex align-items-center justify-content-between px-0'
+							>
+								<span>Blog</span>
+								<span className='bi bi-chevron-right text-medium-gray'></span>
+							</Link>
+						</li>
+					</ul>
+
+					<div className='d-block mt-7 align-self-center text-center'>
+						<span className='d-inline-block text-dark'>
+							<h2 className='d-flex flex-row mt-2'>
+								<img
+									src={OsirusHorizontalBlueLogo}
+									alt='Osirus AI Full Logo'
+									className='w-xs-200p'
+								/>
+							</h2>
+						</span>
+						<p className='text-medium-gray small'>
+							&copy;2023 Osirus AI. All rights reserved.
+						</p>
+					</div>
+
+					<ul className='list-inline social-buttons mt-5 align-self-center'>
+						<li className='list-inline-item'>
+							<a
+								href='#'
+								target='_blank'
+								rel='noopener noreferrer'
+								className='btn h-xs-40p w-xs-40p rounded-md text-white d-flex align-items-center justify-content-center bg-primary'
+							>
+								<span className='bi bi-instagram fs-4'></span>
+							</a>
+						</li>
+						<li className='list-inline-item'>
+							<a
+								href='#'
+								target='_blank'
+								rel='noopener noreferrer'
+								className='btn h-xs-40p w-xs-40p rounded-md text-white d-flex align-items-center justify-content-center bg-primary'
+							>
+								<XTwitterIcon width='15px' height='15px' />
+							</a>
+						</li>
+						<li className='list-inline-item'>
+							<a
+								href='#'
+								target='_blank'
+								rel='noopener noreferrer'
+								className='btn h-xs-40p w-xs-40p rounded-md text-white d-flex align-items-center justify-content-center bg-primary'
+							>
+								<span className='bi bi-facebook fs-4'></span>
+							</a>
+						</li>
+					</ul>
+				</DrawerBody>
+			</DrawerContent>
+		</Drawer>
+	)
+}