@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTShortcutPanel/stories/fixtures.js

@@ -0,0 +1,154 @@
+import { expect, screen, userEvent } from '@storybook/test';
+import { ID_CONSTANTS } from '../../../constants/testIds';
+import constants from './constants.json';
+import { delay } from './utils';
+const {
+  CLIENT_FILTER,
+  DELETE_BUTTON,
+  DELETE_BUTTON_TOOLTIP,
+  EDIT_BUTTON,
+  EDIT_BUTTON_TOOLTIP,
+  NAME,
+  NAME_CONTAINER,
+  PINNED,
+  USER_FILTER
+} = ID_CONSTANTS;
+const {
+  MISC
+} = constants;
+const {
+  HOVERABLE_KEY,
+  HOVERABLE_VALUE,
+  HTML_ELEMENTS
+} = MISC;
+const {
+  ARTICLE,
+  DIV
+} = HTML_ELEMENTS;
+export 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)));
+            expect(targetPinnedIcon).toBeInTheDocument();
+          }
+          expect(targetItemName.innerText).toBe(itemName);
+          expect(targetItemName).toBeInTheDocument();
+        });
+        const targetItemNameContainer = targetItemName.closest(ARTICLE);
+        const targetItemTitleContainer = targetItemName.closest(DIV);
+        await step('Select item', async () => {
+          await userEvent.click(targetItemTitleContainer);
+          expect(handleSelectFilter).toHaveBeenCalled();
+          expect(handleSelectFilter).toHaveBeenCalledWith(filter);
+        });
+        if (!pinned) {
+          targetItemNameContainer.setAttribute(HOVERABLE_KEY, HOVERABLE_VALUE);
+          await 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 userEvent.click(targetEditButton);
+              expect(targetEditButton).toBeVisible();
+              expect(onEditFilterGrouping).toHaveBeenCalled();
+              expect(onEditFilterGrouping).toHaveBeenCalledWith(filter);
+            });
+            await step('Delete', async () => {
+              await userEvent.click(targetDeleteButton);
+              expect(targetDeleteButton).toBeVisible();
+              expect(onDeleteFilterGrouping).toHaveBeenCalled();
+              expect(onDeleteFilterGrouping).toHaveBeenCalledWith(filter);
+            });
+          });
+        }
+        await step('Hovers', async () => {
+          if (description || itemName.length > 20) {
+            await step('Popper hover', async () => {
+              await userEvent.hover(targetItemName);
+              await delay(500);
+              let targetPopperLabel;
+              if (description) {
+                targetPopperLabel = screen.getByTestId(popperLabel);
+                expect(targetPopperLabel).toBeVisible();
+                expect(targetPopperLabel.innerText).toBe(description);
+              }
+              const targetPopperTitle = screen.getByTestId(popperTitle);
+              expect(targetPopperTitle).toBeVisible();
+              expect(targetPopperTitle.innerText).toBe(itemName);
+              await userEvent.unhover(targetItemName);
+              expect(targetPopperTitle).not.toBeVisible();
+              if (description) {
+                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 userEvent.hover(targetEditButton);
+                await delay(500);
+                const targetEditButtonTooltip = screen.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(EDIT_BUTTON_TOOLTIP) && id.includes(index)));
+                expect(targetEditButtonTooltip).toBeVisible();
+                expect(targetEditButtonTooltip.innerText).toBe(editButton);
+                await userEvent.unhover(targetEditButton);
+                await delay(500);
+                expect(targetEditButtonTooltip).not.toBeVisible();
+              });
+              await step('Delete', async () => {
+                await userEvent.hover(targetDeleteButton);
+                await delay(500);
+                const targetDeleteButtonTooltip = screen.getByTestId(existingIds.find(id => id.includes(category) && id.includes(USER_FILTER) && id.includes(DELETE_BUTTON_TOOLTIP) && id.includes(index)));
+                expect(targetDeleteButtonTooltip).toBeVisible();
+                expect(targetDeleteButtonTooltip.innerText).toBe(deleteButton);
+                await userEvent.unhover(targetDeleteButton);
+                await delay(500);
+                expect(targetDeleteButtonTooltip).not.toBeVisible();
+              });
+            });
+          }
+        });
+        targetItemNameContainer.removeAttribute(HOVERABLE_KEY);
+      });
+    }
+  });
+};

