blixify-ui-web-mcp 0.1.1

package/lib/components/display/mapView/mapView.stories.tsx

@@ -0,0 +1,225 @@
+import { storiesOf } from "@storybook/react";
+import React, { useEffect, useState } from "react";
+import { MapMarker, MapView } from ".";
+import { StorySection } from "../../storyUtils";
+import README from "./README.md";
+
+const stories = storiesOf("Display", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const baseMarkers: MapMarker[] = [
+  {
+    id: "1",
+    coord: { lat: 5.41192, lng: 100.3146 },
+    data: {
+      name: "Place A",
+      description: "1st test desc",
+      group: "Pet Friendly",
+    },
+    color: "yellow",
+  },
+  {
+    id: "2",
+    coord: { lat: 5.41192, lng: 100.3146 },
+    data: {
+      name: "Place B",
+      description: "4th test desc",
+      group: "Pet Friendly",
+    },
+    color: "yellow",
+  },
+  {
+    id: "3",
+    coord: { lat: 5.41192, lng: 100.3146 },
+    data: {
+      name: "Place C",
+      description: "3rd test desc",
+      group: "Vegetarian",
+    },
+    color: "blue",
+  },
+];
+
+const handleInjectGoogleMaps = (onReady: () => void) => {
+  const interval = setInterval(() => {
+    try {
+      if (!document.getElementById("googleMaps")) {
+        const script = document.createElement("script");
+        script.id = "googleMaps";
+        script.type = "text/javascript";
+        script.src = `https://maps.googleapis.com/maps/api/js?key=&libraries=places,drawing,geometry`;
+        document.head.appendChild(script);
+      }
+      if (window.google && window.google.maps) {
+        onReady();
+        clearInterval(interval);
+      }
+    } catch (err) {}
+  }, 500);
+};
+
+stories.add("MapView", () => {
+  const [loading, setLoading] = useState(true);
+  const [markers, setMarkers] = useState<MapMarker[]>(baseMarkers);
+
+  useEffect(() => {
+    handleInjectGoogleMaps(() => setLoading(false));
+  }, []);
+
+  // Simulate async marker update
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setMarkers((prev) => [
+        ...prev,
+        {
+          id: "4",
+          coord: { lat: 5.41492, lng: 100.3256 },
+          data: {
+            name: "Place D",
+            description: "5th test desc",
+            group: "Vegetarian",
+          },
+          color: "green",
+        },
+        {
+          id: "5",
+          coord: { lat: 5.41092, lng: 100.2856 },
+          data: {
+            name: "Place E",
+            description: "5th test desc",
+            group: "Vegetarian",
+          },
+          color: "orange",
+        },
+        {
+          id: "6",
+          coord: { lat: 5.41792, lng: 100.3356 },
+          data: {
+            name: "Place F",
+            description: "5th test desc",
+            group: "Vegetarian",
+          },
+          color: "purple",
+        },
+      ]);
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (loading)
+    return <p className="text-gray-500 p-4">Loading Google Maps...</p>;
+
+  return (
+    <>
+      <StorySection
+        title="Default Map with Markers"
+        description="Renders markers with color-coded pins. Markers with a data.group are grouped in the color legend. Click a marker to open its info window. autoFitToMarkers adjusts the viewport to show all markers."
+      >
+        <div className="h-[500px] w-full">
+          <MapView
+            markerList={markers}
+            enableMapControl={true}
+            autoFitToMarkers
+            hideColorLegend={false}
+            infoWindowHeaderComponent={(id, data) => (
+              <h1 className="text-primary-500 font-semibold text-lg">
+                {data.name}
+              </h1>
+            )}
+            infoWindowComponent={(id, data) => (
+              <div key={id}>
+                <p className="text-base">{data.description}</p>
+              </div>
+            )}
+            handleUpdateOnClick={() => {}}
+            handleDeleteOnClick={() => {}}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Polygon Select"
+        description="enablePolygonSelect adds a drawing manager toolbar. Draw a polygon to select markers within it. The selection panel shows a count and update/delete action buttons."
+      >
+        <div className="h-[500px] w-full">
+          <MapView
+            markerList={baseMarkers}
+            enableMapControl={true}
+            enablePolygonSelect
+            autoFitToMarkers
+            infoWindowHeaderComponent={(id, data) => (
+              <h1 className="text-primary-500 font-semibold text-lg">
+                {data.name}
+              </h1>
+            )}
+            infoWindowComponent={(id, data) => (
+              <div key={id}>
+                <p className="text-base">{data.description}</p>
+              </div>
+            )}
+            handleSelectPolygon={() => {}}
+            handleUpdateOnClick={() => {}}
+            handleDeleteOnClick={() => {}}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="With Polygon Overlay"
+        description="Pass polygonList to render static circles or polygons on the map. Circles use coord + radius (in km). Polygons use a path array of lat/lng points."
+      >
+        <div className="h-[500px] w-full">
+          <MapView
+            markerList={baseMarkers}
+            polygonList={[
+              {
+                id: "polygon-1",
+                coord: { lat: 5.41392, lng: 100.3146 },
+                type: "circle",
+                radius: 1,
+                color: "blue",
+              },
+            ]}
+            enableMapControl={true}
+            autoFitToMarkers
+            hideColorLegend
+            infoWindowComponent={(id, data) => (
+              <div key={id}>
+                <p className="text-base">{data.description}</p>
+              </div>
+            )}
+            handleUpdateOnClick={() => {}}
+            handleDeleteOnClick={() => {}}
+          />
+        </div>
+      </StorySection>
+
+      <StorySection
+        title="Marker Clustering"
+        description="enableCluster groups nearby markers into a cluster pin. Useful when many markers overlap at the same coordinates."
+      >
+        <div className="h-[500px] w-full">
+          <MapView
+            markerList={markers}
+            enableMapControl={true}
+            enableCluster
+            autoFitToMarkers
+            hideColorLegend
+            infoWindowComponent={(id, data) => (
+              <div key={id}>
+                <p className="text-base">{data.description}</p>
+              </div>
+            )}
+            handleUpdateOnClick={() => {}}
+            handleDeleteOnClick={() => {}}
+          />
+        </div>
+      </StorySection>
+    </>
+  );
+});

package/lib/components/display/modal/README.md

@@ -0,0 +1,43 @@
+# Modal
+
+<!-- STORY -->
+
+<hr>
+
+Modal to overlay content
+
+##### Import
+
+```js
+import { Overlay } from "blixify-ui-web/components/display/overlay";
+```
+
+##### Usage
+
+```jsx
+<Modal
+  title="Modal Title"
+  open={true}
+  lib={{
+    Dialog,
+    Transition,
+  }}
+/>
+```
+
+##### Required props
+
+| Name   | Type      | Description           |
+| ------ | --------- | --------------------- |
+| `open` | `boolean` | Boolean to open modal |
+
+##### Optional props
+
+| Name             | Type            | Default    | Description                                                                                         |
+| ---------------- | --------------- | ---------- | --------------------------------------------------------------------------------------------------- |
+| `title`          | `string`        | ""         |                                                                                                     |
+| `notification`   | `React Element` | ""         |                                                                                                     |
+| `maxWidth`       | `lg/xl/2xl/3xl` | ""         |                                                                                                     |
+| `renderContent`  | `function`      | `() => {}` |                                                                                                     |
+| `onClose`        | `function`      | `() => {}` | Called upon modal overlay is clicked                                                                |
+| `overflowScroll` | `boolean`       | `false`    | If `true`, modal height is limited to 75vh on mobile, title stays sticky, and content is scrollable |

package/lib/components/display/modal/modal.stories.tsx

@@ -0,0 +1,81 @@
+import { Transition } from "@headlessui/react";
+import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
+import { Modal } from ".";
+import { DataTemplateWrapper } from "../../data/dataWrapper";
+import { Notification } from "../notification";
+import README from "./README.md";
+
+const stories = storiesOf("Display", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Modal", () => {
+  const [open, setOpen] = useState(true);
+  const notification = (
+    <Notification
+      icon={<CheckCircleIcon className="w-10 h-10 text-primary-600" />}
+      notificationAttribute={{
+        title: "Notification Title",
+        desc: "Lorem Ipsum",
+        visible: true,
+      }}
+      lib={{
+        Transition,
+      }}
+    />
+  );
+
+  return (
+    <Modal
+      title="Modal Title"
+      open={open}
+      notification={notification}
+      renderContent={() => {
+        return (
+          <DataTemplateWrapper
+            title={""}
+            type={"update"}
+            id={"new"}
+            collectionId={"modal-updates"}
+            schema={[
+              { id: "title", type: "string", name: "Title" },
+              {
+                id: "status",
+                type: "list",
+                name: "Status",
+                listSelection: ["Not Completed", "Completed"],
+              },
+              { id: "startDate", type: "date", name: "Clock In" },
+            ]}
+            workspace={{
+              apiEndpoint: "http://localhost:3000/api/data",
+              assetEndpoint:
+                "https://firebasestorage.googleapis.com/v0/b/esh-web-dev.appspot.com/o/",
+            }}
+            additionalQuery={[]}
+            organise={{
+              breadcrumbType: "button",
+            }}
+            sort={{ sortId: "startDate", type: "desc" }}
+            edit={{
+              allEditable: true,
+              deleteBtn: true,
+            }}
+            bareSettings={{
+              bareUpdateActionBottom: true,
+            }}
+          />
+        );
+      }}
+      onClose={() => {
+        setOpen(!open);
+      }}
+    />
+  );
+});

