@proofkit/cli 1.1.6 → 1.2.0-beta.0

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

@@ -0,0 +1,35 @@
+"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-shadcn/src/components/AppShell/internal/config.ts

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

package/template/nextjs-shadcn/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-shadcn/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-shadcn/src/components/AppShell/slot-header-mobile-content.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { primaryRoutes } from "@/app/navigation";
+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 (
+    <div className="flex flex-col">
+      {primaryRoutes.map((route) => (
+        <button
+          key={route.label}
+          className="flex items-center gap-2 rounded px-3 py-2 text-left hover:bg-zinc-100 dark:hover:bg-zinc-800"
+          onClick={() => {
+            closeMenu();
+            if (route.type === "function") {
+              route.onClick();
+            } else if (route.type === "link") {
+              router.push(route.href);
+            }
+          }}
+        >
+          {route.icon}
+          <span>{route.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default SlotHeaderMobileMenuContent;

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

@@ -0,0 +1,25 @@
+import { primaryRoutes } from "@/app/navigation";
+
+import HeaderNavLink from "./internal/HeaderNavLink";
+import { ModeToggle } from "../mode-toggle";
+
+/**
+ * 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 (
+    <div className="flex items-center space-x-1">
+      {primaryRoutes.map((route) => (
+        <HeaderNavLink key={route.label} {...route} />
+      ))}
+      <ModeToggle />
+    </div>
+  );
+}
+
+export default SlotHeaderRight;

package/template/nextjs-shadcn/src/components/providers.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { ThemeProvider } from "./theme-provider";
+import { Toaster } from "./ui/sonner";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider attribute="class" disableTransitionOnChange>
+      {children}
+      <Toaster richColors />
+    </ThemeProvider>
+  );
+}

package/template/nextjs-shadcn/src/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type * as React from "react";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

package/template/nextjs-shadcn/src/lib/env.ts

@@ -0,0 +1,12 @@
+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: {},
+  experimental__runtimeEnv: {},
+});

package/template/nextjs-shadcn/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/template/{nextjs → nextjs-shadcn}/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ES2017",
     "lib": [
       "dom",
       "dom.iterable",
@@ -26,7 +27,7 @@
         "./src/*"
       ]
     },
-    "target": "ES2017"
+    "strictNullChecks": true
   },
   "include": [
     "next-env.d.ts",
@@ -37,4 +38,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}

package/template/pages/nextjs/table-edit/page.tsx

@@ -1,9 +1,9 @@
 import { __CLIENT_NAME__ } from "@/config/schemas/__SOURCE_NAME__/client";
-import { Stack, Text, Code } from "@mantine/core";
+import { Code, Stack, Text } from "@mantine/core";
 import React from "react";
 
-import TableContent from "./table";
 import { idFieldName } from "./schema";
+import TableContent from "./table";
 
 export default async function TablePage() {
   // this function is limited to 100 records by default. To load more, see the other table templates from the docs
@@ -17,12 +17,12 @@ export default async function TablePage() {
           This table allows editing. Double-click on a cell to edit the value.
         </Text>
         <Text size="sm" c="dimmed">
-          NOTE: This feature requires a primary key field on your API layout. If your
-          primary key field is not <Code>{idFieldName}</Code>, update the
+          NOTE: This feature requires a primary key field on your API layout. If
+          your primary key field is not <Code>{idFieldName}</Code>, update the
           <Code>idFieldName</Code> variable in the <Code>schema.ts</Code> file.
         </Text>
       </div>
       <TableContent data={data.map((d) => d.fieldData)} />
     </Stack>
   );
-}
+}

package/template/pages/nextjs/table-edit/table.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import { type __TYPE_NAME__ } from "@/config/schemas/__SOURCE_NAME__/__SCHEMA_NAME__";
+import { showErrorNotification } from "@/utils/notification-helpers";
 import {
   MantineReactTable,
+  useMantineReactTable,
   type MRT_Cell,
   type MRT_ColumnDef,
-  useMantineReactTable,
 } from "mantine-react-table";
 import React from "react";
+
 import { updateRecord } from "./actions";
-import { showErrorNotification } from "@/utils/notification-helpers";
 import { idFieldName } from "./schema";
 
 type TData = __TYPE_NAME__;
@@ -39,5 +40,6 @@ export default function MyTable({ data }: { data: TData[] }) {
         handleSaveCell(cell, event.target.value);
       },
     }),
-  });  return <MantineReactTable table={table} />;
+  });
+  return <MantineReactTable table={table} />;
 }

package/template/pages/nextjs/table-infinite/query.ts

@@ -1,12 +1,13 @@
 "use client";
 
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { fetchData } from "./actions";
-import { useMemo } from "react";
 import type {
-  MRT_SortingState,
   MRT_ColumnFiltersState,
+  MRT_SortingState,
 } from "mantine-react-table";
+import { useMemo } from "react";
+
+import { fetchData } from "./actions";
 
 export function useAllData({
   sorting,

package/template/pages/nextjs/table-infinite/table.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { __TYPE_NAME__ } from "@/config/schemas/__SOURCE_NAME__/__SCHEMA_NAME__";
+import { Text } from "@mantine/core";
 import {
   createMRTColumnHelper,
   MantineReactTable,
@@ -11,14 +12,14 @@ import {
   useMantineReactTable,
 } from "mantine-react-table";
 import React, {
-  type UIEvent,
   useCallback,
   useEffect,
   useRef,
   useState,
+  type UIEvent,
 } from "react";
+
 import { useAllData } from "./query";
-import { Text } from "@mantine/core";
 
 type TData = __TYPE_NAME__;
 

package/template/pages/nextjs/table-infinite-edit/page.tsx

@@ -1,8 +1,8 @@
-import { Stack, Text, Code } from "@mantine/core";
+import { Code, Stack, Text } from "@mantine/core";
 import React from "react";
 
-import TableContent from "./table";
 import { idFieldName } from "./schema";
+import TableContent from "./table";
 
 export default async function TablePage() {
   return (
@@ -12,12 +12,12 @@ export default async function TablePage() {
           This table allows editing. Double-click on a cell to edit the value.
         </Text>
         <Text size="sm" c="dimmed">
-          NOTE: This feature requires a primary key field on your API layout. If your
-          primary key field is not <Code>{idFieldName}</Code>, update the
+          NOTE: This feature requires a primary key field on your API layout. If
+          your primary key field is not <Code>{idFieldName}</Code>, update the
           <Code>idFieldName</Code> variable in the <Code>schema.ts</Code> file.
         </Text>
       </div>
-      <TableContent  />
+      <TableContent />
     </Stack>
   );
-}
+}

package/template/pages/nextjs/table-infinite-edit/query.ts

@@ -66,7 +66,7 @@ export function useAllData({
             data: page.data.map((row) =>
               row.fieldData[idFieldName] === newRecord[idFieldName]
                 ? { ...row, fieldData: { ...row.fieldData, ...newRecord } }
-                : row,
+                : row
             ),
           })),
         };
@@ -77,5 +77,11 @@ export function useAllData({
     },
   });
 
-  return { ...qr, data: flatData, totalDBRowCount, totalFetched, updateRecord: updateRecordMutation.mutate };
+  return {
+    ...qr,
+    data: flatData,
+    totalDBRowCount,
+    totalFetched,
+    updateRecord: updateRecordMutation.mutate,
+  };
 }

package/template/pages/vite-wv/table/index.tsx

@@ -1,13 +1,14 @@
+import FullScreenLoader from "@/components/full-screen-loader";
+import { __TYPE_NAME__ } from "@/config/schemas/__SOURCE_NAME__/__SCHEMA_NAME__";
+import { __CLIENT_NAME__ } from "@/config/schemas/__SOURCE_NAME__/client";
+import { Stack, Text } from "@mantine/core";
 import { createFileRoute } from "@tanstack/react-router";
 import {
   MantineReactTable,
   MRT_ColumnDef,
   useMantineReactTable,
 } from "mantine-react-table";
-import { __CLIENT_NAME__ } from "@/config/schemas/__SOURCE_NAME__/client";
-import { __TYPE_NAME__ } from "@/config/schemas/__SOURCE_NAME__/__SCHEMA_NAME__";
-import { Stack, Text } from "@mantine/core";
-import FullScreenLoader from "@/components/full-screen-loader";
+
 export const Route = createFileRoute("/")({
   component: RouteComponent,
   pendingComponent: () => <FullScreenLoader />,

package/template/pages/vite-wv/table-edit/index.tsx

@@ -1,3 +1,7 @@
+import FullScreenLoader from "@/components/full-screen-loader";
+import { __TYPE_NAME__ } from "@/config/schemas/__SOURCE_NAME__/__SCHEMA_NAME__";
+import { __CLIENT_NAME__ } from "@/config/schemas/__SOURCE_NAME__/client";
+import { Code, Stack, Text } from "@mantine/core";
 import { createFileRoute } from "@tanstack/react-router";
 import {
   MantineReactTable,
@@ -5,10 +9,6 @@ import {
   MRT_ColumnDef,
   useMantineReactTable,
 } from "mantine-react-table";
-import { __CLIENT_NAME__ } from "@/config/schemas/__SOURCE_NAME__/client";
-import { __TYPE_NAME__ } from "@/config/schemas/__SOURCE_NAME__/__SCHEMA_NAME__";
-import { Code, Stack, Text } from "@mantine/core";
-import FullScreenLoader from "@/components/full-screen-loader";
 
 export const Route = createFileRoute("/")({
   component: RouteComponent,
@@ -61,8 +61,8 @@ function RouteComponent() {
           This table allows editing. Double-click on a cell to edit the value.
         </Text>
         <Text size="sm" c="dimmed">
-          NOTE: This feature requires a primary key field on your API layout. If your
-          primary key field is not <Code>{idFieldName}</Code>, update the
+          NOTE: This feature requires a primary key field on your API layout. If
+          your primary key field is not <Code>{idFieldName}</Code>, update the
           <Code>idFieldName</Code> variable in the code.
         </Text>
       </div>

package/template/vite-wv/src/main.tsx

@@ -37,6 +37,6 @@ if (!rootElement.innerHTML) {
   root.render(
     <MantineProvider theme={theme} forceColorScheme="light">
       <RouterProvider router={router} />
-    </MantineProvider>
+    </MantineProvider>,
   );
 }

package/template/vite-wv/src/routeTree.gen.ts

@@ -10,85 +10,85 @@
 
 // Import Routes
 
-import { Route as rootRoute } from './routes/__root'
-import { Route as SecondaryImport } from './routes/secondary'
-import { Route as IndexImport } from './routes/index'
+import { Route as rootRoute } from "./routes/__root";
+import { Route as SecondaryImport } from "./routes/secondary";
+import { Route as IndexImport } from "./routes/index";
 
 // Create/Update Routes
 
 const SecondaryRoute = SecondaryImport.update({
-  id: '/secondary',
-  path: '/secondary',
+  id: "/secondary",
+  path: "/secondary",
   getParentRoute: () => rootRoute,
-} as any)
+} as any);
 
 const IndexRoute = IndexImport.update({
-  id: '/',
-  path: '/',
+  id: "/",
+  path: "/",
   getParentRoute: () => rootRoute,
-} as any)
+} as any);
 
 // Populate the FileRoutesByPath interface
 
-declare module '@tanstack/react-router' {
+declare module "@tanstack/react-router" {
   interface FileRoutesByPath {
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
-      preLoaderRoute: typeof IndexImport
-      parentRoute: typeof rootRoute
-    }
-    '/secondary': {
-      id: '/secondary'
-      path: '/secondary'
-      fullPath: '/secondary'
-      preLoaderRoute: typeof SecondaryImport
-      parentRoute: typeof rootRoute
-    }
+    "/": {
+      id: "/";
+      path: "/";
+      fullPath: "/";
+      preLoaderRoute: typeof IndexImport;
+      parentRoute: typeof rootRoute;
+    };
+    "/secondary": {
+      id: "/secondary";
+      path: "/secondary";
+      fullPath: "/secondary";
+      preLoaderRoute: typeof SecondaryImport;
+      parentRoute: typeof rootRoute;
+    };
   }
 }
 
 // Create and export the route tree
 
 export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-  '/secondary': typeof SecondaryRoute
+  "/": typeof IndexRoute;
+  "/secondary": typeof SecondaryRoute;
 }
 
 export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-  '/secondary': typeof SecondaryRoute
+  "/": typeof IndexRoute;
+  "/secondary": typeof SecondaryRoute;
 }
 
 export interface FileRoutesById {
-  __root__: typeof rootRoute
-  '/': typeof IndexRoute
-  '/secondary': typeof SecondaryRoute
+  __root__: typeof rootRoute;
+  "/": typeof IndexRoute;
+  "/secondary": typeof SecondaryRoute;
 }
 
 export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/secondary'
-  fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/secondary'
-  id: '__root__' | '/' | '/secondary'
-  fileRoutesById: FileRoutesById
+  fileRoutesByFullPath: FileRoutesByFullPath;
+  fullPaths: "/" | "/secondary";
+  fileRoutesByTo: FileRoutesByTo;
+  to: "/" | "/secondary";
+  id: "__root__" | "/" | "/secondary";
+  fileRoutesById: FileRoutesById;
 }
 
 export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-  SecondaryRoute: typeof SecondaryRoute
+  IndexRoute: typeof IndexRoute;
+  SecondaryRoute: typeof SecondaryRoute;
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   SecondaryRoute: SecondaryRoute,
-}
+};
 
 export const routeTree = rootRoute
   ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>()
+  ._addFileTypes<FileRouteTypes>();
 
 /* ROUTE_MANIFEST_START
 {