@gogitcms/design-system 0.16.0-next.0 → 0.16.0-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gogitcms/design-system",
-  "version": "0.16.0-next.0",
+  "version": "0.16.0-next.1",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "// exports": "The root entry is the react-native source the SPAs, desktop app and mobile app consume. ./web is the plain-DOM build for server-rendered surfaces (the Astro docs site) that don't run react-native-web, and ./css ships the tokens as custom properties. The trailing wildcard keeps deep paths resolvable — plugin bundling and the Vite aliases reach into src/ directly.",

package/src/__tests__/ContentBrowser.forms.test.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection } from "../components/ContentBrowser";
+import { FORMS_NAV_KEY, formsNavKey, type FormInfo, type FormsApi } from "../forms";
+
+// Force the desktop layout (jsdom reports width 0 → mobile otherwise).
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const contact: FormInfo = {
+  name: "contact",
+  label: "Contact us",
+  fields: [{ name: "email", type: "string" }],
+  fieldCount: 1,
+  submissionCount: 2,
+  versioned: true,
+  canDelete: true,
+};
+
+const newsletter: FormInfo = {
+  name: "newsletter",
+  label: "Newsletter",
+  fields: [{ name: "email", type: "string" }],
+  fieldCount: 1,
+  submissionCount: 308,
+  versioned: false,
+  canDelete: false,
+};
+
+function makeApi(over: Partial<FormsApi> = {}): FormsApi {
+  return {
+    forms: [contact, newsletter],
+    list: jest.fn(async () => []),
+    count: jest.fn(async () => 0),
+    ...over,
+  };
+}
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+
+const entries: CmsEntry[] = [
+  { id: "a", path: "content/posts/a.md", title: "Alpha", body: "" },
+];
+
+function renderForms(activeNavKey: string, onSelectNav = jest.fn()) {
+  render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey={activeNavKey}
+        onSelectNav={onSelectNav}
+        entries={entries}
+        userInitials="ED"
+        forms={makeApi()}
+      />,
+    ),
+  );
+  return onSelectNav;
+}
+
+// The forms list is a content column, like the documents of a collection or the
+// sets under Media — not the whole area after the sidebar. jsdom computes no
+// layout, so this asserts the mechanism: a fixed width rather than a flex.
+test("the forms list sits in a content column, not the full content area", () => {
+  renderForms(FORMS_NAV_KEY);
+
+  const pane = screen.getByTestId("pane-forms");
+  expect(pane).toHaveStyle({ width: "340px" });
+  // A flexing pane is the bug: it would fill everything after the sidebar.
+  expect(pane).not.toHaveStyle({ flexGrow: 1 });
+
+  // Headed like every other content pane, and with the seam that resizes it.
+  expect(screen.getByText("Forms")).toBeInTheDocument();
+  expect(screen.getByTestId("resize-forms")).toBeInTheDocument();
+
+  // And the area beside it says what to do, the way Media and Changes do.
+  expect(screen.getByTestId("forms-empty")).toBeInTheDocument();
+});
+
+test("the column lists the forms and opens one through the nav key", () => {
+  const onSelectNav = renderForms(FORMS_NAV_KEY);
+
+  expect(screen.getByText("Contact us")).toBeInTheDocument();
+  expect(screen.getByText("Newsletter")).toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("form-row-contact"));
+  expect(onSelectNav).toHaveBeenCalledWith(formsNavKey("contact"));
+});
+
+// The other half of the rule: submissions are two levels deeper than a content
+// column can express, so opening a form does hand the whole area to
+// FormsBrowser. Pinned so the fix above is not later applied to both states.
+test("an open form takes the whole content area", async () => {
+  renderForms(formsNavKey("contact"));
+  // Let the submissions load settle before asserting, so the empty inbox — not
+  // a pending fetch — is what is on screen.
+  await screen.findByText("No submissions yet.");
+
+  const pane = screen.getByTestId("pane-forms");
+  expect(pane).not.toHaveStyle({ width: "340px" });
+  expect(screen.queryByTestId("forms-empty")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("resize-forms")).not.toBeInTheDocument();
+});

package/src/__tests__/FormsBrowser.test.tsx

