blixify-ui-web-mcp 0.1.2 → 0.1.3

package/lib/components/data/dataGraph/dataGraph.stories.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
-import { Container } from "../../structure/container";
+import { StorySection } from "../../storyUtils";
 import README from "./README.md";
 import { DataGraph } from "./index";
 
@@ -12,73 +12,92 @@ stories.addParameters({
   },
 });
 
+const workspace = {
+  apiEndpoint: "http://localhost:3000/api",
+  apiEndpointType: "mongoDB" as const,
+};
+
 stories.add("Data Graph", () => {
   return (
-    <Container bgColor="bg-white">
-      <DataGraph
-        charts={[
-          {
-            gridSize: 1,
-            type: "card",
-            title: "All Products",
-            description: "Related to ESH",
-            spaceId: "esh-products",
-            query: [],
-            queryBaseType: "count",
-          },
-          {
-            gridSize: 1,
-            type: "card",
-            title: "Price",
-            description: "Related to ESH",
-            spaceId: "esh-products",
-            query: [],
-            queryBaseType: "sum",
-            queryAttributeId: ["price"],
-          },
-          {
-            gridSize: 2,
-            type: "bar",
-            title: "Price per kg",
-            description: "Related to ESH",
-            spaceId: "esh-products",
-            query: [
-              { type: "=", queryId: "code", value: "P001" },
-              { type: "=", queryId: "code", value: "N001" },
-              { type: "=", queryId: "code", value: "A001" },
-            ],
-            queryBaseType: "sum",
-            queryAttributeId: ["price"],
-          },
-          // {
-          //   gridSize: 2,
-          //   type: "radar",
-          //   title: "Price per kg",
-          //   description: "Related to ESH",
-          //   spaceId: "meraque-order",
-          //   query: [
-          //     {
-          //       type: "=",
-          //       queryId: "status",
-          //       value: "Not Completed",
-          //     },
-          //     {
-          //       type: "=",
-          //       queryId: "status",
-          //       value: "Completed",
-          //     },
-          //   ],
-          //   queryBaseType: "sum",
-          //   queryAttributeId: ["cropSprayed", "areaSprayed", "pesticideUsed"],
-          //   queryBaseDateId: "startDate",
-          // },
-        ]}
-        workspace={{
-          apiEndpoint: "http://localhost:3000/api/data",
-          assetEndpoint:
-            "https://firebasestorage.googleapis.com/v0/b/esh-web-dev.appspot.com/o/",
-        }}
-      />
-    </Container>
+    <>
+      <StorySection
+        title="Card Charts"
+        description="type='card' renders a stat card. queryBaseType='count' counts records; 'sum' totals a numeric field specified in queryAttributeId. queryBaseDateId enables a date range picker on the card."
+      >
+        <div className="w-full">
+          <DataGraph
+            charts={[
+              {
+                gridSize: 1,
+                type: "card",
+                title: "Total Products",
+                description: "All products in catalogue",
+                spaceId: "esh-products",
+                query: [],
+                queryBaseType: "count",
+              },
+              {
+                gridSize: 1,
+                type: "card",
+                title: "Total Revenue",
+                description: "Sum of all order prices",
+                spaceId: "esh-products",
+                query: [],
+                queryBaseType: "sum",
+                queryAttributeId: ["price"],
+                queryBaseDateId: "createdAt",
+              },
+            ]}
+            workspace={workspace}
+            gridSize={2}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Mixed Dashboard"
+        description="Combine multiple chart types in one DataGraph. Each chart's gridSize controls how many columns it spans within the grid."
+      >
+        <div className="w-full">
+          <DataGraph
+            charts={[
+              {
+                gridSize: 1,
+                type: "card",
+                title: "All Products",
+                description: "Total product count",
+                spaceId: "esh-products",
+                query: [],
+                queryBaseType: "count",
+              },
+              {
+                gridSize: 1,
+                type: "card",
+                title: "Total Price",
+                description: "Sum of all prices",
+                spaceId: "esh-products",
+                query: [],
+                queryBaseType: "sum",
+                queryAttributeId: ["price"],
+              },
+              {
+                gridSize: 2,
+                type: "bar",
+                title: "Price per Code",
+                spaceId: "esh-products",
+                query: [
+                  { type: "=", queryId: "code", value: "P001" },
+                  { type: "=", queryId: "code", value: "N001" },
+                  { type: "=", queryId: "code", value: "A001" },
+                ],
+                queryBaseType: "sum",
+                queryAttributeId: ["price"],
+              },
+            ]}
+            workspace={workspace}
+          />
+        </div>
+      </StorySection>
+    </>
   );
 });

package/lib/components/data/dataReference/README.md