package/lib/components/display/notification/README.md

@@ -0,0 +1,43 @@
+# Notification
+
+<!-- STORY -->
+
+<hr>
+
+Notification to display performed actions
+
+##### Import
+
+```js
+import { Notification } from "blixify-ui-web/components/display/notification";
+```
+
+##### Usage
+
+```jsx
+<Notification
+  icon={<CheckCircleIcon className="w-10 h-10 text-primary-600" />}
+  notificationAttribute={{
+    title: "Notification Title",
+    desc: "Lorem Ipsum",
+    visible: true,
+  }}
+  lib={{
+    Transition,
+  }}
+/>
+```
+
+##### Required props
+
+| Name                    | Type                     | Description                   |
+| ----------------------- | ------------------------ | ----------------------------- |
+| `icon`                  | `React Element`          | Hero Icons                    |
+| `notificationAttribute` | `Notification Attribute` | Determine title & description |
+| `lib`                   | `class`                  | Class                         |
+
+##### Optional props
+
+| Name      | Type       | Default    | Description |
+| --------- | ---------- | ---------- | ----------- |
+| `onClose` | `function` | `() => {}` |

package/lib/components/display/notification/notification.stories.tsx

@@ -0,0 +1,30 @@
+import { Transition } from "@headlessui/react";
+import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { Notification } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Display", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Notification", () => {
+  return (
+    <Notification
+      icon={<CheckCircleIcon className="w-10 h-10 text-primary-600" />}
+      notificationAttribute={{
+        title: "Notification Title",
+        desc: "Lorem Ipsum",
+        visible: true,
+      }}
+      lib={{
+        Transition,
+      }}
+    />
+  );
+});

