@studiocubics/cms 0.0.1 → 0.0.2

package/src/ui/System/Invitations/InvitationListActions.tsx

@@ -1,167 +0,0 @@
-"use client";
-
-import { useDisclosure } from "@studiocubics/hooks";
-import {
-  Button,
-  Dialog,
-  Switch,
-  TextInput,
-  ConfirmationForm,
-  Select,
-} from "@studiocubics/ui";
-import { Ban, Eye, EyeClosed, UserPlus } from "lucide-react";
-import Link from "next/link";
-import type { Invitation } from "@clerk/nextjs/server";
-import { initialiseForm, toCapitalised } from "@studiocubics/utils";
-import { useActionState, useEffect } from "react";
-import {
-  invitationDeleteAction,
-  invitationCreateAction,
-} from "../../../clerk/actions/invitations";
-import { roles } from "../../../clerk/rbacConfig";
-
-export function InvitationListActions({
-  status,
-}: {
-  status: ClerkInvitationListParams["status"];
-}) {
-  const isShowRevoked = status == "revoked";
-  return (
-    <>
-      <Link href={`?status=${!isShowRevoked ? "revoked" : ""}`}>
-        <Button
-          startIcon={isShowRevoked ? <Eye /> : <EyeClosed />}
-          size="sm"
-          color={isShowRevoked ? "primary" : undefined}
-        >
-          {isShowRevoked ? "Hide" : "Show"} Revoked
-        </Button>
-      </Link>
-      <InvitationCreateDialog />
-    </>
-  );
-}
-export function InvitationRevokeDialog({ id }: { id: Invitation["id"] }) {
-  const { open, handleOpen, handleStrictClose, handleClose } = useDisclosure();
-  const [state, action, pending] = useActionState(
-    invitationDeleteAction.bind(null, id),
-    initialiseForm(),
-  );
-  useEffect(() => {
-    if (state.success) {
-      handleClose();
-    }
-  }, [state]);
-  return (
-    <>
-      <Button
-        color="error"
-        type="submit"
-        startIcon={<Ban />}
-        onClick={handleOpen}
-        disabled={pending}
-      >
-        Revoke Invitation
-      </Button>
-      <Dialog open={open} onClose={handleStrictClose}>
-        <ConfirmationForm
-          variant="danger"
-          onCancel={handleClose}
-          action={action}
-          formTitle="Revoke Invitation"
-          confirmText="Revoke"
-          disabled={pending}
-        >
-          Are you sure you want to revoke this invitation?
-        </ConfirmationForm>
-      </Dialog>
-    </>
-  );
-}
-const initialInvitationCreateState = initialiseForm(
-  "emailAddress",
-  "expiresInDays",
-  "role",
-);
-export type InvitationCreateState = typeof initialInvitationCreateState;
-export function InvitationCreateDialog() {
-  const { open, handleOpen, handleStrictClose, handleClose } = useDisclosure();
-  const [state, action, pending] = useActionState<
-    InvitationCreateState,
-    FormData
-  >(invitationCreateAction, initialInvitationCreateState);
-  useEffect(() => {
-    if (state.success) {
-      handleClose();
-    }
-  }, [state]);
-  return (
-    <>
-      <Button
-        size="sm"
-        startIcon={<UserPlus />}
-        variant="contained"
-        onClick={handleOpen}
-      >
-        Invite New
-      </Button>
-      <Dialog open={open} onClose={handleStrictClose}>
-        <ConfirmationForm
-          onCancel={handleClose}
-          action={action}
-          formTitle="Invite New"
-          disabled={pending}
-        >
-          <TextInput
-            required
-            type="email"
-            name="emailAddress"
-            label="Email Address"
-            disabled={pending}
-            error={state.fieldErrors?.emailAddress}
-          />
-          <TextInput
-            type="number"
-            name="expiresInDays"
-            label="Expires in Days"
-            endIcon={<strong>Days&nbsp;&nbsp;</strong>}
-            defaultValue={30}
-            disabled={pending}
-            error={state.fieldErrors?.expiresInDays}
-          />
-          <Switch
-            name="ignoreExisting"
-            label="Ignore Existing Invites"
-            disabled={pending}
-          />
-          <Switch
-            name="notify"
-            value={true}
-            label="Notify with email"
-            disabled={pending}
-          />
-          <Select
-            name="role"
-            label="Select Role to assign user on sign up"
-            disabled={pending}
-            error={state.fieldErrors?.role}
-          >
-            {roles.map((r) => (
-              <option key={r} value={r}>
-                {toCapitalised(r)}
-              </option>
-            ))}
-          </Select>
-        </ConfirmationForm>
-      </Dialog>
-    </>
-  );
-}
-
-// emailAddress: string;
-// expiresInDays?: number;
-// ignoreExisting?: boolean;
-// notify?: boolean;
-// publicMetadata?: UserPublicMetadata;
-// redirectUrl?: string;
-// templateSlug?: "invitation" | "waitlist_invitation";

