blixify-ui-web-mcp 0.1.1

package/lib/components/input/uploadInput/README.md

@@ -0,0 +1,134 @@
+# Upload Input
+
+<!-- STORY -->
+
+<hr>
+
+A file upload component supporting single and multi-file modes with drag-and-drop, image compression, HEIC/HEIF auto-conversion, and a mobile-responsive layout.
+
+### Import
+
+```js
+import { UploadInput } from "blixify-ui-web/input/uploadInput";
+```
+
+### Usage — Single file
+
+```jsx
+const [file, setFile] = useState(undefined);
+
+<UploadInput
+  lib={{ axios }}
+  label="Profile Photo"
+  file={file}
+  accept=".png,.jpg,.jpeg,.heic,.heif"
+  compress={{ maxFileSize: 0.5, fileQuality: 0.8 }}
+  onChange={(e) => {
+    if (e.target.files.length > 0) setFile(e.target.files[0]);
+    else setFile(undefined);
+  }}
+/>;
+```
+
+### Usage — Multi file
+
+```jsx
+const [files, setFiles] = useState({ data: [], upload: [], remove: [] });
+
+<UploadInput
+  lib={{ axios }}
+  label="Gallery"
+  files={files}
+  type="multi"
+  onChange={({ value, action }) => {
+    if (action === "upload") {
+      setFiles((prev) => ({ ...prev, upload: [...prev.upload, ...value] }));
+    }
+    if (action === "remove") {
+      const inData = files.data.some((f) => f.token === value.token);
+      if (inData) {
+        setFiles((prev) => ({
+          ...prev,
+          data: prev.data.filter((f) => f.token !== value.token),
+          remove: [...prev.remove, value],
+        }));
+      } else {
+        setFiles((prev) => ({
+          ...prev,
+          upload: prev.upload.filter((f) => f.token !== value.token),
+        }));
+      }
+    }
+  }}
+/>;
+```
+
+### Validation via ref
+
+```jsx
+const ref = useRef(null);
+
+<UploadInput ref={ref} lib={{ axios }} label="Photo" file={file} onChange={...} />
+<Button text="Submit" onClick={() => ref.current?.handleSubmit()} />
+```
+
+`handleSubmit()` returns a `Promise<boolean>`. It validates that a file is present and that file sizes are within `maxFileSize`.
+
+### FilesObj
+
+Used for `type="multi"`. Manage three arrays to track state across save/delete operations.
+
+| Field    | Type        | Description                                       |
+| -------- | ----------- | ------------------------------------------------- |
+| `data`   | `FileObj[]` | Files already persisted (e.g. loaded from server) |
+| `upload` | `FileObj[]` | Newly added files pending upload                  |
+| `remove` | `FileObj[]` | Files marked for deletion                         |
+
+### FileObj
+
+| Field      | Type             | Description                                             |
+| ---------- | ---------------- | ------------------------------------------------------- |
+| `fileName` | `string \| File` | URL string (for `data`) or `File` object (for `upload`) |
+| `token`    | `string`         | Unique identifier (use `uuidv4()` for new uploads)      |
+
+### Required props
+
+| Name    | Type             | Description                           |
+| ------- | ---------------- | ------------------------------------- |
+| `label` | `string`         | Label displayed above the upload area |
+| `lib`   | `{ axios: any }` | Axios instance used for file download |
+
+### Optional props
+
+| Name                       | Type                                             | Default                                   | Description                                                                                                                                          |
+| -------------------------- | ------------------------------------------------ | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                       | `string`                                         | —                                         | HTML id for the file input                                                                                                                           |
+| `labelExtra`               | `ReactElement`                                   | —                                         | Extra element rendered inline with the label                                                                                                         |
+| `infoElement`              | `ReactElement`                                   | —                                         | Content shown in an InfoWindow tooltip next to the label                                                                                             |
+| `customElement`            | `ReactElement`                                   | —                                         | Custom element rendered to the right of the label row                                                                                                |
+| `optional`                 | `boolean`                                        | `false`                                   | Skips validation when `true`                                                                                                                         |
+| `type`                     | `"multi"`                                        | —                                         | Enables multi-file mode; omit for single-file mode                                                                                                   |
+| `file`                     | `File \| string \| any`                          | —                                         | Current file value (single mode)                                                                                                                     |
+| `files`                    | `FilesObj`                                       | —                                         | Current files state (multi mode)                                                                                                                     |
+| `accept`                   | `string`                                         | —                                         | Comma-separated accepted file extensions e.g. `".png,.jpg,.pdf"`                                                                                     |
+| `capture`                  | `"environment" \| "user"`                        | —                                         | Activates camera capture on mobile; disables drag-and-drop when set                                                                                  |
+| `fileDescription`          | `string`                                         | `"PNG, JPG, JPEG, HEIC, TIFF up to 30MB"` | Hint text shown below the dropzone                                                                                                                   |
+| `hidePreview`              | `boolean`                                        | `false`                                   | Shows a generic icon instead of image/file preview                                                                                                   |
+| `disabled`                 | `boolean`                                        | `false`                                   | Disables all upload interactions                                                                                                                     |
+| `maxFileSize`              | `number`                                         | `30`                                      | Max file size in MB for validation (via `handleSubmit`)                                                                                              |
+| `limit`                    | `number`                                         | —                                         | Max number of files shown in the preview grid (multi mode)                                                                                           |
+| `showModal`                | `boolean`                                        | `false`                                   | Opens a Camera / Gallery modal instead of a direct file picker                                                                                       |
+| `confirmOnRemove`          | `boolean`                                        | `false`                                   | Shows a confirmation modal before removing a file (multi mode)                                                                                       |
+| `noDuplicateFileName`      | `boolean`                                        | `false`                                   | Rejects files whose name already exists in `data` or `upload` (multi mode)                                                                           |
+| `compress`                 | `{ maxFileSize?: number; fileQuality?: number }` | —                                         | Compresses images before upload. `maxFileSize` in MB, `fileQuality` 0–1. PNG files cannot be compressed and will error if they exceed `maxFileSize`. |
+| `darkMode`                 | `boolean`                                        | `false`                                   | Applies dark colour scheme                                                                                                                           |
+| `mobileView`               | `boolean`                                        | `false`                                   | Renders a compact inline layout for mobile (label left, upload button right)                                                                         |
+| `className`                | `tailwind class`                                 | —                                         | Class applied to the outer container                                                                                                                 |
+| `onChange`                 | `(e: any) => void`                               | —                                         | Called on file add/remove. Single: `e.target.files`. Multi: `{ value, action }`                                                                      |
+| `handleCustomDownloadFile` | `(url: string) => void`                          | —                                         | Overrides the default axios download behaviour for image previews                                                                                    |
+
+### Notes
+
+- HEIC/HEIF files are automatically converted to JPEG before upload.
+- Drag-and-drop is disabled when `capture` or `showModal` is set.
+- `compress` only applies to image formats (JPG, JPEG, GIF, BMP, TIFF, HEIC, HEIF). PNG files are not compressible — if a PNG exceeds `compress.maxFileSize` an error is shown.

