blixify-ui-web-mcp 0.1.2 → 0.1.18

package/lib/components/design/pricing/pricing.stories.tsx

@@ -1,15 +1,9 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { PriceItem, Pricing } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/Pricing" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const priceList: PriceItem[] = [
   {
@@ -72,7 +66,7 @@ const priceList: PriceItem[] = [
   },
 ];
 
-stories.add("Pricing", () => {
+export const PricingStory = () => {
   return (
     <Pricing
       priceList={priceList}
@@ -83,4 +77,4 @@ stories.add("Pricing", () => {
       }}
     />
   );
-});
+}

package/lib/components/design/rightContent/rightContent.stories.tsx

@@ -1,22 +1,16 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { RightContent } from ".";
 import { Button } from "../../action/button";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/Right Content" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const contentList = [
   "MyVAC (Malaysia Vaccine Support Volunteers) is a dedicated volunteer management platform established to assist in the roll out of the government’s vaccination programme, by deploying willing individuals to be part of the vaccination team. This volunteer mobilisation program will be a crucial instrument to drive Malaysia’ vaccination campaign and achieve “Herd Immunity”.",
 ];
 
-stories.add("Right Content", () => {
+export const RightContentStory = () => {
   return (
     <RightContent
       title="MyVac"
@@ -29,4 +23,4 @@ stories.add("Right Content", () => {
       }
     />
   );
-});
+}

package/lib/components/design/sectionList/sectionList.stories.tsx

@@ -1,15 +1,9 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { SectionList } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/Section List" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const sectionContent = [
   {
@@ -30,6 +24,6 @@ const sectionContent = [
   },
 ];
 
-stories.add("Section List", () => {
+export const SectionListStory = () => {
   return <SectionList sectionContent={sectionContent} />;
-});
+}

package/lib/components/design/teams/teams.stories.tsx

@@ -1,15 +1,9 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { Teams } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/Teams" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const people = [
   {
@@ -56,6 +50,6 @@ const people = [
   },
 ];
 
-stories.add("Teams", () => {
+export const TeamsStory = () => {
   return <Teams teams={people} />;
-});
+}

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

@@ -1,4 +1,3 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { Alert } from ".";
 import {
@@ -6,17 +5,12 @@ import {
   CheckCircleIcon,
   CurrencyDollarIcon,
 } from "@heroicons/react/20/solid";
-import README from "./README.md";
 
-const stories = storiesOf("Display", module);
+const meta = { title: "Display/Alert" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Alert", () => {
+export const AlertStory = () => {
   return (
     <>
       <Alert
@@ -68,4 +62,4 @@ stories.add("Alert", () => {
       />
     </>
   );
-});
+}

package/lib/components/display/calendar/README.md

@@ -82,6 +82,7 @@ Custom header title (week view):
 | `handleMonthChange`      | `(date: Date) => void`                                        | —                                                                                                     | Called with the new date when the user navigates                                                                                                                                                                          |
 | `handleViewChange`       | `(view: string) => void`                                      | —                                                                                                     | Called with the current view type when the view changes                                                                                                                                                                   |
 | `handleCalendarResize`   | `(ref: React.RefObject<any>, isMobileWidth: boolean) => void` | —                                                                                                     | Override the default responsive resize behaviour. Receives the calendar ref and a mobile breakpoint flag                                                                                                                  |
+| `eventColorRules`        | `CalendarEventColorRule[]`                                    | —                                                                                                     | Maps a field+value on each event to an explicit color. First matching rule wins. Does not override `bgColor` set directly on the event. See CalendarEventColorRule below.                                                 |
 
 ##### EventAvailability
 
@@ -111,3 +112,51 @@ Built-in custom button keys: `backward`, `forward`, `current`, `monthView`, `wee
 | ---------- | -------- | -------------------------------- |
 | `view`     | `"week"` | Only `"week"` is supported       |
 | `duration` | `number` | Number of weeks to display (1–4) |
+
+##### CalendarEventColorRule
+
+| Name         | Type     | Required | Description                                                          |
+| ------------ | -------- | -------- | -------------------------------------------------------------------- |
+| `field`      | `string` | yes      | Field name on the event object to match against (e.g. `"status"`)    |
+| `value`      | `any`    | yes      | The value to match (e.g. `"Approved"`)                               |
+| `color`      | `string` | yes      | Tailwind bg class for the event pill, e.g. `"bg-green-500"`          |
+| `hoverColor` | `string` | no       | Tailwind hover class for the event pill, e.g. `"hover:bg-green-700"` |
+| `textColor`  | `string` | no       | Tailwind text class for the event pill, e.g. `"text-white"`          |
+
+Example — color events by status:
+
+```jsx
+<Calendar
+  calendarView="dayGridMonth"
+  currentDate={currentDate}
+  renderEventAvailabilities={() => [
+    { id: "1", title: "Kickoff", start: new Date(), status: "Approved" },
+    { id: "2", title: "Review", start: new Date(), status: "Pending" },
+    { id: "3", title: "Blocked", start: new Date(), status: "Rejected" },
+  ]}
+  lib={{ moment }}
+  eventColorRules={[
+    {
+      field: "status",
+      value: "Approved",
+      color: "bg-green-500",
+      hoverColor: "hover:bg-green-700",
+      textColor: "text-white",
+    },
+    {
+      field: "status",
+      value: "Pending",
+      color: "bg-yellow-400",
+      hoverColor: "hover:bg-yellow-600",
+      textColor: "text-white",
+    },
+    {
+      field: "status",
+      value: "Rejected",
+      color: "bg-red-500",
+      hoverColor: "hover:bg-red-700",
+      textColor: "text-white",
+    },
+  ]}
+/>
+```

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

@@ -1,55 +1,80 @@
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
-import React, { useState } from "react";
+import React from "react";
+import dayjs from "../../dayjs";
+import { useState } from "react";
 import { Calendar } from ".";
-import { StorySection } from "../../storyUtils";
 import { InputDatePicker } from "../../input/datePicker";
-import README from "./README.md";
+import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Display", module);
+const meta = { title: "Display/Calendar" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const sampleEvents = () => [
   {
     id: "1",
     title: "Blixify Gantt Chart Updates",
-    start: moment("2024/05/06 09:30", "YYYY/MM/DD HH:mm").toDate(),
+    start: dayjs("2024/05/06 09:30", "YYYY/MM/DD HH:mm").toDate(),
+    status: "Approved",
   },
   {
     id: "2",
     title: "Verdant Summarize Updates",
-    start: moment("2024/05/08 13:10", "YYYY/MM/DD HH:mm").toDate(),
+    start: dayjs("2024/05/08 13:10", "YYYY/MM/DD HH:mm").toDate(),
+    status: "Pending",
   },
   {
     id: "3",
     title: "Tech Daily Sync",
-    start: moment("2024/05/08 09:30", "YYYY/MM/DD HH:mm").toDate(),
-    end: moment("2024/05/08 10:30", "YYYY/MM/DD HH:mm").toDate(),
+    start: dayjs("2024/05/08 09:30", "YYYY/MM/DD HH:mm").toDate(),
+    end: dayjs("2024/05/08 10:30", "YYYY/MM/DD HH:mm").toDate(),
+    status: "Rejected",
   },
   {
     id: "4",
     title: "Blixify UI Update Sync",
-    start: moment().toDate(),
+    start: dayjs().toDate(),
+    status: "Approved",
   },
   {
     id: "5",
     title: "Blood Donation Campaign",
-    start: moment().toDate(),
-    end: moment().add(2, "days").toDate(),
+    start: dayjs().toDate(),
+    end: dayjs().add(2, "days").toDate(),
+    status: "Pending",
   },
   {
     id: "6",
     title: "Sprint Review",
-    start: moment().toDate(),
+    start: dayjs().toDate(),
+    status: "Rejected",
   },
 ];
 
-stories.add("Calendar", () => {
+const statusColorRules = [
+  {
+    field: "status",
+    value: "Approved",
+    color: "bg-green-500",
+    hoverColor: "hover:bg-green-700",
+    textColor: "text-white",
+  },
+  {
+    field: "status",
+    value: "Pending",
+    color: "bg-yellow-400",
+    hoverColor: "hover:bg-yellow-600",
+    textColor: "text-white",
+  },
+  {
+    field: "status",
+    value: "Rejected",
+    color: "bg-red-500",
+    hoverColor: "hover:bg-red-700",
+    textColor: "text-white",
+  },
+];
+
+export const CalendarStory = () => {
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
 
   return (
@@ -72,7 +97,7 @@ stories.add("Calendar", () => {
               dayMaxEvents={5}
               handleMonthChange={setCurrentDate}
               renderEventAvailabilities={sampleEvents}
-              lib={{ moment }}
+              lib={{ dayjs }}
               height="700px"
             />
           </div>
@@ -90,7 +115,7 @@ stories.add("Calendar", () => {
             dayMaxEvents={5}
             handleMonthChange={() => {}}
             renderEventAvailabilities={sampleEvents}
-            lib={{ moment }}
+            lib={{ dayjs }}
             height="700px"
             publicHolidays={{ enable: true, key: "", country: "malaysia" }}
           />
@@ -108,7 +133,7 @@ stories.add("Calendar", () => {
             dayMaxEvents={3}
             handleMonthChange={() => {}}
             renderEventAvailabilities={sampleEvents}
-            lib={{ moment }}
+            lib={{ dayjs }}
             height="700px"
             customView={{ view: "week", duration: 2 }}
             enableCustomViewSelect
@@ -127,8 +152,26 @@ stories.add("Calendar", () => {
             dayMaxEvents={5}
             handleMonthChange={() => {}}
             renderEventAvailabilities={sampleEvents}
-            lib={{ moment }}
+            lib={{ dayjs }}
+            height="700px"
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Event Color Rules"
+        description="Pass eventColorRules to color events based on a field value. Each rule maps a field+value pair to a bg/hover/text color. First matching rule wins."
+      >
+        <div className="w-full">
+          <Calendar
+            calendarView="dayGridMonth"
+            currentDate={new Date()}
+            dayMaxEvents={5}
+            handleMonthChange={() => {}}
+            renderEventAvailabilities={sampleEvents}
+            lib={{ dayjs }}
             height="700px"
+            eventColorRules={statusColorRules}
           />
         </div>
       </StorySection>
@@ -144,11 +187,11 @@ stories.add("Calendar", () => {
             dayMaxEvents={3}
             handleMonthChange={() => {}}
             renderEventAvailabilities={sampleEvents}
-            lib={{ moment }}
+            lib={{ dayjs }}
             height="700px"
             customHeaderFn={(dateInfo) => {
-              const start = moment(dateInfo.start.marker).format("DD/MM/YYYY");
-              const end = moment(dateInfo.end.marker).format("DD/MM/YYYY");
+              const start = dayjs(dateInfo.start.marker).format("DD/MM/YYYY");
+              const end = dayjs(dateInfo.end.marker).format("DD/MM/YYYY");
               return `${start} - ${end}`;
             }}
           />
@@ -156,4 +199,4 @@ stories.add("Calendar", () => {
       </StorySection>
     </>
   );
-});
+}

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

@@ -1,17 +1,11 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { Clipboard } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Design", module);
+const meta = { title: "Design/Clipboard" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Clipboard", () => {
+export const ClipboardStory = () => {
   const [copyCount, setCopyCount] = useState(0);
   const [copiedText, setCopiedText] = useState("");
   return (
@@ -29,4 +23,4 @@ stories.add("Clipboard", () => {
       </div>
     </div>
   );
-});
+}

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

@@ -1,17 +1,12 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { DetailList } from ".";
-import README from "./README.md";
 import { Tag } from "../tag";
-const stories = storiesOf("Display", module);
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
+const meta = { title: "Display/Detail List" };
+export default meta;
 
-stories.add("Detail List", () => {
+
+export const DetailListStory = () => {
   return (
     <>
       <DetailList
@@ -128,4 +123,4 @@ stories.add("Detail List", () => {
       />
     </>
   );
-});
+}

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

@@ -1,17 +1,12 @@
-import { storiesOf } from "@storybook/react";
+import React from "react";
 import { Drawer } from ".";
 import { Button } from "../../action/button";
-import README from "./README.md";
 
-const stories = storiesOf("Display", module);
+const meta = { title: "Display/Drawer" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Drawer", () => {
+export const DrawerStory = () => {
   return (
     <div className="flex flex-col gap-4">
       <div className="flex gap-x-3">
@@ -63,4 +58,4 @@ stories.add("Drawer", () => {
       </div>
     </div>
   );
-});
+}

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

@@ -1,22 +1,16 @@
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { EmptyState } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Display", module);
+const meta = { title: "Display/Empty State" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Empty State", () => {
+export const EmptyStateStory = () => {
   return (
     <EmptyState
       text="There is no data to display"
       icon={<InformationCircleIcon className="h-10 text-gray-600" />}
     />
   );
-});
+}

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

@@ -3,20 +3,14 @@ import {
   HandThumbUpIcon,
   UserIcon,
 } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { Feed, Feeds } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Display", module);
+const meta = { title: "Display/Feeds" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Feeds", () => {
+export const FeedsStory = () => {
   const [collapsedIds, setCollapsedIds] = useState<string[]>(["1"]);
 
   const feeds: Feed[] = [
@@ -72,4 +66,4 @@ stories.add("Feeds", () => {
       onChangeCollapse={(ids) => setCollapsedIds(ids)}
     />
   );
-});
+}

package/lib/components/display/flexTable/README.md

@@ -120,13 +120,17 @@ const columns: DataStructure[] = [
 
 ##### FlexTableColumn
 
-| Property   | Type                                                   | Description                                  |
-| ---------- | ------------------------------------------------------ | -------------------------------------------- |
-| `key`      | `string`                                               | Unique column identifier                     |
-| `title`    | `string`                                               | Column header label                          |
-| `type`     | `"text" \| "number" \| "textarea" \| "math" \| "list"` | Input type for the column                    |
-| `width`    | `string`                                               | Tailwind width class, e.g. `"min-w-[200px]"` |
-| `editable` | `boolean`                                              | Whether the column cells can be edited       |
+| Property             | Type                                                   | Description                                                                                               |
+| -------------------- | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
+| `key`                | `string`                                               | Unique column identifier                                                                                  |
+| `title`              | `string`                                               | Column header label                                                                                       |
+| `type`               | `"text" \| "number" \| "textarea" \| "math" \| "list"` | Input type for the column                                                                                 |
+| `width`              | `string`                                               | Tailwind width class, e.g. `"min-w-[200px]"`                                                              |
+| `editable`           | `boolean`                                              | Whether the column cells can be edited                                                                    |
+| `listSelection`      | `string[]`                                             | Options for `type: "list"` columns. Automatically carried from `DataStructure.listSelection`              |
+| `listSelectionLabel` | `string[]`                                             | Display labels for `listSelection` options. Automatically carried from `DataStructure.listSelectionLabel` |
+
+> `type: "list"` columns render a `Select` dropdown with `portalDropdown` and `portalDropdownScrollOffset={false}` hardcoded — the dropdown always pops out above the table and is never clipped by `overflow: hidden`.
 
 ##### FlexMathQuery