blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,122 @@
+import { PencilIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import moment from "moment";
+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);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Treemap Chart", () => {
+  const [seriesData, setSeriesData] = useState<any[]>([]);
+
+  const chartDummyData = useMemo(() => {
+    return [
+      {
+        label: "Analytics",
+        value: 20,
+      },
+      {
+        label: "Ecommerce",
+        value: 15,
+      },
+      {
+        label: "Desktop",
+        value: 13,
+      },
+      {
+        label: "Mobile",
+        value: 12,
+      },
+      {
+        label: "Social",
+        value: 10,
+      },
+      {
+        label: "Other",
+        value: 8,
+      },
+      {
+        label: "Marketing",
+        value: 7,
+      },
+      {
+        label: "Development",
+        value: 6,
+      },
+      {
+        label: "Design",
+        value: 5,
+      },
+      {
+        label: "Support",
+        value: 4,
+      },
+    ];
+  }, []);
+
+  const handleSetData = useCallback(
+    (customDate?: RangeInterface) => {
+      let dummySeriesData: any[] = [];
+      chartDummyData.map((eachData) => {
+        dummySeriesData.push({ x: eachData.label, y: eachData.value });
+        return null;
+      });
+      setSeriesData(dummySeriesData);
+    },
+    [chartDummyData]
+  );
+
+  useEffect(() => {
+    handleSetData();
+  }, [handleSetData]);
+
+  const sevenDaysAgo = new Date();
+  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+
+  return (
+    <>
+      <div className="font-medium mb-5">Treemap Chart</div>
+      <TreemapChart
+        title="Page Views Distribution"
+        seriesName="Pages"
+        seriesData={seriesData}
+        tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+        dateRangeVisible={true}
+        customDate={{
+          startDate: sevenDaysAgo,
+          endDate: moment().toDate(),
+          isDuration: true,
+        }}
+        onChangeDate={handleSetData}
+        showDataLabel={true}
+        newTabUrl="https://www.google.com/"
+      />
+      <div className="font-medium my-5">Dark Mode Treemap Chart</div>
+      <TreemapChart
+        title="Data Categories"
+        seriesName="Categories"
+        seriesData={seriesData}
+        tool={<PencilIcon className="h-4 w-4 text-primary-600" />}
+        dateRangeVisible={true}
+        customDate={{
+          startDate: sevenDaysAgo,
+          endDate: moment().toDate(),
+          isDuration: true,
+        }}
+        onChangeDate={handleSetData}
+        showDataLabel={true}
+        darkMode={true}
+        darkModeBg="bg-gradient-to-r from-slate-700 to-gray-900"
+        borderColor=""
+      />
+    </>
+  );
+});

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

@@ -0,0 +1,113 @@
+# Chat Anchor
+
+<!-- STORY -->
+
+<hr>
+
+Chat Anchor
+
+##### Import
+
+```js
+import { ChatAnchor } from "blixify-ui-web/components/chat/chatAnchor";
+import {
+  ChatBase,
+  Conversation,
+} from "blixify-ui-web/components/chat/chatBase";
+```
+
+##### Usage
+
+```tsx
+const [openChatBase, setOpenChatBase] = useState<boolean>(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(),
+    },
+  ],
+});
+
+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}
+    value={message}
+    currentUser={currentUser}
+    conversation={filteredConversation ?? conversation}
+    headerElement={headerElement}
+    searchMessage={search}
+    onChangeSearch={(e) => setSearch(e.target.value)}
+    onSendMessage={handleOnSendMessage}
+    onChangeMessage={(e) => setMessage(e.target.value)}
+    onSearch={handleOnSearch}
+    onClose={handleOnClick}
+    className="shadow-lg border border-gray-200"
+    onClick={handleOnClick}
+  />
+);
+```
+
+##### 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            |

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

