@spacemade/ui 0.0.1

package/src/pages/users/index.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+import { useEffect, useMemo } from 'react'
+import { useRouter } from 'next/router'
+import { useDisclosure } from '@chakra-ui/react'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import WithAuth from '@components/hoc/WithAuth'
+import UserGrid from '@components/user/grid/UserGrid'
+import AddUserModal from '@components/user/modal/AddUserModal'
+import UpgradeUserLimitModal from '@components/user/modal/UpgradeUserLimitModal'
+import { UpdatePlanModal } from '@components/billing/modal/UpdatePlanModal'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import { useListOrgsQuery, useListOrgMembershipsQuery } from '@store/slice/api/orgApiSlice'
+import { useGetSubscriptionQuery } from '@store/slice/api/stripeApiSlice'
+
+const Users = () => {
+  const router = useRouter()
+  const { user, activeOrgId } = useUserAuthContext()
+  const {
+    isOpen: isOpenAddUserModal,
+    onOpen: onOpenAddUserModal,
+    onClose: onCloseAddUserModal,
+  } = useDisclosure()
+  const {
+    isOpen: isOpenUpgradeModal,
+    onOpen: onOpenUpgradeModal,
+    onClose: onCloseUpgradeModal,
+  } = useDisclosure()
+  const {
+    isOpen: isOpenPlanModal,
+    onOpen: onOpenPlanModal,
+    onClose: onClosePlanModal,
+  } = useDisclosure()
+
+  const { data: orgMembershipsData, isLoading: isLoadingOrgs } = useListOrgsQuery(undefined, {
+    skip: !user?.id
+  })
+
+  const orgMemberships = useMemo(
+    () => orgMembershipsData ?? user?.orgMemberships ?? [],
+    [orgMembershipsData, user?.orgMemberships]
+  )
+
+  const activeMembership = useMemo(() => {
+    if (!orgMemberships.length) return null
+    return (
+      orgMemberships.find((m) => m.orgId === activeOrgId) ||
+      orgMemberships.find((m) => m.org?.orgType === 'personal') ||
+      orgMemberships[0] ||
+      null
+    )
+  }, [orgMemberships, activeOrgId])
+
+  const activeOrgOwnerId = activeMembership?.org?.ownerId ?? null
+  const resolvedOrgId = activeMembership?.orgId || activeOrgId
+
+  const { data: membersData } = useListOrgMembershipsQuery(
+    { orgId: resolvedOrgId!, limit: 1, page: 1 },
+    { skip: !resolvedOrgId }
+  )
+
+  const { data: subData } = useGetSubscriptionQuery()
+
+  // Extract user entitlement from the active subscription's plan product
+  const { planName, maxUsers, isHardCapped, currentUserCount } = useMemo(() => {
+    const subscriptions = (subData as any)?.subscriptions ?? []
+    const activeSub = subscriptions[0]
+    const planPP = activeSub?.productPlans?.find(
+      (pp: any) => pp.product?.type === 'plan'
+    )
+    const product = planPP?.product
+    const userLimit = product?.limits?.users ?? null
+    return {
+      planName: product?.name ?? '',
+      maxUsers:
+        typeof userLimit?.includedUnits === 'number'
+          ? userLimit.includedUnits
+          : userLimit?.includedUnits == null
+            ? null
+            : Number(userLimit.includedUnits),
+      isHardCapped: userLimit?.hardCap === true,
+      currentUserCount: membersData?.count ?? 0,
+    }
+  }, [subData, membersData])
+
+  const isAtUserLimit =
+    isHardCapped && maxUsers !== null && currentUserCount >= maxUsers
+
+  const handleAddUser = () => {
+    if (isAtUserLimit) {
+      onOpenUpgradeModal()
+    } else {
+      onOpenAddUserModal()
+    }
+  }
+
+  const handleUpgrade = () => {
+    onCloseUpgradeModal()
+    onOpenPlanModal()
+  }
+
+  useEffect(() => {
+    if (!user?.id || isLoadingOrgs) return
+    const activeOrg = activeMembership?.org
+    const isPersonalOrg =
+      activeOrg?.orgType === 'personal' ||
+      (!!activeOrg?.slug && !!user?.name && activeOrg.slug === user.name)
+
+    if (isPersonalOrg) {
+      router.replace('/')
+    }
+  }, [activeMembership, isLoadingOrgs, router, user?.id, user?.name])
+
+  return (
+    <SideNavLayout useMainContentAreaId={false}>
+      <div className="mt-3 w-100">
+        <h1 className="mb-4">Users</h1>
+        <UserGrid
+          onCreate={handleAddUser}
+          orgId={resolvedOrgId}
+          orgOwnerId={activeOrgOwnerId}
+        />
+      </div>
+
+      <AddUserModal
+        isOpen={isOpenAddUserModal}
+        onClose={onCloseAddUserModal}
+        orgId={resolvedOrgId}
+      />
+
+      <UpgradeUserLimitModal
+        isOpen={isOpenUpgradeModal}
+        onClose={onCloseUpgradeModal}
+        onUpgrade={handleUpgrade}
+        currentPlanName={planName}
+        maxUsers={maxUsers ?? 0}
+        currentUserCount={currentUserCount}
+      />
+
+      <UpdatePlanModal
+        isOpen={isOpenPlanModal}
+        onClose={onClosePlanModal}
+      />
+    </SideNavLayout>
+  )
+}
+
+Users.getInitialProps = async () => ({
+  pageTitle: 'Users',
+})
+
+export default WithAuth(Users)

