@studiocubics/cms 0.0.1

package/src/clerk/schemas/invitation.ts

@@ -0,0 +1,17 @@
+import z from "zod";
+import { roles } from "../rbacConfig";
+
+export const createInvitationSchema = z.object({
+  emailAddress: z.string(),
+  expiresInDays: z
+    .preprocess((val) => {
+      if (typeof val === "string") {
+        return Number.parseInt(val);
+      }
+      return val;
+    }, z.number())
+    .optional(),
+  ignoreExisting: z.boolean().default(false).optional(),
+  notify: z.boolean().default(true).optional(),
+  role: z.enum(roles),
+});

package/src/clerk/schemas/systemUser.ts

@@ -0,0 +1,16 @@
+import z from "zod";
+const MAX_UPLOAD_SIZE = 1024 * 1024 * 5; // 10MB
+const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/png"];
+export const systemUserUpdateSchema = z.object({
+  firstName: z.string().max(25).min(2),
+  lastName: z.string().max(25).min(2),
+  imageFile: z
+    .file()
+    .refine((f) => f.size <= MAX_UPLOAD_SIZE, {
+      error: "Image size is larger than >10MB",
+    })
+    .refine(
+      (f) => ACCEPTED_IMAGE_TYPES.includes(f.type),
+      "Only .jpg and .png formats are supported.",
+    ),
+});

package/src/clerk/toClientSafeUser.ts

@@ -0,0 +1,77 @@
+import type { User } from "@clerk/nextjs/server";
+
+/**
+ * Client-safe representation of a Clerk User.
+ *
+ * This intentionally excludes any sensitive or server-only fields
+ * (e.g. privateMetadata, externalAccounts with tokens, etc.)
+ * and contains only JSON-serializable data that is safe to pass
+ * from Server Components to Client Components.
+ */
+export type ClientSafeUser = {
+  id: string;
+  username: string | null;
+  firstName: string | null;
+  lastName: string | null;
+  fullName: string | null;
+  imageUrl: string;
+  primaryEmailAddress: {
+    id: string;
+    emailAddress: string;
+    verified: boolean;
+  };
+  emailAddresses: Array<{
+    id: string;
+    emailAddress: string;
+    verified: boolean;
+  }>;
+  publicMetadata: CustomJwtSessionClaims["metadata"];
+  createdAt: Date | null;
+  updatedAt: Date | null;
+  lastSignInAt: Date | null;
+};
+
+/**
+ * Converts a Clerk `User` (server-side) into a client-safe, serializable object.
+ *
+ * Why this exists:
+ * - The Clerk `User` class contains methods and non-serializable fields.
+ * - Passing it directly to a Client Component will break React Server Components.
+ * - This function strips the object down to stable, safe primitives only.
+ *
+ * Rules enforced here:
+ * - No functions
+ * - No circular references
+ * - No private or sensitive data
+ *
+ * @param user Clerk User instance from `@clerk/nextjs/server`
+ * @returns ClientSafeUser plain object
+ */
+export function toClientSafeUser(user: User): ClientSafeUser {
+  const pea = user.emailAddresses.find(
+    (ea) => ea.id == user.primaryEmailAddressId
+  );
+  if (!pea) throw new Error("Missing primaryEmailAddress");
+  return {
+    id: user.id,
+    username: user.username,
+    firstName: user.firstName,
+    lastName: user.lastName,
+    fullName: user.fullName,
+    imageUrl: user.imageUrl,
+    primaryEmailAddress: {
+      id: pea.id,
+      emailAddress: pea.emailAddress,
+      verified: pea.verification?.status === "verified",
+    },
+    emailAddresses: user.emailAddresses.map((email) => ({
+      id: email.id,
+      emailAddress: email.emailAddress,
+      verified: email.verification?.status === "verified",
+    })),
+    publicMetadata: user.publicMetadata ?? {},
+    createdAt: new Date(user.createdAt),
+    updatedAt: new Date(user.updatedAt),
+    lastSignInAt: user.lastSignInAt ? new Date(user.lastSignInAt) : null,
+  };
+}