@@ -0,0 +1,156 @@
+import { storiesOf } from "@storybook/react";
+import moment from "moment";
+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);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Chat Anchor", () => {
+  const botUser = {
+    id: "1",
+    name: "Bot",
+    imageUrl:
+      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+  };
+  const currentUser = { id: "2", name: "Guest" };
+
+  const [openChatBase, setOpenChatBase] = useState<boolean>(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(),
+      },
+      {
+        sender: currentUser,
+        messageBody:
+          "It keeps saying 'Error 404: Coffee not found' when I start it up.",
+        createdAt: moment(
+          "Fri Nov 03 2023 14:21:14 GMT+0800 (Malaysia Time)"
+        ).toDate(),
+      },
+      {
+        sender: botUser,
+        messageBody:
+          "Sounds like a caffeine emergency! Have you tried offering it coffee?",
+        createdAt: moment(
+          "Fri Nov 03 2023 15:21:14 GMT+0800 (Malaysia Time)"
+        ).toDate(),
+      },
+      {
+        sender: currentUser,
+        messageBody: "Seriously?",
+        createdAt: moment(
+          "Fri Nov 03 2023 16:21:14 GMT+0800 (Malaysia Time)"
+        ).toDate(),
+      },
+      {
+        sender: botUser,
+        messageBody:
+          "Well, computers do like a jolt of energy, but don't spill, that could be 'mocha-nical' trouble!",
+        createdAt: moment(
+          "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(
+          "Fri Nov 03 2023 18:21:14 GMT+0800 (Malaysia Time)"
+        ).toDate(),
+      },
+      {
+        sender: botUser,
+        messageBody:
+          "Anytime! If it demands a donut, that's on me. Have a brew-tiful day!",
+        createdAt: moment(
+          "Fri Nov 03 2023 19:21:14 GMT+0800 (Malaysia Time)"
+        ).toDate(),
+      },
+    ],
+  });
+
+  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) => {
+        if (typeof eachMessage.messageBody === "string") {
+          return eachMessage.messageBody
+            .toLowerCase()
+            .includes(searchMessage.toLowerCase());
+        }
+        return null;
+      });
+      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 (
+    <div className="h-96 w-full relative">
+      <ChatAnchor
+        open={openChatBase}
+        value={message}
+        currentUser={currentUser}
+        conversation={filteredConversation ?? conversation}
+        headerElement={headerElement}
+        searchMessage={search}
+        onChangeSearch={(e) => setSearch(e.target.value)}
+        onSendMessage={handleOnSendMessage}
+        onChangeMessage={(e) => setMessage(e.target.value)}
+        onSearch={handleOnSearch}
+        onClose={handleOnClick}
+        className="shadow-lg border border-gray-200"
+        onClick={handleOnClick}
+        greetingCard={true}
+        greetingText="Ask me for more information"
+        openIcon="https://images.unsplash.com/photo-1719937206341-38a6392dfdef?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      />
+    </div>
+  );
+});

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