package/src/sass/app.scss

@@ -0,0 +1,59 @@
+// Variables
+@import 'utilities/variables';
+
+// Packages
+@import '~bootstrap/scss/bootstrap';
+@import 'bootstrap-icons/font/bootstrap-icons.css';
+
+@import 'prismjs/themes/prism.css';
+@import 'react-toastify/dist/ReactToastify.css';
+
+// Utilities
+@import 'utilities/utils';
+@import 'utilities/sizes';
+@import 'utilities/mixins';
+
+// Base
+@import 'base/animations';
+@import 'base/borders';
+@import 'base/custom-backgrounds';
+@import 'base/interactions';
+@import 'base/main';
+@import 'base/positions';
+@import 'base/sizes';
+@import 'base/typography';
+
+// Layout
+@import 'layout/base';
+@import 'layout/hero';
+@import 'layout/nav';
+@import 'layout/news-card-grid';
+@import 'layout/footer';
+
+// Components
+@import 'components/accordion';
+@import 'components/ad';
+@import 'components/avatar';
+@import 'components/badge';
+@import 'components/button';
+@import 'components/checkbox';
+@import 'components/circle-media-picker';
+@import 'components/rich-content';
+@import 'components/code-snipped';
+@import 'components/date-time-picker';
+@import 'components/dialog';
+@import 'components/gradients';
+@import 'components/group-detail';
+@import 'components/input';
+@import 'components/menu';
+@import 'components/modal';
+@import 'components/popover';
+@import 'components/spinner';
+@import 'components/swagger';
+@import 'components/swiper';
+@import 'components/switch';
+@import 'components/table';
+@import 'components/tabs';
+@import 'components/toast';
+@import 'components/tooltip';
+@import 'components/tag-input';

package/src/sass/base/_animations.scss