@@ -99,15 +99,20 @@ describe("the forms nav-key space", () => {
 // ── the forms list ──────────────────────────────────────────────────────────
 
 describe("the forms list", () => {
-  it("shows each form's name, description, field count and submission count", () => {
+  it("shows each form's name, description and submission count", () => {
     renderBrowser();
     expect(screen.getByText("Contact us")).toBeTruthy();
     expect(screen.getByText("General enquiries.")).toBeTruthy();
-    expect(screen.getByText("3 fields")).toBeTruthy();
     expect(screen.getByText("2")).toBeTruthy();
     expect(screen.getByText("308")).toBeTruthy();
   });
 
+  it("does not carry the field count, which describes the form and not its inbox", () => {
+    renderBrowser();
+    expect(screen.queryByText("3 fields")).toBeNull();
+    expect(screen.queryByText(/\bfields?\b/)).toBeNull();
+  });
+
   it("opens a form when its row is pressed", () => {
     const { onSelectForm } = renderBrowser();
     fireEvent.click(screen.getByTestId("form-row-contact"));

package/src/components/ContentBrowser.tsx

@@ -4143,11 +4143,41 @@ function DesktopBrowser(props: ContentBrowserProps) {
   // lists the media sets exactly where a collection's documents would be, and the
   // details pane holds the browser for whichever set is selected. Selecting a set
   // goes through onSelectNav, so it lands in the URL like any other selection.
-  // Forms take the whole content area rather than the three-pane model: the
-  // surface is already two levels deep (forms → submissions → one submission),
-  // and threading that through panes designed for collection → document → editor
-  // would mean a pane whose meaning changes with the level.
+  // Forms enter through the same content column every other surface uses: the
+  // list of forms sits exactly where a collection's documents would, at the
+  // list width, with the empty state beside it. A list of half a dozen rows
+  // stretched across everything after the sidebar reads as a different kind of
+  // screen than Edit, Changes and Media, when it is the same kind of screen.
+  //
+  // Opening a form is where forms stop fitting the three-pane model, and so it
+  // is where they leave it: that surface is two more levels deep (submissions →
+  // one submission), and threading those through panes meant for collection →
+  // document → editor would give a pane whose meaning changes with the level.
+  // FormsBrowser owns its own split from there.
   if (formsShowing && props.forms) {
+    if (!activeForm) {
+      return (
+        <AppShell testID="desktop-shell" topBar={topBar} banner={readOnlyBanner}>
+          {navPane}
+          <ResizeHandle width={navW} min={180} max={420} onChange={setNavW} testID="resize-nav" />
+
+          <Pane width={listW} testID="pane-forms" scroll={false} header={<PaneTitle title="Forms" />}>
+            <FormsBrowser
+              api={props.forms}
+              form={null}
+              onSelectForm={(name) => onSelectNav(name ? formsNavKey(name) : FORMS_NAV_KEY)}
+              variant="desktop"
+            />
+          </Pane>
+          <ResizeHandle width={listW} min={260} max={640} onChange={setListW} testID="resize-forms" />
+
+          <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: t.space(6) }}>
+            <Text variant="body" color="tertiary" testID="forms-empty">Select a form</Text>
+          </View>
+          {applyModal}
+        </AppShell>
+      );
+    }
     return (
       <AppShell testID="desktop-shell" topBar={topBar} banner={readOnlyBanner}>
         {navPane}

package/src/components/FormsBrowser.tsx

@@ -130,11 +130,9 @@ function FormRow({ form, onPress }: { form: FormInfo; onPress: () => void }) {
           </Text>
         ) : null}
       </View>
-      {/* The two numbers the request asks for: how much has come in, and how
-          much the form asks for. */}
-      <Text variant="monoSm" color="tertiary">
-        {form.fieldCount} {form.fieldCount === 1 ? "field" : "fields"}
-      </Text>
+      {/* How much has come in. The field count is deliberately not here: it
+          describes the form's shape rather than its inbox, and in a column this
+          narrow it competed with the number a reader actually scans for. */}
       <Text variant="monoSm" color="secondary" style={{ minWidth: 48, textAlign: "right" }}>
         {form.submissionCount}
       </Text>