albinasoft-ui-package 1.0.4 → 1.0.6

package/dist/CustomCheckbox/CustomCheckbox.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface CustomCheckboxProps {
+    id?: string;
+    name?: string;
+    label: string;
+    value: boolean;
+    required?: boolean;
+    errorMessage?: string;
+    conditionalErrorVisible?: boolean;
+    conditionalErrorMessage?: string;
+    tooltip?: string;
+    description?: string | null;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const CustomCheckbox: React.FC<CustomCheckboxProps>;
+export default CustomCheckbox;

package/dist/CustomCheckbox/CustomCheckbox.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_bootstrap_1 = require("react-bootstrap");
+var fa_1 = require("react-icons/fa");
+var CustomCheckbox = function (_a) {
+    var id = _a.id, name = _a.name, label = _a.label, value = _a.value, _b = _a.required, required = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, conditionalErrorVisible = _a.conditionalErrorVisible, conditionalErrorMessage = _a.conditionalErrorMessage, tooltip = _a.tooltip, description = _a.description, _c = _a.disabled, disabled = _c === void 0 ? false : _c, className = _a.className, style = _a.style, onChange = _a.onChange;
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement("div", { className: "form-check form-group", style: style },
+            tooltip ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: tooltip ? react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(id || name) }, tooltip) : react_1.default.createElement(react_1.default.Fragment, null) },
+                react_1.default.createElement("input", { id: id, name: name, type: "checkbox", className: "form-check-input", checked: value, disabled: disabled, onChange: onChange, required: required }))) : (react_1.default.createElement("input", { id: id, name: name, type: "checkbox", className: "form-check-input", checked: value, disabled: disabled, onChange: onChange, required: required })),
+            react_1.default.createElement("label", { htmlFor: id, className: "form-check-label" }, label),
+            required && (react_1.default.createElement("div", { className: "invalid-feedback text-danger" },
+                react_1.default.createElement("div", { className: "description-icon" },
+                    react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
+                react_1.default.createElement("div", { className: "description-text" },
+                    react_1.default.createElement("span", null, errorMessage || 'Bu seçim zorunludur.')))),
+            conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning" },
+                react_1.default.createElement("div", { className: "description-icon" },
+                    react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
+                react_1.default.createElement("div", { className: "description-text" },
+                    react_1.default.createElement("span", null, conditionalErrorMessage)))),
+            description && (react_1.default.createElement("div", { className: "form-description text-secondary" },
+                react_1.default.createElement("div", { className: "description-icon" },
+                    react_1.default.createElement(fa_1.FaInfoCircle, null)),
+                react_1.default.createElement("div", { className: "description-text" },
+                    react_1.default.createElement("span", null, description)))))));
+};
+exports.default = CustomCheckbox;

package/dist/CustomDateTimePicker/CustomDateTimePicker.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import 'react-datepicker/dist/react-datepicker.css';
+declare enum TimeFormat {
+    H = "HH",
+    M = "mm",
+    HM = "HH:mm"
+}
+interface CustomDateTimePickerProps {
+    id?: string;
+    name?: string;
+    label: string;
+    value: Date | null;
+    placeholder?: string;
+    required?: boolean;
+    errorMessage?: string;
+    conditionalErrorVisible?: boolean;
+    conditionalErrorMessage?: string;
+    tooltip?: string;
+    description?: string | null;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    showTimeSelect?: boolean;
+    showTimeSelectOnly?: boolean;
+    timeFormat?: TimeFormat;
+    timeIntervals?: number;
+    onChange: (date: Date | null) => void;
+}
+declare const CustomDateTimePicker: React.FC<CustomDateTimePickerProps>;
+export { CustomDateTimePicker, TimeFormat };
+export default CustomDateTimePicker;