package/src/ui/System/Invitations/InvitationListCard.tsx

@@ -1,79 +0,0 @@
-import type { Invitation } from "@clerk/nextjs/server";
-import {
-  AccordionItem,
-  Chip,
-  CollectionItemCard,
-  CopyableText,
-  LabeledValue,
-  SectionWrapper,
-  Tooltip,
-} from "@studiocubics/ui";
-import { formatDate, relativeTime, toCapitalised } from "@studiocubics/utils";
-import { InvitationRevokeDialog } from "./InvitationListActions";
-import { ThemedMonacoEditor } from "../../Inputs/ThemedMonacoEditor/ThemedMonacoEditor";
-
-export function InvitationListCard({ invitation }: { invitation: Invitation }) {
-  return (
-    <AccordionItem
-      summary={
-        <CollectionItemCard
-          id={invitation.id}
-          title={invitation.emailAddress}
-          subtitle={
-            <>
-              Invited&thinsp;
-              <Tooltip>
-                <span>{relativeTime(invitation.createdAt)}</span>
-              </Tooltip>
-            </>
-          }
-          chip={toCapitalised(invitation.status)}
-          description={<span></span>}
-        />
-      }
-      name="InvitationListCard"
-    >
-      <SectionWrapper title={"Basic Details"} noBorders>
-        <LabeledValue label={"Id"}>{invitation.id}</LabeledValue>
-        <LabeledValue label={"Email Address"}>
-          {invitation.emailAddress}
-        </LabeledValue>
-        <LabeledValue label={"Status"}>
-          <Chip
-            color={
-              invitation.status == "accepted"
-                ? "primary"
-                : invitation.status == "pending"
-                  ? "secondary"
-                  : "error"
-            }
-          >
-            <strong>{toCapitalised(invitation.status)}</strong>
-          </Chip>
-        </LabeledValue>
-      </SectionWrapper>
-      <SectionWrapper title={"Timestamps"}>
-        <LabeledValue label={"Created At"}>
-          {formatDate(invitation.createdAt)}
-        </LabeledValue>
-        <LabeledValue label={"Updated At"}>
-          {formatDate(invitation.updatedAt)}
-        </LabeledValue>
-      </SectionWrapper>
-      <SectionWrapper title={"Invite Link"}>
-        <CopyableText>{invitation.url ?? "No link found!"}</CopyableText>
-      </SectionWrapper>
-      <SectionWrapper title={"Public Metadata"}>
-        <ThemedMonacoEditor
-          options={{ readOnly: true }}
-          height="10vh"
-          defaultLanguage="json"
-          defaultValue={JSON.stringify(invitation.publicMetadata)}
-        />
-      </SectionWrapper>
-      {invitation.status == "pending" && (
-        <InvitationRevokeDialog id={invitation.id} />
-      )}
-    </AccordionItem>
-  );
-}

package/src/ui/System/Invitations/InvitationListPage.tsx

