blixify-ui-web-mcp 0.1.3 → 0.1.18

package/lib/components/action/button/README.md

@@ -62,14 +62,15 @@ Disabled:
 
 ##### Optional props
 
-| Name             | Type                                                  | Default    | Description                                     |
-| ---------------- | ----------------------------------------------------- | ---------- | ----------------------------------------------- |
-| `icon`           | `React Element`                                       | —          | Icon element to display before the button text  |
-| `size`           | `string`                                              | —          | `"small"`, `"extraSmall"`, or default (large)   |
-| `disable`        | `boolean`                                             | `false`    | When true, disables the button                  |
-| `className`      | `string`                                              | `""`       | Tailwind (or other) CSS classes for the button  |
-| `popUpMenuItems` | `{ text: string; onClick: (text: string) => void }[]` | —          | Items for a pop-up menu; when set, shows pop-up |
-| `popUpDirection` | `"top" \| "bottom"`                                   | `"bottom"` | Where the pop-up menu opens relative to button  |
-| `popUpAnchor`    | `"left" \| "right"`                                   | `"left"`   | Horizontal alignment of the pop-up              |
-| `popUpClassName` | `string`                                              | —          | CSS classes for the pop-up container            |
-| `onClick`        | `(e: any) => void`                                    | —          | Called when the button is clicked               |
+| Name              | Type                                                  | Default    | Description                                     |
+| ----------------- | ----------------------------------------------------- | ---------- | ----------------------------------------------- |
+| `icon`            | `React Element`                                       | —          | Icon element to display before the button text  |
+| `size`            | `string`                                              | —          | `"small"`, `"extraSmall"`, or default (large)   |
+| `disable`         | `boolean`                                             | `false`    | When true, disables the button                  |
+| `className`       | `string`                                              | `""`       | Tailwind (or other) CSS classes for the button  |
+| `popUpMenuItems`  | `{ text: string; onClick: (text: string) => void }[]` | —          | Items for a pop-up menu; when set, shows pop-up |
+| `popUpDirection`  | `"top" \| "bottom"`                                   | `"bottom"` | Where the pop-up menu opens relative to button  |
+| `popUpAnchor`     | `"left" \| "right"`                                   | `"left"`   | Horizontal alignment of the pop-up              |
+| `popUpClassName`  | `string`                                              | —          | CSS classes for the pop-up container            |
+| `customEventText` | `string`                                              | —          | Custom text for the Rybbit tracking event name  |
+| `onClick`         | `(e: any) => void`                                    | —          | Called when the button is clicked               |

package/lib/components/action/button/button.stories.tsx

