blixify-ui-web-mcp 0.1.1

package/lib/components/input/form/form.stories.tsx

@@ -0,0 +1,143 @@
+import { storiesOf } from "@storybook/react";
+import axios from "axios";
+import React, { useRef, useState } from "react";
+import { Form } from ".";
+import { Button } from "../../action/button";
+import { RadioList } from "../../action/radioList";
+import { StorySection } from "../../storyUtils";
+import { TextInput } from "../textInput";
+import { UploadInput } from "../uploadInput";
+import README from "./README.md";
+
+const stories = storiesOf("Input", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Form", () => {
+  const formRef = useRef<any>(null);
+  const input1 = useRef<any>(null);
+  const input2 = useRef<any>(null);
+  const uploadRef = useRef<any>(null);
+
+  const [radioValue, setRadioValue] = useState("");
+  const [textValue, setTextValue] = useState("");
+  const [file, setFile] = useState<any>(undefined);
+  const [result, setResult] = useState<string | null>(null);
+
+  const failFormRef = useRef<any>(null);
+  const failInput1 = useRef<any>(null);
+  const failInput2 = useRef<any>(null);
+  const [failText1, setFailText1] = useState("");
+  const [failText2, setFailText2] = useState("");
+  const [failedFields, setFailedFields] = useState<string[]>([]);
+
+  return (
+    <>
+      <StorySection
+        title="Basic Form Validation"
+        description="Wrap inputs in Form and pass their refs to refList. Calling formRef.current.handleSubmit() validates all inputs in parallel and calls handleComplete only if all pass."
+      >
+        <div className="w-full max-w-sm">
+          <Form
+            ref={formRef}
+            refList={[input1, input2, uploadRef]}
+            handleComplete={() => setResult("All valid — form submitted!")}
+          >
+            <RadioList
+              ref={input1}
+              horizontal={true}
+              list={[
+                { id: "approved", label: "✔️ Approve" },
+                { id: "rejected", label: "✖️ Reject" },
+              ]}
+              value={radioValue}
+              onSelect={setRadioValue}
+            />
+            <TextInput
+              ref={input2}
+              id="name"
+              value={textValue}
+              type="text"
+              label="Full Name"
+              placeholder="Enter your name"
+              containerClassName="mt-3"
+              onChange={(e) => setTextValue(e.target.value)}
+            />
+            <UploadInput
+              ref={uploadRef}
+              id="file-upload"
+              label="Supporting Document"
+              file={file}
+              lib={{ axios }}
+              accept="image/*"
+              fileDescription="Upload an image file"
+              className="mt-3"
+              onChange={(e) => {
+                if (e.target.files.length > 0) setFile(e.target.files[0]);
+                else setFile(undefined);
+              }}
+            />
+            <Button
+              className="mt-4"
+              text="Submit"
+              size="small"
+              type="normal"
+              onClick={() => formRef.current?.handleSubmit()}
+            />
+          </Form>
+          {result && <p className="mt-3 text-sm text-green-600">{result}</p>}
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="handleOnFailValidation"
+        description="handleOnFailValidation receives an array of failed input ids so you can highlight or scroll to them."
+      >
+        <div className="w-full max-w-sm">
+          <Form
+            ref={failFormRef}
+            refList={[failInput1, failInput2]}
+            handleOnFailValidation={(ids) => setFailedFields(ids)}
+            handleComplete={() => setFailedFields([])}
+          >
+            <TextInput
+              ref={failInput1}
+              id="email"
+              value={failText1}
+              type="email"
+              label="Email"
+              placeholder="test@example.com"
+              onChange={(e) => setFailText1(e.target.value)}
+            />
+            <TextInput
+              ref={failInput2}
+              id="password"
+              value={failText2}
+              type="password"
+              label="Password"
+              placeholder="Min 6 characters"
+              containerClassName="mt-3"
+              onChange={(e) => setFailText2(e.target.value)}
+            />
+            <Button
+              className="mt-4"
+              text="Submit"
+              size="small"
+              type="normal"
+              onClick={() => failFormRef.current?.handleSubmit()}
+            />
+          </Form>
+          {failedFields.length > 0 && (
+            <p className="mt-3 text-sm text-red-500">
+              Failed: {failedFields.join(", ")}
+            </p>
+          )}
+        </div>
+      </StorySection>
+    </>
+  );
+});