@@ -1,32 +0,0 @@
-import { INVITATIONS_PAGE_LIMIT as limit } from "../../../constants/pageLimits";
-import { PageLayoutPagination } from "@studiocubics/ui";
-import { InvitationListPagination } from "./InvitationListPagination";
-import { InvitationList } from "./InvitationList";
-import type { SecurityPageProps } from "../types";
-import { InvitationListActions } from "./InvitationListActions";
-
-export async function InvitationListPage({
-  searchParams,
-  securityLinks,
-}: SecurityPageProps) {
-  const sp = await searchParams;
-  const status = sp.status as ClerkInvitationListParams["status"];
-  const page = Number(sp.page ?? 1);
-  const offset = (page - 1) * limit;
-  const params = {
-    limit,
-    offset,
-    status,
-  };
-
-  return (
-    <PageLayoutPagination
-      size="sm"
-      title={securityLinks[3]?.children}
-      actions={<InvitationListActions status={status} />}
-      paginationComponent={<InvitationListPagination page={page} {...params} />}
-    >
-      <InvitationList {...params} />
-    </PageLayoutPagination>
-  );
-}

package/src/ui/System/Invitations/InvitationListPagination.tsx

@@ -1,19 +0,0 @@
-import { NextSSRPagination } from "@studiocubics/next";
-import { invitationListReadAction } from "../../../clerk/actions/invitations";
-
-export async function InvitationListPagination({
-  page,
-  ...params
-}: {
-  page: number;
-  limit: number;
-} & ClerkInvitationListParams) {
-  const invitationList = await invitationListReadAction(params);
-  return (
-    <NextSSRPagination
-      page={page}
-      limit={params.limit}
-      total={invitationList.totalCount}
-    />
-  );
-}

package/src/ui/System/Permissions/RoleListCard.tsx

@@ -1,33 +0,0 @@
-import {
-  AccordionItem,
-  CollectionItemCard,
-  SectionWrapper,
-} from "@studiocubics/ui";
-import { RolePermissionsTable } from "./RolePermissionsTable";
-import type { Role, RoleDoc } from "../../../clerk/rbacConfig";
-
-export interface RoleCardProps {
-  role: Role;
-  rbacConfig: RoleDoc;
-}
-
-export function RoleListCard(props: RoleCardProps) {
-  const { role, rbacConfig } = props;
-
-  return (
-    <AccordionItem
-      name="RoleCard"
-      summary={
-        <CollectionItemCard
-          title={role}
-          chip={rbacConfig.isSystem ? "System User" : ""}
-          description={rbacConfig.desc}
-        />
-      }
-    >
-      <SectionWrapper title={`${role}'s Permissions`} noBorders>
-        <RolePermissionsTable {...props} />
-      </SectionWrapper>
-    </AccordionItem>
-  );
-}

package/src/ui/System/Permissions/RolePermissionsPage.tsx

@@ -1,18 +0,0 @@
-import { PageLayoutPagination, type TabProps } from "@studiocubics/ui";
-import { RoleListCard } from "./RoleListCard";
-import { RBAC_CONFIG } from "../../../clerk/rbacConfig";
-
-export function RolePermissionsPage({
-  securityLinks,
-}: {
-  securityLinks: TabProps[];
-}) {
-  return (
-    <PageLayoutPagination size="sm" title={securityLinks[1]?.children}>
-      {(Object.keys(RBAC_CONFIG) as (keyof typeof RBAC_CONFIG)[]).map((k) => {
-        const item = RBAC_CONFIG[k];
-        return <RoleListCard key={k} role={k} rbacConfig={item} />;
-      })}
-    </PageLayoutPagination>
-  );
-}

package/src/ui/System/Permissions/RolePermissionsTable.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { Check, X } from "lucide-react";
-import type { RoleCardProps } from "./RoleListCard";
-import { useCallback, useMemo } from "react";
-import { Table, type TableData } from "@studiocubics/ui";
-
-export function RolePermissionsTable({ rbacConfig }: RoleCardProps) {
-  const permissions = rbacConfig.permissions;
-  const icon = useCallback((check?: boolean) => {
-    return check ? <Check /> : <X />;
-  }, []);
-  const tableData: TableData = useMemo(
-    () => [
-      ["", "create", "delete", "read", "update"],
-      ...permissions.map((p) => [
-        p.resource,
-        icon(p.actions.create),
-        icon(p.actions.delete),
-        icon(p.actions.read),
-        icon(p.actions.update),
-      ]),
-    ],
-    [permissions],
-  );
-
-  if (!permissions || !permissions.length)
-    return (
-      <p>
-        This is a root system user role, all resource actions are permitted to
-        anyone with this role. Make sure to always have atleast one admin user.
-      </p>
-    );
-
-  return <Table data={tableData} />;
-}

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

