blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,74 @@
+# Drawer
+
+<!-- STORY -->
+
+<hr>
+
+Drawer Component
+
+##### Import
+
+```js
+import { Drawer } from "blixify-ui-web/components/display/drawer";
+```
+
+##### Usage
+
+```jsx
+return (
+  <div className="flex gap-x-3">
+    <Drawer
+      cta={
+        <div className="w-full flex justify-center">
+          <Button text="Bottom Drawer" type="normal" />
+        </div>
+      }
+      content={
+        <div className="grid grid-cols-2 gap-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <div key={i} className="h-48 w-full bg-gray-100 rounded-lg" />
+          ))}
+        </div>
+      }
+      maxHeight="50"
+      anchor="bottom"
+      title="This is drawer title"
+      desc="This is drawer description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+    />
+    <Drawer
+      cta={
+        <div className="w-full flex justify-center">
+          <Button text="Right Drawer" type="normal" />
+        </div>
+      }
+      content={
+        <div className="grid grid-cols-2 gap-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <div key={i} className="h-48 w-full bg-gray-100 rounded-lg" />
+          ))}
+        </div>
+      }
+      maxWidth="3xl"
+      title="This is drawer title"
+      desc="This is drawer description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+    />
+  </div>
+);
+```
+
+##### Required props
+
+| Name      | Type           | Description                                  |
+| --------- | -------------- | -------------------------------------------- |
+| `cta`     | `ReactElement` | The element that triggers the drawer to open |
+| `content` | `ReactElement` | The content to display inside the drawer     |
+
+##### Optional props
+
+| Name        | Type                                                                 | Default | Description                                                                                       |
+| ----------- | -------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------- |
+| `title`     | `string`                                                             | -       | The title displayed at the top of the drawer                                                      |
+| `desc`      | `string`                                                             | -       | The description text displayed below the title                                                    |
+| `anchor`    | `"bottom"`                                                           | -       | Position of the drawer. If "bottom", drawer slides in from bottom. Otherwise slides in from right |
+| `maxWidth`  | `"lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl"` | -       | Maximum width of the drawer (only applies when anchor is not "bottom")                            |
+| `maxHeight` | `"50" \| "75" \| "100"`                                              | -       | Maximum height of the drawer as viewport height percentage (only applies when anchor is "bottom") |

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

@@ -0,0 +1,66 @@
+import { storiesOf } from "@storybook/react";
+import { Drawer } from ".";
+import { Button } from "../../action/button";
+import README from "./README.md";
+
+const stories = storiesOf("Display", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Drawer", () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex gap-x-3">
+        <Drawer
+          cta={
+            <div className="w-full flex justify-center">
+              <Button text="Bottom Drawer" type="normal" />
+            </div>
+          }
+          content={
+            <div className="grid grid-cols-2 gap-4">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <div key={i} className="h-48 w-full bg-gray-100 rounded-lg" />
+              ))}
+            </div>
+          }
+          maxHeight="50"
+          anchor="bottom"
+          title="This is drawer title"
+          desc="This is drawer description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+        />
+        <Drawer
+          cta={
+            <div className="w-full flex justify-center">
+              <Button text="Right Drawer" type="normal" />
+            </div>
+          }
+          content={
+            <div className="grid grid-cols-2 gap-4">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <div key={i} className="h-48 w-full bg-gray-100 rounded-lg" />
+              ))}
+            </div>
+          }
+          maxWidth="3xl"
+          title="This is drawer title"
+          desc="This is drawer description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+        />
+      </div>
+      <div className="grid grid-cols-1 gap-4">
+        {Array.from({ length: 1 }).map((_, i) => (
+          <div key={i} className="h-48 w-full bg-gray-100 rounded-lg" />
+        ))}
+      </div>
+      <div className="grid grid-cols-3 gap-4">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="h-48 w-full bg-gray-100 rounded-lg" />
+        ))}
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,38 @@
+# Empty State
+
+<!-- STORY -->
+
+<hr>
+
+Empty State when there is no data to display
+
+##### Import
+
+```js
+import { EmptyState } from "blixify-ui-web/components/display/emptyState";
+```
+
+##### Usage
+
+```jsx
+return (
+  <EmptyState
+    text="There is no data to display"
+    icon={<InformationCircleIcon className="h-10 text-gray-600" />}
+  />
+);
+```
+
+##### Required props
+
+| Name   | Type            | Description |
+| ------ | --------------- | ----------- |
+| `text` | `string`        |             |
+| `icon` | `React Element` |             |
+
+##### Optional props
+
+| Name           | Type             | Default | Description |
+| -------------- | ---------------- | ------- | ----------- |
+| `className`    | `tailwind class` | ""      |             |
+| `callToAction` | `React Element`  | ""      |             |

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

