@proofkit/cli 1.0.0-beta.0

package/template/nextjs/README.md

@@ -0,0 +1,27 @@
+# ProofKit NextJS Template
+
+This is a [NextJS](https://nextjs.org/) project bootstrapped with `@proofkit/cli`. Learn more at [proofkit.dev](https://proofkit.dev)
+
+## What's next? How do I make an app with this?
+
+While this template is designed to be a minimal starting point, the proofkit CLI will guide you through adding additional features and pages.
+
+To add new things to your project, simply run the `proofkit` script from the project's root directory.
+
+e.g. `npm run proofkit` or `pnpm proofkit` etc.
+
+For more information, see the full [ProofKit documentation](https://proofkit.dev).
+
+## Project Structure
+
+ProofKit projects have an opinionated structure to help you get started and some conventions must be maintained to ensure that the CLI can properly inject new features and components.
+
+The `src` directory is the home for your application code. It is used for most things except for configuration and is organized as follows:
+
+- `app` - NextJS app router, where your pages and routes are defined
+- `components` - Shared components used throughout the app
+- `server` - Code that connects to backend databases and services that should not be exposed in the browser
+
+Anytime you see an `internal` folder, you should not modify any files inside. These files are maintained exclusively by the ProofKit CLI and changes to them may be overwritten.
+
+Anytime you see a componet file that begins with `slot-`, you _may_ modify the content, but do not rename, remove, or move them. These are desigend to be customized, but are still used by the CLI to inject additional content. If a slot is not needed by your app, you can have the compoment return `null` or an empty fragment: `<></>`

package/template/nextjs/_gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

package/template/nextjs/next.config.ts

@@ -0,0 +1,12 @@
+import { type NextConfig } from "next";
+
+// Import env here to validate during build.
+import "./src/config/env";
+
+const nextConfig: NextConfig = {
+  experimental: {
+    optimizePackageImports: ["@mantine/core", "@mantine/hooks"],
+  },
+};
+
+export default nextConfig;

package/template/nextjs/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "template",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "proofkit": "proofkit",
+    "typegen": "proofkit typegen",
+    "deploy": "proofkit deploy"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@next-safe-action/adapter-react-hook-form": "^1.0.13",
+    "next-safe-action": "^7.10.4",
+    "react-hook-form": "^7.54.2",
+    "@tabler/icons-react": "^3.30.0",
+    "@mantine/core": "^7.17.0",
+    "@mantine/dates": "^7.17.0",
+    "@mantine/hooks": "^7.17.0",
+    "@mantine/modals": "^7.17.0",
+    "@mantine/notifications": "^7.17.0",
+    "mantine-react-table": "2.0.0-beta.9",
+    "@t3-oss/env-nextjs": "^0.12.0",
+    "dayjs": "^1.11.13",
+    "next": "^15.2.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "npm:types-react@19.0.12",
+    "@types/react-dom": "npm:types-react-dom@19.0.4",
+    "eslint": "^9.14.0",
+    "eslint-config-next": "15.2.3",
+    "postcss": "^8.4.41",
+    "postcss-preset-mantine": "^1.17.0",
+    "postcss-simple-vars": "^7.0.1",
+    "typescript": "^5"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "npm:types-react@19.0.0-rc.1",
+      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
+    }
+  }
+}

package/template/nextjs/postcss.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    "postcss-preset-mantine": {},
+    "postcss-simple-vars": {
+      variables: {
+        "mantine-breakpoint-xs": "36em",
+        "mantine-breakpoint-sm": "48em",
+        "mantine-breakpoint-md": "62em",
+        "mantine-breakpoint-lg": "75em",
+        "mantine-breakpoint-xl": "88em",
+      },
+    },
+  },
+};

package/template/nextjs/proofkit.json

@@ -0,0 +1 @@
+{ "auth": { "type": "none" }, "envFile": ".env", "appType": "browser" }

package/template/nextjs/src/app/(main)/layout.tsx

@@ -0,0 +1,6 @@
+import AppShell from "@/components/AppShell/internal/AppShell";
+import React from "react";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <AppShell>{children}</AppShell>;
+}

package/template/nextjs/src/app/(main)/page.tsx

