kaddidlehopper 0.5.0 → 0.6.0

package/project/base/src/components/HeaderNav.tsx.ejs

@@ -1,179 +0,0 @@
-import { Link } from '@tanstack/react-router'
-<% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
-import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
-<% } %><% if (tailwind) {
-const icons = new Set([
-  "Menu",
-  "X",
-  "Home",
-])
-
-const hasRoutesWithChildren = addOns.some(a => a.routes?.some(r => r.children));
-
-if (hasRoutesWithChildren) {
-  icons.add("ChevronDown");
-  icons.add("ChevronRight");
-}
-
-for(const addOn of addOns) {
-  for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) {
-    icons.add( route.icon || "Globe");
-  }
-}
-%>
-import { useState } from 'react';
-import {
-  <%= Array.from(icons).sort().join(", ") %>
-} from "lucide-react";
-<% } %>
-
-export default function HeaderNav() {
-<% if (tailwind) {
-const menusWithChildren = addOns.filter(a => a.routes?.some(r => r.children));
-const userHeaders = integrations.filter(i => i.type === 'header-user');
-%>
-  const [isOpen, setIsOpen] = useState(false);
-  <% if (menusWithChildren.length > 0) { %>const [groupedExpanded, setGroupedExpanded] = useState<Record<string, boolean>>({});
-  <% } %>
-
-  return (
-    <>
-      <header className="p-4 flex items-center bg-gray-800 text-white shadow-lg">
-        <button
-          onClick={() => setIsOpen(true)}
-          className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
-          aria-label="Open menu"
-        >
-          <Menu size={24} />
-        </button>
-        <h1 className="ml-4 text-xl font-semibold">
-          <Link to="/">
-            <img
-              src="/tanstack-word-logo-white.svg"
-              alt="TanStack Logo"
-              className="h-10"
-            />
-          </Link>
-        </h1>
-      </header>
-
-      <aside
-        className={`fixed top-0 left-0 h-full w-80 bg-gray-900 text-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${
-          isOpen ? "translate-x-0" : "-translate-x-full"
-        }`}
-      >
-        <div className="flex items-center justify-between p-4 border-b border-gray-700">
-          <h2 className="text-xl font-bold">Navigation</h2>
-          <button
-            onClick={() => setIsOpen(false)}
-            className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
-            aria-label="Close menu"
-          >
-            <X size={24} />
-          </button>
-        </div>
-
-        <nav className="flex-1 p-4 overflow-y-auto">
-          <Link
-            to="/"
-            onClick={() => setIsOpen(false)}
-            className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-            activeProps={{
-              className:
-                "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-            }}
-          >
-            <Home size={20} />
-            <span className="font-medium">Home</span>
-          </Link>
-
-          {/* Demo Links Start */}
-          <% for(const addOn of addOns) {
-            for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) {
-              if (route.children) { %>
-                <div className="flex flex-row justify-between">
-                  <Link to="<%= route.url %>"
-                    onClick={() => setIsOpen(false)}
-                    className="flex-1 flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-                    activeProps={{
-                      className:
-                        "flex-1 flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-                    }}
-                  >
-                    <<%= route.icon || "Globe" %> size={20} />
-                    <span className="font-medium"><%= route.name %></span>  
-                  </Link>
-                  <button
-                    className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
-                    onClick={() => setGroupedExpanded(prev => ({ ...prev, <%= route.jsName %>: !prev.<%= route.jsName %> }))}>
-                    {groupedExpanded.<%= route.jsName %> ? <ChevronDown size={20} /> : <ChevronRight size={20} />}
-                  </button>
-                </div>
-                {groupedExpanded.<%= route.jsName %> && (
-                  <div className="flex flex-col ml-4">
-                    <% for(const child of route.children) { %>
-                      <Link
-                        to="<%= child.url %>"
-                        onClick={() => setIsOpen(false)}
-                        className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-                        activeProps={{
-                          className:
-                            "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-                        }}
-                      >
-                        <<%= child.icon || "Globe" %> size={20} />
-                        <span className="font-medium"><%= child.name %></span>
-                      </Link>
-                    <% } %>
-                </div>
-                )}
-            <% } else { %>
-              <Link
-                to="<%= route.url %>"
-                onClick={() => setIsOpen(false)}
-                className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
-                activeProps={{
-                  className:
-                    "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
-                }}
-              >
-                <<%= route.icon || "Globe" %> size={20} />
-                <span className="font-medium"><%= route.name %></span>
-              </Link>
-          <% } } } %>
-          {/* Demo Links End */}
-        </nav>
-
-        <% if (userHeaders.length > 0) { %>
-        <div className="p-4 border-t border-gray-700 bg-gray-800 flex flex-col gap-2">
-          <% for(const integration of userHeaders) { %>
-            <<%= integration.jsName %> />
-          <% } %>
-        </div>
-        <% } %>
-      </aside>
-    </>
-  );
-<% } else { %>
-  return (
-    <header className="p-2 flex gap-2 bg-white text-black justify-between">
-      <nav className="flex flex-row">
-        <div className="px-2 font-bold">
-          <Link to="/">Home</Link>
-        </div>
-<% for(const addOn of addOns) {
-  for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) { %>
-<div className="px-2 font-bold"><Link to="<%= route.url %>"><%= route.name %></Link></div>
-<% } } %>
-      </nav>
-<% if (integrations.filter(i => i.type === 'header-user').length > 0) { %>
-      <div>
-<% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
-  <<%= integration.jsName %> />
-<% } %>
-      </div>
-<% } %>
-    </header>
-  )
-<% } %>
-}

package/project/base/src/router.tsx

@@ -1,15 +0,0 @@
-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,
-    scrollRestoration: true,
-    defaultPreloadStaleTime: 0,
-  })
-
-  return router
-}

