@spacemade/ui 0.0.1

package/src/hooks/product/useProductVersionStore.ts

@@ -0,0 +1,57 @@
+import { ProductVersion, ProductVersionPayload } from '@store/model'
+import {
+  useCreateProductVersionMutation,
+  useDeleteProductVersionMutation,
+  useLazyCheckProductVersionNameAvailabilityQuery,
+  useUpdateProductVersionMutation,
+} from '@store/slice/api/productVersionsApiSlice'
+
+export const useProductVersionStore = () => {
+  const [createProductVersion, { isLoading: isCreating }] = useCreateProductVersionMutation()
+  const [updateProductVersion, { isLoading: isUpdating }] = useUpdateProductVersionMutation()
+  const [deleteProductVersionMutation, { isLoading: isDeleting }] = useDeleteProductVersionMutation()
+  const [checkProductVersionNameAvailability] = useLazyCheckProductVersionNameAvailabilityQuery()
+
+  const saveProductVersion = async (isCreate: boolean, payload: ProductVersionPayload) => {
+    if (isCreate) {
+      return createProductVersion({ payload }).unwrap()
+    }
+
+    if (!payload.id) {
+      throw new Error('Product version id is required for update')
+    }
+
+    return updateProductVersion({
+      payload: {
+        ...payload,
+        id: payload.id,
+      },
+    }).unwrap()
+  }
+
+  const deleteProductVersion = async (id: string) => {
+    await deleteProductVersionMutation({ id }).unwrap()
+  }
+
+  const isProductVersionNameAvailable = async (
+    value: string,
+    productId: string,
+    version?: ProductVersion | null
+  ) => {
+    if (version && version.name.toLowerCase() === value.toLocaleLowerCase()) {
+      return true
+    }
+
+    const resp = await checkProductVersionNameAvailability({ value, productId }).unwrap()
+    return resp.isAvailable
+  }
+
+  return {
+    isCreating,
+    isUpdating,
+    isDeleting,
+    saveProductVersion,
+    deleteProductVersion,
+    isProductVersionNameAvailable,
+  }
+}

package/src/hooks/site/useSiteStore.ts

@@ -0,0 +1,53 @@
+import { Site, SitePayload } from '@store/model'
+import {
+	useCreateSiteMutation,
+	useDeleteSiteMutation,
+	useLazyCheckNameAvailabilityQuery,
+	useUpdateSiteMutation,
+} from '@store/slice/api/siteApiSlice'
+
+export const useSiteStore = () => {
+	const [createSite, { isLoading: isCreating }] =
+		useCreateSiteMutation()
+	const [updateSite, { isLoading: isUpdating }] =
+		useUpdateSiteMutation()
+	const [deleteSite, { isLoading: isDeleting }] =
+		useDeleteSiteMutation()
+
+	const [checkNameAvailabilityQuery] = useLazyCheckNameAvailabilityQuery()
+
+	const saveSite = async (isCreate: boolean, payload: SitePayload) => {
+		const site = isCreate
+			? await createSite({ payload }).unwrap()
+			: await updateSite({ payload }).unwrap()
+
+		return site
+	}
+
+	const removeSite = async (site: Site) => {
+		await deleteSite({ site }).unwrap()
+	}
+
+	const isSiteNameAvailable = async (
+		value: string,
+		site?: Site | null
+	) => {
+		if (site && site.name.toLowerCase() === value.toLocaleLowerCase()) {
+			return true
+		}
+
+		const resp = await checkNameAvailabilityQuery({ value }).unwrap()
+		return resp.isAvailable
+	}
+
+	return {
+		isCreating,
+		isUpdating,
+		isDeleting,
+
+		// Methods
+		saveSite,
+		removeSite,
+		isSiteNameAvailable,
+	}
+}

package/src/hooks/tag/useTagStore.ts

