@proofkit/cli 1.0.0-beta.0

package/template/vite-wv/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/vite-wv/proofkit.json

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

package/template/vite-wv/scripts/launch-fm.sh

@@ -0,0 +1,3 @@
+source .env
+SERVER_HOST=$(echo $FM_SERVER | sed 's|https://||' | sed 's|/.*||')
+open "fmp://$SERVER_HOST/$FM_DATABASE?script=Launch Web Viewer for Dev"

package/template/vite-wv/scripts/upload.js

@@ -0,0 +1,21 @@
+import open from "open";
+import { resolve } from "path";
+import dotenv from "dotenv";
+import { fileURLToPath } from "url";
+
+const currentDirectory = fileURLToPath(new URL(".", import.meta.url));
+
+const { parsed } = dotenv.config({
+  path: resolve(currentDirectory, "../.env"),
+});
+
+const server = new URL(parsed.FM_SERVER).hostname;
+const file = parsed.FM_DATABASE.replace(/\.fmp12$/, "");
+const uploadScript = "UploadWebviewerWidget";
+
+const thePath = resolve(currentDirectory, "../dist", "index.html");
+const url = `fmp://${server}/${file}?script=${uploadScript}&param=${encodeURIComponent(
+  thePath
+)}`;
+
+open(url);

package/template/vite-wv/src/components/AppLogo.tsx

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

package/template/vite-wv/src/components/full-screen-loader.tsx

@@ -0,0 +1,9 @@
+import { Center, Loader } from "@mantine/core";
+
+export default function FullScreenLoader() {
+  return (
+    <Center h="100vh">
+      <Loader />
+    </Center>
+  );
+}

package/template/vite-wv/src/config/env.ts

@@ -0,0 +1,16 @@
+import { createEnv } from "@t3-oss/env-core";
+import { z } from "zod/v4";
+import { type OttoAPIKey } from "@proofkit/fmdapi";
+
+export const env = createEnv({
+  server: {
+    NODE_ENV: z
+      .enum(["development", "test", "production"])
+      .default("development"),
+  },
+
+  clientPrefix: "VITE_",
+  client: {},
+  runtimeEnv: process.env,
+  emptyStringAsUndefined: true,
+});

package/template/vite-wv/src/config/theme/globals.css

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

package/template/vite-wv/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/vite-wv/src/main.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import {
+  RouterProvider,
+  createHashHistory,
+  createRouter,
+} from "@tanstack/react-router";
+import { routeTree } from "./routeTree.gen";
+import { MantineProvider } from "@mantine/core";
+import { theme } from "./config/theme/mantine-theme";
+
+import "@mantine/core/styles.css";
+import "mantine-react-table/styles.css";
+import "./config/theme/globals.css";
+
+// Hash history is used since we are using a single file build
+const hashHistory = createHashHistory();
+
+// Set up a Router instance
+const router = createRouter({
+  routeTree,
+  defaultPreload: "intent",
+  history: hashHistory,
+});
+
+// Register things for typesafety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const rootElement = document.getElementById("app")!;
+
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <MantineProvider theme={theme} forceColorScheme="light">
+      <RouterProvider router={router} />
+    </MantineProvider>
+  );
+}

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

@@ -0,0 +1,111 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+// Import Routes
+
+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',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+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
+    }
+  }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/secondary': typeof SecondaryRoute
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/secondary': typeof SecondaryRoute
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute
+  '/': typeof IndexRoute
+  '/secondary': typeof SecondaryRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/secondary'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/secondary'
+  id: '__root__' | '/' | '/secondary'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  SecondaryRoute: typeof SecondaryRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  SecondaryRoute: SecondaryRoute,
+}
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/secondary"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/secondary": {
+      "filePath": "secondary.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */

package/template/vite-wv/src/routes/__root.tsx

@@ -0,0 +1,21 @@
+import { Outlet, createRootRoute } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+
+export const Route = createRootRoute({
+  component: RootComponent,
+});
+
+/**
+ * This component wraps all other routes
+ */
+function RootComponent() {
+  return (
+    <>
+      <Outlet />
+
+      {process.env.NODE_ENV === "development" && (
+        <TanStackRouterDevtools position="bottom-right" />
+      )}
+    </>
+  );
+}

package/template/vite-wv/src/routes/index.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import {
+  Anchor,
+  Box,
+  Code,
+  Container,
+  Image,
+  px,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { IconExternalLink } from "@tabler/icons-react";
+
+export const Route = createFileRoute("/")({
+  component: HomeComponent,
+});
+
+function HomeComponent() {
+  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 page. To add more pages, components, or
+          other features, run the ProofKit CLI from within your project.
+        </Text>
+        <Code block>pnpm proofkit</Code>
+
+        <Text style={{ textWrap: "balance" }}>
+          To change this page, open <Code>src/routes/index.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>
+
+        <Text c="dimmed" size="sm">
+          Need to build multiple webviewer widgets?{" "}
+          <Link to="/secondary">Check out the secondary page</Link>
+        </Text>
+      </Stack>
+    </Container>
+  );
+}

package/template/vite-wv/src/routes/secondary.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { Code, Container, Stack, Text, Title } from "@mantine/core";
+
+export const Route = createFileRoute("/secondary")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return (
+    <Container mt="5rem">
+      <Stack gap="xl" ta="center">
+        <Title order={1}>Secondary Page</Title>
+        <Text>
+          Use hidden pages like this to embed multiple webviewer widgets into a
+          single HTML bundle for your FileMaker solution.
+        </Text>
+        <Text>
+          See how to navigate via a FileMaker script in the{" "}
+          <Code>EXAMPLE: Navigation</Code> script
+        </Text>
+        <Text c="dimmed" size="sm">
+          <Link to="/">Go back to the home page</Link>
+        </Text>
+      </Stack>
+    </Container>
+  );
+}

package/template/vite-wv/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,
+  });
+}

package/template/vite-wv/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/template/vite-wv/vite.config.ts

@@ -0,0 +1,18 @@
+import path from "path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+import { viteSingleFile } from "vite-plugin-singlefile";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    port: 5175,
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  plugins: [TanStackRouterVite({}), react(), viteSingleFile()],
+});