@@ -0,0 +1,223 @@
+# Chat Base
+
+<!-- STORY -->
+
+<hr>
+
+Chat Base
+
+##### Import
+
+```js
+import { ChatBase } from "blixify-ui-web/components/chat/chatBase";
+```
+
+##### Usage
+
+```tsx
+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(),
+    },
+  ],
+});
+
+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 handleOnClearMessage = () => {
+  setFilteredConversation(null);
+  setConversation({
+    id: "1",
+    members: [currentUser, botUser],
+    messageList: [],
+  });
+};
+
+const headerElement = (
+  <div className="p-2 bg-primary-500 rounded-t-md">
+    <img src={Logo} alt="" className="h-12" />
+  </div>
+);
+
+const renderFooterElement = () => {
+  if (conversation.messageList.length >= messageLimit)
+    return (
+      <div className="p-2">
+        <div className="p-2 bg-primary-50 border border-primary-300 rounded-md shadow-md text-xs">
+          <p>
+            You have reached the message limit of: {messageLimit}
+            <br />
+            Clear previous messages to send a new one.
+          </p>
+          <TextButton
+            text="Clear now"
+            onClick={handleOnClearMessage}
+            className="mt-2"
+          />
+        </div>
+      </div>
+    );
+  else return <></>;
+};
+const footerElement = renderFooterElement();
+
+const additionalAction: ChatBaseAction[] = [
+  {
+    text: "Clear",
+    onClick: handleOnClearMessage,
+    icon: <TrashIcon className="w-3 h-3" aria-hidden="true" />,
+  },
+];
+
+return (
+  <ChatBase
+    open
+    value={message}
+    currentUser={currentUser}
+    conversation={filteredConversation ?? conversation}
+    headerElement={headerElement}
+    footerElement={footerElement}
+    additionalAction={additionalAction}
+    searchMessage={search}
+    onChangeSearch={(e) => setSearch(e.target.value)}
+    onSendMessage={handleOnSendMessage}
+    onChangeMessage={(e) => setMessage(e.target.value)}
+    onSearch={handleOnSearch}
+    className="border border-gray-200 shadow-lg w-96"
+    disableMobileResize
+    disableMessageInput={conversation.messageList.length >= messageLimit}
+    onHiddenChatText={true}
+  />
+);
+```
+
+##### Required props
+
+| Name         | Type           | Description                      |
+| ------------ | -------------- | -------------------------------- |
+| open         | `boolean`      | Visibility of ChatBase component |
+| value        | `string`       | Message input text               |
+| currentUser  | `User`         | User Object                      |
+| conversation | `Conversation` | Conversation Object              |
+
+##### Optional props
+
+| Name                | Type                 | Default    | Description                                                                            |
+| ------------------- | -------------------- | ---------- | -------------------------------------------------------------------------------------- |
+| searchMessage       | `string`             | ""         | Search input text                                                                      |
+| headerElement       | `React Element`      | null       | Replaces default component Header                                                      |
+| bodyElement         | `React Element`      | null       | Replaces default component Body                                                        |
+| footerElement       | `React Element`      | null       | Footer element that floats above message input                                         |
+| additionalAction    | `ChatBaseAction[]`   | null       | Additional buttons to be place within action dropdown in top right corner              |
+| disableMessageInput | `boolean`            | null       | When true, message input is disabled                                                   |
+| isLoadingReply      | `boolean`            | null       | When true, loading indicator appears above message input and message input is disabled |
+| className           | `tailwind classname` | ""         | For component container                                                                |
+| sizeClassName       | `tailwind classname` | ""         | For component size                                                                     |
+| paddingTop          | `Padding top         | ""         | For mobile applications                                                                |
+| disableMobileResize | `boolean`            | null       | When true, mobile resize is disabled                                                   |
+| onSendMessage       | `function`           | `() => {}` | To send message                                                                        |
+| onChangeMessage     | `function`           | `() => {}` | To type in message input                                                               |
+| onSearch            | `function`           | `() => {}` | To search in messages                                                                  |
+| onChangeSearch      | `function`           | `() => {}` | To type in search input                                                                |
+| onClose             | `function`           | `() => {}` | To close ChatBase component - Only available on mobile                                 |
+| onHiddenChatText    | `boolean`            | `true`     | To hide the chat text and Paper Clip Icon                                              |
+
+##### Interface FileUpload
+
+| Name              | Type                                   | Description                                                            |
+| ----------------- | -------------------------------------- | ---------------------------------------------------------------------- |
+| `allowFileUpload` | `boolean`                              | When true, users are able to upload image and video                    |
+| `file`            | `string \| File \| any`                | Image / video file                                                     |
+| `maxFileSize?`    | `number`                               | Maximum file size                                                      |
+| `acceptFileType?` | `string`                               | Accepted file types (eg. ".jpg,.jpeg,.png,.svg,.tiff,.mp4,.webm,.ogg") |
+| `onChangeUpload`  | `(event: any) => void`                 | Function to change file in file upload input                           |
+| `onSendUpload`    | `(conversation: Conversation) => void` | Function to upload file                                                |
+
+##### Interface FileObj
+
+| Name       | Type     | Description                 |
+| ---------- | -------- | --------------------------- |
+| `fileName` | `string` | File name                   |
+| `token`    | `string` | File token                  |
+| `type`     | `string` | File type (eg. "image/png") |
+
+##### Interface Conversation
+
+| Name          | Type        | Description               |
+| ------------- | ----------- | ------------------------- |
+| `id`          | `string`    | Required id               |
+| `members`     | `User[]`    | Required list of Users    |
+| `messageList` | `Message[]` | Required list of Messages |
+
+##### Interface User
+
+| Name       | Type     | Description       |
+| ---------- | -------- | ----------------- |
+| `id`       | `string` | Required id       |
+| `name`     | `string` | Required name     |
+| `imageUrl` | `string` | Optional imageURL |
+
+##### Interface Conversation
+
+| Name          | Type        | Description               |
+| ------------- | ----------- | ------------------------- |
+| `id`          | `string`    | Required id               |
+| `members`     | `User[]`    | Required list of Users    |
+| `messageList` | `Message[]` | Required list of Messages |
+
+##### Interface Message
+
+| Name          | Type            | Description   |
+| ------------- | --------------- | ------------- |
+| `sender`      | `User`          | Required User |
+| `messageBody` | `string`        | messageBody   |
+| `reactElemet` | `React Element` | React Element |
+| `createdAt`   | `Date`          | Required date |
+
+##### Interface ChatBaseAction
+
+| Name      | Type          | Description               |
+| --------- | ------------- | ------------------------- |
+| `text`    | `string`      | Required text             |
+| `onClick` | `() => void`  | Required onClick function |
+| `icon`    | `JSX.Element` | Required icon             |