@spacemade/ui 0.0.1

package/src/components/head/PageSeo.tsx

@@ -0,0 +1,198 @@
+import {
+	ArticleJsonLd,
+	BreadcrumbJsonLd,
+	NewsArticleJsonLd,
+	NextSeo,
+} from 'next-seo'
+import { MetaTag, OpenGraph } from 'next-seo/lib/types'
+import { getUserNameFromUser } from '@helpers/string'
+import { PageProps } from '@helpers/types/page-props'
+
+const DEFAULT_BASE_URL = () => {
+	const configuredBaseUrl = process.env.NEXT_PUBLIC_SITE_URL || process.env.SITE_URL
+	if (configuredBaseUrl) return configuredBaseUrl.replace(/\/$/, '')
+	if (typeof window !== 'undefined') return window.location.origin
+	return 'http://localhost:3000'
+}
+
+const PageSeo = ({
+	title,
+	description,
+	furlImageUrl,
+	furlImageAltText,
+	articleProps,
+	profileProps,
+	breadcrumbSchema,
+}: {
+	title?: string
+	description?: string
+	furlImageUrl?: string
+	furlImageAltText?: string
+	articleProps?: PageProps['articleProps']
+	profileProps?: PageProps['profileProps']
+	breadcrumbSchema?: PageProps['breadcrumbSchema']
+}) => {
+	let writtenByMetaTags: MetaTag[] = []
+	if (articleProps?.author) {
+		writtenByMetaTags = [
+			{
+				name: 'twitter:label1',
+				content: 'Written by',
+			},
+			{
+				name: 'twitter:data1',
+				content: getUserNameFromUser(articleProps.author),
+			},
+		]
+	}
+
+	let articleReadTimeMetaTags: MetaTag[] = []
+	if (articleProps?.articleReadTime) {
+		articleReadTimeMetaTags = [
+			{
+				name: 'twitter:label2',
+				content: 'Est. reading time',
+			},
+			{
+				name: 'twitter:data2',
+				content: articleProps.articleReadTime,
+			},
+		]
+	}
+
+	let openGraphArticleProps: OpenGraph = {}
+	if (articleProps) {
+		openGraphArticleProps = {
+			type: 'article',
+			article: {
+				publishedTime: articleProps.publishedTime,
+				modifiedTime: articleProps.modifiedTime,
+				section: articleProps.categoryName,
+				authors: articleProps.author?.name
+					? [`${DEFAULT_BASE_URL()}/authors/@${articleProps.author.name}`]
+					: [],
+				tags: articleProps.tags,
+			},
+			images: furlImageUrl
+				? [
+					{
+						url: furlImageUrl,
+						width: 850,
+						height: 650,
+						alt: furlImageAltText || 'Social Media Image',
+					},
+				]
+				: [],
+		}
+	}
+
+	let openGraphProfileProps: OpenGraph = {}
+	if (profileProps) {
+		openGraphProfileProps = {   // ✅ this was openGraphArticleProps in your code
+			type: 'profile',
+			profile: {
+				firstName: profileProps.user.firstName || '',
+				lastName: profileProps.user.lastName || '',
+			},
+			images: furlImageUrl
+				? [{ url: furlImageUrl, width: 500, height: 500, alt: furlImageAltText || 'Social Media Image' }]
+				: [],
+		}
+	}
+
+	return (
+		<>
+			<NextSeo
+				title={title ? `${title}` : undefined}
+				description={description}
+				openGraph={{
+					title,
+					description,
+					images: furlImageUrl
+						? [
+							{
+								url: furlImageUrl,
+								alt: furlImageAltText || 'Social Media Image',
+							},
+						]
+						: undefined,
+					...openGraphArticleProps,
+					...openGraphProfileProps,
+				}}
+				additionalMetaTags={[...writtenByMetaTags, ...articleReadTimeMetaTags]}
+			/>
+
+			{articleProps && (
+				<>
+					{(() => {
+						const authorName =
+							getUserNameFromUser(articleProps.author as any) ||
+							articleProps.author?.name ||
+							'Unknown'
+
+						return (
+					<ArticleJsonLd
+						useAppDir={false}
+						url={`${DEFAULT_BASE_URL()}/${articleProps.articleSlug}`}
+						title={`${title}`}
+						images={furlImageUrl ? [furlImageUrl] : []}
+						datePublished={articleProps.publishedTime}
+						dateModified={articleProps.modifiedTime}
+						authorName={[authorName]}
+						publisherName="Osirus AI"
+						publisherLogo={DEFAULT_BASE_URL() + '/images/logo/Osirus-Logo-Horizontal.svg'}
+						description={description || ''}
+						isAccessibleForFree={true}
+					/>
+						)
+					})()}
+
+					{(() => {
+						const authorName =
+							getUserNameFromUser(articleProps.author as any) ||
+							articleProps.author?.name ||
+							'Unknown'
+
+						return (
+					<NewsArticleJsonLd
+						url={`${DEFAULT_BASE_URL()}/${articleProps.articleSlug}`}
+						title={`${title}`}
+						images={furlImageUrl ? [furlImageUrl] : []}
+						section={articleProps.categoryName || ''}
+						keywords={articleProps.tags.join(',')}
+						dateCreated={articleProps.publishedTime}
+						datePublished={articleProps.publishedTime}
+						dateModified={articleProps.modifiedTime}
+						authorName={authorName}
+						publisherName="Osirus AI"
+						publisherLogo={DEFAULT_BASE_URL() + '/images/logo/Osirus-Logo-Horizontal.svg'}
+						description={description || ''}
+						body={articleProps.content}
+						isAccessibleForFree={true}
+					/>
+						)
+					})()}
+				</>
+			)}
+
+			{breadcrumbSchema && (
+				<BreadcrumbJsonLd
+					itemListElements={[
+						{
+							position: 1,
+							name: 'Home',
+							item: DEFAULT_BASE_URL() || 'https://osirus.ai',
+						},
+						...breadcrumbSchema.map((item) => ({
+							position: item.position,
+							name: `${item.name}`,
+							item: `${DEFAULT_BASE_URL()}${item.item}`,
+						})),
+					]}
+				/>
+			)}
+		</>
+	)
+}
+
+export default PageSeo