package/project/base/src/routes/__root.tsx

@@ -1,57 +0,0 @@
-import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { TanStackDevtools } from '@tanstack/react-devtools'
-
-import Header from '../components/Header'
-
-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: 'Netlify TanStack Start',
-      },
-    ],
-    links: [
-      {
-        rel: 'stylesheet',
-        href: appCss,
-      },
-    ],
-  }),
-  shellComponent: RootDocument,
-})
-
-function RootDocument({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <HeadContent />
-      </head>
-      <body>
-        <Header />
-        {children}
-        <TanStackDevtools
-          config={{
-            position: 'bottom-right',
-          }}
-          plugins={[
-            {
-              name: 'Tanstack Router',
-              render: <TanStackRouterDevtoolsPanel />,
-            },
-          ]}
-        />
-        <Scripts />
-      </body>
-    </html>
-  )
-}

package/project/base/src/routes/index.tsx

@@ -1,48 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/')({
-  component: Home,
-})
-
-function Home() {
-  return (
-    <div className="min-h-screen bg-linear-to-br from-teal-900 via-emerald-800 to-cyan-900 flex items-center justify-center">
-      <div className="text-center">
-        <h1 className="text-6xl md:text-8xl font-black text-white mb-6 tracking-tight">
-          Hello from{' '}
-          <span className="bg-linear-to-r from-teal-400 to-cyan-300 bg-clip-text text-transparent">
-            Netlify
-          </span>
-        </h1>
-        <p className="text-xl md:text-2xl text-teal-100/80 mb-8 max-w-2xl mx-auto px-4">
-          Your TanStack Start application is ready to deploy
-        </p>
-        <div className="flex flex-col sm:flex-row gap-4 justify-center px-4">
-          <a
-            href="https://tanstack.com/start"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="px-8 py-3 bg-teal-500 hover:bg-teal-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-teal-500/30"
-          >
-            TanStack Start Docs
-          </a>
-          <a
-            href="https://docs.netlify.com"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="px-8 py-3 bg-white/10 hover:bg-white/20 text-white font-semibold rounded-lg transition-colors border border-white/20"
-          >
-            Netlify Docs
-          </a>
-        </div>
-        <p className="mt-12 text-teal-200/60 text-sm">
-          Edit{' '}
-          <code className="px-2 py-1 bg-black/30 rounded text-teal-300">
-            src/routes/index.tsx
-          </code>{' '}
-          to get started
-        </p>
-      </div>
-    </div>
-  )
-}

