npm - @proofkit/cli - Versions diffs - 1.0.0-beta.0 - Mend

@proofkit/cli 1.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (317) hide show

package/template/extras/src/app/clerk-auth/signup/[[...sign-up]]/page.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { SignUp } from "@clerk/nextjs";
+export default function Page() {
+  return <SignUp />;
+}

package/template/extras/src/app/layout/base.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+import { ColorSchemeScript, MantineProvider } from "@mantine/core";
+import { ModalsProvider } from "@mantine/modals";
+import { Notifications } from "@mantine/notifications";
+import "@mantine/core/styles.css";
+import "@mantine/notifications/styles.css";
+import "@mantine/dates/styles.css";
+import "mantine-react-table/styles.css";
+import { type Metadata } from "next";
+export const metadata: Metadata = {
+  title: "My ProofKit App",
+  description: "Generated by proofkit",
+  icons: [{ rel: "icon", url: "/favicon.ico" }],
+};
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en">
+      <head>
+        <ColorSchemeScript defaultColorScheme="auto" />
+      </head>
+      <body>
+        <MantineProvider defaultColorScheme="auto">
+          <Notifications />
+          <ModalsProvider>{children}</ModalsProvider>
+        </MantineProvider>
+      </body>
+    </html>
+  );
+}

package/template/extras/src/app/layout/main-shell.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import {
+  AppShell,
+  AppShellFooter,
+  AppShellHeader,
+  AppShellMain,
+  AppShellNavbar,
+} from "@mantine/core";
+import React from "react";
+/** Layout configuration Edit these values to change the layout */
+export const showHeader = false;
+export const showFooter = false;
+export const showLeftNavbar = false;
+export const headerHeight = 60;
+export const footerHeight = 60;
+export const leftNavbarWidth = 200;
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <AppShell
+      header={showHeader ? { height: headerHeight } : undefined}
+      footer={showFooter ? { height: footerHeight } : undefined}
+      navbar={
+        showLeftNavbar
+          ? { width: leftNavbarWidth, breakpoint: "sm" }
+          : undefined
+      }
+      padding="md"
+    >
+      {showHeader && <AppShellHeader>Header</AppShellHeader>}
+      {showLeftNavbar && <AppShellNavbar>Left Navbar</AppShellNavbar>}
+      <AppShellMain>{children}</AppShellMain>
+      {showFooter && <AppShellFooter>Footer</AppShellFooter>}
+    </AppShell>
+  );
+}

package/template/extras/src/app/layout/with-trpc-tw.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import "~/styles/globals.css";
+import { GeistSans } from "geist/font/sans";
+import { type Metadata } from "next";
+import { TRPCReactProvider } from "~/trpc/react";
+export const metadata: Metadata = {
+  title: "Create T3 App",
+  description: "Generated by proofkit",
+  icons: [{ rel: "icon", url: "/favicon.ico" }],
+};
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" className={`${GeistSans.variable}`}>
+      <body>
+        <TRPCReactProvider>{children}</TRPCReactProvider>
+      </body>
+    </html>
+  );
+}

package/template/extras/src/app/layout/with-trpc.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import "~/styles/globals.css";
+import { GeistSans } from "geist/font/sans";
+import { type Metadata } from "next";
+import { TRPCReactProvider } from "~/trpc/react";
+export const metadata: Metadata = {
+  title: "Create T3 App",
+  description: "Generated by proofkit",
+  icons: [{ rel: "icon", url: "/favicon.ico" }],
+};
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en">
+      <body className={GeistSans.className}>
+        <TRPCReactProvider>{children}</TRPCReactProvider>
+      </body>
+    </html>
+  );
+}

package/template/extras/src/app/layout/with-tw.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import "~/styles/globals.css";
+import { GeistSans } from "geist/font/sans";
+import { type Metadata } from "next";
+export const metadata: Metadata = {
+  title: "Create T3 App",
+  description: "Generated by proofkit",
+  icons: [{ rel: "icon", url: "/favicon.ico" }],
+};
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" className={`${GeistSans.variable}`}>
+      <body>{children}</body>
+    </html>
+  );
+}

package/template/extras/src/app/next-auth/layout.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import { auth } from "@/server/auth";
+import { Card, Center } from "@mantine/core";
+import { redirect } from "next/navigation";
+import React from "react";
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await auth();
+  if (session) {
+    return redirect("/");
+  }
+  return (
+    <Center h="100vh">
+      <Card withBorder radius="md" shadow="sm" w={"20rem"}>
+        {children}
+      </Card>
+    </Center>
+  );
+}

