blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,181 @@
+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);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const baseList: RadioListItem[] = [
+  {
+    id: "vegan",
+    label: "Vegan",
+    content:
+      "I follow a plant-based diet, avoiding all animal products including meat, dairy, and eggs.",
+  },
+  {
+    id: "vegetarian",
+    label: "Vegetarian",
+    content: "I don't eat meat or fish, but dairy and eggs are fine.",
+  },
+  {
+    id: "pesca",
+    label: "Pescatarian",
+    content: "I don't eat meat, but I enjoy fish and seafood.",
+  },
+  {
+    id: "glutenFree",
+    label: "Gluten-free",
+    content:
+      "I avoid gluten — no wheat, barley, rye, or anything containing gluten.",
+    addContent: <TextButton text="More info" />,
+  },
+  {
+    id: "omni",
+    label: "Omnivore (Regular)",
+    content:
+      "No dietary restrictions — comfortable with meat, dairy, grains, and vegetables.",
+    addContent: (
+      <img
+        alt="omnivore diet"
+        src="https://organi.pt/wp-content/uploads/2022/04/dieta-vegan-vegetariana-ou-omnivora-qual-a-mais-saudavel.png"
+        className="my-4 rounded-lg h-24"
+      />
+    ),
+  },
+];
+
+stories.add("Radio List", () => {
+  const [singleValue, setSingleValue] = useState("");
+  const [multiValue, setMultiValue] = useState<string[]>([]);
+
+  return (
+    <div className="font-sans max-w-2xl p-6">
+      <StorySection
+        title="Single Select (Vertical)"
+        description={
+          <>
+            Default radio list. Pass a <code>string</code> to <code>value</code>{" "}
+            for single selection. Set <code>optional</code> to allow deselecting
+            the current choice.
+          </>
+        }
+      >
+        <div className="w-full">
+          <RadioList
+            id="single-vertical"
+            list={baseList}
+            value={singleValue}
+            optional
+            horizontal={false}
+            onSelect={(val) => setSingleValue(val)}
+          />
+          <p className="mt-4 text-sm text-primary-500 font-semibold">
+            Selected:{" "}
+            {baseList.find((i) => i.id === singleValue)?.label ?? "None"}
+          </p>
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Single Select (Horizontal)"
+        description={
+          <>
+            Set <code>horizontal=&#123;true&#125;</code> to lay items out in a
+            wrapping row instead of a vertical list. Useful for compact option
+            sets.
+          </>
+        }
+      >
+        <div className="w-full">
+          <RadioList
+            id="single-horizontal"
+            list={baseList}
+            value={singleValue}
+            optional
+            horizontal
+            onSelect={(val) => setSingleValue(val)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Multi Select (Checkbox)"
+        description={
+          <>
+            Pass a <code>string[]</code> to <code>value</code> to enable
+            multi-select mode. Items render as checkboxes instead of radio
+            buttons.
+          </>
+        }
+      >
+        <div className="w-full">
+          <RadioList
+            id="multi"
+            list={baseList}
+            value={multiValue}
+            optional
+            onSelect={(val) => setMultiValue(val)}
+          />
+          <p className="mt-4 text-sm text-primary-500 font-semibold">
+            Selected: {multiValue.length > 0 ? multiValue.join(", ") : "None"}
+          </p>
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="New Value Input"
+        description={
+          <>
+            Set <code>newValue=&#123;true&#125;</code> to show an "+ Add new
+            value" button. The user can type a custom option which gets added to
+            the list and selected. Use <code>placeholder</code> to customise the
+            input hint text.
+          </>
+        }
+      >
+        <div className="w-full">
+          <RadioList
+            id="new-value"
+            list={baseList}
+            value={multiValue}
+            optional
+            newValue
+            placeholder="Enter a custom diet..."
+            onSelect={(val) => setMultiValue(val)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Disabled Items"
+        description={
+          <>
+            Set <code>disabled: true</code> on individual{" "}
+            <code>RadioListItem</code> entries to prevent interaction with
+            specific options.
+          </>
+        }
+      >
+        <div className="w-full">
+          <RadioList
+            id="disabled-items"
+            list={baseList.map((item, i) =>
+              i === 1 || i === 3 ? { ...item, disabled: true } : item
+            )}
+            value={singleValue}
+            optional
+            onSelect={(val) => setSingleValue(val)}
+          />
+        </div>
+      </StorySection>
+    </div>
+  );
+});

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

@@ -0,0 +1,86 @@
+# Slider
+
+<!-- STORY -->
+
+<hr>
+
+A slider for selecting a single value or a range. Supports step intervals and enforces a minimum gap between range handles.
+
+##### Import
+
+```js
+import { Slider } from "blixify-ui-web/action/slider";
+```
+
+##### Usage
+
+Single value:
+
+```jsx
+const [value, setValue] = useState("50");
+
+<Slider
+  value={value}
+  minValue="0"
+  maxValue="100"
+  onChangeValue={(val) => setValue(val)}
+/>;
+```
+
+Single value with step:
+
+```jsx
+<Slider
+  value={value}
+  minValue="0"
+  maxValue="100"
+  step="10"
+  onChangeValue={(val) => setValue(val)}
+/>
+```
+
+Range:
+
+```jsx
+const [min, setMin] = useState("20");
+const [max, setMax] = useState("80");
+
+<Slider
+  type="range"
+  min={min}
+  max={max}
+  minValue="0"
+  maxValue="100"
+  onChangeValue={(min, max) => {
+    setMin(min);
+    setMax(max);
+  }}
+/>;
+```
+
+##### Required props
+
+Single value mode (`type="single"` or omitted):
+
+| Name            | Type                      | Description                          |
+| --------------- | ------------------------- | ------------------------------------ |
+| `value`         | `string`                  | Current value of the slider          |
+| `onChangeValue` | `(value: string) => void` | Called when the slider value changes |
+
+Range mode (`type="range"`):
+
+| Name            | Type                                 | Description                           |
+| --------------- | ------------------------------------ | ------------------------------------- |
+| `type`          | `"range"`                            | Must be set to `"range"`              |
+| `min`           | `string`                             | Current minimum of the selected range |
+| `max`           | `string`                             | Current maximum of the selected range |
+| `onChangeValue` | `(min: string, max: string) => void` | Called when either handle moves       |
+
+##### Optional props
+
+| Name        | Type     | Default | Description                                                   |
+| ----------- | -------- | ------- | ------------------------------------------------------------- |
+| `minValue`  | `string` | `"0"`   | Lower bound of the track                                      |
+| `maxValue`  | `string` | `"100"` | Upper bound of the track                                      |
+| `step`      | `string` | `"1"`   | Snap interval for the thumb(s)                                |
+| `className` | `string` | `""`    | Additional Tailwind classes applied to the single-value input |

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

@@ -0,0 +1,133 @@
+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);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Slider", () => {
+  const [single, setSingle] = useState("50");
+  const [steppedValue, setSteppedValue] = useState("50");
+  const [rangeMin, setRangeMin] = useState("20");
+  const [rangeMax, setRangeMax] = useState("80");
+  const [invalidMin, setInvalidMin] = useState("50");
+  const [invalidMax, setInvalidMax] = useState("50");
+
+  return (
+    <div className="font-sans max-w-2xl p-6">
+      <StorySection
+        title="Single Value"
+        description={
+          <>
+            Default mode. Pass a <code>string</code> to <code>value</code> and
+            handle updates via <code>onChangeValue</code>. Use{" "}
+            <code>minValue</code> and <code>maxValue</code> to set the track
+            bounds.
+          </>
+        }
+      >
+        <div className="w-full space-y-2">
+          <Slider
+            value={single}
+            minValue="0"
+            maxValue="100"
+            onChangeValue={(val) => setSingle(val)}
+          />
+          <p className="text-sm text-gray-600">
+            Value: <span className="font-medium">{single}</span>
+          </p>
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Single Value with Step"
+        description={
+          <>
+            Use <code>step</code> to control the increment interval. Here{" "}
+            <code>step="10"</code> snaps the thumb to multiples of 10.
+          </>
+        }
+      >
+        <div className="w-full space-y-2">
+          <Slider
+            value={steppedValue}
+            minValue="0"
+            maxValue="100"
+            step="10"
+            onChangeValue={(val) => setSteppedValue(val)}
+          />
+          <p className="text-sm text-gray-600">
+            Value: <span className="font-medium">{steppedValue}</span>
+          </p>
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Range"
+        description={
+          <>
+            Set <code>type="range"</code> and provide <code>min</code> /{" "}
+            <code>max</code> for the current selection.{" "}
+            <code>onChangeValue</code> receives both values as{" "}
+            <code>(min, max)</code>. The component enforces a minimum gap
+            between handles.
+          </>
+        }
+      >
+        <div className="w-full space-y-2">
+          <Slider
+            type="range"
+            min={rangeMin}
+            max={rangeMax}
+            minValue="0"
+            maxValue="100"
+            onChangeValue={(min, max) => {
+              setRangeMin(min);
+              setRangeMax(max);
+            }}
+          />
+          <p className="text-sm text-gray-600">
+            Range: <span className="font-medium">{rangeMin}</span> –{" "}
+            <span className="font-medium">{rangeMax}</span>
+          </p>
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Range — Invalid Initial State"
+        description={
+          <>
+            When <code>min</code> equals <code>max</code> on mount, the
+            component automatically adjusts the values to maintain the minimum
+            gap and shows an inline error message.
+          </>
+        }
+      >
+        <div className="w-full space-y-2">
+          <Slider
+            type="range"
+            min={invalidMin}
+            max={invalidMax}
+            minValue="0"
+            maxValue="100"
+            onChangeValue={(min, max) => {
+              setInvalidMin(min);
+              setInvalidMax(max);
+            }}
+          />
+          <p className="text-sm text-gray-600">
+            Range: <span className="font-medium">{invalidMin}</span> –{" "}
+            <span className="font-medium">{invalidMax}</span>
+          </p>
+        </div>
+      </StorySection>
+    </div>
+  );
+});

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

