create-coline-app 2.2.0 → 2.5.0

package/templates/backendless/main.tsx

@@ -0,0 +1,232 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import {
+  Input,
+  Textarea,
+  useColineContext,
+  Button,
+  ColineAppProvider,
+  useColine,
+  useColineQuery,
+  AppPage,
+  PageToolbar,
+  RecordTable,
+  EmptyState,
+  AppErrorState,
+  AppLoadingState,
+  StatusBadge,
+} from "@colineapp/ui";
+import type { ColineFileSummaryV2 } from "@colineapp/sdk/v2";
+import "@colineapp/ui/styles.css";
+import "./app.css";
+
+function StarterHome() {
+  const coline = useColine();
+  const files = useColineQuery(
+    (capabilities) => capabilities.files.list({ typeKey: "__APP_KEY__.note", limit: 50 }),
+    [],
+  );
+  const [search, setSearch] = React.useState("");
+  const notes = (files.data?.files ?? []).filter((file) =>
+    file.name.toLowerCase().includes(search.toLowerCase()),
+  );
+  const [creating, setCreating] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  async function createNote(): Promise<void> {
+    setCreating(true);
+    setError(null);
+    try {
+      const file = await coline.files.create({
+        typeKey: "__APP_KEY__.note",
+        name: "Untitled note",
+        document: { title: "Untitled note", body: "" },
+      });
+      await coline.navigation.openFile(file.fileId);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  return (
+    <AppPage
+      title="Notes"
+      eyebrow="__APP_NAME__"
+      description="A shared place for ideas, decisions, and the details worth keeping."
+      actions={
+        <Button disabled={creating} onClick={() => void createNote()}>
+          {creating ? "Creating…" : "New note"}
+        </Button>
+      }
+    >
+      <PageToolbar>
+        <Input
+          aria-label="Search notes"
+          placeholder="Search notes…"
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+          className="max-w-xs"
+        />
+        <span className="text-xs text-muted-foreground">{notes.length} notes</span>
+      </PageToolbar>
+      {error && <AppErrorState message={error} onRetry={() => void createNote()} />}
+      {files.isLoading ? (
+        <AppLoadingState label="Loading notes" />
+      ) : files.error ? (
+        <AppErrorState message={files.error} onRetry={files.refetch} />
+      ) : (
+        <RecordTable<ColineFileSummaryV2>
+          label="Notes"
+          records={notes}
+          rowKey={(file) => file.fileId}
+          onOpen={(file) => void coline.navigation.openFile(file.fileId)}
+          columns={[
+            {
+              key: "name",
+              label: "Name",
+              render: (file) => <span className="font-medium">{file.name}</span>,
+            },
+            {
+              key: "type",
+              label: "Type",
+              render: () => <StatusBadge>Note</StatusBadge>,
+              secondary: true,
+            },
+            {
+              key: "action",
+              label: "",
+              render: () => <span className="text-muted-foreground text-xs">Open →</span>,
+              align: "end",
+            },
+          ]}
+          empty={
+            <EmptyState
+              title={search ? "No matching notes" : "Your next idea starts here"}
+              description={
+                search
+                  ? "Try another name or clear your search."
+                  : "Create a note to capture a decision or share an idea."
+              }
+              action={
+                !search && (
+                  <Button disabled={creating} onClick={() => void createNote()}>
+                    Create a note
+                  </Button>
+                )
+              }
+            />
+          }
+        />
+      )}
+    </AppPage>
+  );
+}
+
+function NoteEditor() {
+  const coline = useColine();
+  const context = useColineContext();
+  const [title, setTitle] = React.useState(
+    String(context.document?.title ?? context.file?.name ?? ""),
+  );
+  const [body, setBody] = React.useState(String(context.document?.body ?? ""));
+  const version = React.useRef(context.file?.version ?? 1);
+  const [saved, setSaved] = React.useState({ title, body });
+  const [saving, setSaving] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const dirty = title !== saved.title || body !== saved.body;
+  React.useEffect(() => {
+    function warn(event: BeforeUnloadEvent) {
+      if (dirty) {
+        event.preventDefault();
+        event.returnValue = "";
+      }
+    }
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [dirty]);
+  async function save() {
+    if (!context.file) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const result = await coline.files.updateDocument(
+        context.file.fileId,
+        { title, body },
+        { expectedVersion: version.current },
+      );
+      version.current = result.version;
+      await coline.files.update(context.file.fileId, { name: title.trim() || "Untitled note" });
+      setSaved({ title, body });
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setSaving(false);
+    }
+  }
+  async function back() {
+    if (
+      dirty &&
+      !(await coline.pickers.confirm({
+        title: "Leave without saving?",
+        description: "Your edits will be lost.",
+        confirmLabel: "Leave",
+        danger: true,
+      }))
+    )
+      return;
+    await coline.navigation.openAppHome();
+  }
+  return (
+    <AppPage title="Edit note" width="reading" description="Keep your thoughts together.">
+      <div className="note-editor">
+        <header className="flex items-center justify-between gap-4">
+          <Button variant="outline" onClick={() => void back()}>
+            All notes
+          </Button>
+          <Button disabled={!dirty || saving} onClick={() => void save()}>
+            {saving ? "Saving…" : "Save"}
+          </Button>
+        </header>
+        <label>
+          Title
+          <Input
+            value={title}
+            disabled={saving}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => setTitle(event.target.value)}
+          />
+        </label>
+        <label>
+          Note
+          <Textarea
+            value={body}
+            disabled={saving}
+            onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
+              setBody(event.target.value)
+            }
+            className="min-h-64"
+          />
+        </label>
+        {error ? (
+          <p role="alert">{error}</p>
+        ) : (
+          <p role="status">{dirty ? "Unsaved changes" : "Saved"}</p>
+        )}
+      </div>
+    </AppPage>
+  );
+}
+function AppSurface() {
+  const context = useColineContext();
+  return context.surface === "editor" ? <NoteEditor key={context.file?.fileId} /> : <StarterHome />;
+}
+
+const root = document.getElementById("root");
+if (root) {
+  createRoot(root).render(
+    <ColineAppProvider>
+      <AppSurface />
+    </ColineAppProvider>,
+  );
+}