@@ -1,5 +0,0 @@
-.title {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-gap);
-}

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

@@ -1,102 +0,0 @@
-"use client";
-
-import { useClerk, useUser } from "@clerk/nextjs";
-import { useAnchorElement, useDisclosure } from "@studiocubics/hooks";
-import {
-  Chip,
-  ConfirmationForm,
-  Dialog,
-  IdentityDisplay,
-  type IdentityDisplayProps,
-  List,
-  ListItem,
-  Popover,
-  Skeleton,
-} from "@studiocubics/ui";
-import { toCapitalised } from "@studiocubics/utils";
-import { LogOut, UserCog } from "lucide-react";
-import type { SubmitEvent } from "react";
-import styles from "./CurrentSystemUserButton.module.css";
-import type { Role } from "../../../../clerk/rbacConfig";
-
-export function CurrentSystemUserButton(
-  props: { clickable?: boolean } & Omit<IdentityDisplayProps, "profileName">,
-) {
-  const user = useUser();
-
-  const { clickable = true, ...rest } = props;
-  const { open, anchorEl, handleClick, handleClose } = useAnchorElement();
-
-  if (!user.isLoaded) return <Skeleton height={78} />;
-
-  return (
-    <>
-      <IdentityDisplay
-        onClick={clickable ? handleClick : undefined}
-        profileImage={user.user?.imageUrl ?? ""}
-        role={user.user?.primaryEmailAddress?.emailAddress}
-        {...rest}
-        profileName={
-          <div className={styles.title}>
-            <h4>{user.user?.fullName}</h4>{" "}
-            <Chip size="sm" color="primary">
-              <strong>
-                {toCapitalised(user.user?.publicMetadata.role as Role)}
-              </strong>
-            </Chip>
-          </div>
-        }
-      />
-      {clickable && (
-        <Popover
-          anchorEl={anchorEl}
-          open={open}
-          onClose={handleClose}
-          anchorPosition={{ vertical: "top", horizontal: "right" }}
-          transformOrigin={{ vertical: "bottom", horizontal: "left" }}
-        >
-          <List className="surfaceContainer">
-            <ListItem
-              startIcon={<UserCog />}
-              href="/dashboard/security/account"
-            >
-              Account Settings
-            </ListItem>
-            <Logout />
-          </List>
-        </Popover>
-      )}
-    </>
-  );
-}
-export function Logout() {
-  const { open, handleClose, handleStrictClose, handleOpen } = useDisclosure();
-  const clerk = useClerk();
-  async function handleSubmit(e: SubmitEvent<HTMLFormElement>) {
-    e.preventDefault();
-    await clerk.signOut();
-  }
-  return (
-    <>
-      <ListItem
-        className={styles.logoutButton}
-        onClick={handleOpen}
-        //   disabled
-        startIcon={<LogOut />}
-        color="error"
-      >
-        Log out
-      </ListItem>
-      <Dialog open={open} onClose={handleStrictClose}>
-        <ConfirmationForm
-          variant="danger"
-          formTitle="Logout"
-          onCancel={handleClose}
-          onSubmit={handleSubmit}
-        >
-          Are you sure you want to sign out of this account?
-        </ConfirmationForm>
-      </Dialog>
-    </>
-  );
-}

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

