create-coline-app 2.3.0 → 2.5.0

package/templates/backendless/examples/settings.tsx

@@ -0,0 +1,117 @@
+import * as React from "react";
+import {
+  AppPage,
+  SettingsSection,
+  Input,
+  Textarea,
+  Button,
+  AppLoadingState,
+  AppErrorState,
+} from "@colineapp/ui";
+export function Example({ state = "ready" }: { state?: string }) {
+  const initial = {
+    name: state === "empty" ? "" : "Studio journal",
+    description: state === "empty" ? "" : "Stories about thoughtful work and the people behind it.",
+    digest: true,
+    cadence: "Weekly",
+  };
+  const [form, setForm] = React.useState(initial);
+  const [saved, setSaved] = React.useState(initial);
+  const [notice, setNotice] = React.useState("");
+  const [failure, setFailure] = React.useState(state === "error" || state === "denied");
+  const dirty = JSON.stringify(form) !== JSON.stringify(saved);
+  return (
+    <AppPage
+      title="Journal settings"
+      eyebrow="Studio journal"
+      width="reading"
+      description="The essentials for your publication and the people following it."
+    >
+      {state === "loading" ? (
+        <AppLoadingState label="Loading settings" />
+      ) : failure ? (
+        <AppErrorState
+          message={
+            state === "denied"
+              ? "Only editors can change journal settings."
+              : "Settings couldn’t be loaded."
+          }
+          onRetry={state === "denied" ? undefined : () => setFailure(false)}
+        />
+      ) : (
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            setSaved({ ...form });
+            setNotice("Settings saved for this preview session.");
+          }}
+        >
+          <SettingsSection
+            title="Publication"
+            description="A clear name and description help readers know what to expect."
+          >
+            <label className="example-field">
+              Name
+              <Input
+                required
+                value={form.name}
+                onChange={(event) => setForm({ ...form, name: event.target.value })}
+              />
+            </label>
+            <label className="example-field">
+              Description
+              <Textarea
+                value={form.description}
+                onChange={(event) => setForm({ ...form, description: event.target.value })}
+              />
+            </label>
+          </SettingsSection>
+          <SettingsSection
+            title="Reader updates"
+            description="Set a comfortable rhythm. Readers can always manage their own subscription."
+          >
+            <label className="example-toggle">
+              <input
+                type="checkbox"
+                checked={form.digest}
+                onChange={(event) => setForm({ ...form, digest: event.target.checked })}
+              />
+              Send a journal digest
+            </label>
+            <label className="example-field">
+              Frequency
+              <select
+                className="example-select"
+                disabled={!form.digest}
+                value={form.cadence}
+                onChange={(event) => setForm({ ...form, cadence: event.target.value })}
+              >
+                <option>Weekly</option>
+                <option>Monthly</option>
+              </select>
+            </label>
+          </SettingsSection>
+          <div className="flex items-center justify-end gap-3 py-6">
+            <span role="status" className="example-meta">
+              {dirty ? "Unsaved changes" : notice}
+            </span>
+            <Button
+              type="button"
+              variant="outline"
+              disabled={!dirty}
+              onClick={() => {
+                setForm(saved);
+                setNotice("");
+              }}
+            >
+              Discard
+            </Button>
+            <Button type="submit" disabled={!dirty}>
+              Save changes
+            </Button>
+          </div>
+        </form>
+      )}
+    </AppPage>
+  );
+}

package/templates/backendless/examples/triage.tsx