@@ -0,0 +1,22 @@
+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);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Empty State", () => {
+  return (
+    <EmptyState
+      text="There is no data to display"
+      icon={<InformationCircleIcon className="h-10 text-gray-600" />}
+    />
+  );
+});

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

@@ -0,0 +1,80 @@
+# Feeds
+
+<!-- STORY -->
+
+<hr>
+
+Feeds to display timeline content
+
+##### Import
+
+```js
+import { Feeds } from "blixify-ui-web/components/display/feeds";
+```
+
+##### Usage
+
+```jsx
+const feeds: Feed[] = [
+  {
+    iconClass: "bg-gray-400",
+    iconType: <UserIcon className="h-5 w-5 text-white" />,
+    content: "Sign up a Free Account",
+    step: "Step 1",
+    addContent: (
+      <p className="mt-2 text-sm text-gray-500">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+    ),
+  },
+  {
+    iconClass: "bg-blue-500",
+    iconType: <HandThumbUpIcon className="h-5 w-5 text-white" />,
+    content: "Notify Arus Oil logistic team once you are ready to sell",
+    step: "Step 2",
+    addContent: (
+      <img
+        className="mt-4 w-36 sm:w-56 h-auto"
+        src="https://arusoil.com/static/oil_collection_drum-ddf6f26e6fbb1bc058bffb0faa722f51.webp"
+        alt=""
+      />
+    ),
+  },
+  {
+    iconClass: "bg-green-500",
+    iconType: <CheckIcon className="h-5 w-5 text-white" />,
+    content: "View payment made to you on Arus Oil App",
+    step: "Step 3",
+  },
+];
+
+return <Feeds content={feeds} />;
+```
+
+##### Required props
+
+| Name      | Type         | Description |
+| --------- | ------------ | ----------- |
+| `content` | `Feed Class` | Class       |
+
+##### Optional props
+
+| Name               | Type                      | Default | Description                                                      |
+| ------------------ | ------------------------- | ------- | ---------------------------------------------------------------- |
+| `bold`             | `boolean`                 | null    |                                                                  |
+| `darkMode`         | `boolean`                 | null    |                                                                  |
+| `collapsible`      | `boolean`                 | null    | Enables collapsible functionality for feed items with addContent |
+| `collapsedIds`     | `string[]`                | null    | Array of feed item IDs that are currently collapsed              |
+| `onChangeCollapse` | `(ids: string[]) => void` | null    | Callback function called when collapse state changes             |
+
+##### Feed class
+
+| Name         | Type             | Required | Description                                                    |
+| ------------ | ---------------- | -------- | -------------------------------------------------------------- |
+| `iconType`   | `React Element`  | Yes      |                                                                |
+| `iconClass`  | `tailwind class` | Yes      |                                                                |
+| `content`    | `string`         | Yes      |                                                                |
+| `step`       | `string`         | Yes      |                                                                |
+| `addContent` | `React Element`  | No       |                                                                |
+| `id`         | `string`         | No       | Unique identifier for the feed item (required for collapsible) |

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