package/dist/esm/components/UTShortcutPanel/stories/props.schema.json

@@ -0,0 +1,163 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://UTShortcutPanel.dev/schemas/categories.schema.json",
+  "title": "UTShortcutPanel Configuration",
+  "type": "object",
+  "description": "Complete configuration for UTShortcutPanel 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/esm/components/UTShortcutPanel/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/esm/components/UTShortcutPanel/stories/tests.js

@@ -0,0 +1,242 @@
+/* eslint-disable no-await-in-loop */
+/* eslint-disable no-restricted-syntax */
+
+import { expect, screen, userEvent, within } from '@storybook/test';
+import { ID_CONSTANTS } from '../../../constants/testIds';
+import constants from './constants.json';
+import { createExistingIds, delay, idBelongsToCollapsedItem, idBelongsToHoverableItem, idBelongsToNonStartItem } from './utils';
+import { filterItemsFixture } from './fixtures';
+const {
+  AVATAR,
+  CLIENT_FILTER,
+  COLLAPSE_BUTTON,
+  DESCRIPTION,
+  EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY,
+  ICON,
+  LABEL,
+  NAME,
+  NAME_CONTAINER,
+  PERSISTENT_FILTER,
+  TITLE
+} = ID_CONSTANTS;
+const {
+  CATEGORIES,
+  MISC,
+  TEST_IDS,
+  TOOLTIPS_CONTENT_MAP
+} = constants;
+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;
+export const UTShortcutPanelTests = async _ref => {
+  let {
+    args,
+    canvasElement,
+    step
+  } = _ref;
+  const testingShield = screen.getByTestId(TESTING_SHIELD);
+  testingShield.setAttribute(SHIELD_KEY, SHIELD_VALUE);
+  const existingIds = createExistingIds(CATEGORIES, TEST_IDS);
+  const canvas = within(canvasElement);
+  await delay(500);
+  await step('Verify initial state', async () => {
+    const filteredIds = [...existingIds].filter(id => !idBelongsToHoverableItem(id) && !idBelongsToCollapsedItem(id) && !idBelongsToNonStartItem(id));
+    for (const id of filteredIds) {
+      const element = canvas.getByTestId(id);
+      expect(element).toBeInTheDocument();
+    }
+  });
+  await step('Header', async () => {
+    const title = canvas.getByTestId(headerTitle);
+    const hoverableParent = title.closest(HEADER);
+    hoverableParent.setAttribute(HOVERABLE_KEY, HOVERABLE_VALUE);
+    await delay(500);
+    await step('Hovers', async () => {
+      const searchTargetElement = canvas.getByTestId(headerSearchButton);
+      const collapseTargetElement = canvas.getByTestId(headerCollapseButton);
+      await step('Main hover', async () => {
+        await expect(searchTargetElement).toBeVisible();
+        await expect(collapseTargetElement).toBeVisible();
+      });
+      await step('Actions Hover', async () => {
+        await step('Search', async () => {
+          await userEvent.hover(searchTargetElement);
+          await delay(500);
+          const searchTargetTooltip = canvas.getByTestId(headerSearchButtonTooltip);
+          await expect(searchTargetTooltip).toBeVisible();
+          await userEvent.unhover(searchTargetElement);
+        });
+        await step('Collapse', async () => {
+          await userEvent.hover(collapseTargetElement);
+          await delay(500);
+          const collapseTargetTooltip = canvas.getByTestId(headerCollapseButtonTooltip);
+          await expect(collapseTargetTooltip).toBeVisible();
+          await 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 userEvent.click(searchTargetElement);
+        const targetField = canvas.getByTestId(headerSearchField);
+        expect(targetField).toBeVisible();
+        await userEvent.type(targetField, SEARCH_STRING);
+        await delay(500);
+        expect(targetClientFilter).not.toBeInTheDocument();
+        await userEvent.clear(targetField);
+        await userEvent.type(targetField, targetClientFilterText);
+        expect(canvas.getByTestId(randomFilterId)).toBeInTheDocument();
+        const customAction = canvas.getByTestId(headerSearchFieldCustomAction);
+        await userEvent.click(customAction);
+        expect(targetField).not.toBeInTheDocument();
+        expect(canvas.getByTestId(randomFilterId)).toBeInTheDocument();
+      });
+      await step('Collapse action', async () => {
+        const collapseTargetElement = canvas.getByTestId(headerCollapseButton);
+        await userEvent.click(collapseTargetElement);
+        const targetExpandButton = canvas.getByTestId(expandButton);
+        expect(targetExpandButton).toBeInTheDocument();
+      });
+    });
+    hoverableParent.removeAttribute(HOVERABLE_KEY);
+  });
+  await step('Collapsed panel', async () => {
+    const targetExpandButton = canvas.getByTestId(expandButton);
+    await step('Content exists', async () => {
+      expect(targetExpandButton).toBeInTheDocument();
+    });
+    await step('Action', async () => {
+      await userEvent.click(targetExpandButton);
+      await delay(500);
+      const collapseButton = canvas.getByTestId(headerCollapseButton);
+      expect(targetExpandButton).not.toBeInTheDocument();
+      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 () => {
+          expect(targetAvatar).toBeInTheDocument();
+          expect(targetTitle.innerText).toBe(name);
+          expect(targetTitle).toBeInTheDocument();
+        });
+        userEvent.hover(targetAvatarParent);
+        await delay(500);
+        const targetCollapseCategoryButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(COLLAPSE_BUTTON)));
+        await step('Category hover', async () => {
+          expect(targetCollapseCategoryButton).toBeInTheDocument();
+        });
+        await step('Category collapse', async () => {
+          await userEvent.click(targetCollapseCategoryButton);
+          const targetUserFilter = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(CLIENT_FILTER) && id.includes(NAME)));
+          await delay(500);
+          expect(targetUserFilter).not.toBeVisible();
+          await userEvent.click(targetCollapseCategoryButton);
+          await delay(500);
+          expect(targetUserFilter).toBeVisible();
+        });
+        userEvent.unhover(targetAvatarParent);
+      });
+      const clientFilters = filters.filter(_ref2 => {
+        let {
+          pinned
+        } = _ref2;
+        return pinned;
+      });
+      const userFilters = filters.filter(_ref3 => {
+        let {
+          pinned
+        } = _ref3;
+        return !pinned;
+      });
+      await filterItemsFixture({
+        args,
+        canvas,
+        category,
+        existingIds,
+        filters: clientFilters,
+        step,
+        suiteTitle: 'Client filters',
+        testIds: TEST_IDS,
+        tooltipsContentMap: TOOLTIPS_CONTENT_MAP
+      });
+      await 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)));
+          expect(targetEmptyCategoryIcon).toBeVisible();
+          expect(targetEmptyCategoryTitle).toBeVisible();
+          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 userEvent.click(selectedClientFilter);
+        await userEvent.hover(targetAvatarParent);
+        await delay(500);
+        const targetCollapseCategoryButton = canvas.getByTestId(existingIds.find(id => id.includes(category) && id.includes(COLLAPSE_BUTTON)));
+        await userEvent.click(targetCollapseCategoryButton);
+        await delay(500);
+        const persistentClientFilter = canvas.getByTestId(existingIds.find(id => id.includes(PERSISTENT_FILTER) && id.includes(category)));
+        expect(selectedClientFilter).not.toBeVisible();
+        expect(persistentClientFilter).toBeVisible();
+        await userEvent.click(targetCollapseCategoryButton);
+        await delay(500);
+        expect(selectedClientFilter).toBeVisible();
+        expect(persistentClientFilter).not.toBeVisible();
+        await userEvent.unhover(targetAvatarParent);
+      });
+    });
+  }
+  testingShield.removeAttribute(SHIELD_KEY);
+};