blixify-ui-web-mcp 0.1.1

package/README.md

@@ -0,0 +1,5 @@
+# Blixify UI Web
+
+//TODO : Code - Remove Vfile once there is 6.0.3
+//TODO : Code - Remove rehype-sanitize once react-md-editor is usable
+//TODO : Code - Remove lib as we should use from own package.json

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

@@ -0,0 +1,75 @@
+# Button
+
+<!-- STORY -->
+
+<hr>
+
+A component for triggering a user action. e.g: a submit button in a form
+
+##### Import
+
+```js
+import { Button } from "blixify-ui-web/action/button";
+```
+
+##### Usage
+
+All button types:
+
+```jsx
+<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" />
+<Button text="Dark Mode" size="small" type="darkMode" />
+```
+
+With an icon:
+
+```jsx
+<Button text="Add Item" size="small" type="normal" icon={<MyIcon />} />
+```
+
+As a dropdown:
+
+```jsx
+<Button
+  text="Options"
+  size="small"
+  type="normal"
+  popUpMenuItems={[
+    { text: "Edit", onClick: (text) => {} },
+    { text: "Delete", onClick: (text) => {} },
+  ]}
+  popUpDirection="bottom"
+  popUpAnchor="left"
+/>
+```
+
+Disabled:
+
+```jsx
+<Button text="Submit" size="small" type="normal" disable={true} />
+```
+
+##### Required props
+
+| Name   | Type     | Description           |
+| ------ | -------- | --------------------- |
+| `text` | `string` | Content of the button |
+| `type` | `string` | Type of the button    |
+
+##### 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               |

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

@@ -0,0 +1,138 @@
+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);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Button", () => (
+  <div className="font-sans max-w-2xl p-6">
+    <StorySection
+      title="Button Types"
+      description={
+        <>
+          All available <code>type</code> values. Use <code>normal</code> for
+          primary actions, <code>dark</code> for emphasis, <code>light</code> on
+          colored backgrounds, <code>icon</code> for outlined icon-adjacent
+          buttons, and <code>danger</code> for destructive actions.
+        </>
+      }
+    >
+      <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" />
+    </StorySection>
+
+    <StorySection
+      title="Dark Mode"
+      description={
+        <>
+          Use <code>type="darkMode"</code> when the button sits on a dark-themed
+          surface.
+        </>
+      }
+      dark
+    >
+      <Button text="Dark Mode" size="small" type="darkMode" />
+    </StorySection>
+
+    <StorySection
+      title="Sizes"
+      description={
+        <>
+          Three sizes via the <code>size</code> prop: default (no prop),{" "}
+          <code>small</code>, and <code>extraSmall</code>.
+        </>
+      }
+    >
+      <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" />
+      </div>
+    </StorySection>
+
+    <StorySection
+      title="With Icon"
+      description={
+        <>
+          Pass any <code>ReactElement</code> to the <code>icon</code> prop to
+          render it before the button label. Works with any icon library.
+        </>
+      }
+    >
+      <Button
+        text="Add Item"
+        size="small"
+        type="normal"
+        icon={<span className="mr-1.5">＋</span>}
+      />
+      <Button
+        text="Settings"
+        size="small"
+        type="icon"
+        icon={<span className="mr-1.5">⚙</span>}
+      />
+    </StorySection>
+
+    <StorySection
+      title="Dropdown (popUpMenuItems)"
+      description={
+        <>
+          When <code>popUpMenuItems</code> is provided, the button becomes a
+          dropdown trigger. Use <code>popUpDirection</code> (<code>"top"</code>{" "}
+          | <code>"bottom"</code>) and <code>popUpAnchor</code> (
+          <code>"left"</code> | <code>"right"</code>) to control placement.
+        </>
+      }
+    >
+      <Button
+        text="Opens Below Left"
+        size="small"
+        type="normal"
+        popUpMenuItems={[
+          { text: "Edit", onClick: () => {} },
+          { text: "Duplicate", onClick: () => {} },
+          { text: "Delete", onClick: () => {} },
+        ]}
+        popUpDirection="bottom"
+        popUpAnchor="left"
+      />
+      <Button
+        text="Opens Below Right"
+        size="small"
+        type="light"
+        popUpMenuItems={[
+          { text: "Export CSV", onClick: () => {} },
+          { text: "Export PDF", onClick: () => {} },
+        ]}
+        popUpDirection="bottom"
+        popUpAnchor="right"
+      />
+    </StorySection>
+
+    <StorySection
+      title="Disabled State"
+      description={
+        <>
+          Set <code>disable={"{true}"}</code> to block interaction. Renders at
+          reduced opacity with <code>cursor-not-allowed</code>. Applies to all
+          types.
+        </>
+      }
+    >
+      <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} />
+    </StorySection>
+  </div>
+));

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

