@studiocubics/cms 0.0.1

package/src/ui/System/SystemUser/SystemUserPageContent.tsx

@@ -0,0 +1,54 @@
+import { SectionWrapper } from "@studiocubics/ui";
+import { SystemUserDetails } from "./SystemUserDetails/SystemUserDetails";
+import { SystemUserRole } from "./SystemUserRole/SystemUserRole";
+import { SystemUserTimestamps } from "./SystemUserTimestamps";
+import Link from "next/link";
+import type { User } from "@clerk/nextjs/server";
+import type { Role } from "../../../clerk/rbacConfig";
+
+export function SystemUserPageContent({
+  allowEdit,
+  user,
+}: {
+  allowEdit: boolean;
+  user: User;
+}) {
+  return (
+    <>
+      <SectionWrapper title={"Account Details"} noBorders>
+        <SystemUserDetails
+          editable={allowEdit}
+          id={user.id}
+          fullName={user.fullName}
+          firstName={user.firstName}
+          lastName={user.lastName}
+          imageUrl={user.imageUrl}
+          emailAddress={user.primaryEmailAddress?.emailAddress}
+        />
+      </SectionWrapper>
+      <SectionWrapper title={"Account Timestamps"}>
+        <SystemUserTimestamps
+          createdAt={user.createdAt}
+          updatedAt={user.updatedAt}
+          lastSignInAt={user.lastSignInAt}
+        />
+      </SectionWrapper>
+      <SectionWrapper title={"Assigned Role"}>
+        <SystemUserRole
+          role={user.publicMetadata.role as Role}
+          editable={allowEdit}
+        />
+      </SectionWrapper>
+      <SectionWrapper
+        title={"Active Sessions"}
+        subtitle={
+          <p style={{ fontSize: "var(--fs-body2)" }}>
+            <Link href={`/dashboard/security/systemUsers/${user.id}/sessions`}>
+              View All Sessions
+            </Link>
+          </p>
+        }
+      ></SectionWrapper>
+    </>
+  );
+}

package/src/ui/System/SystemUser/SystemUserRole/SystemUserRole.module.css

@@ -0,0 +1,17 @@
+.root {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+}
+.main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--spacing-gap-2);
+  align-items: flex-start;
+  p {
+    font-size: var(--fs-body2);
+    color: var(--color-on-background-faint);
+  }
+}

package/src/ui/System/SystemUser/SystemUserRole/SystemUserRole.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { toCapitalised } from "@studiocubics/utils";
+import { Edit, User } from "lucide-react";
+import { Button, Tooltip, TransitionAnimation } from "@studiocubics/ui";
+import Link from "next/link";
+import { useDisclosure } from "@studiocubics/hooks";
+import styles from "./SystemUserRole.module.css";
+import { RBAC_CONFIG, type Role } from "../../../../clerk/rbacConfig";
+import type { Route } from "next";
+import { SystemUserRoleForm } from "../SystemUserRoleForm/SystemUserRoleForm";
+
+export interface SystemUserRoleProps {
+  role: Role;
+  editable?: boolean;
+}
+
+export function SystemUserRole({ role, editable }: SystemUserRoleProps) {
+  const roleDetails = RBAC_CONFIG[role];
+  const { open, handleOpen, handleClose } = useDisclosure();
+  if (!roleDetails) return null;
+
+  return (
+    <>
+      <TransitionAnimation
+        in={!open}
+        transformOrigin={"top"}
+        mountOnly
+        unmountOnExit
+      >
+        <div className={styles.root}>
+          <div className={styles.main}>
+            <Tooltip renderArrow title={"View resource permissions"}>
+              <Button
+                as={Link}
+                variant="contained"
+                color="primary"
+                startIcon={<User size={16} />}
+                size="sm"
+                href={`/dashboard/security/permissions/${role}` as Route}
+              >
+                {toCapitalised(role)}
+              </Button>
+            </Tooltip>
+            <p>{roleDetails.desc}</p>
+          </div>
+          {editable && (
+            <Button size="sm" startIcon={<Edit />} onClick={handleOpen}>
+              Edit Role
+            </Button>
+          )}
+        </div>
+      </TransitionAnimation>
+      <TransitionAnimation
+        in={open}
+        transformOrigin={"top right"}
+        mountOnly
+        unmountOnExit
+      >
+        <SystemUserRoleForm role={role} onClose={handleClose} />
+      </TransitionAnimation>
+    </>
+  );
+}

