@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

package/es/components/organism/DataTable/hooks/useDataTableStore.d.ts

@@ -0,0 +1,28 @@
+import { StoreApi } from 'zustand';
+import { DataTableProps, DataTableStore } from '../types';
+/**
+ * Custom React hook to create and manage a data table store.
+ *
+ * This hook initializes a data table store using the provided properties.
+ * It uses a `useRef` to ensure the store is only created once and retains
+ * its reference across re-renders.
+ *
+ * @template TTableDataType - The type of data the table will manage.
+ *
+ * @param {DataTableProps<TTableDataType>} [props] - Optional properties to initialize the data table store.
+ *
+ * @returns {StoreApi<DataTableStore> | null} - Returns the data table store instance if successfully created, otherwise returns null.
+ *
+ * @example
+ * // Example usage within a component
+ * function MyComponent() {
+ *   const dataTableStore = useDataTableStore<MyDataType>({ /* props *\/ });
+ *
+ *   if (!dataTableStore) {
+ *     return <div>Loading...</div>;
+ *   }
+ *
+ *   // Use dataTableStore for further operations
+ * }
+ */
+export declare function useDataTableStore<TTableDataType>(props?: DataTableProps<TTableDataType>): StoreApi<DataTableStore>;

package/es/components/organism/DataTable/hooks/useDataTableStore.js

@@ -0,0 +1,36 @@
+// Libraries
+import { useRef } from 'react';
+// Stores
+import { createDataTableStore } from '../stores';
+/**
+ * Custom React hook to create and manage a data table store.
+ *
+ * This hook initializes a data table store using the provided properties.
+ * It uses a `useRef` to ensure the store is only created once and retains
+ * its reference across re-renders.
+ *
+ * @template TTableDataType - The type of data the table will manage.
+ *
+ * @param {DataTableProps<TTableDataType>} [props] - Optional properties to initialize the data table store.
+ *
+ * @returns {StoreApi<DataTableStore> | null} - Returns the data table store instance if successfully created, otherwise returns null.
+ *
+ * @example
+ * // Example usage within a component
+ * function MyComponent() {
+ *   const dataTableStore = useDataTableStore<MyDataType>({ /* props *\/ });
+ *
+ *   if (!dataTableStore) {
+ *     return <div>Loading...</div>;
+ *   }
+ *
+ *   // Use dataTableStore for further operations
+ * }
+ */
+export function useDataTableStore(props) {
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createDataTableStore(props);
+    }
+    return storeRef.current;
+}

package/es/components/organism/DataTable/index.d.ts

@@ -0,0 +1,4 @@
+export { DataTable } from './DataTable';
+export type { DataTableProps, TableProps as DataTableTable, SavedFilter, SavedFilterItem, FilterMetricItem as FilterMetic, TSearchItem, FilterItem, FilterProps, } from './types';
+export { useDataTableListing } from './hooks';
+export { CDP_DATA_TABLE_SAMPLE, METRICS as FILTER_METRICS } from './constants';

package/es/components/organism/DataTable/index.js

@@ -0,0 +1,5 @@
+export { DataTable } from './DataTable';
+// Hooks
+export { useDataTableListing } from './hooks';
+// Constants
+export { CDP_DATA_TABLE_SAMPLE, METRICS as FILTER_METRICS } from './constants';

package/es/components/organism/DataTable/providers/AntdTableConfigProvider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ConfigProviderProps } from 'antd';
+interface AntdConfigProviderV2Props extends ConfigProviderProps {
+}
+export declare const AntdTableConfigProvider: React.FC<AntdConfigProviderV2Props>;
+export declare const dataTableGlobalToken: (Partial<import("antd/es/theme/internal").AliasToken> & Partial<import("../types").TDataTableToken>) | undefined;
+export {};

package/es/components/organism/DataTable/providers/AntdTableConfigProvider.js

@@ -0,0 +1,21 @@
+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;
+};
+// Libraries
+import React from 'react';
+import { ConfigProvider, theme } from 'antd';
+import { DATA_TABLE_THEME } from '../constants';
+const { getDesignToken } = theme;
+export const AntdTableConfigProvider = props => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(ConfigProvider, Object.assign({ theme: DATA_TABLE_THEME }, restProps), children));
+};
+export const dataTableGlobalToken = getDesignToken(DATA_TABLE_THEME);