package/dist/CustomDateTimePicker/CustomDateTimePicker.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeFormat = exports.CustomDateTimePicker = void 0;
+var react_1 = __importDefault(require("react"));
+var react_datepicker_1 = __importDefault(require("react-datepicker"));
+require("react-datepicker/dist/react-datepicker.css");
+var react_bootstrap_1 = require("react-bootstrap");
+var fa_1 = require("react-icons/fa");
+var TimeFormat;
+(function (TimeFormat) {
+    TimeFormat["H"] = "HH";
+    TimeFormat["M"] = "mm";
+    TimeFormat["HM"] = "HH:mm";
+})(TimeFormat || (TimeFormat = {}));
+exports.TimeFormat = TimeFormat;
+var CustomDateTimePicker = function (_a) {
+    var id = _a.id, name = _a.name, label = _a.label, value = _a.value, placeholder = _a.placeholder, _b = _a.required, required = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, _c = _a.conditionalErrorVisible, conditionalErrorVisible = _c === void 0 ? false : _c, conditionalErrorMessage = _a.conditionalErrorMessage, tooltip = _a.tooltip, description = _a.description, _d = _a.disabled, disabled = _d === void 0 ? false : _d, className = _a.className, style = _a.style, showTimeSelect = _a.showTimeSelect, showTimeSelectOnly = _a.showTimeSelectOnly, _e = _a.timeFormat, timeFormat = _e === void 0 ? TimeFormat.HM : _e, timeIntervals = _a.timeIntervals, onChange = _a.onChange;
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement("div", { className: "form-group" },
+            react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label),
+            react_1.default.createElement("div", { className: "position-relative" },
+                react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: tooltip ? react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(id) }, tooltip) : react_1.default.createElement(react_1.default.Fragment, null) },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(react_datepicker_1.default, { id: id, name: name, selected: value, onChange: onChange, className: "form-control ".concat(className || ''), placeholderText: placeholder, disabled: disabled, required: required, showTimeSelect: showTimeSelect || false, showTimeSelectOnly: showTimeSelectOnly || false, showTimeCaption: false, timeFormat: timeFormat, dateFormat: showTimeSelectOnly ? timeFormat : showTimeSelect ? "dd.MM.yyyy HH:mm" : "dd.MM.yyyy", timeIntervals: timeFormat == TimeFormat.H ? 60 : timeFormat == TimeFormat.M ? 1 : timeIntervals ? timeIntervals : 30 }))),
+                required && !value && (react_1.default.createElement("div", { className: "invalid-feedback text-danger mt-2" },
+                    react_1.default.createElement("div", { className: "description-icon" },
+                        react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
+                    react_1.default.createElement("div", { className: "description-text" },
+                        react_1.default.createElement("span", null, errorMessage || 'This field is required.')))),
+                conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning mt-2" },
+                    react_1.default.createElement("div", { className: "description-icon" },
+                        react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
+                    react_1.default.createElement("div", { className: "description-text" },
+                        react_1.default.createElement("span", null, conditionalErrorMessage)))),
+                description && (react_1.default.createElement("div", { className: "form-description text-secondary mt-2" },
+                    react_1.default.createElement("div", { className: "description-icon" },
+                        react_1.default.createElement(fa_1.FaInfoCircle, null)),
+                    react_1.default.createElement("div", { className: "description-text" },
+                        react_1.default.createElement("span", null, description))))))));
+};
+exports.CustomDateTimePicker = CustomDateTimePicker;
+exports.default = CustomDateTimePicker;

