@studiocubics/cms 0.0.1 → 0.0.2

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

@@ -1,114 +0,0 @@
-"use client";
-
-import type { User } from "@clerk/nextjs/server";
-import {
-  type CardProps,
-  Card,
-  ConfirmationForm,
-  IdentityDisplay,
-  Button,
-  TextInput,
-  toast,
-} from "@studiocubics/ui";
-import styles from "./SystemUserDetailsForm.module.css";
-import { initialiseForm } from "@studiocubics/utils";
-import { systemUserDetailsUpdateAction } from "../../../../clerk/_index";
-import { useActionState, useEffect, useRef, useState } from "react";
-
-const initialSystemUserDetailsUpdateState = initialiseForm(
-  "firstName",
-  "lastName",
-  "imageUrl",
-);
-export type SystemUserDetailsUpdateState =
-  typeof initialSystemUserDetailsUpdateState;
-
-export function SystemUserDetailsForm({
-  imageUrl,
-  firstName,
-  lastName,
-  onClose,
-  ...rest
-}: {
-  imageUrl?: User["imageUrl"];
-  firstName?: User["firstName"];
-  lastName?: User["lastName"];
-  onClose(): void;
-} & CardProps) {
-  const [state, action, pending] = useActionState(
-    systemUserDetailsUpdateAction.bind(null, "hello"),
-    initialSystemUserDetailsUpdateState,
-  );
-  const [imagePreview, setImagePreview] = useState(imageUrl);
-  const [inputImage, setInputImage] = useState<File>();
-  const imageInputRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    if (inputImage) setImagePreview(URL.createObjectURL(inputImage));
-  }, [inputImage]);
-
-  return (
-    <Card fullWidth {...rest}>
-      <ConfirmationForm
-        formTitle="Edit Details"
-        onCancel={onClose}
-        action={action}
-        disabled={pending}
-      >
-        <IdentityDisplay
-          profileImage={imagePreview}
-          profileName={
-            <div className={styles.formRow}>
-              <Button
-                size="sm"
-                variant="outlined"
-                disabled={pending}
-                onClick={() => imageInputRef.current?.click()}
-              >
-                Upload
-              </Button>
-              <input
-                type="file"
-                accept="image/jpg, image/png"
-                ref={imageInputRef}
-                name={"imageFile"}
-                onChange={(e) =>
-                  e.target?.files && setInputImage(e.target.files[0])
-                }
-                hidden
-                disabled={pending}
-              />
-              <Button
-                size="sm"
-                color="error"
-                onClick={() => toast("hello")}
-                disabled={pending}
-              >
-                Remove
-              </Button>
-            </div>
-          }
-          role={"Recommended size 1:1, up to 10MB."}
-        />
-        <div className={styles.formRow}>
-          <TextInput
-            fullWidth
-            label="First Name"
-            defaultValue={firstName!}
-            name="firstName"
-            error={state.fieldErrors?.firstName}
-            disabled={pending}
-          />
-          <TextInput
-            fullWidth
-            label="Last Name"
-            defaultValue={lastName!}
-            name="lastName"
-            error={state.fieldErrors?.lastName}
-            disabled={pending}
-          />
-        </div>
-      </ConfirmationForm>
-    </Card>
-  );
-}

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

@@ -1,18 +0,0 @@
-import { systemUserListReadAction } from "../../../clerk/actions/systemUsers";
-import type { Role } from "../../../clerk/rbacConfig";
-import { SystemUserListCard } from "./SystemUserListCard";
-
-export async function SystemUserList(params: ClerkUserListParams) {
-  const systemUserList = await systemUserListReadAction(params);
-  return systemUserList.data.map((user) => (
-    <SystemUserListCard
-      key={user.id}
-      id={user.id}
-      fullName={user.fullName}
-      imageUrl={user.imageUrl}
-      emailAddress={user.primaryEmailAddress?.emailAddress}
-      role={user.publicMetadata.role as Role}
-      lastSignInAt={user.lastSignInAt}
-    />
-  ));
-}

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

@@ -1,17 +0,0 @@
-import { Button } from "@studiocubics/ui";
-import { Search, ChartNoAxesGantt } from "lucide-react";
-import { InvitationCreateDialog } from "../Invitations/InvitationListActions";
-
-export function SystemUserListActions() {
-  return (
-    <>
-      <InvitationCreateDialog />
-      <Button size="sm" square>
-        <Search />
-      </Button>
-      <Button size="sm" square>
-        <ChartNoAxesGantt />
-      </Button>
-    </>
-  );
-}

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

