@apexcura/ui-components 0.0.13-Beta2 → 0.0.13-Beta21

package/dist/index.d.mts

@@ -25,7 +25,8 @@ type ElementType = {
     fields?: any[];
     schema?: any[];
     options?: any[];
-    onChange?: (value: string | number | boolean | object | any[]) => void;
+    onChange?: (value: string | number | boolean | object | any[] | undefined) => void;
+    onClick?: () => void;
     dropDownOptions?: any[];
     id?: number;
     thead?: any[];
@@ -56,29 +57,19 @@ type ElementType = {
 };
 
 interface ElementExecuterProps$3 extends ElementType {
-    onChange: (value: string | number | boolean | object | any[]) => void;
+    onChange: (value: string | number | boolean | object | any[] | undefined) => void;
 }
 declare const TextElement: (props: ElementExecuterProps$3) => React$1.JSX.Element;
 
-interface InputData {
-    placeholder?: string;
-    id?: string;
-    prefix?: React$1.ReactNode;
-    addonBefore?: React$1.ReactNode;
-    type?: string;
-}
-interface PasswordProps {
-    inputData: InputData;
-}
-declare const PasswordElement: React$1.FC<PasswordProps>;
+declare const PasswordElement: (props: ElementType) => React$1.JSX.Element;
 
 interface ElementExecuterProps$2 extends ElementType {
-    onChange: (value: string | number | object | boolean | any[]) => void;
+    onChange: (value: string | number | object | boolean | any[] | undefined) => void;
 }
 declare const NumberElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
 
 interface ElementExecuterProps$1 extends ElementType {
-    onChange: (value: string | number | boolean | object | any[]) => void;
+    onChange: (value: string | number | boolean | object | any[] | undefined) => void;
 }
 declare const TextareaElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
 
@@ -89,7 +80,7 @@ declare const RadioElement: (props: ElementType) => React$1.JSX.Element;
 declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
 
 interface ElementExecuterProps extends ElementType {
-    onChange: (value: string | number | object | boolean | any[]) => void;
+    onChange: (value: string | number | object | boolean | any[] | undefined) => void;
 }
 declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
 
@@ -111,4 +102,8 @@ declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const DateRangePickerElement: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement };
+declare const UploadElement: (props: ElementType) => React$1.JSX.Element;
+
+declare const Image: (props: ElementType) => React$1.JSX.Element;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, Image, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement, UploadElement };

package/dist/index.d.ts

@@ -25,7 +25,8 @@ type ElementType = {
     fields?: any[];
     schema?: any[];
     options?: any[];
-    onChange?: (value: string | number | boolean | object | any[]) => void;
+    onChange?: (value: string | number | boolean | object | any[] | undefined) => void;
+    onClick?: () => void;
     dropDownOptions?: any[];
     id?: number;
     thead?: any[];
@@ -56,29 +57,19 @@ type ElementType = {
 };
 
 interface ElementExecuterProps$3 extends ElementType {
-    onChange: (value: string | number | boolean | object | any[]) => void;
+    onChange: (value: string | number | boolean | object | any[] | undefined) => void;
 }
 declare const TextElement: (props: ElementExecuterProps$3) => React$1.JSX.Element;
 
-interface InputData {
-    placeholder?: string;
-    id?: string;
-    prefix?: React$1.ReactNode;
-    addonBefore?: React$1.ReactNode;
-    type?: string;
-}
-interface PasswordProps {
-    inputData: InputData;
-}
-declare const PasswordElement: React$1.FC<PasswordProps>;
+declare const PasswordElement: (props: ElementType) => React$1.JSX.Element;
 
 interface ElementExecuterProps$2 extends ElementType {
-    onChange: (value: string | number | object | boolean | any[]) => void;
+    onChange: (value: string | number | object | boolean | any[] | undefined) => void;
 }
 declare const NumberElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
 
 interface ElementExecuterProps$1 extends ElementType {
-    onChange: (value: string | number | boolean | object | any[]) => void;
+    onChange: (value: string | number | boolean | object | any[] | undefined) => void;
 }
 declare const TextareaElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
 
@@ -89,7 +80,7 @@ declare const RadioElement: (props: ElementType) => React$1.JSX.Element;
 declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
 
 interface ElementExecuterProps extends ElementType {
-    onChange: (value: string | number | object | boolean | any[]) => void;
+    onChange: (value: string | number | object | boolean | any[] | undefined) => void;
 }
 declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
 
@@ -111,4 +102,8 @@ declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const DateRangePickerElement: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement };
+declare const UploadElement: (props: ElementType) => React$1.JSX.Element;
+
+declare const Image: (props: ElementType) => React$1.JSX.Element;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, Image, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement, UploadElement };

