@korajs/cli 0.3.2 → 0.4.0

package/templates/tauri-react/src/SetupScreen.tsx

@@ -0,0 +1,239 @@
+import { useState } from 'react'
+import { Monitor, Wifi, ArrowRight, Loader2, AlertCircle } from 'lucide-react'
+import { testConnection } from './sync-config'
+
+interface SetupScreenProps {
+  onConnect: (syncUrl: string) => void
+  onSkip: () => void
+}
+
+/**
+ * First-launch setup screen.
+ *
+ * Shown when no sync server URL is configured. The user enters their
+ * organization's sync server URL, or skips to use the app in local-only mode.
+ *
+ * The connection test is advisory — if the server is unreachable (e.g.,
+ * during maintenance), the user can still save the URL and the app will
+ * connect when the server comes back.
+ */
+export function SetupScreen({ onConnect, onSkip }: SetupScreenProps) {
+  const [url, setUrl] = useState('')
+  const [testing, setTesting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [unreachable, setUnreachable] = useState(false)
+
+  const validateUrl = (value: string): string | null => {
+    if (!value.startsWith('ws://') && !value.startsWith('wss://')) {
+      return 'URL must start with ws:// or wss://'
+    }
+    try {
+      new URL(value.replace(/^ws/, 'http'))
+    } catch {
+      return 'Invalid URL format'
+    }
+    return null
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    const syncUrl = url.trim()
+    if (!syncUrl) return
+
+    const validationError = validateUrl(syncUrl)
+    if (validationError) {
+      setError(validationError)
+      return
+    }
+
+    setTesting(true)
+    setError(null)
+    setUnreachable(false)
+
+    const reachable = await testConnection(syncUrl)
+    setTesting(false)
+
+    if (reachable) {
+      onConnect(syncUrl)
+    } else {
+      // Server unreachable — let the user save anyway
+      setUnreachable(true)
+    }
+  }
+
+  const handleSaveAnyway = () => {
+    onConnect(url.trim())
+  }
+
+  return (
+    <div style={{ minHeight: '100vh', background: '#0a0a0a', color: '#f3f4f6', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <div style={{ maxWidth: '480px', width: '100%', padding: '0 24px' }}>
+        {/* Logo */}
+        <div style={{ textAlign: 'center', marginBottom: '48px' }}>
+          <Monitor style={{ width: '48px', height: '48px', color: '#818cf8', margin: '0 auto 16px' }} />
+          <h1 style={{ fontSize: '28px', fontWeight: 'bold', marginBottom: '8px' }}>Welcome</h1>
+          <p style={{ color: '#6b7280', fontSize: '15px' }}>
+            Connect to your organization's sync server to sync data across devices.
+          </p>
+        </div>
+
+        {/* Connection form */}
+        <form onSubmit={handleSubmit}>
+          <div style={{ marginBottom: '16px' }}>
+            <label style={{ display: 'block', fontSize: '14px', fontWeight: '500', marginBottom: '8px', color: '#d1d5db' }}>
+              Sync server URL
+            </label>
+            <div style={{ position: 'relative' }}>
+              <Wifi style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', width: '18px', height: '18px', color: '#6b7280' }} />
+              <input
+                type="text"
+                value={url}
+                onChange={(e) => { setUrl(e.target.value); setError(null); setUnreachable(false) }}
+                placeholder="wss://your-server.example.com/kora-sync"
+                autoFocus
+                style={{
+                  width: '100%',
+                  borderRadius: '8px',
+                  border: `1px solid ${error ? '#ef4444' : '#374151'}`,
+                  background: '#111827',
+                  padding: '12px 16px 12px 40px',
+                  color: '#f3f4f6',
+                  outline: 'none',
+                  fontSize: '14px',
+                  boxSizing: 'border-box',
+                }}
+              />
+            </div>
+            {error && (
+              <p style={{ color: '#ef4444', fontSize: '13px', marginTop: '8px' }}>{error}</p>
+            )}
+          </div>
+
+          {/* Server unreachable — offer to save anyway */}
+          {unreachable && (
+            <div style={{
+              marginBottom: '16px',
+              padding: '12px 16px',
+              borderRadius: '8px',
+              border: '1px solid #92400e',
+              background: '#451a03',
+            }}>
+              <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
+                <AlertCircle style={{ width: '16px', height: '16px', color: '#fbbf24', flexShrink: 0, marginTop: '2px' }} />
+                <div>
+                  <p style={{ fontSize: '13px', color: '#fde68a', marginBottom: '8px' }}>
+                    Server is not reachable right now. This could be temporary (maintenance, network issues).
+                  </p>
+                  <div style={{ display: 'flex', gap: '8px' }}>
+                    <button
+                      type="button"
+                      onClick={handleSaveAnyway}
+                      style={{
+                        fontSize: '13px',
+                        color: '#fbbf24',
+                        background: 'none',
+                        border: '1px solid #92400e',
+                        borderRadius: '6px',
+                        padding: '4px 12px',
+                        cursor: 'pointer',
+                      }}
+                    >
+                      Save anyway — connect later
+                    </button>
+                    <button
+                      type="submit"
+                      style={{
+                        fontSize: '13px',
+                        color: '#9ca3af',
+                        background: 'none',
+                        border: '1px solid #374151',
+                        borderRadius: '6px',
+                        padding: '4px 12px',
+                        cursor: 'pointer',
+                      }}
+                    >
+                      Retry
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {!unreachable && (
+            <button
+              type="submit"
+              disabled={testing || !url.trim()}
+              style={{
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '8px',
+                borderRadius: '8px',
+                background: '#4f46e5',
+                padding: '12px 20px',
+                fontWeight: '500',
+                color: 'white',
+                border: 'none',
+                cursor: testing || !url.trim() ? 'default' : 'pointer',
+                opacity: testing || !url.trim() ? 0.5 : 1,
+                fontSize: '14px',
+                marginBottom: '12px',
+              }}
+            >
+              {testing ? (
+                <>
+                  <Loader2 style={{ width: '16px', height: '16px', animation: 'spin 1s linear infinite' }} />
+                  Testing connection...
+                </>
+              ) : (
+                <>
+                  Connect
+                  <ArrowRight style={{ width: '16px', height: '16px' }} />
+                </>
+              )}
+            </button>
+          )}
+        </form>
+
+        {/* Skip option */}
+        <div style={{ textAlign: 'center', marginTop: '24px' }}>
+          <button
+            onClick={onSkip}
+            style={{
+              background: 'none',
+              border: 'none',
+              color: '#6b7280',
+              cursor: 'pointer',
+              fontSize: '14px',
+              textDecoration: 'underline',
+              textUnderlineOffset: '3px',
+            }}
+          >
+            Skip — use offline only
+          </button>
+          <p style={{ color: '#374151', fontSize: '12px', marginTop: '8px' }}>
+            You can connect to a sync server later from settings.
+          </p>
+        </div>
+
+        {/* Help text */}
+        <div style={{
+          marginTop: '48px',
+          padding: '16px',
+          borderRadius: '8px',
+          border: '1px solid #1f2937',
+          background: '#111827',
+        }}>
+          <p style={{ fontSize: '13px', color: '#9ca3af', lineHeight: '1.6' }}>
+            <strong style={{ color: '#d1d5db' }}>Don't have a server URL?</strong>
+            <br />
+            Ask your administrator for the sync server address. For local development,
+            use <code style={{ color: '#818cf8' }}>ws://localhost:3001/kora-sync</code>.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/tauri-react/src/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { AppShell } from './AppShell'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <AppShell />
+  </StrictMode>,
+)

package/templates/tauri-react/src/schema.ts

@@ -0,0 +1,15 @@
+import { defineSchema, t } from '@korajs/core'
+
+export default defineSchema({
+  version: 1,
+  collections: {
+    todos: {
+      fields: {
+        title: t.string(),
+        completed: t.boolean().default(false),
+        createdAt: t.timestamp().auto(),
+      },
+      indexes: ['completed'],
+    },
+  },
+})

package/templates/tauri-react/src/sync-config.ts

@@ -0,0 +1,103 @@
+/**
+ * Runtime sync server configuration.
+ *
+ * On first launch, the user enters their sync server URL (or organization URL).
+ * This is stored in localStorage and used for all subsequent launches.
+ *
+ * This allows a single binary to be distributed to multiple organizations,
+ * each pointing to their own sync server.
+ */
+
+const SYNC_URL_KEY = 'kora-sync-url'
+const SYNC_CONFIGURED_KEY = 'kora-sync-configured'
+
+/**
+ * Get the configured sync server URL.
+ * Priority: localStorage → VITE_SYNC_URL env var → null (needs setup).
+ */
+export function getSyncUrl(): string | null {
+  const stored = localStorage.getItem(SYNC_URL_KEY)
+  if (stored) return stored
+
+  // Compile-time default (set via VITE_SYNC_URL when building)
+  const envUrl = import.meta.env.VITE_SYNC_URL
+  if (envUrl) return envUrl
+
+  return null
+}
+
+/** Save a sync server URL to persistent local config. */
+export function setSyncUrl(url: string): void {
+  localStorage.setItem(SYNC_URL_KEY, url)
+  localStorage.setItem(SYNC_CONFIGURED_KEY, 'true')
+}
+
+/** Clear the stored sync server URL (returns to setup screen). */
+export function clearSyncUrl(): void {
+  localStorage.removeItem(SYNC_URL_KEY)
+  localStorage.removeItem(SYNC_CONFIGURED_KEY)
+}
+
+/**
+ * Whether the user has completed initial setup (connected or explicitly skipped).
+ * This is separate from getSyncUrl() — a user who skipped still completed setup.
+ */
+export function hasCompletedSetup(): boolean {
+  // If there's a compile-time URL, setup is not needed
+  if (import.meta.env.VITE_SYNC_URL) return true
+  return localStorage.getItem(SYNC_CONFIGURED_KEY) === 'true'
+}
+
+/** Mark setup as completed (used when user skips sync). */
+export function markSetupComplete(): void {
+  localStorage.setItem(SYNC_CONFIGURED_KEY, 'true')
+}
+
+/**
+ * Full factory reset: clears sync config and all local data.
+ * The app reloads with a fresh state, showing the setup screen.
+ */
+export function factoryReset(): void {
+  // Clear sync config
+  clearSyncUrl()
+  localStorage.removeItem(SYNC_CONFIGURED_KEY)
+
+  // Clear all Kora local data by removing IndexedDB databases
+  // and any other localStorage keys the app may have set.
+  const keysToRemove: string[] = []
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i)
+    if (key && key.startsWith('kora-')) {
+      keysToRemove.push(key)
+    }
+  }
+  for (const key of keysToRemove) {
+    localStorage.removeItem(key)
+  }
+
+  // Reload to reinitialize everything from scratch
+  window.location.reload()
+}
+
+/** Test if a WebSocket URL is reachable by attempting a brief connection. */
+export function testConnection(url: string, timeoutMs = 5000): Promise<boolean> {
+  return new Promise((resolve) => {
+    const timeout = setTimeout(() => {
+      ws.close()
+      resolve(false)
+    }, timeoutMs)
+
+    const ws = new WebSocket(url)
+
+    ws.onopen = () => {
+      clearTimeout(timeout)
+      ws.close()
+      resolve(true)
+    }
+
+    ws.onerror = () => {
+      clearTimeout(timeout)
+      resolve(false)
+    }
+  })
+}

package/templates/tauri-react/src/updater.ts

@@ -0,0 +1,38 @@
+/**
+ * Auto-updater integration via tauri-plugin-updater.
+ *
+ * Checks for updates on app launch and periodically. When an update is
+ * available, the user is notified and can install it with a restart.
+ *
+ * Configure the update endpoint in src-tauri/tauri.conf.json under
+ * plugins.updater.endpoints. For GitHub Releases, use:
+ *   "endpoints": ["https://github.com/YOUR_ORG/YOUR_REPO/releases/latest/download/latest.json"]
+ *
+ * To generate signing keys: `pnpm tauri signer generate -w ~/.tauri/myapp.key`
+ * Set the pubkey in tauri.conf.json and TAURI_SIGNING_PRIVATE_KEY in CI.
+ */
+
+let updateChecked = false
+
+/**
+ * Check for updates once on app startup.
+ * Silently skips if the updater is not configured (empty endpoints/pubkey).
+ */
+export async function checkForUpdates(): Promise<void> {
+  if (updateChecked) return
+  updateChecked = true
+
+  try {
+    const { check } = await import('@tauri-apps/plugin-updater')
+    const update = await check()
+    if (update) {
+      console.log(`Update available: v${update.version}`)
+      // Download and install — the app will restart automatically
+      await update.downloadAndInstall()
+    }
+  } catch (err) {
+    // Updater not configured or network unavailable — this is fine.
+    // The app works fully offline; updates are best-effort.
+    console.debug('Update check skipped:', err)
+  }
+}

package/templates/tauri-react/src-tauri/Cargo.toml

@@ -0,0 +1,19 @@
+[package]
+name = "app"
+version = "0.0.1"
+edition = "2021"
+
+[lib]
+name = "app_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = [] }
+tauri-plugin-opener = "2"
+tauri-plugin-updater = "2"
+tauri-plugin-kora-sqlite = { version = "0.1", path = "../node_modules/@korajs/tauri/plugin" }
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"

package/templates/tauri-react/src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build();
+}

package/templates/tauri-react/src-tauri/capabilities/default.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Capability for the main window",
+  "windows": ["main"],
+  "permissions": [
+    "core:default",
+    "opener:default",
+    "kora-sqlite:default",
+    "updater:default"
+  ]
+}

package/templates/tauri-react/src-tauri/src/lib.rs

@@ -0,0 +1,8 @@
+pub fn run() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_opener::init())
+        .plugin(tauri_plugin_updater::Builder::new().build())
+        .plugin(tauri_plugin_kora_sqlite::init())
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}