@@ -0,0 +1,75 @@
+import {
+  CheckIcon,
+  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);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Feeds", () => {
+  const [collapsedIds, setCollapsedIds] = useState<string[]>(["1"]);
+
+  const feeds: Feed[] = [
+    {
+      id: "1",
+      iconClass: "bg-gray-400",
+      iconType: <UserIcon className="h-5 w-5 text-white" />,
+      content: "Sign up a Free Account",
+      step: "2025-12-01",
+      addContent: (
+        <p className="mt-2 text-sm text-gray-500">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl
+          tincidunt eget nullam non nisi est sit amet facilisis. Ut porttitor
+          leo a diam. Sem viverra aliquet eget sit. Eu facilisis sed odio morbi
+          quis commodo odio aenean sed. Id porta nibh venenatis cras sed felis
+          eget velit aliquet. Faucibus a pellentesque sit amet porttitor. Tortor
+          vitae purus faucibus ornare suspendisse sed nisi lacus sed. Platea
+          dictumst quisque sagittis purus sit amet. At consectetur lorem donec
+          massa sapien faucibus et molestie ac.
+        </p>
+      ),
+    },
+    {
+      id: "2",
+      iconClass: "bg-blue-500",
+      iconType: <HandThumbUpIcon className="h-5 w-5 text-white" />,
+      content: "Notify Arus Oil logistic team once you are ready to sell",
+      step: "2025-12-11",
+      addContent: (
+        <img
+          className="mt-4 w-36 sm:w-56 h-auto"
+          src="https://arusoil.com/static/oil_collection_drum-ddf6f26e6fbb1bc058bffb0faa722f51.webp"
+          alt=""
+        />
+      ),
+    },
+    {
+      id: "3",
+      iconClass: "bg-green-500",
+      iconType: <CheckIcon className="h-5 w-5 text-white" />,
+      content: "View payment made to you on Arus Oil App",
+      step: "2025-12-15",
+    },
+  ];
+
+  return (
+    <Feeds
+      bold={true}
+      content={feeds}
+      collapsible
+      collapsedIds={collapsedIds}
+      onChangeCollapse={(ids) => setCollapsedIds(ids)}
+    />
+  );
+});

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

