blixify-ui-web-mcp 0.1.26 → 0.1.27

package/lib/components/data/dataWrapper/dataWrapper.view.stories.tsx

@@ -22,11 +22,17 @@ import {
 } from "../dataTemplate/spaceModel";
 import {
   DataWrapperTestSchema,
-  SCROLL_TEST_API,
   SCROLL_TEST_COLLECTION,
   ServiceChecklistSchema,
 } from "./dataWrapper.fixtures";
 import { DataTemplateWrapper } from "./index";
+import {
+  STORY_API_HOST,
+  STORY_NAMES,
+  handleBuildStoryRecords,
+  storyWorkspace,
+  useStoryBackend,
+} from "./storyBackend.fixtures";
 import { StarIcon } from "@heroicons/react/24/outline";
 import {
   CheckCircleIcon,
@@ -46,18 +52,48 @@ const meta = {
 
 export default meta;
 
+// INFO: served from /api/mongoData rather than /api/data, the endpoint shape
+// this story has always used
+const CHECKLIST_ENDPOINT = `${STORY_API_HOST}/api/mongoData`;
+
+const handleBuildChecklistRecord = (index: number) => ({
+  _id: `checklist-${index}`,
+  clientName: STORY_NAMES[index % STORY_NAMES.length],
+  clientPhone: `01${2000000 + index * 1379}`,
+  address: `${index} Jalan Contoh, 50450 Kuala Lumpur`,
+  date: dayjs()
+    .add(index - 15, "day")
+    .toISOString(),
+  installerName: STORY_NAMES[(index + 4) % STORY_NAMES.length],
+  numberOfModules: 8 + (index % 12),
+  typeOfInverter: index % 2 === 0 ? "String Inverter" : "Microinverter",
+  numberOfInverters: 1 + (index % 3),
+  status: index % 3 === 0 ? "Approved" : "Pending",
+  panelsCleaned: index % 2 === 0,
+  cablingInspected: index % 4 !== 0,
+  // INFO: left empty — an image value is a file name resolved against the asset
+  // endpoint, and the story asset endpoint serves nothing
+  flowDiagramAppendix: "",
+  notes: index % 5 === 0 ? "Access via the rear gate." : "",
+});
+
+// INFO: the e2e CRUD spec answers this story's requests with page.route
 export const DataWrapper = () => {
-  const [mount, setMount] = useState<boolean>(false);
+  const mount = useStoryBackend({
+    endpoint: CHECKLIST_ENDPOINT,
+    collections: {
+      "dtw-test-collection": handleBuildStoryRecords(
+        30,
+        handleBuildChecklistRecord,
+      ),
+    },
+    yieldToE2E: true,
+  });
   const dataRefreshRef: any = useRef(null);
   const [statusFilter] = useState<string>("all");
   const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
   const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
   const [listLayout, setListLayout] = useState("table");
-  const dtwBaseUrl = "http://localhost:3000";
-
-  useEffect(() => {
-    setMount(true);
-  }, []);
 
   useEffect(() => {
     if (mount && dataRefreshRef.current) {
@@ -158,15 +194,7 @@ export const DataWrapper = () => {
           id={selectedId}
           collectionId={"dtw-test-collection"}
           schema={ServiceChecklistSchema}
-          workspace={{
-            apiEndpointType: "mongoDB",
-            apiEndpoint: `${dtwBaseUrl}/api/mongoData`,
-            apiEndpointToken: "",
-            apiUserToken: "",
-            assetEndpoint:
-              "https://firebasestorage.googleapis.com/v0/b/demo-bucket.appspot.com/o/",
-            assetUploadEndpoint: `${dtwBaseUrl}/api/asset`,
-          }}
+          workspace={storyWorkspace(CHECKLIST_ENDPOINT)}
           edit={{
             allEditable: true,
             disabledUpdate: false,
@@ -608,22 +636,42 @@ const DTWGroupTestSchema = [
   },
 ];
 
-// ═══════════════════════════════════════════════════════════════════════════════
-// INFO: Standalone story — renders NewTable, NewList, NewKanban directly with
-// inline mock data. No backend required. Uses a simple "Tasks" schema that
-// exercises list/date/number types to show off the new components.
-// ═══════════════════════════════════════════════════════════════════════════════
+const WORK_ORDER_STATUSES = [
+  "Not Completed",
+  "Completed",
+  "In Progress",
+  "Cancelled",
+];
+
+const handleBuildWorkOrderRecord = (index: number) => {
+  const start = dayjs().subtract(index, "day");
+  return {
+    _id: `work-order-${index}`,
+    title: `Work Order ${String(index).padStart(3, "0")}`,
+    status: WORK_ORDER_STATUSES[index % WORK_ORDER_STATUSES.length],
+    operationDay: (index % 4) + 1,
+    startDate: start.toISOString(),
+    endDate: start.add(6, "hour").toISOString(),
+    totalFlight: 2 + (index % 6),
+    totalHours: 3 + (index % 5),
+  };
+};
 
+// INFO: the e2e CRUD spec answers this story's requests with page.route
 export const DTWGroupTest = () => {
-  const [mount, setMount] = useState(false);
+  const mount = useStoryBackend({
+    collections: {
+      [SCROLL_TEST_COLLECTION]: handleBuildStoryRecords(
+        24,
+        handleBuildWorkOrderRecord,
+      ),
+    },
+    yieldToE2E: true,
+  });
   const dataRefreshRef: any = useRef(null);
   const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
   const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
 
-  useEffect(() => {
-    setMount(true);
-  }, []);
-
   if (!mount) return <Loading />;
 
   return (
@@ -631,8 +679,8 @@ export const DTWGroupTest = () => {
       <div className="font-semibold mb-1 text-gray-900">DTW Group Test</div>
       <div className="text-sm font-light mb-4 text-gray-500">
         Multi-tab + multi-group schema demo. List + read view renders sections
-        by tabId / groupId; Create / Update / Delete write to the configured
-        backend.
+        by tabId / groupId; Create / Update / Delete write to the in-memory
+        story backend.
       </div>
       <DataTemplateWrapper
         ref={dataRefreshRef}
@@ -641,14 +689,7 @@ export const DTWGroupTest = () => {
         id={selectedId}
         collectionId={SCROLL_TEST_COLLECTION}
         schema={DTWGroupTestSchema}
-        workspace={{
-          apiEndpointType: "mongoDB",
-          apiEndpoint: SCROLL_TEST_API,
-          apiEndpointToken: "",
-          apiUserToken: "",
-          assetEndpoint: "",
-          assetUploadEndpoint: SCROLL_TEST_API.replace("/data", "/asset"),
-        }}
+        workspace={storyWorkspace()}
         edit={{
           allEditable: true,
           disabledUpdate: false,
@@ -702,13 +743,9 @@ DTWGroupTest.storyName = "DTW Group Test";
 // SECTION: Offline demo — DTW with no backend required
 // ===================================================================================
 
-// INFO: every other DTW story points at a localhost dev API, so opening Storybook without
-// that server running shows an empty skeleton table. This story instead serves DTW from an
-// in-memory array via axios-mock-adapter, installed on the shared axios instance that
-// DataTemplateWrapper passes down as lib.axios. Nothing here reaches the network, so the
-// story is the reference for reviewing DTW behaviour (including viewSettings.readDrawer) without
-// any setup. The .invalid TLD is reserved by RFC 2606 and can never resolve, so a missed
-// mock fails loudly instead of silently hitting a real host.
+// INFO: serves DTW from an in-memory array via axios-mock-adapter, installed on the shared
+// axios instance that DataTemplateWrapper passes down as lib.axios. Its own mock rather than
+// the story backend, because it numbers new records (refNo) the way this demo shows them.
 const DRAWER_DEMO_COLLECTION = "dtw-drawer-demo";
 
 const DRAWER_DEMO_ENDPOINT = "https://demo.blixify.invalid/api/data";
@@ -937,15 +974,20 @@ const handleInstallDrawerDemoMock = (store: any[]) => {
 // state wiring is identical — handleNavigate still just sets type + id, and the wrapper
 // decides whether a read means "swap the page" or "open the panel".
 export const DataWrapperDrawerTest = () => {
-  const [mount, setMount] = useState<boolean>(false);
+  const mount = useStoryBackend({
+    collections: {
+      "dtw-test-collection": handleBuildStoryRecords(12, (index) => ({
+        _id: `checklist-${index}`,
+        clientName: STORY_NAMES[index % STORY_NAMES.length],
+        clientPhone: `01${2000000 + index * 1379}`,
+        address: `${index} Jalan Contoh, 50450 Kuala Lumpur`,
+      })),
+    },
+    yieldToE2E: true,
+  });
   const dataRefreshRef: any = useRef(null);
   const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
   const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
-  const dtwBaseUrl = "http://localhost:3000";
-
-  useEffect(() => {
-    setMount(true);
-  }, []);
 
   const handleNavigate = (type: any, id: any) => {
     setViewType(type);
@@ -973,15 +1015,7 @@ export const DataWrapperDrawerTest = () => {
         collectionId={"dtw-test-collection"}
         schema={DataWrapperTestSchema}
         viewSettings={{ readDrawer: {} }}
-        workspace={{
-          apiEndpointType: "mongoDB",
-          apiEndpoint: `${dtwBaseUrl}/api/data`,
-          apiEndpointToken: "",
-          apiUserToken: "",
-          assetEndpoint:
-            "https://firebasestorage.googleapis.com/v0/b/demo-bucket.firebasestorage.app/o/",
-          assetUploadEndpoint: `${dtwBaseUrl}/api/asset`,
-        }}
+        workspace={storyWorkspace()}
         edit={{
           allEditable: true,
           disabledUpdate: false,
@@ -1009,13 +1043,9 @@ DataWrapperDrawerTest.storyName = "DTW Drawer Test";
 // SECTION: Offline demo — DTW with no backend required
 // ===================================================================================
 
-// INFO: every other DTW story points at a localhost dev API, so opening Storybook without
-// that server running shows an empty skeleton table. This story instead serves DTW from an
-// in-memory array via axios-mock-adapter, installed on the shared axios instance that
-// DataTemplateWrapper passes down as lib.axios. Nothing here reaches the network, so the
-// story is the reference for reviewing DTW behaviour (including viewSettings.readDrawer) without
-// any setup. The .invalid TLD is reserved by RFC 2606 and can never resolve, so a missed
-// mock fails loudly instead of silently hitting a real host.
+// INFO: serves DTW from an in-memory array via axios-mock-adapter, installed on the shared
+// axios instance that DataTemplateWrapper passes down as lib.axios. Its own mock rather than
+// the story backend, because it numbers new records (refNo) the way this demo shows them.
 
 export const DTWDrawerDemo = () => {
   const [mount, setMount] = useState<boolean>(false);
@@ -1167,16 +1197,20 @@ const DTWScrollTestSchema = [
 ];
 
 export const DTWScrollTest = () => {
-  const [mount, setMount] = useState(false);
+  // INFO: enough rows for several scroll pages in every view type
+  const mount = useStoryBackend({
+    collections: {
+      [SCROLL_TEST_COLLECTION]: handleBuildStoryRecords(
+        120,
+        handleBuildWorkOrderRecord,
+      ),
+    },
+  });
   const dataRefreshRef: any = useRef(null);
   const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
   const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
   const [viewId, setViewId] = useState<string>("scroll_list");
 
-  useEffect(() => {
-    setMount(true);
-  }, []);
-
   // INFO: no second handleRefresh effect — ReadQueryHoc auto-fetches on mount,
   // a manual refresh here would only cause a visible double-loading flash.
 
@@ -1205,9 +1239,8 @@ export const DTWScrollTest = () => {
     <div className="w-full">
       <div className="font-semibold mb-1 text-gray-900">DTW Scroll Test</div>
       <div className="text-sm font-light mb-4 text-gray-500">
-        Scroll pagination smoke test against a local dev API. Requires the
-        matching dev server to be running so DTW can pull real rows across list,
-        feeds, and bare view types.
+        Scroll pagination across list, feeds and bare view types, over 120 rows
+        from the in-memory story backend.
       </div>
       <DataTemplateWrapper
         ref={dataRefreshRef}
@@ -1216,14 +1249,7 @@ export const DTWScrollTest = () => {
         id={selectedId}
         collectionId={SCROLL_TEST_COLLECTION}
         schema={DTWScrollTestSchema}
-        workspace={{
-          apiEndpointType: "mongoDB",
-          apiEndpoint: SCROLL_TEST_API,
-          apiEndpointToken: "",
-          apiUserToken: "",
-          assetEndpoint: "",
-          assetUploadEndpoint: SCROLL_TEST_API.replace("/data", "/asset"),
-        }}
+        workspace={storyWorkspace()}
         edit={{ allEditable: false }}
         bareSettings={{
           bareCompactMode: true,

package/lib/components/data/flexFilter/flexFilter.stories.tsx

@@ -0,0 +1,223 @@
+import { Transition } from "@headlessui/react";
+import axios from "axios";
+import React, { useState } from "react";
+import { Button } from "../../action/button";
+import { StorySection } from "../../storyUtils";
+import { DataStructure } from "../dataTemplate/model";
+import {
+  FlexFilter as FlexFilterComponent,
+  renderFlexFilterConditions,
+} from ".";
+import { FlexFilterData } from "./model";
+import { Toggle } from "../../action/toggle";
+import { DevSettings } from "../dataTemplate/model";
+import { Loading } from "../../display/loading";
+import {
+  STORY_API_ENDPOINT,
+  STORY_NAMES,
+  useStoryBackend,
+} from "../dataWrapper/storyBackend.fixtures";
+
+const meta = { title: "Data/Flex Filter" };
+export default meta;
+
+const CREW_COLLECTION = "demo-crew";
+
+// INFO: one column per filter type, including a reference column whose options
+// load from the story backend
+const sampleSchema: DataStructure[] = [
+  { id: "title", name: "Title", type: "string" },
+  { id: "verified", name: "Verified", type: "boolean" },
+  {
+    id: "status",
+    name: "Status",
+    type: "list",
+    listSelection: ["Not Completed", "In Progress", "Completed", "Cancelled"],
+  },
+  {
+    id: "tags",
+    name: "Tags",
+    type: "multipleList",
+    listSelection: ["Urgent", "Follow Up", "Warranty", "Inspection"],
+  },
+  { id: "startDate", name: "Clock In", type: "date" },
+  { id: "operationDay", name: "Operation Day", type: "number" },
+  {
+    id: "crewId",
+    name: "Crew Lead",
+    type: "reference",
+    referenceLabel: "name",
+    referenceSpaceId: CREW_COLLECTION,
+  },
+];
+
+const devSettings: DevSettings = {
+  server: "mongoServer",
+  dbEndpoint: STORY_API_ENDPOINT,
+  imageEndpoint: "",
+  uploadEndpoint: "",
+  dbAPIToken: "",
+  dbUserToken: "",
+  schemaEndpoint: "",
+  bucketName: "",
+  organisationMembers: [],
+};
+
+export const FlexFilter = () => {
+  const mount = useStoryBackend({
+    collections: {
+      [CREW_COLLECTION]: STORY_NAMES.map((name, index) => ({
+        _id: `crew-${index + 1}`,
+        name,
+      })),
+    },
+  });
+  const [bareFilters, setBareFilters] = useState<FlexFilterData[]>([
+    { id: "bare-init", columnId: "", operator: "=", value: undefined },
+  ]);
+
+  const [autoFilters, setAutoFilters] = useState<FlexFilterData[]>([
+    { id: "auto-init", columnId: "", operator: "=", value: undefined },
+  ]);
+
+  const [modalFilters, setModalFilters] = useState<FlexFilterData[]>([
+    { id: "modal-init", columnId: "", operator: "=", value: undefined },
+  ]);
+
+  const [addCompFilters, setAddCompFilters] = useState<FlexFilterData[]>([
+    { id: "addcomp-init", columnId: "", operator: "=", value: undefined },
+  ]);
+
+  const bareQueryConditions = renderFlexFilterConditions(
+    bareFilters,
+    sampleSchema,
+  );
+  const autoQueryConditions = renderFlexFilterConditions(
+    autoFilters,
+    sampleSchema,
+  );
+  const modalQueryConditions = renderFlexFilterConditions(
+    modalFilters,
+    sampleSchema,
+  );
+  const addCompQueryConditions = renderFlexFilterConditions(
+    addCompFilters,
+    sampleSchema,
+  );
+
+  if (!mount) return <Loading />;
+
+  return (
+    <div className="flex flex-col space-y-12">
+      <StorySection
+        title="Variant: bare"
+        description="Raw filter panel with no wrapper. Consumer renders their own container."
+      >
+        <div className="flex flex-col">
+          <div className="max-w-[700px]">
+            <FlexFilterComponent
+              structure={sampleSchema}
+              filters={bareFilters}
+              onChange={setBareFilters}
+              devSettings={devSettings}
+              dbModule={axios}
+              variant="bare"
+              lib={{ Transition }}
+            />
+          </div>
+          <div className="mt-4 p-4 bg-gray-50 rounded-lg border">
+            <p className="text-sm font-semibold mb-2">
+              Generated Query Conditions ({bareQueryConditions.length})
+            </p>
+            <pre className="text-xs whitespace-pre-wrap">
+              {JSON.stringify(bareQueryConditions, null, 2)}
+            </pre>
+          </div>
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Variant: auto (PopUp on desktop, Modal on mobile)"
+        description="Uses PopUp on md+ screens and Modal on mobile. Click the funnel icon to open."
+      >
+        <div className="flex flex-col w-96 max-w-96">
+          <div className="flex gap-x-3 w-ful">
+            <div className="h-12 bg-gray-100 rounded-lg flex-1"></div>
+            <FlexFilterComponent
+              structure={sampleSchema}
+              filters={autoFilters}
+              onChange={setAutoFilters}
+              devSettings={devSettings}
+              dbModule={axios}
+              variant="auto"
+              lib={{ Transition }}
+            />
+          </div>
+          <div className="mt-4 p-4 bg-gray-50 rounded-lg border">
+            <p className="text-sm font-semibold mb-2">
+              Generated Query Conditions ({autoQueryConditions.length})
+            </p>
+            <pre className="text-xs whitespace-pre-wrap">
+              {JSON.stringify(autoQueryConditions, null, 2)}
+            </pre>
+          </div>
+        </div>
+      </StorySection>
+      <StorySection
+        title="Variant: modal with custom CTA"
+        description="Modal variant triggered by a custom button instead of the default funnel icon."
+      >
+        <div className="flex flex-col">
+          <FlexFilterComponent
+            structure={sampleSchema}
+            filters={modalFilters}
+            onChange={setModalFilters}
+            devSettings={devSettings}
+            dbModule={axios}
+            variant="modal"
+            lib={{ Transition }}
+            ctaComp={<Button text="Filters" type="normal" size="small" />}
+          />
+          <div className="mt-4 p-4 bg-gray-50 rounded-lg border">
+            <p className="text-sm font-semibold mb-2">
+              Generated Query Conditions ({modalQueryConditions.length})
+            </p>
+            <pre className="text-xs whitespace-pre-wrap">
+              {JSON.stringify(modalQueryConditions, null, 2)}
+            </pre>
+          </div>
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Variant: bare with additional filter components"
+        description="bareListFilterAddComponent renders extra filter inputs above the flex filter rows."
+      >
+        <div className="flex flex-col">
+          <div className="max-w-[700px]">
+            <FlexFilterComponent
+              structure={sampleSchema}
+              filters={addCompFilters}
+              onChange={setAddCompFilters}
+              devSettings={devSettings}
+              dbModule={axios}
+              variant="bare"
+              lib={{ Transition }}
+              bareListFilterAddComponent={[
+                <Toggle text="Show all events" value={true} direction="left" />,
+              ]}
+            />
+          </div>
+          <div className="mt-4 p-4 bg-gray-50 rounded-lg border">
+            <p className="text-sm font-semibold mb-2">
+              Generated Query Conditions ({addCompQueryConditions.length})
+            </p>
+            <pre className="text-xs whitespace-pre-wrap">
+              {JSON.stringify(addCompQueryConditions, null, 2)}
+            </pre>
+          </div>
+        </div>
+      </StorySection>
+    </div>
+  );
+};

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

@@ -3,6 +3,10 @@ import { CheckCircleIcon } from "@heroicons/react/24/outline";
 import React, { useState } from "react";
 import { Modal as ModalImpl } from ".";
 import { DataTemplateWrapper } from "../../data/dataWrapper";
+import {
+  storyWorkspace,
+  useStoryBackend,
+} from "../../data/dataWrapper/storyBackend.fixtures";
 import { Notification } from "../notification";
 
 const meta = { title: "Display/Modal" };
@@ -10,6 +14,7 @@ export default meta;
 
 export const Modal = () => {
   const [open, setOpen] = useState(true);
+  const mount = useStoryBackend({ collections: { "modal-updates": [] } });
   const notification = (
     <Notification
       icon={<CheckCircleIcon className="w-10 h-10 text-primary-600" />}
@@ -24,6 +29,8 @@ export const Modal = () => {
     />
   );
 
+  if (!mount) return null;
+
   return (
     <ModalImpl
       title="Modal Title"
@@ -46,11 +53,7 @@ export const Modal = () => {
               },
               { id: "startDate", type: "date", name: "Clock In" },
             ]}
-            workspace={{
-              apiEndpoint: "http://localhost:3000/api/data",
-              assetEndpoint:
-                "https://firebasestorage.googleapis.com/v0/b/demo-bucket.appspot.com/o/",
-            }}
+            workspace={storyWorkspace()}
             additionalQuery={[]}
             organise={{
               breadcrumbType: "button",

package/package.json

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