package/lib/components/input/uploadInput/uploadInput.stories.tsx

@@ -0,0 +1,193 @@
+import { storiesOf } from "@storybook/react";
+import axios from "axios";
+import React, { useRef, useState } from "react";
+import { UploadInput } from ".";
+import { StorySection } from "../../storyUtils";
+import README from "./README.md";
+
+const stories = storiesOf("Input", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const emptyFiles = { data: [], upload: [], remove: [] };
+
+const preloadedImages = {
+  data: [
+    {
+      fileName:
+        "https://images.pexels.com/photos/2338407/pexels-photo-2338407.jpeg?auto=compress&cs=tinysrgb&w=400",
+      token: "A",
+    },
+    {
+      fileName:
+        "https://images.pexels.com/photos/60616/fried-chicken-chicken-fried-crunchy-60616.jpeg?auto=compress&cs=tinysrgb&w=400",
+      token: "B",
+    },
+  ],
+  upload: [],
+  remove: [],
+};
+
+stories.add("UploadInput", () => {
+  const refSingle = useRef<any>(null);
+
+  const [singleFile, setSingleFile] = useState<any>(undefined);
+  const [singlePdf, setSinglePdf] = useState<any>(undefined);
+  const [multiImages, setMultiImages] = useState<any>({ ...preloadedImages });
+  const [multiPdfs, setMultiPdfs] = useState<any>({ ...emptyFiles });
+  const [noDupFiles, setNoDupFiles] = useState<any>({ ...emptyFiles });
+
+  const handleMultiChange =
+    (setter: React.Dispatch<React.SetStateAction<any>>) =>
+    ({ value, action }: { value: any; action: string }) => {
+      setter((prev: any) => {
+        if (action === "upload") {
+          return { ...prev, upload: [...prev.upload, ...value] };
+        }
+        if (action === "remove") {
+          const inData = prev.data.some((f: any) => f.token === value.token);
+          if (inData) {
+            return {
+              ...prev,
+              data: prev.data.filter((f: any) => f.token !== value.token),
+              remove: [...prev.remove, value],
+            };
+          }
+          return {
+            ...prev,
+            upload: prev.upload.filter((f: any) => f.token !== value.token),
+          };
+        }
+        return prev;
+      });
+    };
+
+  return (
+    <>
+      <StorySection
+        title="Single Image Upload"
+        description="Default single-file mode. Accepts PNG, JPG, JPEG, HEIC, HEIF. HEIC/HEIF files are auto-converted to JPEG. compress reduces file size before upload."
+      >
+        <div className="w-full max-w-sm">
+          <UploadInput
+            ref={refSingle}
+            lib={{ axios }}
+            label="Profile Photo"
+            file={singleFile}
+            accept=".png,.jpg,.jpeg,.heic,.heif"
+            compress={{ maxFileSize: 0.5, fileQuality: 0.8 }}
+            onChange={(e) => {
+              if (e.target.files.length > 0) setSingleFile(e.target.files[0]);
+              else setSingleFile(undefined);
+            }}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Single PDF Upload"
+        description="Restrict accepted files with accept='.pdf'. fileDescription overrides the default hint text."
+      >
+        <div className="w-full max-w-sm">
+          <UploadInput
+            lib={{ axios }}
+            label="Upload PDF"
+            file={singlePdf}
+            accept=".pdf"
+            fileDescription="PDF up to 10MB"
+            onChange={(e) => {
+              if (e.target.files.length > 0) setSinglePdf(e.target.files[0]);
+              else setSinglePdf(undefined);
+            }}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Multi Image Upload (with compress)"
+        description="type='multi' manages a FilesObj with data/upload/remove arrays. compress applies to each uploaded image."
+      >
+        <div className="w-full max-w-sm">
+          <UploadInput
+            lib={{ axios }}
+            label="Gallery"
+            files={multiImages}
+            type="multi"
+            accept=".png,.jpg,.jpeg,.heic,.heif"
+            compress={{ maxFileSize: 0.5, fileQuality: 0.8 }}
+            onChange={handleMultiChange(setMultiImages)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Multi PDF Upload"
+        description="Multi-file mode restricted to PDFs. fileDescription customises the hint below the dropzone."
+      >
+        <div className="w-full max-w-sm">
+          <UploadInput
+            lib={{ axios }}
+            label="Documents"
+            files={multiPdfs}
+            type="multi"
+            accept=".pdf"
+            fileDescription="PDF files up to 10MB each"
+            onChange={handleMultiChange(setMultiPdfs)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Disabled"
+        description="disabled=true prevents any file interaction. Existing files are still displayed."
+      >
+        <div className="w-full max-w-sm">
+          <UploadInput
+            lib={{ axios }}
+            label="Disabled Upload"
+            files={preloadedImages}
+            type="multi"
+            disabled={true}
+            onChange={() => {}}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Confirm on Remove"
+        description="confirmOnRemove=true shows a confirmation modal before removing a file from a multi upload."
+      >
+        <div className="w-full max-w-sm">
+          <UploadInput
+            lib={{ axios }}
+            label="With Removal Confirmation"
+            files={multiImages}
+            type="multi"
+            confirmOnRemove={true}
+            onChange={handleMultiChange(setMultiImages)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="No Duplicate File Names"
+        description="noDuplicateFileName=true rejects any file whose name already exists in data or upload arrays."
+      >
+        <div className="w-full max-w-sm">
+          <UploadInput
+            lib={{ axios }}
+            label="No Duplicates"
+            files={noDupFiles}
+            type="multi"
+            noDuplicateFileName={true}
+            onChange={handleMultiChange(setNoDupFiles)}
+          />
+        </div>
+      </StorySection>
+    </>
+  );
+});

package/lib/components/navigation/bars/README.md

@@ -0,0 +1,40 @@
+# Bars
+
+<!-- STORY -->
+
+<hr>
+
+Multiple bars selection for navigation
+
+##### Import
+
+```js
+import { Bars } from "blixify-ui-web/components/navigation/bars";
+```
+
+##### Usage
+
+```jsx
+<Bars bars={navigation} selectedId={"reports"} />
+```
+
+##### Required props
+
+| Name         | Type         | Description     |
+| ------------ | ------------ | --------------- |
+| `bars`       | `Bars Class` | Bar Class List  |
+| `selectedId` | `string`     | Selected Tab ID |
+
+##### Optional props
+
+| Name               | Type               | Default                                        | Description                                  |
+| ------------------ | ------------------ | ---------------------------------------------- | -------------------------------------------- |
+| `primaryColor`     | `boolean`          | `false`                                        |                                              |
+| `draggable`        | `boolean`          | `false`                                        | Make component items draggable               |
+| `collapse`         | `boolean`          | `false`                                        | Required when leftNav transition is not null |
+| `customColor`      | `string`           | `""`                                           | Rainbow color for bar                        |
+| `linkProps`        | `Link Props Class` | Refer to Link Component for more documentation |                                              |
+| `onClick`          | `function`         | `() => {}`                                     |                                              |
+| `handleChangeBars` | `function`         | `(value) => {setBars(value)}`                  | Required when draggable is true              |
+| `handleDropEnd`    | `function`         | `() => {}`                                     | Required when draggable is true              |
+| `horizontal`       | `boolean`          | `false`                                        | When `true`, display horizontal bar          |

package/lib/components/navigation/bars/bars.stories.tsx

@@ -0,0 +1,85 @@
+import {
+  CalendarIcon,
+  ChartBarIcon,
+  FolderIcon,
+  HomeIcon,
+  InboxIcon,
+  UsersIcon,
+} from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { Bars } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Navigation", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Bars", () => {
+  const [selectedId, setSelectedId] = useState("reports");
+  const [navigation, setNavigation] = useState([
+    {
+      id: "dashboard",
+      name: "Dashboard",
+      href: "#",
+      icon: HomeIcon,
+    },
+    { id: "team", name: "Team", href: "#", icon: UsersIcon, current: false },
+    {
+      id: "projects",
+      name: "Projects",
+      href: "#",
+      icon: FolderIcon,
+      groupId: "Activity",
+    },
+    {
+      id: "calendar",
+      name: "Calendar",
+      href: "#",
+      icon: CalendarIcon,
+      groupId: "Activity",
+    },
+    {
+      id: "documents",
+      name: "Documents",
+      href: "#",
+      icon: InboxIcon,
+    },
+    {
+      id: "reports",
+      name: "Reports",
+      href: "#",
+      icon: ChartBarIcon,
+    },
+  ]);
+
+  return (
+    <>
+      <Bars
+        bars={navigation}
+        selectedId={"reports"}
+        primaryColor={true}
+        horizontal={false}
+      />
+      <div className="bg-gray-900">
+        <Bars
+          draggable={true}
+          bars={navigation}
+          selectedId={selectedId}
+          primaryColor={true}
+          darkMode={true}
+          onClick={(id) => {
+            setSelectedId(id);
+          }}
+          handleChangeBars={setNavigation}
+          handleDropEnd={() => {}}
+          horizontal={true}
+        />
+      </div>
+    </>
+  );
+});

package/lib/components/navigation/bottomTab/README.md

@@ -0,0 +1,53 @@
+# Bottom Tab
+
+<!-- STORY -->
+
+<hr>
+
+BottomTab for mobile bottom tab navigation
+
+##### Import
+
+```js
+import { BottomTab } from "blixify-ui-web/components/navigation/BottomTab";
+```
+
+##### Usage
+
+```jsx
+const tabs = [
+  { icon: HomeIcon, title: "Home", href: "/home" },
+  { icon: SunIcon, title: "Device", href: "/device" },
+  {
+    icon: ChatBubbleOvalLeftEllipsisIcon,
+    title: "Feedback",
+    href: "/feedback",
+  },
+  { icon: UserGroupIcon, title: "Referral", href: "/referral" },
+];
+
+stories.add("BottomTab", () => {
+  return <BottomTab tabData={tabs} selectedTab="Home" />;
+});
+```
+
+##### Required props
+
+| Name          | Type           | Description                 |
+| ------------- | -------------- | --------------------------- |
+| `tabData`     | `TabSelection` | Tab Selection List          |
+| `selectedTab` | `string`       | The tab that being selected |
+
+##### Optional props
+
+| Name                  | Type             | Default | Description |
+| --------------------- | ---------------- | ------- | ----------- |
+| `bottomTabClassName?` | `tailwind class` | ""      |             |
+
+##### TabSelection props
+
+| Name    | Type     | Default | Description |
+| ------- | -------- | ------- | ----------- |
+| `icon`  | `any`    | ""      |             |
+| `title` | `string` | ""      |             |
+| `href`  | `string` | ""      |             |

package/lib/components/navigation/bottomTab/bottomTab.stories.tsx

@@ -0,0 +1,32 @@
+import {
+  ChatBubbleOvalLeftEllipsisIcon,
+  HomeIcon,
+  SunIcon,
+  UserGroupIcon,
+} from "@heroicons/react/24/solid";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { BottomTab } from ".";
+import README from "./README.md";
+const stories = storiesOf("Navigation", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const tabs = [
+  { icon: HomeIcon, title: "Home", href: "/home" },
+  { icon: SunIcon, title: "Device", href: "/device" },
+  {
+    icon: ChatBubbleOvalLeftEllipsisIcon,
+    title: "Feedback",
+    href: "/feedback",
+  },
+  { icon: UserGroupIcon, title: "Referral", href: "/referral" },
+];
+
+stories.add("BottomTab", () => {
+  return <BottomTab tabData={tabs} selectedTab="Home" />;
+});

package/lib/components/navigation/breadcrumb/README.md

@@ -0,0 +1,48 @@
+# Breadcrumb
+
+<!-- STORY -->
+
+<hr>
+
+Breadcrumb for selected item navigation
+
+##### Import
+
+```js
+import { Breadcrumb } from "blixify-ui-web/components/navigation/breadcrumb";
+```
+
+##### Usage
+
+```jsx
+const pages = [
+  { name: "Projects", href: "#", current: false },
+  { name: "Project Nero", href: "#", current: true },
+];
+
+stories.add("Breadcrumb", () => {
+  return <Breadcrumb pages={pages} />;
+});
+```
+
+##### Required props
+
+| Name    | Type              | Description     |
+| ------- | ----------------- | --------------- |
+| `pages` | `Page Class List` | Page Class List |
+
+##### Optional props
+
+| Name        | Type             | Default    | Description |
+| ----------- | ---------------- | ---------- | ----------- |
+| `className` | `tailwind class` | ""         |             |
+| `onClick`   | `function`       | `() => {}` |             |
+
+##### Page Class props
+
+| Name        | Type               | Default                                        | Description             |
+| ----------- | ------------------ | ---------------------------------------------- | ----------------------- |
+| `name`      | `string`           | ""                                             |                         |
+| `href`      | `string`           | ""                                             |                         |
+| `current`   | `boolean`          | false                                          | Whether page is current |
+| `linkProps` | `Link Props Class` | Refer to Link Component for more documentation |                         |

package/lib/components/navigation/breadcrumb/breadcrumb.stories.tsx

@@ -0,0 +1,27 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { Breadcrumb } from ".";
+import README from "./README.md";
+const stories = storiesOf("Navigation", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const pages = [
+  { name: "Projects", href: "#", current: false },
+  { name: "Project Nero", href: "#", current: true },
+];
+
+stories.add("Breadcrumb", () => {
+  return (
+    <>
+      <Breadcrumb pages={pages} />
+      <div className="bg-gray-900 py-2">
+        <Breadcrumb pages={pages} darkMode={true} />
+      </div>
+    </>
+  );
+});