blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,165 @@
+import { storiesOf } from "@storybook/react";
+import React, { useRef } from "react";
+import { Canvas } from ".";
+import { StorySection } from "../../storyUtils";
+import { Button } from "../../action/button";
+import { Form } from "../form";
+import README from "./README.md";
+
+const stories = storiesOf("Input", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const backgroundImageUrl =
+  "https://plus.unsplash.com/premium_vector-1736525291885-ace93f581fa9?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0";
+
+const dummyDrawings = [
+  {
+    id: "drawing-1",
+    color: "green",
+    lineWidth: 3,
+    points: [
+      { x: 350, y: 100 },
+      { x: 400, y: 150 },
+      { x: 450, y: 100 },
+      { x: 400, y: 50 },
+      { x: 350, y: 100 },
+    ],
+  },
+];
+
+stories.add("Canvas", () => {
+  const formRef = useRef<any>(null);
+  const canvasRef = useRef<any>(null);
+  const canvasDrawRef = useRef<any>(null);
+  const canvasImageRef = useRef<any>(null);
+
+  return (
+    <>
+      <StorySection
+        title="Text Input"
+        description="Click anywhere on the canvas to open a text modal and place text at that position. Text entries are stored as TextEntry objects with position, color, and size."
+      >
+        <div className="w-full max-w-[500px]">
+          <Canvas
+            id="canvas-text"
+            ref={canvasRef}
+            label="Canvas (Text)"
+            canvasHeight={300}
+            onChange={(texts) => console.log("texts:", texts)}
+            onSubmit={(texts, drawings) =>
+              console.log("submit", texts, drawings)
+            }
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="With Background Image"
+        description="Pass backgroundImageUrl to load an image onto the canvas. The image is fetched and drawn as the canvas background."
+      >
+        <div className="w-full max-w-[500px]">
+          <Canvas
+            id="canvas-bg"
+            label="Canvas (Background Image)"
+            canvasHeight={300}
+            backgroundImageUrl={backgroundImageUrl}
+            onChange={(texts) => console.log("texts:", texts)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Draw Mode"
+        description="enableDraw=true adds Draw, Erase, and Clear All toolbar buttons. Use Draw to toggle between text and draw mode. Pre-populate drawings via the drawings prop."
+      >
+        <div className="w-full max-w-[500px]">
+          <Canvas
+            id="canvas-draw"
+            ref={canvasDrawRef}
+            label="Canvas (Draw)"
+            canvasHeight={300}
+            backgroundImageUrl={backgroundImageUrl}
+            drawings={dummyDrawings}
+            enableDraw
+            onChange={(texts) => console.log("texts:", texts)}
+            onDrawingsChange={(d) => console.log("drawings:", d)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Image Upload"
+        description="enableImageUpload=true adds an Images button that lets the user upload a local image and set it as the canvas background."
+      >
+        <div className="w-full max-w-[500px]">
+          <Canvas
+            id="canvas-image"
+            ref={canvasImageRef}
+            label="Canvas (Image Upload)"
+            canvasHeight={300}
+            enableDraw
+            enableImageUpload
+            onChange={(texts) => console.log("texts:", texts)}
+            onDrawingsChange={(d) => console.log("drawings:", d)}
+            onBackgroundImageChange={(img) => console.log("bg image:", img)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Form Validation"
+        description="When used inside a Form with a ref, handleSubmit validates that the canvas is not empty. optional=true skips this check."
+      >
+        <div className="w-full max-w-[500px] space-y-3">
+          <Form ref={formRef} refList={[canvasRef]}>
+            <Canvas
+              id="canvas-form"
+              ref={canvasRef}
+              label="Canvas (Required)"
+              canvasHeight={300}
+              enableDraw
+              onSubmit={(texts, drawings) =>
+                console.log("submitted", texts, drawings)
+              }
+            />
+          </Form>
+          <Button
+            text="Submit"
+            size="small"
+            type="normal"
+            onClick={() => formRef.current?.handleSubmit()}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Read Only"
+        description="readOnly=true disables all editing interactions but keeps the default cursor. disabled=true additionally shows a not-allowed cursor and reduces opacity."
+      >
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 w-full">
+          <Canvas
+            id="canvas-readonly"
+            label="Read Only"
+            canvasHeight={200}
+            backgroundImageUrl={backgroundImageUrl}
+            drawings={dummyDrawings}
+            readOnly
+          />
+          <Canvas
+            id="canvas-disabled"
+            label="Disabled"
+            canvasHeight={200}
+            backgroundImageUrl={backgroundImageUrl}
+            drawings={dummyDrawings}
+            disabled
+          />
+        </div>
+      </StorySection>
+    </>
+  );
+});

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

@@ -0,0 +1,61 @@
+# Checkbox
+
+<!-- STORY -->
+
+<hr>
+
+Check box to select data
+
+##### Import
+
+```js
+import { Checkbox } from "blixify-ui-web/components/input/checkbox";
+```
+
+##### Usage
+
+```jsx
+  const itemList = ["Default Checkbox", "Checked State"];
+  const [selectItemList, setSelectItemList] = useState<string[]>([]);
+  const handleSelectItemList = (item: string) => {
+    setSelectItemList((prevSelectItemList) => {
+      if (selectItemList.includes(item)) {
+        return prevSelectItemList.filter(
+          (selectedItem) => selectedItem !== item
+        );
+      } else {
+        return [...prevSelectItemList, item];
+      }
+    });
+  };
+
+  return (
+    <div>
+      <Checkbox
+        itemList={itemList}
+        selectItemList={selectItemList}
+        onChange={handleSelectItemList}
+        labelClassName="text-primary-500 ml-3 font-semibold"
+        inputClassName=" rounded mr-2 focus:ring-gray-50 focus:ring-offset-0 focus:outline-offset-0 border-gray-300 checked:text-gray-400"
+        className="flex mb-4 align-top items-center"
+      />
+    </div>
+  );
+
+
+```
+
+#### Required Props
+
+| Name             | Type     | Default | Description                   |
+| ---------------- | -------- | ------- | ----------------------------- |
+| `itemList`       | `Option` | ""      | Determine your item list.     |
+| `selectItemList` | `string` | ""      | Determine your item selected. |
+
+##### Optional props
+
+| Name             | Type             | Default              | Description               |
+| ---------------- | ---------------- | -------------------- | ------------------------- |
+| `onChange`       | `function`       | (item: string) => {} | Handle selected           |
+| `className`      | `tailwind class` | ""                   | Tailwind class for parent |
+| `inputClassName` | `tailwind class` | ""                   | Tailwind class for input  |

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

@@ -0,0 +1,30 @@
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { Checkbox } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Input", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Checkbox", () => {
+  const itemList = [
+    { key: "Default Checkbox", label: "Default Checkbox" },
+    { key: "Checked State", label: "Checked State" },
+  ];
+  const [selectItemList, setSelectItemList] = useState<string[]>([]);
+
+  return (
+    <Checkbox
+      itemList={itemList}
+      selectItemList={selectItemList}
+      onChange={(itemList) => setSelectItemList(itemList)}
+      className="mb-2"
+      inputClassName=""
+    />
+  );
+});

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

@@ -0,0 +1,124 @@
+# Date Picker
+
+<!-- STORY -->
+
+<hr>
+
+A date (and optional time) picker supporting single date, date+time, date range, day filtering, and custom time slot modes.
+
+### Import
+
+```js
+import { InputDatePicker } from "blixify-ui-web/input/datePicker";
+```
+
+### Usage
+
+```jsx
+const [date, setDate] = useState(new Date());
+
+<InputDatePicker
+  title="Select Date"
+  value={date}
+  onChange={(_id, value) => setDate(value)}
+/>;
+```
+
+### Date Range
+
+```jsx
+const [startDate, setStartDate] = useState(new Date());
+const [endDate, setEndDate] = useState(new Date());
+
+<InputDatePicker
+  range={true}
+  startDate={startDate}
+  endDate={endDate}
+  onChange={(_id, value, type) => {
+    if (type === "start") setStartDate(value);
+    else if (type === "end") setEndDate(value);
+  }}
+/>;
+```
+
+### Validation via ref
+
+```jsx
+const ref = useRef(null);
+
+<InputDatePicker ref={ref} title="Date" value={date} onChange={...} />
+<Button text="Submit" onClick={() => ref.current?.handleSubmit()} />
+```
+
+`handleSubmit()` returns a `Promise<boolean>`. For range mode it also validates that start is not after end.
+
+### Optional props
+
+| Name             | Type                                                            | Default         | Description                                                                                                                                    |
+| ---------------- | --------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`             | `string`                                                        | `""`            | Passed back as the first argument of `onChange`                                                                                                |
+| `title`          | `string`                                                        | `"Select Date"` | Label shown above the picker (non-range mode)                                                                                                  |
+| `startDateTitle` | `string`                                                        | `"Start Date"`  | Label for the start picker (range mode)                                                                                                        |
+| `endDateTitle`   | `string`                                                        | `"End Date"`    | Label for the end picker (range mode)                                                                                                          |
+| `subLabel`       | `string`                                                        | —               | Secondary label shown below the title                                                                                                          |
+| `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                                                                                          |
+| `value`          | `Date`                                                          | —               | Selected date (non-range mode)                                                                                                                 |
+| `startDate`      | `Date`                                                          | —               | Selected start date (range mode)                                                                                                               |
+| `endDate`        | `Date`                                                          | —               | Selected end date (range mode)                                                                                                                 |
+| `minDate`        | `Date`                                                          | —               | Earliest selectable date                                                                                                                       |
+| `maxDate`        | `Date`                                                          | —               | Latest selectable date                                                                                                                         |
+| `range`          | `boolean`                                                       | `false`         | Renders two pickers for a start/end date range                                                                                                 |
+| `showTime`       | `boolean`                                                       | `false`         | Adds a time selector alongside the calendar                                                                                                    |
+| `hideDate`       | `boolean`                                                       | `false`         | Shows only the time picker (hides the calendar)                                                                                                |
+| `timeInterval`   | `number`                                                        | `5`             | Minute step for the time picker                                                                                                                |
+| `timeSlots`      | `TimeSlot[]`                                                    | —               | Renders a custom time panel with fixed slots instead of a scrollable time list                                                                 |
+| `filterDate`     | `number[] \| Date[] \| ((date: Date) => boolean)`               | —               | Restrict selectable dates. Number array: weekday indices (0=Sun). Date array: blocked specific dates. Function: return `true` to allow a date. |
+| `optional`       | `boolean`                                                       | `false`         | Skips validation and shows a Clear button when a date is selected                                                                              |
+| `disabled`       | `boolean`                                                       | `false`         | Disables the picker                                                                                                                            |
+| `autoFocus`      | `boolean`                                                       | `false`         | Opens the calendar on mount                                                                                                                    |
+| `staticDropdown` | `boolean`                                                       | `false`         | Renders the calendar inline (takes up space) instead of as an absolute overlay                                                                 |
+| `mobileView`     | `boolean`                                                       | `false`         | Renders a compact inline layout for mobile (label left, value right)                                                                           |
+| `darkMode`       | `boolean`                                                       | `false`         | Applies dark colour scheme to labels                                                                                                           |
+| `className`      | `tailwind class`                                                | —               | Class applied to the outer container                                                                                                           |
+| `onChange`       | `(id: string, value: Date \| undefined, type?: string) => void` | —               | Called on date selection. `type` is `"start"` or `"end"` in range mode                                                                         |
+| `cellInput`      | `CellInput`                                                     | —               | Refer to Input Utils — enables cell/table editing mode                                                                                         |
+
+### TimeSlot
+
+| Name       | Type      | Description                        |
+| ---------- | --------- | ---------------------------------- |
+| `start`    | `Date`    | The time slot date/time            |
+| `disabled` | `boolean` | Renders the slot as non-selectable |
+
+### Advanced Examples
+
+```jsx
+// Filter by function — weekdays only, within next 14 days
+<InputDatePicker
+  title="Available Dates"
+  value={date}
+  filterDate={(date) => {
+    const day = date.getDay();
+    const twoWeeksAhead = new Date();
+    twoWeeksAhead.setDate(twoWeeksAhead.getDate() + 14);
+    return day !== 0 && day !== 6 && date <= twoWeeksAhead;
+  }}
+  minDate={new Date()}
+  onChange={(_id, value) => setDate(value)}
+/>
+
+// Time slots
+<InputDatePicker
+  title="Book a Slot"
+  value={date}
+  showTime={true}
+  timeSlots={[
+    { start: new Date(new Date().setHours(9, 0, 0, 0)) },
+    { start: new Date(new Date().setHours(11, 15, 0, 0)), disabled: true },
+    { start: new Date(new Date().setHours(14, 30, 0, 0)) },
+  ]}
+  onChange={(_id, value) => setDate(value)}
+/>
+```

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

@@ -0,0 +1,197 @@
+import { storiesOf } from "@storybook/react";
+import React, { useRef, useState } from "react";
+import { InputDatePicker } 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("DatePicker", () => {
+  const ref = useRef<any>(null);
+  const currentDate = new Date();
+
+  const [date, setDate] = useState<Date | undefined>(currentDate);
+  const [startDate, setStartDate] = useState<Date | undefined>(currentDate);
+  const [endDate, setEndDate] = useState<Date | undefined>(currentDate);
+  const [timeDate, setTimeDate] = useState<Date | undefined>(currentDate);
+  const [slotDate, setSlotDate] = useState<Date | undefined>(currentDate);
+  const [filterDate, setFilterDate] = useState<Date | undefined>(currentDate);
+  const [optionalDate, setOptionalDate] = useState<Date | undefined>(undefined);
+
+  const handleChange =
+    (setter: React.Dispatch<React.SetStateAction<Date | undefined>>) =>
+    (_id: string, value: Date | undefined, _type?: string) =>
+      setter(value);
+
+  const handleRangeChange = (
+    _id: string,
+    value: Date | undefined,
+    type?: string
+  ) => {
+    if (type === "start") setStartDate(value);
+    else if (type === "end") setEndDate(value);
+  };
+
+  return (
+    <>
+      <StorySection
+        title="Default"
+        description="Basic date picker with a title label. Displays date in DD/MM/YY format."
+      >
+        <div className="w-64">
+          <InputDatePicker
+            title="Select Date"
+            value={date}
+            onChange={handleChange(setDate)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Date + Time"
+        description="showTime=true adds a time selector alongside the calendar. timeInterval controls the minute step (default 5)."
+      >
+        <div className="w-64">
+          <InputDatePicker
+            title="Date & Time"
+            value={timeDate}
+            showTime={true}
+            timeInterval={15}
+            onChange={handleChange(setTimeDate)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Date Range"
+        description="range=true renders two pickers (Start Date / End Date). startDateTitle and endDateTitle customise the labels."
+      >
+        <div className="w-full max-w-md">
+          <InputDatePicker
+            range={true}
+            startDate={startDate}
+            endDate={endDate}
+            startDateTitle="From"
+            endDateTitle="To"
+            onChange={handleRangeChange}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Disabled"
+        description="Basic date picker with a title label. Displays date in DD/MM/YY format."
+      >
+        <div className="w-64">
+          <InputDatePicker
+            title="Select Date"
+            value={date}
+            onChange={handleChange(setDate)}
+            disabled
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Filter Date (weekdays only)"
+        description="filterDate as a number array restricts selectable days. 0=Sunday, 1=Monday … 6=Saturday. Here only Mon–Fri are selectable."
+      >
+        <div className="w-64">
+          <InputDatePicker
+            title="Weekdays Only"
+            value={filterDate}
+            filterDate={[1, 2, 3, 4, 5]}
+            onChange={handleChange(setFilterDate)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Filter Date (function)"
+        description="filterDate as a function gives full control. Here weekends and dates more than 14 days ahead are blocked."
+      >
+        <div className="w-64">
+          <InputDatePicker
+            title="Custom Filter"
+            value={filterDate}
+            filterDate={(date) => {
+              const day = date.getDay();
+              const isWeekend = day === 0 || day === 6;
+              const twoWeeksAhead = new Date();
+              twoWeeksAhead.setDate(twoWeeksAhead.getDate() + 14);
+              return !isWeekend && date <= twoWeeksAhead;
+            }}
+            minDate={new Date()}
+            onChange={handleChange(setFilterDate)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Time Slots"
+        description="timeSlots renders a custom time panel alongside the calendar. Disabled slots are shown but not selectable."
+      >
+        <div className="w-64">
+          <InputDatePicker
+            title="Time Slots"
+            value={slotDate}
+            showTime={true}
+            timeSlots={[
+              { start: new Date(new Date().setHours(9, 0, 0, 0)) },
+              {
+                start: new Date(new Date().setHours(11, 15, 0, 0)),
+                disabled: true,
+              },
+              { start: new Date(new Date().setHours(14, 30, 0, 0)) },
+              { start: new Date(new Date().setHours(16, 45, 0, 0)) },
+            ]}
+            onChange={handleChange(setSlotDate)}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Optional + Form Validation"
+        description="optional=true shows a Clear button and skips validation. Call handleSubmit() via ref to trigger validation on required pickers."
+      >
+        <div className="w-64">
+          <InputDatePicker
+            ref={ref}
+            title="Optional Date"
+            value={optionalDate}
+            optional={true}
+            onChange={handleChange(setOptionalDate)}
+          />
+          <Button
+            className="mt-3"
+            size="small"
+            text="Validate"
+            type="normal"
+            onClick={() => ref.current?.handleSubmit()}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Static Dropdown"
+        description="staticDropdown=true renders the calendar inline (takes up space below) instead of as an absolute overlay."
+      >
+        <div className="w-64">
+          <InputDatePicker
+            title="Static Calendar"
+            value={date}
+            staticDropdown={true}
+            onChange={handleChange(setDate)}
+          />
+        </div>
+      </StorySection>
+    </>
+  );
+});

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

@@ -0,0 +1,55 @@
+# Form
+
+<!-- STORY -->
+
+<hr>
+
+A form wrapper that coordinates validation across multiple input refs. Calling `handleSubmit()` runs `handleSubmit()` on every ref in `refList` in parallel and only calls `handleComplete` if all pass.
+
+### Import
+
+```js
+import { Form } from "blixify-ui-web/input/form";
+```
+
+### Usage
+
+```jsx
+const formRef = useRef(null);
+const emailRef = useRef(null);
+const passwordRef = useRef(null);
+
+<Form
+  ref={formRef}
+  refList={[emailRef, passwordRef]}
+  handleComplete={() => console.log("All valid")}
+>
+  <TextInput ref={emailRef} id="email" type="email" label="Email" value={email} placeholder="..." onChange={...} />
+  <TextInput ref={passwordRef} id="password" type="password" label="Password" value={password} placeholder="..." onChange={...} containerClassName="mt-3" />
+  <Button className="mt-4" text="Submit" type="normal" onClick={() => formRef.current?.handleSubmit()} />
+</Form>
+```
+
+### Methods (via ref)
+
+| Method                    | Returns            | Description                                                                                                                        |
+| ------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `handleSubmit()`          | `Promise<void>`    | Validates all refs. Calls `handleComplete()` on success, `handleOnFailValidation(ids)` on failure                                  |
+| `handleCheckValidation()` | `Promise<boolean>` | Same validation logic but returns `true`/`false` without calling `handleComplete`                                                  |
+| `handleSave()`            | `Promise<void>`    | Calls `handleSubmit()` on all refs to capture data (e.g. signatures) but ignores validation failures. Calls `handleComplete(true)` |
+
+### Required props
+
+| Name       | Type        | Description                                                    |
+| ---------- | ----------- | -------------------------------------------------------------- |
+| `children` | `ReactNode` | Input components to render inside the form                     |
+| `refList`  | `any[]`     | Refs to child components that expose a `handleSubmit()` method |
+
+### Optional props
+
+| Name                     | Type                          | Default | Description                                                                              |
+| ------------------------ | ----------------------------- | ------- | ---------------------------------------------------------------------------------------- |
+| `className`              | `tailwind class`              | —       | Class applied to the `<form>` element                                                    |
+| `handleComplete`         | `(isDraft?: boolean) => void` | —       | Called when all inputs pass validation. `isDraft=true` when triggered via `handleSave()` |
+| `handleOnFailValidation` | `(ids: string[]) => void`     | —       | Called when one or more inputs fail. Receives an array of the failed input `id` values   |
+| `disabledOnEnter`        | `boolean`                     | `false` | When `true`, pressing Enter does not trigger form submission                             |