package/src/constants/_index.ts

@@ -0,0 +1,2 @@
+export * from "./pageLimits";
+export * from "./defaults";

package/src/constants/defaults.tsx

@@ -0,0 +1,62 @@
+import type { ListItemProps, TabProps } from "@studiocubics/ui";
+import { Titillium_Web, Outfit } from "next/font/google";
+import {
+  Newspaper,
+  Settings,
+  ShieldUser,
+  SquareUser,
+  DoorClosedLocked,
+  Users,
+  Send,
+} from "lucide-react";
+
+export const defaultNavLinks: ListItemProps[] = [
+  {
+    startIcon: <Newspaper />,
+    children: "Content",
+    href: "/dashboard/content",
+  },
+  {
+    startIcon: <ShieldUser />,
+    href: "/dashboard/security",
+    children: "Security",
+  },
+  {
+    startIcon: <Settings />,
+    href: "/dashboard/settings",
+    children: "Settings",
+  },
+];
+export const defaultSecurityLinks: TabProps[] = [
+  {
+    children: "Your Account",
+    startIcon: <SquareUser />,
+    href: "/dashboard/security/account",
+  },
+  {
+    children: "Roles & Permissions",
+    startIcon: <DoorClosedLocked />,
+    href: "/dashboard/security/permissions",
+  },
+  {
+    children: "System Users",
+    startIcon: <Users />,
+    href: "/dashboard/security/systemUsers",
+  },
+  {
+    children: "Invitations",
+    startIcon: <Send />,
+    href: "/dashboard/security/invitations",
+  },
+];
+export const fontH = Outfit({
+  variable: "--font-h",
+  subsets: ["latin"],
+});
+
+export const fontP = Titillium_Web({
+  variable: "--font-p",
+  weight: ["200", "400", "600", "700", "900"],
+  subsets: ["latin"],
+});
+export const defaultBodyClassName = `${fontH.variable} ${fontP.variable}`;

package/src/constants/pageLimits.ts

@@ -0,0 +1,2 @@
+export const SYSTEM_USERS_PAGE_LIMIT = 10;
+export const INVITATIONS_PAGE_LIMIT = 10;

package/src/declaration.d.ts

@@ -0,0 +1,5 @@
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+declare module "*.css";

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./clerk/_index";
+export * from "./constants/_index";
+export * from "./providers/_index";
+export * from "./ui/_index";
+export * from "./utils/_index";

package/src/providers/CMSRootProviders.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import type { ReactNode } from "react";
+import { ClerkProvider } from "@clerk/nextjs";
+
+export function CMSRootProviders({ children }: { children: ReactNode }) {
+  return (
+    <ThemeProvider enableSystem>
+      <ClerkProvider>{children}</ClerkProvider>
+    </ThemeProvider>
+  );
+}

package/src/providers/_index.ts

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

package/src/routes.d.ts

