blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,188 @@
+import { storiesOf } from "@storybook/react";
+import React, { useRef, useState } from "react";
+import { Signature } from ".";
+import { Button } from "../../action/button";
+import { Modal } from "../../display/modal";
+import { Form } from "../form";
+import { StorySection } from "../../storyUtils";
+import README from "./README.md";
+
+const stories = storiesOf("Input", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const sampleDataURL =
+  "https://upload.wikimedia.org/wikipedia/commons/2/2d/Sample_SVG_file%2C_signature.svg";
+
+stories.add("Signature", () => {
+  const signatureRef = useRef<any>(null);
+  const modalSignatureRef = useRef<any>(null);
+  const modalFormRef = useRef<any>(null);
+
+  const [signing, setSigning] = useState(false);
+  const [modalSigning, setModalSigning] = useState(false);
+  const [signaturePreview, setSignaturePreview] = useState("");
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalKey, setModalKey] = useState(0);
+
+  return (
+    <>
+      <StorySection
+        title="Default (with existing dataURL)"
+        description="Pass dataURL to pre-load an existing signature image. The canvas fills its parent container — give the parent a fixed height. signatureClear shows a Clear button; a Reset button appears automatically when dataURL is set."
+      >
+        <div className="w-full max-w-md">
+          <div className="h-[280px]">
+            <Signature
+              id="signature-default"
+              ref={signatureRef}
+              dataURL={sampleDataURL}
+              signing={signing}
+              label="Signature"
+              penColor="black"
+              signatureClear={true}
+              onChange={setSigning}
+              onSubmit={(_, dataURL) => setSignaturePreview(dataURL ?? "")}
+            />
+          </div>
+          <Button
+            className="mt-3"
+            size="small"
+            text="Submit"
+            type="normal"
+            onClick={() => signatureRef.current?.handleSubmit()}
+          />
+          {signaturePreview && (
+            <div className="mt-3">
+              <p className="text-sm font-medium text-gray-700 mb-1">Preview</p>
+              <img
+                src={signaturePreview}
+                alt="signature preview"
+                className="border rounded max-h-24"
+              />
+            </div>
+          )}
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Blank canvas (required)"
+        description="No dataURL — user must draw a signature. Without optional, handleSubmit will fail if the canvas is empty."
+      >
+        <div className="w-full max-w-md">
+          <div className="h-[280px]">
+            <Signature
+              id="signature-blank"
+              signing={false}
+              label="Sign Here"
+              penColor="blue"
+              signatureClear={true}
+              onChange={() => {}}
+              onSubmit={() => {}}
+            />
+          </div>
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="With description text"
+        description="description renders formatted text above the pad. Wrap text in *asterisks* for bold. Blank lines create paragraph breaks."
+      >
+        <div className="w-full max-w-md">
+          <div className="h-[320px]">
+            <Signature
+              id="signature-desc"
+              signing={false}
+              label="Authorisation Signature"
+              optional
+              description={`*By signing below you agree to the terms and conditions.*\n\nThis signature will be used as your legal authorisation for this document.`}
+              penColor="black"
+              signatureClear={true}
+              onChange={() => {}}
+              onSubmit={() => {}}
+            />
+          </div>
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Dark mode"
+        description="darkMode=true switches label colours to suit a dark background."
+        dark
+      >
+        <div className="w-full max-w-md">
+          <div className="h-[280px]">
+            <Signature
+              id="signature-dark"
+              signing={false}
+              label="Signature"
+              optional
+              darkMode={true}
+              penColor="white"
+              signatureClear={true}
+              onChange={() => {}}
+              onSubmit={() => {}}
+            />
+          </div>
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Inside a Modal with Form validation"
+        description="Use a key prop to force remount when the modal opens so the canvas resizes correctly. Wrap in Form and pass the ref to refList for coordinated validation."
+      >
+        <div className="w-full max-w-md">
+          <Button
+            size="small"
+            text="Open Signature Modal"
+            type="normal"
+            onClick={() => {
+              setIsModalOpen(true);
+              setModalKey((k) => k + 1);
+            }}
+          />
+          <Modal
+            title="Signature"
+            open={isModalOpen}
+            maxWidth="2xl"
+            onClose={() => setIsModalOpen(false)}
+            renderContent={() => (
+              <Form refList={[modalSignatureRef]} ref={modalFormRef}>
+                <div className="w-full h-[280px]">
+                  <Signature
+                    key={modalKey}
+                    id="signature-modal"
+                    ref={modalSignatureRef}
+                    dataURL={sampleDataURL}
+                    signing={modalSigning}
+                    label="Signature"
+                    penColor="red"
+                    signatureClear={true}
+                    onChange={setModalSigning}
+                    onSubmit={(_, dataURL) =>
+                      setSignaturePreview(dataURL ?? "")
+                    }
+                  />
+                </div>
+                <Button
+                  className="mt-6"
+                  size="small"
+                  text="Submit"
+                  type="normal"
+                  onClick={async () => {
+                    const valid = await modalFormRef.current?.handleSubmit();
+                    if (valid) setIsModalOpen(false);
+                  }}
+                />
+              </Form>
+            )}
+          />
+        </div>
+      </StorySection>
+    </>
+  );
+});

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

