blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,175 @@
+import { storiesOf } from "@storybook/react";
+import { useState } from "react";
+import { Stepper } from ".";
+import { Tag } from "../tag";
+import README from "./README.md";
+
+const stories = storiesOf("Display", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Stepper", () => {
+  const [stepIndex, setStepIndex] = useState(2);
+  const steps = [
+    {
+      title: "Create account",
+      description: "Vitae sed mi luctus laoreet.",
+    },
+    {
+      title: "Profile information",
+      description: "Cursus semper viverra facilisis et et some more.",
+    },
+    {
+      title: "Business information",
+      description: "Penatibus eu quis ante.",
+    },
+    {
+      title: "Theme",
+      description: "Faucibus nec enim leo et.",
+    },
+    {
+      title: "Preview",
+      description: "Iusto et officia maiores porro ad non quas.",
+      icon: (
+        <Tag tagText={stepIndex < 4 ? "Pending" : "In Progress"} size="small" />
+      ),
+    },
+  ];
+
+  const stepsWithSubSteps = [
+    {
+      title: "Create account",
+      description: "Vitae sed mi luctus laoreet.",
+      subSteps: [
+        {
+          title: "Verify email",
+          description: "Check your inbox",
+        },
+        {
+          title: "Set password",
+          description: "Choose a strong password",
+        },
+        {
+          title: "Verify email",
+          description: "Check your inbox",
+        },
+        {
+          title: "Set password",
+          description: "Choose a strong password",
+        },
+      ],
+    },
+    {
+      title: "Profile information",
+      description: "Cursus semper viverra facilisis et et some more.",
+      subSteps: [
+        {
+          title: "Personal details",
+          description: "Enter your name and contact",
+        },
+      ],
+    },
+    {
+      title: "Business information",
+      description: "Penatibus eu quis ante.",
+    },
+    {
+      title: "Theme",
+      description: "Faucibus nec enim leo et.",
+      subSteps: [
+        {
+          title: "Select colors",
+          description: "Choose your brand colors",
+        },
+        {
+          title: "Upload logo",
+          description: "Add your company logo",
+        },
+        {
+          title: "Preview theme",
+          description: "See how it looks",
+        },
+      ],
+    },
+    {
+      title: "Preview",
+      description: "Iusto et officia maiores porro ad non quas.",
+    },
+  ];
+  return (
+    <>
+      <div className="font-medium"> Vertical Stepper</div>
+      <Stepper
+        steps={steps}
+        className="mt-5"
+        stepIndex={stepIndex}
+        onChange={(index) => {
+          setStepIndex(index);
+        }}
+      />
+      <div className="bg-primary-700 my-4 p-4">
+        <div className="font-medium text-white">Dark Mode Vertical Stepper</div>
+        <Stepper
+          steps={steps}
+          className="mt-5"
+          stepIndex={stepIndex}
+          light={true}
+          onChange={(index) => {
+            setStepIndex(index);
+          }}
+        />
+      </div>
+
+      <div className="mt-5 font-medium"> Horizontal Stepper</div>
+      <Stepper
+        steps={steps}
+        className="mt-5"
+        horizontal={true}
+        stepIndex={stepIndex}
+        onChange={(index) => {
+          setStepIndex(index);
+        }}
+      />
+
+      <div className="mt-10 font-medium"> Vertical Stepper with Sub-steps</div>
+      <Stepper
+        steps={stepsWithSubSteps}
+        className="mt-5"
+        stepIndex={stepIndex}
+        onChange={(index) => {
+          setStepIndex(index);
+        }}
+      />
+
+      <div className="bg-primary-700 my-4 p-4">
+        <div className="font-medium text-white">
+          Dark Mode Vertical Stepper with Sub-steps
+        </div>
+        <Stepper
+          steps={stepsWithSubSteps}
+          className="mt-5"
+          stepIndex={stepIndex}
+          light={true}
+          onChange={(index) => {
+            setStepIndex(index);
+          }}
+        />
+      </div>
+
+      <div className="mt-5 font-medium"> Horizontal Stepper with Sub-steps</div>
+      <Stepper
+        steps={stepsWithSubSteps}
+        className="mt-5"
+        horizontal={true}
+        stepIndex={stepIndex}
+        onChange={(index) => {
+          setStepIndex(index);
+        }}
+      />
+    </>
+  );
+});

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