@@ -4,59 +4,157 @@
 
 <hr>
 
-Data Reference
+A searchable select input that fetches its options from a remote data source. Supports single (`reference`) and multi-select (`listReference`) modes, live search, query filtering, and sort.
 
 ##### Import
 
 ```js
 import { DataReference } from "blixify-ui-web/components/data/dataReference";
+```
+
+##### Usage
+
+Single reference select:
+
+```jsx
+const [value, setValue] = useState("");
+
+<DataReference
+  value={value}
+  schema={{
+    id: "salesSelected",
+    name: "Sales Person",
+    type: "reference",
+    referenceSpaceId: "salesNameList",
+    referenceLabel: "name",
+  }}
+  devSettings={{
+    apiEndpoint: "http://localhost:3000/api",
+    apiEndpointType: "mongoDB",
+  }}
+  lib={{ axios }}
+  onChange={(value) => setValue(value)}
+/>;
+```
+
+With query filter and sort:
 
-return (
-  <div className="p-4 rounded-md bg-zinc-700">
-    <DataReference
-      value={value}
-      schema={{
-        id: "title",
-        type: "reference",
-        name: "Reference",
-        referenceLabel: "title",
-        referenceSpaceId: "meraque-cycles",
-      }}
-      devSettings={{
-        apiEndpoint: "http://localhost:3000/api/data",
-        apiEndpointType: "mongoDB",
-        assetEndpoint:
-          "https://firebasestorage.googleapis.com/v0/b/esh-web-dev.appspot.com/o/",
-      }}
-      lib={{
-        axios: axios,
-      }}
-      onChange={(value) => {
-        setValue(value);
-      }}
-      darkMode
-      staticDropdown
-    />
-  </div>
-);
+```jsx
+<DataReference
+  value={value}
+  schema={{
+    id: "salesSelected",
+    name: "Sales Person",
+    type: "reference",
+    referenceSpaceId: "salesNameList",
+    referenceLabel: "name",
+    referenceQuery: [{ type: "=", value: "Sales", queryId: "role" }],
+    referenceSort: { sortId: "name", type: "asc" },
+  }}
+  devSettings={{
+    apiEndpoint: "http://localhost:3000/api",
+    apiEndpointType: "mondayServer",
+  }}
+  lib={{ axios }}
+  onChange={(value) => setValue(value)}
+/>
+```
+
+Multi-select (listReference):
+
+```jsx
+const [value, setValue] = useState([]);
+
+<DataReference
+  value={value}
+  schema={{
+    id: "assignees",
+    name: "Assignees",
+    type: "listReference",
+    referenceSpaceId: "members",
+    referenceLabel: "name",
+  }}
+  devSettings={{
+    apiEndpoint: "http://localhost:3000/api",
+    apiEndpointType: "mongoDB",
+  }}
+  lib={{ axios }}
+  onChange={(value) => setValue(value)}
+  closeOnClickOutside
+/>;
+```
+
+Dark mode with static dropdown:
+
+```jsx
+<div className="p-4 rounded-md bg-zinc-800">
+  <DataReference
+    value={value}
+    schema={{
+      id: "title",
+      name: "Reference",
+      type: "reference",
+      referenceSpaceId: "items",
+      referenceLabel: "title",
+    }}
+    devSettings={{
+      apiEndpoint: "http://localhost:3000/api",
+      apiEndpointType: "mongoDB",
+    }}
+    lib={{ axios }}
+    onChange={(value) => setValue(value)}
+    darkMode
+    staticDropdown
+  />
+</div>
 ```
 
 ##### Required props
 
-| Name   | Type            | Description                          |
-| ------ | --------------- | ------------------------------------ |
-| value  | `any`           | Value (string or an array of string) |
-| schema | `DataStructure` | Refer to DataStructure               |
+| Name     | Type            | Description                                                                 |
+| -------- | --------------- | --------------------------------------------------------------------------- |
+| `value`  | `any`           | Current value — a string for `reference`, or `string[]` for `listReference` |
+| `schema` | `DataStructure` | Column definition — see schema fields below                                 |
 
 ##### Optional props
 