@@ -0,0 +1,34 @@
+# Text Button
+
+<!-- STORY -->
+
+<hr>
+
+A text component for triggering a user action. e.g: a submit button in a form
+
+##### Import
+
+```js
+import { TextButton } from "blixify-ui-web/action/textButton";
+```
+
+##### Usage
+
+```jsx
+<TextButton text="Click Me" onClick={() => {}} />
+```
+
+##### Required props
+
+| Name   | Type     | Description           |
+| ------ | -------- | --------------------- |
+| `text` | `string` | Content of the button |
+
+##### Optional props
+
+| Name        | Type             | Default    | Description |
+| ----------- | ---------------- | ---------- | ----------- |
+| `icon`      | `React Element`  | null       |             |
+| `disabled`  | `boolean`        | `false`    |             |
+| `className` | `tailwind class` | ""         |
+| `onClick`   | `function`       | `() => {}` |             |

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

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

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

@@ -0,0 +1,39 @@
+# Toggle Button
+
+<!-- STORY -->
+
+<hr>
+
+Toggle Component to change between false & true
+
+##### Import
+
+```js
+import { ToggleButton } from "blixify-ui-web/action/toggleButton";
+```
+
+##### Usage
+
+```jsx
+<Toggle
+  direction="right"
+  text="Toggle Sample"
+  value={true}
+  onClick={() => {}}
+/>
+```
+
+##### Required props
+
+| Name        | Type           | Description                 |
+| ----------- | -------------- | --------------------------- |
+| `text`      | `string`       | Description of the toggle   |
+| `direction` | `left / right` | Placement of the toggle     |
+| `value`     | `boolean`      | Whether toggle is activated |
+
+##### Optional props
+
+| Name        | Type             | Default    | Description |
+| ----------- | ---------------- | ---------- | ----------- |
+| `className` | `tailwind class` | ""         |             |
+| `onClick`   | `function`       | `() => {}` |             |

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

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

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

