blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,84 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { Container } from "../../structure/container";
+import README from "./README.md";
+import { DataGraph } from "./index";
+
+const stories = storiesOf("Data", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Data Graph", () => {
+  return (
+    <Container bgColor="bg-white">
+      <DataGraph
+        charts={[
+          {
+            gridSize: 1,
+            type: "card",
+            title: "All Products",
+            description: "Related to ESH",
+            spaceId: "esh-products",
+            query: [],
+            queryBaseType: "count",
+          },
+          {
+            gridSize: 1,
+            type: "card",
+            title: "Price",
+            description: "Related to ESH",
+            spaceId: "esh-products",
+            query: [],
+            queryBaseType: "sum",
+            queryAttributeId: ["price"],
+          },
+          {
+            gridSize: 2,
+            type: "bar",
+            title: "Price per kg",
+            description: "Related to ESH",
+            spaceId: "esh-products",
+            query: [
+              { type: "=", queryId: "code", value: "P001" },
+              { type: "=", queryId: "code", value: "N001" },
+              { type: "=", queryId: "code", value: "A001" },
+            ],
+            queryBaseType: "sum",
+            queryAttributeId: ["price"],
+          },
+          // {
+          //   gridSize: 2,
+          //   type: "radar",
+          //   title: "Price per kg",
+          //   description: "Related to ESH",
+          //   spaceId: "meraque-order",
+          //   query: [
+          //     {
+          //       type: "=",
+          //       queryId: "status",
+          //       value: "Not Completed",
+          //     },
+          //     {
+          //       type: "=",
+          //       queryId: "status",
+          //       value: "Completed",
+          //     },
+          //   ],
+          //   queryBaseType: "sum",
+          //   queryAttributeId: ["cropSprayed", "areaSprayed", "pesticideUsed"],
+          //   queryBaseDateId: "startDate",
+          // },
+        ]}
+        workspace={{
+          apiEndpoint: "http://localhost:3000/api/data",
+          assetEndpoint:
+            "https://firebasestorage.googleapis.com/v0/b/esh-web-dev.appspot.com/o/",
+        }}
+      />
+    </Container>
+  );
+});

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

@@ -0,0 +1,62 @@
+# Data Reference
+
+<!-- STORY -->
+
+<hr>
+
+Data Reference
+
+##### Import
+
+```js
+import { DataReference } from "blixify-ui-web/components/data/dataReference";
+
+return (
+  <div className="p-4 rounded-md bg-zinc-700">
+    <DataReference
+      value={value}
+      schema={{
+        id: "title",
+        type: "reference",
+        name: "Reference",
+        referenceLabel: "title",
+        referenceSpaceId: "meraque-cycles",
+      }}
+      devSettings={{
+        apiEndpoint: "http://localhost:3000/api/data",
+        apiEndpointType: "mongoDB",
+        assetEndpoint:
+          "https://firebasestorage.googleapis.com/v0/b/esh-web-dev.appspot.com/o/",
+      }}
+      lib={{
+        axios: axios,
+      }}
+      onChange={(value) => {
+        setValue(value);
+      }}
+      darkMode
+      staticDropdown
+    />
+  </div>
+);
+```
+
+##### Required props
+
+| Name   | Type            | Description                          |
+| ------ | --------------- | ------------------------------------ |
+| value  | `any`           | Value (string or an array of string) |
+| schema | `DataStructure` | Refer to DataStructure               |
+
+##### Optional props
+
+| Name                | Type                   | Description                                                                                                                            |
+| ------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| devSettings         | `WorkspaceDevSettings` | Refer WorkspaceDevSettings                                                                                                             |
+| onChange            | `(value: any) => void` | On change callback function                                                                                                            |
+| lib                 | `{ axios?: any}`       | Additional libraries                                                                                                                   |
+| optional            | `boolean`              |                                                                                                                                        |
+| darkMode            | `booelan`              |                                                                                                                                        |
+| staticDropdown      | `booelan`              | When `true`, the parent container's height will expand to fit this component.                                                          |
+| closeOnClickOutside | `booelan`              | When `true`, the option container will remain open and close when users clicks outside of the container. Only applies to multi select. |
+| subLabel            | `string`               | Sub Label text for better UI/UX Explanation for the select                                                                             |

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

@@ -0,0 +1,53 @@
+import { storiesOf } from "@storybook/react";
+import axios from "axios";
+import { useState } from "react";
+import { DataReference } from "../dataReference/index";
+import README from "./README.md";
+
+const stories = storiesOf("Data", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Data Reference", () => {
+  const [value, setValue] = useState("");
+
+  return (
+    <div className="p-4 rounded-md bg-zinc-800">
+      <DataReference
+        value={value}
+        subLabel="Testing sublabel"
+        schema={{
+          id: "salesSelected",
+          name: "Referral Sales Person",
+          type: "reference",
+          referenceSpaceId: "nonAuthSalesNameList",
+          referenceLabel: "name",
+          referenceQuery: [
+            {
+              type: "=",
+              value: "Sales",
+              queryId: "dup__of_role__1",
+            },
+          ],
+          referenceSort: { sortId: "name", type: "asc" },
+        }}
+        devSettings={{
+          apiEndpoint: `http://localhost:3000/api`,
+          apiEndpointType: "mondayServer",
+        }}
+        lib={{
+          axios: axios,
+        }}
+        onChange={(value) => {
+          setValue(value);
+        }}
+        darkMode
+        staticDropdown
+      />
+    </div>
+  );
+});