@@ -1,18 +1,12 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { Button } from ".";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Action", module);
+const meta = { title: "Action/Button" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Button", () => (
+export const ButtonStory = () => (
   <div className="font-sans max-w-2xl p-6">
     <StorySection
       title="Button Types"
@@ -135,4 +129,4 @@ stories.add("Button", () => (
       <Button text="Danger" size="small" type="danger" disable={true} />
     </StorySection>
   </div>
-));
+)

package/lib/components/action/buttonGroup/buttonGroup.stories.tsx

@@ -1,16 +1,10 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { ButtonGroup } from ".";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Action", module);
+const meta = { title: "Action/Button Group" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const defaultSelection = [
   { id: "item1", name: "Item 1" },
@@ -18,7 +12,7 @@ const defaultSelection = [
   { id: "item3", name: "Item 3" },
 ];
 
-stories.add("Button Group", () => {
+export const ButtonGroupStory = () => {
   const [selectedId, setSelectedId] = useState("item1");
 
   return (
@@ -101,4 +95,4 @@ stories.add("Button Group", () => {
       </StorySection>
     </div>
   );
-});
+}

package/lib/components/action/iconButton/iconButton.stories.tsx

@@ -1,22 +1,16 @@
 import { Bars3Icon } from "@heroicons/react/24/solid";
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { IconButton } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Action", module);
+const meta = { title: "Action/Icon Button" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Icon Button", () => {
+export const IconButtonStory = () => {
   return (
     <IconButton
       icon={<Bars3Icon className="h-5 w-5 text-gray-400" />}
       onClick={() => {}}
     />
   );
-});
+}

package/lib/components/action/radioList/radioList.stories.tsx

@@ -1,17 +1,11 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { RadioList, RadioListItem } from ".";
 import { TextButton } from "../textButton";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Action", module);
+const meta = { title: "Action/Radio List" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const baseList: RadioListItem[] = [
   {
@@ -52,7 +46,7 @@ const baseList: RadioListItem[] = [
   },
 ];
 
-stories.add("Radio List", () => {
+export const RadioListStory = () => {
   const [singleValue, setSingleValue] = useState("");
   const [multiValue, setMultiValue] = useState<string[]>([]);
 
@@ -178,4 +172,4 @@ stories.add("Radio List", () => {
       </StorySection>
     </div>
   );
-});
+}

package/lib/components/action/slider/slider.stories.tsx

@@ -1,18 +1,12 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { Slider } from ".";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Action", module);
+const meta = { title: "Action/Slider" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Slider", () => {
+export const SliderStory = () => {
   const [single, setSingle] = useState("50");
   const [steppedValue, setSteppedValue] = useState("50");
   const [rangeMin, setRangeMin] = useState("20");
@@ -130,4 +124,4 @@ stories.add("Slider", () => {
       </StorySection>
     </div>
   );
-});
+}

package/lib/components/action/textButton/textButton.stories.tsx

@@ -1,16 +1,10 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { TextButton } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Action", module);
+const meta = { title: "Action/Text Button" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Text Button", () => {
+export const TextButtonStory = () => {
   return <TextButton text="Click Me" onClick={() => {}} />;
-});
+}

package/lib/components/action/toggle/toggle.stories.tsx

@@ -1,17 +1,11 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
 import { Toggle } from ".";
-import README from "./README.md";
 
-const stories = storiesOf("Action", module);
+const meta = { title: "Action/Toggle" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Toggle", () => {
+export const ToggleStory = () => {
   return (
     <Toggle
       direction="right"
@@ -20,4 +14,4 @@ stories.add("Toggle", () => {
       onClick={() => {}}
     />
   );
-});
+}

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

@@ -1,18 +1,12 @@
 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);
+const meta = { title: "Advanced/Collapse" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const loremContent = (
   <div className="w-full p-3 text-sm text-gray-700">
@@ -38,7 +32,7 @@ const stepperComp = (
   </div>
 );
 
-stories.add("Collapse", () => {
+export const CollapseStory = () => {
   const [collapse, setCollapse] = useState(true);
   const toggle = () => setCollapse((prev) => !prev);
 
@@ -162,4 +156,4 @@ stories.add("Collapse", () => {
       </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 { 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 InfoWindowStory = () => (
   <div className="font-sans max-w-2xl p-6">
     <StorySection
       title="Position: Right"
@@ -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
 

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 { 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 PopUpStory = () => {
   const ref = useRef<any>(null);
 
   const richContent = (
@@ -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 { 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 BareSignInStory = () => {
   const [provider, setProvider] = useState<typeof AvailableProvider>("email");
 
   return (
@@ -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}>
+          <BareSignIn
+            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={
@@ -138,4 +158,4 @@ stories.add("Bare Sign In", () => {
       </StorySection>
     </div>
   );
-});
+}

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

@@ -1,26 +1,20 @@
-import { storiesOf } from "@storybook/react";
 import React, { useRef, useState } from "react";
 import { BareSignUp } from ".";
 import { Option, Select } from "../../input/select";
 import { TextInput } from "../../input/textInput";
 import { AvailableProvider } from "../bareSignIn";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Auth", module);
+const meta = { title: "Auth/Bare Sign Up" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const genderOptions: Option[] = [
   { key: "M", label: "Male" },
   { key: "F", label: "Female" },
 ];
 
-stories.add("Bare Sign Up", () => {
+export const BareSignUpStory = () => {
   const custFormRef: any = useRef(null);
   const signUpFormRef: any = useRef(null);
   const input1: any = useRef(null);
@@ -156,4 +150,4 @@ stories.add("Bare Sign Up", () => {
       </StorySection>
     </div>
   );
-});
+}

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

@@ -1,17 +1,11 @@
-import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import { SignInTemplate } from ".";
 import { AvailableProvider } from "../bareSignIn";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Auth", module);
+const meta = { title: "Auth/Sign In" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const contactInfo = (
   <>
@@ -57,7 +51,7 @@ const contactInfo = (
   </>
 );
 
-stories.add("Sign In", () => {
+export const SignIn = () => {
   const [provider, setProvider] = useState<typeof AvailableProvider>("email");
 
   return (
@@ -117,4 +111,4 @@ stories.add("Sign In", () => {
       </StorySection>
     </div>
   );
-});
+}

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

@@ -1,20 +1,14 @@
-import { storiesOf } from "@storybook/react";
 import React, { useRef, useState } from "react";
 import { SignUpTemplate } from ".";
 import { Stepper } from "../../display/stepper";
 import { Option, Select } from "../../input/select";
 import { TextInput } from "../../input/textInput";
 import { AvailableProvider } from "../bareSignIn";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Auth", module);
+const meta = { title: "Auth/Sign Up" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const genderOptions: Option[] = [
   { key: "M", label: "Male" },
@@ -33,7 +27,7 @@ const signUpSteps = [
   },
 ];
 
-stories.add("Sign Up", () => {
+export const SignUp = () => {
   const custFormRef: any = useRef(null);
   const signUpFormRef: any = useRef(null);
   const input1: any = useRef(null);
@@ -190,4 +184,4 @@ stories.add("Sign Up", () => {
       </StorySection>
     </div>
   );
-});
+}

package/lib/components/chart/areaChart/areaChart.stories.tsx

@@ -1,19 +1,13 @@
 import { PencilIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
+import dayjs from "../../dayjs";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { AreaChart } from ".";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Area Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const stackedAreaSeries = [
   {
@@ -51,7 +45,7 @@ const rawData = [
   { label: "Banana", value: 55, daysAgo: 28 },
 ];
 
-stories.add("Area Chart", () => {
+export const AreaChartStory = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -86,11 +80,11 @@ stories.add("Area Chart", () => {
   }, [handleSetData]);
 
   const sevenDaysAgo = new Date();
-  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+  sevenDaysAgo.setDate(dayjs().toDate().getDate() - 7);
 
   const defaultDateRange: RangeInterface = {
     startDate: sevenDaysAgo,
-    endDate: moment().toDate(),
+    endDate: dayjs().toDate(),
     isDuration: true,
   };
 
@@ -196,4 +190,4 @@ stories.add("Area Chart", () => {
       </StorySection>
     </div>
   );
-});
+}

package/lib/components/chart/barChart/barChart.stories.tsx

@@ -1,19 +1,13 @@
 import { PencilIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
+import dayjs from "../../dayjs";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { BarChart } from ".";
 import { RangeInterface } from "../DateRange";
-import README from "./README.md";
 import { StorySection } from "../../storyUtils";
 
-const stories = storiesOf("Chart", module);
+const meta = { title: "Chart/Bar Chart" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
 const stackedSeries = [
   { name: "Company A", data: [400, 430, 448] },
@@ -29,7 +23,7 @@ const rawData = [
   { label: "Banana", value: 55, daysAgo: 28 },
 ];
 
-stories.add("Bar Chart", () => {
+export const BarChartStory = () => {
   const [seriesData, setSeriesData] = useState<any[]>([]);
 
   const chartDummyData = useMemo(() => {
@@ -64,11 +58,11 @@ stories.add("Bar Chart", () => {
   }, [handleSetData]);
 
   const sevenDaysAgo = new Date();
-  sevenDaysAgo.setDate(moment().toDate().getDate() - 7);
+  sevenDaysAgo.setDate(dayjs().toDate().getDate() - 7);
 
   const defaultDateRange: RangeInterface = {
     startDate: sevenDaysAgo,
-    endDate: moment().toDate(),
+    endDate: dayjs().toDate(),
     isDuration: true,
   };
 
@@ -315,4 +309,4 @@ stories.add("Bar Chart", () => {
       </StorySection>
     </div>
   );
-});
+}