@@ -0,0 +1,253 @@
+import * as React from "react";
+import {
+  AppPage,
+  PageToolbar,
+  Input,
+  Button,
+  RecordTable,
+  SplitView,
+  DetailPanel,
+  StatusBadge,
+  EmptyState,
+  AppErrorState,
+  AppLoadingState,
+} from "@colineapp/ui";
+
+const initial = [
+  {
+    id: "REQ-108",
+    title: "Invite links expire before the team joins",
+    team: "Juniper",
+    category: "Access",
+    status: "Needs review",
+    detail:
+      "Our contractors often join a few days after an invitation. Could we extend the window or resend an invitation from the same screen?",
+    date: "Today",
+  },
+  {
+    id: "REQ-107",
+    title: "Export a filtered view",
+    team: "Forma",
+    category: "Workflow",
+    status: "In progress",
+    detail:
+      "We share a weekly report with partners. It would help to export just the rows in the current view, with the same column order.",
+    date: "Today",
+  },
+  {
+    id: "REQ-106",
+    title: "Remember my sidebar width",
+    team: "Juniper",
+    category: "Experience",
+    status: "Needs review",
+    detail:
+      "The sidebar resets every morning. Keep the width I chose so longer project names stay readable.",
+    date: "Yesterday",
+  },
+  {
+    id: "REQ-105",
+    title: "Include context in email notifications",
+    team: "Acorn",
+    category: "Notifications",
+    status: "Planned",
+    detail:
+      "Show a short excerpt with each notification so we know whether a reply is urgent before opening the app.",
+    date: "Yesterday",
+  },
+  {
+    id: "REQ-104",
+    title: "Bulk archive completed requests",
+    team: "Forma",
+    category: "Workflow",
+    status: "Needs review",
+    detail: "Let us select completed requests and archive them together at the end of the week.",
+    date: "Sep 3",
+  },
+];
+export function Example({ state = "ready" }: { state?: string }) {
+  const [records, setRecords] = React.useState(state === "empty" ? [] : initial);
+  const [selected, setSelected] = React.useState<string | null>(
+    state === "ready" ? initial[0]!.id : null,
+  );
+  const [search, setSearch] = React.useState("");
+  const [status, setStatus] = React.useState("All requests");
+  const [failure, setFailure] = React.useState(state === "error" || state === "denied");
+  const detail = records.find((record) => record.id === selected);
+  const visible = records.filter(
+    (record) =>
+      `${record.title} ${record.team}`.toLowerCase().includes(search.toLowerCase()) &&
+      (status === "All requests" || record.status === status),
+  );
+  const panel = React.useRef<HTMLDivElement>(null);
+  const opener = React.useRef<HTMLElement | null>(null);
+  function close() {
+    setSelected(null);
+    requestAnimationFrame(() => opener.current?.focus());
+  }
+  function open(id: string) {
+    opener.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    setSelected(id);
+    requestAnimationFrame(() => {
+      panel.current?.focus();
+      panel.current?.scrollIntoView({ block: "nearest" });
+    });
+  }
+  function add() {
+    const id = `REQ-${109 + records.length}`;
+    setRecords((current) => [
+      ...current,
+      {
+        id,
+        title: "New request",
+        team: "Your team",
+        category: "Workflow",
+        status: "Needs review",
+        detail: "Describe the problem, who it affects, and what a good outcome looks like.",
+        date: "Today",
+      },
+    ]);
+    open(id);
+  }
+  return (
+    <AppPage
+      title="Requests"
+      eyebrow="Customer feedback"
+      description="Understand what matters. Turn the next useful idea into a decision."
+      actions={<Button onClick={add}>New request</Button>}
+    >
+      <PageToolbar>
+        <Input
+          aria-label="Search requests"
+          placeholder="Search requests…"
+          className="max-w-xs"
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+        />
+        <select
+          aria-label="Filter by status"
+          className="example-select"
+          value={status}
+          onChange={(event) => setStatus(event.target.value)}
+        >
+          {["All requests", "Needs review", "In progress", "Planned"].map((value) => (
+            <option key={value}>{value}</option>
+          ))}
+        </select>
+        <span className="example-meta">{visible.length} requests</span>
+      </PageToolbar>
+      {state === "loading" ? (
+        <AppLoadingState label="Loading requests" />
+      ) : failure ? (
+        <AppErrorState
+          message={
+            state === "denied"
+              ? "You don’t have access to these requests. Ask a workspace owner for access."
+              : "Requests couldn’t be loaded. Your changes are safe."
+          }
+          onRetry={state === "denied" ? undefined : () => setFailure(false)}
+        />
+      ) : (
+        <SplitView
+          list={
+            <RecordTable
+              records={visible}
+              rowKey={(record) => record.id}
+              onOpen={(record) => open(record.id)}
+              label="Customer requests"
+              columns={[
+                {
+                  key: "title",
+                  label: "Request",
+                  render: (record) => (
+                    <>
+                      <span className="example-meta">{record.id}</span>
+                      <span>{record.title}</span>
+                    </>
+                  ),
+                },
+                { key: "team", label: "Team", render: (record) => record.team, secondary: true },
+                {
+                  key: "status",
+                  label: "Status",
+                  render: (record) => (
+                    <StatusBadge
+                      tone={
+                        record.status === "In progress"
+                          ? "info"
+                          : record.status === "Planned"
+                            ? "success"
+                            : "warning"
+                      }
+                    >
+                      {record.status}
+                    </StatusBadge>
+                  ),
+                },
+              ]}
+              empty={
+                <EmptyState
+                  title={search ? "No matching requests" : "A clear queue"}
+                  description="Capture feedback when it arrives. Every request gets one place for context and a decision."
+                  action={<Button onClick={add}>Add a request</Button>}
+                />
+              }
+            />
+          }
+          detail={
+            detail && (
+              <div ref={panel} tabIndex={-1}>
+                <DetailPanel
+                  title={detail.title}
+                  subtitle={detail.id}
+                  onClose={close}
+                  actions={
+                    <Button
+                      variant="outline"
+                      onClick={() =>
+                        setRecords((current) =>
+                          current.map((record) =>
+                            record.id === detail.id ? { ...record, status: "Planned" } : record,
+                          ),
+                        )
+                      }
+                    >
+                      Mark as planned
+                    </Button>
+                  }
+                >
+                  <div className="example-meta">
+                    <span>{detail.team}</span>
+                    <span>·</span>
+                    <span>{detail.date}</span>
+                  </div>
+                  <p className="example-description">{detail.detail}</p>
+                  <label className="example-field">
+                    Status
+                    <select
+                      className="example-select"
+                      value={detail.status}
+                      onChange={(event) =>
+                        setRecords((current) =>
+                          current.map((record) =>
+                            record.id === detail.id
+                              ? { ...record, status: event.target.value }
+                              : record,
+                          ),
+                        )
+                      }
+                    >
+                      {["Needs review", "In progress", "Planned"].map((value) => (
+                        <option key={value}>{value}</option>
+                      ))}
+                    </select>
+                  </label>
+                  <div className="example-meta">{detail.category}</div>
+                </DetailPanel>
+              </div>
+            )
+          }
+        />
+      )}
+    </AppPage>
+  );
+}

