blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,71 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { Alert } from ".";
+import {
+  BoltIcon,
+  CheckCircleIcon,
+  CurrencyDollarIcon,
+} from "@heroicons/react/20/solid";
+import README from "./README.md";
+
+const stories = storiesOf("Display", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Alert", () => {
+  return (
+    <>
+      <Alert
+        title="Order completed"
+        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam."
+        icon={<BoltIcon className="size-5 text-purple-500" />}
+        actionBtns={[
+          { text: "View status", onClick: () => {} },
+          { text: "Dismiss", onClick: () => {} },
+        ]}
+        color="purple"
+      />
+      <div className="mt-4 p-6 bg-black">
+        <Alert
+          title="Order completed"
+          desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam."
+          icon={<CheckCircleIcon className="size-5 text-green-500" />}
+          actionBtns={[
+            { text: "View status", onClick: () => {} },
+            { text: "Dismiss", onClick: () => {} },
+          ]}
+          color="dark"
+        />
+      </div>
+      <Alert
+        title="Order completed"
+        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam."
+        icon={<CurrencyDollarIcon className="size-5 text-green-500" />}
+        actionBtns={[
+          { text: "View status", onClick: () => {} },
+          { text: "Dismiss", onClick: () => {} },
+        ]}
+        color="green"
+        className="mt-4"
+        addContent={
+          <div>
+            <p>Additional Content</p>
+            <ul className="list-disc list-inside">
+              <li>Item 1</li>
+              <li>Item 2</li>
+            </ul>
+            <img
+              src="https://plus.unsplash.com/premium_photo-1722593856418-05d6d47eec59?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170"
+              alt=""
+              className="h-32 w-48 rounded-lg overflow-hidden"
+            />
+          </div>
+        }
+      />
+    </>
+  );
+});

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