@@ -0,0 +1,90 @@
+import {
+  ActionIcon,
+  Anchor,
+  AppShellFooter,
+  Box,
+  Code,
+  Container,
+  Group,
+  Image,
+  px,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { IconBrandGithub, IconExternalLink } from "@tabler/icons-react";
+
+export default function Home() {
+  return (
+    <>
+      <Container mt="5rem">
+        <Stack gap="xl" ta="center">
+          <Image
+            src="https://raw.githubusercontent.com/proofgeist/proofkit/dde6366c529104658dfba67a8fc2910a8644fc64/docs/src/assets/proofkit.png"
+            alt="ProofKit"
+            style={{
+              marginRight: "auto",
+              marginLeft: "auto",
+            }}
+            w={"auto"}
+            mah={px("16rem")}
+          />
+          <Title order={1}>Welcome!</Title>
+
+          <Text style={{ textWrap: "balance" }}>
+            This is the base template home page. To add more pages, components,
+            or other features, run the ProofKit CLI from within your project.
+          </Text>
+          <Code block>__PNPM_COMMAND__ proofkit</Code>
+
+          <Text style={{ textWrap: "balance" }}>
+            To change this page, open <Code>src/app/(main)/page.tsx</Code>
+          </Text>
+          <Box>
+            <Anchor
+              href="https://proofkit.dev"
+              target="_blank"
+              rel="proofkit-app"
+              style={{ display: "inline-flex", alignItems: "center", gap: 4 }}
+            >
+              ProofKit Docs <IconExternalLink size={px("1rem")} />
+            </Anchor>
+          </Box>
+        </Stack>
+      </Container>
+      <AppShellFooter withBorder={false}>
+        <Container h="100%" mb="1rem">
+          <Group justify="space-between">
+            <Group>
+              <Text size="sm" c="dimmed">
+                Sponsored by{" "}
+                <Anchor
+                  href="https://proofgeist.com"
+                  target="_blank"
+                  rel="proofkit-app"
+                >
+                  Proof+Geist
+                </Anchor>{" "}
+                and{" "}
+                <Anchor
+                  href="https://ottomatic.cloud"
+                  target="_blank"
+                  rel="proofkit-app"
+                >
+                  Ottomatic
+                </Anchor>
+              </Text>
+            </Group>
+            <Group>
+              <a href="https://github.com/proofgeist/proofkit" target="_blank">
+                <ActionIcon variant="subtle" color="gray" size="lg">
+                  <IconBrandGithub size={px("1.25rem")} />
+                </ActionIcon>
+              </a>
+            </Group>
+          </Group>
+        </Container>
+      </AppShellFooter>
+    </>
+  );
+}

package/template/nextjs/src/app/layout.tsx

@@ -0,0 +1,39 @@
+import { Suspense } from "react";
+import { theme } from "@/config/theme/mantine-theme";
+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 "@/config/theme/globals.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 suppressHydrationWarning lang="en">
+      <head>
+        <Suspense>
+          <ColorSchemeScript defaultColorScheme="auto" />
+        </Suspense>
+      </head>
+      <body suppressHydrationWarning>
+        <MantineProvider defaultColorScheme="auto" theme={theme}>
+          <Notifications />
+          <ModalsProvider>{children}</ModalsProvider>
+        </MantineProvider>
+      </body>
+    </html>
+  );
+}

package/template/nextjs/src/app/navigation.tsx

@@ -0,0 +1,12 @@
+import { type ProofKitRoute } from "@proofkit/cli";
+
+export const primaryRoutes: ProofKitRoute[] = [
+  {
+    label: "Dashboard",
+    type: "link",
+    href: "/",
+    exactMatch: true,
+  },
+];
+
+export const secondaryRoutes: ProofKitRoute[] = [];

package/template/nextjs/src/components/AppLogo.tsx

@@ -0,0 +1,6 @@
+import { IconInfinity } from "@tabler/icons-react";
+import React from "react";
+
+export default function AppLogo() {
+  return <IconInfinity size={32} />;
+}

package/template/nextjs/src/components/AppShell/internal/AppShell.tsx

@@ -0,0 +1,21 @@
+import { Header } from "@/components/AppShell/internal/Header";
+import { AppShell, AppShellHeader, AppShellMain } from "@mantine/core";
+import React from "react";
+
+import { headerHeight } from "./config";
+
+export default function MainAppShell({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <AppShell header={{ height: headerHeight }} padding="md">
+      <AppShellHeader>
+        <Header />
+      </AppShellHeader>
+
+      <AppShellMain>{children}</AppShellMain>
+    </AppShell>
+  );
+}

package/template/nextjs/src/components/AppShell/internal/Header.module.css