@@ -0,0 +1,65 @@
+import { Tag, TagPayload } from '@store/model'
+import {
+	useCreateTagMutation,
+	useDeleteTagMutation,
+	useLazyCheckTagSlugOrNameAvailabilityQuery,
+	useUpdateTagMutation,
+} from '@store/slice/api/tagsApiSlice'
+import { randomString } from '@helpers/string'
+
+export const useTagStore = () => {
+	const [createTag, { isLoading: isCreating }] = useCreateTagMutation()
+	const [updateTag, { isLoading: isUpdating }] = useUpdateTagMutation()
+	const [deleteTag, { isLoading: isDeleting }] = useDeleteTagMutation()
+	const [checkTagSlugOrNameAvailability] =
+		useLazyCheckTagSlugOrNameAvailabilityQuery()
+
+	const saveTag = async (isCreate: boolean, payload: TagPayload) => {
+		const tag = isCreate
+			? await createTag({ payload }).unwrap()
+			: await updateTag({ payload }).unwrap()
+
+		return tag
+	}
+
+	const removeTag = async (tag: Tag) => {
+		await deleteTag({ tag }).unwrap()
+	}
+
+	const isTagSlugOrNameAvailable = async (
+		value: string,
+		key: 'name' | 'slug',
+		tag?: Tag | null
+	) => {
+		if (tag && tag[key].toLowerCase() === value.toLocaleLowerCase()) {
+			return true
+		}
+
+		const resp = await checkTagSlugOrNameAvailability({ value, key }).unwrap()
+		return resp.isAvailable
+	}
+
+	const generateUniqueTagSlug = async (base: string) => {
+		let isAvailable = await isTagSlugOrNameAvailable(base, 'slug')
+		let name = base
+
+		while (!isAvailable) {
+			name = name + '-' + randomString()
+			isAvailable = await isTagSlugOrNameAvailable(name, 'slug')
+		}
+
+		return name
+	}
+
+	return {
+		isCreating,
+		isUpdating,
+		isDeleting,
+
+		// Methods
+		saveTag,
+		removeTag,
+		isTagSlugOrNameAvailable,
+		generateUniqueTagSlug,
+	}
+}

package/src/hooks/utils/useAutosizeTextArea.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+// Updates the height of a <textarea> when the value changes.
+export const useAutosizeTextArea = (
+  textAreaRef: HTMLTextAreaElement | null,
+  value: string
+) => {
+  useEffect(() => {
+    if (textAreaRef) {
+      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+      textAreaRef.style.height = '0px';
+      const scrollHeight = textAreaRef.scrollHeight;
+
+      // We then set the height directly, outside of the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      textAreaRef.style.height = scrollHeight + 'px';
+    }
+  }, [textAreaRef, value]);
+};
+

package/src/hooks/utils/useCountries.ts

@@ -0,0 +1,25 @@
+import { useMemo } from 'react'
+import * as Countries from 'countries-and-timezones'
+import type { Country, TimezoneName } from 'countries-and-timezones'
+
+export const useCountries = () => {
+	const countries = useMemo(() => {
+		const countriesData = Object.values(Countries.getAllCountries()) as Country[]
+
+		const timezone = Intl.DateTimeFormat().resolvedOptions()
+			.timeZone as TimezoneName
+		if (timezone) {
+			countriesData.sort(
+				(a, b) =>
+					(b.timezones.includes(timezone) ? 1 : 0) -
+					(a.timezones.includes(timezone) ? 1 : 0)
+			)
+		}
+
+		return countriesData
+	}, [])
+
+	return {
+		countries,
+	}
+}

package/src/hooks/utils/useGA4DataLayer.ts

@@ -0,0 +1,25 @@
+import { DataLayerEvents, DataLayerObject } from '@helpers/types/data-layer'
+
+declare global {
+	var dataLayer: DataLayerObject | undefined
+}
+
+export const useGA4DataLayer = () => {
+	const clearDataLayerPush = () => {
+		window.dataLayer?.push({
+			method: null,
+		}) // Clear the previous object.
+	}
+
+	const trackGA4PlatformEvent = (eventName: DataLayerEvents) => {
+		clearDataLayerPush()
+		window.dataLayer?.push({
+			event: eventName,
+			method: 'in_app',
+		})
+	}
+
+	return {
+		trackGA4PlatformEvent,
+	}
+}

package/src/hooks/utils/useNavOptions.ts