@@ -0,0 +1,176 @@
+# Table
+
+<!-- STORY -->
+
+<hr>
+
+A data table with pagination, checkboxes, grouped headers, dark mode, inline editing, and row-level add/delete support.
+
+##### Import
+
+```js
+import { Table, TableHeader } from "blixify-ui-web/display/table";
+```
+
+##### Usage
+
+Cursor pagination:
+
+```jsx
+const [pageIndex, setPageIndex] = useState(0);
+const [selectedIds, setSelectedIds] = useState<string[]>([]);
+const [selectAll, setSelectAll] = useState(false);
+
+<Table
+  header={[
+    { key: "id", title: "Id" },
+    { key: "name", title: "Name" },
+    { key: "age", title: "Age" },
+  ]}
+  data={data}
+  loading={false}
+  checkbox={true}
+  selectedIds={selectedIds}
+  selectAll={selectAll}
+  paginationType="cursor"
+  cursor={cursor}
+  limit={10}
+  pageIndex={pageIndex}
+  handleUpdatePageIndex={(value) => {
+    if (typeof value === "number") setPageIndex(value);
+    else setPageIndex((p) => value === "next" ? p + 1 : p - 1);
+  }}
+  handleSelectedIds={setSelectedIds}
+  handleSelectAll={setSelectAll}
+/>
+```
+
+Page pagination with grouped headers and dark mode:
+
+```jsx
+<Table
+  header={[
+    { key: "name", title: "Name" },
+    { key: "remarks", title: "Remarks", width: "w-96" },
+    {
+      key: "course",
+      title: "Courses",
+      groupData: [
+        { key: "english", title: "English Course", width: "w-96" },
+        { key: "math", title: "Math Course" },
+      ],
+    },
+  ]}
+  data={data}
+  loading={false}
+  paginationType="page"
+  size={data.length}
+  limit={10}
+  pageIndex={pageIndex}
+  darkMode={true}
+  darkModeBg="bg-slate-800"
+  disableEllipsisOnLongWord
+  handleUpdatePageIndex={handlePagination}
+/>
+```
+
+##### Required props
+
+| Name      | Type            | Description                                     |
+| --------- | --------------- | ----------------------------------------------- |
+| `header`  | `TableHeader[]` | Column definitions — see TableHeader below      |
+| `data`    | `object[]`      | Row data. Each object should have an `id` field |
+| `loading` | `boolean`       | Shows a loading state when `true`               |
+
+##### Optional props
+
+| Name                        | Type                                | Default | Description                                                                                                        |
+| --------------------------- | ----------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------ |
+| `checkbox`                  | `boolean`                           | `false` | Show a checkbox column for row selection                                                                           |
+| `singleSelect`              | `boolean`                           | —       | Restrict selection to one row at a time                                                                            |
+| `selectedIds`               | `string[]`                          | —       | Required when `checkbox` is `true`                                                                                 |
+| `selectAll`                 | `boolean`                           | `false` | Required when `checkbox` is `true`                                                                                 |
+| `selectAllText`             | `string`                            | —       | Text shown in the "select all pages" banner                                                                        |
+| `disableSelectFullData`     | `boolean`                           | `false` | Hides the "select all pages" option                                                                                |
+| `paginationType`            | `"cursor" \| "page"`                | —       | Enables pagination. `"cursor"` for token-based (e.g. Firestore), `"page"` for numbered pages                       |
+| `limit`                     | `number`                            | `10`    | Rows per page. Required when `paginationType` is set                                                               |
+| `pageIndex`                 | `number`                            | —       | Current page index (0-based). Required when `paginationType` is set                                                |
+| `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                                                               |
+| `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                                                                    |
+| `darkMode`                  | `boolean`                           | `false` | Switches the table to a dark theme                                                                                 |
+| `darkModeBg`                | `string`                            | —       | Tailwind bg class for the dark mode table background, e.g. `"bg-slate-800"`                                        |
+| `tableHeaderBgColor`        | `string`                            | —       | Tailwind bg class for the header row                                                                               |
+| `tableHeaderTextColor`      | `string`                            | —       | Tailwind text class for the header row                                                                             |
+| `newTabUrl`                 | `string`                            | —       | Prepends a link to each row. The row `id` is appended to this URL                                                  |
+| `addNewTabUrl`              | `string`                            | —       | URL appended to the add-row action link                                                                            |
+| `multiActionButton`         | `ReactElement`                      | —       | Extra action buttons shown in the toolbar when rows are selected                                                   |
+| `spaceData`                 | `any[]`                             | —       | Parsed space data for use with the Data Template module                                                            |
+| `devSettings`               | `DevSettings`                       | —       | Server/DB settings for the Data Template module                                                                    |
+| `bareSettings`              | `BareSettings`                      | —       | Bare settings variant for the Data Template module                                                                 |
+| `lib`                       | `{ axios?: any; firebase?: any }`   | —       | Pass `axios` (and optionally `firebase`) for data operations                                                       |
+| `addable`                   | `AddableProps`                      | —       | Enables an add-row form at the bottom of the table — see addable below                                             |
+| `editable`                  | `EditableProps`                     | —       | Enables inline cell editing on click — see editable below                                                          |
+| `deleteable`                | `DeleteableProps`                   | —       | Adds a delete button to each row — see deleteable below                                                            |
+| `advSettings`               | `AdvancedSettings`                  | —       | Enables drag-to-reorder columns, sort, and filter features                                                         |
+| `onClickRow`                | `(id: string) => void`              | —       | Called with the row id when a row is clicked                                                                       |
+| `handleUpdatePageIndex`     | `(value: string \| number) => void` | —       | Called with `"next"`, `"prev"`, or a page number when the user navigates                                           |
+| `handleSelectedIds`         | `(value: string[]) => void`         | —       | Called with the updated selection array when rows are checked                                                      |
+| `handleSelectAll`           | `(value: boolean) => void`          | —       | Called when the select-all checkbox is toggled                                                                     |
+
+##### TableHeader
+
+| Name        | Type                                               | Description                                                                         |
+| ----------- | -------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| `key`       | `string`                                           | Key in the row data object                                                          |
+| `title`     | `string`                                           | Column header label                                                                 |
+| `type`      | `DataType`                                         | Optional — Data Template type for rendering typed cells (text, date, address, etc.) |
+| `groupData` | `{ key: string; title: string; width?: string }[]` | Optional — renders sub-columns under this header                                    |
+| `width`     | `string`                                           | Optional — Tailwind width class for this column, e.g. `"w-96"`                      |
+
+##### addable
+
+Pass as `addable={{ active: true, onAddData: ... }}`.
+
+| Name        | Type                                     | Description                                        |
+| ----------- | ---------------------------------------- | -------------------------------------------------- |
+| `active`    | `boolean`                                | Renders an add-row form at the bottom of the table |
+| `onAddData` | `(data: { [key: string]: any }) => void` | Called with the new row data when submitted        |
+
+##### editable
+
+Pass as `editable={{ active: true, onUpdateData: ... }}`.
+
+| Name           | Type                                                            | Description                                    |
+| -------------- | --------------------------------------------------------------- | ---------------------------------------------- |
+| `active`       | `boolean`                                                       | Makes cells clickable for inline editing       |
+| `onUpdateData` | `(rowId: string, columnId: string, data: any) => Promise<void>` | Called when a cell edit is committed (on blur) |
+
+##### deleteable
+
+Pass as `deleteable={{ active: true, onDeleteData: ... }}`.
+
+| Name           | Type                      | Description                                   |
+| -------------- | ------------------------- | --------------------------------------------- |
+| `active`       | `boolean`                 | Adds a delete button to each row              |
+| `onDeleteData` | `(rowId: string) => void` | Called with the row id when delete is clicked |
+
+##### AdvancedSettings
+
+| Name                      | Type                                                                 | Description                                                   |
+| ------------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------- |
+| `dragEnabled`             | `boolean`                                                            | Allow columns to be reordered by drag-and-drop                |
+| `sortEnabled`             | `boolean`                                                            | Show sort controls on column headers                          |
+| `filterEnabled`           | `boolean`                                                            | Show filter controls on column headers                        |
+| `addColumnEnabled`        | `boolean`                                                            | Show an add-column button                                     |
+| `sortId`                  | `Sort`                                                               | Currently active sort                                         |
+| `sortOptions`             | `Option[]`                                                           | Options for the sort dropdown                                 |
+| `filterOptions`           | `Option[]`                                                           | Options for the filter dropdown                               |
+| `renderFilterElements`    | `(id: string) => any`                                                | Custom filter UI for a given column id                        |
+| `renderAddColumnElements` | `(id: string, onClose: any) => any`                                  | Custom add-column UI                                          |
+| `onDragColumn`            | `(dragId: string, dropId: string, newHeader: TableHeader[]) => void` | Called after a column is dropped with the updated header list |
+| `onSortColumn`            | `(sort: Sort) => void`                                               | Called when a sort is applied                                 |

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

