@apexcura/ui-components 0.0.12-Beta7 → 0.0.12-Beta71

package/dist/index.mjs

@@ -15,7 +15,7 @@ var TextElement = (props) => {
       type: props.type,
       status: props.status,
       style: props.styles,
-      className: props.classNames,
+      className: props.className,
       variant: props.variant,
       name: props.name,
       onChange: (e) => props.onChange(e.target.value)
@@ -56,7 +56,7 @@ var NumberElement = (props) => {
     const newValue = e.target.value.replace(/[^0-9]/g, "");
     props.onChange(newValue);
   };
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(
     AntInput2,
     {
       placeholder: props.placeholder,
@@ -68,13 +68,12 @@ var NumberElement = (props) => {
       prefix: props.prefix,
       type: props.type,
       status: props.status,
-      style: props.styles,
-      className: props.classNames,
+      className: props.className,
       variant: props.variant,
       name: props.name,
       onChange: handleInputChange
     }
-  ));
+  );
 };
 
 // src/Components/TextareaElement.tsx
@@ -82,7 +81,7 @@ import React4 from "react";
 import { Flex, Input as Input2 } from "antd";
 var { TextArea } = Input2;
 var TextareaElement = (props) => {
-  return /* @__PURE__ */ React4.createElement(Flex, { vertical: true, gap: 32 }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React4.createElement(Flex, null, /* @__PURE__ */ React4.createElement(
     TextArea,
     {
       placeholder: props.placeholder,
@@ -91,8 +90,7 @@ var TextareaElement = (props) => {
       disabled: props.disabled,
       id: props.name,
       status: props.status,
-      style: props.styles,
-      className: props.classNames,
+      className: props.className,
       variant: props.variant,
       name: props.name,
       showCount: true,
@@ -130,7 +128,7 @@ var SelectElement = (props) => {
       id: props.name,
       status: props.status,
       style: props.styles,
-      className: props.classNames,
+      className: props.className,
       variant: props.variant,
       onChange: handleChange
     }
@@ -138,27 +136,58 @@ var SelectElement = (props) => {
 };
 
 // src/Components/RadioElement.tsx
-import React6 from "react";
+import React6, { useState as useState2 } from "react";
 import { Radio } from "antd";
+var containerClassName = " ";
+var radioDefaultStyle = "bg-[#F2F2F2] border border-[#919191] rounded-[8px] m-[10px] hover:bg-[#F2F2F2] text-center text-black shadow-[0px_0px_1px_1px_#919191]";
+var radioSelectedDefaultStyle = "bg-[#E2D6F8] border border-[#B8A4DE] rounded-[8px] p-[6px] m-[10px] shadow-[0px_0px_1px_1px_#B8A4DE] text-center text-black shadow-[0px_0px_1px_1px_#919191]";
 var RadioElement = (props) => {
+  const [isDisabled, setIsDisabled] = useState2(props.disabled);
+  const [selectedValue, setSelectedValue] = useState2(props.value);
+  const optionType = props.optionType === "button" ? "button" : void 0;
   const handleChange = (e) => {
+    const selectedVal = e.target.value;
+    const selectedLabel = e.target.label;
+    const selectedOptions = [{ id: selectedLabel, value: selectedVal }];
+    setSelectedValue(selectedVal);
+    setIsDisabled(true);
     if (props.onChange) {
-      const selectedVal = e.target.value;
-      const selectedOptions = [{ id: selectedVal, value: selectedVal }];
       props.onChange(selectedOptions);
     }
   };
-  return /* @__PURE__ */ React6.createElement(Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ React6.createElement(Radio, { value: 1, onChange: handleChange }, "A"), /* @__PURE__ */ React6.createElement(Radio, { value: 2, onChange: handleChange }, "B"), /* @__PURE__ */ React6.createElement(Radio, { value: 3, onChange: handleChange }, "C"), /* @__PURE__ */ React6.createElement(Radio, { value: 4, onChange: handleChange }, "D"));
+  const getButtonStyle = (option) => {
+    return selectedValue === option.value ? `${radioSelectedDefaultStyle} ${option.selectedClassName}` : `${radioDefaultStyle} ${option.className}`;
+  };
+  return /* @__PURE__ */ React6.createElement("div", { className: containerClassName }, /* @__PURE__ */ React6.createElement("p", null, props.label), /* @__PURE__ */ React6.createElement(
+    Radio.Group,
+    {
+      onChange: handleChange,
+      optionType,
+      className: props.className,
+      value: selectedValue
+    },
+    props.options && props.options.map((option) => /* @__PURE__ */ React6.createElement(
+      Radio,
+      {
+        key: option.value,
+        value: option.value,
+        disabled: isDisabled && selectedValue !== option.value,
+        className: getButtonStyle(option),
+        style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
+      },
+      option.label
+    ))
+  ));
 };
 
 // src/Components/Checkbox.tsx
-import React7, { useState as useState2 } from "react";
+import React7, { useState as useState3 } from "react";
 import { Checkbox, Divider } from "antd";
 var CheckboxGroup = Checkbox.Group;
 var plainOptions = ["Apple", "Pear", "Orange"];
 var defaultCheckedList = [];
 var CheckboxElement = (props) => {
-  const [checkedList, setCheckedList] = useState2(defaultCheckedList);
+  const [checkedList, setCheckedList] = useState3(defaultCheckedList);
   const checkAll = plainOptions.length === checkedList.length;
   const handleChange = (list) => {
     setCheckedList(list);
@@ -182,7 +211,7 @@ var CheckboxElement = (props) => {
       disabled: props.disabled,
       id: props.name,
       style: props.styles,
-      className: props.classNames,
+      className: props.className,
       onChange: onHandleAllChanges,
       checked: checkAll
     },
@@ -192,7 +221,7 @@ var CheckboxElement = (props) => {
     {
       disabled: props.disabled,
       style: props.styles,
-      className: props.classNames,
+      className: props.className,
       options: plainOptions,
       value: checkedList,
       onChange: handleChange
@@ -219,8 +248,7 @@ var CkEditor = (props) => {
     {
       apiKey: "rwpgt7maa54n0pe5mglhkl686p7h57sg6z636n6gf2mio1b9",
       onInit: (_evt, editor) => {
-        if (editor)
-          editorRef.current = editor;
+        if (editor) editorRef.current = editor;
       },
       initialValue: "<p>This is the initial content of the editor.</p>",
       init: {
@@ -308,90 +336,186 @@ var MultipleSelectElement = (props) => {
 
 // src/Components/Button.tsx
 import React11 from "react";
-import { Button as Button2, Flex as Flex2 } from "antd";
-var ButtonElement = () => /* @__PURE__ */ React11.createElement(Flex2, { gap: "small" }, /* @__PURE__ */ React11.createElement(Button2, { type: "primary" }, "Primary Button"));
+import { Button as Button2 } from "antd";
+var defaultClassName = "w-[126px] h-[40px] bg-purple-800 text-white rounded-full shadow-lg submit border-none";
+var ButtonElement = (props) => {
+  const handleClick = typeof props.action === "string" ? () => {
+    console.log("Performing action:", props.action);
+  } : props.action;
+  return /* @__PURE__ */ React11.createElement(
+    Button2,
+    {
+      onClick: handleClick,
+      className: `${defaultClassName} ${props.className ? props.className : ""}`
+    },
+    props.label
+  );
+};
 
 // src/Components/AddMoreTable.tsx
-import React12, { useState as useState3 } from "react";
-import { Table } from "antd";
+import React12, { useEffect, useState as useState4 } from "react";
+import { Table, Button as Button3 } from "antd";
 import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
 var AddMoreTable = (props) => {
   const { thead, tbody } = props;
-  const [tableData, setTableData] = useState3({});
-  const [rows, setRows] = useState3(tbody || []);
-  function isColumnType(column) {
-    return column.dataIndex !== void 0;
-  }
-  const onHandleChange = (name, value) => {
-    setTableData((prev) => ({ ...prev, [name]: value }));
-    console.log(tableData);
-  };
+  const [rows, setRows] = useState4(tbody || []);
   const onHandleRows = () => {
-    const lastRow = rows[rows.length - 1];
-    const newId = lastRow ? lastRow.id + 1 : lastRow.id;
-    const newRow = {
-      ...lastRow,
-      id: newId
+    const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
+    let newRow = {
+      id: newId,
+      label: "Medicine",
+      name: "Medicine",
+      type: "text",
+      element: "single-select",
+      variable_data: [
+        {
+          id: 1,
+          Route: { label: "Route", element: "single-select", type: "text" },
+          Dose: { label: "Dose", element: "single-select", type: "text" },
+          Frequency: { label: "Frequency", element: "single-select", type: "text" },
+          When: { label: "When", element: "textarea", type: "text" },
+          Duration: { label: "Duration", element: "textarea", type: "text" },
+          Instructions: { label: "Instructions", element: "textarea", type: "text" },
+          SubRows: { delete: "delete", add: "plus" }
+        }
+      ]
     };
     setRows((prevData) => [...prevData, newRow]);
   };
-  const onHandleDelete = (index) => {
-    const remainingRows = rows.filter((eachRow) => eachRow.id !== index);
-    setRows(remainingRows);
+  const onHandleDelete = (id) => {
+    setRows((prevRows) => prevRows.filter((row) => row.id !== id));
   };
-  const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
-    title: eachHeadEl.label,
-    dataIndex: eachHeadEl.name,
-    key: eachHeadEl.id
-  })) : [];
-  const renderInputElement = (element) => {
+  const onHandleSubRowsAdd = (rowIndex) => {
+    setRows((prevRows) => {
+      return prevRows.map((row, index) => {
+        if (index === rowIndex) {
+          const newSubRow = {
+            id: row.variable_data.length + 1,
+            Route: { label: "Route", element: "single-select", type: "text" },
+            Dose: { label: "Dose", element: "single-select", type: "text" },
+            Frequency: { label: "Frequency", element: "single-select", type: "text" },
+            When: { label: "When", element: "textarea", type: "text" },
+            Duration: { label: "Duration", element: "textarea", type: "text" },
+            Instructions: { label: "Instructions", element: "textarea", type: "text" },
+            SubRows: { delete: "delete", add: "plus" }
+          };
+          const updatedVariableData = [...row.variable_data, newSubRow];
+          return {
+            ...row,
+            variable_data: updatedVariableData
+          };
+        }
+        return row;
+      });
+    });
+  };
+  const onHandleSubRowsDelete = (rowIndex, subIndex) => {
+    setRows((prevRows) => {
+      return prevRows.map((row, index) => {
+        if (index === rowIndex) {
+          const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
+          return {
+            ...row,
+            variable_data: updatedVariableData
+          };
+        }
+        return row;
+      });
+    });
+  };
+  useEffect(() => {
+    console.log(rows);
+  }, [rows]);
+  const renderInputElement = (element, value) => {
+    if (!element) return null;
     const { element: type, label } = element;
-    console.log("type....", type);
     if (type === "single-select") {
-      return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value) => onHandleChange(label, value) });
+      return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
     } else if (type === "textarea") {
-      return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (value) => onHandleChange(label, value) });
+      return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
     } else {
       return null;
     }
   };
-  const dataSource = rows.map((eachRow, index) => {
-    const rowElements = {};
-    if (eachRow.element && eachRow.label) {
-      rowElements[eachRow.label] = renderInputElement(eachRow);
-    }
-    const variableData = eachRow.variable_data && Array.isArray(eachRow.variable_data) ? eachRow.variable_data.reduce((acc, curr) => {
-      if (!curr.label || !curr.element) {
-        console.error(`Invalid element in row ${index}:`, curr);
-        return acc;
-      }
-      acc[curr.label] = renderInputElement(curr);
-      return acc;
-    }, {}) : {};
-    return {
-      key: index.toString(),
-      "#": index + 1,
-      ...eachRow,
-      ...rowElements,
-      ...variableData,
-      actions: /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("button", { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), index === rows.length - 1 && /* @__PURE__ */ React12.createElement("button", { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)))
+  const dataSource = rows.map((eachRow, rowIndex) => {
+    const rowData = {
+      key: eachRow.id,
+      "#": rowIndex + 1,
+      "Medicine": renderInputElement({
+        element: eachRow.element,
+        label: eachRow.label
+      })
     };
+    eachRow.variable_data.forEach((variable, subIndex) => {
+      Object.keys(variable).forEach((key) => {
+        if (key === "SubRows") {
+          rowData[`${key}`] = /* @__PURE__ */ React12.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
+        } else {
+          rowData[`${key}`] = renderInputElement(variable[key]);
+        }
+      });
+    });
+    rowData.actions = /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
+    console.log("=====rowdata", rowData);
+    return rowData;
   });
-  if (!columns.some((col) => isColumnType(col) && col.dataIndex === "actions")) {
+  const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
+    title: eachHeadEl.label,
+    dataIndex: eachHeadEl.name,
+    key: eachHeadEl.id
+  })) : [];
+  if (!columns.some((col) => col.dataIndex === "actions")) {
     columns.push({
       title: "Actions",
       dataIndex: "actions",
       key: "actions"
     });
   }
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React12.createElement(
     Table,
     {
       columns,
-      expandable: { defaultExpandedRowKeys: ["0"] },
-      dataSource
+      dataSource,
+      pagination: false,
+      bordered: true
     }
-  ));
+  );
+};
+
+// src/Components/Sidebar.tsx
+import React13 from "react";
+var Sidebar = (props) => {
+  const handleChange = (item) => {
+    if (props.onChange) {
+      props.onChange(item);
+    }
+  };
+  return /* @__PURE__ */ React13.createElement("div", { className: props.className, key: props.name }, /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ React13.createElement("ul", { className: props.listClassName }, props.items?.map((item) => {
+    return /* @__PURE__ */ React13.createElement("li", { onClick: () => {
+      handleChange(item);
+    }, key: item.label, className: `${props.listItemClassName} ${item.active && props.activeClassName}` }, /* @__PURE__ */ React13.createElement("span", null, item.icon), /* @__PURE__ */ React13.createElement("span", null, item.label));
+  })));
+};
+
+// src/Components/Navbar.tsx
+import React16 from "react";
+
+// src/Components/Notofication.tsx
+import React14 from "react";
+import { Popover, Badge } from "antd";
+var Notification = (props) => /* @__PURE__ */ React14.createElement(Popover, { className: props.notification.className, content: props.notification.items?.map((eachItem) => {
+  return /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("p", null, eachItem.text), /* @__PURE__ */ React14.createElement("p", null, eachItem.time));
+}), trigger: "focus", placement: "bottomRight" }, /* @__PURE__ */ React14.createElement(Badge, { count: props.notification.count }, props.notification.icon));
+
+// src/Components/Profile.tsx
+import React15 from "react";
+var Profile = (props) => /* @__PURE__ */ React15.createElement("div", { className: props.profile.className }, /* @__PURE__ */ React15.createElement("img", { src: props.profile.profileImage, alt: "profile", className: props.profile.profileImageClassName }), /* @__PURE__ */ React15.createElement("div", { className: props.profile.profileSubClassName }, /* @__PURE__ */ React15.createElement("span", null, props.profile.primaryText), /* @__PURE__ */ React15.createElement("span", null, props.profile.secondaryText)));
+
+// src/Components/Navbar.tsx
+var Navbar = (props) => {
+  const test = "w-full flex justify-between";
+  const dashboradClass = "text-xl,text-default-600";
+  return /* @__PURE__ */ React16.createElement("div", { className: `${test} ${props.subContainerClassName}` }, /* @__PURE__ */ React16.createElement("div", { className: `${dashboradClass} ${props.dashboard.className}` }, props.dashboard.label), /* @__PURE__ */ React16.createElement("div", { className: "flex" }, /* @__PURE__ */ React16.createElement(Notification, { ...props }), /* @__PURE__ */ React16.createElement(Profile, { ...props })));
 };
 export {
   AddMoreTable,
@@ -399,10 +523,12 @@ export {
   CheckboxElement,
   CkEditor,
   MultipleSelectElement,
+  Navbar,
   NumberElement,
   PasswordElement,
   RadioElement,
   SelectElement,
+  Sidebar,
   SingleSelectElement,
   TextElement,
   TextareaElement

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.12-Beta7",
+  "version": "0.0.12-Beta71",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",
@@ -41,13 +41,18 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "ts-jest": "^29.1.2",
-    "tsup": "^8.0.2",
+    "tsup": "^8.1.0",
     "typescript": "^5.4.5"
   },
   "engines": {
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@tinymce/tinymce-react": "^5.0.1"
+    "@tinymce/tinymce-react": "^5.0.1",
+    "autoprefixer": "^10.4.19",
+    "esbuild": "^0.21.4",
+    "postcss": "^8.4.38",
+    "postcss-import": "^16.1.0",
+    "tailwindcss": "^3.4.3"
   }
 }

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+