package/dist/CustomDivider/CustomDivider.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+declare enum Color {
+    DEFAULT = "currentColor",
+    PRIMARY = "text-primary",
+    SECONDARY = "text-secondary",
+    SUCCESS = "text-success",
+    WARNING = "text-warning",
+    DANGER = "text-danger",
+    INFO = "text-info",
+    DARK = "text-dark",
+    LIGHT = "text-light"
+}
+declare enum Alignment {
+    LEFT = "left",
+    CENTER = "center",
+    RIGHT = "right"
+}
+declare enum Thickness {
+    T1 = "1px",
+    T2 = "2px",
+    T3 = "3px",
+    T4 = "4px",
+    T5 = "5px",
+    T6 = "6px",
+    T8 = "8px",
+    T10 = "10px",
+    T12 = "12px",
+    T16 = "16px",
+    T24 = "24px"
+}
+declare enum Width {
+    W10 = "10%",
+    W25 = "25%",
+    W33 = "33%",
+    W50 = "50%",
+    W66 = "66%",
+    W75 = "75%",
+    W100 = "100%"
+}
+interface CustomDividerProps {
+    id?: string;
+    color?: Color;
+    thickness?: Thickness;
+    width?: Width;
+    alignment?: Alignment;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const CustomDivider: React.FC<CustomDividerProps>;
+export { CustomDivider, Color, Alignment, Thickness, Width };
+export default CustomDivider;

package/dist/CustomDivider/CustomDivider.js

@@ -0,0 +1,87 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Width = exports.Thickness = exports.Alignment = exports.Color = exports.CustomDivider = void 0;
+var react_1 = __importDefault(require("react"));
+var Color;
+(function (Color) {
+    Color["DEFAULT"] = "currentColor";
+    Color["PRIMARY"] = "text-primary";
+    Color["SECONDARY"] = "text-secondary";
+    Color["SUCCESS"] = "text-success";
+    Color["WARNING"] = "text-warning";
+    Color["DANGER"] = "text-danger";
+    Color["INFO"] = "text-info";
+    Color["DARK"] = "text-dark";
+    Color["LIGHT"] = "text-light";
+})(Color || (Color = {}));
+exports.Color = Color;
+var Alignment;
+(function (Alignment) {
+    Alignment["LEFT"] = "left";
+    Alignment["CENTER"] = "center";
+    Alignment["RIGHT"] = "right";
+})(Alignment || (Alignment = {}));
+exports.Alignment = Alignment;
+var Thickness;
+(function (Thickness) {
+    Thickness["T1"] = "1px";
+    Thickness["T2"] = "2px";
+    Thickness["T3"] = "3px";
+    Thickness["T4"] = "4px";
+    Thickness["T5"] = "5px";
+    Thickness["T6"] = "6px";
+    Thickness["T8"] = "8px";
+    Thickness["T10"] = "10px";
+    Thickness["T12"] = "12px";
+    Thickness["T16"] = "16px";
+    Thickness["T24"] = "24px";
+})(Thickness || (Thickness = {}));
+exports.Thickness = Thickness;
+var Width;
+(function (Width) {
+    Width["W10"] = "10%";
+    Width["W25"] = "25%";
+    Width["W33"] = "33%";
+    Width["W50"] = "50%";
+    Width["W66"] = "66%";
+    Width["W75"] = "75%";
+    Width["W100"] = "100%";
+})(Width || (Width = {}));
+exports.Width = Width;
+var CustomDivider = function (_a) {
+    var id = _a.id, _b = _a.color, color = _b === void 0 ? Color.DEFAULT : _b, // Varsayılan renk (gri ton)
+    _c = _a.thickness, // Varsayılan renk (gri ton)
+    thickness = _c === void 0 ? Thickness.T1 : _c, // Varsayılan kalınlık
+    _d = _a.width, // Varsayılan kalınlık
+    width = _d === void 0 ? Width.W100 : _d, // Varsayılan genişlik
+    _e = _a.alignment, // Varsayılan genişlik
+    alignment = _e === void 0 ? Alignment.CENTER : _e, // Varsayılan hizalama
+    _f = _a.className, // Varsayılan hizalama
+    className = _f === void 0 ? '' : _f, _g = _a.style, style = _g === void 0 ? {} : _g;
+    var combinedClassName = "".concat(color, " ").concat(className).trim();
+    // Hizalama stilini belirleme
+    var alignmentStyle = {
+        marginLeft: alignment === 'left' ? '0' : 'auto',
+        marginRight: alignment === 'right' ? '0' : 'auto',
+    };
+    return (react_1.default.createElement("hr", { id: id || "custom-divider-".concat(Date.now()), 
+        //className={`custom-divider ${className}`.trim()}
+        className: "custom-divider ".concat(combinedClassName), style: __assign(__assign({ border: 'none', borderTop: "".concat(thickness, " solid"), // Çizgiyi oluştur
+            width: width }, alignmentStyle), style) }));
+};
+exports.CustomDivider = CustomDivider;
+exports.default = CustomDivider;

package/dist/CustomForm/CustomForm.d.ts

@@ -0,0 +1,159 @@
+import React from 'react';
+import { TreeNode } from '../CustomTreeView/CustomTreeView';
+declare enum ElementType {
+    INPUT = "input",
+    TEXTAREA = "textarea",
+    CHECKBOX = "checkbox",
+    RADIO = "radio",
+    SELECT = "select",
+    DATETIMEPICKER = "datetimepicker",
+    TEXT = "text",
+    DIVIDER = "divider",
+    RICHTEXTBOX = "richtextbox",
+    TREEVIEW = "treeview",
+    BUTTON = "button"
+}
+interface InputElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: string;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+interface TextareaElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: string;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+interface CheckboxElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: boolean;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+interface RadioButtonElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: string;
+    options: {
+        id: string;
+        label: string;
+        value: string;
+    }[];
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+interface SelectElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: string[];
+    options: {
+        id: string;
+        label: string;
+        value: string;
+    }[];
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (value: string | string[]) => void;
+}
+interface DateTimePickerElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: Date | null;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (e: Date | null) => void;
+}
+interface TextElement {
+    id: string;
+    type: ElementType;
+    value: string;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    style?: React.CSSProperties;
+    className?: string;
+}
+interface DividerElement {
+    id?: string;
+    type: ElementType;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface RichTextboxElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: string;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (value: string) => void;
+}
+interface TreeViewElement {
+    id?: string;
+    type: ElementType;
+    label?: string;
+    value: string[];
+    treeData: TreeNode[];
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (selected: string[]) => void;
+}
+interface ButtonElement {
+    id?: string;
+    type: ElementType;
+    label: string;
+    className?: string;
+    onClick: (event: React.FormEvent) => void;
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+}
+type FormElement = InputElement | TextareaElement | CheckboxElement | RadioButtonElement | SelectElement | DateTimePickerElement | TextElement | DividerElement | RichTextboxElement | TreeViewElement | ButtonElement;
+interface CustomFormProps {
+    elements: FormElement[];
+    onSubmit: (formValues: Record<string, any>) => void;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    handleCancel?: () => void;
+    showConfirmButton?: boolean;
+    showCancelButton?: boolean;
+}
+declare const CustomForm: React.FC<CustomFormProps>;
+export { CustomForm, ElementType };
+export default CustomForm;