package/template/extras/src/app/next-auth/signin/page.tsx ADDED Viewed

@@ -0,0 +1,82 @@
+import { providerMap, signIn } from "@/server/auth";
+import {
+  Button,
+  Card,
+  Divider,
+  PasswordInput,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { AuthError } from "next-auth";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+export default async function SignInPage(props: {
+  searchParams: Promise<{ callbackUrl: string | undefined }>;
+}) {
+  const searchParams = await props.searchParams;
+  return (
+    <Stack>
+      <form
+        action={async (formData) => {
+          "use server";
+          try {
+            await signIn("credentials", formData);
+          } catch (error) {
+            if (error instanceof AuthError) {
+              return redirect(`/auth/signin?error=${error.type}`);
+            }
+            throw error;
+          }
+        }}
+      >
+        <Stack>
+          <TextInput type="email" name="email" id="email" label="Email" />
+          <PasswordInput name="password" id="password" label="Password" />
+          <Button type="submit">Sign in</Button>
+        </Stack>
+      </form>
+      {providerMap.length > 0 && (
+        <>
+          <Divider label="Or" />
+          {Object.values(providerMap).map((provider) => (
+            <form
+              key={provider.id}
+              action={async () => {
+                "use server";
+                try {
+                  await signIn(provider.id, {
+                    redirectTo: searchParams.callbackUrl ?? "",
+                  });
+                } catch (error) {
+                  // Signin can fail for a number of reasons, such as the user
+                  // not existing, or the user not having the correct role.
+                  // In some cases, you may want to redirect to a custom error
+                  if (error instanceof AuthError) {
+                    return redirect(`/auth/signin?error=${error.type}`);
+                  }
+                  // Otherwise if a redirects happens Next.js can handle it
+                  // so you can just re-thrown the error and let Next.js handle it.
+                  // Docs:
+                  // https://nextjs.org/docs/app/api-reference/functions/redirect#server-component
+                  throw error;
+                }
+              }}
+            >
+              <Button type="submit" variant="white">
+                <span>Sign in with {provider.name}</span>
+              </Button>
+            </form>
+          ))}
+        </>
+      )}
+      <Text size="sm" c="dimmed">
+        {"Don't have an account? "}<Link href="/auth/signup">Sign up</Link>
+      </Text>
+    </Stack>
+  );
+}

package/template/extras/src/app/next-auth/signup/action.ts ADDED Viewed

@@ -0,0 +1,24 @@
+"use server";
+import { signIn } from "@/server/auth";
+import { userSignUp } from "@/server/data/users";
+import { actionClient } from "@/server/safe-action";
+import { signUpSchema } from "./validation";
+export const signUpAction = actionClient
+  .schema(signUpSchema)
+  .action(async ({ parsedInput, ctx }) => {
+    const { email, password } = parsedInput;
+    await userSignUp({ email, password });
+    await signIn("credentials", {
+      email,
+      password,
+    });
+    return {
+      success: true,
+    };
+  });

package/template/extras/src/app/next-auth/signup/page.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, PasswordInput, Stack, Text, TextInput } from "@mantine/core";
+import { useHookFormAction } from "@next-safe-action/adapter-react-hook-form/hooks";
+import Link from "next/link";
+import React from "react";
+import { signUpAction } from "./action";
+import { signUpSchema } from "./validation";
+export default function SignUpPage(props: {
+  searchParams: Promise<{ callbackUrl: string | undefined }>;
+}) {
+  const { form, action, handleSubmitWithAction, resetFormAndAction } =
+    useHookFormAction(signUpAction, zodResolver(signUpSchema), {
+      actionProps: {},
+      formProps: {},
+      errorMapProps: {},
+    });
+  return (
+    <Stack>
+      <form onSubmit={handleSubmitWithAction}>
+        <Stack>
+          <TextInput type="email" {...form.register("email")} label="Email" />
+          <PasswordInput {...form.register("password")} label="Password" />
+          <PasswordInput
+            {...form.register("passwordConfirm")}
+            label="Confirm Password"
+          />
+          <Button type="submit">Sign up</Button>
+        </Stack>
+      </form>
+      <Text size="sm" c="dimmed">
+        Already have an account? <Link href="/auth/signin">Sign in</Link>
+      </Text>
+    </Stack>
+  );
+}

package/template/extras/src/app/next-auth/signup/validation.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { z } from "zod/v4";
+export const signUpSchema = z
+  .object({
+    email: z.string().email(),
+    password: z.string(),
+    passwordConfirm: z.string(),
+  })
+  .refine((data) => data.password === data.passwordConfirm, {
+    message: "Passwords don't match",
+    path: ["passwordConfirm"],
+  });