package/templates/backendless/package.json

@@ -6,16 +6,26 @@
   "scripts": {
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
+    "check": "coline-app check",
     "push": "coline-app push",
-    "dev": "coline-app dev"
+    "dev": "coline-app dev",
+    "preview": "coline-app preview",
+    "screenshots": "coline-app preview --screenshots .coline/screenshots"
   },
   "dependencies": {
-    "@colineapp/sdk": "^0.3.0",
-    "zod": "^4.0.0"
+    "@colineapp/sdk": "^0.4.0",
+    "@colineapp/ui": "^0.4.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "create-coline-app": "^2.0.0",
-    "typescript": "^5.7.2",
-    "vitest": "^3.0.5"
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "create-coline-app": "^2.5.0",
+    "typescript": "^5.8.2",
+    "vitest": "^3.2.4",
+    "tailwindcss": "^4.3.0",
+    "@colineapp/app-runtime": "^0.4.0"
   }
 }

package/templates/backendless/preview.seed.ts

@@ -0,0 +1,26 @@
+import type { TestWorkspace } from "@colineapp/sdk/testing";
+// Local-only fixtures, never included in the uploaded logic or client entry.
+export async function seed(workspace: TestWorkspace) {
+  for (const [title, body] of [
+    [
+      "A better first five minutes",
+      "The first session should end with something useful. Give people one clear next step, then let them explore.",
+    ],
+    [
+      "Decisions from Friday",
+      "Keep the launch small. Start with the people who already ask for this, listen closely, and ship the next improvement.",
+    ],
+    [
+      "Research: what teams keep losing",
+      "Context gets scattered across messages. Decisions need a home, an owner, and a way to find them again.",
+    ],
+    [
+      "September release checklist",
+      "Review the mobile flow. Confirm keyboard navigation. Write the update in plain English.",
+    ],
+    ["Ideas for the next iteration", "Make the common path faster before adding another setting."],
+  ])
+    await workspace
+      .client()
+      .files.create({ typeKey: "__APP_KEY__.note", name: title!, document: { title, body } });
+}