package/dist/CustomForm/CustomForm.js

@@ -0,0 +1,163 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementType = exports.CustomForm = void 0;
+var react_1 = __importStar(require("react"));
+var react_toastify_1 = require("react-toastify");
+var CustomButton_1 = __importDefault(require("../CustomButton/CustomButton"));
+var CustomInput_1 = __importDefault(require("../CustomInput/CustomInput"));
+var CustomTextarea_1 = __importDefault(require("../CustomTextarea/CustomTextarea"));
+var CustomCheckbox_1 = __importDefault(require("../CustomCheckbox/CustomCheckbox"));
+var CustomRadioButton_1 = __importDefault(require("../CustomRadioButton/CustomRadioButton"));
+var CustomSelect_1 = __importDefault(require("../CustomSelect/CustomSelect"));
+var CustomDateTimePicker_1 = __importDefault(require("../CustomDateTimePicker/CustomDateTimePicker"));
+var CustomText_1 = __importDefault(require("../CustomText/CustomText"));
+var CustomDivider_1 = __importDefault(require("../CustomDivider/CustomDivider"));
+var CustomRichTextbox_1 = __importDefault(require("../CustomRichTextbox/CustomRichTextbox"));
+var CustomTreeView_1 = __importDefault(require("../CustomTreeView/CustomTreeView"));
+var ElementType;
+(function (ElementType) {
+    ElementType["INPUT"] = "input";
+    ElementType["TEXTAREA"] = "textarea";
+    ElementType["CHECKBOX"] = "checkbox";
+    ElementType["RADIO"] = "radio";
+    ElementType["SELECT"] = "select";
+    ElementType["DATETIMEPICKER"] = "datetimepicker";
+    ElementType["TEXT"] = "text";
+    ElementType["DIVIDER"] = "divider";
+    ElementType["RICHTEXTBOX"] = "richtextbox";
+    ElementType["TREEVIEW"] = "treeview";
+    ElementType["BUTTON"] = "button";
+})(ElementType || (ElementType = {}));
+exports.ElementType = ElementType;
+var CustomForm = function (_a) {
+    var elements = _a.elements, onSubmit = _a.onSubmit, _b = _a.confirmLabel, confirmLabel = _b === void 0 ? 'Confirm' : _b, // Varsayılan değer
+    _c = _a.cancelLabel, // Varsayılan değer
+    cancelLabel = _c === void 0 ? 'Cancel' : _c, // Varsayılan değer
+    handleCancel = _a.handleCancel, _d = _a.showConfirmButton, showConfirmButton = _d === void 0 ? true : _d, // Varsayılan olarak görünür
+    _e = _a.showCancelButton, // Varsayılan olarak görünür
+    showCancelButton = _e === void 0 ? false : _e;
+    var formRef = (0, react_1.useRef)(null);
+    var handleConfirm = function (e) {
+        e.preventDefault();
+        var form = formRef.current;
+        if (!form)
+            return;
+        var isValid = form.checkValidity();
+        if (isValid) {
+            var formValues_1 = {};
+            Array.from(form.elements).forEach(function (element) {
+                if (element instanceof HTMLInputElement ||
+                    element instanceof HTMLTextAreaElement ||
+                    element instanceof HTMLSelectElement) {
+                    if (element.id) { //RichTextbox boş göndermemesi için
+                        var name_1 = element.name || element.id;
+                        if (element instanceof HTMLInputElement && element.type === ElementType.RADIO) {
+                            if (element.checked) {
+                                formValues_1[name_1] = element.value;
+                            }
+                        }
+                        else if (element instanceof HTMLInputElement && element.type === ElementType.CHECKBOX) {
+                            formValues_1[name_1] = element.checked;
+                        }
+                        else if (element instanceof HTMLSelectElement && element.multiple) {
+                            var selectedOptions = Array.from(element.selectedOptions).map(function (option) { return option.value; });
+                            formValues_1[name_1] = selectedOptions;
+                        }
+                        else if (element instanceof HTMLSelectElement) {
+                            formValues_1[name_1] = [element.value]; // Tekli seçim bile array olarak döner
+                        }
+                        else {
+                            formValues_1[name_1] = element.value;
+                        }
+                    }
+                }
+            });
+            // CustomForm elemanlarını kontrol etme
+            elements.forEach(function (element) {
+                if ('value' in element && element.type === ElementType.RICHTEXTBOX) {
+                    formValues_1[element.id] = element.value; // RichTextbox değerini ekleme
+                }
+            });
+            // Form verilerini JSON olarak çıktıya yazdır
+            console.log(JSON.stringify(formValues_1, null, 2));
+            onSubmit(formValues_1);
+        }
+        else {
+            react_toastify_1.toast.error('Gerekli tüm alanları doldurunuz.');
+            form.classList.add('was-validated');
+        }
+    };
+    // Elemanları satır, sütun ve iç satıra göre gruplama
+    var groupedElements = elements.reduce(function (acc, el) {
+        var row = el.rowId || 0;
+        var col = el.colId || 0;
+        var innerRow = el.innerRowId || 0;
+        if (!acc[row])
+            acc[row] = {};
+        if (!acc[row][col])
+            acc[row][col] = {};
+        if (!acc[row][col][innerRow])
+            acc[row][col][innerRow] = [];
+        acc[row][col][innerRow].push(el);
+        return acc;
+    }, {});
+    return (react_1.default.createElement("form", { ref: formRef, noValidate: true, className: "needs-validation", autoComplete: "off" },
+        Object.entries(groupedElements).map(function (_a) {
+            var rowId = _a[0], columns = _a[1];
+            return (react_1.default.createElement("div", { className: "row", key: "row-".concat(rowId) }, Object.entries(columns).map(function (_a) {
+                var colId = _a[0], innerRows = _a[1];
+                return (react_1.default.createElement("div", { className: "col", key: "col-".concat(rowId, "-").concat(colId) }, Object.entries(innerRows).map(function (_a) {
+                    var innerRowId = _a[0], elements = _a[1];
+                    return (react_1.default.createElement("div", { className: "row", key: "inner-row-".concat(rowId, "-").concat(colId, "-").concat(innerRowId) }, elements.map(function (element) { return (react_1.default.createElement("div", { className: element.colClass || 'col-12', key: element.id }, element.type === ElementType.TEXT ? (react_1.default.createElement(CustomText_1.default, __assign({}, element))) : element.type === ElementType.INPUT ? (react_1.default.createElement(CustomInput_1.default, __assign({}, element))) : element.type === ElementType.TEXTAREA ? (react_1.default.createElement(CustomTextarea_1.default, __assign({}, element))) : element.type === ElementType.CHECKBOX ? (react_1.default.createElement(CustomCheckbox_1.default, __assign({}, element))) : element.type === ElementType.RADIO ? (react_1.default.createElement(CustomRadioButton_1.default, __assign({}, element))) : element.type === ElementType.SELECT ? (react_1.default.createElement(CustomSelect_1.default, __assign({}, element))) : element.type === ElementType.DATETIMEPICKER ? (react_1.default.createElement(CustomDateTimePicker_1.default, __assign({}, element))) : element.type === ElementType.DIVIDER ? (react_1.default.createElement(CustomDivider_1.default, __assign({}, element))) : element.type === ElementType.RICHTEXTBOX ? (react_1.default.createElement(CustomRichTextbox_1.default, __assign({}, element))) :
+                        element.type === ElementType.TREEVIEW ? (react_1.default.createElement(CustomTreeView_1.default, __assign({}, element))) :
+                            element.type === ElementType.BUTTON ? (react_1.default.createElement(CustomButton_1.default, __assign({}, element))
+                            // ) : element.type === ElementType.UPLOADER ? (
+                            //   <CustomUploader {...(element as UploaderElement)} />
+                            ) : null)); })));
+                })));
+            })));
+        }),
+        (showConfirmButton || showCancelButton) && (react_1.default.createElement("div", { className: "card-footer mt-3" },
+            react_1.default.createElement("div", { className: "form-actions mt-3" },
+                showCancelButton && (react_1.default.createElement(CustomButton_1.default, { label: cancelLabel, className: "btn btn-secondary", onClick: handleCancel || (function () { }) })),
+                showConfirmButton && (react_1.default.createElement(CustomButton_1.default, { label: confirmLabel, onClick: handleConfirm })))))));
+};
+exports.CustomForm = CustomForm;
+exports.default = CustomForm;

package/dist/CustomInput/CustomInput.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+declare enum InputType {
+    TEXT = "text",
+    NUMBER = "number",
+    TEL = "tel",
+    PASSWORD = "password",
+    EMAIL = "email",
+    FILE = "file"
+}
+interface CustomInputProps {
+    id?: string;
+    name?: string;
+    label: string;
+    inputType?: InputType;
+    value: string;
+    placeholder?: string;
+    required?: boolean;
+    errorMessage?: string;
+    conditionalErrorVisible?: boolean;
+    conditionalErrorMessage?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    buttonIcon?: React.ReactNode;
+    buttonTooltip?: string;
+    description?: string | null;
+    tooltip?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    buttonOnClick?: () => void;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const CustomInput: React.FC<CustomInputProps>;
+export { CustomInput, InputType };
+export default CustomInput;