@@ -0,0 +1,55 @@
+# TextArea
+
+<!-- STORY -->
+
+<hr>
+
+Text Area to insert block value
+
+##### Import
+
+```js
+import { TextArea } from "blixify-ui-web/components/input/textArea";
+```
+
+##### Usage
+
+```jsx
+const [value, setValue] = useState("");
+
+return (
+  <TextArea
+    id="comments"
+    value={value}
+    label="Comments"
+    placeholder="Description"
+    subLabel="Enter your comments below"
+    rows={4}
+    onChange={(e) => {
+      setValue(e);
+    }}
+  />
+);
+```
+
+##### Required props
+
+| Name          | Type     | Description              |
+| ------------- | -------- | ------------------------ |
+| `value`       | `any`    | Value of the data        |
+| `label`       | `string` | Label of the input       |
+| `rows`        | `number` | Number of rows           |
+| `placeholder` | `string` | Placeholder of the input |
+
+##### Optional props
+
+| Name                 | Type             | Default    | Description |
+| -------------------- | ---------------- | ---------- | ----------- |
+| `id`                 | `string`         | ""         |             |
+| `subLabel`           | `string`         | ""         |             |
+| `maxLength`          | `number`         | ""         |             |
+| `optional`           | boolean          | null       |             |
+| `disabled`           | boolean          | null       |             |
+| `className`          | `tailwind class` | ""         |             |
+| `containerClassName` | `tailwind class` | ""         |             |
+| `onChange`           | `function`       | `() => {}` |             |

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

@@ -0,0 +1,30 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { TextArea } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Input", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("TextArea", () => {
+  const [value, setValue] = useState("");
+
+  return (
+    <TextArea
+      id="comments"
+      value={value}
+      label="Comments"
+      placeholder="Description"
+      subLabel="Enter your comments below"
+      rows={4}
+      onChange={(e) => {
+        setValue(e.target.value);
+      }}
+    />
+  );
+});

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

