r9stack 0.4.1

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}

package/dist/index.js

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import pc from "picocolors";
+import { initCommand } from "./commands/init.js";
+import { fetchStarters } from "./utils/starters.js";
+import { logger } from "./utils/logger.js";
+const program = new Command();
+program
+    .name("r9stack")
+    .description("CLI tool that scaffolds opinionated SaaS projects")
+    .version("0.4.0");
+// Starter list option
+program
+    .option("--starter-list", "List available starters")
+    .hook("preAction", async (thisCommand) => {
+    if (thisCommand.opts().starterList) {
+        await listStarters();
+        process.exit(0);
+    }
+});
+program
+    .command("init [project-name]")
+    .description("Scaffold a new r9stack project")
+    .option("-y, --yes", "Skip confirmation prompts")
+    .option("-s, --starter <id>", "Use a specific starter (e.g., 'standard')")
+    .option("--no-flight-rules", "Skip Flight Rules installation")
+    .option("--github", "Create GitHub repository")
+    .option("--no-github", "Skip GitHub repository creation")
+    .option("--private", "Make GitHub repository private (default)")
+    .option("--public", "Make GitHub repository public")
+    .action(initCommand);
+// Make init the default command when no command is specified
+program.action(async (options) => {
+    if (options.starterList) {
+        // Already handled by hook
+        return;
+    }
+    await initCommand(undefined, {});
+});
+async function listStarters() {
+    logger.banner("r9stack - Available Starters");
+    try {
+        const starters = await fetchStarters();
+        if (starters.length === 0) {
+            logger.info("No starters available.");
+            return;
+        }
+        for (const starter of starters) {
+            console.log();
+            console.log(`  ${pc.cyan(starter.name)} ${pc.dim(`v${starter.version}`)}`);
+            console.log(`  ${pc.dim(starter.description)}`);
+            console.log(`  ${pc.dim("ID:")} ${starter.id}`);
+        }
+        console.log();
+        logger.info("Create a project with:");
+        console.log(`  ${pc.dim("$")} ${pc.cyan("npx r9stack init my-project")}`);
+        console.log();
+    }
+    catch {
+        logger.error("Failed to fetch starters. Please check your internet connection.");
+        process.exit(1);
+    }
+}
+program.parse();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/payload/assets/manifest.json

