@addev-be/ui 0.2.5 → 0.2.7

package/dist/components/ui/ContextMenu/styles.js

@@ -0,0 +1,56 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = exports.MenuItemContainer = exports.SubMenu = exports.MenuContainer = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var menuContainerCss = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  color: var(--color-neutral-900);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1) 0;\n  box-shadow: var(--shadow-lg);\n  background-color: var(--color-neutral-100);\n  min-width: 20em;\n  outline: 1px solid var(--color-neutral-200);\n  display: flex;\n  flex-direction: column;\n"], ["\n  position: absolute;\n  color: var(--color-neutral-900);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1) 0;\n  box-shadow: var(--shadow-lg);\n  background-color: var(--color-neutral-100);\n  min-width: 20em;\n  outline: 1px solid var(--color-neutral-200);\n  display: flex;\n  flex-direction: column;\n"])));
+exports.MenuContainer = styled_components_1.default.div.attrs({
+    className: 'MenuContainer',
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  inset: 0;\n"], ["\n  ", "\n  inset: 0;\n"])), menuContainerCss);
+exports.MenuContainer.displayName = 'MenuContainer';
+exports.SubMenu = styled_components_1.default.div.attrs({
+    className: 'SubMenu',
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  top: 0;\n  left: 100%;\n  margin-top: -var(--space-1);\n"], ["\n  ", "\n  top: 0;\n  left: 100%;\n  margin-top: -var(--space-1);\n"])), menuContainerCss);
+exports.SubMenu.displayName = 'SubMenu';
+exports.MenuItemContainer = styled_components_1.default.div.attrs({
+    className: 'MenuItemContainer',
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  font-family: var(--font-sans);\n  font-weight: normal;\n  text-align: left;\n  padding: var(--space-1) var(--space-2);\n  font-size: var(--text-base);\n  line-height: var(--leading-6);\n  border: none;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  svg {\n    fill: currentColor;\n    width: var(--space-4);\n    height: var(--space-4);\n    margin-right: var(--space-2);\n  }\n\n  & > ", " {\n    display: none;\n    margin-top: calc(0px - var(--space-1));\n  }\n  &.opened > ", " {\n    display: block;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  font-family: var(--font-sans);\n  font-weight: normal;\n  text-align: left;\n  padding: var(--space-1) var(--space-2);\n  font-size: var(--text-base);\n  line-height: var(--leading-6);\n  border: none;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  svg {\n    fill: currentColor;\n    width: var(--space-4);\n    height: var(--space-4);\n    margin-right: var(--space-2);\n  }\n\n  & > ", " {\n    display: none;\n    margin-top: calc(0px - var(--space-1));\n  }\n  &.opened > ", " {\n    display: block;\n  }\n"])), function (_a) {
+    var $withArrow = _a.$withArrow;
+    return $withArrow && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      &::after {\n        content: '';\n        position: absolute;\n        right: var(--space-2);\n        top: 50%;\n        transform: translateY(-50%);\n        border: 4px solid transparent;\n        border-left-color: var(--color-neutral-600);\n      }\n    "], ["\n      &::after {\n        content: '';\n        position: absolute;\n        right: var(--space-2);\n        top: 50%;\n        transform: translateY(-50%);\n        border: 4px solid transparent;\n        border-left-color: var(--color-neutral-600);\n      }\n    "])));
+}, function (_a) {
+    var $color = _a.$color, disabled = _a.disabled;
+    return disabled
+        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          color: var(--color-neutral-300);\n          background-color: var(--color-neutral-100);\n          cursor: default;\n        "], ["\n          color: var(--color-neutral-300);\n          background-color: var(--color-neutral-100);\n          cursor: default;\n        "]))) : $color
+        ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          color: var(--color-", "-600);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-", "-200);\n          }\n        "], ["\n          color: var(--color-", "-600);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-", "-200);\n          }\n        "])), $color, $color) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          color: var(--color-neutral-900);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-neutral-200);\n          }\n        "], ["\n          color: var(--color-neutral-900);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-neutral-200);\n          }\n        "])));
+}, exports.SubMenu, exports.SubMenu);
+exports.MenuItemContainer.displayName = 'MenuItemContainer';
+exports.Divider = styled_components_1.default.div.attrs({
+    className: 'Divider',
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border-top: 1px solid var(--color-neutral-200);\n  margin: var(--space-1) 0;\n"], ["\n  border-top: 1px solid var(--color-neutral-200);\n  margin: var(--space-1) 0;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/helpers/dates.d.ts

@@ -0,0 +1,2 @@
+import moment from 'moment';
+export declare const formatDate: (date: moment.MomentInput, format?: string) => string;

package/dist/helpers/dates.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatDate = void 0;
+var moment_1 = __importDefault(require("moment"));
+var formatDate = function (date, format) {
+    if (format === void 0) { format = 'DD/MM/YYYY'; }
+    var m = moment_1.default.utc(date);
+    return m.isValid() ? m.format(format) : '';
+};
+exports.formatDate = formatDate;

package/dist/services/advancedRequests.d.ts

@@ -31,7 +31,7 @@ export type AdvancedRequestRow<R> = {
 };
 export type AdvancedResponseDTO<T = any> = {
     data: AdvancedRequestRow<T>[];
-    total?: number;
+    count?: number;
 };
 export type AdvancedRequestFieldDTO = string | {
     name: string;

package/dist/services/sqlRequests.d.ts

@@ -14,27 +14,32 @@ export type ConditionDTO = {
 };
 export type OrderByDTO = {
     field: string;
+    type: string;
     direction?: 'ASC' | 'DESC';
 };
+export type SqlRequestFooterFunction = 'sum' | 'avg' | 'count' | 'max' | 'min';
 export type SqlRequestDTO = {
     columns?: string[];
     returnColumns?: string[];
+    columnTypes?: string[];
+    totalColumns?: Record<string, SqlRequestFooterFunction>;
     conditions?: ConditionDTO[];
     orderBy?: OrderByDTO[];
     start?: number;
     length?: number;
-    getTotal?: boolean;
+    getCount?: boolean;
     unique?: boolean;
 };
 export type SqlRequestRow<R> = {
-    [K in keyof R]: R[K] extends string | number | null ? R[K] : string | number | null;
+    [K in keyof R]: R[K] extends string | number | null | undefined ? R[K] : string | number | null | undefined;
 };
 export type SqlResponseDTO<T = any> = {
     data: SqlRequestRow<T>[];
-    total?: number;
+    count?: number;
+    totals?: Record<string, string | number | null | undefined>;
 };
 type SqlRequestHandler<T> = (request: SqlRequestDTO) => Promise<SqlResponseDTO<T>>;
 export declare const useSqlRequestHandler: <T = any>(name: string) => [SqlRequestHandler<T>, SqlRequestHandler<{
     Id: string;
-}>];
+}>, SqlRequestHandler<Partial<T>>];
 export {};

package/dist/services/sqlRequests.js

@@ -6,5 +6,6 @@ var hooks_1 = require("./hooks");
 var useSqlRequestHandler = function (name) { return [
     (0, hooks_1.useWebSocketRequestHandler)(name),
     (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.5",
+  "version": "0.2.7",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/Icons.tsx

@@ -1,80 +1,104 @@
-import { FC, SVGProps, useEffect, useState } from 'react';
-
-import ArrowDownAZIcon from '../assets/icons/arrow-down-a-z.svg?react';
-import ArrowUpZAIcon from '../assets/icons/arrow-up-z-a.svg?react';
-import ArrowsRotateIcon from '../assets/icons/arrows-rotate.svg?react';
-import ArrowsUpDownIcon from '../assets/icons/arrows-up-down.svg?react';
-import CheckIcon from '../assets/icons/check.svg?react';
-import CopyIcon from '../assets/icons/copy.svg?react';
-import DownIcon from '../assets/icons/down.svg?react';
-import FilterFullIcon from '../assets/icons/filter-full.svg?react';
-import FilterIcon from '../assets/icons/filter.svg?react';
-import FilterSlashIcon from '../assets/icons/filter-slash.svg?react';
-import HashtagIcon from '../assets/icons/hashtag.svg?react';
-import ImageSlashIcon from '../assets/icons/image-slash.svg?react';
-import LeftIcon from '../assets/icons/left.svg?react';
-import MagnifierIcon from '../assets/icons/magnifier.svg?react';
-import PhoneIcon from '../assets/icons/phone.svg?react';
-import PlusIcon from '../assets/icons/plus.svg?react';
-import RightIcon from '../assets/icons/right.svg?react';
-import SpinnerIcon from '../assets/icons/spinner-third.svg?react';
-import TableColumnsIcon from '../assets/icons/table-columns.svg?react';
-import UpIcon from '../assets/icons/up.svg?react';
-import UserTieIcon from '../assets/icons/user-tie.svg?react';
-
-type IconFCProps = SVGProps<SVGSVGElement>;
-export type IconFC = FC<IconFCProps>;
-
-type AnimatedIconProps = {
-  icons: FC[];
-  speed?: number;
-};
-
-export const AnimatedIcon: FC<AnimatedIconProps & IconFCProps> = ({
-  icons,
-  speed = 150,
-  ...props
-}) => {
-  const [currentIcon, setCurrentIcon] = useState(0);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentIcon((currentIcon) => (currentIcon + 1) % icons.length);
-    }, speed);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [icons.length, speed]);
-
-  const Icon = icons[currentIcon];
-  return <Icon {...props} />;
-};
-
-export const LoadingIcon: FC<IconFCProps> = ({ className, ...props }) => (
-  <SpinnerIcon className={`animate-spin ${className}`} {...props} />
-);
-
-export {
-  ArrowDownAZIcon,
-  ArrowUpZAIcon,
-  ArrowsRotateIcon,
-  ArrowsUpDownIcon,
-  CheckIcon,
-  CopyIcon,
-  DownIcon,
-  FilterFullIcon,
-  FilterIcon,
-  FilterSlashIcon,
-  HashtagIcon,
-  ImageSlashIcon,
-  LeftIcon,
-  MagnifierIcon,
-  PhoneIcon,
-  PlusIcon,
-  RightIcon,
-  SpinnerIcon,
-  TableColumnsIcon,
-  UpIcon,
-  UserTieIcon,
-};
+import { FC, SVGProps, useEffect, useState } from 'react';
+
+import ArrowDown19Icon from '../assets/icons/arrow-down-1-9.svg?react';
+import ArrowDownAZIcon from '../assets/icons/arrow-down-a-z.svg?react';
+import ArrowDownBigSmallIcon from '../assets/icons/arrow-down-big-small.svg?react';
+import ArrowUp91Icon from '../assets/icons/arrow-up-9-1.svg?react';
+import ArrowUpBigSmallIcon from '../assets/icons/arrow-up-big-small.svg?react';
+import ArrowUpZAIcon from '../assets/icons/arrow-up-z-a.svg?react';
+import ArrowsRotateIcon from '../assets/icons/arrows-rotate.svg?react';
+import ArrowsUpDownIcon from '../assets/icons/arrows-up-down.svg?react';
+import CheckIcon from '../assets/icons/check.svg?react';
+import ChevronDownIcon from '../assets/icons/chevron-down.svg?react';
+import CopyIcon from '../assets/icons/copy.svg?react';
+import DownIcon from '../assets/icons/down.svg?react';
+import EllipsisIcon from '../assets/icons/ellipsis.svg?react';
+import FilterFullIcon from '../assets/icons/filter-full.svg?react';
+import FilterIcon from '../assets/icons/filter.svg?react';
+import FilterSlashIcon from '../assets/icons/filter-slash.svg?react';
+import HashtagIcon from '../assets/icons/hashtag.svg?react';
+import ImageSlashIcon from '../assets/icons/image-slash.svg?react';
+import LeftIcon from '../assets/icons/left.svg?react';
+import MagnifierIcon from '../assets/icons/magnifier.svg?react';
+import PhoneIcon from '../assets/icons/phone.svg?react';
+import PlusIcon from '../assets/icons/plus.svg?react';
+import RightIcon from '../assets/icons/right.svg?react';
+import SigmaIcon from '../assets/icons/sigma.svg?react';
+import SpinnerIcon from '../assets/icons/spinner-third.svg?react';
+import TableColumnsIcon from '../assets/icons/table-columns.svg?react';
+import TableFooterIcon from '../assets/icons/table-footer.svg?react';
+import TableFooterSlashIcon from '../assets/icons/table-footer-slash.svg?react';
+import TableIcon from '../assets/icons/table.svg?react';
+import TallyIcon from '../assets/icons/tally.svg?react';
+import UpIcon from '../assets/icons/up.svg?react';
+import UserTieIcon from '../assets/icons/user-tie.svg?react';
+import XBarIcon from '../assets/icons/x-bar.svg?react';
+
+type IconFCProps = SVGProps<SVGSVGElement>;
+export type IconFC = FC<IconFCProps>;
+
+type AnimatedIconProps = {
+  icons: FC[];
+  speed?: number;
+};
+
+export const AnimatedIcon: FC<AnimatedIconProps & IconFCProps> = ({
+  icons,
+  speed = 150,
+  ...props
+}) => {
+  const [currentIcon, setCurrentIcon] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIcon((currentIcon) => (currentIcon + 1) % icons.length);
+    }, speed);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [icons.length, speed]);
+
+  const Icon = icons[currentIcon];
+  return <Icon {...props} />;
+};
+
+export const LoadingIcon: FC<IconFCProps> = ({ className, ...props }) => (
+  <SpinnerIcon className={`animate-spin ${className}`} {...props} />
+);
+
+export {
+  ArrowDownAZIcon,
+  ArrowDown19Icon,
+  ArrowDownBigSmallIcon,
+  ArrowUpZAIcon,
+  ArrowUpBigSmallIcon,
+  ArrowUp91Icon,
+  ArrowsRotateIcon,
+  ArrowsUpDownIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  CopyIcon,
+  DownIcon,
+  EllipsisIcon,
+  FilterFullIcon,
+  FilterIcon,
+  FilterSlashIcon,
+  HashtagIcon,
+  ImageSlashIcon,
+  LeftIcon,
+  MagnifierIcon,
+  PhoneIcon,
+  PlusIcon,
+  RightIcon,
+  SigmaIcon,
+  SpinnerIcon,
+  TableColumnsIcon,
+  TableFooterIcon,
+  TableFooterSlashIcon,
+  TableIcon,
+  TallyIcon,
+  UpIcon,
+  UserTieIcon,
+  XBarIcon,
+};

