@addev-be/ui 0.2.2 → 0.2.5

package/dist/components/data/SqlRequestDataGrid/index.js

@@ -0,0 +1,208 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SqlRequestDataGrid = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var sqlRequests_1 = require("../../../services/sqlRequests");
+var lodash_1 = __importStar(require("lodash"));
+var react_1 = require("react");
+var DataGrid_1 = require("../DataGrid");
+var helpers_1 = require("./helpers");
+var helpers_2 = require("../DataGrid/helpers");
+var SqlRequestDataGrid = function (_a) {
+    var onSelectionChangeFromProps = _a.onSelectionChange, props = __rest(_a, ["onSelectionChange"]);
+    var currentRows = (0, react_1.useRef)([]);
+    var _b = (0, react_1.useState)([]), rows = _b[0], setRows = _b[1];
+    var _c = (0, react_1.useState)(0), start = _c[0], setStart = _c[1];
+    var _d = (0, react_1.useState)(50), length = _d[0], setLength = _d[1];
+    var _e = (0, react_1.useState)(-1), total = _e[0], setTotal = _e[1];
+    var _f = (0, sqlRequests_1.useSqlRequestHandler)(props.type), sqlRequest = _f[0], sqlIdRequest = _f[1];
+    var _g = (0, react_1.useState)({}), conditions = _g[0], setConditions = _g[1];
+    var _h = (0, react_1.useState)([]), orderBy = _h[0], setOrderBy = _h[1];
+    var _j = (0, react_1.useMemo)(function () { return [
+        Object.keys(props.columns),
+        Object.keys(props.columns).filter(function (key) {
+            return (0, helpers_2.isColumnVisible)(props.columns[key]);
+        }),
+    ]; }, [props.columns]), columnsKeys = _j[0], visibleColumnsKeys = _j[1];
+    var refresh = (0, react_1.useCallback)(function () {
+        setRows([]);
+        setStart(0);
+        setLength(50);
+        setTotal(-1);
+    }, []);
+    var onFiltersChanged = (0, react_1.useCallback)(function (filters) {
+        var newConditions = (0, helpers_1.convertSqlFiltersToConditions)(filters);
+        setTotal(-1);
+        setConditions(newConditions);
+    }, []);
+    var onSortsChanged = (0, react_1.useCallback)(function (sorts) {
+        refresh();
+        var newOrderBy = Object.entries(sorts).map(function (_a) {
+            var columnKey = _a[0], direction = _a[1];
+            return ({
+                field: columnKey,
+                direction: direction.toUpperCase(),
+            });
+        });
+        console.log('newOrderBy=', newOrderBy);
+        setOrderBy(newOrderBy);
+    }, [refresh]);
+    var loadRows = (0, react_1.useRef)((0, lodash_1.debounce)(function (columns, returnColumns, conditions, orderBy, start, length, getTotal) {
+        if (conditions === void 0) { conditions = []; }
+        if (orderBy === void 0) { orderBy = []; }
+        if (start === void 0) { start = 0; }
+        if (length === void 0) { length = 100; }
+        if (getTotal === void 0) { getTotal = false; }
+        sqlRequest({
+            columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
+            returnColumns: returnColumns,
+            conditions: conditions,
+            orderBy: orderBy,
+            start: start,
+            length: length,
+            getTotal: getTotal,
+        }).then(function (response) {
+            var _a;
+            var _b;
+            if (getTotal) {
+                currentRows.current = Array(response.total).fill(null);
+                if (getTotal)
+                    setTotal((_b = response.total) !== null && _b !== void 0 ? _b : 0);
+            }
+            var parsedRows = props.parser
+                ? response.data.map(props.parser)
+                : response.data;
+            (_a = currentRows.current).splice.apply(_a, __spreadArray([start, length], parsedRows, false));
+            setRows(__spreadArray([], currentRows.current, true));
+        });
+    }, 100));
+    var loadFilterValues = (0, react_1.useCallback)(function (columnKey) {
+        var _a, _b, _c, _d, _e, _f;
+        return sqlRequest({
+            columns: columnsKeys,
+            returnColumns: [columnKey],
+            conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), Object.values(lodash_1.default.pickBy(conditions, function (condition, key) { return key !== columnKey; })), true).filter(function (condition) { return condition.field !== columnKey; }),
+            orderBy: [
+                {
+                    field: (_f = (_d = (_b = props.columns[columnKey].filterField) !== null && _b !== void 0 ? _b : (_c = props.columns[columnKey].field) === null || _c === void 0 ? void 0 : _c.fieldAlias) !== null && _d !== void 0 ? _d : (_e = props.columns[columnKey].field) === null || _e === void 0 ? void 0 : _e.fieldName) !== null && _f !== void 0 ? _f : columnKey,
+                    direction: 'ASC',
+                },
+            ],
+            getTotal: false,
+            unique: true,
+        }).then(function (response) {
+            return response.data.map(function (row) { var _a, _b, _c; return (_c = (_b = (_a = props.columns[columnKey].filter) === null || _a === void 0 ? void 0 : _a.getter) === null || _b === void 0 ? void 0 : _b.call(_a, row)) !== null && _c !== void 0 ? _c : null; });
+        });
+    }, [columnsKeys, conditions, props.columns, props.conditions, sqlRequest]);
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        return loadRows.current(columnsKeys, visibleColumnsKeys, __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true), orderBy, start, length, total < 0);
+    }, [
+        props.columns,
+        conditions,
+        orderBy,
+        start,
+        length,
+        total,
+        props.conditions,
+        columnsKeys,
+        visibleColumnsKeys,
+    ]);
+    var loadCopyRows = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        return sqlRequest({
+            columns: columnsKeys,
+            returnColumns: visibleColumnsKeys,
+            conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
+            orderBy: orderBy,
+            start: 0,
+            length: total,
+        }).then(function (response) {
+            return props.parser ? response.data.map(props.parser) : response.data;
+        });
+    }, [
+        sqlRequest,
+        columnsKeys,
+        visibleColumnsKeys,
+        props.conditions,
+        props.parser,
+        conditions,
+        orderBy,
+        total,
+    ]);
+    var loadAllIds = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        return sqlIdRequest({
+            columns: ['Id'],
+            conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
+            orderBy: orderBy,
+            start: 0,
+            length: total,
+        }).then(function (response) { return response.data.map(function (row) { return row['Id']; }); });
+    }, [conditions, orderBy, props.conditions, sqlIdRequest, total]);
+    var onVisibleRowsChanged = (0, react_1.useCallback)(function (newStart, newLength) {
+        if (newStart !== start || newLength !== length) {
+            setStart(newStart);
+            setLength(newLength);
+        }
+    }, [length, start]);
+    var onSelectionChange = (0, react_1.useCallback)(function (selectedKeys) {
+        onSelectionChangeFromProps === null || onSelectionChangeFromProps === void 0 ? void 0 : onSelectionChangeFromProps(selectedKeys);
+    }, [onSelectionChangeFromProps]);
+    return ((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, __assign({ onVisibleRowsChange: onVisibleRowsChanged, filter: false, sort: false, onFiltersChanged: onFiltersChanged, onSortsChanged: onSortsChanged, filterValuesLoader: loadFilterValues, rows: rows, loadCopyRows: loadCopyRows, refresh: refresh, onSelectionChange: onSelectionChange, getAllIds: loadAllIds }, props)));
+};
+exports.SqlRequestDataGrid = SqlRequestDataGrid;