package/src/components/hoc/WithAuth.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react'
+import type { NextPage } from 'next'
+import Link from 'next/link'
+import { useRouter } from '@lib/next-router'
+import { useAppSelector } from '@store/hooks'
+import { selectAccountState } from '@store/slice/api/accountSlice'
+import LoadingScreen from '@components/common/loading/LoadingScreen'
+import { PageProps } from '@helpers/types/page-props'
+
+interface WithAuthOptions {
+  needSystemAdminRole?: boolean
+}
+
+const WithAuth = (Component: NextPage<PageProps & any>, options?: WithAuthOptions) => {
+  const Auth = (props: JSX.IntrinsicAttributes) => {
+    const router = useRouter()
+    const { isDataLoaded, isConnected, user } = useAppSelector(selectAccountState)
+    const currentPath =
+      typeof router.asPath === 'string' && router.asPath.trim().length > 0
+        ? router.asPath
+        : '/'
+    const loginRedirect =
+      currentPath === '/' ? '/login' : `/login?redirect=${encodeURIComponent(currentPath)}`
+
+    // Keep a tiny "mounted" guard to avoid hydration flicker, but no timeout hacks
+    const [mounted, setMounted] = useState(false)
+    useEffect(() => setMounted(true), [])
+
+    if (!mounted) return <LoadingScreen />
+
+    // ✅ IMPORTANT: wait for account to load before deciding logged-out vs logged-in
+    if (!isDataLoaded) return <LoadingScreen />
+
+    // If user is not logged in (now it's safe to decide)
+    if (!isConnected) {
+      return (
+        <LoadingScreen
+          showMessage
+          showSpinner={false}
+          messageTitle='Please sign up to continue'
+          actionLabel='Sign Up'
+          action={() => router.push(`/signup`)}
+          bottomMessage={
+            <div className='d-flex gap-1'>
+              <span>{`Already have an account?`}</span>
+              <Link
+                href={loginRedirect}
+                className='text-decoration-underline text-dark fw-bold'
+              >
+                Login
+              </Link>
+            </div>
+          }
+        />
+      )
+    }
+
+    // ✅ Role check: use explicit safe capability from auth/user payload
+    if (options?.needSystemAdminRole && user?.isSystemAdmin !== true) {
+      return (
+        <LoadingScreen
+          showMessage
+          messageTitle='You do not have sufficient permission to access this page'
+          actionLabel='Go Back'
+          action={() => router.back()}
+          showSpinner={false}
+          showCancelAction={false}
+        />
+      )
+    }
+
+    return <Component {...(props as any)} />
+  }
+
+  if ((Component as any).getInitialProps) {
+    ;(Auth as any).getInitialProps = (Component as any).getInitialProps
+  }
+
+  return Auth
+}
+
+export default WithAuth