package/src/ui/System/SystemUser/SystemUserRoleForm/SystemUserRoleForm.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import {
+  type CardProps,
+  Card,
+  ConfirmationForm,
+  Select,
+} from "@studiocubics/ui";
+import { initialiseForm, toCapitalised } from "@studiocubics/utils";
+import { type Role, roles } from "../../../../clerk/rbacConfig";
+import { useActionState } from "react";
+import { systemUserRoleUpdateAction } from "../../../../clerk/_index";
+
+const initialSystemUserRoleUpdateState = initialiseForm("role");
+
+export type SystemUserRoleUpdateState = typeof initialSystemUserRoleUpdateState;
+
+export function SystemUserRoleForm({
+  role,
+  onClose,
+  ...rest
+}: { role: Role; onClose(): void } & CardProps) {
+  const [state, action, pending] = useActionState(
+    systemUserRoleUpdateAction.bind(null, "hello"),
+    initialSystemUserRoleUpdateState,
+  );
+  return (
+    <Card {...rest} fullWidth>
+      <ConfirmationForm
+        variant="danger"
+        confirmText="Change Role"
+        action={action}
+        formTitle="Edit Role"
+        onCancel={onClose}
+      >
+        <Select
+          label="Current role"
+          error={state.fieldErrors?.role}
+          defaultValue={role}
+          disabled={pending}
+        >
+          {roles.map((r) => (
+            <option key={r} value={r}>
+              {toCapitalised(r)}
+            </option>
+          ))}
+        </Select>
+      </ConfirmationForm>
+    </Card>
+  );
+}

package/src/ui/System/SystemUser/SystemUserTimestamps.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useUser } from "@clerk/nextjs";
+import type { User } from "@clerk/nextjs/server";
+import { LabeledValue, Skeleton } from "@studiocubics/ui";
+
+export function CurrentSystemUserTimestamps() {
+  const { user, isLoaded } = useUser();
+  //   if (!user) return null;
+  return (
+    <SystemUserTimestamps
+      isLoaded={isLoaded}
+      createdAt={user?.createdAt}
+      updatedAt={user?.updatedAt}
+      lastSignInAt={user?.lastSignInAt}
+    />
+  );
+}
+export interface SystemUserTimestampsProps {
+  createdAt?: User["createdAt"] | NonNullable<ClerkClientUser>["createdAt"];
+  updatedAt?: User["updatedAt"] | NonNullable<ClerkClientUser>["updatedAt"];
+  lastSignInAt?:
+    | User["lastSignInAt"]
+    | NonNullable<ClerkClientUser>["lastSignInAt"];
+  isLoaded?: boolean;
+}
+
+export function SystemUserTimestamps(props: SystemUserTimestampsProps) {
+  const { createdAt, updatedAt, lastSignInAt, isLoaded = true } = props;
+  const timestamps = [
+    { stamp: "Created at", time: createdAt },
+    { stamp: "Updated", time: updatedAt },
+    { stamp: "Last Sign in", time: lastSignInAt },
+  ];
+
+  return timestamps.map((timestamp) => {
+    let timestampTime =
+      timestamp.time && typeof timestamp.time == "number"
+        ? new Date(timestamp.time)
+        : timestamp.time;
+
+    return (
+      <LabeledValue key={timestamp.stamp} label={timestamp.stamp}>
+        {isLoaded ? (
+          !timestamp.time ? (
+            "-"
+          ) : (
+            timestampTime?.toLocaleString()
+          )
+        ) : (
+          <Skeleton width={150} height={24} />
+        )}
+      </LabeledValue>
+    );
+  });
+}

package/src/ui/System/SystemUser/_index.ts

@@ -0,0 +1,14 @@
+export * from "./CurrentSystemUserButton/CurrentSystemUserButton";
+export * from "./CurrentSystemUserPage";
+export * from "./SystemUserActions";
+export * from "./SystemUserDetails/SystemUserDetails";
+export * from "./SystemUserDetailsForm/SystemUserDetailsForm";
+export * from "./SystemUserList";
+export * from "./SystemUserListActions";
+export * from "./SystemUserListCard";
+export * from "./SystemUserListPage";
+export * from "./SystemUserListPagination";
+export * from "./SystemUserPage";
+export * from "./SystemUserPageContent";
+export * from "./SystemUserRole/SystemUserRole";
+export * from "./SystemUserTimestamps";

package/src/ui/System/WelcomePage/WelcomePage.module.css

