@studiocubics/cms 0.0.1 → 0.0.2

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

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

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

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

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

@@ -1,30 +0,0 @@
-"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/_index.ts

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

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

@@ -1,50 +0,0 @@
-/* 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);
-}
-

package/src/ui/System/Auth/SignIn/SignIn.tsx

@@ -1,79 +0,0 @@
-"use client";
-
-import { useUser } from "@clerk/nextjs";
-import {
-  Button,
-  Card,
-  CubicsUILogo,
-  PasswordInput,
-  TextInput,
-  PoweredByBanner,
-} from "@studiocubics/ui";
-import { useRouter } from "next/navigation";
-import { type ChangeEvent, useEffect } from "react";
-import styles from "./SignIn.module.css";
-import { useSignInForm } from "./useSignInForm";
-import Link from "next/link";
-
-export function SignIn() {
-  const { user } = useUser();
-  const router = useRouter();
-  const { formState, setFormState, pending, error, handleSubmit } =
-    useSignInForm();
-
-  useEffect(() => {
-    if (user?.id) {
-      router.push("/dashboard");
-    }
-  }, [user]);
-
-  function handleFormStateChange(e: ChangeEvent<HTMLInputElement>) {
-    const target = e.currentTarget as HTMLInputElement;
-    setFormState({ ...formState, [target.id]: target.value });
-  }
-
-  return (
-    <Card size="lg" className={styles.root}>
-      <div className={styles.body}>
-        <CubicsUILogo width={"120px"} />
-        <header className={styles.header}>
-          <h1>Sign in to your Account</h1>
-          <p>Welcome Back! Lets get started.</p>
-        </header>
-        <form onSubmit={handleSubmit} className={styles.form}>
-          <div id="clerk-captcha" />
-
-          <TextInput
-            label={"Email Address"}
-            id="email"
-            value={formState.email}
-            onChange={handleFormStateChange}
-            required
-            fullWidth
-            type="email"
-          />
-          <PasswordInput
-            label={"Password"}
-            id="password"
-            value={formState.password}
-            onChange={handleFormStateChange}
-            required
-            fullWidth
-            disabled={pending}
-          />
-          <Button type="submit" variant="contained">
-            Confirm
-          </Button>
-          {error && <p className={styles.error}>{error}</p>}
-        </form>
-      </div>
-      <div className={styles.footer}>
-        <p>
-          Dont have an account?{" "}
-          <Link href={"/auth/requestAccount"}>Request</Link> one from an admin
-        </p>
-        <PoweredByBanner />
-      </div>
-    </Card>
-  );
-}

package/src/ui/System/Auth/SignIn/useSignInForm.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { useSignIn } from "@clerk/nextjs";
-import { type SubmitEvent, useState } from "react";
-
-export function useSignInForm() {
-  const clerkSignIn = useSignIn();
-  const [formState, setFormState] = useState({
-    email: "",
-    password: "",
-  });
-  const [pending, setPending] = useState(false);
-  const [error, setError] = useState("");
-
-  async function handleSubmit(e: SubmitEvent) {
-    e.preventDefault();
-    const { email, password } = formState;
-    if (!clerkSignIn.isLoaded) return;
-
-    try {
-      setPending(true);
-      const signInAttempt = await clerkSignIn.signIn.create({
-        identifier: email,
-        password,
-      });
-      if (signInAttempt.status === "complete") {
-        await clerkSignIn.setActive({
-          session: signInAttempt.createdSessionId,
-        });
-      } else {
-        throw new Error("Sign In failed to complete");
-      }
-    } catch (err) {
-      console.error(err);
-      if (err instanceof Error) setError(err.message);
-    } finally {
-      setPending(false);
-    }
-  }
-
-  return { formState, setFormState, pending, error, handleSubmit };
-}

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

@@ -1,48 +0,0 @@
-.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);
-}

package/src/ui/System/Auth/SignUp/SignUp.tsx

@@ -1,138 +0,0 @@
-"use client";
-
-import { useUser } from "@clerk/nextjs";
-import {
-  Card,
-  CubicsUILogo,
-  TextInput,
-  PasswordInput,
-  Button,
-  PoweredByBanner,
-} from "@studiocubics/ui";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState, useEffect, type ChangeEvent } from "react";
-import styles from "./SignUp.module.css";
-import { useSignUpForm } from "./useSignUpForm";
-
-export function SignUp() {
-  const { user } = useUser();
-  const router = useRouter();
-  const { ticket, setFormState, formState, pending, error, handleSubmit } =
-    useSignUpForm();
-  const [step, setStep] = useState(0);
-
-  // Handle signed-in users visiting this page
-  // This will also redirect the user once they finish the sign-up process
-  useEffect(() => {
-    if (user?.id) {
-      router.push("/dashboard");
-    }
-  }, [user]);
-
-  // If there is no invitation ticket, restrict access to this page
-  if (!ticket) {
-    return (
-      <Card size="lg" className={styles.root}>
-        <p>
-          Looks like you haven&lsquo;t been invited!
-          <br /> Please <Link href={"/auth/requestAccount"}>request</Link> an
-          invitation from an admin.
-        </p>
-      </Card>
-    );
-  }
-
-  function handleFormStateChange(e: ChangeEvent<HTMLInputElement>) {
-    setFormState({ ...formState, [e.target.id]: e.target.value });
-  }
-
-  const Step0 = (
-    <>
-      <TextInput
-        label={"First Name"}
-        id="firstName"
-        value={formState.firstName}
-        onChange={handleFormStateChange}
-        required
-        fullWidth
-      />
-      <TextInput
-        label={"Last Name"}
-        id="lastName"
-        value={formState.lastName}
-        onChange={handleFormStateChange}
-        required
-        fullWidth
-      />
-      <Button
-        type="button"
-        variant="contained"
-        onClick={() => setStep(1)}
-        fullWidth
-        disabled={!formState.firstName || !formState.lastName}
-      >
-        Continue
-      </Button>
-    </>
-  );
-  const Step1 = (
-    <>
-      <PasswordInput
-        label={"Password"}
-        id="password"
-        value={formState.password}
-        onChange={handleFormStateChange}
-        required
-        fullWidth
-        disabled={pending}
-        disableStrengthMeter={false}
-      />
-      <PasswordInput
-        label={"Confirm Password"}
-        id="confirmPassword"
-        value={formState.confirmPassword}
-        onChange={handleFormStateChange}
-        required
-        fullWidth
-        disabled={pending}
-      />
-      <Button disabled={pending} variant="contained" type="submit" fullWidth>
-        Register
-      </Button>
-    </>
-  );
-  return (
-    <Card size="lg" className={styles.root}>
-      <div className={styles.body}>
-        <CubicsUILogo width={"120px"} />
-        <header className={styles.header}>
-          <h1>Create your account</h1>
-          <p>Welcome! Please fill in the details to get started.</p>
-        </header>
-        <form onSubmit={handleSubmit} className={styles.form}>
-          <div id="clerk-captcha" />
-          {step == 0 && Step0}
-          {step == 1 && Step1}
-          {step > 0 && (
-            <Button
-              disabled={pending}
-              type="button"
-              onClick={() => setStep(step - 1)}
-              fullWidth
-            >
-              Go back
-            </Button>
-          )}
-          {error && <p className={styles.error}>{error}</p>}
-        </form>
-      </div>
-      <div className={styles.footer}>
-        <p>
-          Already have an account? <Link href={"/auth/signIn/"}>Sign In</Link>
-        </p>
-        <PoweredByBanner />
-      </div>
-    </Card>
-  );
-}

package/src/ui/System/Auth/SignUp/useSignUpForm.tsx

@@ -1,54 +0,0 @@
-"use client";
-
-import { useSignUp } from "@clerk/nextjs";
-import { useSearchParams } from "next/navigation";
-import { type SubmitEvent, useState } from "react";
-
-export function useSignUpForm() {
-  const clerkSignUp = useSignUp();
-  const [formState, setFormState] = useState({
-    firstName: "",
-    lastName: "",
-    password: "",
-    confirmPassword: "",
-  });
-  const [pending, setPending] = useState(false);
-  const [error, setError] = useState("");
-
-  const ticket = useSearchParams().get("__clerk_ticket");
-
-  async function handleSubmit(e: SubmitEvent) {
-    e.preventDefault();
-    const { firstName, lastName, password, confirmPassword } = formState;
-    if (!clerkSignUp.isLoaded) return;
-    if (!ticket) return;
-    if (password != confirmPassword) {
-      return setError("Passwords dont match!");
-    }
-
-    try {
-      setPending(true);
-      const signUpAttempt = await clerkSignUp.signUp.create({
-        strategy: "ticket",
-        ticket,
-        firstName,
-        lastName,
-        password,
-      });
-      if (signUpAttempt.status === "complete") {
-        await clerkSignUp.setActive({
-          session: signUpAttempt.createdSessionId,
-        });
-      } else {
-        throw new Error("Sign Up failed to complete");
-      }
-    } catch (err) {
-      console.error(err);
-      if (err instanceof Error) setError(err.message);
-    } finally {
-      setPending(false);
-    }
-  }
-
-  return { formState, setFormState, pending, ticket, error, handleSubmit };
-}

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

@@ -1,9 +0,0 @@
-import { invitationListReadAction } from "../../../clerk/actions/invitations";
-import { InvitationListCard } from "./InvitationListCard";
-
-export async function InvitationList(params: ClerkInvitationListParams) {
-  const invitationList = await invitationListReadAction(params);
-  return invitationList.data.map((inv) => (
-    <InvitationListCard key={inv.id} invitation={inv} />
-  ));
-}