package/src/components/hoc/WithCustomerIO.tsx

@@ -0,0 +1,48 @@
+import type { NextPage } from 'next'
+import { publicRuntimeConfig } from '@config/runtime'
+import Script from 'next/script'
+import { AppEnvironments } from '@enum/AppEnvironments'
+
+const customerIOSiteId = process.env.NEXT_PUBLIC_CUSTOMER_IO_SITE_ID
+
+const WithCustomerIO = (Component: NextPage) => {
+	const CustomerIOComponent = (props: JSX.IntrinsicAttributes) => {
+		return (
+			<>
+				<Component {...props} />
+				{customerIOSiteId &&
+					publicRuntimeConfig.appEnvironment !== AppEnvironments.dev && (
+						<>
+							<Script id='init-customer-io'>
+								{`
+								var _cio = _cio || [];
+								(function() {
+									var a,b,c;a=function(f){return function(){_cio.push([f].
+									concat(Array.prototype.slice.call(arguments,0)))}};b=["load","identify",
+									"sidentify","track","page","on","off"];for(c=0;c<b.length;c++){_cio[b[c]]=a(b[c])};
+								})();
+							`}
+							</Script>
+							<Script
+								id='cio-tracker'
+								async
+								src='https://assets.customer.io/assets/track.js'
+								data-site-id={customerIOSiteId}
+								data-base-url='https://customerioforms.com'
+								data-use-array-params='true'
+								data-use-in-app='true'
+							></Script>
+						</>
+					)}
+			</>
+		)
+	}
+
+	if (Component.getInitialProps) {
+		CustomerIOComponent.getInitialProps = Component.getInitialProps
+	}
+
+	return CustomerIOComponent
+}
+
+export default WithCustomerIO

package/src/components/hoc/WithGTM.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from 'react'
+import type { NextPage } from 'next'
+import { publicRuntimeConfig } from '@config/runtime'
+import TagManager from 'react-gtm-module'
+import { AppEnvironments } from '@enum/AppEnvironments'
+
+const gtmId = process.env.NEXT_PUBLIC_GTM_ID
+
+const WithGTM = (Component: NextPage) => {
+	const GTMComponent = (props: JSX.IntrinsicAttributes) => {
+		useEffect(() => {
+			if (gtmId && publicRuntimeConfig.appEnvironment !== AppEnvironments.dev) {
+				TagManager.initialize({
+					gtmId,
+				})
+			}
+		}, [])
+
+    return (
+			<Component { ...props } />
+    )
+  }
+
+  if (Component.getInitialProps) {
+    GTMComponent.getInitialProps = Component.getInitialProps
+  }
+
+  return GTMComponent
+}
+
+export default WithGTM

package/src/components/hoc/WithGlobalContext.tsx

@@ -0,0 +1,30 @@
+import type { NextPage } from 'next'
+import { ToastContainer, Zoom } from 'react-toastify'
+import { RouterContextProvider } from '@context'
+import { UserAuthContextProvider } from '@context/UserAuthContext'
+
+const WithGlobalContext = (Component: NextPage) => {
+	const GlobalContextComponent = (props: JSX.IntrinsicAttributes) => {
+		return (
+			<UserAuthContextProvider>
+				<RouterContextProvider>
+					<Component {...props} />
+					<ToastContainer
+						hideProgressBar
+						position='bottom-right'
+						autoClose={4000}
+						transition={Zoom}
+					/>
+				</RouterContextProvider>
+			</UserAuthContextProvider>
+		)
+	}
+
+	if (Component.getInitialProps) {
+		GlobalContextComponent.getInitialProps = Component.getInitialProps
+	}
+
+	return GlobalContextComponent
+}
+
+export default WithGlobalContext

package/src/components/hoc/WithReCaptcha.tsx