@@ -0,0 +1,241 @@
+'use client'
+
+import { useMemo } from 'react'
+import { usePathname } from 'next/navigation'
+import { NavOption } from '@helpers/types'
+import { useAccountStore } from '../auth/useAccountStore'
+import { useAppSelector } from '@store/hooks'
+import { selectAccountState } from '@store/slice/api/accountSlice'
+import { useListOrgsQuery } from '@store/slice/api/orgApiSlice'
+
+type NavSchema = {
+  [key: string]: NavOption[]
+}
+
+const ADMIN_LEFT_NAV_OPTIONS: NavSchema = {
+  Content_hide: [
+    {
+      label: 'Console',
+      path: '/admin',
+      icon: 'bi bi-speedometer2',
+    },
+  ],
+  Admin: [
+    {
+      label: 'Products',
+      path: '/admin/products',
+      icon: 'bi bi-cart',
+      hasChildrenRoutes: true,
+      children: [
+        {
+          label: 'Plans',
+          path: '/admin/plans',
+          icon: 'bi bi-stack',
+        },
+        {
+          label: 'Versions',
+          path: '/admin/versions',
+          icon: 'bi bi-boxes',
+          hasChildrenRoutes: true,
+        },
+      ],
+    },
+    {
+      label: 'Coupons',
+      path: '/admin/coupons',
+      icon: 'bi bi-ticket-perforated',
+    },
+    {
+      label: 'Entitlements',
+      path: '/admin/entitlements',
+      icon: 'bi bi-sliders',
+    },
+    {
+      label: 'Providers',
+      path: '/admin/providers',
+      icon: 'bi bi-building',
+      hasChildrenRoutes: true,
+    },
+  ],
+  Blog: [
+    {
+      label: 'Posts',
+      path: '/admin/posts',
+      icon: 'bi bi-journal-text',
+      hasChildrenRoutes: true,
+    },
+    {
+      label: 'Categories',
+      path: '/admin/categories',
+      icon: 'bi bi-bookmarks',
+    },
+    {
+      label: 'Tags',
+      path: '/admin/tags',
+      icon: 'bi bi-tags',
+    },
+    {
+      label: 'Media',
+      path: '/admin/media',
+      icon: 'bi bi-collection-play',
+      hasChildrenRoutes: true,
+    },
+  ],
+  App: [
+    {
+      label: 'Orgs',
+      path: '/admin/orgs',
+      icon: 'bi bi-building',
+      hasChildrenRoutes: true,
+    },
+    {
+      label: 'Users',
+      path: '/admin/users',
+      icon: 'bi bi-people',
+      hasChildrenRoutes: true,
+    },
+  ],
+  Security: [
+    {
+      label: 'Activity',
+      path: '/admin/activity',
+      icon: 'bi bi-activity',
+      hasChildrenRoutes: true,
+    },
+    {
+      label: 'Activity Bans',
+      path: '/admin/activity/bans',
+      icon: 'bi bi-shield-exclamation',
+      hasChildrenRoutes: true,
+    },
+    {
+      label: 'Settings',
+      path: '/admin/activity/settings',
+      icon: 'bi bi-sliders',
+      hasChildrenRoutes: true,
+    },
+  ],
+}
+
+const NAV_OPTIONS_FOR_ADMIN_LEFT_NAV_USER_MENU: NavOption[] = [
+  {
+    label: 'Public Website',
+    path: '/',
+    icon: 'bi bi-house',
+    isExternal: true,
+  },
+  {
+    label: 'Profile',
+    path: '/admin/profile',
+    icon: 'bi bi-person',
+  },
+]
+
+export const useNavOptions = () => {
+  const { userHasAdminRole, user } = useAccountStore()
+  const pathname = usePathname()
+  const { activeOrgId, isConnected, isDataLoaded } = useAppSelector(selectAccountState)
+  const isPublicAuthRoute =
+    pathname === '/' ||
+    pathname.startsWith('/login') ||
+    pathname.startsWith('/signup') ||
+    pathname.startsWith('/forgot') ||
+    pathname.startsWith('/reset') ||
+    pathname.startsWith('/update')
+  const { data: orgMemberships } = useListOrgsQuery(undefined, {
+    skip: !user?.id || !isConnected || !isDataLoaded || isPublicAuthRoute,
+  })
+
+  const isPersonalOrg = useMemo(() => {
+    if (!orgMemberships || !activeOrgId) return true
+    const activeMembership = orgMemberships.find((m) => m.orgId === activeOrgId)
+    const activeOrg = activeMembership?.org
+    return (
+      activeOrg?.orgType === 'personal' ||
+      (!!activeOrg?.slug && !!user?.name && activeOrg.slug === user.name)
+    )
+  }, [orgMemberships, activeOrgId, user?.name])
+
+  const isNavActive = (path: string, hasChildrenRoutes?: boolean) => {
+    return hasChildrenRoutes ? pathname.includes(path) : path === pathname
+  }
+
+  const personalOrg = useMemo(() => {
+    if (!orgMemberships) return null
+    return orgMemberships.find(
+      (m) =>
+        m.org?.orgType === 'personal' ||
+        (!!m.org?.slug && !!user?.name && m.org.slug === user.name)
+    ) || null
+  }, [orgMemberships, user?.name])
+
+  const personalProfilePath = !isPersonalOrg && personalOrg
+    ? `/org/${encodeURIComponent(personalOrg.org?.slug || personalOrg.org?.name || personalOrg.orgId)}/settings`
+    : '/settings/profile'
+
+  const USER_NAV_OPTIONS: NavOption[] = [
+    {
+      label: 'Profile',
+      path: personalProfilePath,
+      icon: 'bi bi-person',
+    },
+    {
+      label: 'Settings',
+      path: `/settings`,
+      icon: 'bi bi-gear',
+      isHidden: isPersonalOrg,
+    },
+    {
+      label: 'Organizations',
+      path: '/settings/organizations',
+      icon: 'bi bi-building',
+      isHidden: !isPersonalOrg,
+    },
+    {
+      label: 'Admin',
+      path: `/admin`,
+      isHidden: !userHasAdminRole,
+      icon: 'bi bi-shield-lock',
+    },
+  ]
+
+  const PLATFORM_OPTIONS: NavOption[] = []
+
+  const SETTINGS_NAV_OPTIONS: NavOption[] = [
+    {
+      label: 'Overview',
+      path: `/settings`,
+      icon: 'bi bi-gear',
+    },
+    {
+      label: 'Account',
+      path: `/settings/profile`,
+      icon: 'bi bi-person',
+    },
+    {
+      label: 'Sites',
+      path: `/settings/sites`,
+      icon: 'bi bi-globe',
+    },
+    {
+      label: 'Billing',
+      path: `/settings/billing`,
+      icon: 'bi bi-credit-card',
+    },
+  ]
+
+  return {
+    // Admin Options
+    ADMIN_LEFT_NAV_OPTIONS,
+    NAV_OPTIONS_FOR_ADMIN_LEFT_NAV_USER_MENU,
+
+    // User Options
+    USER_NAV_OPTIONS,
+
+    PLATFORM_OPTIONS,
+
+    SETTINGS_NAV_OPTIONS,
+
+    isNavActive,
+  }
+}