-| Name                | Type                   | Description                                                                                                                            |
-| ------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| devSettings         | `WorkspaceDevSettings` | Refer WorkspaceDevSettings                                                                                                             |
-| onChange            | `(value: any) => void` | On change callback function                                                                                                            |
-| lib                 | `{ axios?: any}`       | Additional libraries                                                                                                                   |
-| optional            | `boolean`              |                                                                                                                                        |
-| darkMode            | `booelan`              |                                                                                                                                        |
-| staticDropdown      | `booelan`              | When `true`, the parent container's height will expand to fit this component.                                                          |
-| closeOnClickOutside | `booelan`              | When `true`, the option container will remain open and close when users clicks outside of the container. Only applies to multi select. |
-| subLabel            | `string`               | Sub Label text for better UI/UX Explanation for the select                                                                             |
+| Name                  | Type                   | Description                                                                                                          |
+| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `devSettings`         | `WorkspaceDevSettings` | API connection settings — see WorkspaceDevSettings below                                                             |
+| `lib`                 | `{ axios?: any }`      | Pass your axios instance for making API requests                                                                     |
+| `onChange`            | `(value: any) => void` | Called with the new value when the selection changes                                                                 |
+| `optional`            | `boolean`              | When `true`, skips validation on `handleSubmit`                                                                      |
+| `subLabel`            | `string`               | Secondary label rendered below the main label for additional context                                                 |
+| `darkMode`            | `boolean`              | Switches the select to a dark theme                                                                                  |
+| `staticDropdown`      | `boolean`              | When `true`, the parent container expands to fit the open dropdown instead of the dropdown overlapping content below |
+| `closeOnClickOutside` | `boolean`              | When `true`, the dropdown closes when the user clicks outside. Applies to `listReference` (multi-select) mode        |
+
+##### Schema fields (DataStructure)
+
+Only fields relevant to `DataReference` are listed. `type` must be `"reference"` or `"listReference"`.
+
+| Name                      | Type                             | Description                                                                         |
+| ------------------------- | -------------------------------- | ----------------------------------------------------------------------------------- |
+| `id`                      | `string`                         | Unique field identifier                                                             |
+| `name`                    | `string`                         | Label displayed above the select                                                    |
+| `type`                    | `"reference" \| "listReference"` | `"reference"` for single select, `"listReference"` for multi-select                 |
+| `referenceSpaceId`        | `string`                         | The collection/space ID to fetch options from                                       |
+| `referenceLabel`          | `string`                         | The field key in each fetched record to use as the option label                     |
+| `referenceSecondaryLabel` | `string`                         | Optional secondary label field shown below the primary label in each option         |
+| `referenceQuery`          | `Query[]`                        | Optional filter queries applied when fetching options                               |
+| `referenceSort`           | `Sort`                           | Optional sort applied when fetching options, e.g. `{ sortId: "name", type: "asc" }` |
+| `placeholder`             | `string`                         | Placeholder text shown when no value is selected                                    |
+| `disabled`                | `boolean`                        | Disables the select input                                                           |
+| `optional`                | `boolean`                        | Marks the field as optional in form validation                                      |
+
+##### WorkspaceDevSettings
+
+| Name               | Type                                                                       | Description                        |
+| ------------------ | -------------------------------------------------------------------------- | ---------------------------------- |
+| `apiEndpoint`      | `string`                                                                   | Base URL for the data API          |
+| `apiEndpointType`  | `"mongoDB" \| "firebase" \| "mongoServer" \| "fbServer" \| "mondayServer"` | The server/DB type driving the API |
+| `apiEndpointToken` | `string`                                                                   | Auth token for the API endpoint    |
+| `apiUserToken`     | `string`                                                                   | Per-user auth token                |
+| `assetEndpoint`    | `string`                                                                   | Base URL for asset/file storage    |
+| `assetType`        | `"firebase" \| "aws"`                                                      | Storage provider type              |
+| `assetBucket`      | `string`                                                                   | Storage bucket name                |

package/lib/components/data/dataReference/dataReference.stories.tsx

@@ -1,7 +1,8 @@
 import { storiesOf } from "@storybook/react";
 import axios from "axios";
-import { useState } from "react";
+import React, { useState } from "react";
 import { DataReference } from "../dataReference/index";
+import { StorySection } from "../../storyUtils";
 import README from "./README.md";
 
 const stories = storiesOf("Data", module);
@@ -12,42 +13,113 @@ stories.addParameters({
   },
 });
 
