@mailstep/design-system 0.8.26 → 0.8.27-beta.1

package/ui/Blocks/CommonGrid/hooks/useSelectPreset.js

@@ -0,0 +1,21 @@
+import { useCallback, useEffect } from "react";
+import isEqual from "lodash/isEqual.js";
+//#region packages/ui/Blocks/CommonGrid/hooks/useSelectPreset.ts
+const useSelectPreset = ({ gridName, gridActions, gridSelectors, setSelectedPresetName, onClosePresetsModal }) => {
+	const gridPresets = gridSelectors?.presets;
+	const filters = gridSelectors?.filter;
+	const handleSelectPreset = useCallback((presetName, filters) => () => {
+		setSelectedPresetName(presetName);
+		gridActions.setFilters?.(filters);
+		onClosePresetsModal();
+	}, [gridActions]);
+	useEffect(() => {
+		if (!gridName || !gridPresets) return;
+		const activePreset = Object.entries(gridPresets)?.find(([presetName, presetFilters]) => isEqual(presetFilters, filters));
+		if (activePreset) setSelectedPresetName(activePreset[0]);
+		else setSelectedPresetName("");
+	}, [filters, gridPresets]);
+	return { handleSelectPreset };
+};
+//#endregion
+export { useSelectPreset };

package/ui/Blocks/CommonGrid/hooks/useToggleAllCheckbox.d.ts