package/dist/components/data/SqlRequestDataGrid/types.d.ts

@@ -0,0 +1,20 @@
+import { ConditionDTO, FieldDTO, OrderByDTO, SqlRequestRow } from '../../../services/sqlRequests';
+import { DataGridColumn, DataGridFilter, DataGridFilterType, DataGridProps } from '../DataGrid/types';
+export type SqlRequestDataGridFilter<T extends DataGridFilterType = DataGridFilterType> = DataGridFilter<T> & {
+    field?: FieldDTO;
+};
+export type SqlRequestDataGridFilters = Record<string, SqlRequestDataGridFilter>;
+export type SqlRequestDataGridColumn<R> = DataGridColumn<R> & {
+    filter?: SqlRequestDataGridFilter;
+    field?: FieldDTO;
+    filterField?: string;
+    sortField?: string;
+};
+export type SqlRequestDataGridColumns<R> = Record<string, SqlRequestDataGridColumn<R>>;
+export type SqlRequestDataGridProps<R> = Omit<DataGridProps<R>, 'rows' | 'columns'> & {
+    columns: SqlRequestDataGridColumns<R>;
+    type: string;
+    orderBy?: OrderByDTO[];
+    conditions?: ConditionDTO[];
+    parser?: (row: SqlRequestRow<R>) => R;
+};