@@ -0,0 +1,70 @@
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes fadeInOut {
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+		display: none;
+	}
+}
+
+@keyframes slideInUp {
+	from {
+		transform: translate3d(0, 100%, 0);
+		visibility: visible;
+	}
+
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideInFromLeft {
+	from {
+		transform: translate3d(100%, 0, 0);
+		visibility: visible;
+	}
+
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.fadeIn {
+	animation-name: fadeIn;
+	animation-duration: 0.4s;
+	animation-fill-mode: both;
+}
+
+.fadeInOut {
+	animation-name: fadeInOut;
+	animation-duration: 0.4s;
+	animation-fill-mode: both;
+}
+
+.slideInUp {
+	animation-name: slideInUp;
+	animation-duration: 0.2s;
+	animation-fill-mode: both;
+}
+
+.slideInFromLeft {
+	animation-name: slideInFromLeft;
+	animation-duration: 0.2s;
+	animation-fill-mode: both;
+}

package/src/sass/base/_borders.scss

@@ -0,0 +1,78 @@
+.border {
+	@include media-breakpoint-up(lg) {
+		&-lg {
+			border: 1px solid theme-color('light-gray');
+		}
+		&-lg-start {
+			border-left: 1px solid theme-color('light-gray');
+		}
+	}
+	@include media-breakpoint-up(md) {
+		&-md-start {
+			border-left: 1px solid theme-color('light-gray');
+		}
+	}
+}
+.rounded {
+	&-xs-top {
+		border-top-left-radius: var(--bs-border-radius) !important;
+		border-top-right-radius: var(--bs-border-radius) !important;
+	}
+	&-md-start {
+		@include media-breakpoint-up(md) {
+			border-bottom-left-radius: var(--bs-border-radius) !important;
+			border-top-left-radius: var(--bs-border-radius) !important;
+			border-top-right-radius: 0 !important;
+		}
+	}
+
+	&-xl {
+		border-radius: 45px;
+	}
+	&-lg {
+		border-radius: 25px;
+	}
+	&-md {
+		border-radius: 12px;
+	}
+	&-sm {
+		border-radius: 6px;
+	}
+	&-left-none {
+		border-left: 0;
+		border-top-left-radius: 0 !important;
+		border-bottom-left-radius: 0 !important;
+	}
+	&-right-none {
+		border-right: 0;
+		border-top-right-radius: 0 !important;
+		border-bottom-right-radius: 0 !important;
+	}
+	&-left-md {
+		border-top-left-radius: 12px;
+		border-bottom-left-radius: 12px;
+	}
+	&-right-md {
+		border-top-right-radius: 12px;
+		border-bottom-right-radius: 12px;
+	}
+
+	&-top-md {
+		border-top-left-radius: 12px;
+		border-top-right-radius: 12px;
+	}
+	&-bottom-md {
+		border-bottom-left-radius: 12px !important;
+		border-bottom-right-radius: 12px !important;
+	}
+}
+
+.gradient-border {
+	background: linear-gradient(to bottom, #a8c4f1, #ec9eff);
+  padding: 2px;
+	display: block;
+
+	> span {
+		border-radius: 23px;
+	}
+}

package/src/sass/base/_custom-backgrounds.scss

@@ -0,0 +1,107 @@
+@mixin full-screen-bg($backgroundUrl) {
+	&::before {
+		content: '';
+		position: absolute;
+		background-image: url($backgroundUrl);
+		background-size: cover;
+		background-repeat: no-repeat;
+		background-position: center;
+		height: 100%;
+		width: 100vw;
+		z-index: -1;
+		left: 0;
+		top: 0;
+	}
+}
+.standard-bg {
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+.preview-background {
+	background-position: 0 0, 10px 10px;
+	background-size: 20px 20px;
+	background-image: linear-gradient(
+			45deg,
+			#d9d9d9 25%,
+			transparent 25%,
+			transparent 75%,
+			#d9d9d9 75%,
+			#d9d9d9
+		),
+		linear-gradient(
+			45deg,
+			#d9d9d9 25%,
+			transparent 25%,
+			transparent 75%,
+			#d9d9d9 75%,
+			#d9d9d9
+		);
+}
+.bg {
+	&-black-fade {
+		background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85))
+			no-repeat bottom;
+	}
+	&-light-gradient {
+
+			background: rgb(255,234,220);
+			background: linear-gradient(180deg, rgba(255,234,220,1) 0%, rgba(239,229,255,1) 41%, rgba(255,255,255,1) 100%);
+	}
+	&-colored-gradient {
+		background: #7b50eb;
+		background: linear-gradient(to right, #2363dc, #c716fe);
+	}
+	&-network-red {
+		&::after, &::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			background-size: cover;
+			background-repeat: no-repeat;
+			width: 100%;
+			height: 47rem;
+			z-index: -1;
+			max-height: 100vh;
+
+			@include media-breakpoint-up(lg) {
+				background-size: contain;
+			}
+		}
+		&::before {
+			background-image: url('/images/background/Osirus-Background-Network-Left-Side.png');
+			background-position: left;
+			@include media-breakpoint-down(lg) {
+				visibility: hidden;
+			}
+		}
+		&::after {
+			content: '';
+			background-image: url('/images/background/Osirus-Background-Network-Right-Side.png');
+			background-position: right;
+		}
+	}
+	&-origin {
+		background-image: url('/images/background/Osirus-About-Us-Hero.jpg');
+		background-size: cover;
+		background-position: -24px -10px;
+	}
+	&-cover {
+		background-size: cover!important;
+	}
+	&-marketplace-header {
+		background-image: url('/images/background/osirus-marketplace-background.jpg');
+		background-size: cover;
+	}
+	&-origin-story-banner {
+		background-image: url('/images/background/Osirus-Origin-Story-Banner-background.png');
+		background-size: cover;
+	}
+	&-black-transparent {
+		background-color: rgba(theme-color('black'), 0.75);
+	}
+	&-gradient-header {
+		background: rgb(244,237,255);
+		background: linear-gradient(90deg, rgba(244,237,255,1) 0%, rgba(252,232,223,1) 100%);
+	}
+}

package/src/sass/base/_interactions.scss

@@ -0,0 +1,35 @@
+.pointer {
+	cursor: pointer;
+}
+
+.cursor-default {
+	cursor: default;
+}
+
+.grabbable {
+	&:not(:disabled),
+	[type='button']:not(:disabled) {
+		cursor: move; /* fallback if grab cursor is unsupported */
+		cursor: grab;
+		cursor: -moz-grab;
+		cursor: -webkit-grab;
+		&:active {
+			cursor: grabbing;
+			cursor: -moz-grabbing;
+			cursor: -webkit-grabbing;
+		}
+	}
+}
+
+.on-hover {
+	&__show-item {
+		transition: all 0.25s ease;
+		opacity: 0;
+	}
+
+	&:hover {
+		.on-hover__show-item {
+			opacity: 1;
+		}
+	}
+}