@@ -0,0 +1,79 @@
+# Button Group
+
+<!-- STORY -->
+
+<hr>
+
+A segmented control for selecting between mutually exclusive choices.
+
+##### Import
+
+```js
+import { ButtonGroup } from "blixify-ui-web/action/buttonGroup";
+```
+
+##### Usage
+
+Default:
+
+```jsx
+<ButtonGroup
+  selection={[
+    { id: "item1", name: "Item 1" },
+    { id: "item2", name: "Item 2" },
+    { id: "item3", name: "Item 3" },
+  ]}
+  selectedId={selectedId}
+  onClick={(id) => setSelectedId(id)}
+/>
+```
+
+Small size:
+
+```jsx
+<ButtonGroup
+  selection={selection}
+  selectedId={selectedId}
+  onClick={(id) => setSelectedId(id)}
+  size="small"
+/>
+```
+
+Tag variant:
+
+```jsx
+<ButtonGroup
+  selection={selection}
+  selectedId={selectedId}
+  onClick={(id) => setSelectedId(id)}
+  variant="tag"
+/>
+```
+
+Dark mode:
+
+```jsx
+<ButtonGroup
+  selection={selection}
+  selectedId={selectedId}
+  onClick={(id) => setSelectedId(id)}
+  darkMode={true}
+/>
+```
+
+##### Required props
+
+| Name         | Type                             | Description                             |
+| ------------ | -------------------------------- | --------------------------------------- |
+| `selection`  | `{ id: string; name: string }[]` | List of items to render as buttons      |
+| `selectedId` | `string`                         | The `id` of the currently selected item |
+
+##### Optional props
+
+| Name                 | Type                   | Default     | Description                                                        |
+| -------------------- | ---------------------- | ----------- | ------------------------------------------------------------------ |
+| `onClick`            | `(id: string) => void` | `undefined` | Called with the `id` of the clicked item                           |
+| `containerClassName` | `string`               | `""`        | Tailwind classes applied to the outer container                    |
+| `size`               | `"small"`              | `undefined` | Reduces font size and padding for a compact layout                 |
+| `variant`            | `"tag"`                | `undefined` | Renders pill/tag style buttons without borders, separated by a gap |
+| `darkMode`           | `boolean`              | `false`     | Switches to dark background and text colors for dark surfaces      |

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

@@ -0,0 +1,104 @@
+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);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const defaultSelection = [
+  { id: "item1", name: "Item 1" },
+  { id: "item2", name: "Item 2" },
+  { id: "item3", name: "Item 3" },
+];
+
+stories.add("Button Group", () => {
+  const [selectedId, setSelectedId] = useState("item1");
+
+  return (
+    <div className="font-sans max-w-2xl p-6">
+      <StorySection
+        title="Default"
+        description="Standard segmented button group. Each item is a bordered button; the selected item is highlighted with the primary color ring."
+      >
+        <ButtonGroup
+          selection={defaultSelection}
+          containerClassName="w-full"
+          onClick={setSelectedId}
+          selectedId={selectedId}
+        />
+      </StorySection>
+
+      <StorySection
+        title="Small"
+        description={
+          <>
+            Use <code>size="small"</code> for a more compact layout with reduced
+            padding and font size.
+          </>
+        }
+      >
+        <ButtonGroup
+          selection={defaultSelection}
+          containerClassName="w-full"
+          onClick={setSelectedId}
+          selectedId={selectedId}
+          size="small"
+        />
+      </StorySection>
+
+      <StorySection
+        title="Variant: Tag"
+        description={
+          <>
+            Use <code>variant="tag"</code> for a pill/tag style group without
+            borders. Items sit inline with a gap. Also supports{" "}
+            <code>size="small"</code>.
+          </>
+        }
+      >
+        <ButtonGroup
+          selection={defaultSelection}
+          containerClassName="w-full"
+          onClick={setSelectedId}
+          selectedId={selectedId}
+          variant="tag"
+        />
+        <ButtonGroup
+          selection={defaultSelection}
+          containerClassName="w-full"
+          onClick={setSelectedId}
+          selectedId={selectedId}
+          variant="tag"
+          size="small"
+        />
+      </StorySection>
+
+      <StorySection
+        title="Dark Mode"
+        description={
+          <>
+            Set <code>darkMode=&#123;true&#125;</code> for use on dark
+            backgrounds. Switches the button background and text to dark-theme
+            colors.
+          </>
+        }
+        dark
+      >
+        <ButtonGroup
+          selection={defaultSelection}
+          containerClassName="w-full"
+          onClick={setSelectedId}
+          selectedId={selectedId}
+          darkMode={true}
+        />
+      </StorySection>
+    </div>
+  );
+});

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