@@ -0,0 +1,106 @@
+# Collapse
+
+<!-- STORY -->
+
+<hr>
+
+An expandable/collapsible panel with a clickable header. Supports external or internal state control, custom header styling, and an optional expand button.
+
+##### Import
+
+```js
+import { Collapse } from "blixify-ui-web/advanced/collapse";
+```
+
+##### Usage
+
+Basic (external state):
+
+```jsx
+const [collapse, setCollapse] = useState(true);
+
+<Collapse
+  title="Section Title"
+  icon={<MapIcon className="w-5 h-5 text-primary-500" />}
+  content={<div className="p-3">Content goes here</div>}
+  collapse={collapse}
+  handleCollapse={() => setCollapse((prev) => !prev)}
+/>;
+```
+
+Internal state (no `handleCollapse`):
+
+```jsx
+<Collapse
+  title="Section Title"
+  icon={<MapIcon className="w-5 h-5 text-primary-500" />}
+  content={<div className="p-3">Content goes here</div>}
+  defaultValue={false}
+/>
+```
+
+Custom header styling:
+
+```jsx
+<Collapse
+  title="Section Title"
+  desc="Optional subtitle"
+  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={content}
+  collapse={collapse}
+  handleCollapse={() => setCollapse((prev) => !prev)}
+/>
+```
+
+With additional header component and expand button:
+
+```jsx
+<Collapse
+  title="Section Title"
+  icon={<MapIcon className="w-5 h-5" />}
+  additionalComp={
+    <SomeIcon
+      onClick={(e) => {
+        e.stopPropagation(); // prevent toggling collapse
+      }}
+    />
+  }
+  collapseAdditionalComp={<SummaryWidget />}
+  content={content}
+  collapse={collapse}
+  handleCollapse={() => setCollapse((prev) => !prev)}
+  expandBtn
+/>
+```
+
+##### Required props
+
+| Name      | Type           | Description                                                              |
+| --------- | -------------- | ------------------------------------------------------------------------ |
+| `title`   | `string`       | Header title text                                                        |
+| `icon`    | `ReactElement` | Icon displayed at the left of the header. Pass `<></>` to render nothing |
+| `content` | `ReactElement` | Content shown when panel is expanded                                     |
+
+##### Optional props
+
+| Name                      | Type           | Default                   | Description                                                                                                         |
+| ------------------------- | -------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| `collapse`                | `boolean`      | —                         | Controlled expanded state. `true` = expanded (content visible). Omit to use internal state                          |
+| `defaultValue`            | `boolean`      | `false`                   | Initial expanded state when using internal state (no `handleCollapse`)                                              |
+| `handleCollapse`          | `() => void`   | —                         | Called when the header is clicked. Omit to let the component manage its own state                                   |
+| `desc`                    | `string`       | —                         | Subtitle text rendered below the title                                                                              |
+| `additionalComp`          | `ReactElement` | —                         | Extra element rendered in the header row, left of the chevron. Use `stopPropagation` on its click to avoid toggling |
+| `collapseAdditionalComp`  | `ReactElement` | —                         | Component rendered below the header only when the panel is collapsed (content hidden)                               |
+| `expandBtn`               | `boolean`      | `false`                   | Shows a tag button at the bottom of the panel to toggle expanded state                                              |
+| `containerClassName`      | `string`       | —                         | Tailwind classes for the outer wrapper                                                                              |
+| `collapseContainerCss`    | `string`       | —                         | Tailwind classes for the header when the panel is expanded                                                          |
+| `notCollapseContainerCss` | `string`       | —                         | Tailwind classes for the header when the panel is collapsed                                                         |
+| `titleClassName`          | `string`       | —                         | Tailwind classes for the title text                                                                                 |
+| `descClassName`           | `string`       | —                         | Tailwind classes for the description text                                                                           |
+| `iconClassName`           | `string`       | `"w-5 h-5 text-gray-400"` | Tailwind classes for the chevron icon                                                                               |
+| `formInputRefList`        | `any[]`        | —                         | Refs to child form inputs. When provided, collapsing validates all inputs before closing                            |