@widergy/energy-ui 3.121.3 → 3.122.0

package/dist/components/UTFilterGrouping/stories/fixtures.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filterItemsFixture = void 0;
+var _test = require("@storybook/test");
+var _testIds = require("../../../constants/testIds");
+var _constants = _interopRequireDefault(require("./constants.json"));
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  CLIENT_FILTER,
+  DELETE_BUTTON,
+  DELETE_BUTTON_TOOLTIP,
+  EDIT_BUTTON,
+  EDIT_BUTTON_TOOLTIP,
+  NAME,
+  NAME_CONTAINER,
+  PINNED,
+  USER_FILTER
+} = _testIds.ID_CONSTANTS;
+const {
+  MISC
+} = _constants.default;
+const {
+  HOVERABLE_KEY,
+  HOVERABLE_VALUE,
+  HTML_ELEMENTS
+} = MISC;
+const {
+  ARTICLE,
+  DIV
+} = HTML_ELEMENTS;
+const filterItemsFixture = async _ref => {
+  let {
+    args,
+    canvas,
+    category,
+    existingIds,
+    filters,
+    step,
+    suiteTitle,
+    testIds,
+    tooltipsContentMap
+  } = _ref;
+  const {
+    handleSelectFilter,
+    onDeleteFilterGrouping,
+    onEditFilterGrouping
+  } = args;
+  const {
+    popperLabel,
+    popperTitle
+  } = testIds;
+  const {
+    deleteButton,
+    editButton
+  } = tooltipsContentMap;
+  await step(suiteTitle, async () => {
+    if (filters.length === 0) {
+      return;
+    }
+    for (let index = 0; index < filters.length; index++) {
+      const filter = filters[index];
+      const {
+        description,
+        name: itemName,
+        pinned
+      } = filter;
+      // eslint-disable-next-line no-await-in-loop
+      await step("Item: ".concat(itemName), async () => {
+        const targetItemName = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(pinned ? CLIENT_FILTER : USER_FILTER) && id.includes(NAME) && id.includes(index) && !id.includes(NAME_CONTAINER)));
+        await step('Initial content', async () => {
+          if (pinned) {
+            const targetPinnedIcon = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(PINNED) && id.includes(index)));
+            (0, _test.expect)(targetPinnedIcon).toBeInTheDocument();
+          }
+          (0, _test.expect)(targetItemName.innerText).toBe(itemName);
+          (0, _test.expect)(targetItemName).toBeInTheDocument();
+        });
+        const targetItemNameContainer = targetItemName.closest(ARTICLE);
+        const targetItemTitleContainer = targetItemName.closest(DIV);
+        await step('Select item', async () => {
+          await _test.userEvent.click(targetItemTitleContainer);
+          (0, _test.expect)(handleSelectFilter).toHaveBeenCalled();
+          (0, _test.expect)(handleSelectFilter).toHaveBeenCalledWith(filter);
+        });
+        if (!pinned) {
+          targetItemNameContainer.setAttribute(HOVERABLE_KEY, HOVERABLE_VALUE);
+          await (0, _utils.delay)(500);
+          const targetEditButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(EDIT_BUTTON) && id.includes(index)));
+          const targetDeleteButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(DELETE_BUTTON) && id.includes(index)));
+          await step('Actions', async () => {
+            await step('Edit', async () => {
+              await _test.userEvent.click(targetEditButton);
+              (0, _test.expect)(targetEditButton).toBeVisible();
+              (0, _test.expect)(onEditFilterGrouping).toHaveBeenCalled();
+              (0, _test.expect)(onEditFilterGrouping).toHaveBeenCalledWith(filter);
+            });
+            await step('Delete', async () => {
+              await _test.userEvent.click(targetDeleteButton);
+              (0, _test.expect)(targetDeleteButton).toBeVisible();
+              (0, _test.expect)(onDeleteFilterGrouping).toHaveBeenCalled();
+              (0, _test.expect)(onDeleteFilterGrouping).toHaveBeenCalledWith(filter);
+            });
+          });
+        }
+        await step('Hovers', async () => {
+          if (description || itemName.length > 20) {
+            await step('Popper hover', async () => {
+              await _test.userEvent.hover(targetItemName);
+              await (0, _utils.delay)(500);
+              let targetPopperLabel;
+              if (description) {
+                targetPopperLabel = _test.screen.getByTestId(popperLabel);
+                (0, _test.expect)(targetPopperLabel).toBeVisible();
+                (0, _test.expect)(targetPopperLabel.innerText).toBe(description);
+              }
+              const targetPopperTitle = _test.screen.getByTestId(popperTitle);
+              (0, _test.expect)(targetPopperTitle).toBeVisible();
+              (0, _test.expect)(targetPopperTitle.innerText).toBe(itemName);
+              await _test.userEvent.unhover(targetItemName);
+              (0, _test.expect)(targetPopperTitle).not.toBeVisible();
+              if (description) {
+                (0, _test.expect)(targetPopperLabel).not.toBeVisible();
+              }
+            });
+          }
+          if (!pinned) {
+            const targetEditButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(EDIT_BUTTON) && id.includes(index)));
+            const targetDeleteButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(DELETE_BUTTON) && id.includes(index)));
+            await step('Actions hover', async () => {
+              await step('Edit', async () => {
+                await _test.userEvent.hover(targetEditButton);
+                await (0, _utils.delay)(500);
+                const targetEditButtonTooltip = _test.screen.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(EDIT_BUTTON_TOOLTIP) && id.includes(index)));
+                (0, _test.expect)(targetEditButtonTooltip).toBeVisible();
+                (0, _test.expect)(targetEditButtonTooltip.innerText).toBe(editButton);
+                await _test.userEvent.unhover(targetEditButton);
+                await (0, _utils.delay)(500);
+                (0, _test.expect)(targetEditButtonTooltip).not.toBeVisible();
+              });
+              await step('Delete', async () => {
+                await _test.userEvent.hover(targetDeleteButton);
+                await (0, _utils.delay)(500);
+                const targetDeleteButtonTooltip = _test.screen.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(DELETE_BUTTON_TOOLTIP) && id.includes(index)));
+                (0, _test.expect)(targetDeleteButtonTooltip).toBeVisible();
+                (0, _test.expect)(targetDeleteButtonTooltip.innerText).toBe(deleteButton);
+                await _test.userEvent.unhover(targetDeleteButton);
+                await (0, _utils.delay)(500);
+                (0, _test.expect)(targetDeleteButtonTooltip).not.toBeVisible();
+              });
+            });
+          }
+        });
+        targetItemNameContainer.removeAttribute(HOVERABLE_KEY);
+      });
+    }
+  });
+};
+exports.filterItemsFixture = filterItemsFixture;

