blixify-ui-web-mcp 0.1.3 → 0.1.19

package/lib/components/chat/chatDashboard/README.md

@@ -74,20 +74,22 @@ const headerElement = (
 
 ##### Optional props
 
-| Name                    | Type                                   | Default    | Description                                                                                                         |
-| ----------------------- | -------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------- |
-| `mobileSelectedChat`    | `boolean`                              | `false`    | When `true`, hides the conversation list and shows the chat panel on mobile. Set to `false` to go back to the list. |
-| `searchMessage`         | `string`                               | —          | Current search input value. Pass a filtered conversation to `selectedConversation` to show results.                 |
-| `headerElement`         | `ReactElement`                         | —          | Replaces the default `ChatBase` header. Use this to show the other user's name and a mobile back button.            |
-| `bodyElement`           | `ReactElement`                         | —          | Replaces the `ChatBase` message list. Useful for showing a loading spinner while fetching messages.                 |
-| `className`             | `string`                               | —          | Tailwind classes for the conversation list panel container                                                          |
-| `sizeClassName`         | `string`                               | `h-[75vh]` | Tailwind classes controlling the height/width of the conversation list panel                                        |
-| `chatBaseClassName`     | `string`                               | —          | Tailwind classes for the `ChatBase` container                                                                       |
-| `chatBaseSizeClassName` | `string`                               | —          | Tailwind classes controlling the height/width of the `ChatBase` panel                                               |
-| `onSendMessage`         | `(conversation: Conversation) => void` | —          | Called with the updated conversation when a message is sent                                                         |
-| `onChangeMessage`       | `(event: any) => void`                 | —          | Called on every keystroke in the message input                                                                      |
-| `onSearch`              | `(searchMessage: string) => void`      | —          | Called when the search form is submitted inside `ChatBase`                                                          |
-| `onChangeSearch`        | `(event: any) => void`                 | —          | Called on every keystroke in the search input inside `ChatBase`                                                     |
+| Name                    | Type                                   | Default    | Description                                                                                                                       |
+| ----------------------- | -------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `mobileSelectedChat`    | `boolean`                              | `false`    | When `true`, hides the conversation list and shows the chat panel on mobile. Set to `false` to go back to the list.               |
+| `disableMessageInput`   | `boolean`                              | `false`    | When `true`, message input is disabled.                                                                                           |
+| `searchMessage`         | `string`                               | —          | Current search input value. Pass a filtered conversation to `selectedConversation` to show results.                               |
+| `headerElement`         | `ReactElement`                         | —          | Replaces the default `ChatBase` header. Use this to show the other user's name and a mobile back button.                          |
+| `bodyElement`           | `ReactElement`                         | —          | Replaces the `ChatBase` message list. Useful for showing a loading spinner while fetching messages.                               |
+| `className`             | `string`                               | —          | Tailwind classes for the conversation list panel container                                                                        |
+| `sizeClassName`         | `string`                               | `h-[75vh]` | Tailwind classes controlling the height/width of the conversation list panel                                                      |
+| `chatBaseClassName`     | `string`                               | —          | Tailwind classes for the `ChatBase` container                                                                                     |
+| `chatBaseSizeClassName` | `string`                               | —          | Tailwind classes controlling the height/width of the `ChatBase` panel                                                             |
+| `onSendMessage`         | `(conversation: Conversation) => void` | —          | Called with the updated conversation when a message is sent                                                                       |
+| `onChangeMessage`       | `(event: any) => void`                 | —          | Called on every keystroke in the message input                                                                                    |
+| `onSearch`              | `(searchMessage: string) => void`      | —          | Called when the search form is submitted inside `ChatBase`                                                                        |
+| `onChangeSearch`        | `(event: any) => void`                 | —          | Called on every keystroke in the search input inside `ChatBase`                                                                   |
+| `additionalAction`      | `ChatBaseAction[]`                     | —          | Extra items appended to the `⋮` actions menu in the chat panel. Each item requires `text` and `onClick`, with an optional `icon`. |
 
 ##### Conversation list behaviour
 
@@ -113,7 +115,7 @@ Each item in `conversationList` renders the other user's avatar and name (the me
 
 | Name           | Type                | Description                                                       |
 | -------------- | ------------------- | ----------------------------------------------------------------- |
-| `sender`       | `User`              | The user who sent the message                                     |
+| `sender`       | `User`              | The user who sent the message.                                    |
 | `messageBody`  | `string \| FileObj` | Text content or a file object for image/video messages            |
 | `reactElement` | `ReactElement`      | Optional — replaces `messageBody` rendering with a custom element |
 | `createdAt`    | `Date`              | Timestamp                                                         |

package/lib/components/chat/chatDashboard/chatDashboard.stories.tsx

@@ -1,31 +1,41 @@
-import { ChevronLeftIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
+import {
+  ChevronLeftIcon,
+  PencilSquareIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+import dayjs from "../../dayjs";
 import React, { useEffect, useState } from "react";
-import { ChatDashboard } from ".";
+import { v4 as uuidv4 } from "uuid";
+import { ChatDashboard as ChatDashboardImpl } from ".";
 import { StorySection } from "../../storyUtils";
 import { IconButton } from "../../action/iconButton";
 import { Loading } from "../../display/loading";
-import { Conversation } from "../chatBase";
+import { ChatBaseAction, Conversation } from "../chatBase";
 import { conversationList as seedConvoList, currentUser } from "../chatUtils";
-import README from "./README.md";
+import { Button } from "../../action/button";
 
-const stories = storiesOf("Chat", module);
+const meta = { title: "Chat/Chat Dashboard" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const sortByLatest = (list: Conversation[]) =>
   [...list].sort((a, b) =>
-    moment(b.messageList[b.messageList.length - 1].createdAt).diff(
-      moment(a.messageList[a.messageList.length - 1].createdAt)
-    )
+    dayjs(b.messageList[b.messageList.length - 1].createdAt).diff(
+      dayjs(a.messageList[a.messageList.length - 1].createdAt),
+    ),
   );
 
-stories.add("Chat Dashboard", () => {
+// INFO: demo statuses for renderConversationMeta / renderHeaderTags
+const DEMO_STATUSES = ["active", "waiting", "closed", "assigned"];
+const DEMO_BADGE_COLORS: Record<string, string> = {
+  active: "bg-green-100 text-green-700",
+  waiting: "bg-yellow-100 text-yellow-700",
+  closed: "bg-gray-100 text-gray-500",
+  assigned: "bg-blue-100 text-blue-700",
+};
+
+export const ChatDashboard = () => {
+  // INFO: Section 1 — Base chat state
   const [message, setMessage] = useState("");
   const [search, setSearch] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -38,11 +48,99 @@ stories.add("Chat Dashboard", () => {
     members: [],
     messageList: [],
   });
+  const [file, setFile] = useState<File | any>(undefined);
+
+  // INFO: Section 2 — Meta & Tags state
+  const [metaConvoList, setMetaConvoList] = useState<Conversation[]>([]);
+  const [metaConvo, setMetaConvo] = useState<Conversation>({
+    id: "",
+    members: [],
+    messageList: [],
+  });
+  const [metaMessage, setMetaMessage] = useState("");
+
+  // INFO: Section 3 — Pagination state
+  const [paginationConvoList, setPaginationConvoList] = useState<
+    Conversation[]
+  >([]);
+  const [paginationConvo, setPaginationConvo] = useState<Conversation>({
+    id: "",
+    members: [],
+    messageList: [],
+  });
+  const [paginationMessage, setPaginationMessage] = useState("");
+  const [page, setPage] = useState(1);
+  const [loadingConversations, setLoadingConversations] = useState(false);
+  const [loadingMessages, setLoadingMessages] = useState(false);
+  const [msgPage, setMsgPage] = useState(1);
+
+  // INFO: pageNum 0 generates 15 contacts to ensure the list overflows and is scrollable
+  const generateConversations = (pageNum: number): Conversation[] => {
+    const count = pageNum === 1 ? 15 : 5;
+    return Array.from({ length: count }, (_, i) => {
+      const idx = (pageNum - 1) * 5 + i;
+      const otherUser = {
+        id: `user-${idx}`,
+        name: `Contact ${idx + 1}`,
+        imageUrl: `https://ui-avatars.com/api/?name=C${idx + 1}&background=6366f1&color=fff`,
+      };
+      return {
+        id: uuidv4(),
+        members: [currentUser, otherUser],
+        messageList: Array.from({ length: 10 }, (_, j) => ({
+          sender: j % 2 === 0 ? otherUser : currentUser,
+          messageBody: `Message ${j + 1} from page ${pageNum}`,
+          createdAt: dayjs()
+            .subtract(10 - j, "minutes")
+            .toDate(),
+        })),
+      };
+    });
+  };
 
   useEffect(() => {
-    const sorted = sortByLatest(seedConvoList);
+    // INFO: inject demo images of varying aspect ratios to exercise the bubble size cap
+    const demoImages = [
+      { id: 1015, w: 1600, h: 900, label: "Landscape (16:9)" },
+      { id: 1027, w: 900, h: 1600, label: "Portrait (9:16)" },
+      { id: 237, w: 1200, h: 1200, label: "Square (1:1)" },
+    ];
+    const withImages = seedConvoList.map((convo, idx) =>
+      idx === 0
+        ? {
+            ...convo,
+            messageList: [
+              ...convo.messageList,
+              ...demoImages.map((img) => ({
+                sender: convo.members.find((m) => m.id !== currentUser.id)!,
+                messageBody: {
+                  fileName: `https://picsum.photos/id/${img.id}/${img.w}/${img.h}`,
+                  token: img.label,
+                  type: "image/jpeg",
+                },
+                createdAt: dayjs().subtract(demoImages.length - img.id, "minutes").toDate(),
+              })),
+              {
+                sender: convo.members.find((m) => m.id !== currentUser.id)!,
+                messageBody: {
+                  fileName: "https://www.w3schools.com/html/mov_bbb.mp4",
+                  token: "Sample video",
+                  type: "video/mp4",
+                },
+                createdAt: dayjs().toDate(),
+              },
+            ],
+          }
+        : convo,
+    );
+    const sorted = sortByLatest(withImages);
     setConversationList(sorted);
     setConversation(sorted[0]);
+    setMetaConvoList(sorted);
+    setMetaConvo(sorted[0]);
+    const initial = generateConversations(1);
+    setPaginationConvoList(initial);
+    setPaginationConvo(initial[0]);
   }, []);
 
   const handleSelectConversation = (id: string) => {
@@ -58,10 +156,11 @@ stories.add("Chat Dashboard", () => {
   const handleSendMessage = (updated: Conversation) => {
     setConversation(updated);
     setMessage("");
-    const updatedList = conversationList.map((c) =>
-      c.id === updated.id ? updated : c
+    setConversationList(
+      sortByLatest(
+        conversationList.map((c) => (c.id === updated.id ? updated : c)),
+      ),
     );
-    setConversationList(sortByLatest(updatedList));
   };
 
   const handleSearch = (searchMessage: string) => {
@@ -74,58 +173,271 @@ stories.add("Chat Dashboard", () => {
         messageList: conversation.messageList.filter(
           (m) =>
             typeof m.messageBody === "string" &&
-            m.messageBody.toLowerCase().includes(searchMessage.toLowerCase())
+            m.messageBody.toLowerCase().includes(searchMessage.toLowerCase()),
         ),
       });
     }
   };
 
-  const otherUser = conversation.members.find((m) => m.id !== currentUser.id);
-
-  const headerElement = (
-    <div className="w-full flex items-center h-12 text-white bg-primary-500">
-      <IconButton
-        icon={<ChevronLeftIcon className="w-6 h-6" />}
-        background="bg-transparent"
-        onClick={() => setMobileSelectedChat(false)}
-        className={`${!mobileSelectedChat ? "hidden sm:flex" : ""} sm:hidden`}
-      />
-      <p className="ml-2 sm:ml-4 font-medium">{otherUser?.name ?? "Chat"}</p>
-    </div>
-  );
+  const handleSendUpload = (conv: Conversation, uploadedFile: File) => {
+    const fileUrl = URL.createObjectURL(uploadedFile);
+    const updated: Conversation = {
+      ...conv,
+      messageList: [
+        ...conv.messageList,
+        {
+          sender: currentUser,
+          messageBody: {
+            fileName: fileUrl,
+            token: uuidv4(),
+            type: uploadedFile.type,
+          },
+          createdAt: dayjs().toDate(),
+        },
+      ],
+    };
+    setConversation(updated);
+    setFile(undefined);
+    setConversationList(
+      sortByLatest(
+        conversationList.map((c) => (c.id === updated.id ? updated : c)),
+      ),
+    );
+  };
 
-  const bodyElement = isLoading ? (
-    <div className="w-full h-full flex items-center justify-center">
-      <Loading />
-    </div>
-  ) : undefined;
+  const otherUser = conversation.members.find((m) => m.id !== currentUser.id);
 
   return (
     <>
+      {/* INFO: Section 1 — Base chat with file upload, search, actions */}
       <StorySection
-        title="Chat Dashboard"
-        description="A two-panel layout: a conversation list on the left and the active chat on the right. handleSelectedConversation is called with the conversation id when a list item is clicked. On mobile, the list and chat panels toggle via mobileSelectedChat — the header's back button sets it to false."
+        title="Base Chat"
+        description="Two-panel layout with conversation list, file upload, search, and actions. Mobile toggle via mobileSelectedChat."
       >
         <div className="w-full">
-          <ChatDashboard
+          <ChatDashboardImpl
             value={message}
             searchMessage={search}
             currentUser={currentUser}
             selectedConversation={filteredConversation ?? conversation}
             conversationList={conversationList}
             mobileSelectedChat={mobileSelectedChat}
-            sizeClassName="w-64 h-[60vh]"
+            sizeClassName="w-96 h-[60vh]"
             chatBaseSizeClassName="w-full h-[60vh]"
-            headerElement={headerElement}
-            bodyElement={bodyElement}
+            headerElement={
+              <div className="w-full flex items-center h-12 text-white bg-primary-500">
+                <IconButton
+                  icon={<ChevronLeftIcon className="w-6 h-6" />}
+                  background="bg-transparent"
+                  onClick={() => setMobileSelectedChat(false)}
+                  className={`${!mobileSelectedChat ? "hidden sm:flex" : ""} sm:hidden`}
+                />
+                <p className="ml-2 sm:ml-4 font-medium">
+                  {otherUser?.name ?? "Chat"}
+                </p>
+              </div>
+            }
+            bodyElement={
+              isLoading ? (
+                <div className="w-full h-full flex items-center justify-center">
+                  <Loading />
+                </div>
+              ) : undefined
+            }
+            fileUpload={{
+              allowFileUpload: true,
+              file,
+              acceptFileType: ".jpg,.jpeg,.png,.mp4,.webm",
+              onChangeUpload: (e) => {
+                if (e?.target?.files?.length > 0) setFile(e.target.files[0]);
+                else setFile(undefined);
+              },
+              onSendUpload: handleSendUpload,
+            }}
+            leftPanelHeaderElement={
+              <div className="p-4">
+                <Button
+                  type="normal"
+                  size="small"
+                  text="New Chat"
+                  icon={<PencilSquareIcon className="w-4 h-4" />}
+                  onClick={() => alert("New Chat clicked")}
+                  className="w-full"
+                />
+              </div>
+            }
             onChangeMessage={(e) => setMessage(e.target.value)}
             onSendMessage={handleSendMessage}
             onChangeSearch={(e) => setSearch(e.target.value)}
             onSearch={handleSearch}
             handleSelectedConversation={handleSelectConversation}
+            additionalAction={
+              [
+                {
+                  text: "Clear Chat",
+                  onClick: () =>
+                    setConversation((prev) => ({ ...prev, messageList: [] })),
+                  icon: <TrashIcon className="w-3 h-3" />,
+                },
+              ] as ChatBaseAction[]
+            }
+          />
+        </div>
+      </StorySection>
+
+      {/* INFO: Section 2 — renderConversationMeta + renderHeaderTags */}
+      <StorySection
+        title="Meta Badges & Header Tags"
+        description="renderConversationMeta shows status badges and 'Needs Reply' on left panel items. renderHeaderTags shows tags in the chat header."
+      >
+        <div className="w-full">
+          <ChatDashboardImpl
+            value={metaMessage}
+            currentUser={currentUser}
+            selectedConversation={metaConvo}
+            conversationList={metaConvoList}
+            sizeClassName="w-96 h-[60vh]"
+            chatBaseSizeClassName="w-full h-[60vh]"
+            headerElement={
+              <div className="w-full flex items-center h-12 px-4 text-white bg-primary-500">
+                <p className="font-medium">
+                  {metaConvo.members.find((m) => m.id !== currentUser.id)
+                    ?.name ?? "Chat"}
+                </p>
+              </div>
+            }
+            renderConversationMeta={(convo) => {
+              const status =
+                DEMO_STATUSES[
+                  Math.abs(convo.id.charCodeAt(0)) % DEMO_STATUSES.length
+                ];
+              const needsReply = convo.id.charCodeAt(0) % 2 === 0;
+              return (
+                <div className="flex gap-1 mt-1 flex-wrap">
+                  <span
+                    className={`text-[10px] px-1.5 py-0.5 rounded ${DEMO_BADGE_COLORS[status]}`}
+                  >
+                    {status}
+                  </span>
+                  {needsReply && (
+                    <span className="text-[10px] px-1.5 py-0.5 rounded bg-orange-100 text-orange-700">
+                      Needs Reply
+                    </span>
+                  )}
+                </div>
+              );
+            }}
+            renderHeaderTags={(convo) => {
+              const status =
+                DEMO_STATUSES[
+                  Math.abs(convo.id.charCodeAt(0)) % DEMO_STATUSES.length
+                ];
+              return (
+                <div className="flex gap-1">
+                  <span className="text-[10px] px-1.5 py-0.5 rounded bg-white/20 text-white">
+                    {status}
+                  </span>
+                  <span className="text-[10px] px-1.5 py-0.5 rounded bg-white/20 text-white">
+                    whatsapp
+                  </span>
+                </div>
+              );
+            }}
+            onChangeMessage={(e) => setMetaMessage(e.target.value)}
+            onSendMessage={(updated) => {
+              setMetaConvo(updated);
+              setMetaMessage("");
+              setMetaConvoList((prev) =>
+                sortByLatest(
+                  prev.map((c) => (c.id === updated.id ? updated : c)),
+                ),
+              );
+            }}
+            handleSelectedConversation={(id) => {
+              const found = metaConvoList.find((c) => c.id === id);
+              if (found) setMetaConvo(found);
+            }}
+          />
+        </div>
+      </StorySection>
+
+      {/* INFO: Section 3 — Pagination scroll callbacks */}
+      <StorySection
+        title="Pagination (Infinite Scroll)"
+        description="onConversationListScrollEnd loads more contacts with a spinner at the bottom. onMessageListScrollTop prepends older messages with a spinner at the top. Scroll to see both effects."
+      >
+        <div className="w-full">
+          <ChatDashboardImpl
+            value={paginationMessage}
+            currentUser={currentUser}
+            selectedConversation={paginationConvo}
+            conversationList={paginationConvoList}
+            isLoadingConversations={loadingConversations}
+            isLoadingMessages={loadingMessages}
+            sizeClassName="w-96 h-[60vh]"
+            chatBaseSizeClassName="w-full h-[60vh]"
+            headerElement={
+              <div className="w-full flex items-center h-12 px-4 text-white bg-primary-500">
+                <p className="font-medium">
+                  {paginationConvo.members.find(
+                    (m) => m.id !== currentUser.id,
+                  )?.name ?? "Chat"}
+                </p>
+              </div>
+            }
+            onConversationListScrollEnd={() => {
+              setLoadingConversations(true);
+              const nextPage = page + 1;
+              setTimeout(() => {
+                const more = generateConversations(nextPage);
+                setPaginationConvoList((prev) => [...prev, ...more]);
+                setPage(nextPage);
+                setLoadingConversations(false);
+              }, 1000);
+            }}
+            onMessageListScrollTop={() => {
+              setLoadingMessages(true);
+              const nextMsgPage = msgPage + 1;
+              setTimeout(() => {
+                setPaginationConvo((prev) => ({
+                  ...prev,
+                  messageList: [
+                    ...Array.from({ length: 10 }, (_, i) => ({
+                      sender:
+                        i % 2 === 0
+                          ? prev.members.find(
+                              (m) => m.id !== currentUser.id,
+                            )!
+                          : currentUser,
+                      messageBody: `Older message ${i + 1} from page ${nextMsgPage}`,
+                      createdAt: dayjs()
+                        .subtract(nextMsgPage * 10 + (10 - i), "minutes")
+                        .toDate(),
+                    })),
+                    ...prev.messageList,
+                  ],
+                }));
+                setMsgPage(nextMsgPage);
+                setLoadingMessages(false);
+              }, 1000);
+            }}
+            onChangeMessage={(e) => setPaginationMessage(e.target.value)}
+            onSendMessage={(updated) => {
+              setPaginationConvo(updated);
+              setPaginationMessage("");
+              setPaginationConvoList((prev) =>
+                sortByLatest(
+                  prev.map((c) => (c.id === updated.id ? updated : c)),
+                ),
+              );
+            }}
+            handleSelectedConversation={(id) => {
+              const found = paginationConvoList.find((c) => c.id === id);
+              if (found) setPaginationConvo(found);
+            }}
           />
         </div>
       </StorySection>
     </>
   );
-});
+}

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

@@ -1,23 +1,17 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { StorySection } from "../../storyUtils";
-import README from "./README.md";
-import { DataGraph } from "./index";
+import { DataGraph as DataGraphImpl } from "./index";
 
-const stories = storiesOf("Data", module);
+const meta = { title: "Data/Data Graph" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const workspace = {
   apiEndpoint: "http://localhost:3000/api",
   apiEndpointType: "mongoDB" as const,
 };
 
-stories.add("Data Graph", () => {
+export const DataGraph = () => {
   return (
     <>
       <StorySection
@@ -25,7 +19,7 @@ stories.add("Data Graph", () => {
         description="type='card' renders a stat card. queryBaseType='count' counts records; 'sum' totals a numeric field specified in queryAttributeId. queryBaseDateId enables a date range picker on the card."
       >
         <div className="w-full">
-          <DataGraph
+          <DataGraphImpl
             charts={[
               {
                 gridSize: 1,
@@ -56,10 +50,10 @@ stories.add("Data Graph", () => {
 
       <StorySection
         title="Mixed Dashboard"
-        description="Combine multiple chart types in one DataGraph. Each chart's gridSize controls how many columns it spans within the grid."
+        description="Combine multiple chart types in one DataGraphImpl. Each chart's gridSize controls how many columns it spans within the grid."
       >
         <div className="w-full">
-          <DataGraph
+          <DataGraphImpl
             charts={[
               {
                 gridSize: 1,
@@ -100,4 +94,4 @@ stories.add("Data Graph", () => {
       </StorySection>
     </>
   );
-});
+}

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

@@ -1,24 +1,18 @@
-import { storiesOf } from "@storybook/react";
 import axios from "axios";
 import React, { useState } from "react";
-import { DataReference } from "../dataReference/index";
+import { DataReference as DataReferenceImpl } from "../dataReference/index";
 import { StorySection } from "../../storyUtils";
-import README from "./README.md";
 
-const stories = storiesOf("Data", module);
+const meta = { title: "Data/Data Reference" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const devSettings = {
   apiEndpoint: "http://localhost:3000/api",
   apiEndpointType: "mondayServer" as const,
 };
 
-stories.add("Data Reference", () => {
+export const DataReference = () => {
   const [singleValue, setSingleValue] = useState("");
   const [filteredValue, setFilteredValue] = useState("");
   const [multiValue, setMultiValue] = useState<string[]>([]);
@@ -30,7 +24,7 @@ stories.add("Data Reference", () => {
         description="type='reference' renders a single-select. Options are fetched from the referenceSpaceId collection and labelled by referenceLabel."
       >
         <div className="w-80">
-          <DataReference
+          <DataReferenceImpl
             value={singleValue}
             schema={{
               id: "salesSelected",
@@ -52,7 +46,7 @@ stories.add("Data Reference", () => {
         description="referenceQuery filters the fetched options server-side. referenceSort controls the order. subLabel adds a secondary hint below the field label."
       >
         <div className="w-80">
-          <DataReference
+          <DataReferenceImpl
             value={filteredValue}
             schema={{
               id: "filteredSales",
@@ -79,7 +73,7 @@ stories.add("Data Reference", () => {
         description="type='listReference' enables multi-select — value is a string array. closeOnClickOutside keeps the dropdown open until the user clicks away."
       >
         <div className="w-80">
-          <DataReference
+          <DataReferenceImpl
             value={multiValue}
             schema={{
               id: "assignees",
@@ -103,7 +97,7 @@ stories.add("Data Reference", () => {
         dark
       >
         <div className="w-80">
-          <DataReference
+          <DataReferenceImpl
             value={singleValue}
             schema={{
               id: "darkSales",
@@ -122,4 +116,4 @@ stories.add("Data Reference", () => {
       </StorySection>
     </>
   );
-});
+}