package/dist/components/data/SqlRequestDataGrid/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/data/index.d.ts

@@ -1,3 +1,6 @@
 export * from './DataGrid';
-export * from './DataGrid/AdvancedRequestDataGrid';
-export * from './DataGrid/helpers/columns';
+export * from './DataGrid/helpers';
+export * from './AdvancedRequestDataGrid';
+export * from './SqlRequestDataGrid';
+export * from './SqlRequestDataGrid/helpers';
+export * from './AdvancedRequestDataGrid/helpers';

package/dist/components/data/index.js

@@ -15,5 +15,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./DataGrid"), exports);
-__exportStar(require("./DataGrid/AdvancedRequestDataGrid"), exports);
-__exportStar(require("./DataGrid/helpers/columns"), exports);
+__exportStar(require("./DataGrid/helpers"), exports);
+__exportStar(require("./AdvancedRequestDataGrid"), exports);
+__exportStar(require("./SqlRequestDataGrid"), exports);
+__exportStar(require("./SqlRequestDataGrid/helpers"), exports);
+__exportStar(require("./AdvancedRequestDataGrid/helpers"), exports);

package/dist/components/forms/IconButton.js

@@ -37,7 +37,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var styles = {
     IconButton: (0, styled_components_1.default)(Button_1.Button).attrs({
         className: 'IconButton',
-    })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 100%;\n    &.small {\n      padding: var(--space-1);\n      height: var(--space-6);\n      width: var(--space-6);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n    &.medium {\n      padding: var(--space-2);\n      height: var(--space-8);\n      width: var(--space-8);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n    &.large {\n      padding: var(--space-3);\n      height: var(--space-10);\n      width: var(--space-10);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n  "], ["\n    border-radius: 100%;\n    &.small {\n      padding: var(--space-1);\n      height: var(--space-6);\n      width: var(--space-6);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n    &.medium {\n      padding: var(--space-2);\n      height: var(--space-8);\n      width: var(--space-8);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n    &.large {\n      padding: var(--space-3);\n      height: var(--space-10);\n      width: var(--space-10);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n  "])), function (_a) {
+    })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &.small {\n      padding: var(--space-1);\n      height: var(--space-6);\n      width: var(--space-6);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n    &.medium {\n      padding: var(--space-2);\n      height: var(--space-8);\n      width: var(--space-8);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n    &.large {\n      padding: var(--space-3);\n      height: var(--space-10);\n      width: var(--space-10);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n  "], ["\n    &.small {\n      padding: var(--space-1);\n      height: var(--space-6);\n      width: var(--space-6);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n    &.medium {\n      padding: var(--space-2);\n      height: var(--space-8);\n      width: var(--space-8);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n    &.large {\n      padding: var(--space-3);\n      height: var(--space-10);\n      width: var(--space-10);\n      svg {\n        margin-right: 0;\n        width: ", ";\n        height: ", ";\n      }\n    }\n  "])), function (_a) {
         var _b = _a.$iconSize, $iconSize = _b === void 0 ? 'var(--space-4)' : _b;
         return $iconSize;
     }, function (_a) {

package/dist/components/forms/IndeterminateCheckbox.js

@@ -36,6 +36,6 @@ var IndeterminateCheckbox = function (_a) {
     return ((0, jsx_runtime_1.jsx)("input", __assign({ type: "checkbox", className: (0, lodash_1.join)([
             'h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600',
             className,
-        ], ' '), ref: checkbox, checked: checked, onChange: onChange }, props)));
+        ], ' '), ref: checkbox, checked: !!checked, onChange: onChange }, props)));
 };
 exports.IndeterminateCheckbox = IndeterminateCheckbox;

package/dist/components/layout/Modal/index.js

@@ -56,7 +56,7 @@ var Modal = function (_a) {
     var modalPortal = (0, react_1.useMemo)(function () {
         return createPortal((0, jsx_runtime_1.jsx)(styles.ModalBackdrop, { onClick: closeOnBackdropClick ? onClose : undefined, children: (0, jsx_runtime_1.jsx)(styles.ModalContainer, __assign({}, props, { children: children })) }));
     }, [children, closeOnBackdropClick, createPortal, onClose, props]);
-    return modalPortal;
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: modalPortal });
 };
 exports.Modal = Modal;
 exports.Modal.Header = styles.ModalHeader;

package/dist/providers/PortalsProvider/index.d.ts

@@ -4,7 +4,7 @@ export type PortalProps = {
     children: ReactNode;
 };
 export type PortalsContextType = {
-    createPortal: (children: ReactNode) => ReactPortal | undefined;
+    createPortal: (children: ReactNode) => ReactPortal | null;
 };
 export declare const PortalsContext: import("react").Context<PortalsContextType>;
 export declare const PortalsProvider: FC<PropsWithChildren>;

package/dist/providers/PortalsProvider/index.js

@@ -29,7 +29,7 @@ var styles = __importStar(require("./styles"));
 var react_1 = require("react");
 var react_dom_1 = require("react-dom");
 exports.PortalsContext = (0, react_1.createContext)({
-    createPortal: function () { return undefined; },
+    createPortal: function () { return null; },
 });
 var PortalsProvider = function (_a) {
     var children = _a.children;

package/dist/services/HttpService.d.ts

@@ -0,0 +1,10 @@
+import { Config } from '../config';
+export declare class HttpService {
+    private static instance;
+    private config;
+    private promises;
+    constructor(config: Config);
+    static getInstance(): HttpService;
+    sendRequest<TReq, TRes>(name: string, data: TReq): Promise<TRes>;
+    private parseMessage;
+}

package/dist/services/HttpService.js

@@ -0,0 +1,117 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HttpService = void 0;
+var lodash_1 = require("lodash");
+var uuid_1 = require("uuid");
+var HttpService = /** @class */ (function () {
+    function HttpService(config) {
+        this.promises = {};
+        HttpService.instance = this;
+        this.config = config;
+    }
+    HttpService.getInstance = function () {
+        return HttpService.instance;
+    };
+    HttpService.prototype.sendRequest = function (name, data) {
+        var _this = this;
+        var id = (0, uuid_1.v4)();
+        var promise = new Promise(function (resolve, reject) {
+            var request = { id: id, name: name, data: data };
+            _this.promises[id] = { resolve: resolve, reject: reject };
+            console.log('[HTTP] Sending request:', request);
+            fetch("".concat((0, lodash_1.trimEnd)(_this.config.httpServerUrl, '/'), "/").concat(name), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(request),
+            })
+                .then(function (response) { return __awaiter(_this, void 0, void 0, function () {
+                var body;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!response.ok) {
+                                throw new Error('HTTP request failed');
+                            }
+                            return [4 /*yield*/, response.text()];
+                        case 1:
+                            body = _a.sent();
+                            this.parseMessage(body);
+                            return [2 /*return*/];
+                    }
+                });
+            }); })
+                .catch(function (error) {
+                reject(error);
+            });
+        });
+        return promise;
+    };
+    HttpService.prototype.parseMessage = function (message) {
+        var _a;
+        try {
+            var response = JSON.parse(message);
+            if (!response.id) {
+                throw new Error('Received message is not valid');
+            }
+            if (this.promises[response.id]) {
+                console.log('[HTTP] Received response:', response);
+                if (typeof ((_a = response.data) === null || _a === void 0 ? void 0 : _a.status) === 'number' &&
+                    response.data.status < 0) {
+                    this.promises[response.id].reject(new Error(response.data.message));
+                }
+                else {
+                    this.promises[response.id].resolve(response.data);
+                }
+                delete this.promises[response.id];
+            }
+            else {
+                console.log('[HTTP] Received request:', response);
+                // TODO : Implement request handling
+                throw new Error('Not yet implemented');
+            }
+        }
+        catch (error) {
+            console.error('[HTTP] Error parsing message:', error);
+        }
+    };
+    return HttpService;
+}());
+exports.HttpService = HttpService;

