blixify-ui-web-mcp 0.1.3 → 0.1.19

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

@@ -1,18 +1,15 @@
-import { ArrowsPointingOutIcon, MapIcon } from "@heroicons/react/24/solid";
-import { storiesOf } from "@storybook/react";
+import {
+  ArrowsPointingOutIcon,
+  MapIcon,
+  SparklesIcon,
+} from "@heroicons/react/24/solid";
 import React, { useState } from "react";
-import { Collapse } from ".";
+import { Collapse as CollapseImpl } 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 meta = { title: "Advanced/Collapse" };
+export default meta;
 
 const loremContent = (
   <div className="w-full p-3 text-sm text-gray-700">
@@ -38,12 +35,12 @@ const stepperComp = (
   </div>
 );
 
-stories.add("Collapse", () => {
+export const Collapse = () => {
   const [collapse, setCollapse] = useState(true);
   const toggle = () => setCollapse((prev) => !prev);
 
   return (
-    <div className="font-sans max-w-2xl p-6">
+    <div className="font-sans p-6">
       <StorySection
         title="Default"
         description={
@@ -56,7 +53,7 @@ stories.add("Collapse", () => {
         }
       >
         <div className="w-full rounded-lg border overflow-hidden">
-          <Collapse
+          <CollapseImpl
             title="Map View"
             collapse={collapse}
             defaultValue={false}
@@ -79,7 +76,7 @@ stories.add("Collapse", () => {
         }
       >
         <div className="w-full rounded-lg border overflow-hidden">
-          <Collapse
+          <CollapseImpl
             title="Map View"
             collapse={collapse}
             icon={<MapIcon className="w-5 h-5 text-primary-500" />}
@@ -111,15 +108,15 @@ stories.add("Collapse", () => {
         }
       >
         <div className="w-full rounded-lg border overflow-hidden">
-          <Collapse
+          <CollapseImpl
             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"
+            titleClassName="text-white text-base font-semibold leading-tight"
+            descClassName="text-white text-xs"
             iconClassName="w-5 h-5 text-white"
             content={loremContent}
             handleCollapse={toggle}
@@ -127,6 +124,114 @@ stories.add("Collapse", () => {
         </div>
       </StorySection>
 
+      <StorySection
+        title="Summary Line"
+        description={
+          <>
+            Use <code>summary</code> to show a one-line gist beside the title
+            while collapsed. Lets users scan a list of sections without
+            expanding each one.
+          </>
+        }
+      >
+        <div className="w-full rounded-lg border overflow-hidden">
+          <CollapseImpl
+            title="Order Details"
+            summary="3 items · RM 1,260"
+            icon={<MapIcon className="w-5 h-5 text-primary-500" />}
+            content={loremContent}
+            defaultOpen={false}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Modern Mobile — Gradient Header + Content Padding"
+        description={
+          <>
+            iOS-card feel for mobile: 3-stop gradient header (
+            <code>
+              bg-gradient-to-br from-primary-700 via-primary-500 to-primary-300
+            </code>
+            ), rounded-2xl outer shadow, and the new{" "}
+            <code>contentClassName</code> prop to control padding/bg around the
+            content area. Use <code>summary</code> to keep the gist visible
+            while collapsed.
+          </>
+        }
+      >
+        <div className="w-full overflow-hidden rounded-2xl shadow-md">
+          <CollapseImpl
+            title="Order Details"
+            summary="3 items · RM 1,260"
+            collapse={collapse}
+            handleCollapse={toggle}
+            icon={<MapIcon className="w-5 h-5 text-white" />}
+            collapseContainerCss="bg-gradient-to-br from-primary-700 via-primary-500 to-primary-300 !border-0"
+            notCollapseContainerCss="bg-gradient-to-br from-primary-700 via-primary-500 to-primary-300"
+            titleClassName="text-white text-base font-semibold"
+            summaryClassName="text-primary-50"
+            descClassName="text-primary-50"
+            iconClassName="w-5 h-5 text-white"
+            contentClassName="p-5 bg-white border-t border-primary-100"
+            content={
+              <div className="space-y-2 text-sm text-gray-700">
+                <div className="flex items-center justify-between">
+                  <span className="text-gray-500">Subtotal</span>
+                  <span className="font-medium">RM 1,200.00</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-gray-500">Tax</span>
+                  <span className="font-medium">RM 60.00</span>
+                </div>
+                <div className="flex items-center justify-between border-t border-gray-100 pt-2">
+                  <span className="font-semibold text-gray-900">Total</span>
+                  <span className="font-bold text-primary-600">
+                    RM 1,260.00
+                  </span>
+                </div>
+              </div>
+            }
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Modern Mobile — Padding-only Override"
+        description={
+          <>
+            If the default gradient/header is fine but you just want tighter or
+            looser content padding, pass{" "}
+            <code>contentClassName=&quot;p-2&quot;</code> (tighter) or{" "}
+            <code>contentClassName=&quot;p-8&quot;</code> (looser). No need to
+            override the whole header.
+          </>
+        }
+      >
+        <div className="w-full space-y-3">
+          <div className="overflow-hidden rounded-xl border border-gray-200">
+            <CollapseImpl
+              title="Tight padding (p-2)"
+              icon={<MapIcon className="w-5 h-5 text-primary-500" />}
+              contentClassName="p-2 text-xs text-gray-600"
+              content={<div>Content with tight padding.</div>}
+              defaultOpen
+            />
+          </div>
+          <div className="overflow-hidden rounded-xl border border-gray-200">
+            <CollapseImpl
+              title="Loose padding (p-8)"
+              icon={<MapIcon className="w-5 h-5 text-primary-500" />}
+              contentClassName="p-8 text-sm text-gray-700"
+              content={
+                <div>Content with loose padding for breathing room.</div>
+              }
+              defaultOpen
+            />
+          </div>
+        </div>
+      </StorySection>
+
       <StorySection
         title="Collapse Additional Component + Expand Button"
         description={
@@ -138,15 +243,15 @@ stories.add("Collapse", () => {
         }
       >
         <div className="w-full rounded-lg border overflow-hidden">
-          <Collapse
+          <CollapseImpl
             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"
+            collapseContainerCss="bg-primary-600"
+            notCollapseContainerCss="bg-primary-600"
+            titleClassName="text-white text-base font-semibold leading-tight"
+            descClassName="text-white text-xs"
             iconClassName="w-5 h-5 text-white"
             collapseAdditionalComp={stepperComp}
             content={
@@ -160,6 +265,117 @@ stories.add("Collapse", () => {
           />
         </div>
       </StorySection>
+
+      <StorySection
+        title="Compact"
+        description={
+          <>
+            Use <code>size="compact"</code> for reduced padding and font size.
+          </>
+        }
+      >
+        <div className="w-full space-y-2">
+          {["Order Summary", "Shipping Details", "Payment Info", "Notes"].map(
+            (sectionTitle) => (
+              <div
+                key={sectionTitle}
+                className="overflow-hidden rounded-lg border border-gray-200"
+              >
+                <CollapseImpl
+                  title={sectionTitle}
+                  icon={<MapIcon className="w-4 h-4 text-primary-500" />}
+                  size="compact"
+                  content={loremContent}
+                />
+              </div>
+            )
+          )}
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="AI Overview — Animated Gradient Glow"
+        description={
+          <>
+            Sci-fi accent for an "AI"-themed surface. Wraps the{" "}
+            <code>Collapse</code> in a 2px padding ring whose background is a
+            two-colour gradient (primary &rarr; violet) that animates by
+            shifting <code>background-position</code> over 4s, producing a slow
+            shimmering glow. A blurred sibling layer underneath adds an outer
+            halo for depth. Pure CSS — no extra libraries.
+          </>
+        }
+      >
+        <style>{`
+          @keyframes ai-glow {
+            0%   { background-position:   0% 50%; }
+            100% { background-position: 400% 50%; }
+          }
+          @keyframes ai-pulse {
+            0%, 100% { opacity: 0.55; }
+            50%      { opacity: 0.85; }
+          }
+          .ai-glow-bg {
+            /* 5-stop, non-palindrome gradient so every position looks
+               distinct — symmetric gradients look stationary mid-cycle */
+            background-image: linear-gradient(
+              120deg,
+              #6366f1 0%,
+              #a855f7 25%,
+              #ec4899 50%,
+              #06b6d4 75%,
+              #6366f1 100%
+            );
+            background-size: 400% 100%;
+            background-repeat: repeat-x;
+            animation: ai-glow 6s linear infinite;
+          }
+          .ai-glow-halo {
+            filter: blur(16px);
+            animation: ai-glow 6s linear infinite, ai-pulse 4s ease-in-out infinite;
+          }
+        `}</style>
+        <div className="relative w-full">
+          {/* Halo — blurred sibling that bleeds outside the ring. Same
+              gradient as the ring so the colours stay in sync. */}
+          <div className="ai-glow-bg ai-glow-halo absolute -inset-1 rounded-2xl" />
+          {/* Gradient ring + inner white card. notCollapseContainerCss /
+              collapseContainerCss set to bg-transparent + !border-0 so
+              the inner Collapse doesn't paint a white background or a
+              divider line over the gradient ring. */}
+          <div className="ai-glow-bg relative rounded-2xl p-[2px]">
+            <div className="rounded-2xl bg-white overflow-hidden">
+              <CollapseImpl
+                title="AI Overview"
+                summary="Generated 12 seconds ago"
+                desc="Personalised insights powered by AI"
+                collapse={collapse}
+                handleCollapse={toggle}
+                icon={<SparklesIcon className="h-5 w-5 text-violet-500" />}
+                titleClassName="text-gray-900 text-base font-semibold"
+                summaryClassName="text-violet-600 text-xs"
+                descClassName="text-gray-500 text-xs"
+                collapseContainerCss="!border-0"
+                notCollapseContainerCss="!border-0"
+                contentClassName="px-4 pb-4 pt-3 border-t border-violet-100"
+                content={
+                  <div className="space-y-2 text-sm text-gray-700">
+                    <p>
+                      Your activity is trending up. Engagement is 18% above last
+                      month and your completion rate is the highest it has been
+                      since April.
+                    </p>
+                    <p className="text-xs text-gray-500">
+                      Suggested next step: review yesterday's incomplete tasks
+                      before the standup at 10:00 AM.
+                    </p>
+                  </div>
+                }
+              />
+            </div>
+          </div>
+        </div>
+      </StorySection>
     </div>
   );
-});
+};

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

@@ -1,18 +1,12 @@
 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 { InfoWindow as InfoWindowImpl } from ".";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Advanced", module);
+const meta = { title: "Advanced/Info Window" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const infoContent = (
   <div className="w-60 bg-gray-200 p-3 rounded-lg text-sm text-gray-700">
@@ -22,7 +16,7 @@ const infoContent = (
 
 const iconClassName = "h-6 w-6 text-gray-400";
 
-stories.add("Info Window", () => (
+export const InfoWindow = () => (
   <div className="font-sans max-w-2xl p-6">
     <StorySection
       title="Position: Right"
@@ -34,7 +28,7 @@ stories.add("Info Window", () => (
         </>
       }
     >
-      <InfoWindow
+      <InfoWindowImpl
         type="right"
         defaultOpen={true}
         content={infoContent}
@@ -51,7 +45,7 @@ stories.add("Info Window", () => (
         </>
       }
     >
-      <InfoWindow
+      <InfoWindowImpl
         type="left"
         content={infoContent}
         icon={<QuestionMarkCircleIcon className={iconClassName} />}
@@ -68,7 +62,7 @@ stories.add("Info Window", () => (
         </>
       }
     >
-      <InfoWindow
+      <InfoWindowImpl
         type="bottom start"
         content={infoContent}
         icon={<BoltIcon className={iconClassName} />}
@@ -84,7 +78,7 @@ stories.add("Info Window", () => (
         </>
       }
     >
-      <InfoWindow
+      <InfoWindowImpl
         type="top start"
         content={infoContent}
         icon={<BoltIcon className={iconClassName} />}
@@ -101,7 +95,7 @@ stories.add("Info Window", () => (
         </>
       }
     >
-      <InfoWindow
+      <InfoWindowImpl
         type="bottom end"
         content={infoContent}
         icon={<BoltIcon className={iconClassName} />}
@@ -109,4 +103,4 @@ stories.add("Info Window", () => (
       />
     </StorySection>
   </div>
-));
+)

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

@@ -29,6 +29,8 @@ import { Transition } from "@headlessui/react";
 Close the popup from inside `renderComp` using a ref:
 
 ```jsx
+import { Transition } from "@headlessui/react";
+
 const ref = useRef(null);
 
 <PopUp
@@ -68,6 +70,17 @@ Top direction with left anchor:
 />
 ```
 
+Exclude portal elements from outside-click detection:
+
+```jsx
+<PopUp
+  ctaComp={<ChevronDownIcon className="h-5 w-5" />}
+  renderComp={<DatePicker />}
+  excludePortalIds={["datepicker-portal"]}
+  lib={{ Transition }}
+/>
+```
+
 ##### Required props
 
 | Name         | Type                  | Description                                                               |
@@ -78,13 +91,14 @@ Top direction with left anchor:
 
 ##### 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) |
+| 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 outer wrapper `div`                                         |
+| `onClose`          | `() => void`         | —          | Called when the panel closes (click outside, hover leave, or via ref)                       |
+| `excludePortalIds` | `string[]`           | `[]`       | DOM element IDs that render outside the wrapper — clicks inside these won't close the panel |
 
 ##### Ref API
 
@@ -93,3 +107,15 @@ When a `ref` is attached, the following method is available:
 | Method          | Description                                                       |
 | --------------- | ----------------------------------------------------------------- |
 | `handleOnClose` | Programmatically closes the panel and fires `onClose` if provided |
+
+##### Escaping a clipping container
+
+`portal` renders the panel into `document.body`, positioned against the trigger,
+for a popup that sits inside a scrolling or clipping ancestor — an absolutely
+positioned panel is cut off by one. The outside-click check follows the panel
+there, so clicking inside it does not close it, and the enter/leave transition is
+skipped since a portal cannot hold the ref `Transition` needs.
+
+```tsx
+<PopUp portal anchor="right" excludePortalIds={["select-portal"]} … />
+```

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

@@ -5,25 +5,19 @@ import {
   ShoppingCartIcon,
   UserGroupIcon,
 } from "@heroicons/react/24/solid";
-import { storiesOf } from "@storybook/react";
 import React, { useRef } from "react";
-import { PopUp } from ".";
+import { PopUp as PopUpImpl } 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);
+const meta = { title: "Advanced/PopUp" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const lib = { Transition };
 
-stories.add("PopUp", () => {
+export const PopUp = () => {
   const ref = useRef<any>(null);
 
   const richContent = (
@@ -76,7 +70,7 @@ stories.add("PopUp", () => {
         <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
+            <PopUpImpl
               ref={ref}
               ctaComp={
                 <ChevronDownIcon className="h-5 w-5 text-white cursor-pointer" />
@@ -103,7 +97,7 @@ stories.add("PopUp", () => {
         <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
+            <PopUpImpl
               ref={ref}
               ctaComp={
                 <ChevronUpIcon className="h-5 w-5 text-white cursor-pointer" />
@@ -130,7 +124,7 @@ stories.add("PopUp", () => {
           </>
         }
       >
-        <PopUp
+        <PopUpImpl
           ref={ref}
           ctaComp={
             <Card
@@ -157,7 +151,7 @@ stories.add("PopUp", () => {
           </>
         }
       >
-        <PopUp
+        <PopUpImpl
           ref={ref}
           ctaComp={
             <Card
@@ -186,4 +180,4 @@ stories.add("PopUp", () => {
       </StorySection>
     </div>
   );
-});
+}

package/lib/components/auth/bareSignIn/bareSignIn.stories.tsx

@@ -1,21 +1,15 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
-import { AvailableProvider, BareSignIn } from ".";
-import README from "./README.md";
+import { AvailableProvider, BareSignIn as BareSignInImpl } from ".";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Auth", module);
+const meta = { title: "Auth/Bare Sign In" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const cardCls =
   "w-full max-w-md bg-white rounded-lg shadow-sm border border-gray-100";
 
-stories.add("Bare Sign In", () => {
+export const BareSignIn = () => {
   const [provider, setProvider] = useState<typeof AvailableProvider>("email");
 
   return (
@@ -32,7 +26,7 @@ stories.add("Bare Sign In", () => {
         }
       >
         <div className={cardCls}>
-          <BareSignIn
+          <BareSignInImpl
             version="0.0.1"
             type="email"
             provider={["email", "phone", "google", "username"]}
@@ -55,7 +49,7 @@ stories.add("Bare Sign In", () => {
         }
       >
         <div className={cardCls}>
-          <BareSignIn
+          <BareSignInImpl
             version="0.0.1"
             type="phone"
             mobilePicker={true}
@@ -79,7 +73,7 @@ stories.add("Bare Sign In", () => {
         }
       >
         <div className={cardCls}>
-          <BareSignIn
+          <BareSignInImpl
             version="0.0.1"
             type="username"
             provider={["username", "email"]}
@@ -101,7 +95,7 @@ stories.add("Bare Sign In", () => {
         }
       >
         <div className={cardCls}>
-          <BareSignIn
+          <BareSignInImpl
             version="0.0.1"
             type="phoneOTP"
             provider={["phoneOTP"]}
@@ -113,6 +107,32 @@ stories.add("Bare Sign In", () => {
         </div>
       </StorySection>
 
+      <StorySection
+        title="OTP Provider — WhatsApp Fallback"
+        description={
+          <>
+            Pass <code>otpRetryWhatsapp=&#123;true&#125;</code> alongside{" "}
+            <code>onChangeResendOTP</code> to show a "Resend via WhatsApp" link
+            on the right side of "Resend OTP". The callback receives{" "}
+            <code>"sms"</code> or <code>"whatsapp"</code> depending on which was
+            clicked.
+          </>
+        }
+      >
+        <div className={cardCls}>
+          <BareSignInImpl
+            version="0.0.1"
+            type="phoneOTP"
+            provider={["phoneOTP"]}
+            onChangeProvider={setProvider}
+            column="flex"
+            className="py-6 px-4"
+            onChangeResendOTP={(channel) => console.log("resend via", channel)}
+            otpRetryWhatsapp={true}
+          />
+        </div>
+      </StorySection>
+
       <StorySection
         title="Switchable Provider (controlled)"
         description={
@@ -124,7 +144,7 @@ stories.add("Bare Sign In", () => {
         }
       >
         <div className={cardCls}>
-          <BareSignIn
+          <BareSignInImpl
             version="0.0.1"
             type={provider}
             mobilePicker={true}
@@ -138,4 +158,4 @@ stories.add("Bare Sign In", () => {
       </StorySection>
     </div>
   );
-});
+}