@@ -0,0 +1,18 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-gap-4);
+  width: 100dvw;
+  height: 100dvh;
+}
+.desc {
+  max-width: 65ch;
+  text-align: center;
+  font-size: var(--fs-body);
+  color: var(--color-on-background-faint);
+}
+.catcall {
+  font-size: var(--fs-body2);
+}

package/src/ui/System/WelcomePage/WelcomePage.tsx

@@ -0,0 +1,43 @@
+import { Button, CubicsUILogo, PoweredByBanner } from "@studiocubics/ui";
+import styles from "./WelcomePage.module.css";
+import Link from "next/link";
+import { LayoutDashboardIcon, LogIn } from "lucide-react";
+import { auth } from "../../../clerk/auth";
+export async function WelcomePage() {
+  const { userId } = await auth();
+  const loggedOutUser = (
+    <Link href={"/auth/signIn/"}>
+      <Button variant="contained" endIcon={<LogIn />}>
+        Get Started
+      </Button>
+    </Link>
+  );
+  const loggedInUser = (
+    <Link href={"/dashboard"}>
+      <Button variant="contained" endIcon={<LayoutDashboardIcon />}>
+        Go to dashboard
+      </Button>
+    </Link>
+  );
+  return (
+    <div className={styles.root}>
+      <CubicsUILogo width={"10rem"} height={"auto"} onlyFavicon />
+      <PoweredByBanner size={"md"} />
+      <h2>Welcome to Cubics CMS!</h2>
+      <p className={styles.desc}>
+        A powerful and intuitive platform to manage your content effortlessly.
+        Streamline updates, enhance collaboration, and take full control of your
+        digital presence.
+      </p>
+      {userId ? loggedInUser : loggedOutUser}
+      {!userId && (
+        <p className={styles.catcall}>
+          Dont have an account?&nbsp;
+          {/* TODO add request account from admin flow.
+          //@ts-ignore */}
+          <Link href="/auth/requestAccount">Request from an admin</Link>
+        </p>
+      )}
+    </div>
+  );
+}

package/src/ui/System/_index.ts

@@ -0,0 +1,6 @@
+export * from "./Auth/_index";
+export * from "./Invitations/_index";
+export * from "./Permissions/_index";
+export * from "./SystemUser/_index";
+export * from "./WelcomePage/WelcomePage";
+export * from "./types";

package/src/ui/System/types.ts

@@ -0,0 +1,7 @@
+import type { TabProps } from "@studiocubics/ui";
+import type { AppRoutes } from "../../routes";
+
+export type SecurityPageProps<T extends AppRoutes = "/dashboard/security"> =
+  PageProps<T> & {
+    securityLinks: TabProps[];
+  };

package/src/ui/_index.ts

@@ -0,0 +1,3 @@
+export * from "./Inputs/_index";
+export * from "./Layout/_index";
+export * from "./System/_index";

package/src/utils/_index.ts

@@ -0,0 +1 @@
+export * from "./proxyFunctions";

package/src/utils/proxyFunctions.ts

@@ -0,0 +1,37 @@
+import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
+import { NextResponse } from "next/server";
+
+const isPublicRoute = createRouteMatcher(["/", "/auth(.*)"]);
+
+export const cmsMiddleware = clerkMiddleware(async (auth, req) => {
+  const { userId, sessionClaims, redirectToSignIn } = await auth();
+
+  // If the user isn't signed in and the route is private, redirect to sign-in
+  if (!userId && !isPublicRoute(req)) {
+    return redirectToSignIn({ returnBackUrl: req.url });
+  }
+
+  // Catch users who do not have `onboardingComplete: true` in their publicMetadata
+  // Redirect them to the /auth/onboarding route to complete onboarding
+  if (
+    userId &&
+    !sessionClaims?.metadata?.onboardingComplete &&
+    req.nextUrl.pathname !== "/auth/onboarding"
+  ) {
+    const onboardingUrl = new URL("/auth/onboarding", req.url);
+    return NextResponse.redirect(onboardingUrl);
+  }
+
+  // If the user is logged in and the route is protected, let them view.
+  if (userId && !isPublicRoute(req)) {
+    return NextResponse.next();
+  }
+});
+export const cmsConfig = {
+  matcher: [
+    // Skip Next.js internals and all static files, unless found in search params
+    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
+    // Always run for API routes
+    "/(api|trpc)(.*)",
+  ],
+};

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    // Output
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["./src", "src/clerk/clerk.d.ts"]
+}