package/dist/index.js

@@ -36,6 +36,7 @@ __export(src_exports, {
   CkEditor: () => CkEditor,
   DatePickerElement: () => DatePickerElement,
   DateRangePickerElement: () => DateRangePickerElement,
+  Image: () => Image,
   MultipleSelectElement: () => MultipleSelectElement,
   Navbar: () => Navbar,
   NumberElement: () => NumberElement,
@@ -46,7 +47,8 @@ __export(src_exports, {
   SingleSelectElement: () => SingleSelectElement,
   TableElement: () => TableElement,
   TextElement: () => TextElement,
-  TextareaElement: () => TextareaElement
+  TextareaElement: () => TextareaElement,
+  UploadElement: () => UploadElement
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -54,7 +56,7 @@ module.exports = __toCommonJS(src_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var TextElement = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.label && /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.label && /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: props.name, style: { display: "flex", flexDirection: "row", justifyContent: "left" } }, props.label), /* @__PURE__ */ import_react.default.createElement(
     import_antd.Input,
     {
       placeholder: props.placeholder,
@@ -79,7 +81,7 @@ var TextElement = (props) => {
 var import_react2 = __toESM(require("react"));
 var import_icons = require("@ant-design/icons");
 var import_antd2 = require("antd");
-var PasswordElement = ({ inputData }) => {
+var PasswordElement = (props) => {
   const [passwordVisible, setPasswordVisible] = (0, import_react2.useState)(false);
   const handleVisibilityToggle = () => {
     setPasswordVisible((prev) => !prev);
@@ -88,11 +90,10 @@ var PasswordElement = ({ inputData }) => {
   const renderPasswordInput = () => /* @__PURE__ */ import_react2.default.createElement(
     import_antd2.Input.Password,
     {
-      placeholder: inputData.placeholder,
-      id: inputData.id,
-      prefix: inputData.prefix,
-      addonBefore: inputData.addonBefore,
-      type: inputData.type,
+      placeholder: props.placeholder,
+      prefix: props.prefix,
+      addonBefore: props.addonBefore,
+      type: props.type,
       iconRender: renderVisibilityIcon,
       visibilityToggle: { visible: passwordVisible, onVisibleChange: handleVisibilityToggle }
     }
@@ -215,7 +216,6 @@ var RadioElement = (props) => {
       value: selectedValue
     },
     props.options && props.options.map((option) => {
-      console.log(option);
       return /* @__PURE__ */ import_react6.default.createElement(
         import_antd6.Radio,
         {
@@ -238,22 +238,19 @@ var RadioElement = (props) => {
 var import_react7 = __toESM(require("react"));
 var import_antd7 = require("antd");
 var CheckboxGroup = import_antd7.Checkbox.Group;
-var plainOptions = ["Apple", "Pear", "Orange"];
 var defaultCheckedList = [];
 var CheckboxElement = (props) => {
   const [checkedList, setCheckedList] = (0, import_react7.useState)(defaultCheckedList);
-  const checkAll = plainOptions.length === checkedList.length;
+  const checkAll = props.options && props.options.length === checkedList.length;
   const handleChange = (list) => {
     setCheckedList(list);
     if (props.onChange) {
-      const selectedOptions = list.map((value) => {
-        return { id: list.indexOf(value), value };
-      });
+      const selectedOptions = props.options && props.options.filter((option) => list.includes(option.value));
       props.onChange(selectedOptions);
     }
   };
   const onHandleAllChanges = (e) => {
-    const newList = e.target.checked ? plainOptions : [];
+    const newList = e.target.checked ? props.options : [];
     setCheckedList(newList);
     if (props.onChange) {
       props.onChange(newList);
@@ -270,13 +267,13 @@ var CheckboxElement = (props) => {
       checked: checkAll
     },
     "Check all"
-  ), /* @__PURE__ */ import_react7.default.createElement(import_antd7.Divider, null), /* @__PURE__ */ import_react7.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement(
     CheckboxGroup,
     {
       disabled: props.disabled,
       style: props.styles,
       className: props.className,
-      options: plainOptions,
+      options: props.options,
       value: checkedList,
       onChange: handleChange
     }
@@ -391,13 +388,10 @@ var MultipleSelectElement = (props) => {
 // src/Components/Button.tsx
 var import_react12 = __toESM(require("react"));
 var ButtonElement = (props) => {
-  const handleClick = typeof props.action === "string" ? () => {
-    console.log("Performing action:", props.action);
-  } : props.action;
   return /* @__PURE__ */ import_react12.default.createElement(
     "button",
     {
-      onClick: handleClick,
+      onClick: () => props.onClick && props.onClick(),
       className: `${props.className ? props.className : ""}`
     },
     props.icon && /* @__PURE__ */ import_react12.default.createElement("img", { src: props.icon }),
@@ -804,6 +798,38 @@ var DateRangePickerElement = (props) => {
   ];
   return /* @__PURE__ */ import_react23.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
+
+// src/Components/UploadElement.tsx
+var import_react24 = __toESM(require("react"));
+var import_icons5 = require("@ant-design/icons");
+var import_antd17 = require("antd");
+var uploadProps = {
+  name: "file",
+  multiple: true,
+  // action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
+  headers: {
+    authorization: "authorization-text"
+  },
+  onChange(info) {
+    if (info.file.status !== "uploading") {
+      console.log(info.file, info.fileList);
+    }
+    if (info.file.status === "done") {
+      import_antd17.message.success(`${info.file.name} file uploaded successfully`);
+    } else if (info.file.status === "error") {
+      import_antd17.message.error(`${info.file.name} file upload failed.`);
+    }
+  }
+};
+var UploadElement = (props) => {
+  return /* @__PURE__ */ import_react24.default.createElement(import_antd17.Upload, { ...uploadProps }, /* @__PURE__ */ import_react24.default.createElement(import_antd17.Button, { icon: /* @__PURE__ */ import_react24.default.createElement(import_icons5.UploadOutlined, null) }, "Click to Upload"));
+};
+
+// src/Components/Image.tsx
+var import_react25 = __toESM(require("react"));
+var Image = (props) => {
+  return /* @__PURE__ */ import_react25.default.createElement("div", null, /* @__PURE__ */ import_react25.default.createElement("img", { className: props.className, src: props.img, alt: "image" }));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
@@ -812,6 +838,7 @@ var DateRangePickerElement = (props) => {
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
+  Image,
   MultipleSelectElement,
   Navbar,
   NumberElement,
@@ -822,5 +849,6 @@ var DateRangePickerElement = (props) => {
   SingleSelectElement,
   TableElement,
   TextElement,
-  TextareaElement
+  TextareaElement,
+  UploadElement
 });

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import React from "react";
 import { Input as AntInput } from "antd";
 var TextElement = (props) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.label && /* @__PURE__ */ React.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.label && /* @__PURE__ */ React.createElement("label", { htmlFor: props.name, style: { display: "flex", flexDirection: "row", justifyContent: "left" } }, props.label), /* @__PURE__ */ React.createElement(
     AntInput,
     {
       placeholder: props.placeholder,
@@ -27,7 +27,7 @@ var TextElement = (props) => {
 import React2, { useState } from "react";
 import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons";
 import { Button, Input, Space } from "antd";
-var PasswordElement = ({ inputData }) => {
+var PasswordElement = (props) => {
   const [passwordVisible, setPasswordVisible] = useState(false);
   const handleVisibilityToggle = () => {
     setPasswordVisible((prev) => !prev);
@@ -36,11 +36,10 @@ var PasswordElement = ({ inputData }) => {
   const renderPasswordInput = () => /* @__PURE__ */ React2.createElement(
     Input.Password,
     {
-      placeholder: inputData.placeholder,
-      id: inputData.id,
-      prefix: inputData.prefix,
-      addonBefore: inputData.addonBefore,
-      type: inputData.type,
+      placeholder: props.placeholder,
+      prefix: props.prefix,
+      addonBefore: props.addonBefore,
+      type: props.type,
       iconRender: renderVisibilityIcon,
       visibilityToggle: { visible: passwordVisible, onVisibleChange: handleVisibilityToggle }
     }
@@ -163,7 +162,6 @@ var RadioElement = (props) => {
       value: selectedValue
     },
     props.options && props.options.map((option) => {
-      console.log(option);
       return /* @__PURE__ */ React6.createElement(
         Radio,
         {
@@ -184,24 +182,21 @@ var RadioElement = (props) => {
 
 // src/Components/Checkbox.tsx
 import React7, { useState as useState3 } from "react";
-import { Checkbox, Divider } from "antd";
+import { Checkbox } from "antd";
 var CheckboxGroup = Checkbox.Group;
-var plainOptions = ["Apple", "Pear", "Orange"];
 var defaultCheckedList = [];
 var CheckboxElement = (props) => {
   const [checkedList, setCheckedList] = useState3(defaultCheckedList);
-  const checkAll = plainOptions.length === checkedList.length;
+  const checkAll = props.options && props.options.length === checkedList.length;
   const handleChange = (list) => {
     setCheckedList(list);
     if (props.onChange) {
-      const selectedOptions = list.map((value) => {
-        return { id: list.indexOf(value), value };
-      });
+      const selectedOptions = props.options && props.options.filter((option) => list.includes(option.value));
       props.onChange(selectedOptions);
     }
   };
   const onHandleAllChanges = (e) => {
-    const newList = e.target.checked ? plainOptions : [];
+    const newList = e.target.checked ? props.options : [];
     setCheckedList(newList);
     if (props.onChange) {
       props.onChange(newList);
@@ -218,13 +213,13 @@ var CheckboxElement = (props) => {
       checked: checkAll
     },
     "Check all"
-  ), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React7.createElement(
     CheckboxGroup,
     {
       disabled: props.disabled,
       style: props.styles,
       className: props.className,
-      options: plainOptions,
+      options: props.options,
       value: checkedList,
       onChange: handleChange
     }
@@ -339,13 +334,10 @@ var MultipleSelectElement = (props) => {
 // src/Components/Button.tsx
 import React11 from "react";
 var ButtonElement = (props) => {
-  const handleClick = typeof props.action === "string" ? () => {
-    console.log("Performing action:", props.action);
-  } : props.action;
   return /* @__PURE__ */ React11.createElement(
     "button",
     {
-      onClick: handleClick,
+      onClick: () => props.onClick && props.onClick(),
       className: `${props.className ? props.className : ""}`
     },
     props.icon && /* @__PURE__ */ React11.createElement("img", { src: props.icon }),
@@ -752,6 +744,38 @@ var DateRangePickerElement = (props) => {
   ];
   return /* @__PURE__ */ React22.createElement(Space2, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
+
+// src/Components/UploadElement.tsx
+import React23 from "react";
+import { UploadOutlined } from "@ant-design/icons";
+import { Button as Button4, message, Upload } from "antd";
+var uploadProps = {
+  name: "file",
+  multiple: true,
+  // action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
+  headers: {
+    authorization: "authorization-text"
+  },
+  onChange(info) {
+    if (info.file.status !== "uploading") {
+      console.log(info.file, info.fileList);
+    }
+    if (info.file.status === "done") {
+      message.success(`${info.file.name} file uploaded successfully`);
+    } else if (info.file.status === "error") {
+      message.error(`${info.file.name} file upload failed.`);
+    }
+  }
+};
+var UploadElement = (props) => {
+  return /* @__PURE__ */ React23.createElement(Upload, { ...uploadProps }, /* @__PURE__ */ React23.createElement(Button4, { icon: /* @__PURE__ */ React23.createElement(UploadOutlined, null) }, "Click to Upload"));
+};
+
+// src/Components/Image.tsx
+import React24 from "react";
+var Image = (props) => {
+  return /* @__PURE__ */ React24.createElement("div", null, /* @__PURE__ */ React24.createElement("img", { className: props.className, src: props.img, alt: "image" }));
+};
 export {
   AddMoreTable,
   ButtonElement,
@@ -759,6 +783,7 @@ export {
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
+  Image,
   MultipleSelectElement,
   Navbar,
   NumberElement,
@@ -769,5 +794,6 @@ export {
   SingleSelectElement,
   TableElement,
   TextElement,
-  TextareaElement
+  TextareaElement,
+  UploadElement
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.13-Beta2",
+  "version": "0.0.13-Beta21",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",