package/project/base/src/styles.css

@@ -1,15 +0,0 @@
-@import "tailwindcss";
-
-body {
-  @apply m-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;
-}

package/project/base/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "include": ["**/*.ts", "**/*.tsx"],
-  "compilerOptions": {
-    "target": "ES2022",
-    "jsx": "react-jsx",
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["vite/client"],
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": false,
-    "noEmit": true,
-
-    /* Linting */
-    "skipLibCheck": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}

package/project/base/vite.config.ts.ejs

@@ -1,25 +0,0 @@
-import { defineConfig } from 'vite'
-import { devtools } from '@tanstack/devtools-vite'
-import { tanstackStart } from '@tanstack/react-start/plugin/vite'
-import viteReact from '@vitejs/plugin-react'
-import viteTsConfigPaths from 'vite-tsconfig-paths'
-import tailwindcss from '@tailwindcss/vite'
-import netlify from '@netlify/vite-plugin-tanstack-start'
-<% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
-<% } %>  
-
-const config = defineConfig({
-  plugins: [
-    devtools(),
-    <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %> ,
-    viteTsConfigPaths({
-      projects: ['./tsconfig.json'],
-    }),
-    tailwindcss(),
-    netlify(),
-    tanstackStart(),
-    viteReact(),
-  ],
-})
-
-export default config

package/project/info.json

@@ -1,17 +0,0 @@
-{
-  "packageFileDescriptions": {
-    "AGENTS.md": "This document provides an overview of the project structure for developers and AI agents working on this codebase.",
-    "netlify.toml": "Netlify deployment config: build command (vite build), publish directory (dist/client), and dev server settings (port 8888, target 3000).",
-    "package.json": "Project manifest with TanStack Start, React 19, Vite 7, Tailwind CSS 4, and Netlify plugin dependencies; defines dev and build scripts.",
-    "vite.config.ts.ejs": "Vite config template: TanStack Start, React, Tailwind, Netlify plugin, and optional add-on integrations; processed by EJS.",
-    "tsconfig.json": "TypeScript config: ES2022 target, strict mode, @/* path alias for src/*, bundler module resolution.",
-    "src/styles.css": "Global styles: Tailwind import plus base body/code font styling.",
-    "src/routes/index.tsx": "Home route (/) with TanStack Start welcome/landing page and links to docs.",
-    "src/routes/__root.tsx": "Root layout: HTML shell, HeadContent, Header, styles, TanStack Devtools, and child route outlet.",
-    "src/router.tsx": "TanStack Router setup: creates router from generated routeTree with scroll restoration.",
-    "src/components/HeaderNav.tsx.ejs": "Navigation sidebar template: mobile menu, Home link, add-on routes; EJS-driven for dynamic route generation.",
-    "src/components/Header.tsx": "Header component wrapping HeaderNav and site title link.",
-    "public/tanstack-word-logo-white.svg": "TanStack wordmark logo (white) used in header/nav.",
-    "_dot_gitignore": "Template for .gitignore: node_modules, dist, .env, .netlify, .tanstack, etc."
-  }
-}

package/project/packages.json

@@ -1,22 +0,0 @@
-{
-  "typescript": {
-    "devDependencies": {
-      "@types/react": "^19.2.0",
-      "@types/node": "^22.10.2",
-      "@types/react-dom": "^19.2.0",
-      "typescript": "^5.7.2"
-    }
-  },
-  "tailwindcss": {
-    "dependencies": {
-      "@tailwindcss/vite": "^4.0.6",
-      "tailwindcss": "^4.0.6",
-      "lucide-react": "^0.545.0"
-    }
-  },
-  "file-router": {
-    "dependencies": {
-      "@tanstack/router-plugin": "^1.132.0"
-    }
-  }
-}