package/lib/components/input/markdown/README.md

@@ -0,0 +1,146 @@
+# Markdown Input
+
+<!-- STORY -->
+
+<hr>
+
+Markdown input to enter markdown value with rich text editing. Supports images, videos, tables, task lists, and various text formatting options. Press `/` to see available commands.
+
+##### Import
+
+```js
+import { MarkdownInput } from "blixify-ui-web/components/input/markdown";
+```
+
+##### Usage
+
+```tsx
+const markdownRef: any = useRef(null);
+const [value, setValue] = useState<string | undefined>("");
+const handleOnChange = (id: string, value?: string) => setValue(value);
+
+return (
+  <MarkdownInput
+    ref={markdownRef}
+    id="markdown"
+    label="Markdown Editor"
+    subLabel="Enter your markdown content below"
+    value={value ?? ""}
+    onChange={handleOnChange}
+    placeholder="Start typing your markdown content here..."
+    enableImageUpload={true}
+    enableVideoUpload={true}
+    darkMode={false}
+  />
+);
+```
+
+##### With Image/Video Upload Handler
+
+```tsx
+const markdownRef: any = useRef(null);
+const [value, setValue] = useState<string | undefined>("");
+
+// Upload handler for Firebase or custom storage
+const handleUpload = async (file: File, path: string): Promise<string> => {
+  const storageRef = ref(storage, path);
+  await uploadBytes(storageRef, file);
+  return await getDownloadURL(storageRef);
+};
+
+// Upload pending images after form submission
+const handleSubmit = async () => {
+  if (markdownRef.current) {
+    const updatedHtml = await markdownRef.current.uploadPendingImages(
+      "collectionId",
+      "dataId",
+      "fieldId",
+      handleUpload
+    );
+    // Now save the data with updated URLs
+  }
+};
+
+return (
+  <MarkdownInput
+    ref={markdownRef}
+    label="Markdown Editor"
+    value={value ?? ""}
+    onChange={handleOnChange}
+    placeholder="Type here..."
+    enableImageUpload={true}
+    enableVideoUpload={true}
+  />
+);
+```
+
+##### With Image Compression
+
+```tsx
+<MarkdownInput
+  label="Markdown Editor"
+  value={value ?? ""}
+  onChange={handleOnChange}
+  placeholder="Type here..."
+  enableImageUpload={true}
+  compress={{
+    maxFileSize: 10, // Max 10MB
+    fileQuality: 0.8, // 80% quality
+  }}
+/>
+```
+
+##### Read-Only Mode (Preview)
+
+```tsx
+<MarkdownInput
+  label="Markdown Preview"
+  value={value ?? ""}
+  onChange={handleOnChange}
+  placeholder=""
+  readOnly={true}
+/>
+```
+
+##### Required props
+
+| Name          | Type                                 | Description                            |
+| ------------- | ------------------------------------ | -------------------------------------- |
+| `value`       | `string`                             | `The markdown input value`             |
+| `label`       | `string`                             | `Label of the input`                   |
+| `placeholder` | `string`                             | `Placeholder of the input`             |
+| `onChange`    | `(id: string, value?: string) => {}` | `Event handler for the onChange event` |
+
+##### Optional props
+
+| Name                 | Type                                            | Default | Description                                                                                                      |
+| -------------------- | ----------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `id`                 | `string`                                        | ""      |                                                                                                                  |
+| `ref`                | `Ref`                                           | `null`  | Access to methods like `handleSubmit`, `getMarkdown`, `setMarkdown`, `uploadPendingImages`, `clearPendingImages` |
+| `subLabel`           | `string`                                        | `null`  | Secondary label text below the main label                                                                        |
+| `labelExtra`         | `ReactElement`                                  | `null`  | Extra element to display next to the label                                                                       |
+| `infoElement`        | `ReactElement`                                  | `null`  | Info icon with content to display                                                                                |
+| `optional`           | `boolean`                                       | `false` | If true, validation allows empty content                                                                         |
+| `disabled`           | `boolean`                                       | `false` | `Disable clicking and typing on Markdown Input`                                                                  |
+| `containerClassName` | `string`                                        | `null`  | `Tailwind classname for container that wraps around the Markdown Input`                                          |
+| `heightClassName`    | `string`                                        | `h-72`  | `Tailwind classname for editor height (e.g., "h-96", "h-screen")`                                                |
+| `darkMode`           | `boolean`                                       | `false` | Enable dark mode styling                                                                                         |
+| `readOnly`           | `boolean`                                       | `false` | `For uneditable Markdown Preview (hides toolbar and disables editing)`                                           |
+| `enableImageUpload`  | `boolean`                                       | `false` | Enable image upload functionality (drag-and-drop, paste, click to upload)                                        |
+| `enableVideoUpload`  | `boolean`                                       | `false` | Enable video upload functionality (supports MP4, MOV, WebM, AVI, MKV, etc.)                                      |
+| `compress`           | `{ maxFileSize?: number, fileQuality?: number}` | `null`  | Image compression settings. `maxFileSize` in MB (default: 30), `fileQuality` 0.0-1.0 (default: 0.8)              |
+| `lib`                | `{ axios: any }`                                | `null`  | External libraries (e.g., axios for API calls)                                                                   |
+| `uploadEndpoint`     | `string`                                        | `null`  | API endpoint for uploading media files                                                                           |
+
+##### Ref Methods
+
+When using `ref`, you have access to the following methods:
+
+| Method                | Parameters                                                                         | Returns         | Description                                                                  |
+| --------------------- | ---------------------------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------- |
+| `handleSubmit`        | `()`                                                                               | `Promise<bool>` | Validates the markdown input (checks if required field is filled)            |
+| `getMarkdown`         | `()`                                                                               | `string`        | Returns the current markdown content                                         |
+| `setMarkdown`         | `(markdown: string)`                                                               | `void`          | Sets the markdown content programmatically                                   |
+| `getPendingImages`    | `()`                                                                               | `Map`           | Returns map of blob URLs to File objects that haven't been uploaded yet      |
+| `uploadPendingImages` | `(collectionId: string, dataId: string, fieldId: string, uploadHandler: Function)` | `Promise<html>` | Uploads all pending images/videos and replaces blob URLs with permanent URLs |
+| `clearPendingImages`  | `()`                                                                               | `void`          | Clears all pending images and revokes blob URLs                              |

