blixify-ui-web-mcp 0.1.3 → 0.1.19

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 { Button as ButtonImpl } from ".";
 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 Button = () => (
   <div className="font-sans max-w-2xl p-6">
     <StorySection
       title="Button Types"
@@ -25,11 +19,28 @@ stories.add("Button", () => (
         </>
       }
     >
-      <Button text="Normal" size="small" type="normal" />
-      <Button text="Dark" size="small" type="dark" />
-      <Button text="Light" size="small" type="light" />
-      <Button text="Icon" size="small" type="icon" />
-      <Button text="Danger" size="small" type="danger" />
+      <ButtonImpl text="Normal" size="small" type="normal" />
+      <ButtonImpl text="Dark" size="small" type="dark" />
+      <ButtonImpl text="Light" size="small" type="light" />
+      <ButtonImpl text="Icon" size="small" type="icon" />
+      <ButtonImpl text="Danger" size="small" type="danger" />
+    </StorySection>
+
+    <StorySection
+      title="Pill"
+      description={
+        <>
+          Use <code>type="pill"</code> for a chip-style affordance — useful as
+          a standalone primary tag or call-out. For a selectable row of pills
+          (one active at a time) use{" "}
+          <code>{`<ButtonGroup variant="pill" />`}</code> instead, since
+          selection state lives at the group level.
+        </>
+      }
+    >
+      <ButtonImpl text="Add entry" type="pill" />
+      <ButtonImpl text="New record" type="pill" />
+      <ButtonImpl text="Sync" type="pill" disable />
     </StorySection>
 
     <StorySection
@@ -42,7 +53,7 @@ stories.add("Button", () => (
       }
       dark
     >
-      <Button text="Dark Mode" size="small" type="darkMode" />
+      <ButtonImpl text="Dark Mode" size="small" type="darkMode" />
     </StorySection>
 
     <StorySection
@@ -55,9 +66,9 @@ stories.add("Button", () => (
       }
     >
       <div className="flex flex-wrap gap-3 items-end">
-        <Button text="Default" type="normal" />
-        <Button text="Small" size="small" type="normal" />
-        <Button text="Extra Small" size="extraSmall" type="normal" />
+        <ButtonImpl text="Default" type="normal" />
+        <ButtonImpl text="Small" size="small" type="normal" />
+        <ButtonImpl text="Extra Small" size="extraSmall" type="normal" />
       </div>
     </StorySection>
 
@@ -70,13 +81,13 @@ stories.add("Button", () => (
         </>
       }
     >
-      <Button
+      <ButtonImpl
         text="Add Item"
         size="small"
         type="normal"
         icon={<span className="mr-1.5">＋</span>}
       />
-      <Button
+      <ButtonImpl
         text="Settings"
         size="small"
         type="icon"
@@ -95,7 +106,7 @@ stories.add("Button", () => (
         </>
       }
     >
-      <Button
+      <ButtonImpl
         text="Opens Below Left"
         size="small"
         type="normal"
@@ -107,7 +118,7 @@ stories.add("Button", () => (
         popUpDirection="bottom"
         popUpAnchor="left"
       />
-      <Button
+      <ButtonImpl
         text="Opens Below Right"
         size="small"
         type="light"
@@ -130,9 +141,9 @@ stories.add("Button", () => (
         </>
       }
     >
-      <Button text="Normal" size="small" type="normal" disable={true} />
-      <Button text="Light" size="small" type="light" disable={true} />
-      <Button text="Danger" size="small" type="danger" disable={true} />
+      <ButtonImpl text="Normal" size="small" type="normal" disable={true} />
+      <ButtonImpl text="Light" size="small" type="light" disable={true} />
+      <ButtonImpl text="Danger" size="small" type="danger" disable={true} />
     </StorySection>
   </div>
-));
+)

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

@@ -1,16 +1,16 @@
-import { storiesOf } from "@storybook/react";
+import {
+  ArrowDownTrayIcon,
+  ArrowPathIcon,
+  PlusIcon,
+  SparklesIcon,
+} from "@heroicons/react/24/outline";
 import React, { useState } from "react";
-import { ButtonGroup } from ".";
-import README from "./README.md";
+import { ButtonGroup as ButtonGroupImpl } from ".";
 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 +18,7 @@ const defaultSelection = [
   { id: "item3", name: "Item 3" },
 ];
 
-stories.add("Button Group", () => {
+export const ButtonGroup = () => {
   const [selectedId, setSelectedId] = useState("item1");
 
   return (
@@ -27,7 +27,7 @@ stories.add("Button Group", () => {
         title="Default"
         description="Standard segmented button group. Each item is a bordered button; the selected item is highlighted with the primary color ring."
       >
-        <ButtonGroup
+        <ButtonGroupImpl
           selection={defaultSelection}
           containerClassName="w-full"
           onClick={setSelectedId}
@@ -44,7 +44,7 @@ stories.add("Button Group", () => {
           </>
         }
       >
-        <ButtonGroup
+        <ButtonGroupImpl
           selection={defaultSelection}
           containerClassName="w-full"
           onClick={setSelectedId}
@@ -63,14 +63,14 @@ stories.add("Button Group", () => {
           </>
         }
       >
-        <ButtonGroup
+        <ButtonGroupImpl
           selection={defaultSelection}
           containerClassName="w-full"
           onClick={setSelectedId}
           selectedId={selectedId}
           variant="tag"
         />
-        <ButtonGroup
+        <ButtonGroupImpl
           selection={defaultSelection}
           containerClassName="w-full"
           onClick={setSelectedId}
@@ -80,6 +80,72 @@ stories.add("Button Group", () => {
         />
       </StorySection>
 
+      <StorySection
+        title="Variant: Pill"
+        description={
+          <>
+            Use <code>variant="pill"</code> for a chip-style row of toggleable
+            actions — typical for quick-action bars on home pages. Items render
+            with a rounded-full primary chip; the selected one fills with{" "}
+            <code>primary-500</code>. Each <code>Selection</code> can pass an{" "}
+            <code>icon</code> to render before the label.
+          </>
+        }
+      >
+        <ButtonGroupImpl
+          selection={[
+            {
+              id: "add",
+              name: "Add entry",
+              icon: (
+                <PlusIcon
+                  className={`h-4 w-4 ${
+                    selectedId === "add" ? "text-white" : "text-primary-600"
+                  }`}
+                />
+              ),
+            },
+            {
+              id: "new",
+              name: "New record",
+              icon: (
+                <SparklesIcon
+                  className={`h-4 w-4 ${
+                    selectedId === "new" ? "text-white" : "text-primary-600"
+                  }`}
+                />
+              ),
+            },
+            {
+              id: "sync",
+              name: "Sync",
+              icon: (
+                <ArrowPathIcon
+                  className={`h-4 w-4 ${
+                    selectedId === "sync" ? "text-white" : "text-primary-600"
+                  }`}
+                />
+              ),
+            },
+            {
+              id: "export",
+              name: "Export",
+              icon: (
+                <ArrowDownTrayIcon
+                  className={`h-4 w-4 ${
+                    selectedId === "export" ? "text-white" : "text-primary-600"
+                  }`}
+                />
+              ),
+            },
+          ]}
+          containerClassName="w-full"
+          onClick={setSelectedId}
+          selectedId={selectedId}
+          variant="pill"
+        />
+      </StorySection>
+
       <StorySection
         title="Dark Mode"
         description={
@@ -91,7 +157,7 @@ stories.add("Button Group", () => {
         }
         dark
       >
-        <ButtonGroup
+        <ButtonGroupImpl
           selection={defaultSelection}
           containerClassName="w-full"
           onClick={setSelectedId}
@@ -101,4 +167,4 @@ stories.add("Button Group", () => {
       </StorySection>
     </div>
   );
-});
+}

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

@@ -37,3 +37,4 @@ import { IconButton } from "blixify-ui-web/action/iconButton";
 | `className`  | `tailwind class` | ""                    |             |
 | `bgColor`    | `string`         | Icon background color |
 | `onClick`    | `function`       | `() => {}`            |             |
+| `size`       | `small`          | `undefined`           |             |

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";
+import { IconButton as IconButtonImpl } from ".";
 
-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 IconButton = () => {
   return (
-    <IconButton
+    <IconButtonImpl
       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 { RadioList as RadioListImpl, 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 RadioList = () => {
   const [singleValue, setSingleValue] = useState("");
   const [multiValue, setMultiValue] = useState<string[]>([]);
 
@@ -69,7 +63,7 @@ stories.add("Radio List", () => {
         }
       >
         <div className="w-full">
-          <RadioList
+          <RadioListImpl
             id="single-vertical"
             list={baseList}
             value={singleValue}
@@ -95,7 +89,7 @@ stories.add("Radio List", () => {
         }
       >
         <div className="w-full">
-          <RadioList
+          <RadioListImpl
             id="single-horizontal"
             list={baseList}
             value={singleValue}
@@ -117,7 +111,7 @@ stories.add("Radio List", () => {
         }
       >
         <div className="w-full">
-          <RadioList
+          <RadioListImpl
             id="multi"
             list={baseList}
             value={multiValue}
@@ -142,7 +136,7 @@ stories.add("Radio List", () => {
         }
       >
         <div className="w-full">
-          <RadioList
+          <RadioListImpl
             id="new-value"
             list={baseList}
             value={multiValue}
@@ -165,7 +159,7 @@ stories.add("Radio List", () => {
         }
       >
         <div className="w-full">
-          <RadioList
+          <RadioListImpl
             id="disabled-items"
             list={baseList.map((item, i) =>
               i === 1 || i === 3 ? { ...item, disabled: true } : item
@@ -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 { Slider as SliderImpl } from ".";
 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 Slider = () => {
   const [single, setSingle] = useState("50");
   const [steppedValue, setSteppedValue] = useState("50");
   const [rangeMin, setRangeMin] = useState("20");
@@ -34,7 +28,7 @@ stories.add("Slider", () => {
         }
       >
         <div className="w-full space-y-2">
-          <Slider
+          <SliderImpl
             value={single}
             minValue="0"
             maxValue="100"
@@ -56,7 +50,7 @@ stories.add("Slider", () => {
         }
       >
         <div className="w-full space-y-2">
-          <Slider
+          <SliderImpl
             value={steppedValue}
             minValue="0"
             maxValue="100"
@@ -82,7 +76,7 @@ stories.add("Slider", () => {
         }
       >
         <div className="w-full space-y-2">
-          <Slider
+          <SliderImpl
             type="range"
             min={rangeMin}
             max={rangeMax}
@@ -111,7 +105,7 @@ stories.add("Slider", () => {
         }
       >
         <div className="w-full space-y-2">
-          <Slider
+          <SliderImpl
             type="range"
             min={invalidMin}
             max={invalidMax}
@@ -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";
+import { TextButton as TextButtonImpl } from ".";
 
-const stories = storiesOf("Action", module);
+const meta = { title: "Action/Text Button" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Text Button", () => {
-  return <TextButton text="Click Me" onClick={() => {}} />;
-});
+export const TextButton = () => {
+  return <TextButtonImpl text="Click Me" onClick={() => {}} />;
+}

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

@@ -1,23 +1,17 @@
-import { storiesOf } from "@storybook/react";
 import React from "react";
-import { Toggle } from ".";
-import README from "./README.md";
+import { Toggle as ToggleImpl } from ".";
 
-const stories = storiesOf("Action", module);
+const meta = { title: "Action/Toggle" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Toggle", () => {
+export const Toggle = () => {
   return (
-    <Toggle
+    <ToggleImpl
       direction="right"
       text="Toggle Sample"
       value={true}
       onClick={() => {}}
     />
   );
-});
+}