package/src/hooks/utils/useSearchAndFilterCommon.ts

@@ -0,0 +1,78 @@
+import { useState } from 'react'
+import { useRouter } from '@lib/next-router'
+import { EntityStatus } from '@store/model'
+import { getCorrectPageLimitNumber } from '@helpers/data-transform/paging'
+
+type Props = {
+  includePage?: boolean
+}
+
+export type SearchState = {
+  page?: number
+  limit?: number
+  status?: EntityStatus | undefined
+  nameLike?: string
+  categoryId?: string
+  date?: string
+}
+
+export const useSearchAndFilterCommon = ({ includePage = true }: Props = {}) => {
+  const { replace } = useRouter()
+
+  const [searchState, setSearchState] = useState<SearchState>({
+    page: 1,
+    limit: 10,
+    status: undefined,
+    nameLike: undefined,
+  })
+
+  const updateURL = async (key: string, value: string | undefined) => {
+    if (typeof window === 'undefined') return
+
+    const url = new URL(window.location.href)
+
+    if (value && value !== 'all') {
+      url.searchParams.set(key, value)
+      if (includePage) url.searchParams.set('page', '1')
+    } else {
+      url.searchParams.delete(key)
+    }
+
+    // use replace() to avoid stacking history entries for filter tweaks
+    await replace(url.href, undefined, { shallow: true })
+  }
+
+  const calculateProperPageNumber = (
+    page: number | string | string[] | undefined,
+    maxPagesCount?: number
+  ) => {
+    const pageNumber = Number(page)
+    if (isNaN(pageNumber) || pageNumber < 1) return 1
+    if (maxPagesCount && pageNumber > maxPagesCount) return maxPagesCount
+    return pageNumber
+  }
+
+  const calculatePageState = (
+    totalCount: number,
+    limit: number,
+    page: number | string | string[] | undefined
+  ) => {
+    const maxPagesCount = Math.max(1, Math.ceil(totalCount / limit))
+    const currentPage = calculateProperPageNumber(page, maxPagesCount)
+    return {
+      disabledPrev: currentPage <= 1,
+      disabledNext: currentPage >= maxPagesCount,
+      currentPageNumber: currentPage,
+      maxPagesCount,
+    }
+  }
+
+  return {
+    updateURL,
+    getLimitFromQuery: getCorrectPageLimitNumber,
+    calculateProperPageNumber,
+    calculatePageState,
+    searchState,
+    setSearchState,
+  }
+}

package/src/hooks/utils/useTrackingEvents.ts