package/lib/components/input/markdown/markdown.stories.tsx

@@ -0,0 +1,40 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { MarkdownInput } from ".";
+import README from "./README.md";
+const stories = storiesOf("Input", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Markdown Input", () => {
+  const [value, setValue] = useState<string | undefined>("");
+  const handleOnChange = (id: string, value?: string) => setValue(value);
+
+  return (
+    <div>
+      <MarkdownInput
+        label="Markdown Editor"
+        subLabel="Enter your markdown content below, press / to see the available commands, press esc to close the menu. Images will show blob URL previews in Storybook."
+        value={value ?? ""}
+        onChange={handleOnChange}
+        placeholder="Start typing our markdown content here... You can use basic markdown syntax like **bold**, *italic*, # headings, - bullet points, 1. numbered lists, [links](url), and more. The editor provides a live preview of your formatted content."
+        darkMode={false}
+        enableImageUpload={true}
+        enableVideoUpload={true}
+      />
+      {/* //INFO: Test View */}
+      {/* <MarkdownInput
+        label="Markdown Viewer"
+        value={value ?? ""}
+        onChange={handleOnChange}
+        placeholder=""
+        darkMode={false}
+        readOnly={true}
+      /> */}
+    </div>
+  );
+});

package/lib/components/input/monthYearPicker/README.md