@@ -0,0 +1,113 @@
+# Calendar
+
+<!-- STORY -->
+
+<hr>
+
+A full-featured calendar built on FullCalendar. Supports month, week, day, and list views with responsive layout, public holidays via Google Calendar API, custom event rendering, and a configurable toolbar.
+
+##### Import
+
+```js
+import { Calendar } from "blixify-ui-web/display/calendar";
+```
+
+##### Usage
+
+Basic month view with date picker:
+
+```jsx
+const [currentDate, setCurrentDate] = useState(new Date());
+
+<InputDatePicker
+  value={currentDate}
+  onChange={(_id, value) => { if (value) setCurrentDate(value); }}
+/>
+<Calendar
+  calendarView="dayGridMonth"
+  currentDate={currentDate}
+  dayMaxEvents={5}
+  handleMonthChange={setCurrentDate}
+  renderEventAvailabilities={() => [
+    { id: "1", title: "Team Sync", start: new Date() },
+    { id: "2", title: "Sprint Review", start: new Date(), end: moment().add(2, "days").toDate() },
+  ]}
+  lib={{ moment }}
+  height="700px"
+/>
+```
+
+Custom header title (week view):
+
+```jsx
+<Calendar
+  calendarView="timeGridWeek"
+  currentDate={currentDate}
+  renderEventAvailabilities={getEvents}
+  lib={{ moment }}
+  customHeaderFn={(dateInfo) => {
+    const start = moment(dateInfo.start.marker).format("DD/MM/YYYY");
+    const end = moment(dateInfo.end.marker).format("DD/MM/YYYY");
+    return `${start} - ${end}`;
+  }}
+/>
+```
+
+##### Required props
+
+| Name                        | Type                                                               | Description                                            |
+| --------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------ |
+| `calendarView`              | `"dayGridMonth" \| "timeGridWeek" \| "timeGridDay" \| "listMonth"` | Initial calendar view                                  |
+| `renderEventAvailabilities` | `() => EventAvailability[]`                                        | Returns the list of events to render                   |
+| `lib`                       | `{ moment: typeof moment }`                                        | Pass the moment library — required for date navigation |
+
+##### Optional props
+
+| Name                     | Type                                                          | Default                                                                                               | Description                                                                                                                                                                                                               |
+| ------------------------ | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `currentDate`            | `Date`                                                        | `moment().toDate()`                                                                                   | Controls the displayed date. Update this via `handleMonthChange` to navigate                                                                                                                                              |
+| `height`                 | `string`                                                      | `550`                                                                                                 | Calendar height, e.g. `"700px"` or `"100%"`. On mobile, overridden to `"85vh"`                                                                                                                                            |
+| `dayMaxEvents`           | `boolean \| number`                                           | `3`                                                                                                   | Max events shown per day cell. `true` = auto-hide overflow, `false` = show all                                                                                                                                            |
+| `dayCellMinHeight`       | `number`                                                      | —                                                                                                     | Minimum height in px for each day cell                                                                                                                                                                                    |
+| `firstDay`               | `number`                                                      | `1`                                                                                                   | First day of the week. `0` = Sunday, `1` = Monday                                                                                                                                                                         |
+| `headerToolbar`          | `ToolbarOptions`                                              | `{ left: "backward,current,forward", center: "title", right: "monthView,weekView,dayView,listView" }` | Override the header toolbar buttons                                                                                                                                                                                       |
+| `footerToolbar`          | `ToolbarOptions`                                              | —                                                                                                     | Override the footer toolbar buttons                                                                                                                                                                                       |
+| `customButtons`          | `{ [key: string]: any }`                                      | —                                                                                                     | Override the built-in custom button definitions                                                                                                                                                                           |
+| `customView`             | `CalendarCustomView`                                          | —                                                                                                     | Set a multi-week span for week view. `view: "week"`, `duration: 1–4`                                                                                                                                                      |
+| `enableCustomViewSelect` | `boolean`                                                     | —                                                                                                     | Adds a "Custom" toolbar button that opens a modal for users to set their own week duration                                                                                                                                |
+| `customHeaderFn`         | `(dateInfo: any) => string`                                   | —                                                                                                     | Override the toolbar title string. Receives `{ start: { marker: Date }, end: { marker: Date } }`                                                                                                                          |
+| `customPlugin`           | `FullCalendar plugin`                                         | —                                                                                                     | Replace the default plugins with a custom FullCalendar plugin. See [FullCalendar docs](https://fullcalendar.io/docs/react#custom-views-with-components)                                                                   |
+| `publicHolidays`         | `{ enable: boolean, key: string, country?: string }`          | —                                                                                                     | Fetch public holidays from Google Calendar API. `key` = Google Cloud Calendar API key. `country` = region code (e.g. `"malaysia"`). See [country codes](https://gist.github.com/dhoeric/76bd1c15168ee0ee61ad3bf1730dcb65) |
+| `onClickEvent`           | `(id?: string) => void`                                       | —                                                                                                     | Called with the event id when a calendar event is clicked                                                                                                                                                                 |
+| `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                                                                                                                  |
+
+##### EventAvailability
+
+| Name         | Type     | Required | Description                                                            |
+| ------------ | -------- | -------- | ---------------------------------------------------------------------- |
+| `id`         | `string` | no       | Unique event id (returned by `onClickEvent`)                           |
+| `title`      | `string` | yes      | Event label shown in the calendar                                      |
+| `start`      | `Date`   | no       | Event start date/time. Falls back to `date` if omitted                 |
+| `end`        | `Date`   | no       | Event end date/time. If `end` is before `start`, it is ignored         |
+| `bgColor`    | `string` | no       | Tailwind bg class for the event pill, e.g. `"bg-primary-500"`          |
+| `hoverColor` | `string` | no       | Tailwind hover class for the event pill, e.g. `"hover:bg-primary-700"` |
+| `textColor`  | `string` | no       | Tailwind text class for the event pill, e.g. `"text-white"`            |
+
+##### ToolbarOptions
+
+| Name           | Type     | Description                                    |
+| -------------- | -------- | ---------------------------------------------- |
+| `left`/`start` | `string` | Comma-separated button keys for the left side  |
+| `center`       | `string` | Comma-separated button keys for the center     |
+| `right`/`end`  | `string` | Comma-separated button keys for the right side |
+
+Built-in custom button keys: `backward`, `forward`, `current`, `monthView`, `weekView`, `dayView`, `listView`, `customView` (when `enableCustomViewSelect` is true).
+
+##### CalendarCustomView
+
+| Name       | Type     | Description                      |
+| ---------- | -------- | -------------------------------- |
+| `view`     | `"week"` | Only `"week"` is supported       |
+| `duration` | `number` | Number of weeks to display (1–4) |

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

@@ -0,0 +1,159 @@
+import { storiesOf } from "@storybook/react";
+import moment from "moment";
+import React, { useState } from "react";
+import { Calendar } from ".";
+import { StorySection } from "../../storyUtils";
+import { InputDatePicker } from "../../input/datePicker";
+import README from "./README.md";
+
+const stories = storiesOf("Display", module);
+
+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(),
+  },
+  {
+    id: "2",
+    title: "Verdant Summarize Updates",
+    start: moment("2024/05/08 13:10", "YYYY/MM/DD HH:mm").toDate(),
+  },
+  {
+    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(),
+  },
+  {
+    id: "4",
+    title: "Blixify UI Update Sync",
+    start: moment().toDate(),
+  },
+  {
+    id: "5",
+    title: "Blood Donation Campaign",
+    start: moment().toDate(),
+    end: moment().add(2, "days").toDate(),
+  },
+  {
+    id: "6",
+    title: "Sprint Review",
+    start: moment().toDate(),
+  },
+];
+
+stories.add("Calendar", () => {
+  const [currentDate, setCurrentDate] = useState<Date>(new Date());
+
+  return (
+    <>
+      <StorySection
+        title="Default (Month View)"
+        description="Default calendar in dayGridMonth view. Pass currentDate to control the displayed month. Use an InputDatePicker to let users jump to a specific date."
+      >
+        <div className="w-full">
+          <InputDatePicker
+            value={currentDate}
+            onChange={(_id, value) => {
+              if (value) setCurrentDate(value);
+            }}
+          />
+          <div className="mt-4">
+            <Calendar
+              calendarView="dayGridMonth"
+              currentDate={currentDate}
+              dayMaxEvents={5}
+              handleMonthChange={setCurrentDate}
+              renderEventAvailabilities={sampleEvents}
+              lib={{ moment }}
+              height="700px"
+            />
+          </div>
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Public Holidays"
+        description="Pass publicHolidays with a Google Calendar API key to fetch and overlay public holidays. Set country to a region code (e.g. 'malaysia'). Leave key empty to disable fetching."
+      >
+        <div className="w-full">
+          <Calendar
+            calendarView="dayGridMonth"
+            currentDate={new Date()}
+            dayMaxEvents={5}
+            handleMonthChange={() => {}}
+            renderEventAvailabilities={sampleEvents}
+            lib={{ moment }}
+            height="700px"
+            publicHolidays={{ enable: true, key: "", country: "malaysia" }}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Custom View (2-Week)"
+        description="Pass customView with view='week' and a duration (1–4) to set a multi-week span. enableCustomViewSelect adds a 'Custom' button to the toolbar so users can change the duration themselves."
+      >
+        <div className="w-full">
+          <Calendar
+            calendarView="timeGridWeek"
+            currentDate={new Date()}
+            dayMaxEvents={3}
+            handleMonthChange={() => {}}
+            renderEventAvailabilities={sampleEvents}
+            lib={{ moment }}
+            height="700px"
+            customView={{ view: "week", duration: 2 }}
+            enableCustomViewSelect
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Custom Event Content"
+        description="Use renderCustomEventContent to replace the default event pill with your own JSX. The callback receives the FullCalendar eventInfo object."
+      >
+        <div className="w-full">
+          <Calendar
+            calendarView="dayGridMonth"
+            currentDate={new Date()}
+            dayMaxEvents={5}
+            handleMonthChange={() => {}}
+            renderEventAvailabilities={sampleEvents}
+            lib={{ moment }}
+            height="700px"
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Custom Header Title"
+        description="Pass customHeaderFn to format the toolbar title string. Receives a dateInfo object with start and end markers."
+      >
+        <div className="w-full">
+          <Calendar
+            calendarView="timeGridWeek"
+            currentDate={new Date()}
+            dayMaxEvents={3}
+            handleMonthChange={() => {}}
+            renderEventAvailabilities={sampleEvents}
+            lib={{ moment }}
+            height="700px"
+            customHeaderFn={(dateInfo) => {
+              const start = moment(dateInfo.start.marker).format("DD/MM/YYYY");
+              const end = moment(dateInfo.end.marker).format("DD/MM/YYYY");
+              return `${start} - ${end}`;
+            }}
+          />
+        </div>
+      </StorySection>
+    </>
+  );
+});

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

@@ -0,0 +1,36 @@
+# Clipboard
+
+<!-- STORY -->
+
+<hr>
+
+A clipboard component that displays text in a read-only input field with a copy button. When clicked, the copy button copies the text to the clipboard and shows a "Copied" confirmation.
+
+##### Import
+
+```js
+import { Clipboard } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const [copyCount, setCopyCount] = useState(0);
+
+return (
+  <Clipboard
+    text="https://blixify.co"
+    onCopy={(text) => {
+      setCopyCount((prev) => prev + 1);
+      console.log("Copied:", text);
+    }}
+  />
+);
+```
+
+##### Required props
+
+| Name     | Type                     | Description                                          |
+| -------- | ------------------------ | ---------------------------------------------------- |
+| `text`   | `string`                 | The text to display and copy to clipboard            |
+| `onCopy` | `(text: string) => void` | Callback function called when copy button is clicked |

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

@@ -0,0 +1,32 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { Clipboard } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Clipboard", () => {
+  const [copyCount, setCopyCount] = useState(0);
+  const [copiedText, setCopiedText] = useState("");
+  return (
+    <div>
+      <Clipboard
+        text="https://blixify.co"
+        onCopy={(text) => {
+          setCopyCount((prev) => copyCount + 1);
+          setCopiedText(text);
+        }}
+      />
+      <div className="mt-5 text-sm">
+        <p>Copied: {copyCount} times</p>
+        <p>Copied text: {copiedText}</p>
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,61 @@
+# Detail List
+
+<!-- STORY -->
+
+<hr>
+
+Detail List to display content
+
+##### Import
+
+```js
+import { DetailList } from "blixify-ui-web/components/display/detailList";
+```
+
+##### Usage
+
+```jsx
+  <DetailList
+    title="User Details"
+    list={[
+      { title: "User Name", text: "Tom Holland" },
+      { title: "Age", text: "26 ages" },
+    ]}
+  />
+  <DetailList
+    className="mt-5"
+    title="Applicant Information"
+    description="Personal details and application."
+    list={[
+      { title: "Full name", text: "Margot Foster" },
+      { title: "Application for", text: "Backend Developer" },
+    ]}
+  />
+```
+
+##### Required props
+
+| Name    | Type                | Description |
+| ------- | ------------------- | ----------- |
+| `title` | `string`            |             |
+| `list`  | `Detail List Class` | Class       |
+
+##### Optional props
+
+| Name                  | Type                                             | Description                                              |
+| --------------------- | ------------------------------------------------ | -------------------------------------------------------- |
+| `addTitleElement`     | `ReactElement`                                   | Additional react elemnt to be displayed next to title    |
+| `description`         | `string`                                         |                                                          |
+| `className`           | `tailwind class`                                 |                                                          |
+| `model`               | `Model Data Structure`                           | Only used in Data Template                               |
+| `hideModal`           | `boolean`                                        | Only used in Data Template                               |
+| `referenceModel`      | `Model Data Structure`                           | Only used in Data Template                               |
+| `splitView`           | `boolean`                                        | Able to split into two                                   |
+| `handleReferenceLink` | `(dataId: string, collectionId: string) => void` | Only used in Data Template, when reference being clicked |
+
+##### Detail List class
+
+| Name    | Type     | Description |
+| ------- | -------- | ----------- |
+| `title` | `string` |             |
+| `text`  | `any`    |             |

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

@@ -0,0 +1,131 @@
+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,
+  },
+});
+
+stories.add("Detail List", () => {
+  return (
+    <>
+      <DetailList
+        title="User Details"
+        addTitleElement={
+          <Tag
+            tagText="Verified"
+            size="small"
+            variant="flatOutline"
+            rounded="md"
+          />
+        }
+        list={[
+          { title: "User Name", text: "Tom Holland" },
+          { title: "Age", text: "26 ages" },
+        ]}
+        splitView={true}
+      />
+      <DetailList
+        className="mt-5"
+        title="Applicant Information"
+        description="Personal details and application."
+        list={[
+          { title: "Full name", text: "Margot Foster" },
+          { title: "Application for", text: "Backend Developer" },
+        ]}
+      />
+      <DetailList
+        className="mt-5"
+        title="Data Template"
+        description="Data Template Example"
+        darkMode={true}
+        list={[
+          { title: "Full name", text: "Margot Foster" },
+          {
+            title: "Image",
+            text: (
+              <img
+                src="https://arusoil.com/static/oil_collection_drum-ddf6f26e6fbb1bc058bffb0faa722f51.webp"
+                alt=""
+              />
+            ),
+          },
+          {
+            title: "Address",
+            text: { lat: 5, lng: 6, address: "Penang" },
+          },
+        ]}
+        model={[
+          { id: "full_name", name: "Full name", type: "string" },
+          { id: "image", name: "Image", type: "image" },
+          {
+            id: "address",
+            name: "Address",
+            type: "reference",
+            referenceLabel: "address",
+          },
+        ]}
+        referenceModel={{
+          address: [
+            { id: "lat", name: "Lat", type: "number" },
+            { id: "lng", name: "Lng", type: "number" },
+            { id: "address", name: "Address", type: "string" },
+          ],
+        }}
+      />
+      <DetailList
+        className="mt-5"
+        title="Data Template"
+        description={"Data Template Example"}
+        darkMode={true}
+        list={[
+          { title: "Full name", text: "Margot Foster" },
+          {
+            title: "Image",
+            text: (
+              <img
+                src="https://arusoil.com/static/oil_collection_drum-ddf6f26e6fbb1bc058bffb0faa722f51.webp"
+                alt=""
+              />
+            ),
+          },
+          {
+            title: "Address",
+            text: { lat: 5, lng: 6, address: "Penang" },
+          },
+        ]}
+        model={[
+          { id: "full_name", name: "Full name", type: "string" },
+          { id: "image", name: "Image", type: "image" },
+          {
+            id: "address",
+            name: "Address",
+            type: "object",
+            objectData: [
+              {
+                id: "lat",
+                name: "Lat",
+                type: "number",
+              },
+              {
+                id: "lng",
+                name: "Lng",
+                type: "number",
+              },
+              {
+                id: "address",
+                name: "Address",
+                type: "string",
+              },
+            ],
+          },
+        ]}
+      />
+    </>
+  );
+});