@@ -0,0 +1,26 @@
+{
+  "short_name": "{{PROJECT_NAME}}",
+  "name": "{{PROJECT_NAME}}",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
+

package/dist/payload/assets/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/dist/payload/templates/config/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-vega",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}
+

package/dist/payload/templates/config/env.example

@@ -0,0 +1,14 @@
+# Convex
+# This is auto-populated when you run `npx convex dev`
+VITE_CONVEX_URL=
+
+# WorkOS
+# Get these from https://dashboard.workos.com
+WORKOS_API_KEY=
+WORKOS_CLIENT_ID=
+WORKOS_REDIRECT_URI=http://localhost:3000/auth/callback
+
+# Session
+# Generate with: openssl rand -base64 32
+WORKOS_COOKIE_PASSWORD=
+

package/dist/payload/templates/config/tsconfig.json

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

package/dist/payload/templates/config/vite.config.ts

@@ -0,0 +1,23 @@
+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 { nitro } from 'nitro/vite'
+
+const config = defineConfig({
+  plugins: [
+    devtools(),
+    nitro(),
+    viteTsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+    tailwindcss(),
+    tanstackStart(),
+    viteReact(),
+  ],
+})
+
+export default config
+

package/dist/payload/templates/convex/auth.config.ts

@@ -0,0 +1,7 @@
+// Placeholder for Convex auth configuration
+// This file will be configured when you set up Convex-level authentication
+
+export default {
+  // Future: Add Convex auth providers here
+}
+

package/dist/payload/templates/convex/messages.ts

@@ -0,0 +1,28 @@
+import { query, mutation } from "./_generated/server";
+import { v } from "convex/values";
+
+export const list = query({
+  args: {},
+  handler: async (ctx) => {
+    const messages = await ctx.db
+      .query("messages")
+      .withIndex("by_created_at")
+      .order("desc")
+      .collect();
+    return messages;
+  },
+});
+
+export const send = mutation({
+  args: {
+    text: v.string(),
+  },
+  handler: async (ctx, args) => {
+    const messageId = await ctx.db.insert("messages", {
+      text: args.text,
+      createdAt: Date.now(),
+    });
+    return messageId;
+  },
+});
+

package/dist/payload/templates/convex/schema.ts

@@ -0,0 +1,24 @@
+import { defineSchema, defineTable } from 'convex/server'
+import { v } from 'convex/values'
+
+export default defineSchema({
+  // Demo messages table
+  messages: defineTable({
+    text: v.string(),
+    createdAt: v.number(),
+  }).index('by_created_at', ['createdAt']),
+
+  // Users table for storing WorkOS user information
+  users: defineTable({
+    workosId: v.string(),
+    email: v.string(),
+    firstName: v.optional(v.string()),
+    lastName: v.optional(v.string()),
+    profilePictureUrl: v.optional(v.string()),
+    createdAt: v.number(),
+    updatedAt: v.number(),
+  })
+    .index('by_workos_id', ['workosId'])
+    .index('by_email', ['email']),
+})
+

package/dist/payload/templates/convex/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["ES2021", "dom"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["./**/*"],
+  "exclude": ["_generated"]
+}
+

package/dist/payload/templates/src/components/AppShell.tsx

@@ -0,0 +1,21 @@
+import { useState, type ReactNode } from 'react'
+import { Sidebar } from './Sidebar'
+
+interface AppShellProps {
+  children: ReactNode
+}
+
+export function AppShell({ children }: AppShellProps) {
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
+
+  return (
+    <div className="flex h-screen bg-background text-foreground">
+      <Sidebar
+        collapsed={sidebarCollapsed}
+        onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
+      />
+      <main className="flex-1 overflow-auto">{children}</main>
+    </div>
+  )
+}
+

package/dist/payload/templates/src/components/AuthProvider.tsx

@@ -0,0 +1,50 @@
+import { useState, useEffect, type ReactNode } from 'react'
+import { AuthContext, signIn, signOut } from '../lib/auth-client'
+import { getCurrentUser } from '../lib/auth-server'
+import type { User } from '../lib/auth'
+
+interface AuthProviderProps {
+  children: ReactNode
+  initialUser?: User | null
+}
+
+export function AuthProvider({ children, initialUser = null }: AuthProviderProps) {
+  const [user, setUser] = useState<User | null>(initialUser)
+  const [isLoading, setIsLoading] = useState(initialUser === null)
+
+  useEffect(() => {
+    if (initialUser !== null) {
+      setUser(initialUser)
+      setIsLoading(false)
+      return
+    }
+
+    async function fetchUser() {
+      try {
+        const currentUser = await getCurrentUser()
+        setUser(currentUser)
+      } catch {
+        setUser(null)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchUser()
+  }, [initialUser])
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        isAuthenticated: !!user,
+        isLoading,
+        signIn,
+        signOut,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  )
+}
+

package/dist/payload/templates/src/components/ConvexClientProvider.tsx

@@ -0,0 +1,20 @@
+import { ConvexProvider, ConvexReactClient } from "convex/react";
+import { ReactNode, useEffect, useState } from "react";
+
+export function ConvexClientProvider({ children }: { children: ReactNode }) {
+  const [client, setClient] = useState<ConvexReactClient | null>(null);
+
+  useEffect(() => {
+    const convexUrl = import.meta.env.VITE_CONVEX_URL as string;
+    if (convexUrl) {
+      setClient(new ConvexReactClient(convexUrl));
+    }
+  }, []);
+
+  if (!client) {
+    return <>{children}</>;
+  }
+
+  return <ConvexProvider client={client}>{children}</ConvexProvider>;
+}
+

package/dist/payload/templates/src/components/NavGroup.tsx

@@ -0,0 +1,46 @@
+import { useState, type ReactNode } from 'react'
+import { ChevronDown, ChevronRight } from 'lucide-react'
+import { cn } from '../lib/utils'
+
+interface NavGroupProps {
+  label: string
+  children: ReactNode
+  collapsed?: boolean
+  defaultExpanded?: boolean
+}
+
+export function NavGroup({
+  label,
+  children,
+  collapsed,
+  defaultExpanded = true,
+}: NavGroupProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded)
+
+  if (collapsed) {
+    return <div className="space-y-1">{children}</div>
+  }
+
+  return (
+    <div className="space-y-1">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className={cn(
+          'flex items-center justify-between w-full px-3 py-2',
+          'text-xs font-semibold uppercase tracking-wider',
+          'text-sidebar-foreground/50 hover:text-sidebar-foreground/70',
+          'transition-colors'
+        )}
+      >
+        <span>{label}</span>
+        {expanded ? (
+          <ChevronDown className="h-3 w-3" />
+        ) : (
+          <ChevronRight className="h-3 w-3" />
+        )}
+      </button>
+      {expanded && <div className="space-y-1">{children}</div>}
+    </div>
+  )
+}
+

package/dist/payload/templates/src/components/NavItem.tsx

@@ -0,0 +1,36 @@
+import { Link } from '@tanstack/react-router'
+import type { ReactNode } from 'react'
+import { cn } from '../lib/utils'
+
+interface NavItemProps {
+  to: string
+  icon: ReactNode
+  label: string
+  collapsed?: boolean
+}
+
+export function NavItem({ to, icon, label, collapsed }: NavItemProps) {
+  return (
+    <Link
+      to={to}
+      className={cn(
+        'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium',
+        'text-sidebar-foreground/70 hover:text-sidebar-foreground',
+        'hover:bg-sidebar-accent transition-colors',
+        collapsed && 'justify-center px-2'
+      )}
+      activeProps={{
+        className: cn(
+          'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium',
+          'bg-sidebar-accent text-sidebar-accent-foreground',
+          'transition-colors',
+          collapsed && 'justify-center px-2'
+        ),
+      }}
+    >
+      <span className="flex-shrink-0">{icon}</span>
+      {!collapsed && <span>{label}</span>}
+    </Link>
+  )
+}
+

package/dist/payload/templates/src/components/Sidebar.tsx

@@ -0,0 +1,76 @@
+import { Home, MessageSquare, PanelLeftClose, PanelLeft } from 'lucide-react'
+import { cn } from '../lib/utils'
+import { NavGroup } from './NavGroup'
+import { NavItem } from './NavItem'
+import { UserMenu } from './UserMenu'
+
+interface SidebarProps {
+  collapsed: boolean
+  onToggle: () => void
+}
+
+export function Sidebar({ collapsed, onToggle }: SidebarProps) {
+  return (
+    <aside
+      className={cn(
+        'flex flex-col h-full bg-sidebar border-r border-sidebar-border',
+        'transition-all duration-200 ease-in-out',
+        collapsed ? 'w-14' : 'w-60'
+      )}
+    >
+      {/* Header with collapse toggle */}
+      <div
+        className={cn(
+          'flex items-center h-14 px-3 border-b border-sidebar-border',
+          collapsed ? 'justify-center' : 'justify-between'
+        )}
+      >
+        {!collapsed && (
+          <span className="text-lg font-semibold text-sidebar-foreground">
+            {{PROJECT_NAME}}
+          </span>
+        )}
+        <button
+          onClick={onToggle}
+          className={cn(
+            'p-2 rounded-md',
+            'text-sidebar-foreground/70 hover:text-sidebar-foreground',
+            'hover:bg-sidebar-accent transition-colors'
+          )}
+          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        >
+          {collapsed ? (
+            <PanelLeft className="w-4 h-4" />
+          ) : (
+            <PanelLeftClose className="w-4 h-4" />
+          )}
+        </button>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 p-2 space-y-4 overflow-y-auto">
+        <NavItem
+          to="/app"
+          icon={<Home className="w-4 h-4" />}
+          label="Home"
+          collapsed={collapsed}
+        />
+
+        <NavGroup label="Demos" collapsed={collapsed}>
+          <NavItem
+            to="/app/demo/convex/messages"
+            icon={<MessageSquare className="w-4 h-4" />}
+            label="Messages"
+            collapsed={collapsed}
+          />
+        </NavGroup>
+      </nav>
+
+      {/* User menu at bottom */}
+      <div className="p-2 border-t border-sidebar-border">
+        <UserMenu collapsed={collapsed} />
+      </div>
+    </aside>
+  )
+}
+

package/dist/payload/templates/src/components/UserMenu.tsx

@@ -0,0 +1,102 @@
+import { ChevronUp, LogOut } from 'lucide-react'
+import { useState, useRef, useEffect } from 'react'
+import { cn } from '../lib/utils'
+import { useAuth } from '../lib/auth-client'
+
+interface UserMenuProps {
+  collapsed?: boolean
+}
+
+export function UserMenu({ collapsed }: UserMenuProps) {
+  const { user, signOut } = useAuth()
+  const [isOpen, setIsOpen] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const displayName = user?.firstName || user?.email?.split('@')[0] || 'User'
+  const initials = user?.firstName?.[0]?.toUpperCase() || user?.email?.[0]?.toUpperCase() || 'U'
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          'flex items-center gap-3 w-full p-3 rounded-md',
+          'hover:bg-sidebar-accent transition-colors',
+          'text-sidebar-foreground',
+          collapsed && 'justify-center'
+        )}
+      >
+        <div className="flex-shrink-0 w-8 h-8 rounded-full bg-sidebar-primary flex items-center justify-center overflow-hidden">
+          {user?.profilePictureUrl ? (
+            <img
+              src={user.profilePictureUrl}
+              alt={displayName}
+              className="w-8 h-8 rounded-full object-cover"
+            />
+          ) : (
+            <span className="text-sm font-medium text-sidebar-primary-foreground">
+              {initials}
+            </span>
+          )}
+        </div>
+        {!collapsed && (
+          <>
+            <div className="flex-1 text-left min-w-0">
+              <p className="text-sm font-medium truncate">{displayName}</p>
+              <p className="text-xs text-sidebar-foreground/50 truncate">
+                {user?.email}
+              </p>
+            </div>
+            <ChevronUp
+              className={cn(
+                'w-4 h-4 text-sidebar-foreground/50 transition-transform',
+                isOpen && 'rotate-180'
+              )}
+            />
+          </>
+        )}
+      </button>
+
+      {isOpen && (
+        <div
+          className={cn(
+            'absolute bottom-full mb-2 bg-popover border border-border rounded-lg shadow-lg py-1 min-w-[200px]',
+            collapsed ? 'left-full ml-2' : 'left-0 right-0'
+          )}
+        >
+          <div className="px-3 py-2 border-b border-border">
+            <p className="text-sm font-medium text-foreground truncate">
+              {user?.firstName && user?.lastName
+                ? `${user.firstName} ${user.lastName}`
+                : displayName}
+            </p>
+            <p className="text-xs text-muted-foreground truncate">
+              {user?.email}
+            </p>
+          </div>
+          <button
+            onClick={() => {
+              setIsOpen(false)
+              signOut()
+            }}
+            className="w-full px-3 py-2 text-left text-sm text-foreground hover:bg-accent flex items-center gap-2"
+          >
+            <LogOut className="w-4 h-4" />
+            Sign out
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+