package/template/extras/src/app/page/base.tsx ADDED Viewed

@@ -0,0 +1,6 @@
+import { Text } from "@mantine/core";
+import Link from "next/link";
+export default function Home() {
+  return <Text>Welcome!</Text>;
+}

package/template/extras/src/app/page/with-auth-trpc-tw.tsx ADDED Viewed

@@ -0,0 +1,67 @@
+import Link from "next/link";
+import { LatestPost } from "~/app/_components/post";
+import { getServerAuthSession } from "~/server/auth";
+import { api, HydrateClient } from "~/trpc/server";
+export default async function Home() {
+  const hello = await api.post.hello({ text: "from tRPC" });
+  const session = await getServerAuthSession();
+  void api.post.getLatest.prefetch();
+  return (
+    <HydrateClient>
+      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
+        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
+          <h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
+            Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
+          </h1>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
+            <Link
+              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
+              href="https://create.t3.gg/en/usage/first-steps"
+              target="_blank"
+            >
+              <h3 className="text-2xl font-bold">First Steps →</h3>
+              <div className="text-lg">
+                Just the basics - Everything you need to know to set up your
+                database and authentication.
+              </div>
+            </Link>
+            <Link
+              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
+              href="https://create.t3.gg/en/introduction"
+              target="_blank"
+            >
+              <h3 className="text-2xl font-bold">Documentation →</h3>
+              <div className="text-lg">
+                Learn more about Create T3 App, the libraries it uses, and how
+                to deploy it.
+              </div>
+            </Link>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <p className="text-2xl text-white">
+              {hello ? hello.greeting : "Loading tRPC query..."}
+            </p>
+            <div className="flex flex-col items-center justify-center gap-4">
+              <p className="text-center text-2xl text-white">
+                {session && <span>Logged in as {session.user?.name}</span>}
+              </p>
+              <Link
+                href={session ? "/api/auth/signout" : "/api/auth/signin"}
+                className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20"
+              >
+                {session ? "Sign out" : "Sign in"}
+              </Link>
+            </div>
+          </div>
+          {session?.user && <LatestPost />}
+        </div>
+      </main>
+    </HydrateClient>
+  );
+}

package/template/extras/src/app/page/with-auth-trpc.tsx ADDED Viewed

@@ -0,0 +1,68 @@
+import Link from "next/link";
+import { LatestPost } from "~/app/_components/post";
+import { getServerAuthSession } from "~/server/auth";
+import { api, HydrateClient } from "~/trpc/server";
+import styles from "./index.module.css";
+export default async function Home() {
+  const hello = await api.post.hello({ text: "from tRPC" });
+  const session = await getServerAuthSession();
+  void api.post.getLatest.prefetch();
+  return (
+    <HydrateClient>
+      <main className={styles.main}>
+        <div className={styles.container}>
+          <h1 className={styles.title}>
+            Create <span className={styles.pinkSpan}>T3</span> App
+          </h1>
+          <div className={styles.cardRow}>
+            <Link
+              className={styles.card}
+              href="https://create.t3.gg/en/usage/first-steps"
+              target="_blank"
+            >
+              <h3 className={styles.cardTitle}>First Steps →</h3>
+              <div className={styles.cardText}>
+                Just the basics - Everything you need to know to set up your
+                database and authentication.
+              </div>
+            </Link>
+            <Link
+              className={styles.card}
+              href="https://create.t3.gg/en/introduction"
+              target="_blank"
+            >
+              <h3 className={styles.cardTitle}>Documentation →</h3>
+              <div className={styles.cardText}>
+                Learn more about Create T3 App, the libraries it uses, and how
+                to deploy it.
+              </div>
+            </Link>
+          </div>
+          <div className={styles.showcaseContainer}>
+            <p className={styles.showcaseText}>
+              {hello ? hello.greeting : "Loading tRPC query..."}
+            </p>
+            <div className={styles.authContainer}>
+              <p className={styles.showcaseText}>
+                {session && <span>Logged in as {session.user?.name}</span>}
+              </p>
+              <Link
+                href={session ? "/api/auth/signout" : "/api/auth/signin"}
+                className={styles.loginButton}
+              >
+                {session ? "Sign out" : "Sign in"}
+              </Link>
+            </div>
+          </div>
+          {session?.user && <LatestPost />}
+        </div>
+      </main>
+    </HydrateClient>
+  );
+}