@@ -0,0 +1,330 @@
+import { storiesOf } from "@storybook/react";
+import moment from "moment";
+import React, { useState } from "react";
+import { Table, TableHeader } from ".";
+import { StorySection } from "../../storyUtils";
+import README from "./README.md";
+
+const stories = storiesOf("Display", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const data = [
+  {
+    id: "1",
+    name: "Andrew",
+    age: 10,
+    gender: "Male",
+    address: { lng: 0, lat: 0, name: "Gopeng" },
+    updatedAt: moment().toDate(),
+    course: {
+      english: "Immediate English class",
+      math: "Additional Mathematics",
+    },
+    remarks:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus ultricies ipsum id posuere.",
+  },
+  {
+    id: "2",
+    name: "David",
+    age: 10,
+    gender: "Male",
+    address: { lng: 0, lat: 0, name: "Melaka" },
+    updatedAt: moment().toDate(),
+    course: {
+      english: "Immediate English class (Lorem ipsum dolor sit amet)",
+      math: "Additional Mathematics",
+    },
+    remarks:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus ultricies ipsum id posuere.",
+  },
+  {
+    id: "3",
+    name: "Celine",
+    age: 12,
+    gender: "Female",
+    address: { lng: 0, lat: 0, name: "Johor" },
+    updatedAt: moment().toDate(),
+    remarks:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus ultricies ipsum id posuere.",
+  },
+];
+
+const basicHeader: TableHeader[] = [
+  { key: "id", title: "Id" },
+  { key: "name", title: "Name" },
+  { key: "age", title: "Age" },
+  { key: "gender", title: "Gender" },
+  { key: "address", title: "Address" },
+  { key: "updatedAt", title: "Updated At" },
+];
+
+const fullHeader: TableHeader[] = [
+  ...basicHeader,
+  { key: "remarks", title: "Remarks", width: "w-96" },
+  {
+    key: "course",
+    title: "Courses",
+    groupData: [
+      { key: "english", title: "English Course", width: "w-96" },
+      { key: "math", title: "Math Course" },
+    ],
+  },
+];
+
+stories.add("Table", () => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [selectAll, setSelectAll] = useState(false);
+  const limit = 10;
+  const cursor = "available";
+
+  const handlePagination = (value: string | number) => {
+    if (typeof value === "number") {
+      setPageIndex(value);
+    } else {
+      setPageIndex((prev) => (value === "next" ? prev + 1 : prev - 1));
+    }
+  };
+
+  return (
+    <>
+      <StorySection
+        title="Cursor Pagination"
+        description="Use paginationType='cursor' when paginating via a cursor token (e.g. Firestore). Pass cursor='available' while more data exists, or '' when the last page is reached. Requires pageIndex, limit, and handleUpdatePageIndex."
+      >
+        <div className="w-full">
+          <Table
+            header={basicHeader}
+            data={data}
+            loading={false}
+            checkbox={true}
+            selectedIds={selectedIds}
+            selectAll={selectAll}
+            paginationType="cursor"
+            cursor={cursor}
+            limit={limit}
+            size={data.length}
+            pageIndex={pageIndex}
+            handleUpdatePageIndex={handlePagination}
+            handleSelectedIds={setSelectedIds}
+            handleSelectAll={setSelectAll}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Page Pagination"
+        description="Use paginationType='page' for numbered page navigation. Pass size (total record count) so the component can calculate the page count. Supports grouped column headers via groupData."
+      >
+        <div className="w-full">
+          <Table
+            header={fullHeader}
+            data={data}
+            loading={false}
+            checkbox={true}
+            selectedIds={selectedIds}
+            selectAll={selectAll}
+            paginationType="page"
+            size={data.length}
+            limit={limit}
+            pageIndex={pageIndex}
+            handleUpdatePageIndex={handlePagination}
+            handleSelectedIds={setSelectedIds}
+            handleSelectAll={setSelectAll}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Dark Mode"
+        description="Pass darkMode=true and darkModeBg to customise the table background. tableHeaderBgColor and tableHeaderTextColor override the header row colours."
+        dark
+      >
+        <div className="w-full">
+          <Table
+            header={fullHeader}
+            data={data}
+            loading={false}
+            checkbox={true}
+            selectedIds={selectedIds}
+            selectAll={selectAll}
+            paginationType="page"
+            size={data.length}
+            limit={limit}
+            pageIndex={pageIndex}
+            darkMode={true}
+            darkModeBg="bg-slate-800"
+            handleUpdatePageIndex={handlePagination}
+            handleSelectedIds={setSelectedIds}
+            handleSelectAll={setSelectAll}
+            disableEllipsisOnLongWord
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Single Select"
+        description="singleSelect=true restricts selection to one row at a time. The checkbox column still renders but only one id is held in selectedIds."
+      >
+        <div className="w-full">
+          <Table
+            header={basicHeader}
+            data={data}
+            loading={false}
+            checkbox={true}
+            singleSelect={true}
+            selectedIds={selectedIds}
+            selectAll={selectAll}
+            paginationType="page"
+            size={data.length}
+            limit={limit}
+            pageIndex={pageIndex}
+            handleUpdatePageIndex={handlePagination}
+            handleSelectedIds={setSelectedIds}
+            handleSelectAll={setSelectAll}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Grouped Column Headers"
+        description="Add groupData to a TableHeader to render sub-columns under a parent header. Each sub-column maps to a nested key in the row data object."
+      >
+        <div className="w-full">
+          <Table
+            header={[
+              { key: "name", title: "Name" },
+              { key: "gender", title: "Gender" },
+              {
+                key: "course",
+                title: "Courses",
+                groupData: [
+                  { key: "english", title: "English", width: "w-64" },
+                  { key: "math", title: "Math" },
+                ],
+              },
+            ]}
+            data={data}
+            loading={false}
+            paginationType="page"
+            size={data.length}
+            limit={limit}
+            pageIndex={pageIndex}
+            handleUpdatePageIndex={handlePagination}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Row Click + New Tab URL"
+        description="onClickRow fires with the row id when a row is clicked. newTabUrl prepends a link to each row — the row id is appended to the URL."
+      >
+        <div className="w-full">
+          <Table
+            header={basicHeader}
+            data={data}
+            loading={false}
+            paginationType="page"
+            size={data.length}
+            limit={limit}
+            pageIndex={pageIndex}
+            onClickRow={(id) => alert(`Clicked row: ${id}`)}
+            handleUpdatePageIndex={handlePagination}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Addable"
+        description="addable.active=true renders an add-row form at the bottom of the table. onAddData is called with the new row's data object when the user submits."
+      >
+        <div className="w-full">
+          <Table
+            header={basicHeader}
+            data={data}
+            loading={false}
+            paginationType="page"
+            size={data.length}
+            limit={limit}
+            pageIndex={pageIndex}
+            handleUpdatePageIndex={handlePagination}
+            addable={{
+              active: true,
+              onAddData: (newRow) =>
+                alert(`New row: ${JSON.stringify(newRow)}`),
+            }}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Editable"
+        description="editable.active=true makes cells clickable for inline editing. onUpdateData is called with (rowId, columnId, newValue) when the user commits a change."
+      >
+        <div className="w-full">
+          <Table
+            header={basicHeader}
+            data={data}
+            loading={false}
+            paginationType="page"
+            size={data.length}
+            limit={limit}
+            pageIndex={pageIndex}
+            handleUpdatePageIndex={handlePagination}
+            editable={{
+              active: true,
+              onUpdateData: async (rowId, columnId, value) => {
+                alert(`Update row ${rowId}, col ${columnId}: ${value}`);
+              },
+            }}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Deleteable"
+        description="deleteable.active=true adds a delete button to each row. onDeleteData is called with the row id when the user clicks delete."
+      >
+        <div className="w-full">
+          <Table
+            header={basicHeader}
+            data={data}
+            loading={false}
+            paginationType="page"
+            size={data.length}
+            limit={limit}
+            pageIndex={pageIndex}
+            handleUpdatePageIndex={handlePagination}
+            deleteable={{
+              active: true,
+              onDeleteData: (rowId) => alert(`Delete row: ${rowId}`),
+            }}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Loading State"
+        description="Pass loading=true to show a skeleton/loading indicator while data is being fetched."
+      >
+        <div className="w-full">
+          <Table
+            header={basicHeader}
+            data={[]}
+            loading={true}
+            paginationType="page"
+            size={0}
+            limit={limit}
+            pageIndex={0}
+            handleUpdatePageIndex={handlePagination}
+          />
+        </div>
+      </StorySection>
+    </>
+  );
+});