package/es/components/organism/DataTable/providers/DataTableProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StoreApi } from 'zustand';
+import { DataTableStore } from '../types';
+interface DataTableProviderProps {
+    store: StoreApi<DataTableStore>;
+}
+export declare const DataTableProvider: React.FC<React.PropsWithChildren<DataTableProviderProps>>;
+export {};

package/es/components/organism/DataTable/providers/DataTableProvider.js

@@ -0,0 +1,8 @@
+// Libraries
+import React from 'react';
+// Contexts
+import { DataTableContext } from '../contexts/DataTableContext';
+export const DataTableProvider = props => {
+    const { children, store } = props;
+    return React.createElement(DataTableContext.Provider, { value: store }, children);
+};

package/es/components/organism/DataTable/providers/index.d.ts

@@ -0,0 +1 @@
+export * from './AntdTableConfigProvider';

package/es/components/organism/DataTable/providers/index.js

@@ -0,0 +1 @@
+export * from './AntdTableConfigProvider';

package/es/components/organism/DataTable/stores/index.d.ts

@@ -0,0 +1,2 @@
+import { DataTableState, DataTableStore } from '../types';
+export declare const createDataTableStore: (initProps?: Partial<DataTableState<any>>) => import("zustand").StoreApi<DataTableStore<any>>;

package/es/components/organism/DataTable/stores/index.js

@@ -0,0 +1,12 @@
+// Libraries
+import { createStore } from 'zustand';
+import { cloneDeep, merge } from 'lodash';
+// Constants
+import { dataTableInitialState } from '../constants';
+export const createDataTableStore = (initProps) => createStore()(set => (Object.assign(Object.assign({}, merge(cloneDeep(dataTableInitialState), cloneDeep(initProps))), { 
+    /* Actions */
+    setState: newState => set(store => merge(cloneDeep(store), cloneDeep(newState))), setFilter: filter => {
+        set(store => (Object.assign(Object.assign({}, store), { filter: Object.assign(Object.assign({}, store.filter), filter) })));
+    }, setModifyColumn: modifyColumn => set(store => (Object.assign(Object.assign({}, store), { modifyColumn: Object.assign(Object.assign({}, store.modifyColumn), modifyColumn) }))), setTable: table => set(store => (Object.assign(Object.assign({}, store), { table: Object.assign(Object.assign({}, store.table), table) }))), setToolbar: toolbar => set(store => (Object.assign(Object.assign({}, store), { toolbar: Object.assign(Object.assign({}, store.toolbar), toolbar) }))), setPagination: pagination => {
+        set(store => (Object.assign(Object.assign({}, store), { pagination: Object.assign(Object.assign({}, store.pagination), pagination) })));
+    } })));

package/es/components/organism/DataTable/styled/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const DataTableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {
+    $hide?: boolean | undefined;
+}, never>;
+export declare const FilterMetricLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const FilterButton: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/organism/DataTable/styled/index.js

@@ -0,0 +1,76 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex, Button } from '@antscorp/antsomi-ui/es/components/atoms';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const DataTableWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  #data-table-pagination {
+    margin-top: 5px;
+    justify-content: flex-end;
+  }
+`;
+export const IconButton = styled.div `
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 200ms;
+  flex-shrink: 0;
+
+  i {
+    font-size: 14px;
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  }
+
+  &:hover {
+    i {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw10};
+    }
+  }
+`;
+export const ActionButton = styled(Button) `
+  display: flex !important;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px 0px !important;
+  height: 43px !important;
+  width: 50px !important;
+  font-size: 8px !important;
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8} !important;
+
+  ${props => props.$hide && `visibility: hidden !important;`}
+
+  /* &:hover, */
+  &:active {
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary} !important;
+  }
+
+  &:disabled {
+    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw2} !important;
+  }
+`;
+export const FilterMetricLabel = styled(Flex) `
+  width: 100%;
+
+  i[class*='ants-icon-ants-expand-more'] {
+    transform: rotate(-90deg);
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  }
+`;
+/* Filter */
+export const FilterButton = styled.div `
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;

package/es/components/organism/DataTable/types/filter.d.ts