package/src/components/data/AdvancedRequestDataGrid/helpers/advancedRequests.ts

@@ -1,93 +1,93 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import {
-  AdvancedRequestDTO,
-  ConditionDTO,
-  FieldDTO,
-  OrderByDTO,
-} from '../../../../services/advancedRequests';
-import {
-  AdvancedRequestDataGridColumns,
-  AdvancedRequestDataGridFilters,
-} from '../types';
-
-import _ from 'lodash';
-
-export const getAdvancedRequestDto = <R>({
-  type,
-  columns,
-  conditions = [],
-  orderBy = [],
-  start = 0,
-  length = 100,
-  getTotal = false,
-  idField = { fieldName: 'Id' },
-}: {
-  type: string;
-  columns: AdvancedRequestDataGridColumns<R>;
-  conditions?: ConditionDTO[];
-  orderBy?: OrderByDTO[];
-  start?: number;
-  length?: number;
-  getTotal?: boolean;
-  idField?: FieldDTO | null;
-}): AdvancedRequestDTO => ({
-  fields: [
-    ...(idField === null ? [] : [idField]),
-    ...Object.keys(columns).map((key) =>
-      columns[key].field
-        ? {
-            ...columns[key].field,
-            fieldName: columns[key].field?.fieldName ?? key,
-            fieldAlias: key,
-          }
-        : {
-            fieldName: key,
-            fieldAlias: key,
-          }
-    ),
-  ],
-  conditions,
-  orderBy,
-  type,
-  start,
-  length,
-  getTotal,
-});
-
-export const convertFiltersToConditions = <R>(
-  filters: AdvancedRequestDataGridFilters,
-  columns: AdvancedRequestDataGridColumns<R>
-): Record<string, ConditionDTO> =>
-  _.mapValues(filters, (filter, columnKey) => ({
-    field:
-      columns[columnKey].filterField ??
-      columns[columnKey].field?.fieldAlias ??
-      columns[columnKey].field?.fieldName ??
-      columnKey,
-    operator: filter.operator,
-    value: ['inArray', 'inRange'].includes(filter.operator)
-      ? filter.values
-      : _.castArray<string | number | null>(filter.values)[0],
-  }));
-
-export const parseJsonObjectFields = <R>(
-  rows: any[],
-  columns: AdvancedRequestDataGridColumns<R>,
-  parser?: (row: any) => R
-): R[] => {
-  const jsonColumns = Object.keys(columns).filter(
-    (key) => columns[key].field?.operator === 'jsonObject'
-  );
-  const parsedRows =
-    jsonColumns.length === 0
-      ? rows
-      : rows.map((row) => {
-          const parsedRow = { ...row };
-          jsonColumns.forEach((key) => {
-            parsedRow[key] = JSON.parse(parsedRow[key] ?? '{}');
-          });
-          return parsedRow;
-        });
-  return parser ? parsedRows.map(parser) : parsedRows;
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  AdvancedRequestDTO,
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+} from '../../../../services/advancedRequests';
+import {
+  AdvancedRequestDataGridColumns,
+  AdvancedRequestDataGridFilters,
+} from '../types';
+
+import _ from 'lodash';
+
+export const getAdvancedRequestDto = <R>({
+  type,
+  columns,
+  conditions = [],
+  orderBy = [],
+  start = 0,
+  length = 100,
+  getTotal = false,
+  idField = { fieldName: 'Id' },
+}: {
+  type: string;
+  columns: AdvancedRequestDataGridColumns<R>;
+  conditions?: ConditionDTO[];
+  orderBy?: OrderByDTO[];
+  start?: number;
+  length?: number;
+  getTotal?: boolean;
+  idField?: FieldDTO | null;
+}): AdvancedRequestDTO => ({
+  fields: [
+    ...(idField === null ? [] : [idField]),
+    ...Object.keys(columns).map((key) =>
+      columns[key].field
+        ? {
+            ...columns[key].field,
+            fieldName: columns[key].field?.fieldName ?? key,
+            fieldAlias: key,
+          }
+        : {
+            fieldName: key,
+            fieldAlias: key,
+          }
+    ),
+  ],
+  conditions,
+  orderBy,
+  type,
+  start,
+  length,
+  getTotal,
+});
+
+export const convertFiltersToConditions = <R>(
+  filters: AdvancedRequestDataGridFilters,
+  columns: AdvancedRequestDataGridColumns<R>
+): Record<string, ConditionDTO> =>
+  _.mapValues(filters, (filter, columnKey) => ({
+    field:
+      columns[columnKey].filterField ??
+      columns[columnKey].field?.fieldAlias ??
+      columns[columnKey].field?.fieldName ??
+      columnKey,
+    operator: filter.operator,
+    value: ['inArray', 'inRange'].includes(filter.operator)
+      ? filter.values
+      : _.castArray<string | number | null>(filter.values)[0],
+  }));
+
+export const parseJsonObjectFields = <R>(
+  rows: any[],
+  columns: AdvancedRequestDataGridColumns<R>,
+  parser?: (row: any) => R
+): R[] => {
+  const jsonColumns = Object.keys(columns).filter(
+    (key) => columns[key].field?.operator === 'jsonObject'
+  );
+  const parsedRows =
+    jsonColumns.length === 0
+      ? rows
+      : rows.map((row) => {
+          const parsedRow = { ...row };
+          jsonColumns.forEach((key) => {
+            parsedRow[key] = JSON.parse(parsedRow[key] ?? '{}');
+          });
+          return parsedRow;
+        });
+  return parser ? parsedRows.map(parser) : parsedRows;
+};