@@ -0,0 +1,96 @@
+type AppRoutes =
+  | "/"
+  | "/auth/requestAccount"
+  | "/auth/signIn/[[...signIn]]"
+  | "/auth/signUp/[[...signUp]]"
+  | "/dashboard"
+  | "/dashboard/content"
+  | "/dashboard/content/projects"
+  | "/dashboard/security"
+  | "/dashboard/security/account"
+  | "/dashboard/security/invitations"
+  | "/dashboard/security/permissions"
+  | "/dashboard/security/systemUsers"
+  | "/dashboard/security/systemUsers/[userId]"
+  | "/dashboard/security/systemUsers/[userId]/sessions"
+  | "/dashboard/settings";
+type PageRoutes = never;
+type LayoutRoutes = "/" | "/auth" | "/dashboard" | "/dashboard/security";
+type RedirectRoutes = never;
+type RewriteRoutes = never;
+type Routes =
+  | AppRoutes
+  | PageRoutes
+  | LayoutRoutes
+  | RedirectRoutes
+  | RewriteRoutes;
+
+interface ParamMap {
+  "/": {};
+  "/auth": {};
+  "/auth/requestAccount": {};
+  "/auth/signIn/[[...signIn]]": { signIn?: string[] };
+  "/auth/signUp/[[...signUp]]": { signUp?: string[] };
+  "/dashboard": {};
+  "/dashboard/content": {};
+  "/dashboard/content/projects": {};
+  "/dashboard/security": {};
+  "/dashboard/security/account": {};
+  "/dashboard/security/invitations": {};
+  "/dashboard/security/permissions": {};
+  "/dashboard/security/systemUsers": {};
+  "/dashboard/security/systemUsers/[userId]": { userId: string };
+  "/dashboard/security/systemUsers/[userId]/sessions": { userId: string };
+  "/dashboard/settings": {};
+}
+
+export type ParamsOf<Route extends Routes> = ParamMap[Route];
+
+interface LayoutSlotMap {
+  "/": never;
+  "/auth": never;
+  "/dashboard": never;
+  "/dashboard/security": never;
+}
+
+export type {
+  AppRoutes,
+  PageRoutes,
+  LayoutRoutes,
+  RedirectRoutes,
+  RewriteRoutes,
+  ParamMap,
+};
+
+declare global {
+  /**
+   * Props for Next.js App Router page components
+   * @example
+   * ```tsx
+   * export default function Page(props: PageProps<'/blog/[slug]'>) {
+   *   const { slug } = await props.params
+   *   return <div>Blog post: {slug}</div>
+   * }
+   * ```
+   */
+  interface PageProps<AppRoute extends AppRoutes> {
+    params: Promise<ParamMap[AppRoute]>;
+    searchParams: Promise<Record<string, string | string[] | undefined>>;
+  }
+
+  /**
+   * Props for Next.js App Router layout components
+   * @example
+   * ```tsx
+   * export default function Layout(props: LayoutProps<'/dashboard'>) {
+   *   return <div>{props.children}</div>
+   * }
+   * ```
+   */
+  type LayoutProps<LayoutRoute extends LayoutRoutes> = {
+    params: Promise<ParamMap[LayoutRoute]>;
+    children: React.ReactNode;
+  } & {
+    [K in LayoutSlotMap[LayoutRoute]]: React.ReactNode;
+  };
+}

package/src/ui/Inputs/ThemedMonacoEditor/ThemedMonacoEditor.module.css

@@ -0,0 +1,4 @@
+.root {
+  border-radius: var(--shape-br-sm);
+  overflow: hidden;
+}

package/src/ui/Inputs/ThemedMonacoEditor/ThemedMonacoEditor.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Editor, type EditorProps } from "@monaco-editor/react";
+import { useTheme } from "next-themes";
+import styles from "./ThemedMonacoEditor.module.css";
+export function ThemedMonacoEditor(props: EditorProps) {
+  const theme = useTheme();
+
+  return (
+    <Editor
+      className={styles.root}
+      theme={theme.resolvedTheme == "dark" ? "vs-dark" : "vs-light"}
+      {...props}
+    />
+  );
+}

package/src/ui/Inputs/_index.ts

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

package/src/ui/Layout/CMSSecurityLayout.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { PageLayoutTabs, type PageLayoutTabsProps } from "@studiocubics/ui";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export function CMSSecurityLayout(
+  props: Omit<PageLayoutTabsProps, "title" | "subtitle" | "selectedIndex">,
+) {
+  const { menuItems } = props;
+  const pathname = usePathname();
+  const selectedItem = menuItems?.find(
+    (mi) => mi.href && pathname.startsWith(mi.href),
+  );
+  const selectedIndex = selectedItem
+    ? menuItems?.indexOf(selectedItem)
+    : undefined;
+  return (
+    <PageLayoutTabs
+      {...props}
+      subtitle={"Manage your account and other System security options"}
+      title={"Security"}
+      selectedIndex={selectedIndex}
+      LinkComponent={Link}
+    />
+  );
+}

package/src/ui/Layout/CMSSidebar/CMSSidebar.tsx