@@ -0,0 +1,56 @@
+import { MatchesAnyItem } from '../../../molecules';
+import { FILTER_ACTION_KEYS } from '../constants/filter';
+import { TActionButton, TConfirmResponse } from '@antscorp/antsomi-ui/es/types';
+export type TActionFilterButtonKey<T extends string[] = []> = (typeof FILTER_ACTION_KEYS)[keyof typeof FILTER_ACTION_KEYS] | T[number];
+export interface SavedFilterItem {
+    id: string;
+    name: string;
+    removable?: boolean;
+}
+export interface FilterMetricItem {
+    id: string | number;
+    name: string;
+    dataType?: string;
+    children?: FilterMetricItem[];
+    operators?: {
+        label: string;
+        value: string;
+    }[];
+}
+export interface SavedFilter {
+    list?: SavedFilterItem[];
+    selected?: string | number;
+    onRemove?: (savedFilter: SavedFilterItem) => Promise<TConfirmResponse>;
+    onSelect?: (savedFilter: SavedFilterItem) => void;
+}
+export interface FilterItem {
+    column: string | number;
+    dataType?: string;
+    operator: string;
+    type?: number;
+    value: any;
+}
+export type TOnSaveFilterArgs = {
+    existSavedFilter?: SavedFilterItem;
+    name: string;
+    filters: FilterItem[];
+};
+export type TFilterActionButton<T extends TActionFilterButtonKey> = TActionButton & T extends 'CLOSE' ? {} : {};
+export interface FilterProps<TActionKey extends string[] = []> {
+    isFilterActive?: boolean;
+    savedFilter?: SavedFilter;
+    filterMetrics?: FilterMetricItem[];
+    filters?: FilterItem[];
+    matchesAny?: {
+        list?: MatchesAnyItem[];
+        isLoading?: boolean;
+    };
+    actionButtons?: Partial<Record<TActionFilterButtonKey<TActionKey>, TActionButton>>;
+    onChangeFilters?: (filters: FilterItem[]) => void;
+    onSaveFilter?: (args: TOnSaveFilterArgs) => Promise<TConfirmResponse>;
+    /** Handle callback when filter condition changed */
+    onChangeFilterCondition?: (filterItem: FilterItem) => void;
+    /** Handle callback when matches any load more */
+    onMatchesAnyLoadMore?: (metricId?: FilterMetricItem['id']) => void;
+}
+export type TApiFilter = Record<string, any>[];

package/es/components/organism/DataTable/types/filter.js

@@ -0,0 +1 @@
+export {};

package/es/components/organism/DataTable/types/index.d.ts

@@ -0,0 +1,42 @@
+import { TableProps as AntdTableProps } from 'antd';
+import { StoreApi } from 'zustand';
+import { ToolbarProps } from './toolbar';
+import { FilterProps } from './filter';
+import { PaginationProps } from '../components';
+export interface TableProps<T> extends AntdTableProps<T> {
+    columnWidths?: Record<number, number>;
+    onColumnResize?: (data: {
+        index: number;
+        width: number;
+    }) => void;
+}
+export interface ModifyColumnProps {
+}
+export interface DataTableProps<TTableDataType = any> extends Partial<DataTableState<TTableDataType>> {
+    store?: StoreApi<DataTableStore<any>> | null;
+}
+export interface DataTableState<TTableDataType> {
+    name: string;
+    modifyColumn: ModifyColumnProps;
+    filter: FilterProps;
+    toolbar: ToolbarProps;
+    table: TableProps<TTableDataType>;
+    pagination: PaginationProps;
+}
+export interface DataTableStore<TTableDataType = any> {
+    name: string;
+    modifyColumn: ModifyColumnProps;
+    filter: FilterProps;
+    toolbar: ToolbarProps;
+    table: TableProps<TTableDataType>;
+    pagination: PaginationProps;
+    setState: (newState: Partial<DataTableState<TTableDataType>>) => void;
+    setModifyColumn: (modifyColumn: RecursivePartial<ModifyColumnProps>) => void;
+    setFilter: (filter: Partial<FilterProps>) => void;
+    setPagination: (pagination: Partial<PaginationProps>) => void;
+    setToolbar: (toolbar: Partial<ToolbarProps>) => void;
+    setTable: (table: Partial<TableProps<TTableDataType>>) => void;
+}
+export * from './theme';
+export * from './toolbar';
+export * from './filter';

package/es/components/organism/DataTable/types/index.js

@@ -0,0 +1,3 @@
+export * from './theme';
+export * from './toolbar';
+export * from './filter';

package/es/components/organism/DataTable/types/theme.d.ts