package/dist/components/UTFilterGrouping/stories/props.schema.json

@@ -0,0 +1,163 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://utfiltergrouping.dev/schemas/categories.schema.json",
+  "title": "UTFilterGrouping Configuration",
+  "type": "object",
+  "description": "Complete configuration for UTFilterGrouping component",
+  "required": ["CATEGORIES", "CATEGORIES_CONFIG"],
+  "additionalProperties": true,
+  "properties": {
+    "CATEGORIES": {
+      "type": "array",
+      "description": "Array of categories with their filters",
+      "items": {
+        "type": "object",
+        "required": ["id", "category", "name", "filters"],
+        "additionalProperties": false,
+        "properties": {
+          "id": {
+            "type": "number",
+            "description": "Unique identifier for the category"
+          },
+          "category": {
+            "type": "string",
+            "description": "Category code (e.g., 'procedure', 'claim')"
+          },
+          "name": {
+            "type": "string",
+            "description": "Display name for the category"
+          },
+          "filters": {
+            "type": "array",
+            "description": "Array of filters within this category",
+            "items": {
+              "type": "object",
+              "required": ["id", "name", "category", "order", "pinned", "visible"],
+              "additionalProperties": false,
+              "properties": {
+                "id": {
+                  "type": "number",
+                  "description": "Unique identifier for the filter"
+                },
+                "name": {
+                  "type": "string",
+                  "description": "Display name for the filter"
+                },
+                "category": {
+                  "type": "string",
+                  "description": "Category code this filter belongs to"
+                },
+                "description": {
+                  "type": "string",
+                  "description": "Optional description for the filter"
+                },
+                "order": {
+                  "type": "number",
+                  "description": "Order position of the filter within the category"
+                },
+                "pinned": {
+                  "type": "boolean",
+                  "description": "Whether the filter is pinned"
+                },
+                "visible": {
+                  "type": "boolean",
+                  "description": "Whether the filter is visible"
+                },
+                "backoffice_user_id": {
+                  "type": ["string", "null"],
+                  "description": "ID of the backoffice user who created this filter, or null for system filters"
+                },
+                "filter_params": {
+                  "type": "array",
+                  "description": "Array of filter parameters",
+                  "items": {
+                    "type": "object",
+                    "additionalProperties": true,
+                    "properties": {
+                      "key": {
+                        "type": "string",
+                        "description": "Parameter key"
+                      },
+                      "values": {
+                        "type": "string",
+                        "description": "Parameter values"
+                      },
+                      "assigned_user": {
+                        "type": "null",
+                        "description": "Assigned user for the filter"
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "CATEGORIES_CONFIG": {
+      "type": "object",
+      "description": "Configuration for category icons and colors",
+      "additionalProperties": {
+        "type": "object",
+        "required": ["icon", "avatarPalette"],
+        "properties": {
+          "icon": {
+            "type": "string",
+            "description": "Icon name for the category"
+          },
+          "avatarPalette": {
+            "type": "array",
+            "description": "Array of color configurations for the category avatar",
+            "items": {
+              "type": "object",
+              "required": ["color", "backgroundColor", "colorTheme"],
+              "properties": {
+                "color": {
+                  "type": "string",
+                  "description": "Text color"
+                },
+                "backgroundColor": {
+                  "type": "string",
+                  "description": "Background color (CSS variable or color value)"
+                },
+                "colorTheme": {
+                  "type": "string",
+                  "description": "Color theme name"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "TOOLTIPS_CONTENT_MAP": {
+      "type": "object",
+      "description": "Map of tooltip content for various UI elements",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
+    "DATA_TEST_ID": {
+      "type": "string",
+      "description": "Base data-testid for the component"
+    },
+    "NO_FILTERS_TITLE": {
+      "type": "string",
+      "description": "Title to display when there are no filters"
+    },
+    "NO_FILTERS_TEXT": {
+      "type": "string",
+      "description": "Text to display when there are no filters"
+    },
+    "PANEL_TITLE": {
+      "type": "string",
+      "description": "Title for the filter panel"
+    },
+    "POSITION": {
+      "type": "string",
+      "enum": ["left", "right"],
+      "description": "Position of the filter panel"
+    }
+  }
+}

package/dist/components/UTFilterGrouping/stories/styles.module.scss

@@ -0,0 +1,19 @@
+.storyContainer {
+  display: flex;
+  height: calc(100vh - 2rem);
+  width: calc(100vw - 2rem);
+}
+
+.defaultContainer {
+  background-color: #EABFFF;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  width: 100%;
+}
+
+.bodyPlaceholder {
+  width: 100%;
+} 

package/dist/components/UTFilterGrouping/stories/tests.js

@@ -0,0 +1,250 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UTFilterGroupingTests = void 0;
+var _test = require("@storybook/test");
+var _testIds = require("../../../constants/testIds");
+var _constants = _interopRequireDefault(require("./constants.json"));
+var _utils = require("./utils");
+var _fixtures = require("./fixtures");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable no-await-in-loop */
+/* eslint-disable no-restricted-syntax */
+
+const {
+  AVATAR,
+  CLIENT_FILTER,
+  COLLAPSE_BUTTON,
+  DESCRIPTION,
+  EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY,
+  ICON,
+  LABEL,
+  NAME,
+  NAME_CONTAINER,
+  PERSISTENT_FILTER,
+  TITLE
+} = _testIds.ID_CONSTANTS;
+const {
+  CATEGORIES,
+  MISC,
+  TEST_IDS,
+  TOOLTIPS_CONTENT_MAP
+} = _constants.default;
+const {
+  HOVERABLE_KEY,
+  HOVERABLE_VALUE,
+  HTML_ELEMENTS,
+  SEARCH_STRING,
+  SHIELD_KEY,
+  SHIELD_VALUE,
+  TESTING_SHIELD
+} = MISC;
+const {
+  HEADER
+} = HTML_ELEMENTS;
+const {
+  expandButton,
+  headerCollapseButton,
+  headerCollapseButtonTooltip,
+  headerSearchButton,
+  headerSearchButtonTooltip,
+  headerSearchField,
+  headerSearchFieldCustomAction,
+  headerTitle
+} = TEST_IDS;
+const UTFilterGroupingTests = async _ref => {
+  let {
+    args,
+    canvasElement,
+    step
+  } = _ref;
+  const testingShield = _test.screen.getByTestId(TESTING_SHIELD);
+  testingShield.setAttribute(SHIELD_KEY, SHIELD_VALUE);
+  const existingIds = (0, _utils.createExistingIds)(CATEGORIES, TEST_IDS);
+  const canvas = (0, _test.within)(canvasElement);
+  await (0, _utils.delay)(500);
+  await step('Verify initial state', async () => {
+    const filteredIds = [...existingIds].filter(id => !(0, _utils.idBelongsToHoverableItem)(id) && !(0, _utils.idBelongsToCollapsedItem)(id) && !(0, _utils.idBelongsToNonStartItem)(id));
+    for (const id of filteredIds) {
+      const element = canvas.getByTestId(id);
+      (0, _test.expect)(element).toBeInTheDocument();
+    }
+  });
+  await step('Header', async () => {
+    const title = canvas.getByTestId(headerTitle);
+    const hoverableParent = title.closest(HEADER);
+    hoverableParent.setAttribute(HOVERABLE_KEY, HOVERABLE_VALUE);
+    await (0, _utils.delay)(500);
+    await step('Hovers', async () => {
+      const searchTargetElement = canvas.getByTestId(headerSearchButton);
+      const collapseTargetElement = canvas.getByTestId(headerCollapseButton);
+      await step('Main hover', async () => {
+        await (0, _test.expect)(searchTargetElement).toBeVisible();
+        await (0, _test.expect)(collapseTargetElement).toBeVisible();
+      });
+      await step('Actions Hover', async () => {
+        await step('Search', async () => {
+          await _test.userEvent.hover(searchTargetElement);
+          await (0, _utils.delay)(500);
+          const searchTargetTooltip = canvas.getByTestId(headerSearchButtonTooltip);
+          await (0, _test.expect)(searchTargetTooltip).toBeVisible();
+          await _test.userEvent.unhover(searchTargetElement);
+        });
+        await step('Collapse', async () => {
+          await _test.userEvent.hover(collapseTargetElement);
+          await (0, _utils.delay)(500);
+          const collapseTargetTooltip = canvas.getByTestId(headerCollapseButtonTooltip);
+          await (0, _test.expect)(collapseTargetTooltip).toBeVisible();
+          await _test.userEvent.unhover(collapseTargetElement);
+        });
+      });
+    });
+    await step('Actions', async () => {
+      await step('Search action', async () => {
+        const randomFilterId = existingIds.find(id => id.includes(CLIENT_FILTER) && id.includes(NAME));
+        const targetClientFilter = canvas.getByTestId(randomFilterId);
+        const targetClientFilterText = targetClientFilter.innerText;
+        const searchTargetElement = canvas.getByTestId(headerSearchButton);
+        await _test.userEvent.click(searchTargetElement);
+        const targetField = canvas.getByTestId(headerSearchField);
+        (0, _test.expect)(targetField).toBeVisible();
+        await _test.userEvent.type(targetField, SEARCH_STRING);
+        await (0, _utils.delay)(500);
+        (0, _test.expect)(targetClientFilter).not.toBeInTheDocument();
+        await _test.userEvent.clear(targetField);
+        await _test.userEvent.type(targetField, targetClientFilterText);
+        (0, _test.expect)(canvas.getByTestId(randomFilterId)).toBeInTheDocument();
+        const customAction = canvas.getByTestId(headerSearchFieldCustomAction);
+        await _test.userEvent.click(customAction);
+        (0, _test.expect)(targetField).not.toBeInTheDocument();
+        (0, _test.expect)(canvas.getByTestId(randomFilterId)).toBeInTheDocument();
+      });
+      await step('Collapse action', async () => {
+        const collapseTargetElement = canvas.getByTestId(headerCollapseButton);
+        await _test.userEvent.click(collapseTargetElement);
+        const targetExpandButton = canvas.getByTestId(expandButton);
+        (0, _test.expect)(targetExpandButton).toBeInTheDocument();
+      });
+    });
+    hoverableParent.removeAttribute(HOVERABLE_KEY);
+  });
+  await step('Collapsed panel', async () => {
+    const targetExpandButton = canvas.getByTestId(expandButton);
+    await step('Content exists', async () => {
+      (0, _test.expect)(targetExpandButton).toBeInTheDocument();
+    });
+    await step('Action', async () => {
+      await _test.userEvent.click(targetExpandButton);
+      await (0, _utils.delay)(500);
+      const collapseButton = canvas.getByTestId(headerCollapseButton);
+      (0, _test.expect)(targetExpandButton).not.toBeInTheDocument();
+      (0, _test.expect)(collapseButton).toBeInTheDocument();
+    });
+  });
+  for (const {
+    category,
+    filters,
+    name
+  } of CATEGORIES) {
+    await step("Category: ".concat(category), async () => {
+      await step('Header', async () => {
+        const targetAvatar = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(AVATAR)));
+        const targetTitle = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(LABEL)));
+        const targetAvatarParent = targetAvatar.closest(HEADER);
+        await step('Initial content', async () => {
+          (0, _test.expect)(targetAvatar).toBeInTheDocument();
+          (0, _test.expect)(targetTitle.innerText).toBe(name);
+          (0, _test.expect)(targetTitle).toBeInTheDocument();
+        });
+        _test.userEvent.hover(targetAvatarParent);
+        await (0, _utils.delay)(500);
+        const targetCollapseCategoryButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(COLLAPSE_BUTTON)));
+        await step('Category hover', async () => {
+          (0, _test.expect)(targetCollapseCategoryButton).toBeInTheDocument();
+        });
+        await step('Category collapse', async () => {
+          await _test.userEvent.click(targetCollapseCategoryButton);
+          const targetUserFilter = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(CLIENT_FILTER) && id.includes(NAME)));
+          await (0, _utils.delay)(500);
+          (0, _test.expect)(targetUserFilter).not.toBeVisible();
+          await _test.userEvent.click(targetCollapseCategoryButton);
+          await (0, _utils.delay)(500);
+          (0, _test.expect)(targetUserFilter).toBeVisible();
+        });
+        _test.userEvent.unhover(targetAvatarParent);
+      });
+      const clientFilters = filters.filter(_ref2 => {
+        let {
+          pinned
+        } = _ref2;
+        return pinned;
+      });
+      const userFilters = filters.filter(_ref3 => {
+        let {
+          pinned
+        } = _ref3;
+        return !pinned;
+      });
+      await (0, _fixtures.filterItemsFixture)({
+        args,
+        canvas,
+        category,
+        existingIds,
+        filters: clientFilters,
+        step,
+        suiteTitle: 'Client filters',
+        testIds: TEST_IDS,
+        tooltipsContentMap: TOOLTIPS_CONTENT_MAP
+      });
+      await (0, _fixtures.filterItemsFixture)({
+        args,
+        canvas,
+        category,
+        existingIds,
+        filters: userFilters,
+        step,
+        suiteTitle: 'User filters',
+        testIds: TEST_IDS,
+        tooltipsContentMap: TOOLTIPS_CONTENT_MAP
+      });
+      if (filters.filter(_ref4 => {
+        let {
+          pinned
+        } = _ref4;
+        return pinned;
+      }).length === 0) {
+        await step('Category without user filters', async () => {
+          const targetEmptyCategoryIcon = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY) && id.includes(ICON)));
+          const targetEmptyCategoryTitle = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY) && id.includes(TITLE)));
+          const targetEmptyCategoryDescription = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY) && id.includes(DESCRIPTION)));
+          (0, _test.expect)(targetEmptyCategoryIcon).toBeVisible();
+          (0, _test.expect)(targetEmptyCategoryTitle).toBeVisible();
+          (0, _test.expect)(targetEmptyCategoryDescription).toBeVisible();
+        });
+      }
+      await step('Collapsed category with selected item', async () => {
+        const targetAvatar = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(AVATAR)));
+        const targetAvatarParent = targetAvatar.closest(HEADER);
+        const selectedClientFilter = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(CLIENT_FILTER) && id.includes(NAME_CONTAINER) && id.includes('0')));
+        await _test.userEvent.click(selectedClientFilter);
+        await _test.userEvent.hover(targetAvatarParent);
+        await (0, _utils.delay)(500);
+        const targetCollapseCategoryButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(COLLAPSE_BUTTON)));
+        await _test.userEvent.click(targetCollapseCategoryButton);
+        await (0, _utils.delay)(500);
+        const persistentClientFilter = canvas.getByTestId(existingIds.find(id => id.includes(PERSISTENT_FILTER) && id.includes(category)));
+        (0, _test.expect)(selectedClientFilter).not.toBeVisible();
+        (0, _test.expect)(persistentClientFilter).toBeVisible();
+        await _test.userEvent.click(targetCollapseCategoryButton);
+        await (0, _utils.delay)(500);
+        (0, _test.expect)(selectedClientFilter).toBeVisible();
+        (0, _test.expect)(persistentClientFilter).not.toBeVisible();
+        await _test.userEvent.unhover(targetAvatarParent);
+      });
+    });
+  }
+  testingShield.removeAttribute(SHIELD_KEY);
+};
+exports.UTFilterGroupingTests = UTFilterGroupingTests;