sccoreui 3.6.8 → 3.7.0

package/dist/App.scss

@@ -481,4 +481,80 @@ div:has(ul.date_filter) .p-datepicker-footer {
   .p-multiselect-header {
     display: none;
   }
+}
+
+.errorField {
+  color: var(--red-500);
+}
+
+.fullWidth {
+  width: 37.125rem;
+}
+
+.PhoneInput {
+  background: #ffffff;
+  border: 1px solid var(--gray-300);
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
+    box-shadow 0.2s;
+  border-radius: 8px;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-right: 12px;
+  padding-left: 0px; 
+  height: 40px;
+  :focus-visible {
+    outline: none;
+  }
+  &:focus-within {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px var(--primary-100);
+    border-radius: 8px;
+    border: 1px solid var(--primary-300);
+  }
+
+  .PhoneInputInput {
+    border: none;
+  }
+}
+
+.PhoneInputCountry {
+  .PhoneInputCountryIcon--border {
+    box-shadow: none;
+    background-color: #ffffff;
+  }
+  .PhoneInputCountryIconImg {
+    width: 20px;
+    height: 20px;
+    object-fit: cover;
+    border-radius: 100%;
+    position: absolute;
+    top: 0;
+  }
+}
+
+.phoneNumberClass {
+  margin-left: 14.5rem;
+}
+
+#customCountryDropDown {
+  .p-dropdown {
+    border: none;
+    box-shadow: none;
+    background: none;
+    padding: 0;
+    .p-dropdown-label {
+      padding: 0;
+      padding-right: 4px;
+    }
+    .p-dropdown-trigger {
+      padding-top: 20px;
+    }
+    .p-dropdown-trigger[aria-expanded="true"] {
+      padding-bottom: 20px;
+    }
+  }
+
 }

