blixify-ui-web-mcp 0.1.1

package/lib/components/data/readQueryHoc/README.md

@@ -0,0 +1,89 @@
+# Read Query HOC
+
+<!-- STORY -->
+
+<hr>
+
+Read Query Higher Order Component for database actions
+
+##### Import
+
+```js
+import { ReadQueryHoc } from "blixify-ui-web/components/data/readQueryHoc";
+```
+
+##### Usage
+
+```jsx
+<ReadQueryHoc
+  database={{
+    dbModule: axios,
+    dbType: "fbServer",
+    dbCollection: "tasks",
+    dbEndpoint: "http://localhost:3000",
+  }}
+  cond={{
+    type: "list",
+    query: [{ type: ">", value: 1, queryId: "count" }],
+    limit: 1,
+    sort: { sortId: "count", type: "asc" },
+    cursor: 20,
+  }}
+/>
+```
+
+##### Props
+
+| Name | Type | Description | Optional |
+| --------- | ------------ | ----------- ||
+| `database` | `Database Class` | DB Module ||
+| `cond` | `ReadQuery Class` | Query Class ||
+| `onChangeData` | `(dataClass : {data : any, count : any }) => {}` | Called when new data is received ||
+
+##### Database Class
+
+| Name | Type | Description | Optional |
+| --------- | ------------ | ----------- ||
+| `dbModule` | `axios or firebase` | Class ||
+| `dbType` | `mongoServer/fbServer/firebase` | string ||
+| `dbCollection` | `string` | Collection to call ||
+| `dbEndpoint` | `string` | Eg api.example.com | true |
+| `dbAPIToken` | `string` | API Token | true|
+| `dbUserToken` | `string` | User ID Token | true |
+
+##### ReadQuery Class
+
+| Name        | Type        | Description        | Optional                     |
+| ----------- | ----------- | ------------------ | ---------------------------- |
+| `type`      | `get/list`  | Query Type         |                              |
+| `id`        | `string`    | Read ID            | Required for get query       |
+| `query`     | `Query`     | Query Class        | true                         |
+| `cursor`    | `any`       | Last index of item | true                         |
+| `limit`     | `number`    | Limitation of data | Required for firebase module |
+| `sort`      | `Sort`      | Sort Class         | true                         |
+| `aggregate` | `Aggregate` | Aggregate Class    | true                         |
+
+##### Query Class
+
+| Name        | Type                 | Description    | Optional                             |
+| ----------- | -------------------- | -------------- | ------------------------------------ |
+| `type`      | `search/=/>/</></in` | Query Type     |                                      |
+| `value`     | `any`                | Value of query | Value will be a list during >< query |
+| `queryId`   | `string`             | Query Id       | Required except search               |
+| `searchIds` | `string[]`           | Search Ids     | Required during search               |
+
+##### Aggregate Class
+
+| Name      | Type                  | Description          | Optional                                                       |
+| --------- | --------------------- | -------------------- | -------------------------------------------------------------- |
+| `type`    | `count/avg/sum/value` | Aggregate Type       |                                                                |
+| `queryId` | `string`              | Query Id             | Required except search                                         |
+| `dateId`  | `string`              | Date Id              | Required for date range filter                                 |
+| `range`   | `string[]`            | string array of date | format of date range "DD/MM/YYYY HH:mm:ss-DD/MM/YYYY HH:mm:ss" |
+
+##### Sort Class
+
+| Name     | Type       | Description  | Optional |
+| -------- | ---------- | ------------ | -------- |
+| `sortId` | `string`   | Sort Id      |          |
+| `type`   | `asc/desc` | Type of Sort |          |

package/lib/components/data/readQueryHoc/readQueryHoc.stories.tsx

