create-kuckit-app 0.1.1 → 0.2.1

package/templates/base/packages/items-module/src/ui/ItemsPage.tsx

@@ -0,0 +1,144 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useRpc } from '@kuckit/sdk-react'
+
+interface Item {
+	id: string
+	name: string
+	description?: string
+	createdAt: Date
+	updatedAt: Date
+}
+
+interface ItemsRpc {
+	items: {
+		list: (input: Record<string, never>) => Promise<Item[]>
+		create: (input: { name: string; description?: string }) => Promise<Item>
+		delete: (input: { id: string }) => Promise<void>
+	}
+}
+
+/**
+ * Items page component
+ * Demonstrates CRUD operations using the items module with useRpc and TanStack Query
+ */
+export function ItemsPage() {
+	const rpc = useRpc<ItemsRpc>()
+	const queryClient = useQueryClient()
+	const [newItemName, setNewItemName] = useState('')
+	const [newItemDescription, setNewItemDescription] = useState('')
+
+	const {
+		data: items = [],
+		isLoading,
+		error,
+	} = useQuery({
+		queryKey: ['items'],
+		queryFn: () => rpc.items.list({}),
+	})
+
+	const createMutation = useMutation({
+		mutationFn: (data: { name: string; description?: string }) => rpc.items.create(data),
+		onSuccess: () => queryClient.invalidateQueries({ queryKey: ['items'] }),
+	})
+
+	const deleteMutation = useMutation({
+		mutationFn: (id: string) => rpc.items.delete({ id }),
+		onSuccess: () => queryClient.invalidateQueries({ queryKey: ['items'] }),
+	})
+
+	const createItem = async (e: React.FormEvent) => {
+		e.preventDefault()
+		if (!newItemName.trim()) return
+
+		createMutation.mutate(
+			{ name: newItemName, description: newItemDescription || undefined },
+			{
+				onSuccess: () => {
+					setNewItemName('')
+					setNewItemDescription('')
+				},
+			}
+		)
+	}
+
+	const deleteItem = (id: string) => {
+		deleteMutation.mutate(id)
+	}
+
+	if (isLoading) {
+		return <div style={{ padding: '2rem' }}>Loading items...</div>
+	}
+
+	return (
+		<div style={{ padding: '2rem', fontFamily: 'system-ui', maxWidth: '600px', margin: '0 auto' }}>
+			<h1>Items</h1>
+
+			{(error || createMutation.error || deleteMutation.error) && (
+				<div style={{ color: 'red', marginBottom: '1rem' }}>
+					{error?.message || createMutation.error?.message || deleteMutation.error?.message}
+				</div>
+			)}
+
+			<form onSubmit={createItem} style={{ marginBottom: '2rem' }}>
+				<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+					<input
+						type="text"
+						placeholder="Item name"
+						value={newItemName}
+						onChange={(e) => setNewItemName(e.target.value)}
+						required
+						style={{ padding: '0.5rem', fontSize: '1rem' }}
+					/>
+					<input
+						type="text"
+						placeholder="Description (optional)"
+						value={newItemDescription}
+						onChange={(e) => setNewItemDescription(e.target.value)}
+						style={{ padding: '0.5rem', fontSize: '1rem' }}
+					/>
+					<button
+						type="submit"
+						disabled={createMutation.isPending}
+						style={{ padding: '0.5rem 1rem', cursor: 'pointer' }}
+					>
+						{createMutation.isPending ? 'Adding...' : 'Add Item'}
+					</button>
+				</div>
+			</form>
+
+			<ul style={{ listStyle: 'none', padding: 0 }}>
+				{items.map((item) => (
+					<li
+						key={item.id}
+						style={{
+							padding: '1rem',
+							border: '1px solid #ccc',
+							marginBottom: '0.5rem',
+							borderRadius: '4px',
+							display: 'flex',
+							justifyContent: 'space-between',
+							alignItems: 'center',
+						}}
+					>
+						<div>
+							<strong>{item.name}</strong>
+							{item.description && (
+								<p style={{ margin: '0.5rem 0 0 0', color: '#666' }}>{item.description}</p>
+							)}
+						</div>
+						<button
+							onClick={() => deleteItem(item.id)}
+							disabled={deleteMutation.isPending}
+							style={{ cursor: 'pointer', color: 'red', background: 'none', border: 'none' }}
+						>
+							Delete
+						</button>
+					</li>
+				))}
+			</ul>
+
+			{items.length === 0 && <p>No items yet. Create one above!</p>}
+		</div>
+	)
+}