package/dist/components/form/form-fields/form-fields.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const formik_1 = require("formik");
+const react_1 = require("react");
+const inputtext_1 = require("primereact/inputtext");
+const dropdown_1 = require("primereact/dropdown");
+const multiselect_1 = require("primereact/multiselect");
+const inputtextarea_1 = require("primereact/inputtextarea");
+const max_1 = tslib_1.__importStar(require("react-phone-number-input/max"));
+const InputTextField = (props) => {
+    const { errors, touched, name, length, label, placeholder, optional, max } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ maxLength: max, placeholder: placeholder }, field, { className: `'fullWidth' ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'w-18rem'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: 'errorField' }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
+};
+const InputNumberField = (props) => {
+    const { errors, touched, name, length, label, placeholder, optional, min, max } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "number" }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ type: "number", min: min, maxLength: max, placeholder: placeholder }, field, { className: `fullWidth ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'w-18rem'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: `errorField` }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
+};
+const InputCurrencyField = (props) => {
+    const { errors, touched, name, length, label, placeholder, optional, min, max } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "number" }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-left" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ min: min, maxLength: max, type: "number", placeholder: placeholder }, field, { className: `fullWidth ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'w-18rem'}`, id: name }))] }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: `errorField` }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
+};
+const InputTextAreaField = (props) => {
+    const [charCount, setCharCount] = (0, react_1.useState)(0);
+    const { errors, touched, name, length, label, placeholder, optional, values } = props;
+    (0, react_1.useEffect)(() => {
+        setCharCount(values[name].length);
+    }, [values[name]]);
+    (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1 relative" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "textarea" }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, Object.assign({ placeholder: placeholder, style: { height: '154px', resize: 'none', overflowY: 'scroll' } }, field, { maxLength: 100, className: `pt-2 fullWidth ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'w-18rem'}`, id: name })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "absolute text-base font-normal text-gray-600", style: { bottom: '30px', right: '12px' } }, { children: [charCount, "/100"] }))] })) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: `errorField` }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
+};
+const DropDownField = (props) => {
+    const { errors, touched, name, length, label, placeholder, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({ placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, valueTemplate: customSelectedTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: `fullWidth ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'w-18rem'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: 'errorField' }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
+};
+const MultiSelectField = (props) => {
+    const { errors, touched, name, length, label, placeholder, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, valueTemplate: customSelectedTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: `fullWidth ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'w-18rem'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: 'errorField' }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
+};
+const PhoneNumberField = (props) => {
+    const [defaultCountry, setDefaultCountry] = (0, react_1.useState)('US');
+    const { errors, touched, name, length, label, placeholder, optional, position } = props;
+    const customCountry = (props) => {
+        const customCountryTemplate = (options) => {
+            let callCode = (0, max_1.getCountryCallingCode)(options.value);
+            return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex align-items-center gap-2' }, { children: [(0, jsx_runtime_1.jsx)("img", { src: `https://catamphetamine.github.io/country-flag-icons/3x2/${options.value}.svg`, alt: 'countries', className: 'border-circle', style: { width: '1.5rem', height: '1.5rem', objectFit: 'cover' } }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-lg font-medium text-gray-900 line-height-3' }, { children: options.label })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'text-lg font-normal text-gray-600 line-height-3' }, { children: ["+", callCode] }))] })));
+        };
+        const customSelectedVal = (options) => {
+            if (options) {
+                return ((0, jsx_runtime_1.jsx)("img", { src: `https://catamphetamine.github.io/country-flag-icons/3x2/${options.value}.svg`, alt: 'selected-country', className: 'border-circle ml-2', style: { width: '1.5rem', height: '1.5rem', objectFit: 'cover' } }));
+            }
+            return ((0, jsx_runtime_1.jsx)("div", { children: placeholder }));
+        };
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ id: 'customCountryDropDown' }, { children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { filter: true, filterBy: 'label', options: props.options, panelClassName: `${position === 'left' ? '' : 'phoneNumberClass'}`, panelStyle: { maxWidth: '18rem' }, value: props.value, itemTemplate: customCountryTemplate, valueTemplate: customSelectedVal, optionLabel: 'value', onChange: (e) => {
+                    props.onChange(e.value);
+                    setDefaultCountry(e.value);
+                } }) })));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(max_1.default, Object.assign({ international: true, name: "phoneNumber", countryCallingCodeEditable: false, withCountryCallingCode: false, countrySelectComponent: customCountry, usenationalformatfordefaultcountryvalue: "true", defaultCountry: defaultCountry, limitMaxLength: true, className: `fullWidth flex align-items-center ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? 'w-18rem' : 'w-18rem'}` }, field))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: 'errorField' }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
+};
+exports.default = { InputTextField, InputNumberField, InputCurrencyField, InputTextAreaField, DropDownField, MultiSelectField, PhoneNumberField };

package/dist/components/form/form.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const formik_1 = require("formik");
+const FormComponent = (props) => {
+    const { values, validations, children } = props;
+    return ((0, jsx_runtime_1.jsx)(formik_1.Formik, Object.assign({ initialValues: values, validationSchema: validations, onSubmit: (values) => values }, { children: ({ errors, touched, isValid, values }) => ((0, jsx_runtime_1.jsx)(formik_1.Form, { children: children({ errors, touched, isValid, values }) })) })));
+};
+exports.default = FormComponent;

package/dist/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chart = exports.ProgressSpinner = exports.Skeleton = exports.Chip = exports.Chips = exports.Rating = exports.InputTextarea = exports.InputSwitch = exports.InputMask = exports.SpeedDial = exports.SplitButton = exports.DataViewLayoutOptions = exports.DataView = exports.Toast = exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.CustomSlider = exports.Card = exports.Dialog = exports.Password = exports.confirmPopup = exports.ConfirmDialog = exports.RadioButton = exports.Badge = exports.Tooltip = exports.Calendar = exports.Image = exports.AvatarGroup = exports.Avatar = exports.classNames = exports.Paginator = exports.MultiSelect = exports.FileUpload = exports.TabMenu = exports.TabPanel = exports.TabView = exports.Sidebar = exports.Column = exports.DataTable = exports.Checkbox = exports.AutoComplete = exports.ColorPicker = exports.AccordionTab = exports.Accordion = exports.InputText = exports.Dropdown = exports.Button = void 0;
 exports.Terminal = exports.StyleClass = exports.ScrollTop = exports.InplaceContent = exports.InplaceDisplay = exports.Inplace = exports.BlockUI = exports.Messages = exports.Message = exports.TieredMenu = exports.Stesp = exports.SlideMenu = exports.Menubar = exports.Menu = exports.Dock = exports.ContextMenu = exports.Toolbar = exports.SplitterPanel = exports.Splitter = exports.ScrollPanel = exports.Panel = exports.Fieldset = exports.DeferredContent = exports.Timeline = exports.TreeTable = exports.Tree = exports.PickList = exports.OrganizationChart = exports.OrderList = exports.DataScroller = exports.TriStateCheckbox = exports.TreeSelect = exports.SelectButton = exports.MultiStateCheckbox = exports.Mention = exports.ListBox = exports.Knob = exports.Editor = exports.CascadeSelect = exports.FilterOperator = exports.FilterMatchMode = exports.Slider = exports.Galleria = exports.SvgComponent = exports.CircleProgressComponent = exports.ProgressSteps = exports.ProgressBar = exports.Divider = exports.MegaMenu = exports.BreadCrumb = void 0;