@@ -0,0 +1,31 @@
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
+
+const reCaptchaSiteKey = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY
+export const isReCaptchaAvailable = !!reCaptchaSiteKey
+
+export enum ReCaptchaActions {
+	sign_in = 'sign_in',
+	sign_up = 'sign_up',
+	resend_verify_email = 'resend_verify_email',
+	reset_password = 'reset_password',
+	forgot_password = 'forgot_password',
+	project_invite = 'project_invite',
+	org_invite = 'org_invite',
+	contact_form_submit = 'contact_form_submit',
+}
+
+export const WithReCaptcha = <P extends Object>(
+	WrappedComponent: React.ComponentType<P>
+) => {
+	const ReCaptchaComponent: React.FC<P> = (props) => {
+		return (
+			<>
+				<GoogleReCaptchaProvider reCaptchaKey={reCaptchaSiteKey || ''}>
+					<WrappedComponent {...props} />
+				</GoogleReCaptchaProvider>
+			</>
+		)
+	}
+
+	return ReCaptchaComponent
+}

package/src/components/hoc/WithStripe.tsx

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react'
+import { Elements } from '@stripe/react-stripe-js'
+import { loadStripe } from '@stripe/stripe-js/pure'
+import { colors } from '@helpers/theme/colors'
+
+type WrappedComponentProps = {
+  clientSecret?: string
+} & Object
+
+// 🔧 Turn off telemetry / advanced fraud beacons from Stripe.js
+loadStripe.setLoadParameters({ advancedFraudSignals: false })
+
+// ⚠️ Create the promise ONCE at module scope (no reruns per render)
+const pk = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
+const stripePromise = pk ? loadStripe(pk) : null
+
+export const WithStripe = <P extends WrappedComponentProps>(
+  WrappedComponent: React.ComponentType<P>,
+) => {
+  const StripeComponent: React.FC<P> = (props) => {
+    // ✅ Hooks must come before any early returns
+    const elementsOptions = useMemo(() => {
+      const baseAppearance = {
+        theme: 'night' as const,
+        labels: 'floating' as const,
+        variables: {
+          colorPrimary: colors.primary,
+          colorBackground: colors.white,
+          colorDanger: colors.danger,
+          colorText: colors.dark,
+          fontFamily: 'Inter, Arial, sans-serif',
+          borderRadius: '12px',
+          spacingGridColumn: '1.5rem',
+          spacingGridRow: '1.5rem',
+          spacingTab: '.75rem',
+          tabIconHoverColor: colors.dark,
+        } as any,
+        rules: {
+          '.Input, .Tab, .PickerItem, .Block': {
+            boxShadow: 'none',
+            border: '1px solid #e2e2e4',
+          },
+          '.Tab': { color: colors.dark },
+          '.Input:focus, .Tab--selected': {
+            borderColor: 'rgba(0, 111, 229, 0.4)',
+            boxShadow:
+              '0px 2px 4px rgba(0, 111, 229, 0.5), 0 0 0 3px rgba(0, 111, 229, 0.5), 0 1px 1px 0 rgba(255, 255, 255, 0.12)',
+          },
+        },
+      }
+
+      return props.clientSecret
+        ? { clientSecret: props.clientSecret, appearance: baseAppearance }
+        : { appearance: baseAppearance }
+    }, [props.clientSecret])
+
+    // ✅ Early return is fine *after* hooks
+    if (!stripePromise) return null
+
+    return (
+      <Elements stripe={stripePromise} options={elementsOptions}>
+        <WrappedComponent {...props} />
+      </Elements>
+    )
+  }
+
+  return StripeComponent
+}

package/src/components/layout/SidebarSizer.tsx