@@ -1,5 +1,4 @@
-import { RowProps, GridActionsType, UxState } from '../types';
-
+import type { RowProps, GridActionsType, UxState } from '../types';
 /**
  * hook for checkbox that select and unselects all row
  * returns [checked state, toggleAllHandler()] for checkbox

package/ui/Blocks/CommonGrid/hooks/useToggleAllCheckbox.js

@@ -0,0 +1,19 @@
+import { useCallback, useMemo } from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/useToggleAllCheckbox.ts
+const useToggleAllCheckbox = (rowsData, uxState, handleUxChange) => {
+	const allChecked = useMemo(() => rowsData && (rowsData || []).length >= 1 && rowsData.every((row) => uxState?.checkedRows?.[row.id]), [rowsData, uxState?.checkedRows]);
+	const toggleAllHandler = useCallback(() => {
+		const checkedRows = {};
+		if (!allChecked && rowsData) rowsData.forEach((row) => {
+			checkedRows[row.id] = true;
+		});
+		handleUxChange?.("checkedRows", checkedRows);
+	}, [
+		handleUxChange,
+		rowsData,
+		allChecked
+	]);
+	return [!!allChecked, toggleAllHandler];
+};
+//#endregion
+export { useToggleAllCheckbox };

package/ui/Blocks/CommonGrid/hooks/useUxReset.d.ts

@@ -1,4 +1,3 @@
 import { RowProps, GridActionsType, UxState } from '../types';
-
 declare const useUxReset: (rowsData: RowProps[], uxState: UxState, clearUxState: GridActionsType["clearUxState"]) => any;
 export default useUxReset;

package/ui/Blocks/CommonGrid/hooks/useUxReset.js

@@ -0,0 +1,14 @@
+import React from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/useUxReset.ts
+const useUxReset = (rowsData, uxState, clearUxState) => {
+	const [previous, setPrevious] = React.useState("|");
+	React.useEffect(() => {
+		const ids = (rowsData || []).map((row) => row.id).join("|");
+		if (ids !== previous) {
+			if (clearUxState && (uxState.checkedRows && Object.keys(uxState.checkedRows).length || uxState.selectedRow)) clearUxState();
+		}
+		setPrevious(ids);
+	}, [rowsData]);
+};
+//#endregion
+export { useUxReset as default };

package/ui/Blocks/CommonGrid/index.d.ts

@@ -1,11 +1,10 @@
-import { default as CommonGrid } from './CommonGridContainer';
-import { default as withReduxActions } from './HoC/withReduxActions';
-import { default as reducer, actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
-import { default as useFloatingButton } from './hooks/useFloatingButton';
-import { useAddFilter } from './hooks/useAddFilter';
-import { useEvent } from './hooks/useEvent';
-
+import CommonGrid from './CommonGridContainer';
+import withReduxActions from './HoC/withReduxActions';
+import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
+import useFloatingButton from './hooks/useFloatingButton';
 import * as Types from './types';
 export * from './components/gridCells';
+import { useAddFilter } from './hooks/useAddFilter';
+import { useEvent } from './hooks/useEvent';
 export default CommonGrid;
 export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, useFloatingButton, useAddFilter, useEvent, };

package/ui/Blocks/CommonGrid/index.js

@@ -0,0 +1,26 @@
+import { useEvent } from "./hooks/useEvent.js";
+import { useAddFilter } from "./hooks/useAddFilter.js";
+import { types_exports } from "./types.js";
+import { DateCell } from "./components/gridCells/Date.js";
+import { DateTimeCell } from "./components/gridCells/DateTime.js";
+import { StringJoinCell } from "./components/gridCells/StringJoin.js";
+import { BoolIconCell } from "./components/gridCells/BoolIcon.js";
+import { RemoveCell } from "./components/gridCells/RemoveItem.js";
+import { LinkInCell } from "./components/gridCells/LinkInCell.js";
+import { ButtonInCell } from "./components/gridCells/ButtonInCell.js";
+import { IconButtonInCell } from "./components/gridCells/IconButtonInCell.js";
+import { SwitchInCell } from "./components/gridCells/SwitchInCell.js";
+import { ImageCell } from "./components/gridCells/ImageCell.js";
+import { EnumInCell } from "./components/gridCells/EnumInCell.js";
+import { HoverBubble } from "./components/gridCells/HoverBubble.js";
+import { RowActionsCell } from "./components/gridCells/RowActionsCell.js";
+import { ToggleCell } from "./components/gridCells/ToggleCell.js";
+import "./components/gridCells/index.js";
+import store_default, { actionPrefix, actionTypes, createActions, createFullSelector, createSelectors } from "./store/index.js";
+import CommonGridContainer from "./CommonGridContainer.js";
+import withReduxActions from "./HoC/withReduxActions.js";
+import useFloatingButton from "./hooks/useFloatingButton.js";
+//#region packages/ui/Blocks/CommonGrid/index.ts
+var CommonGrid_default = CommonGridContainer;
+//#endregion
+export { BoolIconCell, ButtonInCell, DateCell, DateTimeCell, EnumInCell, HoverBubble, IconButtonInCell, ImageCell, LinkInCell, RemoveCell, RowActionsCell, StringJoinCell, SwitchInCell, ToggleCell, types_exports as Types, actionPrefix, actionTypes, createActions, createFullSelector, createSelectors, CommonGrid_default as default, store_default as reducer, useAddFilter, useEvent, useFloatingButton, withReduxActions };

package/ui/Blocks/CommonGrid/store/index.d.ts

@@ -1,5 +1,4 @@
-import { FilterProps, SortingValueType, InitProps, GridState, GridSelectorsType, ColumnConfig, Filtering, GridPresets } from '../types';
-
+import type { FilterProps, SortingValueType, InitProps, GridState, GridSelectorsType, ColumnConfig, Filtering, GridPresets } from '../types';
 type DefaultRootState = {};
 export type MultiState = Record<string, GridState>;
 export declare const initialState: GridState;

package/ui/Blocks/CommonGrid/store/index.js

@@ -0,0 +1,293 @@
+import migrateState_default from "./migrateState.js";
+import getOr from "lodash/fp/getOr.js";
+import omit from "lodash/omit.js";
+import produce from "immer";
+import { createSelector } from "reselect";
+//#region packages/ui/Blocks/CommonGrid/store/index.ts
+const initialState = {
+	page: 1,
+	presets: {},
+	sorting: [],
+	isConfigFormOpen: false,
+	uxState: {
+		selectedRow: null,
+		checkedRows: {}
+	},
+	columnConfig: {},
+	filter: {},
+	columnsWidth: {},
+	columnsOrder: [],
+	defaultSorting: []
+};
+const actionPrefix = "@store/CommonGrid";
+const actionTypes = {
+	init: `${actionPrefix}/init`,
+	clearUxState: `${actionPrefix}/clearUxState`,
+	handleUxChange: `${actionPrefix}/handleUxChange`,
+	openConfigForm: `${actionPrefix}/openConfigForm`,
+	closeConfigForm: `${actionPrefix}/closeConfigForm`,
+	setColumnConfig: `${actionPrefix}/setColumnConfig`,
+	setPage: `${actionPrefix}/setPage`,
+	setPresets: `${actionPrefix}/setPresets`,
+	createPreset: `${actionPrefix}/createPreset`,
+	deletePreset: `${actionPrefix}/deletePreset`,
+	setRowsPerPage: `${actionPrefix}/setRowsPerPage`,
+	resetFilters: `${actionPrefix}/resetFilters`,
+	addFilter: `${actionPrefix}/addFilter`,
+	setFilters: `${actionPrefix}/setFilters`,
+	addSorting: `${actionPrefix}/addSorting`,
+	resetSorting: `${actionPrefix}/resetSorting`,
+	clearSettings: `${actionPrefix}/clearSettings`,
+	resetGrid: `${actionPrefix}/resetGrid`,
+	setColumnWidth: `${actionPrefix}/setColumnWidth`,
+	setColumnsOrder: `${actionPrefix}/setColumnsOrder`
+};
+let migrationChecked = false;
+var store_default = (state = {}, action) => {
+	return produce(state, (draft) => {
+		if (!migrationChecked && state && Object.keys(state).length > 0) {
+			draft = migrateState_default(draft);
+			migrationChecked = true;
+		}
+		const gridName = action.gridName;
+		if (!gridName) return draft;
+		if (!draft[gridName]) draft[gridName] = { ...initialState };
+		switch (action.type) {
+			case actionTypes.init:
+				const { defaultSorting } = action.initProps;
+				draft[gridName].page = 1;
+				if (defaultSorting) {
+					draft[gridName].defaultSorting = defaultSorting;
+					draft[gridName].sorting = draft[gridName].sorting?.length ? draft[gridName].sorting : defaultSorting;
+				}
+				break;
+			case actionTypes.clearUxState:
+				draft[gridName].uxState = initialState.uxState;
+				break;
+			case actionTypes.handleUxChange:
+				draft[gridName].uxState = {
+					...draft[gridName].uxState,
+					[action.uxKey]: action.uxValue
+				};
+				break;
+			case actionTypes.openConfigForm:
+				draft[gridName].isConfigFormOpen = true;
+				break;
+			case actionTypes.closeConfigForm:
+				draft[gridName].isConfigFormOpen = false;
+				break;
+			case actionTypes.setColumnConfig:
+				draft[gridName].columnConfig = action.columnConfig;
+				draft[gridName].isConfigFormOpen = false;
+				break;
+			case actionTypes.resetFilters:
+				draft[gridName].filter = action.filters;
+				break;
+			case actionTypes.addFilter:
+				const { column, value, filterProps, others } = action;
+				const currentFilterState = { [column]: {
+					value,
+					filterProps,
+					others
+				} };
+				draft[gridName].filter = {
+					...draft[gridName].filter,
+					...currentFilterState
+				};
+				draft[gridName].page = 1;
+				break;
+			case actionTypes.setFilters:
+				draft[gridName].filter = action.filters;
+				break;
+			case actionTypes.addSorting:
+				let { direction } = action;
+				const { column: sortingColumn } = action;
+				if (draft[gridName]?.defaultSorting?.[0]?.column === sortingColumn && direction === null) direction = "asc";
+				let sorting = [{
+					column: sortingColumn,
+					direction
+				}];
+				if (direction === null) sorting = draft[gridName]?.defaultSorting || [];
+				draft[gridName].sorting = sorting;
+				break;
+			case actionTypes.resetSorting:
+				draft[gridName].sorting = draft[gridName].defaultSorting?.length ? draft[gridName].defaultSorting : initialState.sorting;
+				break;
+			case actionTypes.clearSettings:
+				draft[gridName].page = initialState.page;
+				draft[gridName].filter = initialState.filter;
+				draft[gridName].uxState = initialState.uxState;
+				draft[gridName].sorting = [];
+				break;
+			case actionTypes.setPage:
+				draft[gridName].page = action.page;
+				break;
+			case actionTypes.setPresets:
+				draft[gridName].presets = action.presets;
+				break;
+			case actionTypes.createPreset:
+				draft[gridName].presets = {
+					...draft[gridName].presets || {},
+					[action.presetName]: action.filters
+				};
+				break;
+			case actionTypes.deletePreset:
+				draft[gridName].presets = omit(draft[gridName].presets, action.presetName);
+				break;
+			case actionTypes.setRowsPerPage:
+				draft[gridName].rowsPerPage = action.rowsPerPage;
+				break;
+			case actionTypes.resetGrid:
+				draft[gridName] = {
+					...initialState,
+					rowsPerPage: draft[gridName].rowsPerPage
+				};
+				break;
+			case actionTypes.setColumnWidth:
+				if (action.columnsWidth === null) draft[gridName].columnsWidth = initialState.columnsWidth;
+				else draft[gridName].columnsWidth = {
+					...draft[gridName].columnsWidth,
+					...action.columnsWidth
+				};
+				draft[gridName].columnsWidthVariant = action.columnLayout;
+				break;
+			case actionTypes.setColumnsOrder:
+				draft[gridName].columnsOrder = action.columnsOrder;
+				break;
+		}
+		return draft;
+	});
+};
+const createActions = (gridName) => ({
+	init: (initProps = {}) => ({
+		gridName,
+		type: actionTypes.init,
+		initProps
+	}),
+	clearUxState: () => ({
+		gridName,
+		type: actionTypes.clearUxState
+	}),
+	handleUxChange: (uxKey, uxValue) => ({
+		gridName,
+		type: actionTypes.handleUxChange,
+		uxKey,
+		uxValue
+	}),
+	openConfigForm: () => ({
+		gridName,
+		type: actionTypes.openConfigForm
+	}),
+	closeConfigForm: () => ({
+		gridName,
+		type: actionTypes.closeConfigForm
+	}),
+	setColumnConfig: (columnConfig) => ({
+		gridName,
+		type: actionTypes.setColumnConfig,
+		columnConfig
+	}),
+	setPage: (page) => ({
+		gridName,
+		type: actionTypes.setPage,
+		page
+	}),
+	setPresets: (presets) => ({
+		gridName,
+		type: actionTypes.setPresets,
+		presets
+	}),
+	createPreset: (presetName, filters) => ({
+		gridName,
+		type: actionTypes.createPreset,
+		presetName,
+		filters
+	}),
+	deletePreset: (presetName) => ({
+		gridName,
+		type: actionTypes.deletePreset,
+		presetName
+	}),
+	setColumnWidth: (columnsWidth, columnLayout) => ({
+		gridName,
+		type: actionTypes.setColumnWidth,
+		columnsWidth,
+		columnLayout
+	}),
+	resetGrid: () => ({
+		gridName,
+		type: actionTypes.resetGrid
+	}),
+	setColumnsOrder: (columnsOrder) => ({
+		gridName,
+		type: actionTypes.setColumnsOrder,
+		columnsOrder
+	}),
+	setRowsPerPage: (rowsPerPage) => ({
+		gridName,
+		type: actionTypes.setRowsPerPage,
+		rowsPerPage
+	}),
+	resetFilters: () => ({
+		gridName,
+		type: actionTypes.resetFilters
+	}),
+	addFilter: (column, value, filterProps, others) => ({
+		gridName,
+		type: actionTypes.addFilter,
+		column,
+		value,
+		filterProps,
+		others
+	}),
+	setFilters: (filters) => ({
+		gridName,
+		type: actionTypes.setFilters,
+		filters
+	}),
+	addSorting: (column, direction) => ({
+		gridName,
+		type: actionTypes.addSorting,
+		column,
+		direction
+	}),
+	resetSorting: () => ({
+		gridName,
+		type: actionTypes.resetSorting
+	}),
+	clearSettings: () => ({
+		gridName,
+		type: actionTypes.clearSettings
+	})
+});
+const createSelectors = (gridName) => ({
+	getUxState: (state) => getOr(initialState.uxState, `commonGrid.${gridName}.uxState`, state),
+	isConfigFormOpen: (state) => getOr(initialState.isConfigFormOpen, `commonGrid.${gridName}.isConfigFormOpen`, state),
+	getColumnConfig: (state) => getOr(initialState.columnConfig, `commonGrid.${gridName}.columnConfig`, state),
+	getPage: (state) => getOr(initialState.page, `commonGrid.${gridName}.page`, state),
+	getPresets: (state) => getOr(initialState.presets, `commonGrid.${gridName}.presets`, state),
+	getRowsPerPage: (state) => getOr(initialState.rowsPerPage, `commonGrid.${gridName}.rowsPerPage`, state),
+	getFilter: (state) => getOr(initialState.filter, `commonGrid.${gridName}.filter`, state),
+	getSorting: (state) => getOr(initialState.sorting, `commonGrid.${gridName}.sorting`, state),
+	getColumnsWidth: (state) => getOr(null, `commonGrid.${gridName}.columnsWidth`, state),
+	getColumnsWidthVariant: (state) => getOr(void 0, `commonGrid.${gridName}.columnsWidthVariant`, state),
+	getColumnsOrder: (state) => getOr([], `commonGrid.${gridName}.columnsOrder`, state)
+});
+const createFullSelector = (gridName) => {
+	const selectors = createSelectors(gridName);
+	return createSelector((state) => selectors.getUxState(state), (state) => selectors.isConfigFormOpen(state), (state) => selectors.getColumnConfig(state), (state) => selectors.getPage(state), (state) => selectors.getPresets(state), (state) => selectors.getRowsPerPage(state), (state) => selectors.getFilter(state), (state) => selectors.getSorting(state), (state) => selectors.getColumnsWidth(state), (state) => selectors.getColumnsWidthVariant(state), (state) => selectors.getColumnsOrder(state), (uxState, isConfigFormOpen, columnConfig, page, presets, rowsPerPage, filter, sorting, columnsWidth, columnsWidthVariant, columnsOrder) => ({
+		uxState,
+		isConfigFormOpen,
+		columnConfig,
+		page,
+		presets,
+		rowsPerPage,
+		filter,
+		sorting,
+		columnsWidth,
+		columnsWidthVariant,
+		columnsOrder
+	}));
+};
+//#endregion
+export { actionPrefix, actionTypes, createActions, createFullSelector, createSelectors, store_default as default, initialState };

package/ui/Blocks/CommonGrid/store/migrateState.d.ts

@@ -1,4 +1,3 @@
 import { MultiState } from './index';
-
 declare const _default: (draft: MultiState) => MultiState;
 export default _default;

package/ui/Blocks/CommonGrid/store/migrateState.js

@@ -0,0 +1,13 @@
+//#region packages/ui/Blocks/CommonGrid/store/migrateState.ts
+const v2 = (draft) => {
+	Object.keys(draft).forEach((gridName) => {
+		if (draft[gridName].columnConfig && Array.isArray(draft[gridName].columnConfig)) draft[gridName].columnConfig = {};
+	});
+	return draft;
+};
+var migrateState_default = (draft) => {
+	draft = v2(draft);
+	return draft;
+};
+//#endregion
+export { migrateState_default as default };

package/ui/Blocks/CommonGrid/storybook/components/ComplexCell.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import type { FC } from 'react';
+import type { DataCellProps } from '../../types';
 export declare const ComplexCell: FC<DataCellProps<{
     id: string;
 }>>;

package/ui/Blocks/CommonGrid/storybook/components/ComplexCell.js

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import { jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/storybook/components/ComplexCell.tsx
+const ComplexCell = (props) => {
+	return /* @__PURE__ */ jsxs("button", {
+		onClick: useCallback(() => {
+			if (props.onRowAction) props.onRowAction(props.rowData.id, "get_invoice", null)?.catch((error) => {
+				console.error(error);
+			});
+		}, [props]),
+		children: [
+			" download ",
+			props.rowData.id,
+			" "
+		]
+	});
+};
+//#endregion
+export { ComplexCell };