-exports.DatePicker = exports.MultiSelectDropDown = void 0;
+exports.FormFields = exports.FormComponent = exports.DatePicker = exports.MultiSelectDropDown = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = tslib_1.__importDefault(require("react-dom/client"));
@@ -207,4 +207,8 @@ var multi_select_dropdown_1 = require("./components/multi-select-dropdown/multi-
 Object.defineProperty(exports, "MultiSelectDropDown", { enumerable: true, get: function () { return tslib_1.__importDefault(multi_select_dropdown_1).default; } });
 var date_picker_1 = require("./components/date-picker/date-picker");
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return tslib_1.__importDefault(date_picker_1).default; } });
+var form_1 = require("./components/form/form");
+Object.defineProperty(exports, "FormComponent", { enumerable: true, get: function () { return tslib_1.__importDefault(form_1).default; } });
+var form_fields_1 = require("./components/form/form-fields/form-fields");
+Object.defineProperty(exports, "FormFields", { enumerable: true, get: function () { return tslib_1.__importDefault(form_fields_1).default; } });
 client_1.default.createRoot(document.getElementById("root")).render((0, jsx_runtime_1.jsx)(App_1.default, {}));

package/dist/types/components/form/form-fields/form-fields.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    InputTextField: (props: any) => import("react/jsx-runtime").JSX.Element;
+    InputNumberField: (props: any) => import("react/jsx-runtime").JSX.Element;
+    InputCurrencyField: (props: any) => import("react/jsx-runtime").JSX.Element;
+    InputTextAreaField: (props: any) => import("react/jsx-runtime").JSX.Element;
+    DropDownField: (props: any) => import("react/jsx-runtime").JSX.Element;
+    MultiSelectField: (props: any) => import("react/jsx-runtime").JSX.Element;
+    PhoneNumberField: (props: any) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;

package/dist/types/components/form/form.d.ts

@@ -0,0 +1,2 @@
+declare const FormComponent: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default FormComponent;

package/dist/types/index.d.ts

@@ -93,6 +93,8 @@ export { default as StyleClass } from "./components/style-class/styleClass";
 export { default as Terminal } from "./components/terminal/terminal";
 export { default as MultiSelectDropDown } from './components/multi-select-dropdown/multi-select-dropdown';
 export { default as DatePicker } from "./components/date-picker/date-picker";
+export { default as FormComponent } from "./components/form/form";
+export { default as FormFields } from "./components/form/form-fields/form-fields";
 import { DropdownChangeEvent } from "primereact/dropdown";
 import { ColorPickerChangeEvent } from "primereact/colorpicker";
 import { SliderChangeEvent } from "primereact/slider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "3.6.8",
+  "version": "3.7.0",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -30,16 +30,20 @@
   },
   "dependencies": {
     "chart.js": "^4.3.0",
+    "formik": "^2.4.5",
+    "libphonenumber-js": "^1.10.44",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
     "primereact": "^9.5.0",
     "quill": "^1.3.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-phone-number-input": "^3.3.6",
     "react-router-dom": "^6.12.0",
     "react-scripts": "^5.0.1",
     "sccoreui": "^2.5.2",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "yup": "^1.3.0"
   },
   "browserslist": {
     "production": [