@mailstep/design-system 0.8.51 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.51",
+  "version": "0.9.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -39,14 +39,20 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@lingui/core": "^5.0.0",
     "@lingui/react": "^5.0.0",
+    "@nivo/bar": "^0.79.1",
+    "@nivo/colors": "^0.73.0",
+    "@nivo/core": "^0.73.0",
+    "@nivo/legends": "^0.73.0",
+    "@nivo/pie": "^0.73.0",
     "@popperjs/core": "^2.11.8",
     "@storybook/addon-designs": "^11.1.3",
-    "@storybook/addon-docs": "10.4.2",
-    "@storybook/addon-links": "10.4.2",
-    "@storybook/react-webpack5": "10.4.2",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/addon-links": "10.4.6",
+    "@storybook/react-webpack5": "10.4.6",
     "@svgr/rollup": "^8.0.1",
     "@swc/core": "^1.15.30",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@tsdown/css": "^0.22.3",
     "@types/faker": "^4.1.11",
     "@types/lodash": "^4.17.13",
     "@types/luxon": "^3.4.2",
@@ -54,6 +60,7 @@
     "@types/react": "^19.2.2",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^19.2.2",
+    "@types/react-grid-layout": "^1",
     "@types/react-helmet": "^6.1.11",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
@@ -73,7 +80,7 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-perf": "^3.3.2",
-    "eslint-plugin-storybook": "10.4.2",
+    "eslint-plugin-storybook": "10.4.6",
     "faker": "^5.1.0",
     "husky": "^9.1.7",
     "immer": "^9.0.19",
@@ -84,11 +91,13 @@
     "prettier": "2.8.8",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-grid-layout": "^1.2.5",
     "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",
     "react-onclickoutside": "^6.13.0",
     "react-popper": "^2.3.0",
     "react-redux": "*",
+    "react-resizable": "^3.0.4",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-script": "^2.0.5",
@@ -96,7 +105,7 @@
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
     "reselect": "5.0.0-alpha.2",
-    "storybook": "10.4.2",
+    "storybook": "10.4.6",
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
@@ -118,6 +127,11 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@lingui/core": "^5.0.0",
     "@lingui/react": "^5.0.0",
+    "@nivo/bar": "^0.79.1",
+    "@nivo/colors": "^0.73.0",
+    "@nivo/core": "^0.73.0",
+    "@nivo/legends": "^0.73.0",
+    "@nivo/pie": "^0.73.0",
     "@popperjs/core": "^2.11.8",
     "@xstyled/styled-components": "^3.8.0",
     "@xstyled/system": "^3.8.0",
@@ -127,11 +141,13 @@
     "moment": "^2.30.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-grid-layout": "^1.2.5",
     "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",
     "react-onclickoutside": "^6.13.0",
     "react-popper": "^2.3.0",
     "react-redux": ">=4.0.5",
+    "react-resizable": "^3.0.4",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-select": "^5.10.0",

package/ui/Blocks/CommonGrid/components/ActionHead/ActionHead.js

@@ -33,7 +33,7 @@ const ActionsWrap = styled$1.div`
 const StyledText = styled$1.span`
   font-size: 14px;
   line-height: 18px;
-  color: blue2;
+  color: textPrimary;
   font-weight: 600;
 `;
 const ContentWrap = styled$1.div`

package/ui/Blocks/CommonGrid/components/ButtonMore/ButtonMore.d.ts