@@ -0,0 +1,160 @@
+# FlexTable
+
+<!-- STORY -->
+
+<hr>
+
+A flexible table with category grouping, per-category subtotals, inline editing, computed math columns, and optional validation rules via `flexMathQueries`. Can be used standalone or inside a `Form` for validation.
+
+##### Import
+
+```js
+import {
+  FlexTable,
+  FlexTableItem,
+  FlexTableColumn,
+} from "blixify-ui-web/display/flexTable";
+```
+
+##### Usage
+
+Basic editable table:
+
+```jsx
+const [data, setData] = useState<FlexTableItem[]>([
+  { id: "1", title: "Investigator Salary", category: "Personnel", year1: 50000, year2: 52000 },
+  { id: "2", title: "Conference Travel", category: "Travel", year1: 5000, year2: 5500 },
+]);
+
+const columns: DataStructure[] = [
+  { id: "year1", name: "Year 1", type: "number" },
+  { id: "year2", name: "Year 2", type: "number" },
+];
+
+const categoryList = [
+  { title: "Personnel", description: "Staff salaries" },
+  { title: "Travel", description: "Travel expenses" },
+];
+
+<FlexTable
+  label="Research Budget"
+  data={data}
+  columns={columns}
+  categoryList={categoryList}
+  showGrandTotal={true}
+  onChangeData={setData}
+/>
+```
+
+With Form validation and flexMathQueries:
+
+```jsx
+const formRef = useRef(null);
+const tableRef = useRef(null);
+
+<Button text="Submit" onClick={() => formRef.current?.handleSubmit()} />
+<Form ref={formRef} refList={[tableRef]}>
+  <FlexTable
+    ref={tableRef}
+    label="Budget"
+    data={data}
+    columns={columns}
+    categoryList={categoryList}
+    flexMathQueries={[
+      { type: "categoryPercentage", targetCategory: "Travel", maxPercentage: 30 },
+    ]}
+    onChangeData={setData}
+  />
+</Form>
+```
+
+Math and list columns:
+
+```jsx
+const columns: DataStructure[] = [
+  { id: "year1", name: "Year 1", type: "number" },
+  { id: "mode", name: "Mode", type: "list", listSelection: ["A", "B"] },
+  {
+    id: "computed",
+    name: "Computed",
+    type: "math",
+    mathExpression: "mode == 'A' ? year1 * 2 : year1 * 3",
+  },
+];
+```
+
+##### Props
+
+| Name                   | Type                                             | Default         | Description                                                                                                            |
+| ---------------------- | ------------------------------------------------ | --------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `data`                 | `FlexTableItem[]`                                | `[]`            | Row data. Each item must have `id`, `title`, `category`, and any dynamic column keys                                   |
+| `columns`              | `DataStructure[]`                                | —               | Column definitions. Supports `type: "number"`, `"text"`, `"textarea"`, `"list"`, `"math"`                              |
+| `columnList`           | `string[]`                                       | —               | Legacy: additional predefined column keys to include                                                                   |
+| `categoryList`         | `Array<{ title: string; description?: string }>` | —               | Explicit category list with optional descriptions shown in a tooltip. If omitted, categories are derived from the data |
+| `label`                | `string`                                         | —               | Table heading shown above the table                                                                                    |
+| `labelExtra`           | `ReactElement`                                   | —               | Extra element rendered next to the label                                                                               |
+| `infoElement`          | `ReactElement`                                   | —               | Info element rendered in the table header area                                                                         |
+| `id`                   | `string`                                         | —               | Used when the component is registered as a form input ref                                                              |
+| `disabled`             | `boolean`                                        | `false`         | Removes all editing controls — no add/remove row, no cell editing, no add column                                       |
+| `showTotal`            | `boolean`                                        | `true`          | Show a subtotal row at the bottom of each category group                                                               |
+| `showGrandTotal`       | `boolean`                                        | `false`         | Show a grand total row summing all numeric columns across all categories                                               |
+| `hideCategory`         | `boolean`                                        | `false`         | Hide category grouping and render a flat list of rows                                                                  |
+| `maxRows`              | `number`                                         | —               | Maximum rows allowed per category. The add-row button is hidden once the limit is reached                              |
+| `defaultTitleTemplate` | `string`                                         | —               | Default title string pre-filled when a new row is added                                                                |
+| `flexMathQueries`      | `FlexMathQuery[]`                                | —               | Validation rules evaluated on form submit. See FlexMathQuery below                                                     |
+| `darkMode`             | `boolean`                                        | `false`         | Enable dark mode styling                                                                                               |
+| `darkModeBg`           | `string`                                         | `"bg-gray-900"` | Tailwind bg class for the dark mode background                                                                         |
+| `className`            | `string`                                         | —               | Additional Tailwind classes for the outer container                                                                    |
+| `onChangeData`         | `(data: FlexTableItem[]) => void`                | —               | Called whenever a cell value, row add, or row remove changes the data                                                  |
+| `onAddColumn`          | `(column: FlexTableColumn) => void`              | —               | Called when the user adds a new column via the add-column modal                                                        |
+| `onRemoveColumn`       | `(columnKey: string) => void`                    | —               | Called when the user removes a column                                                                                  |
+
+##### FlexTableItem
+
+| Property        | Type             | Description                         |
+| --------------- | ---------------- | ----------------------------------- |
+| `id`            | `string`         | Unique row identifier               |
+| `title`         | `string`         | Row label shown in the first column |
+| `category`      | `string \| null` | Category this row belongs to        |
+| `[key: string]` | `any`            | Dynamic values keyed by column `id` |
+
+##### 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       |
+
+##### FlexMathQuery
+
+Validation rules passed to `flexMathQueries`. Evaluated when the component is used inside a `Form` and `handleSubmit` is called.
+
+| Property          | Type                                         | Description                                                                       |
+| ----------------- | -------------------------------------------- | --------------------------------------------------------------------------------- |
+| `type`            | `"categoryPercentage" \| "columnPercentage"` | Validation rule type                                                              |
+| `targetCategory`  | `string`                                     | (`categoryPercentage` only) The category whose subtotal is checked                |
+| `maxPercentage`   | `number`                                     | Maximum allowed percentage (0–100)                                                |
+| `targetColumn`    | `string`                                     | (`columnPercentage` only) The column whose total is checked                       |
+| `subtotalColumns` | `string[]`                                   | (`columnPercentage` only) Columns whose totals are summed to form the denominator |
+
+> `categoryPercentage`: validates that `sum(targetCategory) / grandTotal <= maxPercentage / 100`
+>
+> `columnPercentage`: validates that `sum(targetColumn) / sum(subtotalColumns) <= maxPercentage / 100`
+
+##### Using with Form
+
+`FlexTable` implements the form input ref interface. Pass it as a ref in `refList` to include it in form validation:
+
+```jsx
+const formRef = useRef(null);
+const tableRef = useRef(null);
+
+<Form ref={formRef} refList={[tableRef]}>
+  <FlexTable ref={tableRef} ... flexMathQueries={[...]} />
+</Form>
+```
+
+Calling `formRef.current.handleSubmit()` will trigger `FlexTable.handleSubmit()`, which runs all `flexMathQueries` and blocks submission if any rule fails.