blixify-ui-web-mcp 0.1.1

package/lib/components/advanced/collapse/collapse.stories.tsx

@@ -0,0 +1,165 @@
+import { ArrowsPointingOutIcon, MapIcon } from "@heroicons/react/24/solid";
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { Collapse } from ".";
+import { Stepper } from "../../display/stepper";
+import README from "./README.md";
+import { StorySection } from "../../storyUtils";
+
+const stories = storiesOf("Advanced", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const loremContent = (
+  <div className="w-full p-3 text-sm text-gray-700">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis urna
+    in nisl volutpat congue at id leo. Morbi porta lacus ex, a posuere urna
+    vulputate in. Nunc a nisi in est tempor mattis. Morbi finibus velit eget
+    eros maximus, in bibendum arcu maximus.
+  </div>
+);
+
+const stepperComp = (
+  <div className="my-8 bg-white">
+    <Stepper
+      steps={[
+        { title: "Deposit Status", description: "2024-07-12" },
+        { title: "Proposal Confirmation" },
+        { title: "Documents Collection" },
+      ]}
+      horizontal={true}
+      stepIndex={2}
+      onChange={() => {}}
+    />
+  </div>
+);
+
+stories.add("Collapse", () => {
+  const [collapse, setCollapse] = useState(true);
+  const toggle = () => setCollapse((prev) => !prev);
+
+  return (
+    <div className="font-sans max-w-2xl p-6">
+      <StorySection
+        title="Default"
+        description={
+          <>
+            Basic collapse with a title and icon. The header is clickable — pass{" "}
+            <code>handleCollapse</code> to control state externally, or omit it
+            to use internal state. <code>collapse=&#123;true&#125;</code> means
+            the content is visible (expanded).
+          </>
+        }
+      >
+        <div className="w-full rounded-lg border overflow-hidden">
+          <Collapse
+            title="Map View"
+            collapse={collapse}
+            defaultValue={false}
+            icon={<MapIcon className="w-5 h-5 text-primary-500" />}
+            content={loremContent}
+            handleCollapse={toggle}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="With Additional Header Component"
+        description={
+          <>
+            Use <code>additionalComp</code> to render an extra element in the
+            header row, to the left of the chevron. Call{" "}
+            <code>stopPropagation</code> on its click handler to prevent
+            toggling the collapse.
+          </>
+        }
+      >
+        <div className="w-full rounded-lg border overflow-hidden">
+          <Collapse
+            title="Map View"
+            collapse={collapse}
+            icon={<MapIcon className="w-5 h-5 text-primary-500" />}
+            additionalComp={
+              <ArrowsPointingOutIcon
+                className="w-5 h-5 text-primary-500 mr-2"
+                onClick={(e) => {
+                  e?.stopPropagation();
+                  e?.preventDefault();
+                }}
+              />
+            }
+            content={loremContent}
+            handleCollapse={toggle}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Custom Header Styling"
+        description={
+          <>
+            Use <code>collapseContainerCss</code> and{" "}
+            <code>notCollapseContainerCss</code> to style the header when
+            expanded or collapsed. Combine with <code>titleClassName</code>,{" "}
+            <code>descClassName</code>, and <code>iconClassName</code> for full
+            control.
+          </>
+        }
+      >
+        <div className="w-full rounded-lg border overflow-hidden">
+          <Collapse
+            title="Map View"
+            desc="Lorem ipsum dolor sit amet"
+            collapse={collapse}
+            icon={<></>}
+            collapseContainerCss="bg-primary-600"
+            notCollapseContainerCss="bg-primary-600"
+            titleClassName="text-white text-2xl"
+            descClassName="text-white"
+            iconClassName="w-5 h-5 text-white"
+            content={loremContent}
+            handleCollapse={toggle}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Collapse Additional Component + Expand Button"
+        description={
+          <>
+            <code>collapseAdditionalComp</code> renders below the header only
+            when the panel is collapsed (content hidden). <code>expandBtn</code>{" "}
+            adds a tag button at the bottom of the panel to toggle state.
+          </>
+        }
+      >
+        <div className="w-full rounded-lg border overflow-hidden">
+          <Collapse
+            title="Map View"
+            desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            collapse={collapse}
+            icon={<></>}
+            collapseContainerCss="bg-primary-800"
+            notCollapseContainerCss="bg-primary-800"
+            titleClassName="text-white text-2xl"
+            descClassName="text-white"
+            iconClassName="w-5 h-5 text-white"
+            collapseAdditionalComp={stepperComp}
+            content={
+              <div className="flex flex-col">
+                {stepperComp}
+                {loremContent}
+              </div>
+            }
+            handleCollapse={toggle}
+            expandBtn
+          />
+        </div>
+      </StorySection>
+    </div>
+  );
+});

package/lib/components/advanced/infoWindow/README.md

@@ -0,0 +1,69 @@
+# Info Window
+
+<!-- STORY -->
+
+<hr>
+
+A popover that opens on hover (or click) to display contextual information next to a trigger icon.
+
+##### Import
+
+```js
+import { InfoWindow } from "blixify-ui-web/advanced/infoWindow";
+```
+
+##### Usage
+
+Basic (opens on hover):
+
+```jsx
+<InfoWindow
+  type="right"
+  content={
+    <div className="w-60 bg-gray-200 p-3 rounded-lg">Description here...</div>
+  }
+  icon={<QuestionMarkCircleIcon className="h-6 w-6 text-gray-400" />}
+/>
+```
+
+Open on click only:
+
+```jsx
+<InfoWindow
+  type="bottom end"
+  content={
+    <div className="w-60 bg-gray-200 p-3 rounded-lg">Description here...</div>
+  }
+  icon={<BoltIcon className="h-6 w-6 text-gray-400" />}
+  disableOpenOnHover
+/>
+```
+
+Open by default on mount:
+
+```jsx
+<InfoWindow
+  type="right"
+  defaultOpen={true}
+  content={
+    <div className="w-60 bg-gray-200 p-3 rounded-lg">Description here...</div>
+  }
+  icon={<QuestionMarkCircleIcon className="h-6 w-6 text-gray-400" />}
+/>
+```
+
+##### Required props
+
+| Name      | Type                                                                                                   | Description                                            |
+| --------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
+| `content` | `ReactElement`                                                                                         | Content rendered inside the popover panel              |
+| `icon`    | `ReactElement`                                                                                         | Trigger element — clicking or hovering opens the panel |
+| `type`    | `"left" \| "right" \| "bottom" \| "bottom start" \| "bottom end" \| "top" \| "top start" \| "top end"` | Position of the panel relative to the icon             |
+
+##### Optional props
+
+| Name                 | Type         | Default | Description                                                 |
+| -------------------- | ------------ | ------- | ----------------------------------------------------------- |
+| `defaultOpen`        | `boolean`    | `false` | When `true`, the panel is open on mount                     |
+| `disableOpenOnHover` | `boolean`    | `false` | When `true`, the panel only opens on click instead of hover |
+| `onClick`            | `() => void` | —       | Additional callback fired when the trigger icon is clicked  |

package/lib/components/advanced/infoWindow/infoWindow.stories.tsx

@@ -0,0 +1,112 @@
+import { BoltIcon } from "@heroicons/react/24/outline";
+import { QuestionMarkCircleIcon } from "@heroicons/react/24/solid";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { InfoWindow } from ".";
+import README from "./README.md";
+import { StorySection } from "../../storyUtils";
+
+const stories = storiesOf("Advanced", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const infoContent = (
+  <div className="w-60 bg-gray-200 p-3 rounded-lg text-sm text-gray-700">
+    Place your description here...
+  </div>
+);
+
+const iconClassName = "h-6 w-6 text-gray-400";
+
+stories.add("Info Window", () => (
+  <div className="font-sans max-w-2xl p-6">
+    <StorySection
+      title="Position: Right"
+      description={
+        <>
+          Use <code>type="right"</code> to anchor the panel to the right of the
+          icon. Set <code>defaultOpen=&#123;true&#125;</code> to show the panel
+          on mount.
+        </>
+      }
+    >
+      <InfoWindow
+        type="right"
+        defaultOpen={true}
+        content={infoContent}
+        icon={<QuestionMarkCircleIcon className={iconClassName} />}
+      />
+    </StorySection>
+
+    <StorySection
+      title="Position: Left"
+      description={
+        <>
+          Use <code>type="left"</code> to anchor the panel to the left of the
+          icon.
+        </>
+      }
+    >
+      <InfoWindow
+        type="left"
+        content={infoContent}
+        icon={<QuestionMarkCircleIcon className={iconClassName} />}
+      />
+    </StorySection>
+
+    <StorySection
+      title="Position: Bottom Start"
+      description={
+        <>
+          Use <code>type="bottom start"</code> to open the panel below the icon,
+          aligned to the start (left) edge. Also available:{" "}
+          <code>"bottom"</code>, <code>"bottom end"</code>.
+        </>
+      }
+    >
+      <InfoWindow
+        type="bottom start"
+        content={infoContent}
+        icon={<BoltIcon className={iconClassName} />}
+      />
+    </StorySection>
+
+    <StorySection
+      title="Position: Top Start"
+      description={
+        <>
+          Use <code>type="top start"</code> to open the panel above the icon.
+          Also available: <code>"top"</code>, <code>"top end"</code>.
+        </>
+      }
+    >
+      <InfoWindow
+        type="top start"
+        content={infoContent}
+        icon={<BoltIcon className={iconClassName} />}
+      />
+    </StorySection>
+
+    <StorySection
+      title="Open on Click (disableOpenOnHover)"
+      description={
+        <>
+          By default the panel opens on hover. Set{" "}
+          <code>disableOpenOnHover=&#123;true&#125;</code> to require an
+          explicit click to open and close the panel instead.
+        </>
+      }
+    >
+      <InfoWindow
+        type="bottom end"
+        content={infoContent}
+        icon={<BoltIcon className={iconClassName} />}
+        disableOpenOnHover
+      />
+    </StorySection>
+  </div>
+));

package/lib/components/advanced/popUp/README.md

@@ -0,0 +1,95 @@
+# Pop Up
+
+<!-- STORY -->
+
+<hr>
+
+A floating panel anchored to a trigger element. Supports click or hover triggers, top/bottom direction, and left/right anchor alignment. Can be closed programmatically via a ref.
+
+##### Import
+
+```js
+import { PopUp } from "blixify-ui-web/advanced/popUp";
+```
+
+##### Usage
+
+Basic click trigger:
+
+```jsx
+import { Transition } from "@headlessui/react";
+
+<PopUp
+  ctaComp={<ChevronDownIcon className="h-5 w-5" />}
+  renderComp={<div className="p-4 w-72">Popup content</div>}
+  lib={{ Transition }}
+/>;
+```
+
+Close the popup from inside `renderComp` using a ref:
+
+```jsx
+const ref = useRef(null);
+
+<PopUp
+  ref={ref}
+  ctaComp={<ChevronDownIcon className="h-5 w-5" />}
+  renderComp={
+    <div className="p-4 w-72">
+      <button onClick={() => ref.current.handleOnClose()}>Close</button>
+    </div>
+  }
+  lib={{ Transition }}
+/>;
+```
+
+Hover trigger:
+
+```jsx
+<PopUp
+  ctaComp={<Card title="Hover me" />}
+  renderComp={<div className="p-4 w-72">Shown on hover</div>}
+  trigger="hover"
+  anchor="left"
+  className="w-full"
+  lib={{ Transition }}
+/>
+```
+
+Top direction with left anchor:
+
+```jsx
+<PopUp
+  ctaComp={<ChevronUpIcon className="h-5 w-5" />}
+  renderComp={<div className="p-4 w-72">Opens above</div>}
+  direction="top"
+  anchor="left"
+  lib={{ Transition }}
+/>
+```
+
+##### Required props
+
+| Name         | Type                  | Description                                                               |
+| ------------ | --------------------- | ------------------------------------------------------------------------- |
+| `ctaComp`    | `ReactElement`        | Trigger element — clicking (or hovering) this opens the panel             |
+| `renderComp` | `ReactElement`        | Content rendered inside the floating panel                                |
+| `lib`        | `{ Transition: any }` | Pass `{ Transition }` from `@headlessui/react` for enter/leave animations |
+
+##### Optional props
+
+| Name        | Type                 | Default    | Description                                                               |
+| ----------- | -------------------- | ---------- | ------------------------------------------------------------------------- |
+| `trigger`   | `"click" \| "hover"` | `"click"`  | How the panel is opened. `"hover"` opens on mouse enter, closes on leave  |
+| `direction` | `"top" \| "bottom"`  | `"bottom"` | Whether the panel opens above or below the trigger                        |
+| `anchor`    | `"left" \| "right"`  | `"right"`  | Horizontal alignment of the panel relative to the trigger                 |
+| `className` | `string`             | `""`       | Tailwind classes applied to the trigger wrapper `div`                     |
+| `onClose`   | `() => void`         | —          | Called whenever the panel closes (click outside, hover leave, or via ref) |
+
+##### Ref API
+
+When a `ref` is attached, the following method is available:
+
+| Method          | Description                                                       |
+| --------------- | ----------------------------------------------------------------- |
+| `handleOnClose` | Programmatically closes the panel and fires `onClose` if provided |

package/lib/components/advanced/popUp/popUp.stories.tsx

@@ -0,0 +1,189 @@
+import { Transition } from "@headlessui/react";
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  ShoppingCartIcon,
+  UserGroupIcon,
+} from "@heroicons/react/24/solid";
+import { storiesOf } from "@storybook/react";
+import React, { useRef } from "react";
+import { PopUp } from ".";
+import { TextButton } from "../../action/textButton";
+import { Card } from "../../chart/card";
+import README from "./README.md";
+import { StorySection } from "../../storyUtils";
+
+const stories = storiesOf("Advanced", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const lib = { Transition };
+
+stories.add("PopUp", () => {
+  const ref = useRef<any>(null);
+
+  const richContent = (
+    <div className="w-80">
+      <img
+        alt="preview"
+        className="w-full h-36 object-cover"
+        src="https://cf.shopee.com.my/file/fef57a9b0d40a0626def6fdc993c442a"
+      />
+      <div className="p-4 text-sm text-gray-600">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis
+          urna in nisl volutpat congue at id leo.
+        </p>
+        {/*
+          Call ref.current.handleOnClose() from inside renderComp to
+          programmatically close the popup without clicking outside.
+        */}
+        <TextButton
+          text="Close from inside"
+          onClick={() => ref?.current?.handleOnClose()}
+          className="mt-4"
+        />
+      </div>
+    </div>
+  );
+
+  const simpleContent = (
+    <div className="p-4 text-sm text-gray-800 w-72">
+      <h4 className="mb-2 font-semibold">Lorem ipsum dolor</h4>
+      <p className="text-gray-600">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </p>
+    </div>
+  );
+
+  return (
+    <div className="font-sans max-w-2xl p-6">
+      <StorySection
+        title="Click Trigger (default)"
+        description={
+          <>
+            Default behaviour — clicking <code>ctaComp</code> toggles the popup.
+            Clicking outside closes it. Pass a <code>ref</code> to call{" "}
+            <code>ref.current.handleOnClose()</code> from inside{" "}
+            <code>renderComp</code>.
+          </>
+        }
+      >
+        <div className="p-4 rounded-lg bg-primary-700 text-white w-72">
+          <div className="flex justify-between items-center">
+            <h5 className="font-semibold text-sm">Click to open</h5>
+            <PopUp
+              ref={ref}
+              ctaComp={
+                <ChevronDownIcon className="h-5 w-5 text-white cursor-pointer" />
+              }
+              renderComp={richContent}
+              lib={lib}
+            />
+          </div>
+          <p className="mt-2 text-xs font-light opacity-80">
+            Click the chevron to toggle the popup.
+          </p>
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Direction: Top"
+        description={
+          <>
+            Use <code>direction="top"</code> to open the panel above the trigger
+            instead of below (default is <code>"bottom"</code>).
+          </>
+        }
+      >
+        <div className="p-4 rounded-lg bg-primary-700 text-white w-72">
+          <div className="flex justify-between items-center">
+            <h5 className="font-semibold text-sm">Opens above</h5>
+            <PopUp
+              ref={ref}
+              ctaComp={
+                <ChevronUpIcon className="h-5 w-5 text-white cursor-pointer" />
+              }
+              renderComp={simpleContent}
+              direction="top"
+              lib={lib}
+            />
+          </div>
+          <p className="mt-2 text-xs font-light opacity-80">
+            Click the chevron to open the panel above.
+          </p>
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Anchor: Left"
+        description={
+          <>
+            Use <code>anchor="left"</code> to align the panel to the left edge
+            of the trigger. Default is <code>"right"</code>. Useful when the
+            trigger is near the right side of the viewport. Pass{" "}
+            <code>className</code> to control the trigger wrapper width.
+          </>
+        }
+      >
+        <PopUp
+          ref={ref}
+          ctaComp={
+            <Card
+              icon={<UserGroupIcon className="h-5 w-5 text-white" />}
+              title="Completed Tasks"
+              description="Click card to open popup"
+              count={3684382}
+            />
+          }
+          anchor="left"
+          className="w-72"
+          renderComp={richContent}
+          lib={lib}
+        />
+      </StorySection>
+
+      <StorySection
+        title="Hover Trigger"
+        description={
+          <>
+            Set <code>trigger="hover"</code> to open the panel on mouse enter
+            and close on mouse leave. Works on any <code>ctaComp</code>,
+            including entire card components.
+          </>
+        }
+      >
+        <PopUp
+          ref={ref}
+          ctaComp={
+            <Card
+              icon={<ShoppingCartIcon className="h-5 w-5 text-white" />}
+              title="Total Orders"
+              description="Hover over this card"
+              count={1547}
+            />
+          }
+          anchor="left"
+          className="w-72"
+          trigger="hover"
+          renderComp={
+            <div className="p-4 text-sm text-gray-800 w-72">
+              <h4 className="mb-2 font-semibold">Order Details</h4>
+              <p className="text-gray-600">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              </p>
+              <div className="mt-3 p-3 bg-gray-100 rounded text-xs text-gray-700">
+                Shown on hover — closes automatically on mouse leave.
+              </div>
+            </div>
+          }
+          lib={lib}
+        />
+      </StorySection>
+    </div>
+  );
+});