package/dist/services/advancedRequests.d.ts

@@ -7,13 +7,13 @@ export type FieldDTO<T extends string = string> = {
     groupBy?: boolean;
 };
 export type ConditionDTO = {
-    field: FieldDTO;
-    operator: 'lessThan' | 'lessThanOrEqual' | 'lessThanOrEquals' | 'equals' | 'notEquals' | 'greaterThanOrEqual' | 'greaterThanOrEquals' | 'greaterThan' | 'like' | 'contains' | 'startsWith' | 'endsWith' | 'notLike' | 'inRange' | 'between' | 'isNull' | 'inArray' | 'in' | 'not' | 'and' | 'or';
+    field: string;
+    operator: 'lessThan' | 'lessThanOrEqual' | 'lessThanOrEquals' | 'equals' | 'notEquals' | 'greaterThanOrEqual' | 'greaterThanOrEquals' | 'greaterThan' | 'like' | 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'notLike' | 'inRange' | 'between' | 'isNull' | 'inArray' | 'in' | 'not' | 'and' | 'or';
     value?: string | number | boolean | null | (string | number | boolean | null)[];
     children?: boolean;
 };
 export type OrderByDTO = {
-    field: FieldDTO;
+    field: string;
     direction?: 'ASC' | 'DESC';
 };
 export type AdvancedRequestDTO = {

package/dist/services/advancedRequests.js

@@ -4,10 +4,10 @@ exports.useRawAdvancedRequestHandler = exports.useAdvancedRequestHandler = void
 var hooks_1 = require("./hooks");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var useAdvancedRequestHandler = function () {
-    return (0, hooks_1.useRequestHandler)('AdvancedRequest');
+    return (0, hooks_1.useWebSocketRequestHandler)('AdvancedRequest');
 };
 exports.useAdvancedRequestHandler = useAdvancedRequestHandler;
 var useRawAdvancedRequestHandler = function () {
-    return (0, hooks_1.useRequestHandler)('RawAdvancedRequest');
+    return (0, hooks_1.useWebSocketRequestHandler)('RawAdvancedRequest');
 };
 exports.useRawAdvancedRequestHandler = useRawAdvancedRequestHandler;

package/dist/services/hooks.d.ts

@@ -1 +1,2 @@
-export declare const useRequestHandler: <TReq, TRes>(name: string) => ((data: TReq) => Promise<TRes>);
+export declare const useWebSocketRequestHandler: <TReq, TRes>(name: string) => ((data: TReq) => Promise<TRes>);
+export declare const useHttpRequestHandler: <TReq, TRes>(name: string) => ((data: TReq) => Promise<TRes>);

package/dist/services/hooks.js

@@ -1,11 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRequestHandler = void 0;
+exports.useHttpRequestHandler = exports.useWebSocketRequestHandler = void 0;
+var HttpService_1 = require("./HttpService");
 var WebSocketService_1 = require("./WebSocketService");
 var react_1 = require("react");
-var useRequestHandler = function (name) {
+var useWebSocketRequestHandler = function (name) {
     return (0, react_1.useCallback)(function (data) {
         return WebSocketService_1.WebSocketService.getInstance().sendRequest(name, data);
     }, [name]);
 };
-exports.useRequestHandler = useRequestHandler;
+exports.useWebSocketRequestHandler = useWebSocketRequestHandler;
+var useHttpRequestHandler = function (name) {
+    return (0, react_1.useCallback)(function (data) {
+        return HttpService_1.HttpService.getInstance().sendRequest(name, data);
+    }, [name]);
+};
+exports.useHttpRequestHandler = useHttpRequestHandler;

package/dist/services/sqlRequests.d.ts

@@ -0,0 +1,40 @@
+export type FieldDTO<T extends string = string> = {
+    fieldName?: T;
+    fieldAlias?: string;
+    operator?: 'add' | 'concat' | 'divide' | 'groupConcat' | 'if' | 'ifNull' | 'jsonObject' | 'length' | 'modulo' | 'multiply' | 'subtract' | 'sum' | 'trim';
+    operands?: FieldDTO[];
+    constantValue?: string | number | boolean | null;
+    groupBy?: boolean;
+};
+export type ConditionDTO = {
+    field: string;
+    operator: 'lessThan' | 'lessThanOrEqual' | 'lessThanOrEquals' | 'equals' | 'notEquals' | 'greaterThanOrEqual' | 'greaterThanOrEquals' | 'greaterThan' | 'like' | 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'notLike' | 'inRange' | 'between' | 'isNull' | 'inArray' | 'in' | 'not' | 'and' | 'or';
+    value?: string | number | boolean | null | (string | number | boolean | null)[];
+    children?: boolean;
+};
+export type OrderByDTO = {
+    field: string;
+    direction?: 'ASC' | 'DESC';
+};
+export type SqlRequestDTO = {
+    columns?: string[];
+    returnColumns?: string[];
+    conditions?: ConditionDTO[];
+    orderBy?: OrderByDTO[];
+    start?: number;
+    length?: number;
+    getTotal?: boolean;
+    unique?: boolean;
+};
+export type SqlRequestRow<R> = {
+    [K in keyof R]: R[K] extends string | number | null ? R[K] : string | number | null;
+};
+export type SqlResponseDTO<T = any> = {
+    data: SqlRequestRow<T>[];
+    total?: number;
+};
+type SqlRequestHandler<T> = (request: SqlRequestDTO) => Promise<SqlResponseDTO<T>>;
+export declare const useSqlRequestHandler: <T = any>(name: string) => [SqlRequestHandler<T>, SqlRequestHandler<{
+    Id: string;
+}>];
+export {};

package/dist/services/sqlRequests.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSqlRequestHandler = void 0;
+var hooks_1 = require("./hooks");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var useSqlRequestHandler = function (name) { return [
+    (0, hooks_1.useWebSocketRequestHandler)(name),
+    (0, hooks_1.useWebSocketRequestHandler)(name),
+]; };
+exports.useSqlRequestHandler = useSqlRequestHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/components/data/DataGrid/DataGridCell.tsx

@@ -7,7 +7,6 @@ import { DataGridCellProps, DataGridColumn } from './types';
 import { MouseEvent, useCallback } from 'react';
 
 import { DataGridEditableCell } from './DataGridEditableCell';
-import { join } from 'lodash';
 import { useDataGridContext } from './hooks';
 
 const defaultRender = <R,>(row: R, col: DataGridColumn<R>) => {
@@ -22,7 +21,6 @@ export const DataGridCell = <R,>({
   columnIndex,
   column,
   context,
-  className,
   style,
 }: DataGridCellProps<R>) => {
   const {
@@ -36,6 +34,7 @@ export const DataGridCell = <R,>({
     !!editable && !!column.editable && column.type && column.getter;
   const isEditing =
     isEditable && editingCell[0] === rowIndex && editingCell[1] === columnIndex;
+  const DataGridCellComponent = column.component ?? styles.DataGridCell;
 
   const onDoubleClick = useCallback(
     (e: MouseEvent) => {
@@ -63,13 +62,12 @@ export const DataGridCell = <R,>({
   }
 
   return (
-    <styles.DataGridCell
+    <DataGridCellComponent
       key={`${name}-${rowIndex}-${columnIndex}`}
-      className={join([className, column.className, column.bodyClassName], ' ')}
       onDoubleClick={onDoubleClick}
       style={style}
     >
       {(column.render ?? defaultRender)(row, column)}
-    </styles.DataGridCell>
+    </DataGridCellComponent>
   );
 };

package/src/components/data/DataGrid/DataGridHeader.tsx

@@ -102,14 +102,12 @@ export const DataGridHeader = <R,>({
         $headerColor={headerColor}
       >
         {!!selectable && (
-          <styles.SelectionCell
-          //  className="inline-flex items-center justify-center w-12 select-none"
-          >
+          <styles.HeaderSelectionCell $headerColor={headerColor}>
             <IndeterminateCheckbox
               checked={checkboxStatus}
-              onChange={() => toggleAll(!checkboxStatus)}
+              onChange={() => toggleAll(!(checkboxStatus ?? true))}
             />
-          </styles.SelectionCell>
+          </styles.HeaderSelectionCell>
         )}
         {visibleColumns.map(([key, col], index) => (
           <DataGridHeaderCell

package/src/components/data/DataGrid/DataGridHeaderCell.tsx

@@ -120,6 +120,8 @@ export const DataGridHeaderCell = <R,>({
     setIsFilterDropdownVisible(true);
   }, []);
 
+  const hasFilters = filters[columnKey]?.values.length > 0;
+
   return (
     <styles.DataGridHeaderCellContainer
       $headerColor={headerColor}
@@ -138,11 +140,10 @@ export const DataGridHeaderCell = <R,>({
       {!!column.filter && (
         <IconButton
           size="small"
+          className={hasFilters ? 'danger' : ''}
           ref={filterButtonRef}
-          icon={
-            filters[columnKey]?.values.length > 0 ? FilterFullIcon : FilterIcon
-          }
-          color={filters[columnKey]?.values.length > 0 ? 'danger' : headerColor}
+          icon={hasFilters ? FilterFullIcon : FilterIcon}
+          color={hasFilters ? 'danger' : headerColor}
           onClick={onFilterButtonClicked}
         />
       )}