blixify-ui-web-mcp 0.1.26 → 0.1.28

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

@@ -9,6 +9,13 @@ import { Button } from "../../action/button";
 import { Loading } from "../../display/loading";
 import { DataWrapperTestSchema } from "./dataWrapper.fixtures";
 import { DataTemplateWrapper } from "./index";
+import {
+  STORY_API_ENDPOINT,
+  STORY_NAMES,
+  handleBuildStoryRecords,
+  storyWorkspace,
+  useStoryBackend,
+} from "./storyBackend.fixtures";
 import { MarkdownInput } from "../../input/markdown";
 
 const meta = {
@@ -24,21 +31,23 @@ const meta = {
 
 export default meta;
 
-// INFO: Story to test imageTagToggleMode + imageHideEnabled across 3 role views:
-// - Installer: no props, sees all photos
-// - Customer: imageHideEnabled=true, hidden photos filtered out in read view
-// - PE: imageTagToggleMode=true, eye icon to toggle hidden flag, read shows all
-
+// INFO: the e2e CRUD spec answers this story's requests with page.route, so the
+// story backend stands aside under Playwright
 export const DataWrapperTest = () => {
-  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);
-  }, []);
 
   // INFO: no second handleRefresh effect — ReadQueryHoc auto-fetches on mount.
   // A manual refresh here only causes a visible double-loading flash and pads
@@ -58,8 +67,8 @@ export const DataWrapperTest = () => {
       <div className="font-semibold mb-1 text-gray-900">DTW Test</div>
       <div className="text-sm font-light mb-4 text-gray-500">
         Minimal 3-field DataTemplateWrapper story used by the e2e CRUD spec.
-        Validates create, read, update, and delete against the configured
-        backend without optional schema fields blocking submission.
+        Create, read, update and delete run against the in-memory story backend,
+        with no required fields blocking submission.
       </div>
       <DataTemplateWrapper
         ref={dataRefreshRef}
@@ -68,15 +77,7 @@ export const DataWrapperTest = () => {
         id={selectedId}
         collectionId={"dtw-test-collection"}
         schema={DataWrapperTestSchema}
-        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,
@@ -600,9 +601,9 @@ export const DTWEmbeddedInMarkdown = () => {
         A real DataTemplateWrapper rendered inside a note through
         MarkdownInput&apos;s renderEmbed, with the flags Space sets on an embed:
         bareAddColumns, bareFlatTable, listAddable, listEditable and readDrawer.
-        Add a column from the header, add a row inline, then check the header and
-        the rows still line up and that no cell reads &quot;div&quot;. New rows
-        are stored as drafts, which is what puts a React element in a cell.
+        Add a column from the header, add a row inline, then check the header
+        and the rows still line up and that no cell reads &quot;div&quot;. New
+        rows are stored as drafts, which is what puts a React element in a cell.
       </div>
       <MarkdownInput
         id="notes"
@@ -624,7 +625,7 @@ export const DTWEmbeddedInMarkdown = () => {
 // listObjectTableView is what selects the table; leave it off and the field
 // renders as a List.
 
-const LIST_OBJECT_ENDPOINT = "http://localhost:3000/api/data";
+const LIST_OBJECT_ENDPOINT = STORY_API_ENDPOINT;
 const LIST_OBJECT_COLLECTION = "dtw-list-object-table";
 
 // INFO: tabIds on purpose — the action pill only renders its Previous/Next
@@ -701,7 +702,10 @@ export const DTWListObjectTable = () => {
       .onPost(`${LIST_OBJECT_ENDPOINT}/${LIST_OBJECT_COLLECTION}/get`)
       .reply((config) => {
         const body = handleParseBody(config);
-        return [200, { data: store.find((row) => row._id === body.id) ?? null }];
+        return [
+          200,
+          { data: store.find((row) => row._id === body.id) ?? null },
+        ];
       });
 
     mock
@@ -709,7 +713,8 @@ export const DTWListObjectTable = () => {
       .reply((config) => {
         const body = handleParseBody(config);
         const index = store.findIndex((row) => row._id === body.id);
-        if (index >= 0) store[index] = { ...store[index], ...(body.data ?? {}) };
+        if (index >= 0)
+          store[index] = { ...store[index], ...(body.data ?? {}) };
         return [200, { success: body.id ?? true }];
       });