blixify-ui-web-mcp 0.1.2 → 0.1.18

package/lib/components/chart/statsCard/statsCard.stories.tsx

@@ -5,20 +5,14 @@ import {
   PencilIcon,
   UserGroupIcon,
 } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { StatsCard } from ".";
 import { StorySection } from "../../storyUtils";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Stats Card" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const baseStats = [
   {
@@ -50,7 +44,7 @@ const baseStats = [
   },
 ];
 
-stories.add("Stats Card", () => {
+export const StatsCardStory = () => {
   const chartDummyData = useMemo(() => {
     const now = new Date();
     const sevenDaysAgo = new Date();
@@ -180,4 +174,4 @@ stories.add("Stats Card", () => {
       </StorySection>
     </>
   );
-});
+}

package/lib/components/chart/treemapChart/treemapChart.stories.tsx

@@ -1,20 +1,14 @@
 import { PencilIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
+import dayjs from "../../dayjs";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { TreemapChart } from ".";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Treemap Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Treemap Chart", () => {
+export const TreemapChartStory = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -79,7 +73,7 @@ stories.add("Treemap Chart", () => {
   }, [handleSetData]);
 
   const sevenDaysAgo = new Date();
-  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+  sevenDaysAgo.setDate(dayjs().toDate().getDate() - 7);
 
   return (
     <>
@@ -92,7 +86,7 @@ stories.add("Treemap Chart", () => {
         dateRangeVisible={true}
         customDate={{
           startDate: sevenDaysAgo,
-          endDate: moment().toDate(),
+          endDate: dayjs().toDate(),
           isDuration: true,
         }}
         onChangeDate={handleSetData}
@@ -108,7 +102,7 @@ stories.add("Treemap Chart", () => {
         dateRangeVisible={true}
         customDate={{
           startDate: sevenDaysAgo,
-          endDate: moment().toDate(),
+          endDate: dayjs().toDate(),
           isDuration: true,
         }}
         onChangeDate={handleSetData}
@@ -119,4 +113,4 @@ stories.add("Treemap Chart", () => {
       />
     </>
   );
-});
+}

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

@@ -4,110 +4,92 @@
 
 <hr>
 
-Chat Anchor
+A floating chat button fixed to the viewport. Clicking it toggles the `ChatBase` panel open/closed with an animated transition. On mobile (< 640px) the chat panel expands to full screen when open.
 
 ##### Import
 
 ```js
 import { ChatAnchor } from "blixify-ui-web/components/chat/chatAnchor";
-import {
-  ChatBase,
-  Conversation,
-} from "blixify-ui-web/components/chat/chatBase";
+import { Conversation } from "blixify-ui-web/components/chat/chatBase";
 ```
 
 ##### Usage
 
 ```tsx
-const [openChatBase, setOpenChatBase] = useState<boolean>(false);
+const [open, setOpen] = useState(false);
 const [message, setMessage] = useState("");
-const [search, setSearch] = useState("");
-const [filteredConversation, setFilteredConversation] =
-  useState<Conversation | null>();
 const [conversation, setConversation] = useState<Conversation>({
   id: "1",
   members: [currentUser, botUser],
-  messageList: [
-    {
-      sender: botUser,
-      messageBody: "Hi! How can I help you? 🤖",
-      createdAt: moment(
-        "Fri Nov 03 2023 12:21:14 GMT+0800 (Malaysia Time)"
-      ).toDate(),
-    },
-    {
-      sender: currentUser,
-      messageBody: "Yo, my computer's acting up.",
-      createdAt: moment(
-        "Fri Nov 03 2023 13:21:14 GMT+0800 (Malaysia Time)"
-      ).toDate(),
-    },
-  ],
+  messageList: [],
 });
 
-const handleOnClick = () => setOpenChatBase(!openChatBase);
-
-const handleOnSendMessage = (conversation: Conversation) => {
-  setConversation(conversation);
-  setMessage("");
-};
-
-const handleOnSearch = (searchMessage: string) => {
-  if (searchMessage.length === 0) {
-    setSearch("");
-    setFilteredConversation(null);
-  } else {
-    const dupMessageList = conversation.messageList.filter((eachMessage) => {
-      return eachMessage.messageBody
-        .toLowerCase()
-        .includes(searchMessage.toLowerCase());
-    });
-    const dupConversation = {
-      id: conversation.id,
-      members: [...conversation.members],
-      messageList: [...dupMessageList],
-    };
-    setFilteredConversation(dupConversation);
-  }
-};
-
-const headerElement = (
-  <div className="p-2 bg-primary-500 rounded-t-md">
-    <img src={Logo} alt="" className="h-12" />
-  </div>
-);
-
 return (
   <ChatAnchor
-    open={openChatBase}
+    open={open}
     value={message}
     currentUser={currentUser}
-    conversation={filteredConversation ?? conversation}
-    headerElement={headerElement}
-    searchMessage={search}
-    onChangeSearch={(e) => setSearch(e.target.value)}
-    onSendMessage={handleOnSendMessage}
+    conversation={conversation}
+    headerElement={
+      <div className="p-2 bg-primary-500">
+        <img src={Logo} className="h-12" />
+      </div>
+    }
+    onSendMessage={(c) => {
+      setConversation(c);
+      setMessage("");
+    }}
     onChangeMessage={(e) => setMessage(e.target.value)}
-    onSearch={handleOnSearch}
-    onClose={handleOnClick}
+    onClose={() => setOpen(false)}
+    onClick={() => setOpen(!open)}
     className="shadow-lg border border-gray-200"
-    onClick={handleOnClick}
+    greetingCard
+    greetingText="Ask me anything!"
   />
 );
 ```
 
 ##### Required props
 
-| Name    | Type         | Description                                      |
-| ------- | ------------ | ------------------------------------------------ |
-| onClick | `() => void` | Function that triggers upon clicking Chat Anchor |
-
-##### Optional props
-
-| Name             | Type                          | Default | Description                      |
-| ---------------- | ----------------------------- | ------- | -------------------------------- |
-| `positionOffset` | `Tailwind class`              | null    |                                  |
-| `greetingText`   | `string`                      | null    | Text to display                  |
-| `greetingCard`   | `boolean`                     | null    | Boolean to display greeting card |
-| `openIcon`       | `string` or `React.ReactNode` | null    | Icon to expand chat              |
-| `closeIcon`      | `string` or `React.ReactNode` | null    | Icon to collapse chat            |
+| Name           | Type           | Description                                            |
+| -------------- | -------------- | ------------------------------------------------------ |
+| `onClick`      | `() => void`   | Called when the floating anchor button is clicked      |
+| `open`         | `boolean`      | Controls whether the chat panel is visible             |
+| `value`        | `string`       | Current value of the message input                     |
+| `currentUser`  | `User`         | The logged-in user (`{ id, name, imageUrl? }`)         |
+| `conversation` | `Conversation` | Conversation object containing members and messageList |
+
+##### Optional props — ChatAnchor specific
+
+| Name             | Type                          | Default                                | Description                                                                                     |
+| ---------------- | ----------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| `positionOffset` | `string`                      | `"bottom-8 right-8"`                   | Tailwind classes that control the fixed position of the anchor. Ignored on mobile when open.    |
+| `greetingCard`   | `boolean`                     | `false`                                | When `true`, shows a greeting bubble next to the anchor button while the chat is closed.        |
+| `greetingText`   | `string`                      | `"Welcome! How can I help you today?"` | Text displayed inside the greeting card bubble.                                                 |
+| `openIcon`       | `React.ReactNode` \| `string` | `ChatBubbleOvalLeftIcon`               | Icon shown when the chat is closed. A string is treated as an image URL (64×64 rounded circle). |
+| `closeIcon`      | `React.ReactNode` \| `string` | `XMarkIcon`                            | Icon shown when the chat is open. A string is treated as an image URL (64×64 rounded circle).   |
+
+##### Optional props — inherited from ChatBase
+
+| Name                   | Type                                   | Description                                                                    |
+| ---------------------- | -------------------------------------- | ------------------------------------------------------------------------------ |
+| `headerElement`        | `ReactElement`                         | Custom header rendered at the top of the chat panel                            |
+| `bodyElement`          | `ReactElement`                         | Replaces the default message list with a custom element                        |
+| `footerElement`        | `ReactElement`                         | Rendered below the message list, above the input bar                           |
+| `additionalAction`     | `ChatBaseAction[]`                     | Extra items added to the actions dropdown menu                                 |
+| `hideAdditionalAction` | `boolean`                              | Hides the actions dropdown entirely                                            |
+| `disableMessageInput`  | `boolean`                              | Disables the text input                                                        |
+| `isLoadingReply`       | `boolean`                              | Shows a typing indicator and disables input while waiting for a reply          |
+| `className`            | `string`                               | Extra classes applied to the chat panel container                              |
+| `sizeClassName`        | `string`                               | Overrides the default panel size (`h-[75vh] w-96` on desktop)                  |
+| `disableMobileResize`  | `boolean`                              | Prevents the panel from going full screen on mobile                            |
+| `paddingTop`           | `number`                               | Top padding (px) applied to the chat panel — useful when a sticky bar overlaps |
+| `searchMessage`        | `string`                               | Current search query value                                                     |
+| `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 is submitted                                            |
+| `onChangeSearch`       | `(event: any) => void`                 | Called on every keystroke in the search input                                  |
+| `onClose`              | `() => void`                           | Called when the mobile close button is tapped                                  |
+| `onHiddenChatText`     | `boolean`                              | Hides the text input and file clip icon entirely                               |
+| `fileUpload`           | `FileUpload`                           | Configuration object for file upload support                                   |
+| `lib`                  | `{ axios?: any }`                      | Additional libraries (e.g. axios for file uploads)                             |

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

@@ -1,20 +1,14 @@
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
+import dayjs from "../../dayjs";
 import React, { useState } from "react";
 import { ChatAnchor } from ".";
 import Logo from "../../../assets/logo.png";
 import { Conversation } from "../chatBase";
-import README from "./README.md";
 
-const stories = storiesOf("Chat", module);
+const meta = { title: "Chat/Chat Anchor" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Chat Anchor", () => {
+export const ChatAnchorStory = () => {
   const botUser = {
     id: "1",
     name: "Bot",
@@ -36,14 +30,14 @@ stories.add("Chat Anchor", () => {
       {
         sender: botUser,
         messageBody: "Hi! How can I help you? 🤖",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 12:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
       {
         sender: currentUser,
         messageBody: "Yo, my computer's acting up.",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 13:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
@@ -51,7 +45,7 @@ stories.add("Chat Anchor", () => {
         sender: currentUser,
         messageBody:
           "It keeps saying 'Error 404: Coffee not found' when I start it up.",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 14:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
@@ -59,14 +53,14 @@ stories.add("Chat Anchor", () => {
         sender: botUser,
         messageBody:
           "Sounds like a caffeine emergency! Have you tried offering it coffee?",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 15:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
       {
         sender: currentUser,
         messageBody: "Seriously?",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 16:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
@@ -74,14 +68,14 @@ stories.add("Chat Anchor", () => {
         sender: botUser,
         messageBody:
           "Well, computers do like a jolt of energy, but don't spill, that could be 'mocha-nical' trouble!",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 17:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
       {
         sender: currentUser,
         messageBody: "Cringe. I'll give it a shot. Thanks.",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 18:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
@@ -89,7 +83,7 @@ stories.add("Chat Anchor", () => {
         sender: botUser,
         messageBody:
           "Anytime! If it demands a donut, that's on me. Have a brew-tiful day!",
-        createdAt: moment(
+        createdAt: dayjs(
           "Fri Nov 03 2023 19:21:14 GMT+0800 (Malaysia Time)"
         ).toDate(),
       },
@@ -153,4 +147,4 @@ stories.add("Chat Anchor", () => {
       />
     </div>
   );
-});
+}