@@ -0,0 +1,10 @@
+import { ThemeConfig } from 'antd';
+import { AliasToken } from 'antd/es/theme/internal';
+export type TDataTableToken = {
+    toolbarHeight: number;
+    toolbarPadding: string;
+    filterToolbarColor: string;
+};
+export interface DataTableThemeConfig extends Omit<ThemeConfig, 'token'> {
+    token?: Partial<AliasToken> & Partial<TDataTableToken>;
+}

package/es/components/organism/DataTable/types/theme.js

@@ -0,0 +1 @@
+export {};

package/es/components/organism/DataTable/types/toolbar.d.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import { DropdownProps } from 'antd';
+import { TOOLBAR_ACTION_KEYS } from '../constants';
+import { AddButtonProps } from '../components/AddButton';
+import { TActionButton, TConfirmResponse } from '@antscorp/antsomi-ui/es/types';
+import { TOperatorKey } from '@antscorp/antsomi-ui/es/types/condition';
+import { ModifyColumnMetric } from '../../ModifyColumnModal';
+import { SavedModifyColumnItem, TOnSaveModifyColumnArgs } from '../../ModifyColumnModal/types';
+import { TextProps } from 'antd/es/typography/Text';
+export type TActionToolbarButtonKey<T extends string[] = []> = (typeof TOOLBAR_ACTION_KEYS)[keyof typeof TOOLBAR_ACTION_KEYS] | T[number];
+export type TSearchItem = {
+    id: string | number;
+    label: string;
+    link?: string;
+    icon?: ReactNode;
+    [key: string]: any;
+};
+export type TSelectedRowButton = TActionButton & {
+    dropdownProps?: DropdownProps;
+};
+/**
+ * Represents a search action button, extending the base functionality of `TActionButton`.
+ *
+ * @typedef {TActionButton} TSearchActionButton
+ *
+ * @property {TSearchItem[]} [searchList] - An optional list of search items.
+ * @property {string} [objectName] - An optional name for the object being searched show in filter section.
+ * @property {(valueSearch: string) => void} [onSearch] - An optional callback function triggered when a search is performed, taking the search value as a parameter.
+ */
+export type TSearchActionButton = TActionButton & {
+    searchList?: TSearchItem[];
+    objectName?: string;
+    isClientSearch?: boolean;
+    isAddFilterFromSearchItem?: boolean;
+    addFilterInfo?: {
+        metricId?: string | number;
+        operator: TOperatorKey;
+    };
+    searchItemProps?: TextProps;
+    loading?: boolean;
+    itemSearchRender?: (item: TSearchItem, index: number, node: ReactNode) => React.ReactNode;
+    onSearch?: (valueSearch: string) => void;
+    onClickSearchItem?: (item: TSearchItem, index: number) => void;
+};
+export type TColumnActionButton = TActionButton & {
+    modalTitle?: string;
+    savedModifyColumn?: {
+        list: SavedModifyColumnItem[];
+        selected?: string | number;
+        loading?: boolean;
+        onRemove?: (savedFilter: SavedModifyColumnItem) => Promise<TConfirmResponse>;
+        onSelect?: (savedFilter: SavedModifyColumnItem) => void;
+    };
+    metrics?: ModifyColumnMetric[];
+    onApply?: (args: TOnSaveModifyColumnArgs) => Promise<TConfirmResponse>;
+};
+export type TToolbarActionButton<TActionKey extends string[] = [], ActionKey extends TActionToolbarButtonKey<TActionKey> = TActionToolbarButtonKey<TActionKey>> = ActionKey extends 'SEARCH' ? TSearchActionButton : ActionKey extends 'COLUMN' ? TColumnActionButton : TActionButton;
+export type TCollapse = {
+    collapsed?: boolean;
+    onCollapse?: (collapsed: boolean) => void;
+};
+export interface ToolbarProps<TActionKey extends string[] = []> {
+    show?: boolean;
+    addButton?: AddButtonProps | ((node: ReactNode) => ReactNode);
+    actionButtons?: {
+        [K in TActionToolbarButtonKey<TActionKey>]?: TToolbarActionButton<TActionKey, K>;
+    };
+    selectedRowButtons?: Record<string, TSelectedRowButton>;
+    collapse?: TCollapse;
+}

package/es/components/organism/DataTable/types/toolbar.js

@@ -0,0 +1 @@
+export {};

