create-coline-app 2.2.0 → 2.5.0

package/templates/backendless/examples/board.tsx

@@ -0,0 +1,173 @@
+import * as React from "react";
+import {
+  AppPage,
+  PageToolbar,
+  Input,
+  Button,
+  Board,
+  BoardColumn,
+  BoardCard,
+  StatusBadge,
+  AppLoadingState,
+  AppErrorState,
+  EmptyState,
+} from "@colineapp/ui";
+const stages = ["Exploring", "In production", "Ready to publish"];
+const initial = [
+  {
+    id: "1",
+    title: "What a calmer workday looks like",
+    format: "Essay",
+    owner: "Amelia",
+    due: "Sep 12",
+    stage: stages[0]!,
+    description:
+      "A story about fewer interruptions, clearer decisions, and work that stays in motion.",
+  },
+  {
+    id: "2",
+    title: "Inside the studio: Forma",
+    format: "Interview",
+    owner: "Noah",
+    due: "Sep 15",
+    stage: stages[0]!,
+    description: "How a small design team makes room for its most ambitious ideas.",
+  },
+  {
+    id: "3",
+    title: "Small details, better handoffs",
+    format: "Guide",
+    owner: "Amelia",
+    due: "Sep 9",
+    stage: stages[1]!,
+    description: "Five practical ways to leave the next person with useful context.",
+  },
+  {
+    id: "4",
+    title: "September product notes",
+    format: "Update",
+    owner: "Maya",
+    due: "Sep 8",
+    stage: stages[1]!,
+    description: "The changes that make everyday work a little easier.",
+  },
+  {
+    id: "5",
+    title: "Meet the people behind Juniper",
+    format: "Interview",
+    owner: "Noah",
+    due: "Sep 6",
+    stage: stages[2]!,
+    description: "A conversation about craft, collaboration, and starting small.",
+  },
+];
+export function Example({ state = "ready" }: { state?: string }) {
+  const [items, setItems] = React.useState(state === "empty" ? [] : initial);
+  const [search, setSearch] = React.useState("");
+  const [failure, setFailure] = React.useState(state === "error" || state === "denied");
+  const moveControls = React.useRef(new Map<string, HTMLSelectElement>());
+  function move(id: string, stage: string) {
+    setItems((current) => current.map((item) => (item.id === id ? { ...item, stage } : item)));
+    // Moving between columns remounts the select. Keep keyboard users on the story.
+    requestAnimationFrame(() => moveControls.current.get(id)?.focus());
+  }
+  function add() {
+    setItems((current) => [
+      ...current,
+      {
+        id: String(Date.now()),
+        title: "A new story",
+        format: "Essay",
+        owner: "You",
+        due: "Unscheduled",
+        stage: stages[0]!,
+        description: "Start with the idea your reader should take away.",
+      },
+    ]);
+  }
+  const visible = items.filter((item) => item.title.toLowerCase().includes(search.toLowerCase()));
+  return (
+    <AppPage
+      title="Editorial"
+      eyebrow="Studio journal"
+      description="Good stories take shape here. Keep the next edition moving."
+      actions={<Button onClick={add}>New story</Button>}
+    >
+      <PageToolbar>
+        <Input
+          aria-label="Search stories"
+          placeholder="Search stories…"
+          className="max-w-xs"
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+        />
+        <span className="example-meta">September edition · {visible.length} stories</span>
+      </PageToolbar>
+      {state === "loading" ? (
+        <AppLoadingState label="Loading stories" />
+      ) : failure ? (
+        <AppErrorState
+          message={
+            state === "denied"
+              ? "Ask the editor for access to this board."
+              : "The board couldn’t be loaded."
+          }
+          onRetry={state === "denied" ? undefined : () => setFailure(false)}
+        />
+      ) : !visible.length ? (
+        <EmptyState
+          title={search ? "No matching stories" : "Make room for the next story"}
+          description="Add an idea, develop it with your team, and move it through to publication."
+          action={<Button onClick={add}>Add a story</Button>}
+        />
+      ) : (
+        <Board label="Editorial pipeline">
+          {stages.map((stage, index) => (
+            <BoardColumn
+              key={stage}
+              title={stage}
+              count={visible.filter((item) => item.stage === stage).length}
+            >
+              {visible
+                .filter((item) => item.stage === stage)
+                .map((item) => (
+                  <BoardCard
+                    key={item.id}
+                    title={item.title}
+                    footer={
+                      <>
+                        <span className="example-meta">{item.owner}</span>
+                        <span className="example-meta">{item.due}</span>
+                      </>
+                    }
+                  >
+                    <StatusBadge tone={index === 2 ? "success" : "neutral"}>
+                      {item.format}
+                    </StatusBadge>
+                    <p className="example-description">{item.description}</p>
+                    <label className="example-field">
+                      Move to
+                      <select
+                        className="example-select"
+                        aria-label={`Move ${item.title} to`}
+                        value={item.stage}
+                        ref={(element) => {
+                          if (element) moveControls.current.set(item.id, element);
+                          else moveControls.current.delete(item.id);
+                        }}
+                        onChange={(event) => move(item.id, event.currentTarget.value)}
+                      >
+                        {stages.map((value) => (
+                          <option key={value}>{value}</option>
+                        ))}
+                      </select>
+                    </label>
+                  </BoardCard>
+                ))}
+            </BoardColumn>
+          ))}
+        </Board>
+      )}
+    </AppPage>
+  );
+}

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>
+  );
+}