@korajs/cli 0.4.0 → 0.6.0

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

@@ -1,10 +1,10 @@
+import { AlertCircle, ArrowRight, Loader2, Monitor, Wifi } from 'lucide-react'
 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
+	onConnect: (syncUrl: string) => void
+	onSkip: () => void
 }
 
 /**
@@ -18,222 +18,271 @@ interface SetupScreenProps {
  * 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 [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 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 handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault()
+		const syncUrl = url.trim()
+		if (!syncUrl) return
 
-    const validationError = validateUrl(syncUrl)
-    if (validationError) {
-      setError(validationError)
-      return
-    }
+		const validationError = validateUrl(syncUrl)
+		if (validationError) {
+			setError(validationError)
+			return
+		}
 
-    setTesting(true)
-    setError(null)
-    setUnreachable(false)
+		setTesting(true)
+		setError(null)
+		setUnreachable(false)
 
-    const reachable = await testConnection(syncUrl)
-    setTesting(false)
+		const reachable = await testConnection(syncUrl)
+		setTesting(false)
 
-    if (reachable) {
-      onConnect(syncUrl)
-    } else {
-      // Server unreachable — let the user save anyway
-      setUnreachable(true)
-    }
-  }
+		if (reachable) {
+			onConnect(syncUrl)
+		} else {
+			// Server unreachable — let the user save anyway
+			setUnreachable(true)
+		}
+	}
 
-  const handleSaveAnyway = () => {
-    onConnect(url.trim())
-  }
+	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>
+	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>
+				{/* Connection form */}
+				<form onSubmit={handleSubmit}>
+					<div style={{ marginBottom: '16px' }}>
+						<label
+							htmlFor="sync-server-url"
+							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
+								id="sync-server-url"
+								type="text"
+								value={url}
+								onChange={(e) => {
+									setUrl(e.target.value)
+									setError(null)
+									setUnreachable(false)
+								}}
+								placeholder="wss://your-server.example.com/kora-sync"
+								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>
-          )}
+					{/* 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>
+					{!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>
+				{/* 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>
-  )
+				{/* 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/auth.ts

@@ -0,0 +1,45 @@
+import { type AuthClient, createKoraAuth } from '@korajs/auth'
+
+export function createDesktopAuthClient(syncUrl: string | null): AuthClient {
+	return createKoraAuth({
+		serverUrl: getAuthServerUrl(syncUrl),
+	})
+}
+
+export function getAuthServerUrl(syncUrl: string | null): string {
+	if (import.meta.env.VITE_AUTH_URL) {
+		return import.meta.env.VITE_AUTH_URL
+	}
+	if (!syncUrl) {
+		return 'http://localhost:3001'
+	}
+
+	const url = new URL(syncUrl)
+	url.protocol = url.protocol === 'wss:' ? 'https:' : 'http:'
+	url.pathname = url.pathname.replace(/\/kora-sync\/?$/, '') || '/'
+	url.search = ''
+	url.hash = ''
+	return url.toString().replace(/\/+$/, '')
+}
+
+export async function openOAuthSignIn(authClient: AuthClient, provider = 'google'): Promise<void> {
+	const { url } = await authClient.getOAuthAuthorizationUrl(provider)
+	window.open(url, '_blank', 'noopener,noreferrer')
+}
+
+export async function completeOAuthCallbackFromLocation(authClient: AuthClient): Promise<void> {
+	const url = new URL(window.location.href)
+	const code = url.searchParams.get('code')
+	const state = url.searchParams.get('state')
+	const provider = url.searchParams.get('provider') || 'google'
+
+	if (!code || !state) {
+		return
+	}
+
+	await authClient.completeOAuthSignIn(provider, { code, state })
+	url.searchParams.delete('code')
+	url.searchParams.delete('state')
+	url.searchParams.delete('provider')
+	window.history.replaceState({}, document.title, `${url.pathname}${url.search}${url.hash}`)
+}

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

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

package/templates/tauri-react/src/modules/todos/todo.mutations.ts

@@ -0,0 +1,25 @@
+import type { CollectionAccessor } from 'korajs'
+
+export interface CreateTodoInput {
+	title: string
+}
+
+export interface UpdateTodoStatusInput {
+	completed: boolean
+}
+
+export function createTodo(todos: CollectionAccessor, data: CreateTodoInput) {
+	return todos.insert({ title: data.title })
+}
+
+export function updateTodoStatus(
+	todos: CollectionAccessor,
+	id: string,
+	data: UpdateTodoStatusInput,
+) {
+	return todos.update(id, { completed: data.completed })
+}
+
+export function deleteTodo(todos: CollectionAccessor, id: string) {
+	return todos.delete(id)
+}

package/templates/tauri-react/src/modules/todos/todo.queries.ts

@@ -0,0 +1,5 @@
+import type { CollectionAccessor } from 'korajs'
+
+export function orderedTodos(todos: CollectionAccessor) {
+	return todos.where({}).orderBy('createdAt', 'desc')
+}

package/templates/tauri-react/src/modules/todos/todo.schema.ts

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

package/templates/tauri-react/src/modules/todos/useTodos.ts

@@ -0,0 +1,31 @@
+import { useCollection, useMutation, useQuery } from '@korajs/react'
+import {
+	type CreateTodoInput,
+	type UpdateTodoStatusInput,
+	createTodo,
+	deleteTodo,
+	updateTodoStatus,
+} from './todo.mutations'
+import { orderedTodos } from './todo.queries'
+
+export function useTodos() {
+	const todos = useCollection('todos')
+	const allTodos = useQuery(orderedTodos(todos))
+	const addTodo = useMutation((data: CreateTodoInput) => createTodo(todos, data))
+	const toggleTodo = useMutation((id: string, data: UpdateTodoStatusInput) =>
+		updateTodoStatus(todos, id, data),
+	)
+	const removeTodo = useMutation((id: string) => deleteTodo(todos, id))
+
+	const activeTodos = allTodos.filter((todo) => !todo.completed)
+	const completedTodos = allTodos.filter((todo) => !!todo.completed)
+
+	return {
+		allTodos,
+		activeTodos,
+		completedTodos,
+		addTodo,
+		toggleTodo,
+		deleteTodo: removeTodo,
+	}
+}

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

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