@@ -4,7 +4,6 @@ type ItemType = {
     title: string | React.ReactElement;
     onClick: () => void;
     link?: string;
-    disabled?: boolean;
 };
 export type Props = {
     items: ItemType[];

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

@@ -1,5 +1,5 @@
-import { type CommonGridProps, type GridActionsType, type GridSelectorsType, type ColumnDefinition } from '../types';
-import { type DragEndEvent } from '@dnd-kit/core';
+import { DragEndEvent } from '@dnd-kit/core';
+import { CommonGridProps, GridActionsType, GridSelectorsType, ColumnDefinition } from '../types';
 type Props = {
     columns: CommonGridProps['columnsDefinitions'];
     gridActions: GridActionsType;

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

@@ -2,9 +2,9 @@ import { checksColumnsOrder, isColumnOn } from "../utils/index.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 //#region packages/ui/Blocks/CommonGrid/hooks/useManageColumn.ts
 const useManageColumn = ({ columns, gridSelectors, gridActions, onClose }) => {
-	const { setColumnConfig, setColumnsOrder } = gridActions;
+	const { resetGrid, setColumnConfig, setColumnsOrder } = gridActions;
 	const { columnConfig, columnsOrder } = gridSelectors;
-	const initialColumnsOrder = useMemo(() => columns?.map((col) => col.name), [columns]);
+	const initialColumnsOrder = useMemo(() => columns?.map?.((col) => col.name), [columns]);
 	const columnsOrderValue = columnsOrder?.length ? columnsOrder : initialColumnsOrder;
 	const [columnsConfigOptions, setColumnsConfigOptions] = useState({ ...columnConfig ?? {} });
 	const [updatedColumnsOrder, setUpdatedColumnsOrder] = useState(columnsOrderValue);
@@ -29,15 +29,14 @@ const useManageColumn = ({ columns, gridSelectors, gridActions, onClose }) => {
 	]);
 	const resetColumnConfig = useCallback(() => {
 		setUpdatedColumnsOrder(initialColumnsOrder);
-		setColumnConfig?.({});
-		setColumnsOrder?.([]);
+		resetGrid?.();
 		onClose?.();
 		setColumnsConfigOptions({});
 	}, [
 		onClose,
-		setColumnConfig,
-		setColumnsOrder,
-		initialColumnsOrder
+		resetGrid,
+		initialColumnsOrder,
+		columnConfig
 	]);
 	const onCloseForm = useCallback(() => {
 		setUpdatedColumnsOrder(columnsOrderValue);

package/ui/Blocks/Header/components/UserMenu/index.js

@@ -23,7 +23,7 @@ const UserMenu = ({ user, onLogout, hasUserMenu, userMenuOverride, withInitials,
 		ref: parentRef,
 		children: [/* @__PURE__ */ jsx(Avatar_default, {
 			user,
-			colorFront: withInitials ? th.color("white")({ theme }) : th.color("blue2")({ theme }),
+			colorFront: withInitials ? "#ffffff" : th.color("blue2")({ theme }),
 			colorBack: withInitials ? th.color("red1")({ theme }) : isDropdownOpen ? th.color("lightGray7")({ theme }) : th.color("neutral20")({ theme }),
 			hoverColorBack: withInitials ? "" : th.color("lightGray7")({ theme }),
 			size: 34,

package/ui/Blocks/Header/styles.js

@@ -14,7 +14,7 @@ const Container = styled$1.header`
   border-bottom: 1px solid ${th.color("lightGray7")};
   ${({ $variant }) => $variant === "dark" && css`
       background-color: ${th.color("blue3")};
-      color: white;
+      color: #fff;
     `}
 
   @media (min-width: 768px) {

package/ui/Elements/Avatar/Avatar.js

@@ -32,7 +32,7 @@ const Avatar = ({ user, src, size = 34, colorFront, colorBack, className, hoverC
 			/* @__PURE__ */ jsxs("div", { children: [withName && user?.username, children] }),
 			withChevron && /* @__PURE__ */ jsx(Chevron, { children: /* @__PURE__ */ jsx(Icon, {
 				icon: "goDown",
-				fill: "white",
+				fill: "#ffffff",
 				size: 10
 			}) })
 		]

package/ui/Elements/Avatar/styles.js

@@ -19,7 +19,7 @@ const StyledAvatarWrap = styled$1.div`
   overflow: hidden;
   font-size: 14px;
   white-space: nowrap;
-  color: ${(props) => props.$colorFront ? th.color(props.$colorFront) : th.color("blue2")};
+  color: ${(props) => props.$colorFront ? th.color(props.$colorFront) : th.color("typoPrimary")};
   background-color: ${(props) => props.$colorBack ? th.color(props.$colorBack) : ""};
   width: ${(props) => `${props.size}px`};
   height: ${(props) => `${props.size}px`};

package/ui/Elements/Button/styles.js

@@ -80,7 +80,7 @@ const StyledButton = styled$1.button`
 
   &[data-variant='success'] {
     background-color: successColor;
-    color: white;
+    color: #ffffff;
 
     @media (hover: hover) {
       :hover {

package/ui/Elements/DropdownMenu/components/MenuItem.js

@@ -16,11 +16,6 @@ const StyledLink = styled$1(Link)`
     background-color: bgLightGray1;
     border-radius: 6px;
   }
-  ${({ $disabled }) => $disabled && css`
-      opacity: 0.5;
-      pointer-events: none;
-      cursor: not-allowed;
-    `}
   ${({ $isActive }) => $isActive && css`
     background-color: red1;
     color: white;
@@ -37,31 +32,23 @@ const StyledLink = styled$1(Link)`
 `}
 `;
 const MenuItem = ({ item, ItemComponent, onClose }) => {
-	const { onClick, link, hasSeparator, name, autoClose, disabled } = item;
-	const isActive = link === useLocation().pathname;
-	const onClickCallback = useCallback((e) => {
-		if (disabled) {
-			e.preventDefault();
-			return;
-		}
-		if (onClick) {
-			e.preventDefault();
-			onClick();
-		}
-		if (autoClose && onClose) setTimeout(() => {
-			onClose();
-		}, 200);
-	}, [
-		autoClose,
-		disabled,
-		onClick,
-		onClose
-	]);
+	const { onClick, link, hasSeparator, name, autoClose } = item;
 	return /* @__PURE__ */ jsx(StyledLink, {
-		to: disabled ? void 0 : link,
-		$isActive: isActive,
-		$disabled: !!disabled,
-		onClick: onClickCallback,
+		to: link,
+		$isActive: link === useLocation().pathname,
+		onClick: useCallback((e) => {
+			if (onClick) {
+				e.preventDefault();
+				onClick();
+			}
+			if (autoClose && onClose) setTimeout(() => {
+				onClose();
+			}, 200);
+		}, [
+			autoClose,
+			onClick,
+			onClose
+		]),
 		$hasSeparator: !!hasSeparator,
 		"data-cy": name,
 		size: "inherit",

package/ui/Elements/DropdownMenu/types.d.ts

@@ -11,7 +11,6 @@ export type DefaultItem = {
     hidden?: boolean;
     count?: number;
     autoClose?: boolean;
-    disabled?: boolean;
 };
 export type Item = {
     link?: string | Pathname;
@@ -20,7 +19,6 @@ export type Item = {
     name?: string;
     autoClose?: boolean;
     hidden?: boolean;
-    disabled?: boolean;
 };
 export type MenuItemProps<ItemType extends Item> = {
     item: ItemType;

package/ui/Modules/Dashboard/Hoc/LoadingBoundary.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+export type Props = {
+    error?: boolean;
+    isLoading?: boolean;
+    children: JSX.Element;
+};
+declare const LoadingBoundary: ({ error, isLoading, children }: Props) => JSX.Element;
+export default LoadingBoundary;

package/ui/Modules/Dashboard/Hoc/LoadingBoundary.js

@@ -0,0 +1,11 @@
+import Spinner_default from "../../../Elements/Spinner/index.js";
+import ErrorMessage from "../errors/ErrorMessage.js";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/Hoc/LoadingBoundary.tsx
+const LoadingBoundary = ({ error, isLoading, children }) => {
+	if (isLoading) return /* @__PURE__ */ jsx(Spinner_default, {});
+	if (error) return /* @__PURE__ */ jsx(ErrorMessage, { children: "An error occured while loading." });
+	return children;
+};
+//#endregion
+export { LoadingBoundary as default };

package/ui/Modules/Dashboard/Hoc/index.d.ts

@@ -0,0 +1,3 @@
+export * from './withConfig';
+export * from './withFetch';
+export * from './withProps';

package/ui/Modules/Dashboard/Hoc/index.js

@@ -0,0 +1,4 @@
+import { withConfig } from "./withConfig.js";
+import { withFetch } from "./withFetch.js";
+import { withProps, withPropsWDefinition } from "./withProps.js";
+export { withConfig, withFetch, withProps, withPropsWDefinition };

package/ui/Modules/Dashboard/Hoc/storybook/withReduxProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { JSX } from 'react';
+export declare const withProvider: (initialState?: Record<string, any>) => (Story: React.ComponentType) => JSX.Element;
+export default withProvider;

package/ui/Modules/Dashboard/Hoc/storybook/withReduxProvider.js

@@ -0,0 +1,14 @@
+import dashboardReducer from "../../store/reducers/index.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Provider } from "react-redux";
+import { combineReducers, createStore } from "redux";
+//#region packages/ui/Modules/Dashboard/Hoc/storybook/withReduxProvider.tsx
+const withProvider = (initialState = {}) => (Story) => {
+	return /* @__PURE__ */ jsx(Provider, {
+		store: createStore(combineReducers({ dashboard: dashboardReducer }), initialState),
+		children: /* @__PURE__ */ jsx(Story, {})
+	});
+};
+//#endregion
+export { withProvider as default, withProvider };

package/ui/Modules/Dashboard/Hoc/withConfig.d.ts

@@ -0,0 +1,7 @@
+import { WidgetConfig, WidgetDefinition } from '../types';
+type ConfigHOC = (config?: WidgetConfig) => (widget: WidgetDefinition) => WidgetDefinition;
+/**
+ * Add to widget config component additional props
+ */
+export declare const withConfig: ConfigHOC;
+export {};

package/ui/Modules/Dashboard/Hoc/withConfig.js

@@ -0,0 +1,22 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/Hoc/withConfig.tsx
+/**
+* Add to widget config component additional props
+*/
+const withConfig = (config) => (widget) => {
+	const WithConfigComponent = (props) => {
+		if (!widget.configComponent) return null;
+		const Configcomponent = widget.configComponent;
+		return /* @__PURE__ */ jsx(Configcomponent, {
+			...props,
+			...config
+		});
+	};
+	return {
+		...widget,
+		configComponent: WithConfigComponent
+	};
+};
+//#endregion
+export { withConfig };

package/ui/Modules/Dashboard/Hoc/withFetch.d.ts

@@ -0,0 +1,26 @@
+import { WidgetConfig, WidgetDefinition } from '../types';
+type FetchHOC = (fetch: (config?: WidgetConfig) => Promise<any>) => (widget: WidgetDefinition) => WidgetDefinition;
+/**
+ * Replaces the origin component with an enhanced one
+ *  ~ having data, loading state, fetch errors & optionally other custom props.
+ *
+ * Lifecycle:
+ *  ~ Data is fetched on mount and then on every widget config change
+ *
+ * Note:
+ * Passed fetch function should return a promise
+ *  ~ The data payload can either be:
+ *     1) Raw widget data - will result in a passed prop - data={data}
+ *        Example:
+ *          [
+ *            { id: 1, label: 'Delivered', value: 206 },
+ *            { id: 2, label: 'Returned', value: 64 },
+ *          ]
+ *
+ *     2) Object with explicitely named data property
+ *        This method allows you to pass other custom fetched props
+ *         Example:
+ *          { data: [YOUR_DATA], fetchedProp1: 'whatever', fetchedProp2: 23123 }
+ */
+export declare const withFetch: FetchHOC;
+export {};

package/ui/Modules/Dashboard/Hoc/withFetch.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/Hoc/withFetch.tsx
+/**
+* Replaces the origin component with an enhanced one
+*  ~ having data, loading state, fetch errors & optionally other custom props.
+*
+* Lifecycle:
+*  ~ Data is fetched on mount and then on every widget config change
+*
+* Note:
+* Passed fetch function should return a promise
+*  ~ The data payload can either be:
+*     1) Raw widget data - will result in a passed prop - data={data}
+*        Example:
+*          [
+*            { id: 1, label: 'Delivered', value: 206 },
+*            { id: 2, label: 'Returned', value: 64 },
+*          ]
+*
+*     2) Object with explicitely named data property
+*        This method allows you to pass other custom fetched props
+*         Example:
+*          { data: [YOUR_DATA], fetchedProp1: 'whatever', fetchedProp2: 23123 }
+*/
+const withFetch = (fetch) => (widget) => {
+	const WithDataComponent = (props) => {
+		const [data, setData] = React.useState([]);
+		const [isLoading, setIsLoading] = React.useState(false);
+		const [error, setError] = React.useState(false);
+		React.useEffect(() => {
+			setIsLoading(true);
+			fetch(props.config).then(setData).then(() => setIsLoading(false)).catch(setError);
+		}, [JSON.stringify(props.config)]);
+		const dataProps = React.useMemo(() => data?.data ? { ...data } : { data }, [data]);
+		const Component = widget.component;
+		return /* @__PURE__ */ jsx(Component, {
+			...props,
+			...dataProps,
+			isLoading,
+			error
+		});
+	};
+	return {
+		...widget,
+		component: WithDataComponent
+	};
+};
+//#endregion
+export { withFetch };

package/ui/Modules/Dashboard/Hoc/withProps.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { WidgetDefinition } from '../types';
+export declare const withProps: (extraProps: any) => <P extends object>(Component: React.ComponentType<P>) => React.ComponentType<P>;
+export declare const withPropsWDefinition: (extraProps: any) => (widget: WidgetDefinition) => WidgetDefinition;

package/ui/Modules/Dashboard/Hoc/withProps.js

@@ -0,0 +1,25 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/Hoc/withProps.tsx
+const withProps = (extraProps) => (Component) => function ComponentWithProps(props) {
+	return /* @__PURE__ */ jsx(Component, {
+		...props,
+		...extraProps
+	});
+};
+const withPropsWDefinition = (extraProps) => (widget) => {
+	const Component = widget.component;
+	function ComponentWithProps(props) {
+		const additional = typeof extraProps === "function" ? extraProps(props) : extraProps;
+		return /* @__PURE__ */ jsx(Component, {
+			...props,
+			...additional
+		});
+	}
+	return {
+		...widget,
+		component: ComponentWithProps
+	};
+};
+//#endregion
+export { withProps, withPropsWDefinition };

package/ui/Modules/Dashboard/assets/move.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.006 512.006" style="enable-background:new 0 0 512.006 512.006;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M508.247,246.756l-72.457-72.465c-5.009-5.009-13.107-5.009-18.116,0c-5.009,5.009-5.009,13.107,0,18.116l50.594,50.594
+			H268.811V43.748l50.594,50.594c5.009,5.009,13.107,5.009,18.116,0c5.009-5.009,5.009-13.107,0-18.116L265.056,3.761
+			c-5.001-5.009-13.107-5.009-18.116,0l-72.457,72.457c-5.009,5.009-5.009,13.107,0,18.116c5.001,5.009,13.107,5.009,18.116,0
+			l50.594-50.594v199.27H43.744l50.594-50.594c5.009-5.009,5.009-13.107,0-18.116c-5.009-5.009-13.107-5.009-18.116,0L3.757,246.756
+			c-5.009,5.001-5.009,13.107,0,18.116l72.465,72.457c5.009,5.009,13.107,5.009,18.116,0c5.009-5.001,5.009-13.107,0-18.116
+			l-50.594-50.594h199.458v199.646l-50.594-50.594c-5.009-5.001-13.107-5.001-18.116,0c-5.009,5.009-5.009,13.107,0,18.116
+			l72.457,72.465c5,5,13.107,5,18.116,0l72.465-72.457c5.009-5.009,5.009-13.107,0-18.116c-5.009-5-13.107-5-18.116,0
+			l-50.594,50.594V268.627h199.458l-50.594,50.594c-5.009,5.009-5.009,13.107,0,18.116s13.107,5.009,18.116,0l72.465-72.457
+			C513.257,259.872,513.257,251.765,508.247,246.756z"/>
+	</g>
+</g>
+</svg>

package/ui/Modules/Dashboard/components/Config/MultiConfig.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import { ConfigProps, Source } from '../../types';
+export type MultiConfigProps = ConfigProps & {
+    sources?: Source[];
+};
+export declare const MultiConfig: ({ onChange, config, sources }: MultiConfigProps) => JSX.Element;

package/ui/Modules/Dashboard/components/Config/MultiConfig.js

@@ -0,0 +1,51 @@
+import { useText } from "../Text/Text.js";
+import CommonConfig from "./components/CommonConfig.js";
+import InputConfig from "./components/InputConfig.js";
+import { useCallback, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { omit } from "lodash";
+//#region packages/ui/Modules/Dashboard/components/Config/MultiConfig.tsx
+const defaultSources = [];
+const MultiConfig = ({ onChange, config, sources = defaultSources }) => {
+	const labelSelectSource = useText("widgets.selectSource");
+	const filters = useMemo(() => sources.find((source) => source.value === config?.source), [sources, config])?.filters || [];
+	const hasFilters = filters.length !== 0;
+	const onChangeInput = useCallback((updatedConfig) => onChange(updatedConfig), [onChange]);
+	const onSourceInput = useCallback((processed) => {
+		const filterNames = filters.map((filter) => filter.name);
+		const filterLabels = filterNames.map((name) => `${name}Label`);
+		return onChange(omit(processed, [
+			...filterNames,
+			...filterLabels,
+			"sort"
+		]));
+	}, [filters, onChange]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(CommonConfig, {
+			onChange: onChangeInput,
+			config
+		}),
+		/* @__PURE__ */ jsx(InputConfig, {
+			label: labelSelectSource,
+			name: "source",
+			onChange: onSourceInput,
+			config,
+			options: sources
+		}),
+		hasFilters && filters.map((filter) => {
+			const { name, label, placeholder, input, options, isMulti } = filter;
+			return /* @__PURE__ */ jsx(InputConfig, {
+				name,
+				label,
+				placeholder,
+				input,
+				options,
+				isMulti,
+				onChange,
+				config
+			}, name);
+		})
+	] });
+};
+//#endregion
+export { MultiConfig };

package/ui/Modules/Dashboard/components/Config/components/CommonConfig.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+import { ConfigProps } from '../../../types';
+declare const CommonConfig: ({ onChange, config }: ConfigProps) => JSX.Element;
+export default CommonConfig;

package/ui/Modules/Dashboard/components/Config/components/CommonConfig.js

@@ -0,0 +1,20 @@
+import styles_default from "../../../styles.js";
+import Text from "../../Text/Text.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Config/components/CommonConfig.tsx
+const CommonConfig = ({ onChange, config }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(styles_default.ConfigRow, { children: [/* @__PURE__ */ jsxs(styles_default.ConfigLabel, { children: [
+	/* @__PURE__ */ jsx(Text, { code: "widgets.name" }),
+	":",
+	" "
+] }), /* @__PURE__ */ jsx(styles_default.ConfigInput, { children: /* @__PURE__ */ jsx(styles_default.Input, {
+	name: "name",
+	onChange: (e) => onChange({
+		...config,
+		[e.target.name]: e.target.value
+	}),
+	defaultValue: config?.name || "",
+	type: "text"
+}) })] }) });
+//#endregion
+export { CommonConfig as default };

package/ui/Modules/Dashboard/components/Config/components/InputConfig.d.ts

@@ -0,0 +1,5 @@
+import type { JSX } from 'react';
+import { ConfigProps, LayoutWidgetFilter } from '../../../types';
+type InputConfigProps = ConfigProps & LayoutWidgetFilter;
+declare const InputConfig: ({ onChange, config, label, name, input, isMulti, options, placeholder }: InputConfigProps) => JSX.Element;
+export default InputConfig;