@@ -0,0 +1,40 @@
+.header {
+  /* height: rem(56px); */
+  margin-bottom: rem(120px);
+  background-color: var(--mantine-color-body);
+  border-bottom: rem(1px) solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.inner {
+  /* height: rem(56px); */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.link {
+  display: block;
+  line-height: 1;
+  padding: rem(8px) rem(12px);
+  border-radius: var(--mantine-radius-sm);
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+  cursor: pointer;
+  background: none;
+  border: none;
+
+  @mixin hover {
+    background-color: light-dark(
+      var(--mantine-color-gray-0),
+      var(--mantine-color-dark-6)
+    );
+  }
+
+  [data-mantine-color-scheme] &[data-active] {
+    background-color: var(--mantine-primary-color-filled);
+    color: var(--mantine-color-white);
+  }
+}

package/template/nextjs/src/components/AppShell/internal/Header.tsx

@@ -0,0 +1,34 @@
+import { Box, Container, Group } from "@mantine/core";
+
+import SlotHeaderCenter from "../slot-header-center";
+import SlotHeaderLeft from "../slot-header-left";
+import SlotHeaderRight from "../slot-header-right";
+import { headerHeight } from "./config";
+import classes from "./Header.module.css";
+import HeaderMobileMenu from "./HeaderMobileMenu";
+
+export function Header() {
+  return (
+    <header className={classes.header} style={{ height: headerHeight }}>
+      <Container size="md" className={classes.inner} style={{ height: "100%" }}>
+        <Group
+          justify="space-between"
+          align="center"
+          w="100%"
+          style={{ height: "100%" }}
+        >
+          <SlotHeaderLeft />
+          <Box visibleFrom="md">
+            <SlotHeaderCenter />
+          </Box>
+          <Box visibleFrom="md">
+            <SlotHeaderRight />
+          </Box>
+          <Box hiddenFrom="md">
+            <HeaderMobileMenu />
+          </Box>
+        </Group>
+      </Container>
+    </header>
+  );
+}

package/template/nextjs/src/components/AppShell/internal/HeaderMobileMenu.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Burger, Menu } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+
+import SlotHeaderMobileMenuContent from "../slot-header-mobile-content";
+
+export default function HeaderMobileMenu() {
+  const [opened, { toggle }] = useDisclosure(false);
+
+  return (
+    <Menu
+      opened={opened}
+      onClose={toggle}
+      styles={{ item: { padding: "1rem" } }}
+      shadow="md"
+      radius="md"
+    >
+      <Menu.Target>
+        <Burger opened={opened} hiddenFrom="sm" onClick={toggle} size="sm" />
+      </Menu.Target>
+      <Menu.Dropdown w={"90%"}>
+        <SlotHeaderMobileMenuContent closeMenu={toggle} />
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

package/template/nextjs/src/components/AppShell/internal/HeaderNavLink.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { type ProofKitRoute } from "@proofkit/cli";
+import { usePathname } from "next/navigation";
+import React from "react";
+
+import classes from "./Header.module.css";
+
+export default function HeaderNavLink(route: ProofKitRoute) {
+  const pathname = usePathname();
+
+  if (route.type === "function") {
+    return <button className={classes.link} onClick={route.onClick}>{route.label}</button>;
+  }
+
+  const isActive = route.exactMatch
+    ? pathname === route.href
+    : pathname.startsWith(route.href);
+
+  if (route.type === "link") {
+    return (
+      <a
+        href={route.href}
+        className={classes.link}
+        data-active={isActive || undefined}
+      >
+        {route.label}
+      </a>
+    );
+  }
+}

package/template/nextjs/src/components/AppShell/internal/config.ts

@@ -0,0 +1 @@
+export const headerHeight = 56;

package/template/nextjs/src/components/AppShell/slot-header-center.tsx

@@ -0,0 +1,13 @@
+/**
+ * DO NOT REMOVE / RENAME THIS FILE
+ *
+ * You may CUSTOMIZE the content of this file, but the ProofKit CLI expects
+ * this file to exist and may use it to inject content for other components.
+ *
+ * If you don't want it to be used, you may return null or an empty fragment
+ */
+export function SlotHeaderCenter() {
+  return null;
+}
+
+export default SlotHeaderCenter;

package/template/nextjs/src/components/AppShell/slot-header-left.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+
+import AppLogo from "../AppLogo";
+
+/**
+ * DO NOT REMOVE / RENAME THIS FILE
+ *
+ * You may CUSTOMIZE the content of this file, but the ProofKit CLI expects this file to exist and
+ * may use it to inject content for other components.
+ *
+ * If you don't want it to be used, you may return null or an empty fragment
+ */
+export function SlotHeaderLeft() {
+  return (
+    <>
+      <Link href="/" style={{ display: "inline-flex", alignItems: "center" }}>
+        <AppLogo />
+      </Link>
+    </>
+  );
+}
+
+export default SlotHeaderLeft;

package/template/nextjs/src/components/AppShell/slot-header-mobile-content.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { primaryRoutes } from "@/app/navigation";
+import { Menu } from "@mantine/core";
+import { useRouter } from "next/navigation";
+
+/**
+ * DO NOT REMOVE / RENAME THIS FILE
+ *
+ * You may CUSTOMIZE the content of this file, but the ProofKit CLI expects
+ * this file to exist and may use it to inject content for other components.
+ *
+ * If you don't want it to be used, you may return null or an empty fragment
+ */
+export function SlotHeaderMobileMenuContent({
+  closeMenu,
+}: {
+  closeMenu: () => void;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      {primaryRoutes.map((route) => (
+        <Menu.Item
+          key={route.label}
+          leftSection={route.icon}
+          onClick={() => {
+            closeMenu();
+            if (route.type === "function") {
+              route.onClick();
+            } else if (route.type === "link") {
+              router.push(route.href);
+            }
+          }}
+        >
+          {route.label}
+        </Menu.Item>
+      ))}
+    </>
+  );
+}
+
+export default SlotHeaderMobileMenuContent;

package/template/nextjs/src/components/AppShell/slot-header-right.tsx

@@ -0,0 +1,26 @@
+import { primaryRoutes } from "@/app/navigation";
+import { Group } from "@mantine/core";
+
+import HeaderNavLink from "./internal/HeaderNavLink";
+
+/**
+ * DO NOT REMOVE / RENAME THIS FILE
+ *
+ * You may CUSTOMIZE the content of this file, but the ProofKit CLI expects
+ * this file to exist and may use it to inject content for other components.
+ *
+ * If you don't want it to be used, you may return null or an empty fragment
+ */
+export function SlotHeaderRight() {
+  return (
+    <>
+      <Group gap={5} visibleFrom="xs">
+        {primaryRoutes.map((route) => (
+          <HeaderNavLink key={route.label} {...route} />
+        ))}
+      </Group>
+    </>
+  );
+}
+
+export default SlotHeaderRight;

package/template/nextjs/src/config/env.ts

@@ -0,0 +1,13 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod/v4";
+
+export const env = createEnv({
+  server: {
+    NODE_ENV: z
+      .enum(["development", "test", "production"])
+      .default("development"),
+  },
+  client: {},
+  // For Next.js >= 13.4.4, you only need to destructure client variables:
+  experimental__runtimeEnv: {},
+});

package/template/nextjs/src/config/theme/globals.css

@@ -0,0 +1 @@
+/* Add global styles here */

package/template/nextjs/src/config/theme/mantine-theme.ts

@@ -0,0 +1,22 @@
+import { createTheme, type MantineColorsTuple } from "@mantine/core";
+
+// generate your own set of colors here: https://mantine.dev/colors-generator
+const brandColor: MantineColorsTuple = [
+  "#ffebff",
+  "#f5d5fb",
+  "#e6a8f3",
+  "#d779eb",
+  "#cb51e4",
+  "#c337e0",
+  "#c029df",
+  "#a91cc6",
+  "#9715b1",
+  "#84099c",
+];
+
+export const theme = createTheme({
+  primaryColor: "brand",
+  colors: {
+    brand: brandColor,
+  },
+});

package/template/nextjs/src/server/safe-action.ts

@@ -0,0 +1,3 @@
+import { createSafeActionClient } from "next-safe-action";
+
+export const actionClient = createSafeActionClient();

package/template/nextjs/src/utils/notification-helpers.ts

@@ -0,0 +1,32 @@
+import {
+  showNotification,
+  type NotificationData,
+} from "@mantine/notifications";
+
+export function showErrorNotification(): void;
+export function showErrorNotification(props: NotificationData): void;
+export function showErrorNotification(message: string): void;
+export function showErrorNotification(args?: string | NotificationData): void {
+  const message =
+    typeof args === "string" ? args : "An unexpected error occurred.";
+  const defaultProps = typeof args === "string" ? {} : (args ?? {});
+
+  showNotification({ color: "red", title: "Error", message, ...defaultProps });
+}
+
+export function showSuccessNotification(): void;
+export function showSuccessNotification(props: NotificationData): void;
+export function showSuccessNotification(message: string): void;
+export function showSuccessNotification(
+  args?: string | NotificationData
+): void {
+  const message = typeof args === "string" ? args : "Success!";
+  const defaultProps = typeof args === "string" ? {} : (args ?? {});
+
+  showNotification({
+    color: "green",
+    title: "Success",
+    message,
+    ...defaultProps,
+  });
+}