@@ -0,0 +1,63 @@
+// components/layout/SidebarSizer.tsx
+import { useEffect, useRef } from 'react';
+
+type Props = {
+  /** optional: querySelector for a fixed top bar to subtract */
+  topSelector?: string;
+  /** optional: querySelector for a fixed bottom bar to subtract */
+  bottomSelector?: string;
+  /** optional: extra pixels to subtract (padding, borders, etc.) */
+  extraOffset?: number;
+  className?: string;
+  children: React.ReactNode;
+};
+
+export default function SidebarSizer({
+  topSelector = '[data-topnav]',
+  bottomSelector,
+  extraOffset = 0,
+  className,
+  children,
+}: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const getElH = (sel?: string) => {
+      if (!sel) return 0;
+      const node = document.querySelector<HTMLElement>(sel);
+      return node ? node.getBoundingClientRect().height : 0;
+    };
+
+    const setHeight = () => {
+      // Prefer visualViewport if available (mobile correctness)
+      const vh = window.visualViewport?.height ?? window.innerHeight;
+      const topH = getElH(topSelector);
+      const bottomH = getElH(bottomSelector);
+      const target = Math.max(0, vh - topH - bottomH - extraOffset);
+      el.style.height = `${target}px`;
+    };
+
+    setHeight();
+    const r = () => setHeight();
+
+    window.addEventListener('resize', r);
+    window.addEventListener('orientationchange', r);
+    // some mobile browsers change visualViewport height on scroll/zoom
+    window.visualViewport?.addEventListener('resize', r);
+
+    return () => {
+      window.removeEventListener('resize', r);
+      window.removeEventListener('orientationchange', r);
+      window.visualViewport?.removeEventListener('resize', r as EventListener);
+    };
+  }, [topSelector, bottomSelector, extraOffset]);
+
+  return (
+    <div ref={ref} className={className}>
+      {children}
+    </div>
+  );
+}

package/src/components/layout/app-left-nav.tsx

@@ -0,0 +1,31 @@
+import Link from 'next/link'
+
+const LINKS = [
+  { href: '/admin', label: 'Dashboard' },
+  { href: '/products', label: 'Products' },
+  { href: '/projects', label: 'Projects' },
+  { href: '/providers', label: 'Providers' },
+  { href: '/users', label: 'Users' },
+]
+
+export function AppLeftNav({ activeHref }: { activeHref?: string }) {
+  return (
+    <aside className="border-end pe-3" style={{ minWidth: 220 }}>
+      <ul className="list-unstyled mb-0 d-flex flex-column gap-2">
+        {LINKS.map((link) => {
+          const active = activeHref === link.href
+          return (
+            <li key={link.href}>
+              <Link
+                href={link.href}
+                className={`text-decoration-none ${active ? 'fw-bold text-dark' : 'text-muted'}`}
+              >
+                {link.label}
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+    </aside>
+  )
+}

package/src/components/layout/app-main-layout.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react'
+import { AppLeftNav } from '@/components/layout/app-left-nav'
+
+type Props = {
+  activeHref?: string
+  eyebrow?: string
+  title: string
+  description?: string
+  actions?: ReactNode
+  children?: ReactNode
+}
+
+export function AppMainLayout({
+  activeHref,
+  eyebrow,
+  title,
+  description,
+  actions,
+  children,
+}: Props) {
+  return (
+    <main className="container py-4">
+      <div className="row g-4">
+        <div className="col-lg-3">
+          <AppLeftNav activeHref={activeHref} />
+        </div>
+        <div className="col-lg-9">
+          <header className="mb-4">
+            {eyebrow ? <div className="text-uppercase small text-muted">{eyebrow}</div> : null}
+            <h1 className="h3 mb-2">{title}</h1>
+            {description ? <p className="text-muted mb-0">{description}</p> : null}
+            {actions ? <div className="mt-3">{actions}</div> : null}
+          </header>
+          {children}
+        </div>
+      </div>
+    </main>
+  )
+}

package/src/components/layout/site-footer.tsx

@@ -0,0 +1,11 @@
+import { appConfig } from '@/config/app'
+
+export function SiteFooter() {
+  return (
+    <footer className="border-top bg-white mt-5">
+      <div className="container py-3 small text-muted">
+        {appConfig.name} starter workspace
+      </div>
+    </footer>
+  )
+}

package/src/components/layout/site-header.tsx

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+import { appConfig } from '@/config/app'
+
+export function SiteHeader() {
+  return (
+    <header className="border-bottom bg-white">
+      <div className="container py-3 d-flex align-items-center justify-content-between">
+        <Link href="/" className="fw-bold text-decoration-none text-dark">
+          {appConfig.name}
+        </Link>
+        <nav className="d-flex gap-3">
+          <Link href="/pricing" className="text-decoration-none">Pricing</Link>
+          <Link href="/settings" className="text-decoration-none">Settings</Link>
+          <Link href="/admin" className="text-decoration-none">Admin</Link>
+        </nav>
+      </div>
+    </header>
+  )
+}