pixelize-design-library 1.0.89 → 1.0.91

package/.github/workflows/build.yml

@@ -0,0 +1,31 @@
+name: Check Build on PR
+
+# Trigger the workflow when a pull request is raised against the develop branch
+on:
+  pull_request:
+    branches:
+      - develop
+
+# Define the job to run the build
+jobs:
+  check-build:
+    runs-on: ubuntu-latest
+
+    steps:
+    # Check out the code from the repository
+    - name: Checkout code
+      uses: actions/checkout@v3
+
+    # Set up Node.js environment
+    - name: Set up Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '18'  # Specify your required Node.js version
+
+    # Install npm dependencies
+    - name: Install dependencies
+      run: npm install
+
+    # Run the build script
+    - name: Run build
+      run: npm run build

package/dist/Components/Common/FormLabel.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
-export declare const TextLabel: ({ label, id }: {
+export declare const TextLabel: ({ label, id, isInformation, informationMessage, isRequired, }: {
     label: string;
     id?: string | undefined;
+    isInformation?: boolean | undefined;
+    informationMessage?: string | undefined;
+    isRequired: boolean;
 }) => React.JSX.Element;

package/dist/Components/Common/FormLabel.js

@@ -7,9 +7,15 @@ exports.TextLabel = void 0;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var icons_1 = require("@chakra-ui/icons");
 var TextLabel = function (_a) {
-    var label = _a.label, id = _a.id;
+    var label = _a.label, id = _a.id, isInformation = _a.isInformation, informationMessage = _a.informationMessage, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], mb: "0.1rem", fontWeight: 600, fontSize: 14 }, label));
+    return (react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], mb: "0.1rem", fontWeight: 600, fontSize: 14 },
+        label,
+        isRequired && react_1.default.createElement("span", { style: { color: "red" } }, "*"),
+        isInformation && (react_1.default.createElement(ToolTip_1.default, { placement: "top", hasArrow: true, label: informationMessage },
+            react_1.default.createElement(icons_1.InfoIcon, { ml: 1, position: "absolute", top: "3px", fontSize: 14, color: theme.colors.gray[500] })))));
 };
 exports.TextLabel = TextLabel;

package/dist/Components/Input/TextInput.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { TextInputProps } from "./TextInputProps";
-declare function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputGroupStyle, inputStyle, size, }: TextInputProps): React.JSX.Element;
+declare function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputGroupStyle, inputStyle, size, isInformation, informationMessage, }: TextInputProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TextInput>;
 export default _default;

package/dist/Components/Input/TextInput.js

@@ -21,10 +21,10 @@ var FormLabel_1 = require("../Common/FormLabel");
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 function TextInput(_a) {
-    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "250px" : _g, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _h = _a.size, size = _h === void 0 ? "sm" : _h;
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "250px" : _g, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _h = _a.size, size = _h === void 0 ? "sm" : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.FormControl, { isRequired: isRequired, isInvalid: error },
-        label && react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id }),
+    return (react_1.default.createElement(react_2.FormControl, { isInvalid: error },
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
         react_1.default.createElement(react_2.InputGroup, { width: width, style: inputGroupStyle },
             react_1.default.createElement(react_2.Input, { type: type, variant: "flushed", placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
             inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, { onClick: onRightIconclick }, inputRightIcon))),

package/dist/Components/Input/TextInputProps.d.ts

@@ -11,4 +11,6 @@ export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "p
     inputRightIcon?: JSX.Element | string;
     inputStyle?: {};
     inputGroupStyle?: {};
+    isInformation?: boolean;
+    informationMessage?: string;
 };

package/dist/Components/Select/Select.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { chakraSelectProps } from "./SelectProps";
-export default function Select({ placeholder, size, variant, icon, bg, borderColor, color, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, formControlStyle, }: chakraSelectProps): React.JSX.Element;
+export default function Select({ placeholder, size, variant, icon, bg, borderColor, color, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, formControlStyle, isInformation, informationMessage, }: chakraSelectProps): React.JSX.Element;

package/dist/Components/Select/Select.js

@@ -32,7 +32,7 @@ var FormLabel_1 = require("../Common/FormLabel");
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 function Select(_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, bg = _a.bg, borderColor = _a.borderColor, color = _a.color, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, _e = _a.value, value = _e === void 0 ? "" : _e, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.width, width = _g === void 0 ? 500 : _g, formControlStyle = _a.formControlStyle;
+    var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, bg = _a.bg, borderColor = _a.borderColor, color = _a.color, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.width, width = _h === void 0 ? 500 : _h, formControlStyle = _a.formControlStyle, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage;
     var getOptionsList = (0, react_1.useCallback)(function () {
         if (!options.length)
             return react_1.default.createElement("option", { value: "" }, "No Options");
@@ -40,13 +40,13 @@ function Select(_a) {
     }, [options]);
     var handleOnChange = function (event) {
         var selectedValue = event.target.value;
-        var selectedOption = options.find(function (option) { return option.id === selectedValue; });
+        var selectedOption = options.find(function (option) { return option.id.toString() === selectedValue.toString(); });
         if (selectedOption && onChange) {
             onChange(selectedOption);
         }
     };
-    return (react_1.default.createElement(react_2.FormControl, { isRequired: isRequired, isInvalid: error, style: formControlStyle, width: width },
-        label && react_1.default.createElement(FormLabel_1.TextLabel, { label: label }),
+    return (react_1.default.createElement(react_2.FormControl, { isInvalid: error, style: formControlStyle, width: width },
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
         react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: "flushed", icon: icon, bg: bg, borderColor: borderColor, color: color, isInvalid: error, value: value, onChange: handleOnChange, width: width, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor }, getOptionsList()),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));

package/dist/Components/Select/SelectProps.d.ts

@@ -9,6 +9,8 @@ export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "vari
     width?: string | number;
     onChange: (selectedOption: OptionProp | undefined) => void;
     formControlStyle?: React.CSSProperties;
+    isInformation?: boolean;
+    informationMessage?: string;
 };
 export type OptionProp = {
     id: string | number;

package/dist/Components/SelectSearch/SelectSearch.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { SelectSearchProps } from "./SelectSearchProps";
-export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, dropdownStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, }: Readonly<SelectSearchProps>): React.JSX.Element;
+export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, dropdownStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, }: Readonly<SelectSearchProps>): React.JSX.Element;