@@ -0,0 +1,39 @@
+# Icon Button
+
+<!-- STORY -->
+
+<hr>
+
+A component for triggering a user action with Icon. e.g: a submit button in a form
+
+##### Import
+
+```js
+import { IconButton } from "blixify-ui-web/action/iconButton";
+```
+
+##### Usage
+
+```jsx
+<IconButton
+  icon={<Bars3Icon className="h-5 w-5 text-gray-400" />}
+  onClick={() => {}}
+  className="rounded-md"
+/>
+```
+
+##### Required props
+
+| Name   | Type            | Description |
+| ------ | --------------- | ----------- |
+| `icon` | `React Element` | Hero Icons  |
+
+##### Optional props
+
+| Name         | Type             | Default               | Description |
+| ------------ | ---------------- | --------------------- | ----------- |
+| `disabled`   | `boolean`        | `false`               |             |
+| `background` | `tailwind class` | ""                    |             |
+| `className`  | `tailwind class` | ""                    |             |
+| `bgColor`    | `string`         | Icon background color |
+| `onClick`    | `function`       | `() => {}`            |             |

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

@@ -0,0 +1,22 @@
+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);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Icon Button", () => {
+  return (
+    <IconButton
+      icon={<Bars3Icon className="h-5 w-5 text-gray-400" />}
+      onClick={() => {}}
+    />
+  );
+});

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

@@ -0,0 +1,98 @@
+# Radio List
+
+<!-- STORY -->
+
+<hr>
+
+A radio (or checkbox) list for selecting one or multiple options from a predefined set. Supports custom user-added values, horizontal layout, and per-item disabled states.
+
+##### Import
+
+```js
+import { RadioList, RadioListItem } from "blixify-ui-web/action/radioList";
+```
+
+##### Usage
+
+Single select (vertical):
+
+```jsx
+const [value, setValue] = useState("");
+
+<RadioList
+  id="diet"
+  list={list}
+  value={value}
+  optional
+  onSelect={(val) => setValue(val)}
+/>;
+```
+
+Single select (horizontal):
+
+```jsx
+<RadioList
+  id="diet"
+  list={list}
+  value={value}
+  optional
+  horizontal
+  onSelect={(val) => setValue(val)}
+/>
+```
+
+Multi select — pass a `string[]` to `value` to enable checkbox mode:
+
+```jsx
+const [value, setValue] = useState<string[]>([]);
+
+<RadioList
+  id="diet"
+  list={list}
+  value={value}
+  optional
+  onSelect={(val) => setValue(val)}
+/>
+```
+
+Allow user to add custom values:
+
+```jsx
+<RadioList
+  id="diet"
+  list={list}
+  value={value}
+  newValue
+  placeholder="Enter a custom option..."
+  onSelect={(val) => setValue(val)}
+/>
+```
+
+##### Required props
+
+| Name       | Type                                               | Description                                                                            |
+| ---------- | -------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| `list`     | `RadioListItem[]`                                  | Items to render as options                                                             |
+| `value`    | `string \| string[]`                               | Currently selected value. Pass `string` for single select, `string[]` for multi-select |
+| `onSelect` | `(value: string \| string[], id?: string) => void` | Called when an item is selected or deselected                                          |
+
+##### Optional props
+
+| Name          | Type      | Default                 | Description                                                                   |
+| ------------- | --------- | ----------------------- | ----------------------------------------------------------------------------- |
+| `id`          | `string`  | `undefined`             | Prefix for input element IDs, useful when multiple lists are on the same page |
+| `name`        | `string`  | `undefined`             | Name attribute for grouping radio inputs                                      |
+| `optional`    | `boolean` | `false`                 | Allows deselecting the current selection by clicking it again                 |
+| `horizontal`  | `boolean` | `false`                 | Lays items out in a wrapping row instead of a vertical stack                  |
+| `newValue`    | `boolean` | `false`                 | Shows an "+ Add new value" button for typing in custom options                |
+| `placeholder` | `string`  | `"Type a new value..."` | Placeholder text for the new value input field                                |
+
+##### RadioListItem
+
+| Name         | Type           | Description                                                  |
+| ------------ | -------------- | ------------------------------------------------------------ |
+| `id`         | `string`       | Unique identifier for the item                               |
+| `label`      | `string`       | Display label shown next to the radio/checkbox input         |
+| `content`    | `string`       | Optional description text rendered below the label           |
+| `addContent` | `ReactElement` | Optional React element rendered below the label or content   |
+| `disabled`   | `boolean`      | When `true`, the item is non-interactive and visually dimmed |