@@ -1,85 +0,0 @@
-"use client";
-
-import type { User } from "@clerk/nextjs/server";
-import {
-  CollectionItemCard,
-  CollectionItemCardActions,
-  type DocumentAction,
-  List,
-  ListItem,
-} from "@studiocubics/ui";
-import { toCapitalised } from "@studiocubics/utils";
-import {
-  BrickWallShield,
-  EllipsisVertical,
-  History,
-  OctagonX,
-} from "lucide-react";
-import Link from "next/link";
-import { SystemUserDeleteListItem } from "./SystemUserActions";
-import type { Route } from "next";
-import type { Role } from "../../../clerk/rbacConfig";
-
-export interface SystemUserListCardProps {
-  id: User["id"];
-  fullName: User["fullName"];
-  imageUrl: User["imageUrl"];
-  emailAddress?: NonNullable<User["primaryEmailAddress"]>["emailAddress"];
-  role?: Role;
-  lastSignInAt?: User["lastActiveAt"];
-}
-
-export function SystemUserListCard(props: SystemUserListCardProps) {
-  const { id, fullName, imageUrl, emailAddress, role, lastSignInAt } = props;
-  const actions: DocumentAction[] = [
-    {
-      actionType: "link",
-      icon: <BrickWallShield />,
-      label: "View Sessions",
-      href: `/dashboard/security/systemUsers/${id}/sessions`,
-      prefetch: true,
-      // @ts-expect-error
-      // This is dumb polymorphism garbage!
-      as: Link,
-    },
-    {
-      actionType: "popover",
-      icon: <EllipsisVertical />,
-      popoverChildren: (
-        <List className="surfaceContainer">
-          <SystemUserDeleteListItem uid={id} fullName={fullName} />
-          <ListItem
-            {...{
-              startIcon: <OctagonX />,
-              children: "Ban User",
-              color: "error",
-            }}
-          />
-        </List>
-      ),
-    },
-  ];
-
-  return (
-    <CollectionItemCard
-      as={Link}
-      href={`/dashboard/security/systemUsers/${id}` as Route}
-      title={fullName ?? "Name is missing"}
-      thumbnail={<img src={imageUrl} alt={fullName ?? ""} />}
-      subtitle={emailAddress}
-      chip={toCapitalised(role)}
-      description={
-        lastSignInAt ? (
-          <>
-            <History size={16} />
-            &ensp;Last Active&ensp;
-            <strong>{new Date(lastSignInAt).toDateString()}</strong>
-          </>
-        ) : (
-          "No activity found!"
-        )
-      }
-      footer={<CollectionItemCardActions actions={actions} />}
-    />
-  );
-}

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

@@ -1,33 +0,0 @@
-import { SYSTEM_USERS_PAGE_LIMIT as limit } from "../../../constants/pageLimits";
-import type { SecurityPageProps } from "../types";
-import { PageLayoutPagination } from "@studiocubics/ui";
-import { SystemUserListActions } from "./SystemUserListActions";
-import { SystemUserList } from "./SystemUserList";
-import { SystemUserListPagination } from "./SystemUserListPagination";
-
-export async function SystemUserListPage({
-  searchParams,
-  securityLinks,
-}: SecurityPageProps) {
-  const sp = await searchParams;
-  const page = Number(sp.page ?? 1);
-  const orderBy = String(sp.orderBy ?? "created_at");
-  const query = String(sp.query ?? "");
-  const offset = (page - 1) * limit;
-  const params = {
-    limit,
-    offset,
-    orderBy,
-    query,
-  };
-  return (
-    <PageLayoutPagination
-      actions={<SystemUserListActions />}
-      size="sm"
-      title={securityLinks[2]?.children}
-      paginationComponent={<SystemUserListPagination page={page} {...params} />}
-    >
-      <SystemUserList {...params} />
-    </PageLayoutPagination>
-  );
-}

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

@@ -1,19 +0,0 @@
-import { NextSSRPagination } from "@studiocubics/next";
-import { systemUserListReadAction } from "../../../clerk/actions/systemUsers";
-
-export async function SystemUserListPagination({
-  page,
-  ...params
-}: {
-  page: number;
-  limit: number;
-} & ClerkUserListParams) {
-  const systemUsersList = await systemUserListReadAction(params);
-  return (
-    <NextSSRPagination
-      page={page}
-      limit={params.limit}
-      total={systemUsersList.totalCount}
-    />
-  );
-}

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

@@ -1,30 +0,0 @@
-import { Breadcrumbs, PageTitle } from "@studiocubics/ui";
-import { SystemUserPageContent } from "./SystemUserPageContent";
-import Link from "next/link";
-import { auth } from "../../../clerk/auth";
-import { systemUserReadAction } from "../../../clerk/actions/systemUsers";
-export async function SystemUserPage({
-  params,
-}: PageProps<"/dashboard/security/systemUsers/[userId]">) {
-  const userId = (await params).userId;
-  const session = await auth();
-  const allowEdit = await session.hasPermission("systemUsers", "update");
-  const user = await systemUserReadAction(userId);
-  return (
-    <>
-      <PageTitle
-        size="sm"
-        title={
-          <Breadcrumbs defaultActive={1}>
-            <h4>
-              <Link href={"/dashboard/security/systemUsers"}>System Users</Link>
-            </h4>
-            <h4>{user.fullName}&apos;s Account</h4>
-          </Breadcrumbs>
-        }
-        noBorders
-      />
-      <SystemUserPageContent user={user} allowEdit={allowEdit} />
-    </>
-  );
-}

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

@@ -1,54 +0,0 @@
-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

@@ -1,17 +0,0 @@
-.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

@@ -1,64 +0,0 @@
-"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

@@ -1,51 +0,0 @@
-"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

@@ -1,56 +0,0 @@
-"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/WelcomePage/WelcomePage.module.css

@@ -1,18 +0,0 @@
-.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

@@ -1,43 +0,0 @@
-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/utils/proxyFunctions.ts

@@ -1,37 +0,0 @@
-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)(.*)",
-  ],
-};