package/dist/Components/SelectSearch/SelectSearch.js

@@ -39,11 +39,11 @@ var react_2 = require("@chakra-ui/react");
 var FormLabel_1 = require("../Common/FormLabel");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function SelectSearch(_a) {
-    var options = _a.options, _b = _a.initialSelectedOption, initialSelectedOption = _b === void 0 ? null : _b, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, inputStyle = _a.inputStyle, dropdownStyle = _a.dropdownStyle, isOptionLoading = _a.isOptionLoading, _c = _a.loadingText, loadingText = _c === void 0 ? "loading" : _c, boxStyle = _a.boxStyle, _d = _a.placeholder, placeholder = _d === void 0 ? "Select Option" : _d, _e = _a.searchQuery, searchQuery = _e === void 0 ? "" : _e;
+    var options = _a.options, _b = _a.initialSelectedOption, initialSelectedOption = _b === void 0 ? null : _b, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, inputStyle = _a.inputStyle, dropdownStyle = _a.dropdownStyle, isOptionLoading = _a.isOptionLoading, _c = _a.loadingText, loadingText = _c === void 0 ? "loading" : _c, boxStyle = _a.boxStyle, _d = _a.placeholder, placeholder = _d === void 0 ? "Select Option" : _d, _e = _a.searchQuery, searchQuery = _e === void 0 ? "" : _e, _f = _a.isInformation, isInformation = _f === void 0 ? false : _f, informationMessage = _a.informationMessage;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _f = (0, react_1.useState)(initialSelectedOption ? initialSelectedOption.label : ""), inputValue = _f[0], setInputValue = _f[1];
-    var _g = (0, react_1.useState)(false), isOpen = _g[0], setIsOpen = _g[1];
-    var _h = (0, react_1.useState)("below"), position = _h[0], setPosition = _h[1];
+    var _g = (0, react_1.useState)(initialSelectedOption ? initialSelectedOption.label : ""), inputValue = _g[0], setInputValue = _g[1];
+    var _h = (0, react_1.useState)(false), isOpen = _h[0], setIsOpen = _h[1];
+    var _j = (0, react_1.useState)("below"), position = _j[0], setPosition = _j[1];
     var inputRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
     var filteredOptions = (0, react_1.useMemo)(function () {
@@ -127,7 +127,7 @@ function SelectSearch(_a) {
         return (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"));
     }, [filteredOptions, isOptionLoading, loadingText, handleOptionClick]);
     return (react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle },
-        label && react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id }),
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: false, isInformation: isInformation, informationMessage: informationMessage })),
         react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "flushed", value: inputValue, onClick: function () { return setIsOpen(true); }, onChange: function (e) { return inputOnchange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, 
             // {...inputStyle}
             style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),

package/dist/Components/SelectSearch/SelectSearchProps.d.ts

@@ -15,6 +15,8 @@ export type SelectSearchProps = {
     loadingText?: string;
     placeholder?: string;
     searchQuery: string;
+    isInformation?: boolean;
+    informationMessage?: string;
 };
 export type MultiSelectOptions = {
     id: string;

package/dist/Layout.js

@@ -588,7 +588,7 @@ var Layout = function () {
                         // inputGroupStyle={{ border: "0px solid", padding: "0px" }}
                         error: true, errorMessage: "Required", onChange: function (e) {
                             console.log(e.target.files);
-                        }, helperText: "sometibg", isRequired: true }),
+                        }, helperText: "sometibg", isRequired: true, informationMessage: "This is information", isInformation: true }),
                     react_1.default.createElement("br", null),
                     react_1.default.createElement("br", null),
                     react_1.default.createElement(Button_1.default, { label: "TestButton", onClick: function () {
@@ -683,7 +683,7 @@ var Layout = function () {
                                 react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "25%" }),
                                 react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "10%" }),
                                 react_1.default.createElement(react_2.Skeleton, { height: "20px", width: "20%" }))); })), loadingBoxStyle: { padding: "10px", width: "100%" }, isVisiblity: false }),
-                    react_1.default.createElement(ToolTip_1.default, { label: "Hello", placement: "top", hasArrow: true, size: "20", width: "300px", height: "100px", bg: "green" }, "hai"),
+                    react_1.default.createElement(ToolTip_1.default, { label: "Hello", placement: "top", hasArrow: true }, "hai"),
                     react_1.default.createElement("br", null),
                     react_1.default.createElement(react_2.Box, null,
                         react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-around" } },

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "./bootstrap";
 import Accordian from "./Components/Accordion/Accordion";
 import AlertDialog from "./Components/AlertDialog/AlertDialog";
 import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";

package/dist/index.js

@@ -1,5 +1,4 @@
 "use strict";
-// import "./bootstrap";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -29,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.TableProps = exports.TableEnums = exports.TableActionCreator = exports.KaTable = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
 exports.meadow = exports.radiant = exports.skyline = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = void 0;
+require("./bootstrap");
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.0.89",
+  "version": "1.0.91",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",