package/templates/backendless/main.tsx

@@ -1,100 +1,232 @@
+import * as React from "react";
 import { createRoot } from "react-dom/client";
 import {
+  Input,
+  Textarea,
+  useColineContext,
   Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
   ColineAppProvider,
-  Skeleton,
   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 }),
+    (capabilities) => capabilities.files.list({ typeKey: "__APP_KEY__.note", limit: 50 }),
     [],
   );
-  const notes = files.data?.files ?? [];
+  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> {
-    const file = await coline.files.create({
-      typeKey: "__APP_KEY__.note",
-      name: "Untitled note",
-      document: { title: "Untitled note", body: "" },
-    });
-    await coline.navigation.openFile(file.fileId);
+    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 (
-    <main className="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-6 bg-background p-6 text-foreground">
-      <header className="flex items-center justify-between gap-4">
-        <div>
-          <h1 className="text-xl font-semibold">__APP_NAME__ is running</h1>
-          <p className="mt-1 text-sm text-muted-foreground">
-            Edit app.config.ts or main.tsx and save to hot-swap this app.
-          </p>
-        </div>
-        <Button onClick={() => void createNote()}>New note</Button>
-      </header>
-
+    <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 ? (
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-16 w-full" />
-          <Skeleton className="h-16 w-full" />
-        </div>
+        <AppLoadingState label="Loading notes" />
       ) : files.error ? (
-        <Card>
-          <CardHeader>
-            <CardTitle>Couldn&apos;t load notes</CardTitle>
-            <CardDescription>{files.error}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Button variant="outline" onClick={files.refetch}>
-              Retry
-            </Button>
-          </CardContent>
-        </Card>
-      ) : notes.length === 0 ? (
-        <Card>
-          <CardHeader>
-            <CardTitle>Edit me</CardTitle>
-            <CardDescription>
-              This is a real React surface. Replace this starter with your app,
-              then ask Kairo to create a note called Hello.
-            </CardDescription>
-          </CardHeader>
-        </Card>
+        <AppErrorState message={files.error} onRetry={files.refetch} />
       ) : (
-        <div className="flex flex-col gap-2">
-          {notes.map((file: ColineFileSummaryV2) => (
-            <button
-              key={file.fileId}
-              type="button"
-              onClick={() => void coline.navigation.openFile(file.fileId)}
-              className="rounded-xl border border-border bg-card px-4 py-3 text-left hover:bg-muted/50"
-            >
-              <p className="text-sm font-medium">{file.name}</p>
-              <p className="mt-1 text-xs text-muted-foreground">Open note</p>
-            </button>
-          ))}
-        </div>
+        <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>
+                )
+              }
+            />
+          }
+        />
       )}
-    </main>
+    </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>
-      <StarterHome />
+      <AppSurface />
     </ColineAppProvider>,
   );
 }