@@ -0,0 +1,39 @@
+import {
+  Sidebar,
+  SidebarViewport,
+  SidebarDrawer,
+  type ListItemProps,
+} from "@studiocubics/ui";
+import type { ReactNode } from "react";
+import { CMSSidebarHeader } from "./CMSSidebarHeader/CMSSidebarHeader";
+import { CMSSidebarFooter } from "./CMSSidebarFooter/CMSSidebarFooter";
+import { CMSSidebarBody } from "./CMSSidebarBody";
+import { cookies } from "next/headers";
+
+export async function CMSSidebar({
+  children,
+  sidebarLinks,
+}: {
+  children: ReactNode;
+  sidebarLinks: ListItemProps[];
+}) {
+  const cookieStore = await cookies();
+  const defaultOpen = cookieStore.get("sidebarOpen")?.value === "true";
+
+  return (
+    <div style={{ height: "100dvh" }}>
+      <Sidebar defaultOpen={defaultOpen}>
+        <SidebarDrawer>
+          <CMSSidebarHeader />
+          <CMSSidebarBody sidebarLinks={sidebarLinks} />
+          <CMSSidebarFooter />
+        </SidebarDrawer>
+        <SidebarViewport
+          style={{ backgroundColor: "var(--color-surface-alpha)" }}
+        >
+          {children}
+        </SidebarViewport>
+      </Sidebar>
+    </div>
+  );
+}

package/src/ui/Layout/CMSSidebar/CMSSidebarBody.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import {
+  List,
+  useSidebar,
+  SidebarBody,
+  ListItem,
+  type ListItemProps,
+} from "@studiocubics/ui";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { useScreenSize } from "@studiocubics/hooks";
+
+export function CMSSidebarBody({
+  sidebarLinks,
+}: {
+  sidebarLinks: ListItemProps[];
+}) {
+  const { sidebarOpen, toggleSidebar } = useSidebar();
+  const pathname = usePathname();
+  const screenSize = useScreenSize();
+
+  return (
+    <SidebarBody>
+      <List>
+        {sidebarLinks.map((sl, i) => (
+          <ListItem
+            LinkComponent={Link}
+            key={i}
+            {...sl}
+            onClick={
+              screenSize?.ltMedium && !sl.childNodes?.length && sidebarOpen
+                ? toggleSidebar
+                : undefined
+            }
+            shortened={!sidebarOpen}
+            selected={sl.href ? pathname.startsWith(sl.href) : undefined}
+          />
+        ))}
+      </List>
+    </SidebarBody>
+  );
+}

package/src/ui/Layout/CMSSidebar/CMSSidebarFooter/CMSSidebarFooter.module.css

@@ -0,0 +1,7 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 100%;
+  gap: var(--spacing-gap-2);
+}

package/src/ui/Layout/CMSSidebar/CMSSidebarFooter/CMSSidebarFooter.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useMounted } from "@studiocubics/hooks";
+import {
+  useSidebar,
+  SidebarFooter,
+  ThemeToggleListItem,
+  type ThemeObject,
+  List,
+} from "@studiocubics/ui";
+import { Moon, Sun, Monitor } from "lucide-react";
+import { useTheme } from "next-themes";
+import styles from "./CMSSidebarFooter.module.css";
+import { CurrentSystemUserButton } from "../../../System/SystemUser/CurrentSystemUserButton/CurrentSystemUserButton";
+
+export function CMSSidebarFooter() {
+  const { sidebarOpen } = useSidebar();
+  const { theme, setTheme } = useTheme();
+  const { mounted } = useMounted();
+  if (!mounted) return;
+  return (
+    <SidebarFooter>
+      <div className={styles.root}>
+        {theme && (
+          <List>
+            <ThemeToggleListItem
+              shortened={!sidebarOpen}
+              currentTheme={theme as keyof ThemeObject}
+              themeObject={{
+                dark: {
+                  icon: <Moon />,
+                  onClick: () => {
+                    setTheme("dark");
+                  },
+                },
+                light: {
+                  icon: <Sun />,
+                  onClick: () => {
+                    setTheme("light");
+                  },
+                },
+                system: {
+                  icon: <Monitor />,
+                  onClick: () => {
+                    setTheme("system");
+                  },
+                },
+              }}
+            />
+          </List>
+        )}
+        <CurrentSystemUserButton
+          clickable
+          variant={sidebarOpen ? "compact" : "image-only"}
+        />
+      </div>
+    </SidebarFooter>
+  );
+}