+const devSettings = {
+  apiEndpoint: "http://localhost:3000/api",
+  apiEndpointType: "mondayServer" as const,
+};
+
 stories.add("Data Reference", () => {
-  const [value, setValue] = useState("");
+  const [singleValue, setSingleValue] = useState("");
+  const [filteredValue, setFilteredValue] = useState("");
+  const [multiValue, setMultiValue] = useState<string[]>([]);
 
   return (
-    <div className="p-4 rounded-md bg-zinc-800">
-      <DataReference
-        value={value}
-        subLabel="Testing sublabel"
-        schema={{
-          id: "salesSelected",
-          name: "Referral Sales Person",
-          type: "reference",
-          referenceSpaceId: "nonAuthSalesNameList",
-          referenceLabel: "name",
-          referenceQuery: [
-            {
-              type: "=",
-              value: "Sales",
-              queryId: "dup__of_role__1",
-            },
-          ],
-          referenceSort: { sortId: "name", type: "asc" },
-        }}
-        devSettings={{
-          apiEndpoint: `http://localhost:3000/api`,
-          apiEndpointType: "mondayServer",
-        }}
-        lib={{
-          axios: axios,
-        }}
-        onChange={(value) => {
-          setValue(value);
-        }}
-        darkMode
-        staticDropdown
-      />
-    </div>
+    <>
+      <StorySection
+        title="Single Reference"
+        description="type='reference' renders a single-select. Options are fetched from the referenceSpaceId collection and labelled by referenceLabel."
+      >
+        <div className="w-80">
+          <DataReference
+            value={singleValue}
+            schema={{
+              id: "salesSelected",
+              name: "Sales Person",
+              type: "reference",
+              referenceSpaceId: "nonAuthSalesNameList",
+              referenceLabel: "name",
+            }}
+            devSettings={devSettings}
+            lib={{ axios }}
+            onChange={(value) => setSingleValue(value)}
+            staticDropdown
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="With Query Filter & Sort"
+        description="referenceQuery filters the fetched options server-side. referenceSort controls the order. subLabel adds a secondary hint below the field label."
+      >
+        <div className="w-80">
+          <DataReference
+            value={filteredValue}
+            schema={{
+              id: "filteredSales",
+              name: "Referral Sales Person",
+              type: "reference",
+              referenceSpaceId: "nonAuthSalesNameList",
+              referenceLabel: "name",
+              referenceQuery: [
+                { type: "=", value: "Sales", queryId: "dup__of_role__1" },
+              ],
+              referenceSort: { sortId: "name", type: "asc" },
+            }}
+            devSettings={devSettings}
+            lib={{ axios }}
+            onChange={(value) => setFilteredValue(value)}
+            subLabel="Only Sales role members are shown"
+            staticDropdown
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Multi-select (listReference)"
+        description="type='listReference' enables multi-select — value is a string array. closeOnClickOutside keeps the dropdown open until the user clicks away."
+      >
+        <div className="w-80">
+          <DataReference
+            value={multiValue}
+            schema={{
+              id: "assignees",
+              name: "Assignees",
+              type: "listReference",
+              referenceSpaceId: "nonAuthSalesNameList",
+              referenceLabel: "name",
+            }}
+            devSettings={devSettings}
+            lib={{ axios }}
+            onChange={(value) => setMultiValue(value)}
+            closeOnClickOutside
+            staticDropdown
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Dark Mode"
+        description="Pass darkMode=true for use on dark backgrounds."
+        dark
+      >
+        <div className="w-80">
+          <DataReference
+            value={singleValue}
+            schema={{
+              id: "darkSales",
+              name: "Sales Person",
+              type: "reference",
+              referenceSpaceId: "nonAuthSalesNameList",
+              referenceLabel: "name",
+            }}
+            devSettings={devSettings}
+            lib={{ axios }}
+            onChange={(value) => setSingleValue(value)}
+            darkMode
+            staticDropdown
+          />
+        </div>
+      </StorySection>
+    </>
   );
 });

package/lib/components/data/dataWrapper/README.md

@@ -397,7 +397,8 @@ bareSettings={{
           <span className="text-sm text-gray-500">{item.status}</span>
         </li>
       ))}
-    </ul>
+    </ul>,
+    viewSettings={{ listImage: "image" }} // Pass in image column ID (or just "image") for bareListComponent to replace the ddefault UI
   ),
 
   // Always-on filter applied to every list fetch (e.g. scope to current user)

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

@@ -98,7 +98,7 @@ Page pagination with grouped headers and dark mode:
 | `cursor`                    | `string \| Date`                    | `""`    | Pass a non-empty value while more pages exist; pass `""` on the last page. Required when `paginationType="cursor"` |
 | `size`                      | `number`                            | —       | Total record count. Required when `paginationType="page"` to calculate page count                                  |
 | `hidePagination`            | `boolean`                           | `false` | Hide the pagination bar                                                                                            |
-| `fixedPagination`           | `boolean`                           | —       | Fix the pagination bar to the bottom of the viewport                                                               |
+| `fixedPagination`           | `boolean`                           | —       | Fixes the pagination bar to the bottom of the viewport when the user scrolls past it                               |
 | `showId`                    | `boolean`                           | —       | Include the `id` field in rendered row data                                                                        |
 | `disableEllipsisOnLongWord` | `boolean`                           | —       | When `true`, long text wraps instead of being truncated with an ellipsis                                           |
 | `className`                 | `string`                            | —       | Tailwind classes applied to the outer container                                                                    |