package/templates/base/packages/items-module/src/usecases/create-item.ts

@@ -0,0 +1,25 @@
+import type { ItemRepository } from '../ports/item.repository'
+import type { Item, CreateItemInput } from '../domain/item.entity'
+
+export interface CreateItemUseCaseInput extends CreateItemInput {
+	userId: string
+}
+
+interface CreateItemDeps {
+	itemRepository: ItemRepository
+}
+
+/**
+ * Create item use case
+ */
+export function makeCreateItem(deps: CreateItemDeps) {
+	return async (input: CreateItemUseCaseInput): Promise<Item> => {
+		const id = crypto.randomUUID()
+		return deps.itemRepository.create({
+			id,
+			name: input.name,
+			description: input.description,
+			userId: input.userId,
+		})
+	}
+}

package/templates/base/packages/items-module/src/usecases/delete-item.ts

@@ -0,0 +1,18 @@
+import type { ItemRepository } from '../ports/item.repository'
+
+export interface DeleteItemInput {
+	id: string
+}
+
+interface DeleteItemDeps {
+	itemRepository: ItemRepository
+}
+
+/**
+ * Delete item use case
+ */
+export function makeDeleteItem(deps: DeleteItemDeps) {
+	return async (input: DeleteItemInput): Promise<boolean> => {
+		return deps.itemRepository.delete(input.id)
+	}
+}

package/templates/base/packages/items-module/src/usecases/get-item.ts

@@ -0,0 +1,19 @@
+import type { ItemRepository } from '../ports/item.repository'
+import type { Item } from '../domain/item.entity'
+
+export interface GetItemInput {
+	id: string
+}
+
+interface GetItemDeps {
+	itemRepository: ItemRepository
+}
+
+/**
+ * Get item use case
+ */
+export function makeGetItem(deps: GetItemDeps) {
+	return async (input: GetItemInput): Promise<Item | null> => {
+		return deps.itemRepository.findById(input.id)
+	}
+}

package/templates/base/packages/items-module/src/usecases/list-items.ts

@@ -0,0 +1,21 @@
+import type { ItemRepository } from '../ports/item.repository'
+import type { Item } from '../domain/item.entity'
+
+export interface ListItemsInput {
+	userId: string
+}
+
+export type ListItemsOutput = Item[]
+
+interface ListItemsDeps {
+	itemRepository: ItemRepository
+}
+
+/**
+ * List items use case
+ */
+export function makeListItems(deps: ListItemsDeps) {
+	return async (input: ListItemsInput): Promise<ListItemsOutput> => {
+		return deps.itemRepository.findByUserId(input.userId)
+	}
+}

package/templates/base/packages/items-module/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"outDir": "dist",
+		"rootDir": "src",
+		"jsx": "react-jsx"
+	},
+	"include": ["src/**/*"]
+}

package/templates/base/turbo.json

@@ -1,8 +1,10 @@
 {
 	"$schema": "https://turbo.build/schema.json",
+	"ui": "tui",
 	"tasks": {
 		"build": {
 			"dependsOn": ["^build"],
+			"inputs": ["$TURBO_DEFAULT$", ".env*"],
 			"outputs": ["dist/**"]
 		},
 		"dev": {
@@ -10,7 +12,17 @@
 			"persistent": true
 		},
 		"check-types": {
-			"dependsOn": ["^build"]
+			"dependsOn": ["^check-types"]
+		},
+		"db:generate": {
+			"cache": false
+		},
+		"db:migrate": {
+			"cache": false
+		},
+		"db:studio": {
+			"cache": false,
+			"persistent": true
 		}
 	}
 }

package/templates/base/apps/web/src/App.tsx

@@ -1,16 +0,0 @@
-export function App() {
-	return (
-		<div style={{ fontFamily: 'system-ui', padding: '2rem' }}>
-			<h1>Welcome to __APP_NAME__</h1>
-			<p>Your Kuckit application is ready!</p>
-			<ul>
-				<li>
-					Server: <a href="http://localhost:3000/health">http://localhost:3000/health</a>
-				</li>
-				<li>
-					Web: <a href="http://localhost:3001">http://localhost:3001</a>
-				</li>
-			</ul>
-		</div>
-	)
-}