blixify-ui-web-mcp 0.1.72 → 0.1.76

package/lib/components/display/newTable/newTable.stories.tsx

@@ -833,3 +833,70 @@ export const RowLinks = () => {
     </StorySection>
   );
 };
+
+// INFO: reference columns carry a solid line under their header and lookup
+// columns a dashed one; a lookup is drawn as its source column's type
+export const LinkedColumns = () => {
+  const columns: NewTableColumn[] = [
+    { key: "name", title: "Customer", type: "string" },
+    {
+      key: "project",
+      title: "PV Project",
+      type: "reference",
+      referenceSpaceId: "projects",
+      referenceLabel: "code",
+    },
+    {
+      key: "projectStatus",
+      title: "Project Status",
+      type: "string",
+      referenceFieldId: "project",
+      lookupFieldId: "status",
+      disabled: true,
+    },
+    {
+      key: "installer",
+      title: "Installer",
+      type: "string",
+      referenceFieldId: "project",
+      lookupFieldId: "installer",
+      disabled: true,
+    },
+    { key: "notes", title: "Notes", type: "string" },
+  ];
+  const rows = [
+    {
+      id: "1",
+      name: "Andrew Tan",
+      project: "PV-1023",
+      projectStatus: "Installed",
+      installer: "Ahmad",
+      notes: "Call before visit",
+    },
+    {
+      id: "2",
+      name: "Celine Wong",
+      project: "PV-1031",
+      projectStatus: "Scheduled",
+      installer: "Kumar",
+      notes: "",
+    },
+  ];
+  return (
+    <StorySection
+      title="Linked columns"
+      description="A reference column has a solid line under its header; a lookup column, filled from the linked record, has a dashed one."
+    >
+      <NewTableImpl
+        columns={columns}
+        data={rows}
+        size={rows.length}
+        limit={10}
+        cursor=""
+        loading={false}
+        paginationType="page"
+        handleUpdatePageIndex={() => {}}
+      />
+    </StorySection>
+  );
+};

package/lib/components/navigation/leftNav/README.md

@@ -167,7 +167,7 @@ Below `lg` the rail moves into the mobile drawer as a row of icons above the sid
 | `searchable`                   | `boolean`                                                  | `false` | Shows a filter box. Matches are listed flat, each with the path it sits under (e.g. `Sales › Reports`)      |
 | `searchAction`                 | `ReactElement`                                             | —       | A small control inside the right end of the filter box, such as a filter button opening the app's own pop-up. Shown only with `searchable` |
 | `keepSearchAncestors`          | `boolean`                                                  | `false` | With `searchable`, keeps each match under its parents (a workspace, a folder page), shown open, instead of the flat list. Rows that neither match nor hold a match are left out |
-| `persistKey`                   | `string`                                                   | —       | localStorage key that remembers open groups and pages. A new key loads that key's stored state.             |
+| `persistKey`                   | `string`                                                   | —       | localStorage key that remembers open groups and pages. A new key loads that key's stored state. Also keeps how far the sidebar is scrolled for the browser tab (sessionStorage `<persistKey>-scroll`), so a page that mounts its own sidebar opens it at the same place |
 | `defaultExpandedIds`           | `string[]`                                                 | —       | Groups (by `groupId`) and pages (by `id`) open when nothing is stored for them                              |
 
 ##### Moving rows in a tree

package/lib/components/navigation/leftNav/leftNav.stories.tsx

@@ -819,3 +819,64 @@ export const LeftNav = () => {
     </>
   );
 };
+
+// INFO: a long sidebar beside a heavy page, for checking two things: typing in
+// the filter does not redraw the page, and a page that mounts its own sidebar
+// opens it where the last one was scrolled to
+const longNavigation: Navigation[] = Array.from({ length: 80 }, (_, index) => ({
+  id: `sheet-${index + 1}`,
+  name: `Datasheet ${index + 1}`,
+  href: `/sheet-${index + 1}`,
+  icon: index % 2 ? FolderIcon : Squares2X2Icon,
+  groupId: index < 40 ? "Sales" : "Operations",
+}));
+
+const HeavyPage = (props: { title: string }) => {
+  const draws = React.useRef(0);
+  draws.current += 1;
+  return (
+    <div className="p-6 text-sm text-gray-600">
+      <p className="mb-2 font-semibold text-gray-900">{props.title}</p>
+      <p className="mb-4">Page drawn {draws.current} time(s)</p>
+      {Array.from({ length: 3000 }, (_, index) => (
+        <div key={index} className="border-b border-gray-100 py-1">
+          Row {index + 1}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const RememberedScroll = () => {
+  const [selectedId, setSelectedId] = useState("sheet-1");
+  return (
+    <StorySection
+      title="Remembered scroll and a quiet filter"
+      description="Scroll the sidebar down and pick a datasheet near the bottom: each pick mounts a new sidebar, as a page that draws its own does, and it opens where you left it (persistKey keeps the position for the browser tab). Type in the filter: the page's draw count stays the same while you type."
+    >
+      <div className="w-full h-[32rem] relative overflow-hidden border rounded-lg">
+        <LeftNavImpl
+          key={selectedId}
+          persistKey="story-left-nav-remembered"
+          searchable={true}
+          keepSearchAncestors={true}
+          selectedId={selectedId}
+          navigation={longNavigation}
+          leftNavMobileMenu={false}
+          handleBarsOnClick={(id) => setSelectedId(id)}
+          handleToggleLeftNavMobileMenu={() => {}}
+          renderDashboardLogo={() => renderLogo()}
+          renderDashboardContent={() => (
+            <HeavyPage
+              title={
+                longNavigation.find((each) => each.id === selectedId)?.name ??
+                ""
+              }
+            />
+          )}
+          renderDashboardHeaderContent={renderHeader}
+        />
+      </div>
+    </StorySection>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blixify-ui-web-mcp",
-  "version": "0.1.72",
+  "version": "0.1.76",
   "license": "MIT",
   "main": "lib/mcp/server.js",
   "bin": {