@@ -1,12 +0,0 @@
-import { currentUser } from "@clerk/nextjs/server";
-import { redirect } from "next/navigation";
-import { SystemUserPageContent } from "./SystemUserPageContent";
-import { auth } from "../../../clerk/auth";
-
-export async function CurrentSystemUserPage() {
-  const user = await currentUser();
-  const session = await auth();
-  const allowEdit = await session.hasPermission("systemUsers", "update");
-  if (!user) redirect("/auth/signIn/");
-  return <SystemUserPageContent user={user} allowEdit={allowEdit} />;
-}

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

@@ -1,45 +0,0 @@
-"use client";
-
-import type { User } from "@clerk/nextjs/server";
-import { useDisclosure } from "@studiocubics/hooks";
-import {
-  ConfirmationForm,
-  Dialog,
-  ListItem,
-  type ListItemProps,
-  TextInput,
-} from "@studiocubics/ui";
-import { Trash } from "lucide-react";
-
-export function SystemUserDeleteListItem(
-  props: ListItemProps & { uid: User["id"]; fullName?: User["fullName"] },
-) {
-  const { uid, fullName, ...rest } = props;
-  const { open, handleOpen, handleStrictClose, handleClose } = useDisclosure();
-  return (
-    <>
-      <ListItem
-        {...rest}
-        color="error"
-        startIcon={<Trash />}
-        onClick={handleOpen}
-      >
-        Delete User
-      </ListItem>
-      <Dialog open={open} onClose={handleStrictClose}>
-        <ConfirmationForm
-          formTitle="Delete System User"
-          variant="danger"
-          onCancel={handleClose}
-        >
-          Are you sure you want to delete {fullName ? `${fullName}'s` : "this"}{" "}
-          system account?
-          <br />
-          All information will be deleted, this action is irreversible and
-          cannot be undone.
-          <TextInput fullWidth />
-        </ConfirmationForm>
-      </Dialog>
-    </>
-  );
-}

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

@@ -1,6 +0,0 @@
-.root {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  width: 100%;
-}

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

@@ -1,71 +0,0 @@
-"use client";
-
-import { Button, IdentityDisplay, TransitionAnimation } from "@studiocubics/ui";
-import styles from "./SystemUserDetails.module.css";
-import { Edit } from "lucide-react";
-import { useDisclosure } from "@studiocubics/hooks";
-import { type User } from "@clerk/nextjs/server";
-import { SystemUserDetailsForm } from "../SystemUserDetailsForm/SystemUserDetailsForm";
-
-interface SystemUserDetailsProps {
-  id: User["id"];
-  fullName: User["fullName"];
-  firstName: User["firstName"];
-  lastName?: User["lastName"];
-  imageUrl: User["imageUrl"];
-  emailAddress?: NonNullable<User["primaryEmailAddress"]>["emailAddress"];
-  editable?: boolean;
-}
-export function SystemUserDetails({
-  id,
-  fullName,
-  firstName,
-  lastName,
-  imageUrl,
-  emailAddress,
-  editable,
-}: SystemUserDetailsProps) {
-  const { open, handleOpen, handleClose } = useDisclosure();
-  return (
-    <>
-      <TransitionAnimation
-        in={open}
-        transformOrigin={"top right"}
-        mountOnly
-        unmountOnExit
-      >
-        <SystemUserDetailsForm
-          imageUrl={imageUrl}
-          firstName={firstName}
-          lastName={lastName}
-          onClose={handleClose}
-        />
-      </TransitionAnimation>
-      <TransitionAnimation
-        in={!open}
-        transformOrigin={"top"}
-        mountOnly
-        unmountOnExit
-      >
-        <div className={styles.root}>
-          <IdentityDisplay
-            profileName={fullName}
-            profileImage={imageUrl}
-            role={
-              <p>
-                {emailAddress}
-                <br />
-                <strong>{id}</strong>
-              </p>
-            }
-          />
-          {editable && (
-            <Button size="sm" startIcon={<Edit />} onClick={handleOpen}>
-              Edit Details
-            </Button>
-          )}
-        </div>
-      </TransitionAnimation>
-    </>
-  );
-}

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

@@ -1,7 +0,0 @@
-.form {
-  flex: 1;
-}
-.formRow {
-  display: flex;
-  gap: var(--spacing-gap);
-}