package/es/components/organism/DataTable/utils/filter.d.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+import { MenuProps } from 'antd';
+import { FilterItem, FilterMetricItem, TApiFilter } from '../types';
+import { SavedFilter } from '@antscorp/antsomi-ui/es/models/DataTable/SavedFilter';
+import { FilterProps } from '../..';
+import { TFormatFilterValue } from '../hooks/useDataTableListing/types';
+type MenuItem = Required<MenuProps>['items'][number];
+type TSerializeFilterMetricsToMenuItems = {
+    filterMetrics: FilterMetricItem[];
+    level?: number;
+    onSelectFilterMetric?: MenuProps['onSelect'];
+    onClickFilterMetric?: (filterMetric: FilterMetricItem) => void;
+};
+type TRenderValueField = {
+    filterMetric: FilterMetricItem;
+    operator: string;
+    value?: any;
+    matchesAny?: FilterProps['matchesAny'];
+    onChangeValue?: (value: any) => void;
+    onLoadMore?: () => void;
+};
+type TGetFilterMetricByName = {
+    filterMetrics: FilterMetricItem[];
+    name: string;
+};
+export declare const serializeFilterMetricsToMenuItems: ({ filterMetrics, level, onSelectFilterMetric, onClickFilterMetric, }: TSerializeFilterMetricsToMenuItems) => MenuItem[];
+/**
+ * Flattens an array of filter metrics, including their nested children, into a single-level array.
+ *
+ * @param {FilterMetric[]} filterMetrics - The array of filter metrics to flatten. Each filter metric can contain
+ *                                         nested children which will also be included in the flattened result.
+ * @returns {FilterMetric[]} A single-level array of filter metrics, including all nested children.
+ *
+ * @example
+ * // Given the following input:
+ * const filterMetrics = [
+ *   {
+ *     id: 1,
+ *     name: 'Metric 1',
+ *     children: [
+ *       {
+ *         id: 2,
+ *         name: 'Metric 1.1',
+ *         children: []
+ *       },
+ *       {
+ *         id: 3,
+ *         name: 'Metric 1.2',
+ *         children: [
+ *           {
+ *             id: 4,
+ *             name: 'Metric 1.2.1',
+ *             children: []
+ *           }
+ *         ]
+ *       }
+ *     ]
+ *   },
+ *   {
+ *     id: 5,
+ *     name: 'Metric 2',
+ *     children: []
+ *   }
+ * ];
+ *
+ * // The output will be:
+ * const result = flatFilterMetrics(filterMetrics);
+ * // result will be:
+ * // [
+ * //   { id: 2, name: 'Metric 1.1', children: [] },
+ * //   { id: 4, name: 'Metric 1.2.1', children: [] },
+ * //   { id: 3, name: 'Metric 1.2', children: [...] },
+ * //   { id: 1, name: 'Metric 1', children: [...] },
+ * //   { id: 5, name: 'Metric 2', children: [] }
+ * // ]
+ */
+export declare const flatFilterMetrics: (filterMetrics: FilterMetricItem[]) => FilterMetricItem[];
+export declare const renderValueField: ({ filterMetric, operator, value, matchesAny, onLoadMore, onChangeValue, }: TRenderValueField) => React.JSX.Element | null;
+/**
+ * Retrieves a filter metric by its name from a collection of filter metrics.
+ *
+ * @typedef {Object} Metric
+ * @property {string} name - The name of the metric.
+ * @property {any} [otherProperties] - Other properties of the metric.
+ *
+ * @typedef {Object} TGetFilterMetricByName
+ * @property {Metric[]} filterMetrics - An array of filter metrics.
+ * @property {string} name - The name of the metric to find.
+ *
+ * @param {TGetFilterMetricByName} params - The parameters containing filter metrics and the name of the metric to find.
+ * @returns {Metric|undefined} The metric with the specified name, or undefined if not found.
+ */
+export declare const getFilterMetricByName: ({ filterMetrics, name, }: TGetFilterMetricByName) => FilterMetricItem | undefined;
+export declare const mapFiltersToRules: (filters: FilterItem[]) => SavedFilter['rules'];
+export declare const mapRulesToFilters: (rules: SavedFilter['rules']) => FilterItem[];
+export declare const mapFiltersToApiFilters: (filters: FilterItem[], includeDataType?: boolean, formatFilterValue?: TFormatFilterValue) => TApiFilter;
+export {};