package/ui/Blocks/CommonGrid/storybook/components/EnumCellExample.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import type { FC } from 'react';
+import type { DataCellProps } from '../../types';
 type CellProps = DataCellProps<{
     enumColumn: string;
 }>;

package/ui/Blocks/CommonGrid/storybook/components/EnumCellExample.js

@@ -0,0 +1,22 @@
+import { EnumInCell } from "../../components/gridCells/EnumInCell.js";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/storybook/components/EnumCellExample.tsx
+const packagingTypeAppearance = {
+	"option A": "neutralSubtle",
+	"option B": "orangeSubtle",
+	"option C": "greenSubtle"
+};
+const PackagingTypeTrans = {
+	"option A": () => "option A",
+	"option B": () => "option B",
+	"option C": () => "option C"
+};
+const EnumCellExample = ({ rowData }) => {
+	return /* @__PURE__ */ jsx(EnumInCell, {
+		value: rowData.enumColumn,
+		enumObj: PackagingTypeTrans,
+		appearanceMap: packagingTypeAppearance
+	});
+};
+//#endregion
+export { EnumCellExample };

package/ui/Blocks/CommonGrid/storybook/stories/withForcedCheckboxes.stories.d.ts

@@ -1,5 +1,4 @@
 import { ActionColumn } from '../../types';
