initial commit

src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/bknd.ts

@@ -0,0 +1,24 @@
+import { getApp as getBkndApp } from "bknd/adapter/nextjs";
+import config from "../bknd.config";
+
+// import { headers } from "next/headers";
+
+export async function getApi({
+  headers,
+  verify,
+}: {
+  verify?: boolean;
+  headers?: Headers;
+}) {
+  const app = await getBkndApp(config, process.env);
+
+  if (verify) {
+    const api = app.getApi({ headers });
+    await api.verifyAuth();
+    return api;
+  }
+
+  return app.getApi();
+}
+
+export { config };

src/routeTree.gen.ts

@@ -0,0 +1,104 @@
+/* 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 { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as ApiSplatRouteImport } from './routes/api.$'
+import { Route as AdminSplatRouteImport } from './routes/admin.$'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiSplatRoute = ApiSplatRouteImport.update({
+  id: '/api/$',
+  path: '/api/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AdminSplatRoute = AdminSplatRouteImport.update({
+  id: '/admin/$',
+  path: '/admin/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/admin/$': typeof AdminSplatRoute
+  '/api/$': typeof ApiSplatRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/admin/$': typeof AdminSplatRoute
+  '/api/$': typeof ApiSplatRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/admin/$': typeof AdminSplatRoute
+  '/api/$': typeof ApiSplatRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/admin/$' | '/api/$'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/admin/$' | '/api/$'
+  id: '__root__' | '/' | '/admin/$' | '/api/$'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  AdminSplatRoute: typeof AdminSplatRoute
+  ApiSplatRoute: typeof ApiSplatRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/$': {
+      id: '/api/$'
+      path: '/api/$'
+      fullPath: '/api/$'
+      preLoaderRoute: typeof ApiSplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/admin/$': {
+      id: '/admin/$'
+      path: '/admin/$'
+      fullPath: '/admin/$'
+      preLoaderRoute: typeof AdminSplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  AdminSplatRoute: AdminSplatRoute,
+  ApiSplatRoute: ApiSplatRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

src/router.tsx

@@ -0,0 +1,17 @@
+import { createRouter } from '@tanstack/react-router'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+// Create a new router instance
+export const getRouter = () => {
+  const router = createRouter({
+    routeTree,
+    context: {},
+
+    scrollRestoration: true,
+    defaultPreloadStaleTime: 0,
+  })
+
+  return router
+}

src/routes/__root.tsx

@@ -0,0 +1,55 @@
+import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+import appCss from '../styles.css?url'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'TanStack Start Starter',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+
+  shellComponent: RootDocument,
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <TanStackDevtools
+          config={{
+            position: 'bottom-right',
+          }}
+          plugins={[
+            {
+              name: 'Tanstack Router',
+              render: <TanStackRouterDevtoolsPanel />,
+            },
+          ]}
+        />
+        <Scripts />
+      </body>
+    </html>
+  )
+}

src/routes/admin.$.tsx

@@ -0,0 +1,43 @@
+import { getApi } from "@/bknd";
+import { createFileRoute } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { getRequestHeaders } from "@tanstack/react-start/server";
+import "bknd/dist/styles.css";
+import { Admin } from "bknd/ui";
+
+export const getUser = createServerFn({ method: "GET" }).handler(async () => {
+  const headers = getRequestHeaders();
+  const api = await getApi({ verify: true, headers });
+  return { user: api.getUser() };
+});
+
+export const Route = createFileRoute("/admin/$")({
+  component: RouteComponent,
+  loader: async () => {
+    const user = await getUser();
+    return { user };
+  },
+});
+
+function RouteComponent() {
+  const { user } = Route.useLoaderData();
+  console.log(user);
+
+  return (
+    <Admin
+      withProvider={{
+        user: {
+          email: "ada@example.com",
+          id: "",
+          strategy: "",
+        },
+      }}
+      config={{
+        basepath: "/admin",
+        logo_return_path: "/../",
+        theme: "system",
+      }}
+      baseUrl="http://localhost:3000"
+    />
+  );
+}

src/routes/api.$.ts

@@ -0,0 +1,25 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { config } from "@/bknd";
+import { serve } from "bknd/adapter/nextjs";
+
+const handler = serve({
+  ...config,
+  // cleanRequest: {
+    // depending on what name you used for the catch-all route,
+    // you need to change this to clean it from the request.
+  //   searchParams: ["$"],
+  // },
+});
+
+export const Route = createFileRoute("/api/$")({
+  server: {
+    handlers: {
+      ANY: async ({ request }) => {
+        const res = await handler(request);
+        // console.log("[API] ", res);
+
+        return res;
+      },
+    },
+  },
+});

src/routes/index.tsx

@@ -0,0 +1,27 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import "../App.css";
+
+export const Route = createFileRoute("/")({ component: App });
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img
+          src="/tanstack-circle-logo.png"
+          alt="TanStack Logo"
+          style={{
+            width: "100px",
+            height: "100px",
+          }}
+        />
+        <Link
+          className="App-link"
+          to="/admin"
+        >
+          Admin Dashboard
+        </Link>
+      </header>
+    </div>
+  );
+}

src/styles.css

@@ -0,0 +1,14 @@
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}