@devwithbobby/loops 0.1.0

package/example/src/App.tsx

@@ -0,0 +1,185 @@
+import { useAction } from "convex/react";
+import { api } from "../convex/_generated/api";
+import { useState } from "react";
+import "./index.css";
+
+export function App() {
+	const [email, setEmail] = useState("");
+	const [firstName, setFirstName] = useState("");
+	const [lastName, setLastName] = useState("");
+	const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
+
+	const addContact = useAction(api.example.addContact);
+	const sendEvent = useAction(api.example.sendEvent);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handleAddContact = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setIsLoading(true);
+		setMessage(null);
+
+		try {
+			await addContact({
+				email,
+				firstName: firstName || undefined,
+				lastName: lastName || undefined,
+			});
+			setMessage({ type: "success", text: "Contact added successfully!" });
+			setEmail("");
+			setFirstName("");
+			setLastName("");
+		} catch (error) {
+			setMessage({
+				type: "error",
+				text: error instanceof Error ? error.message : "Failed to add contact",
+			});
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	const handleSendEvent = async () => {
+		if (!email) {
+			setMessage({ type: "error", text: "Please enter an email first" });
+			return;
+		}
+
+		setIsLoading(true);
+		setMessage(null);
+
+		try {
+			await sendEvent({
+				email,
+				eventName: "welcome",
+				eventProperties: {
+					firstName: firstName || undefined,
+					lastName: lastName || undefined,
+				},
+			});
+			setMessage({ type: "success", text: "Event sent successfully!" });
+		} catch (error) {
+			setMessage({
+				type: "error",
+				text: error instanceof Error ? error.message : "Failed to send event",
+			});
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<div className="min-h-screen bg-gray-50 w-full flex items-center justify-center p-4">
+			<div className="container mx-auto max-w-md">
+				<div className="bg-white rounded-lg shadow border border-gray-200 p-8">
+					<div className="text-center mb-8">
+						<h1 className="text-3xl font-bold text-gray-900 mb-2">
+							Loops Component
+						</h1>
+						<p className="text-gray-600 text-sm">
+							Powered by Convex Components & Loops.so
+						</p>
+					</div>
+
+					<form onSubmit={handleAddContact} className="space-y-4 mb-6">
+						<div>
+							<label
+								htmlFor="email"
+								className="block text-sm font-medium text-gray-700 mb-1"
+							>
+								Email *
+							</label>
+							<input
+								id="email"
+								type="email"
+								required
+								value={email}
+								onChange={(e) => setEmail(e.target.value)}
+								className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+								placeholder="user@example.com"
+							/>
+						</div>
+
+						<div>
+							<label
+								htmlFor="firstName"
+								className="block text-sm font-medium text-gray-700 mb-1"
+							>
+								First Name
+							</label>
+							<input
+								id="firstName"
+								type="text"
+								value={firstName}
+								onChange={(e) => setFirstName(e.target.value)}
+								className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+								placeholder="John"
+							/>
+						</div>
+
+						<div>
+							<label
+								htmlFor="lastName"
+								className="block text-sm font-medium text-gray-700 mb-1"
+							>
+								Last Name
+							</label>
+							<input
+								id="lastName"
+								type="text"
+								value={lastName}
+								onChange={(e) => setLastName(e.target.value)}
+								className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+								placeholder="Doe"
+							/>
+						</div>
+
+						<button
+							type="submit"
+							disabled={isLoading}
+							className="w-full bg-blue-600 text-white font-medium px-6 py-2 rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+						>
+							{isLoading ? "Adding..." : "Add Contact"}
+						</button>
+					</form>
+
+					<div className="mb-6">
+						<button
+							type="button"
+							onClick={handleSendEvent}
+							disabled={isLoading || !email}
+							className="w-full bg-green-600 text-white font-medium px-6 py-2 rounded-md hover:bg-green-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+						>
+							Send Welcome Event
+						</button>
+					</div>
+
+					{message && (
+						<div
+							className={`p-4 rounded-md mb-4 ${
+								message.type === "success"
+									? "bg-green-50 border border-green-200 text-green-800"
+									: "bg-red-50 border border-red-200 text-red-800"
+							}`}
+						>
+							{message.text}
+						</div>
+					)}
+
+					<div className="bg-blue-50 rounded-lg p-4 border border-blue-100">
+						<p className="text-sm text-gray-700 text-center">
+							<code className="text-blue-600 font-mono text-xs">
+								example/convex/example.ts
+							</code>
+							<br />
+							<span className="text-gray-500 text-xs">
+								Check out the code to see all available features
+							</span>
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default App;

package/example/src/frontend.tsx

@@ -0,0 +1,39 @@
+/**
+ * This file is the entry point for the React app, it sets up the root
+ * element and renders the App component to the DOM.
+ *
+ * It is included in `src/index.html`.
+ */
+
+import { ConvexProvider, ConvexReactClient } from "convex/react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+
+const convexURL = process.env.CONVEX_URL;
+
+if (!convexURL) {
+	throw new Error("No convex URL provided!");
+}
+
+const convex = new ConvexReactClient(convexURL);
+
+function start() {
+	const rootElement = document.getElementById("root");
+
+	if (!rootElement) {
+		throw new Error("Could not find root");
+	}
+
+	const root = createRoot(rootElement);
+	root.render(
+		<ConvexProvider client={convex}>
+			<App />
+		</ConvexProvider>,
+	);
+}
+
+if (document.readyState === "loading") {
+	document.addEventListener("DOMContentLoaded", start);
+} else {
+	start();
+}

package/example/src/index.css

@@ -0,0 +1,15 @@
+@import "tailwindcss";
+
+@layer base {
+	:root {
+		@apply font-sans;
+	}
+
+	body {
+		@apply w-full min-h-screen m-0;
+	}
+
+	#root {
+		@apply w-full;
+	}
+}

package/example/src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Loops Component Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./frontend.tsx"></script>
+  </body>
+</html>

package/example/src/index.tsx

@@ -0,0 +1,19 @@
+import { serve } from "bun";
+import index from "./index.html";
+
+const server = serve({
+	routes: {
+		// Serve index.html for all unmatched routes.
+		"/*": index,
+	},
+
+	development: process.env.NODE_ENV !== "production" && {
+		// Enable browser hot reloading in development
+		hmr: true,
+
+		// Echo console logs from the browser to the server
+		console: true,
+	},
+});
+
+console.log(`🚀 Server running at ${server.url}`);

package/example/tsconfig.json

@@ -0,0 +1,28 @@
+{
+	"compilerOptions": {
+		"lib": ["ESNext", "DOM"],
+		"target": "ESNext",
+		"module": "Preserve",
+		"moduleDetection": "force",
+		"jsx": "react-jsx",
+		"allowJs": true,
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"noEmit": true,
+		"strict": true,
+		"skipLibCheck": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedIndexedAccess": true,
+		"noImplicitOverride": true,
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./src/*"]
+		},
+		"noUnusedLocals": false,
+		"noUnusedParameters": false,
+		"noPropertyAccessFromIndexSignature": false
+	},
+
+	"exclude": ["dist", "node_modules"]
+}

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@devwithbobby/loops",
+  "version": "0.1.0",
+  "description": "Convex component for integrating with Loops.so email marketing platform",
+  "license": "Apache-2.0",
+  "type": "module",
+  "keywords": [
+    "convex",
+    "component",
+    "template",
+    "boilerplate",
+    "bun",
+    "biome",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/robertalv/loops-component.git"
+  },
+  "bugs": {
+    "url": "https://github.com/robertalv/loops-component/issues"
+  },
+  "homepage": "https://github.com/robertalv/loops-component#readme",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "@convex-dev/component-source": "./src/client/index.ts",
+      "types": "./dist/client/index.d.ts",
+      "default": "./dist/client/index.js"
+    },
+    "./convex.config": {
+      "@convex-dev/component-source": "./src/component/convex.config.ts",
+      "types": "./dist/component/convex.config.d.ts",
+      "default": "./dist/component/convex.config.js"
+    }
+  },
+  "scripts": {
+    "dev": "run-p -r 'dev:backend' 'dev:frontend' 'build:watch'",
+    "dev:backend": "convex dev --live-component-sources --typecheck-components",
+    "dev:frontend": "bun --hot example/src/index.tsx",
+    "build": "tsc --project tsconfig.build.json",
+    "build:watch": "chokidar 'tsconfig*.json' 'src/**/*.ts' -i '**/*.test.*' -i '**/test-setup.ts' -c 'bun run build' --initial",
+    "clean": "rm -rf dist node_modules",
+    "test": "bun test",
+    "test:watch": "bun test --watch",
+    "test:coverage": "bun test --coverage",
+    "test:bail": "bun test --bail",
+    "lint": "biome lint .",
+    "lint:fix": "biome lint --write .",
+    "format": "biome format --write .",
+    "check": "biome check .",
+    "check:fix": "biome check --write .",
+    "typecheck": "tsc --noEmit",
+    "attw": "attw $(npm pack -s) --exclude-entrypoints ./convex.config --profile esm-only",
+    "prepare": "bun run build",
+    "changeset": "changeset",
+    "ci:version": "changeset version && bun update",
+    "ci:publish": "bun run preversion && changeset publish",
+    "preversion": "bun run clean && bun install && run-p test lint typecheck attw",
+    "version": "pbcopy <<<$npm_package_version; vim CHANGELOG.md && biome format --write CHANGELOG.md && git add CHANGELOG.md",
+    "postversion": "git push --follow-tags",
+    "alpha": "bun run preversion && npm version prerelease --preid alpha && npm publish --tag alpha",
+    "release": "bun run preversion && npm version patch && npm publish"
+  },
+  "peerDependencies": {
+    "convex": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "typescript": "^5.9.3"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.2",
+    "@biomejs/biome": "2.3.0",
+    "@changesets/changelog-github": "^0.5.1",
+    "@changesets/cli": "^2.29.7",
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/types": "^20.0.0",
+    "@types/bun": "^1.3.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "bun-plugin-tailwind": "^0.1.2",
+    "chokidar-cli": "^3.0.0",
+    "commitlint-config-gitmoji": "^2.3.1",
+    "convex": "^1.28.0",
+    "convex-helpers": "^0.1.104",
+    "convex-test": "^0.0.38",
+    "lefthook": "^2.0.0",
+    "npm-run-all": "^4.1.5",
+    "pkg-pr-new": "^0.0.60",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.1.16",
+    "zod": "^4.1.12",
+    "zodvex": "^0.2.3"
+  }
+}

package/prds/CHANGELOG.md

@@ -0,0 +1,38 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Changed
+- Moved `convex` and `react` to `peerDependencies` to prevent version conflicts
+
+### Added
+- Added `@arethetypeswrong/cli` for package validation
+- Added `attw` script for validating package exports
+
+## [0.1.0] - 2025-10-24
+
+### Added
+- Initial release of the Convex component template
+- Sharded counter component implementation
+- React hooks for component integration (`useLoopsComponent`, `useIncrementCounter`, `useCounterValue`)
+- Complete Convex component architecture with example app
+- GitHub Actions workflow with `pkg.pr.new` integration
+- Lefthook for automated pre-commit checks
+- Biome for linting and formatting
+- Comprehensive test suite using `convex-test`
+- TypeScript support with strict mode
+- Bun-based development workflow
+- Live component sources for hot-reloading during development
+
+### Documentation
+- README with setup and usage instructions
+- CLAUDE.md for AI-assisted development guidance
+- Example app demonstrating component usage
+
+[Unreleased]: https://github.com/robertalv/loops-component/compare/v0.1.0...HEAD
+[0.1.0]: https://github.com/robertalv/loops-component/releases/tag/v0.1.0