@@ -0,0 +1,81 @@
+# Text Input
+
+<!-- STORY -->
+
+<hr>
+
+A versatile text input supporting email, password, number, mobile (with country picker), and plain text modes. Includes built-in validation, suggestions dropdown, capitalize mode, and mobile-responsive layout.
+
+### Import
+
+```js
+import { TextInput } from "blixify-ui-web/input/textInput";
+```
+
+### Usage
+
+```jsx
+const [value, setValue] = useState("");
+
+<TextInput
+  id="email"
+  value={value}
+  type="email"
+  label="Email"
+  placeholder="test@gmail.com"
+  onChange={(e) => setValue(e.target.value)}
+  showMagnifyIcon={true}
+/>;
+```
+
+### Validation via ref
+
+```jsx
+const ref = useRef(null);
+
+<TextInput ref={ref} id="email" value={value} type="email" label="Email" placeholder="..." onChange={...} />
+<Button text="Submit" onClick={() => ref.current?.handleSubmit()} />
+```
+
+`handleSubmit()` returns a `Promise<boolean>` — `true` if valid, `false` if not. It sets an inline error message automatically.
+
+### Required props
+
+| Name          | Type     | Description                                                           |
+| ------------- | -------- | --------------------------------------------------------------------- |
+| `value`       | `any`    | Controlled value                                                      |
+| `label`       | `string` | Label displayed above the input                                       |
+| `type`        | `string` | Input type: `"email"`, `"text"`, `"password"`, `"number"`, `"mobile"` |
+| `placeholder` | `string` | Placeholder text                                                      |
+
+### Optional props
+
+| Name                    | Type               | Default    | Description                                                                  |
+| ----------------------- | ------------------ | ---------- | ---------------------------------------------------------------------------- |
+| `id`                    | `string`           | —          | HTML id attribute                                                            |
+| `subLabel`              | `string`           | —          | Secondary label shown below the main label                                   |
+| `size`                  | `string`           | —          | `"small"` (px-3 py-2) or `"mini"` (p-2); default is standard (px-5 py-3)     |
+| `labelExtra`            | `ReactElement`     | —          | Extra element rendered inline with the label                                 |
+| `infoElement`           | `ReactElement`     | —          | Content shown in an InfoWindow tooltip next to the label                     |
+| `customElement`         | `ReactElement`     | —          | Custom element rendered to the right of the label row                        |
+| `pattern`               | `string`           | —          | Regex string applied on submit (overrides type-based validation)             |
+| `customErrMsg`          | `string`           | —          | Overrides the default validation error message                               |
+| `minNumber`             | `number`           | —          | Minimum value (type `"number"` only)                                         |
+| `maxNumber`             | `number`           | —          | Maximum value (type `"number"` only)                                         |
+| `maxLength`             | `number`           | —          | Max character length                                                         |
+| `optional`              | `boolean`          | `false`    | Skips validation when `true`                                                 |
+| `disabled`              | `boolean`          | `false`    | Disables the input                                                           |
+| `autoFocus`             | `boolean`          | `false`    | Focuses the input on mount                                                   |
+| `autoComplete`          | `"on"` \| `"off"`  | —          | HTML autocomplete attribute                                                  |
+| `capitalize`            | `boolean`          | `false`    | Converts all input to uppercase (type `"text"` only)                         |
+| `showMagnifyIcon`       | `boolean`          | `false`    | Shows a magnifying glass icon on the right                                   |
+| `strSuggestions`        | `string[]`         | —          | List of suggestions shown in a dropdown as the user types                    |
+| `mobilePicker`          | `boolean`          | `false`    | Shows a country flag/code selector (type `"mobile"` only)                    |
+| `mobileCountryEditable` | `boolean`          | `false`    | Allows changing the country code (type `"mobile"` + `mobilePicker` only)     |
+| `mobileWhitelist`       | `("BN" \| "MY")[]` | —          | Restricts mobile validation to specific countries                            |
+| `mobileView`            | `boolean`          | `false`    | Renders a compact inline layout for mobile screens (label left, input right) |
+| `darkMode`              | `boolean`          | `false`    | Applies dark colour scheme to labels                                         |
+| `containerClassName`    | `tailwind class`   | —          | Class applied to the outer container                                         |
+| `inputClassName`        | `tailwind class`   | —          | Additional class applied to the `<input>` element                            |
+| `onChange`              | `(e: any) => void` | `() => {}` | Called on every change; `e.target.value` contains the new value              |
+| `cellInput`             | `CellInput`        | —          | Refer to Input Utils — enables cell/table editing mode                       |

package/lib/components/input/textInput/textinput.stories.tsx