package/template/extras/src/app/page/with-trpc-tw.tsx ADDED Viewed

@@ -0,0 +1,53 @@
+import Link from "next/link";
+import { LatestPost } from "~/app/_components/post";
+import { api, HydrateClient } from "~/trpc/server";
+export default async function Home() {
+  const hello = await api.post.hello({ text: "from tRPC" });
+  void api.post.getLatest.prefetch();
+  return (
+    <HydrateClient>
+      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
+        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
+          <h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
+            Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
+          </h1>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
+            <Link
+              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
+              href="https://create.t3.gg/en/usage/first-steps"
+              target="_blank"
+            >
+              <h3 className="text-2xl font-bold">First Steps →</h3>
+              <div className="text-lg">
+                Just the basics - Everything you need to know to set up your
+                database and authentication.
+              </div>
+            </Link>
+            <Link
+              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
+              href="https://create.t3.gg/en/introduction"
+              target="_blank"
+            >
+              <h3 className="text-2xl font-bold">Documentation →</h3>
+              <div className="text-lg">
+                Learn more about Create T3 App, the libraries it uses, and how
+                to deploy it.
+              </div>
+            </Link>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <p className="text-2xl text-white">
+              {hello ? hello.greeting : "Loading tRPC query..."}
+            </p>
+          </div>
+          <LatestPost />
+        </div>
+      </main>
+    </HydrateClient>
+  );
+}

package/template/extras/src/app/page/with-trpc.tsx ADDED Viewed

@@ -0,0 +1,54 @@
+import Link from "next/link";
+import { LatestPost } from "~/app/_components/post";
+import { api, HydrateClient } from "~/trpc/server";
+import styles from "./index.module.css";
+export default async function Home() {
+  const hello = await api.post.hello({ text: "from tRPC" });
+  void api.post.getLatest.prefetch();
+  return (
+    <HydrateClient>
+      <main className={styles.main}>
+        <div className={styles.container}>
+          <h1 className={styles.title}>
+            Create <span className={styles.pinkSpan}>T3</span> App
+          </h1>
+          <div className={styles.cardRow}>
+            <Link
+              className={styles.card}
+              href="https://create.t3.gg/en/usage/first-steps"
+              target="_blank"
+            >
+              <h3 className={styles.cardTitle}>First Steps →</h3>
+              <div className={styles.cardText}>
+                Just the basics - Everything you need to know to set up your
+                database and authentication.
+              </div>
+            </Link>
+            <Link
+              className={styles.card}
+              href="https://create.t3.gg/en/introduction"
+              target="_blank"
+            >
+              <h3 className={styles.cardTitle}>Documentation →</h3>
+              <div className={styles.cardText}>
+                Learn more about Create T3 App, the libraries it uses, and how
+                to deploy it.
+              </div>
+            </Link>
+          </div>
+          <div className={styles.showcaseContainer}>
+            <p className={styles.showcaseText}>
+              {hello ? hello.greeting : "Loading tRPC query..."}
+            </p>
+          </div>
+          <LatestPost />
+        </div>
+      </main>
+    </HydrateClient>
+  );
+}

package/template/extras/src/app/page/with-tw.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import Link from "next/link";
+export default function HomePage() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
+      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
+        <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
+          Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
+        </h1>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
+          <Link
+            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
+            href="https://create.t3.gg/en/usage/first-steps"
+            target="_blank"
+          >
+            <h3 className="text-2xl font-bold">First Steps →</h3>
+            <div className="text-lg">
+              Just the basics - Everything you need to know to set up your
+              database and authentication.
+            </div>
+          </Link>
+          <Link
+            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
+            href="https://create.t3.gg/en/introduction"
+            target="_blank"
+          >
+            <h3 className="text-2xl font-bold">Documentation →</h3>
+            <div className="text-lg">
+              Learn more about Create T3 App, the libraries it uses, and how to
+              deploy it.
+            </div>
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}

package/template/extras/src/components/clerk-auth/clerk-provider.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+"use client";
+import { ClerkProvider } from "@clerk/nextjs";
+import { dark } from "@clerk/themes";
+import { useComputedColorScheme } from "@mantine/core";
+export function ClerkAuthProvider({ children }: { children: React.ReactNode }) {
+  const computedColorScheme = useComputedColorScheme();
+  return (
+    <ClerkProvider
+      appearance={{
+        baseTheme: computedColorScheme === "dark" ? dark : undefined,
+      }}
+    >
+      {children}
+    </ClerkProvider>
+  );
+}