package/templates/tauri-react/src-tauri/src/main.rs

@@ -0,0 +1,6 @@
+// Prevents additional console window on Windows in release
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    app_lib::run();
+}

package/templates/tauri-react/src-tauri/tauri.conf.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://raw.githubusercontent.com/nicholasgriffintn/tauri/refs/heads/dev/crates/tauri-config-schema/schema.json",
+  "productName": "kora-app",
+  "version": "0.0.1",
+  "identifier": "com.kora.app",
+  "build": {
+    "frontendDist": "../dist",
+    "devUrl": "http://localhost:5173",
+    "beforeDevCommand": "vite",
+    "beforeBuildCommand": "vite build"
+  },
+  "app": {
+    "windows": [
+      {
+        "title": "Kora Desktop App",
+        "width": 900,
+        "height": 700,
+        "resizable": true,
+        "fullscreen": false
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ],
+    "createUpdaterArtifacts": false
+  },
+  "plugins": {
+    "updater": {
+      "pubkey": "",
+      "endpoints": []
+    }
+  }
+}

package/templates/tauri-react/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}

package/templates/tauri-react/vite.config.ts

@@ -0,0 +1,15 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+// Tauri apps use native SQLite — no WASM, no OPFS, no cross-origin isolation needed.
+export default defineConfig({
+  plugins: [react()],
+  // Prevent Vite from obscuring Rust compilation errors
+  clearScreen: false,
+  server: {
+    // Tauri expects a fixed port; fail if it's not available
+    strictPort: true,
+  },
+  // Environment variables with this prefix are exposed to the app
+  envPrefix: ['VITE_', 'TAURI_'],
+})