@@ -0,0 +1,69 @@
+# Month Year Picker
+
+<!-- STORY -->
+
+<hr>
+
+Month Year Picker to insert date
+
+##### Import
+
+```js
+import { MonthYearPicker } from "blixify-ui-web/components/input/monthYearPicker";
+```
+
+##### Usage
+
+```jsx
+const currentDate = new Date();
+const [date, setDate] = (useState < Date) | (undefined > currentDate);
+
+const handleOnChange = (id: string, value: Date | undefined, type?: string) => {
+  if (type === "months") {
+    setMonthDate(value);
+  } else if (type === "year") {
+    setYearDate(value);
+  }
+};
+
+return (
+  <>
+    <MonthYearPicker
+      title="Month Picker"
+      type={"month"}
+      value={date}
+      onChange={handleOnChange}
+      minDate={new Date()}
+    />
+    <MonthYearPicker
+      type={"year"}
+      value={date}
+      onChange={handleOnChange}
+      className="mt-5"
+    />
+  </>
+);
+```
+
+##### Optional props
+
+| Name             | Type               | Default                                           | Description                                                                   |
+| ---------------- | ------------------ | ------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `id`             | `string`           | ""                                                |                                                                               |
+| `range`          | `boolean`          | null                                              | Determine wheter is date picker is range or normal                            |
+| `title`          | `string`           | ""                                                | Required when range is false , label of Date Picker                           |
+| `labelExtra`     | ReactElement       | null                                              |                                                                               |
+| `value`          | `Date`             | null                                              | Required when range is false, value of the date picker                        |
+| `minDate`        | `Date`             | null                                              | Required when range is true, minimum date that is able to be selected         |
+| `maxDate`        | `Date`             | null                                              | Required when range is true, maximum date that is able to be selected         |
+| `yearDate`       | `Date`             | null                                              | Required when range is true, value of year date picker                        |
+| `monthDate`      | `Date`             | null                                              | Required when range is true , value of month date picker                      |
+| `filterMonth`    | `Array number `    | null                                              | Array of number                                                               |
+| `filterYear`     | `Array number `    | null                                              | Array of number                                                               |
+| `showTime`       | `boolean`          | null                                              | Option to select and display time                                             |
+| `optional`       | `boolean`          | null                                              | Whether date is required to be selected                                       |
+| `className`      | `tailwind class`   | null                                              | Tailwind Class                                                                |
+| `onChange`       | `function`         | `(id : string, value:Date, type? : string) => {}` | When range is true, will return type of "month/year"                          |
+| `cellInput`      | `Cell Input Class` |                                                   | Refer to Input Utils                                                          |
+| `hideLabel`      | `boolean`          | null                                              | When `true`, label will be hidden.                                            |
+| `staticDropdown` | `boolean`          | null                                              | When `true`, the parent container's height will expand to fit this component. |

package/lib/components/input/monthYearPicker/monthYearPicker.stories.tsx

@@ -0,0 +1,47 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { MonthYearPicker } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Input", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Month Year Picker", () => {
+  const currentDate = new Date();
+  const [date, setDate] = useState<Date | undefined>(currentDate);
+
+  const handleOnChange = (
+    id: string,
+    value: Date | undefined,
+    type?: string
+  ) => {
+    if (type === "month") {
+      setDate(value);
+    } else if (type === "year") {
+      setDate(value);
+    }
+  };
+
+  return (
+    <>
+      <MonthYearPicker
+        title="Month Picker"
+        type={"month"}
+        value={date}
+        onChange={handleOnChange}
+        minDate={new Date()}
+      />
+      <MonthYearPicker
+        type={"year"}
+        value={date}
+        onChange={handleOnChange}
+        className="mt-5"
+      />
+    </>
+  );
+});