@@ -0,0 +1,33 @@
+import { storiesOf } from "@storybook/react";
+import axios from "axios";
+import React from "react";
+import { ReadQueryHoc } from ".";
+import README from "./README.md";
+
+const stories = storiesOf("Data", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("ReadQueryHoc", () => {
+  return (
+    <ReadQueryHoc
+      database={{
+        dbModule: axios,
+        dbType: "fbServer",
+        dbCollection: "tasks",
+        dbEndpoint: "http://localhost:3000",
+      }}
+      cond={{
+        type: "list",
+        query: [{ type: ">", value: 1, queryId: "count" }],
+        limit: 1,
+        sort: { sortId: "count", type: "asc" },
+        cursor: 20,
+      }}
+    />
+  );
+});

package/lib/components/data/writeQuery/README.md

@@ -0,0 +1,178 @@
+# Write Query
+
+<!-- STORY -->
+
+<hr>
+
+`WriteQuery` is a low-level utility class for writing data to MongoDB (via server) or Firebase. Use it when you need direct create/update/delete access outside of DataTemplate or DataTemplateWrapper — for example, custom form submissions, batch operations, or programmatic data mutations.
+
+## How It Works
+
+1. Instantiate `WriteQuery` with your database config
+2. Call `.call(queryType, queryData)` with the operation and payload
+3. Returns `true` on success, or throws on error
+
+## Setup
+
+```ts
+import axios from "axios";
+import { WriteQuery } from "blixify-ui-web/data/writeQuery";
+
+const query = new WriteQuery({
+  dbModule: axios,
+  dbType: "mongoDB", // "mongoDB" | "fbServer" | "firebase"
+  dbCollection: "tasks",
+  dbEndpoint: "https://api.example.com/api/mongoData",
+  dbAPIToken: "your-api-token", // optional
+  dbUserToken: "user-id-token", // optional
+});
+```
+
+## Usage Examples
+
+### Create a record
+
+```ts
+await query.call("create", {
+  data: {
+    name: "New Task",
+    status: "pending",
+    createdAt: new Date().toISOString(),
+  },
+});
+```
+
+### Update a record
+
+```ts
+await query.call("update", {
+  id: "abc123",
+  data: { status: "completed" },
+});
+```
+
+### Unset (remove) fields on update
+
+```ts
+await query.call("update", {
+  id: "abc123",
+  data: { status: "active" },
+  unsetData: { tempField: 1, legacyNote: 1 }, // removes these fields
+});
+```
+
+### Upsert — create if not found
+
+```ts
+await query.call("update", {
+  id: "abc123",
+  data: { name: "Task", status: "pending" },
+  upsert: true, // creates the doc if it doesn't exist
+});
+```
+
+### Delete a record
+
+```ts
+await query.call("delete", { id: "abc123" });
+```
+
+### Batch create
+
+```ts
+await query.call("batchCreate", {
+  data: [
+    { name: "Task A", status: "pending" },
+    { name: "Task B", status: "pending" },
+  ],
+});
+```
+
+### Batch delete by IDs
+
+```ts
+await query.call("batchDelete", {
+  id: ["abc123", "def456", "ghi789"],
+});
+```
+
+### Batch delete by query
+
+```ts
+await query.call("batchDelete", {
+  query: [{ queryId: "status", type: "=", value: "archived" }],
+});
+```
+
+### Batch update by query
+
+```ts
+await query.call("batchUpdate", {
+  query: [{ queryId: "status", type: "=", value: "pending" }],
+  data: { status: "active" },
+});
+```
+
+### Batch update with OR query
+
+```ts
+await query.call("batchUpdate", {
+  query: [
+    { queryId: "status", type: "=", value: "draft" },
+    { queryId: "status", type: "=", value: "pending" },
+  ],
+  data: { status: "active" },
+  isOrQuery: true, // match either condition
+});
+```
+
+### Unique constraint on create
+
+```ts
+await query.call("create", {
+  data: { email: "[email]", name: "[name]" },
+  unique: "email", // reject if a doc with this email already exists
+});
+```
+
+### Stop response (fire and forget)
+
+```ts
+await query.call("create", {
+  data: { name: "Log Entry", event: "login" },
+  stopRes: true, // don't wait for response body
+});
+```
+
+---
+
+## Constructor
+
+| Param          | Type                              | Description          | Optional |
+| -------------- | --------------------------------- | -------------------- | -------- |
+| `dbModule`     | `axios \| firebase`               | HTTP/Firebase module |          |
+| `dbType`       | `mongoDB \| fbServer \| firebase` | Backend type         |          |
+| `dbCollection` | `string`                          | Collection name      |          |
+| `dbEndpoint`   | `string`                          | API base URL         | ✓        |
+| `dbAPIToken`   | `string`                          | API token            | ✓        |
+| `dbUserToken`  | `string`                          | User ID token        | ✓        |
+
+## Call Method
+
+| Param       | Type                                                                      | Description                                               |
+| ----------- | ------------------------------------------------------------------------- | --------------------------------------------------------- |
+| `queryType` | `create \| update \| delete \| batchCreate \| batchDelete \| batchUpdate` | Operation type. Batch ops require `mongoDB` or `fbServer` |
+| `queryData` | `WriteQueryData`                                                          | Payload — see table below                                 |
+
+## WriteQueryData
+
+| Param       | Type                 | Description                                      | Optional                                                      |
+| ----------- | -------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
+| `id`        | `string \| string[]` | Document ID(s)                                   | Required for `update`, `delete`, `batchDelete` by ID          |
+| `data`      | `any \| any[]`       | Document data                                    | Required for `create`, `update`, `batchCreate`, `batchUpdate` |
+| `unsetData` | `any`                | Fields to remove on update `{ fieldName: 1 }`    | ✓                                                             |
+| `query`     | `Query[]`            | Filter for `batchDelete` / `batchUpdate`         | ✓                                                             |
+| `isOrQuery` | `boolean`            | Use OR between query conditions in `batchUpdate` | ✓                                                             |
+| `upsert`    | `boolean`            | Create doc if not found during `update`          | ✓                                                             |
+| `unique`    | `string`             | Field name to enforce uniqueness on `create`     | ✓                                                             |
+| `stopRes`   | `boolean`            | Skip waiting for response body                   | ✓                                                             |

package/lib/components/data/writeQuery/writeQuery.stories.tsx

@@ -0,0 +1,209 @@
+import { storiesOf } from "@storybook/react";
+import axios from "axios";
+import React, { useState } from "react";
+import { WriteQuery } from ".";
+import { Button } from "../../action/button";
+import { StorySection } from "../../storyUtils";
+import README from "./README.md";
+
+const stories = storiesOf("Data", module);
+
+stories.addParameters({
+  readme: { content: README },
+});
+
+const query = new WriteQuery({
+  dbModule: axios,
+  dbType: "mongoDB",
+  dbCollection: "tasks",
+  dbEndpoint: "https://api.example.com/api/mongoData",
+});
+
+stories.add("Write Query", () => {
+  const [result, setResult] = useState<string>("");
+
+  const run = async (label: string, fn: () => Promise<any>) => {
+    try {
+      const res = await fn();
+      setResult(`[${label}] Success: ${JSON.stringify(res)}`);
+    } catch (err: any) {
+      setResult(`[${label}] Error: ${err?.message ?? String(err)}`);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6 w-full p-4">
+      <StorySection
+        title="Create a Record"
+        description="Insert a new document into the collection."
+      >
+        <Button
+          text="Create"
+          type="light"
+          onClick={() =>
+            run("create", () =>
+              query.call("create", {
+                data: {
+                  name: "New Task",
+                  status: "pending",
+                  createdAt: new Date().toISOString(),
+                },
+              })
+            )
+          }
+        />
+      </StorySection>
+
+      <StorySection
+        title="Update a Record"
+        description="Update specific fields on an existing document by ID."
+      >
+        <Button
+          text="Update"
+          type="light"
+          onClick={() =>
+            run("update", () =>
+              query.call("update", {
+                id: "abc123",
+                data: { status: "completed" },
+              })
+            )
+          }
+        />
+      </StorySection>
+
+      <StorySection
+        title="Unset Fields on Update"
+        description="Remove specific fields from a document using unsetData."
+      >
+        <Button
+          text="Unset Fields"
+          type="light"
+          onClick={() =>
+            run("unset", () =>
+              query.call("update", {
+                id: "abc123",
+                data: { status: "active" },
+                unsetData: { tempField: 1, legacyNote: 1 }, // removes these fields
+              })
+            )
+          }
+        />
+      </StorySection>
+
+      <StorySection
+        title="Upsert — Create if Not Found"
+        description="Update a document, or create it if it doesn't exist yet."
+      >
+        <Button
+          text="Upsert"
+          type="light"
+          onClick={() =>
+            run("upsert", () =>
+              query.call("update", {
+                id: "abc123",
+                data: { name: "Task", status: "pending" },
+                upsert: true,
+              })
+            )
+          }
+        />
+      </StorySection>
+
+      <StorySection
+        title="Delete a Record"
+        description="Delete a single document by ID."
+      >
+        <Button
+          text="Delete"
+          type="light"
+          onClick={() =>
+            run("delete", () => query.call("delete", { id: "abc123" }))
+          }
+        />
+      </StorySection>
+
+      <StorySection
+        title="Batch Create"
+        description="Insert multiple documents in one call. Requires mongoDB or fbServer."
+      >
+        <Button
+          text="Batch Create"
+          type="light"
+          onClick={() =>
+            run("batchCreate", () =>
+              query.call("batchCreate", {
+                data: [
+                  { name: "Task A", status: "pending" },
+                  { name: "Task B", status: "pending" },
+                ],
+              })
+            )
+          }
+        />
+      </StorySection>
+
+      <StorySection
+        title="Batch Delete by IDs"
+        description="Delete multiple documents by passing an array of IDs."
+      >
+        <Button
+          text="Batch Delete by IDs"
+          type="light"
+          onClick={() =>
+            run("batchDelete-ids", () =>
+              query.call("batchDelete", {
+                id: ["abc123", "def456", "ghi789"],
+              })
+            )
+          }
+        />
+      </StorySection>
+
+      <StorySection
+        title="Batch Delete by Query"
+        description="Delete all documents matching a filter condition."
+      >
+        <Button
+          text="Batch Delete by Query"
+          type="light"
+          onClick={() =>
+            run("batchDelete-query", () =>
+              query.call("batchDelete", {
+                query: [{ queryId: "status", type: "=", value: "archived" }],
+              })
+            )
+          }
+        />
+      </StorySection>
+
+      <StorySection
+        title="Batch Update by Query"
+        description="Update all documents matching a filter. Use isOrQuery to switch from AND to OR logic."
+      >
+        <Button
+          text="Batch Update"
+          type="light"
+          onClick={() =>
+            run("batchUpdate", () =>
+              query.call("batchUpdate", {
+                query: [
+                  { queryId: "status", type: "=", value: "draft" },
+                  { queryId: "status", type: "=", value: "pending" },
+                ],
+                data: { status: "active" },
+                isOrQuery: true, // match either condition
+              })
+            )
+          }
+        />
+      </StorySection>
+
+      {result && (
+        <div className="mt-4 p-3 bg-gray-100 rounded text-xs text-gray-700 break-all">
+          {result}
+        </div>
+      )}
+    </div>
+  );
+});

package/lib/components/design/actionSection/README.md

@@ -0,0 +1,47 @@
+# Action Section
+
+<!-- STORY -->
+
+<hr>
+
+Action Section as call to action section of a Website
+
+##### Import
+
+```js
+import { ActionSection } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+<ActionSection
+  title="Join Blixify Space Now !"
+  buttonText="Sign Up Now"
+  buttonLink="./signup"
+/>
+```
+
+##### Custom Styling
+
+```jsx
+<ActionSection
+  title="Custom Padding"
+  buttonText="Custom Button"
+  buttonLink="./custom"
+  className="px-8 py-16"
+/>
+```
+
+##### Optional props
+
+| Name               | Type               | Default                                        | Description                                         |
+| ------------------ | ------------------ | ---------------------------------------------- | --------------------------------------------------- |
+| `title`            | `string`           | Title                                          |                                                     |
+| `buttonText`       | `string`           | Button Text                                    |                                                     |
+| `buttonLink`       | `string`           | Button navigation                              |                                                     |
+| `linkProps`        | `Link Props Class` | Refer to Link Component for more documentation |                                                     |
+| `backgroundImgSrc` | `string`           |                                                | Set image as background image                       |
+| `customComponent`  | `ReactElement`     |                                                | Set customize component within the section          |
+| `onClick`          | `function`         | `() => {}`                                     |                                                     |
+| `className`        | `string`           |                                                | Custom Tailwind classes to override default styling |

package/lib/components/design/actionSection/actionSection.stories.tsx

@@ -0,0 +1,74 @@
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { ActionSection } from ".";
+import { Button } from "../../action/button";
+import README from "./README.md"; // TypeScript declaration exists in types.d.ts
+
+const stories = storiesOf("Design", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+// Sample background image URL (you can replace with actual image)
+const sampleBackgroundImage =
+  "https://images.unsplash.com/photo-1516541196182-6bdb0516ed27?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
+
+stories.add("Action Section", () => {
+  return (
+    <div className="divide-y-8">
+      <ActionSection
+        title={"Join Blixify Space Now ! "}
+        buttonText="Sign Up Now"
+        buttonLink="./signup"
+      />
+      <ActionSection
+        backgroundImgSrc={sampleBackgroundImage}
+        customComponent={
+          <div className="flex flex-col w-9/12 sm:w-8/12">
+            <h5 className="text-xl text-primary-600 font-bold sm:w-8/12 sm:text-2xl md:text-3xl">
+              Create an account to receive latest updates from us
+            </h5>
+            <p className="text-md mt-2">
+              Pawsome Bargains: Unleash Savings for Your Furry Friends at our
+              Pet Shop!
+            </p>
+            <Button
+              text="Sign Up"
+              className="max-w-md mt-5"
+              type="normal"
+              size="small"
+            />
+          </div>
+        }
+      />
+      <ActionSection
+        customComponent={
+          <div className="flex items-center justify-between w-full">
+            <div className="flex items-center gap-3">
+              <div className="flex items-center justify-center w-8 h-8 bg-yellow-500 rounded-full">
+                <ExclamationTriangleIcon className="w-5 h-5 text-white" />
+              </div>
+              <div>
+                <h5 className="text-lg font-semibold">
+                  Account expires in 7 days
+                </h5>
+                <p className="text-sm text-gray-800">
+                  Renew your subscription to continue
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <Button text="Renew" type="normal" size="small" />
+              <Button text="Learn More" type="light" size="small" />
+            </div>
+          </div>
+        }
+        className="px-4 py-6 bg-white border-2 border-gray-200"
+      />
+    </div>
+  );
+});

package/lib/components/design/banner/README.md

@@ -0,0 +1,43 @@
+# Banner
+
+<!-- STORY -->
+
+<hr>
+
+Banner to be displayed at top of a website for emergency notification
+
+##### Import
+
+```js
+import { Banner } from "blixify-ui-web/lib";
+```
+
+##### Usage
+
+```jsx
+const renderContent = () => {
+  return (
+    <>
+      <p className="text-xs sm:text-sm text-white">
+        Lorem ipsum dolor sit amet.
+        <a
+          className="underline"
+          target="_blank"
+          rel="noreferrer"
+          href="https://blixify.co"
+        >
+          https://blixify.co
+        </a>
+      </p>
+    </>
+  );
+};
+
+return <Banner content={renderContent()} />;
+```
+
+##### Required props
+
+| Name      | Type    | Description    |                |
+| --------- | ------- | -------------- | -------------- |
+| `content` | `string | React Element` | Banner content |