blixify-ui-web-mcp 0.1.2 → 0.1.18

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

@@ -1,17 +1,11 @@
 import { FolderPlusIcon, HomeIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { Option, Select } from ".";
 import { StorySection } from "../../storyUtils";
-import README from "./README.md";
 
-const stories = storiesOf("Input", module);
+const meta = { title: "Input/Select" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const genderOptions: Option[] = [
   {
@@ -56,7 +50,7 @@ const genderOptions: Option[] = [
   },
 ];
 
-stories.add("Select", () => {
+export const SelectStory = () => {
   const [value, setValue] = useState("");
   const [multiValue, setMultiValue] = useState<string[]>(["M"]);
   const [dbValue, setDBValue] = useState("");
@@ -283,4 +277,4 @@ stories.add("Select", () => {
       </StorySection>
     </>
   );
-});
+}

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

@@ -1,24 +1,18 @@
-import { storiesOf } from "@storybook/react";
 import React, { useRef, useState } from "react";
 import { Signature } from ".";
 import { Button } from "../../action/button";
 import { Modal } from "../../display/modal";
 import { Form } from "../form";
 import { StorySection } from "../../storyUtils";
-import README from "./README.md";
 
-const stories = storiesOf("Input", module);
+const meta = { title: "Input/Signature" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const sampleDataURL =
   "https://upload.wikimedia.org/wikipedia/commons/2/2d/Sample_SVG_file%2C_signature.svg";
 
-stories.add("Signature", () => {
+export const SignatureStory = () => {
   const signatureRef = useRef<any>(null);
   const modalSignatureRef = useRef<any>(null);
   const modalFormRef = useRef<any>(null);
@@ -185,4 +179,4 @@ stories.add("Signature", () => {
       </StorySection>
     </>
   );
-});
+}

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

@@ -1,17 +1,11 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { TextArea } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Input", module);
+const meta = { title: "Input/TextArea" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("TextArea", () => {
+export const TextAreaStory = () => {
   const [value, setValue] = useState("");
 
   return (
@@ -27,4 +21,4 @@ stories.add("TextArea", () => {
       }}
     />
   );
-});
+}

package/lib/components/input/textInput/textinput.stories.tsx

@@ -1,19 +1,13 @@
-import { storiesOf } from "@storybook/react";
 import React, { useRef, useState } from "react";
 import { TextInput } from ".";
 import { Button } from "../../action/button";
 import { StorySection } from "../../storyUtils";
-import README from "./README.md";
 
-const stories = storiesOf("Input", module);
+const meta = { title: "Input/TextInput" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("TextInput", () => {
+export const TextInputStory = () => {
   const refEmail = useRef<any>(null);
   const refPassword = useRef<any>(null);
   const refNumber = useRef<any>(null);
@@ -228,4 +222,4 @@ stories.add("TextInput", () => {
       </StorySection>
     </>
   );
-});
+}

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

@@ -1,17 +1,10 @@
-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 meta = { title: "Input/UploadInput" };
+export default meta;
 
 const emptyFiles = { data: [], upload: [], remove: [] };
 
@@ -32,7 +25,7 @@ const preloadedImages = {
   remove: [],
 };
 
-stories.add("UploadInput", () => {
+export const UploadInputStory = () => {
   const refSingle = useRef<any>(null);
 
   const [singleFile, setSingleFile] = useState<any>(undefined);
@@ -40,6 +33,46 @@ stories.add("UploadInput", () => {
   const [multiImages, setMultiImages] = useState<any>({ ...preloadedImages });
   const [multiPdfs, setMultiPdfs] = useState<any>({ ...emptyFiles });
   const [noDupFiles, setNoDupFiles] = useState<any>({ ...emptyFiles });
+  const [compactFiles, setCompactFiles] = useState<any>({ ...preloadedImages });
+  const [tagFiles, setTagFiles] = useState<any>({
+    data: [
+      {
+        fileName:
+          "https://images.pexels.com/photos/2338407/pexels-photo-2338407.jpeg?auto=compress&cs=tinysrgb&w=400",
+        token: "TAG-A",
+        tags: ["Before"],
+        description: "Front entrance before repair",
+      },
+      {
+        fileName:
+          "https://images.pexels.com/photos/60616/fried-chicken-chicken-fried-crunchy-60616.jpeg?auto=compress&cs=tinysrgb&w=400",
+        token: "TAG-B",
+        tags: ["After"],
+      },
+    ],
+    upload: [],
+    remove: [],
+  });
+
+  const [tagToggleFiles, setTagToggleFiles] = useState<any>({
+    data: [
+      {
+        fileName:
+          "https://images.pexels.com/photos/2338407/pexels-photo-2338407.jpeg?auto=compress&cs=tinysrgb&w=400",
+        token: "TOGGLE-A",
+        tags: ["Before"],
+        description: "Front entrance before repair",
+      },
+      {
+        fileName:
+          "https://images.pexels.com/photos/60616/fried-chicken-chicken-fried-crunchy-60616.jpeg?auto=compress&cs=tinysrgb&w=400",
+        token: "TOGGLE-B",
+        tags: ["After"],
+      },
+    ],
+    upload: [],
+    remove: [],
+  });
 
   const handleMultiChange =
     (setter: React.Dispatch<React.SetStateAction<any>>) =>
@@ -62,6 +95,9 @@ stories.add("UploadInput", () => {
             upload: prev.upload.filter((f: any) => f.token !== value.token),
           };
         }
+        if (action === "tagEdit") {
+          return { ...prev, data: value.data, upload: value.upload };
+        }
         return prev;
       });
     };
@@ -188,6 +224,94 @@ stories.add("UploadInput", () => {
           />
         </div>
       </StorySection>
+
+      <StorySection
+        title="Per-File Tag & Description Editing (Toggle Mode)"
+        description="imageTagToggleMode=true shows an eye/eye-slash icon on each thumbnail. Click to instantly hide or show that image's preview."
+      >
+        <div className="w-full max-w-sm">
+          <UploadInput
+            lib={{ axios }}
+            label="Tagged Photos (Toggle)"
+            files={tagToggleFiles}
+            type="multi"
+            accept=".png,.jpg,.jpeg,.heic,.heif"
+            imageTagToggleMode={true}
+            onChange={handleMultiChange(setTagToggleFiles)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Per-File Tag & Description Editing"
+        description="imageTagEdit=true shows a pencil icon on each thumbnail. Click it to open a modal with tag selection and description input. imageTagOptions defines predefined tags, imageTagNewOption=true allows custom tags."
+      >
+        <div className="w-full max-w-sm">
+          <UploadInput
+            lib={{ axios }}
+            label="Tagged Photos"
+            files={tagFiles}
+            type="multi"
+            accept=".png,.jpg,.jpeg,.heic,.heif"
+            imageTagEdit={true}
+            imageTagOptions={["Before", "After", "Damage", "Repair", "Invoice"]}
+            imageTagNewOption={true}
+            onChange={handleMultiChange(setTagFiles)}
+          />
+        </div>
+      </StorySection>
+      <StorySection
+        title="Compact Mode"
+        description="compact=true removes the dashed border box, dropzone overlay, label, and file description. Thumbnails shrink to 56×56px. Designed for tight spaces like FlexTable cells. Supports all the same remove / tag-edit / eye-toggle features as the standard mode."
+      >
+        <div className="w-72 border border-gray-200 rounded p-3">
+          <p className="text-xs text-gray-500 mb-2">
+            Inside a table cell (w-72 simulated)
+          </p>
+          <UploadInput
+            lib={{ axios }}
+            label=""
+            files={compactFiles}
+            type="multi"
+            accept=".png,.jpg,.jpeg,.heic,.heif"
+            compact={true}
+            onChange={handleMultiChange(setCompactFiles)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Compact Mode (Disabled)"
+        description="disabled=true in compact mode hides the upload trigger and shows — when empty."
+      >
+        <div className="w-72 border border-gray-200 rounded p-3">
+          <UploadInput
+            lib={{ axios }}
+            label=""
+            files={preloadedImages}
+            type="multi"
+            compact={true}
+            disabled={true}
+            onChange={() => {}}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Compact Mode (Empty)"
+        description="compact=true with no files shows an Upload link."
+      >
+        <div className="w-72 border border-gray-200 rounded p-3">
+          <UploadInput
+            lib={{ axios }}
+            label=""
+            files={emptyFiles}
+            type="multi"
+            compact={true}
+            onChange={() => {}}
+          />
+        </div>
+      </StorySection>
     </>
   );
-});
+};

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

@@ -4,7 +4,7 @@
 
 <hr>
 
-Multiple bars selection for navigation
+A flexible navigation bar component that supports vertical and horizontal layouts, grouped collapsible items, drag-to-reorder, custom colors, and dark mode.
 
 ##### Import
 
@@ -14,27 +14,100 @@ import { Bars } from "blixify-ui-web/components/navigation/bars";
 
 ##### Usage
 
+Basic vertical nav:
+
+```jsx
+<Bars
+  bars={navigation}
+  selectedId="reports"
+  primaryColor={true}
+  onClick={(id) => setSelectedId(id)}
+/>
+```
+
+Horizontal nav bar:
+
+```jsx
+<Bars
+  bars={navigation}
+  selectedId={selectedId}
+  primaryColor={true}
+  horizontal={true}
+  onClick={(id) => setSelectedId(id)}
+/>
+```
+
+Grouped items (collapsible via Disclosure):
+
+```jsx
+const navigation = [
+  { id: "dashboard", name: "Dashboard", href: "#", icon: HomeIcon },
+  {
+    id: "projects",
+    name: "Projects",
+    href: "#",
+    icon: FolderIcon,
+    groupId: "Activity",
+  },
+  {
+    id: "calendar",
+    name: "Calendar",
+    href: "#",
+    icon: CalendarIcon,
+    groupId: "Activity",
+  },
+];
+
+<Bars
+  bars={navigation}
+  selectedId={selectedId}
+  onClick={(id) => setSelectedId(id)}
+/>;
+```
+
+Draggable with reorder callbacks:
+
 ```jsx
-<Bars bars={navigation} selectedId={"reports"} />
+<Bars
+  bars={navigation}
+  selectedId={selectedId}
+  draggable={true}
+  onClick={(id) => setSelectedId(id)}
+  handleChangeBars={(value) => setNavigation(value)}
+  handleDropEnd={() => {}}
+/>
 ```
 
 ##### Required props
 
-| Name         | Type         | Description     |
-| ------------ | ------------ | --------------- |
-| `bars`       | `Bars Class` | Bar Class List  |
-| `selectedId` | `string`     | Selected Tab ID |
+| Name         | Type     | Description                                      |
+| ------------ | -------- | ------------------------------------------------ |
+| `bars`       | `Bar[]`  | Ordered list of navigation items — see Bar below |
+| `selectedId` | `string` | The `id` of the currently active item            |
 
 ##### 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          |
+| Name               | Type                                                                         | Default | Description                                                                                         |
+| ------------------ | ---------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `onClick`          | `(id: string) => void`                                                       | —       | When provided, items render as clickable divs instead of links. Called with the item's `id`.        |
+| `primaryColor`     | `boolean`                                                                    | `false` | Highlights the selected item and hover state with the primary brand color.                          |
+| `customColor`      | `"red" \| "orange" \| "yellow" \| "green" \| "blue" \| "indigo" \| "violet"` | —       | Overrides the highlight color for selected and hovered items. Takes precedence over `primaryColor`. |
+| `horizontal`       | `boolean`                                                                    | `false` | Lays items out in a row instead of a column. Useful for top navigation bars.                        |
+| `darkMode`         | `boolean`                                                                    | `false` | Switches item text to white for use on dark backgrounds.                                            |
+| `draggable`        | `boolean`                                                                    | `false` | Makes items reorderable via drag-and-drop. Requires `handleChangeBars` and `handleDropEnd`.         |
+| `handleChangeBars` | `(value: Bar[]) => void`                                                     | —       | Called with the updated bars array after each drag move. Required when `draggable` is `true`.       |
+| `handleDropEnd`    | `() => void`                                                                 | —       | Called when a drag interaction ends. Required when `draggable` is `true`.                           |
+| `collapse`         | `boolean`                                                                    | `false` | Hides item labels and shows only icons. Used when the parent `LeftNav` is in collapsed state.       |
+| `linkType`         | `"react" \| "gatsby" \| "next" \| "external" \| "default"`                   | —       | Router adapter for link rendering when `onClick` is not provided.                                   |
+| `custom`           | `any`                                                                        | —       | The custom link component to use when `linkType` is `"react"`, `"gatsby"`, or `"next"`.             |
+
+##### Bar
+
+| Name             | Type           | Description                                                                                                 |
+| ---------------- | -------------- | ----------------------------------------------------------------------------------------------------------- |
+| `id`             | `string`       | Unique identifier for the item                                                                              |
+| `name`           | `string`       | Display label                                                                                               |
+| `href`           | `string`       | URL used when `onClick` is not provided                                                                     |
+| `icon`           | `any`          | Heroicon or any SVG component rendered to the left of the label                                             |
+| `groupId`        | `string`       | Optional — items sharing the same `groupId` are nested under a collapsible Disclosure group with that label |
+| `additionalIcon` | `ReactElement` | Optional — extra icon/element rendered to the right of the item label                                       |

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

@@ -6,80 +6,148 @@ import {
   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";
+import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Navigation", module);
+const meta = { title: "Navigation/Bars" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
+
+const baseNavigation = [
+  { id: "dashboard", name: "Dashboard", href: "#", icon: HomeIcon },
+  { id: "team", name: "Team", href: "#", icon: UsersIcon },
+  { id: "documents", name: "Documents", href: "#", icon: InboxIcon },
+  { id: "reports", name: "Reports", href: "#", icon: ChartBarIcon },
+];
+
+const groupedNavigation = [
+  { id: "dashboard", name: "Dashboard", href: "#", icon: HomeIcon },
+  { id: "team", name: "Team", href: "#", icon: UsersIcon },
+  {
+    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 },
+];
 
-stories.add("Bars", () => {
+export const BarsStory = () => {
   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,
-    },
-  ]);
+  const [draggableBars, setDraggableBars] = useState(baseNavigation);
 
   return (
     <>
-      <Bars
-        bars={navigation}
-        selectedId={"reports"}
-        primaryColor={true}
-        horizontal={false}
-      />
-      <div className="bg-gray-900">
+      <StorySection
+        title="Default (Vertical)"
+        description="Basic vertical nav bar. Each item renders as a link using its href. primaryColor highlights the selected item with the primary brand color."
+      >
+        <div className="w-64">
+          <Bars
+            bars={baseNavigation}
+            selectedId="reports"
+            primaryColor={true}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="With onClick"
+        description="Pass onClick to handle selection programmatically instead of using href links. selectedId controls which item is highlighted."
+      >
+        <div className="w-64">
+          <Bars
+            bars={baseNavigation}
+            selectedId={selectedId}
+            primaryColor={true}
+            onClick={(id) => setSelectedId(id)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Grouped Items"
+        description="Items sharing the same groupId are nested under a collapsible Disclosure group labelled with that groupId string."
+      >
+        <div className="w-64">
+          <Bars
+            bars={groupedNavigation}
+            selectedId={selectedId}
+            primaryColor={true}
+            onClick={(id) => setSelectedId(id)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Draggable"
+        description="Set draggable=true and provide handleChangeBars to persist the new order. handleDropEnd fires when the drag interaction ends."
+      >
+        <div className="w-64">
+          <Bars
+            bars={draggableBars}
+            selectedId={selectedId}
+            primaryColor={true}
+            draggable={true}
+            onClick={(id) => setSelectedId(id)}
+            handleChangeBars={setDraggableBars}
+            handleDropEnd={() => {}}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Horizontal"
+        description="horizontal=true lays items out in a row. Useful for top navigation bars."
+      >
         <Bars
-          draggable={true}
-          bars={navigation}
+          bars={baseNavigation}
           selectedId={selectedId}
           primaryColor={true}
-          darkMode={true}
-          onClick={(id) => {
-            setSelectedId(id);
-          }}
-          handleChangeBars={setNavigation}
-          handleDropEnd={() => {}}
           horizontal={true}
+          onClick={(id) => setSelectedId(id)}
         />
-      </div>
+      </StorySection>
+
+      <StorySection
+        title="Custom Color"
+        description="customColor overrides the selected/hover highlight with a named color: red, orange, yellow, green, blue, indigo, or violet."
+      >
+        <div className="w-64">
+          <Bars
+            bars={baseNavigation}
+            selectedId={selectedId}
+            customColor="indigo"
+            onClick={(id) => setSelectedId(id)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Dark Mode"
+        description="Pass darkMode=true for use on dark backgrounds."
+        dark
+      >
+        <div className="w-64">
+          <Bars
+            bars={baseNavigation}
+            selectedId={selectedId}
+            primaryColor={true}
+            darkMode={true}
+            onClick={(id) => setSelectedId(id)}
+          />
+        </div>
+      </StorySection>
     </>
   );
-});
+}

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

@@ -4,17 +4,12 @@ import {
   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 meta = { title: "Navigation/BottomTab" };
+export default meta;
+
 
 const tabs = [
   { icon: HomeIcon, title: "Home", href: "/home" },
@@ -27,6 +22,6 @@ const tabs = [
   { icon: UserGroupIcon, title: "Referral", href: "/referral" },
 ];
 
-stories.add("BottomTab", () => {
+export const BottomTabStory = () => {
   return <BottomTab tabData={tabs} selectedTab="Home" />;
-});
+}