@@ -0,0 +1,65 @@
+import {
+	browserName,
+	deviceType,
+	mobileModel,
+	mobileVendor,
+	osName,
+} from 'react-device-detect'
+import {
+	User,
+} from '@store/model'
+import { TransformDateToUnixFormat } from '@helpers/date'
+import { CustomerIO } from '@helpers/types/customer-io'
+
+declare global {
+	var _cio: CustomerIO | undefined
+}
+
+export const useTrackingEvents = () => {
+	const identifyUserForCustomerIO = (user: User, planName?: string) => {
+		window._cio?.identify({
+			id: user.id,
+			email: user.email,
+			name: user.name,
+			created_at: TransformDateToUnixFormat(user.createdAt),
+			first_name: user.firstName || 'No defined',
+			last_name: user.lastName || 'No defined',
+			profile_image_url: user.profileMedia?.media.sourceUrl || 'No defined',
+			...(planName !== undefined && { plan_name: planName }),
+		})
+	}
+
+	const clearCustomerIOSession = () => window._cio?.reset()
+
+	const trackPage = (url: string) =>
+		window._cio?.page(url, {
+			...generateDeviceTrackData(),
+		})
+
+	const trackEvent = (
+		eventName: string,
+		eventDetails: Object
+	) => {
+		// Customer.io
+		window._cio?.track(eventName, {
+			...generateDeviceTrackData(),
+			...eventDetails,
+		})
+	}
+
+	const generateDeviceTrackData = () => ({
+		browser_name: browserName,
+		os_name: osName,
+		device_type: deviceType,
+		mobile_model: mobileModel,
+		mobile_vendor: mobileVendor,
+	})
+
+	return {
+		CustomerIO: typeof window !== 'undefined' ? window._cio : undefined,
+		identifyUserForCustomerIO,
+		clearCustomerIOSession,
+		trackPage,
+		trackEvent,
+	}
+}

package/src/lib/app-paths.ts

@@ -0,0 +1,19 @@
+import { appConfig } from '../config/app'
+
+export const getAppBasePath = () => appConfig.basePath
+
+export const stripAppBasePath = (pathname: string) => {
+  const basePath = getAppBasePath()
+  if (!basePath) return pathname || '/'
+  if (pathname === basePath) return '/'
+  if (pathname.startsWith(`${basePath}/`)) {
+    return pathname.slice(basePath.length) || '/'
+  }
+  return pathname
+}
+
+export const isInsideAppBasePath = (pathname: string) => {
+  const basePath = getAppBasePath()
+  if (!basePath) return true
+  return pathname === basePath || pathname.startsWith(`${basePath}/`)
+}

package/src/lib/auth.ts

@@ -0,0 +1,42 @@
+import type { NextRequest } from 'next/server'
+
+import type { AppRole, OrgRole } from '../helpers/permissions'
+
+export type SessionSnapshot = {
+  userId: string | null
+  role: AppRole
+  orgRole: OrgRole
+  activeOrgId: string | null
+  activeProjectId: string | null
+}
+
+const toValue = (value: string | undefined | null) => {
+  const normalized = String(value || '').trim()
+  return normalized.length > 0 ? normalized : null
+}
+
+const normalizeRole = (value: string | null | undefined): AppRole => {
+  const role = String(value || process.env.NEXT_PUBLIC_DEFAULT_ROLE || 'anonymous').trim().toLowerCase()
+  if (role === 'owner' || role === 'admin' || role === 'editor' || role === 'viewer') return role
+  return 'anonymous'
+}
+
+const normalizeOrgRole = (value: string | null | undefined): OrgRole => {
+  const role = String(value || process.env.NEXT_PUBLIC_DEFAULT_ORG_ROLE || 'none').trim().toLowerCase()
+  if (role === 'owner' || role === 'admin' || role === 'member' || role === 'viewer') return role
+  return 'none'
+}
+
+export const readSessionFromRequest = (request: NextRequest): SessionSnapshot => {
+  const userId = toValue(request.cookies.get('osirax_user_id')?.value || process.env.NEXT_PUBLIC_DEFAULT_USER_ID)
+
+  return {
+    userId,
+    role: normalizeRole(request.cookies.get('osirax_role')?.value),
+    orgRole: normalizeOrgRole(request.cookies.get('osirax_org_role')?.value),
+    activeOrgId: toValue(request.cookies.get('osirax_active_org_id')?.value),
+    activeProjectId: toValue(request.cookies.get('osirax_active_project_id')?.value),
+  }
+}
+
+export const isAuthenticatedSession = (session: SessionSnapshot) => !!session.userId