package/lib/components/input/netPromoterScore/README.md

@@ -0,0 +1,52 @@
+# NetPromoterScore
+
+<!-- STORY -->
+
+<hr>
+
+NetPromoterScore component for entering NPS (Net Promoter Score) value from 0-10.
+
+##### Import
+
+```js
+import { NetPromoterScore } from "blixify-ui-web/components/input/netPromoterScore";
+```
+
+##### Usage
+
+```jsx
+const [score, setScore] = useState(null);
+
+const handleOnChangeScore = (value: number) => {
+  setScore(value);
+};
+
+return (
+  <>
+    <NetPromoterScore
+      id="nps"
+      label="How likely are you to recommend us to a friend or colleague?"
+      value={score}
+      onChange={handleOnChangeScore}
+    />
+  </>
+);
+```
+
+##### Required props
+
+| Name    | Type            | Description       |
+| ------- | --------------- | ----------------- |
+| `id`    | `string`        | Id of the input   |
+| `label` | `string`        | Label of the data |
+| `value` | `number \| null` | Value of the data (0-10) |
+
+##### Optional props
+
+| Name        | Type       | Default | Description           |
+| ----------- | ---------- | ------- | --------------------- |
+| `subLabel`  | `string`   |         | Set score subLabel    |
+| `optional`  | `boolean`  |         | Set data optional     |
+| `className` | `string`   |         | Set container style   |
+| `onChange`  | `function` |         | Callback on value change |
+| `darkMode`  | `boolean`  | `false` | Enable dark mode      |

package/lib/components/input/netPromoterScore/netPromoterScore.stories.tsx

@@ -0,0 +1,30 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { NetPromoterScore } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Input", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("NetPromoterScore", () => {
+  const [score, setScore] = useState<number | null>(null);
+
+  const handleOnChangeScore = (value: number) => {
+    setScore(value);
+  };
+
+  return (
+    <NetPromoterScore
+      id="nps"
+      label="How likely are you to recommend us to a friend or colleague?"
+      value={score}
+      onChange={handleOnChangeScore}
+      darkMode={false}
+    />
+  );
+});

package/lib/components/input/rating/README.md

@@ -0,0 +1,51 @@
+# Rating
+
+<!-- STORY -->
+
+<hr>
+
+Rating component for enter rating value.
+
+##### Import
+
+```js
+import { Rating } from "blixify-ui-web/components/input/rating";
+```
+
+##### Usage
+
+```jsx
+const [rating, setRating] = useState(0);
+
+const handleOnChangeRating = (value: number) => {
+  setRating(value);
+};
+
+return (
+  <>
+    <Rating
+      id="rating"
+      label="Enter your rating below"
+      value={rating}
+      onChange={handleOnChangeRating}
+    />
+  </>
+);
+```
+
+##### Required props
+
+| Name    | Type     | Description       |
+| ------- | -------- | ----------------- |
+| `id`    | `string` | Id of the input   |
+| `label` | `string` | Label of the data |
+| `value` | `number` | Value of the data |
+
+##### Optional props
+
+| Name        | Type       | Default | Description         |
+| ----------- | ---------- | ------- | ------------------- |
+| `subLabel`  | `string`   |         | Set rating subLabel |
+| `optional`  | `boolean`  |         | Set data optional   |
+| `className` | `string`   |         | Set container style |
+| `onChange`  | `function` |         | Type of the input   |

package/lib/components/input/rating/rating.stories.tsx

@@ -0,0 +1,30 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { Rating } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Input", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Rating", () => {
+  const [rating, setRating] = useState(0);
+
+  const handleOnChangeRating = (value: number) => {
+    setRating(value);
+  };
+
+  return (
+    <Rating
+      id="rating"
+      label="Enter your rating below"
+      value={rating}
+      onChange={handleOnChangeRating}
+      darkMode={false}
+    />
+  );
+});