@@ -0,0 +1,231 @@
+import { storiesOf } from "@storybook/react";
+import React, { useRef, useState } from "react";
+import { TextInput } from ".";
+import { Button } from "../../action/button";
+import { StorySection } from "../../storyUtils";
+import README from "./README.md";
+
+const stories = storiesOf("Input", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("TextInput", () => {
+  const refEmail = useRef<any>(null);
+  const refPassword = useRef<any>(null);
+  const refNumber = useRef<any>(null);
+  const refMobile = useRef<any>(null);
+  const refCap = useRef<any>(null);
+  const refSuggest = useRef<any>(null);
+  const refRegex = useRef<any>(null);
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [number, setNumber] = useState("");
+  const [mobile, setMobile] = useState("");
+  const [capText, setCapText] = useState("");
+  const [suggestText, setSuggestText] = useState("");
+  const [regexText, setRegexText] = useState("");
+
+  return (
+    <>
+      <StorySection
+        title="Email (with magnify icon)"
+        description="type='email' with showMagnifyIcon renders a search icon on the right. Validates email format on submit."
+      >
+        <div className="w-full max-w-sm">
+          <TextInput
+            ref={refEmail}
+            id="email"
+            value={email}
+            type="email"
+            label="Email"
+            placeholder="test@gmail.com"
+            subLabel="Enter your email below"
+            onChange={(e) => setEmail(e.target.value)}
+            showMagnifyIcon={true}
+          />
+          <Button
+            type="normal"
+            text="Validate"
+            onClick={() => refEmail?.current?.handleSubmit()}
+            className="mt-3"
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Password (show/hide toggle)"
+        description="type='password' renders an eye icon to toggle visibility. Validates 6–30 characters, no spaces."
+      >
+        <div className="w-full max-w-sm">
+          <TextInput
+            ref={refPassword}
+            id="password"
+            value={password}
+            type="password"
+            label="Password"
+            placeholder="Enter password"
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <Button
+            type="normal"
+            text="Validate"
+            onClick={() => refPassword?.current?.handleSubmit()}
+            className="mt-3"
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Number (with min/max)"
+        description="type='number' prevents scroll-to-change. minNumber and maxNumber enforce range on submit."
+      >
+        <div className="w-full max-w-sm">
+          <TextInput
+            ref={refNumber}
+            id="number"
+            value={number}
+            type="number"
+            label="Age"
+            placeholder="Enter age"
+            subLabel="Must be between 18 and 99"
+            minNumber={18}
+            maxNumber={99}
+            onChange={(e) => setNumber(e.target.value)}
+          />
+          <Button
+            type="normal"
+            text="Validate"
+            onClick={() => refNumber?.current?.handleSubmit()}
+            className="mt-3"
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Mobile (with country picker)"
+        description="type='mobile' with mobilePicker shows a country flag/code selector. mobileCountryEditable allows changing the country."
+      >
+        <div className="w-full max-w-sm">
+          <TextInput
+            ref={refMobile}
+            id="mobile"
+            value={mobile}
+            type="mobile"
+            label="Mobile"
+            placeholder="+60123456789"
+            mobilePicker={true}
+            mobileCountryEditable={true}
+            onChange={(e) => setMobile(e.target.value)}
+          />
+          <Button
+            type="normal"
+            text="Validate"
+            onClick={() => refMobile?.current?.handleSubmit()}
+            className="mt-3"
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Capitalize Text"
+        description="capitalize=true forces all input to uppercase as the user types."
+      >
+        <div className="w-full max-w-sm">
+          <TextInput
+            ref={refCap}
+            id="capitalizeText"
+            value={capText}
+            type="text"
+            label="Capitalize Text"
+            placeholder="Type anything..."
+            subLabel="All characters will be uppercased"
+            capitalize={true}
+            onChange={(e) => setCapText(e.target.value)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="With Suggestions"
+        description="strSuggestions provides a dropdown of matching options as the user types."
+      >
+        <div className="w-full max-w-sm">
+          <TextInput
+            ref={refSuggest}
+            id="withSuggestions"
+            value={suggestText}
+            type="text"
+            label="With Suggestions"
+            placeholder="Start typing..."
+            subLabel="Pre-defined suggestions will appear"
+            strSuggestions={[
+              "The quick brown fox jumps",
+              "How much wood would a woodchuck chuck",
+              "Peter Piper picked peppers",
+              "She sells seashells by the sea",
+              "All work and no play",
+            ]}
+            onChange={(e) => setSuggestText(e.target.value)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Custom Regex Pattern + Form Validation"
+        description="pattern accepts a regex string. customErrMsg overrides the default error message. Call handleSubmit() via ref to trigger validation."
+      >
+        <div className="w-full max-w-sm">
+          <TextInput
+            ref={refRegex}
+            id="alphaNumericOnly"
+            value={regexText}
+            type="text"
+            label="Alphanumeric Only"
+            placeholder="Letters and numbers only"
+            subLabel="No special characters allowed"
+            pattern="^[a-zA-Z0-9]+$"
+            customErrMsg="Only alphabets and numbers are allowed"
+            onChange={(e) => setRegexText(e.target.value)}
+          />
+          <Button
+            type="normal"
+            text="Submit"
+            onClick={() => refRegex?.current?.handleSubmit()}
+            className="mt-3"
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Small & Mini sizes"
+        description="size='small' reduces padding to px-3 py-2. size='mini' reduces further to p-2."
+      >
+        <div className="w-full max-w-sm space-y-3">
+          <TextInput
+            id="small"
+            value=""
+            type="text"
+            label="Small"
+            placeholder="size='small'"
+            size="small"
+            onChange={() => {}}
+          />
+          <TextInput
+            id="mini"
+            value=""
+            type="text"
+            label="Mini"
+            placeholder="size='mini'"
+            size="mini"
+            onChange={() => {}}
+          />
+        </div>
+      </StorySection>
+    </>
+  );
+});