-
 export declare const ActionColumnCheckboxes: ActionColumn;
 declare const _default: {
     title: string;

package/ui/Blocks/CommonGrid/storybook/utils/actions.js

@@ -0,0 +1,10 @@
+//#region packages/ui/Blocks/CommonGrid/storybook/utils/actions.ts
+const onRowEditClick = (id, props) => console.log("onRowEditClick", id, props);
+const onRowReadClick = (id, props) => console.log("onRowReadClick", id, props);
+const onRowAction = (id, field, value) => console.log("onRowAction", id, field, value);
+const onRowClick = (id, field, value) => console.log("onRowClick", id, field);
+const onBatchAction = (action, affectedRows) => {
+	console.log("onBatchAction called", action, affectedRows);
+};
+//#endregion
+export { onBatchAction, onRowAction, onRowClick, onRowEditClick, onRowReadClick };

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.d.ts

@@ -1,5 +1,4 @@
-import { ColumnDefinition } from '../../types';
-
+import type { ColumnDefinition } from '../../types';
 export declare const oversizedArrayColumns = 25;
 export declare const oversizedColumnDefinition: {
     name: string;

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js

@@ -0,0 +1,125 @@
+import { ComplexCell } from "../components/ComplexCell.js";
+import { EnumCellExample } from "../components/EnumCellExample.js";
+import { enumValues } from "./utils.js";
+//#region packages/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.tsx
+const oversizedArrayColumns = 25;
+const oversizedColumnDefinition = new Array(25).fill(null).map((unused, index) => ({
+	name: `column_${index}`,
+	title: `column_${index}`,
+	flexBasis: 120
+}));
+const enumColumn = {
+	name: "enumColumn",
+	title: "Enum Column",
+	flexBasis: 160,
+	filterOptions: enumValues.map((v) => ({
+		value: v,
+		label: v
+	})),
+	filterExtraProps: {
+		isMulti: true,
+		checkAllButton: true
+	},
+	filtering: true,
+	sorting: false,
+	cellComponent: EnumCellExample
+};
+const columnDefinitions = [
+	{
+		name: "hiddenColumn",
+		title: "Hidden column",
+		flexBasis: 160,
+		filtering: true,
+		sorting: true,
+		defaultHidden: true
+	},
+	{
+		name: "textColumn",
+		title: "Text column",
+		flexBasis: 160,
+		filtering: true,
+		sorting: true
+	},
+	enumColumn,
+	{
+		name: "enumColumnAsync",
+		title: "Enum Column Async",
+		flexBasis: 160,
+		filterExtraProps: {
+			isMulti: true,
+			checkAllButton: true
+		},
+		filtering: true,
+		sorting: true,
+		asyncLoadKey: "enumColumnAsync"
+	},
+	{
+		name: "numberColumn",
+		title: "Number Column",
+		flexBasis: 160,
+		filtering: true,
+		filteringType: "number",
+		filterExtraProps: { decimals: 2 },
+		sorting: true
+	},
+	{
+		name: "numberFloatColumn",
+		title: "Number Float Column",
+		flexBasis: 160,
+		filtering: true,
+		filteringType: "number",
+		sorting: true,
+		filterExtraProps: { isFloat: true }
+	},
+	{
+		name: "dateColumn",
+		title: "Date Column",
+		flexBasis: 160,
+		filtering: true,
+		filteringType: "date",
+		sorting: true,
+		filterExtraProps: { filterTime: true }
+	},
+	{
+		name: "boolColumn",
+		title: "Bool Column",
+		flexBasis: 160,
+		filtering: true,
+		filteringType: "flag",
+		sorting: true,
+		formatRowValue: (row) => {
+			return row.boolColumn ? "Yes" : "No";
+		}
+	},
+	{
+		name: "advancedColumn",
+		title: "Advanced Column",
+		flexBasis: 160,
+		formatRowValue: (row) => {
+			return `${row.numberColumn / 4 * row.textColumn.length}`;
+		}
+	},
+	{
+		name: "complexColumn",
+		title: "Complex Column",
+		flexBasis: 350,
+		cellComponent: ComplexCell
+	},
+	{
+		name: "alwaysOffColumn",
+		title: "Always Off Column",
+		flexBasis: 0,
+		alwaysOff: true
+	}
+];
+const stickyColumn = {
+	name: "stickyColumn",
+	title: "Sticky Column",
+	flexBasis: 160,
+	alwaysOn: true,
+	sticky: true,
+	stickTo: "right"
+};
+const columnDefinitionsWithSticky = [...columnDefinitions, stickyColumn];
+//#endregion
+export { columnDefinitions, columnDefinitionsWithSticky, enumColumn, oversizedArrayColumns, oversizedColumnDefinition, stickyColumn };

package/ui/Blocks/CommonGrid/storybook/utils/utils.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { GridActionsType, rowClassSymbol, ExtraControlButton } from '../../types';
-
+import type { FC } from 'react';
+import { type GridActionsType, rowClassSymbol, type ExtraControlButton } from '../../types';
 export declare const enumValues: string[];
 export declare const oversizedArrayColumns = 25;
 export declare const gridSelectors: {};