package/lib/components/display/progress/README.md

@@ -0,0 +1,25 @@
+# Progress
+
+<!-- STORY -->
+
+<hr>
+
+Progress Bar
+
+##### Import
+
+```js
+import { Progress } from "blixify-ui-web/components/display/progress";
+```
+
+##### Usage
+
+```jsx
+<Progress percentage={20} />
+```
+
+##### Props
+
+| Name         | Type     | Default | Description |
+| ------------ | -------- | ------- | ----------- |
+| `percentage` | `number` | ""      |             |

package/lib/components/display/progress/progress.stories.tsx

@@ -0,0 +1,15 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { Progress } from ".";
+import README from "./README.md";
+const stories = storiesOf("Display", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Progress", () => {
+  return <Progress percentage={90} />;
+});

package/lib/components/display/stepper/README.md

@@ -0,0 +1,96 @@
+# Stepper
+
+<!-- STORY -->
+
+<hr>
+
+Stepper to display content step by step
+
+##### Import
+
+```js
+import { Stepper } from "blixify-ui-web/components/display/stepper";
+```
+
+##### Usage
+
+```jsx
+const [stepIndex, setStepIndex] = useState(0);
+const steps = [
+  {
+    title: "Create account",
+    description: "Vitae sed mi luctus laoreet.",
+  },
+  {
+    title: "Profile information",
+    description: "Cursus semper viverra facilisis et et some more.",
+  },
+  {
+    title: "Business information",
+    description: "Penatibus eu quis ante.",
+  },
+  {
+    title: "Theme",
+    description: "Faucibus nec enim leo et.",
+  },
+  {
+    title: "Preview",
+    description: "Iusto et officia maiores porro ad non quas.",
+    icon: (
+      <Tag tagText={stepIndex < 4 ? "Pending" : "In Progress"} size="small" />
+    ),
+  },
+];
+return (
+  <>
+    <div className="font-medium"> Vertical Stepper</div>
+    <Stepper
+      steps={steps}
+      className="mt-5"
+      stepIndex={stepIndex}
+      onChange={(index, title, id) => {
+        setStepIndex(index);
+        // title and id are also available if needed
+      }}
+    />
+    <div className="mt-5 font-medium"> Horizontal Stepper</div>
+    <Stepper
+      steps={steps}
+      className="mt-5"
+      horizontal={true}
+      stepIndex={stepIndex}
+      onChange={(index, title, id) => {
+        setStepIndex(index);
+        // title and id are also available if needed
+      }}
+    />
+  </>
+);
+```
+
+##### Required props
+
+| Name        | Type              | Description                                          |
+| ----------- | ----------------- | ---------------------------------------------------- |
+| `stepIndex` | `number`          | Current index of steps                               |
+| `steps`     | `Step Class List` | Determine title & description                        |
+| `onChange`  | `function`        | `(index: number, title: string, id?: string) => {}` |
+
+##### Optional props
+
+| Name         | Type             | Default | Description                            |
+| ------------ | ---------------- | ------- | -------------------------------------- |
+| `horizontal` | `boolean`        | null    | Whether it is horizontal or vertical   |
+| `disabled`   | `boolean`        | null    | Whether the stepper is disabled or not |
+| `light`      | `boolean`        | null    | Whether stepper is in dark background  |
+| `className`  | `tailwind class` | ""      |                                        |
+
+##### Step Class
+
+| Name          | Type            | Required | Description                                                         |
+| ------------- | --------------- | -------- | ------------------------------------------------------------------- |
+| `title`       | `string`        | Yes      |                                                                     |
+| `description` | `string`        |          |                                                                     |
+| `icon`        | `React Element` |          | Add Icon right of title (Vertical), Override Step Icon (Horizontal) |
+| `skip`        | `boolean`       |          | Greyed out Minus Icon                                               |
+| `id`          | `string`        |          | Optional id identifier for the step, passed to onChange callback    |