package/src/ui/Layout/CMSSidebar/CMSSidebarHeader/CMSSidebarHeader.module.css

@@ -0,0 +1,44 @@
+.root {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-inline: 8.33%;
+  gap: var(--spacing-gap);
+
+  padding-top: var(--spacing-gap-3);
+  padding-bottom: var(--spacing-gap-2);
+  transition: padding var(--transition-time) var(--transition-tf);
+}
+.logoContainer {
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.logo {
+  max-width: 6rem;
+  height: auto;
+  width: 40%;
+}
+
+@media (min-width: 600px) {
+  .root {
+    flex: 0 1 0%;
+    flex-direction: column;
+    align-items: center;
+    padding-inline: 0;
+  }
+  .root[data-open="true"] {
+    flex-direction: row;
+    justify-content: space-between;
+    padding-top: var(--spacing-gap-2);
+    & .logo {
+      width: 100%;
+    }
+  }
+  .logoContainer {
+    justify-content: center;
+  }
+}

package/src/ui/Layout/CMSSidebar/CMSSidebarHeader/CMSSidebarHeader.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useScreenSize } from "@studiocubics/hooks";
+import {
+  Button,
+  CubicsUILogo,
+  SidebarHeader,
+  useSidebar,
+} from "@studiocubics/ui";
+import styles from "./CMSSidebarHeader.module.css";
+import { cn } from "@studiocubics/utils";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
+
+export function CMSSidebarHeader() {
+  const { sidebarOpen, toggleSidebar } = useSidebar();
+  const screen = useScreenSize();
+  return (
+    <SidebarHeader className={styles.root}>
+      <div className={styles.logoContainer}>
+        <CubicsUILogo
+          onlyFavicon={screen?.gtSmall ? !sidebarOpen : false}
+          className={cn(styles.logo)}
+        />
+      </div>
+      <Button square onClick={toggleSidebar}>
+        {sidebarOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
+      </Button>
+    </SidebarHeader>
+  );
+}

package/src/ui/Layout/CMSSidebar/_index.ts

@@ -0,0 +1,4 @@
+export * from "./CMSSidebar";
+export * from "./CMSSidebarBody";
+export * from "./CMSSidebarFooter/CMSSidebarFooter";
+export * from "./CMSSidebarHeader/CMSSidebarHeader";

package/src/ui/Layout/_index.ts

@@ -0,0 +1,2 @@
+export * from "./CMSSecurityLayout"
+export * from "./CMSSidebar/_index"

package/src/ui/System/Auth/SignIn/SignIn.module.css

@@ -0,0 +1,50 @@
+/* Yes this is seperate its meant to be separate dont make the SignUp and SignIn styles into one eventhough they are the exact same. Just dont do it ples! */
+.root,
+.body,
+.header,
+.form,
+.footer {
+  display: flex;
+  flex-direction: column;
+}
+.root {
+  width: clamp(350px, 50vw, 550px);
+  align-items: center;
+  gap: var(--spacing-gap-7);
+  & p {
+    font-size: var(--fs-body2);
+    text-align: center;
+  }
+}
+.body {
+  width: 100%;
+  align-items: center;
+  gap: var(--spacing-gap-3);
+}
+.header {
+  align-items: center;
+  text-align: center;
+  gap: var(--spacing-gap);
+  & > h1 {
+    font-size: var(--fs-h3);
+  }
+  & > p {
+    font-size: var(--fs-body2);
+    color: var(--color-on-background-faint);
+  }
+}
+.form {
+  width: 100%;
+  gap: var(--spacing-gap-2);
+}
+.footer {
+  width: 100%;
+  padding: var(--spacing-gap-3);
+  align-items: center;
+  border-top: 1px solid var(--color-outline);
+}
+.error {
+  font-size: 2rem;
+  color: var(--color-error);
+}
+