@widergy/energy-ui 3.121.2 → 3.122.0

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

@@ -0,0 +1,315 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TestingSite = exports.Playground = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _test = require("@storybook/test");
+var _utils = require("stories/utils");
+var _UTBodyPlaceholder = _interopRequireDefault(require("../../UTBodyPlaceholder"));
+var _ = _interopRequireDefault(require(".."));
+var _constants = require("../constants");
+var _testIds = require("../../../constants/testIds");
+var _propsSchema = _interopRequireDefault(require("./props.schema.json"));
+var _constants2 = _interopRequireDefault(require("./constants.json"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _tests = require("./tests");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const {
+  filterGrouping
+} = _testIds.TEST_IDS;
+var _default = exports.default = {
+  args: {
+    categories: _constants2.default.CATEGORIES,
+    categoriesConfig: _constants2.default.CATEGORIES_CONFIG,
+    children: undefined,
+    classNames: undefined,
+    dataTestId: _constants2.default.DATA_TEST_ID,
+    handleSelectFilter: (0, _test.fn)(),
+    iconProps: undefined,
+    noFiltersTitle: _constants2.default.NO_FILTERS_TITLE,
+    noFiltersText: _constants2.default.NO_FILTERS_TEXT,
+    onDeleteFilterGrouping: (0, _test.fn)(),
+    onEditFilterGrouping: (0, _test.fn)(),
+    panelTitle: _constants2.default.PANEL_TITLE,
+    position: _constants2.default.POSITION,
+    selectedFilter: undefined,
+    startOpen: true,
+    tooltipsContentMap: _constants2.default.TOOLTIPS_CONTENT_MAP
+  },
+  argTypes: {
+    categories: {
+      control: {
+        type: 'none'
+      },
+      description: 'Data necesaria para renderizar el contenido del panel',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'categoryType[]'
+        }
+      }
+    },
+    categoriesConfig: {
+      control: 'none',
+      description: 'Configuración de iconos y colores para el avatar de cada categoría',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Record<string, categoryConfigType>'
+        }
+      }
+    },
+    children: {
+      control: 'none',
+      description: 'Contenido wrappeado por el componente `UTFilterGrouping`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'node'
+        }
+      }
+    },
+    classNames: {
+      control: 'none',
+      description: 'Clases personalizadas.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Record<string, string>'
+        }
+      }
+    },
+    classes: {
+      control: 'none',
+      description: 'Tema personalizado. Esta prop NO debería ser usada.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Record<string, string>'
+        }
+      }
+    },
+    dataTestId: {
+      control: 'text',
+      description: '`dataTestId` que se usará como base para generar los `ids` de los componentes internos.',
+      table: {
+        defaultValue: {
+          summary: filterGrouping.groupingPanel.collapsedPanelContent.expandButton
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    handleSelectFilter: {
+      action: 'hi',
+      control: 'none',
+      description: 'Función callback que se ejecuta cuando se selecciona un filtro.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Function'
+        }
+      }
+    },
+    iconProps: {
+      control: 'select',
+      options: ['default', 'IconX, gray, 18', 'IconHome, error, 30'],
+      mapping: {
+        default: undefined,
+        'IconX, gray, 18': {
+          name: 'IconX',
+          colorTheme: 'gray',
+          size: 18
+        },
+        'IconHome, error, 30': {
+          name: 'IconHome',
+          colorTheme: 'error',
+          size: 30
+        }
+      },
+      description: 'Props para renderizar un icono custom cuando el paner está cerrado.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'iconPropTypes'
+        }
+      }
+    },
+    noFiltersTitle: {
+      control: 'text',
+      description: 'Título para el componente de filtros vacíos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    noFiltersText: {
+      control: 'text',
+      description: 'Texto para el componente de filtros vacíos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onDeleteFilterGrouping: {
+      control: 'none',
+      description: 'Función callback que se ejecuta cuando se presiona el botón de eliminar un filtro.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Function'
+        }
+      }
+    },
+    onEditFilterGrouping: {
+      control: 'none',
+      description: 'Función callback que se ejecuta cuando se presiona el botón de editar un filtro.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Function'
+        }
+      }
+    },
+    panelTitle: {
+      control: 'text',
+      description: 'Título del panel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    position: {
+      control: 'radio',
+      description: 'Posición del panel y la barra lateral.',
+      options: Object.values(_constants.PANEL_POSITIONS),
+      table: {
+        defaultValue: {
+          summary: 'left'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(Object.values(_constants.PANEL_POSITIONS))
+        }
+      }
+    },
+    selectedFilter: {
+      control: 'none',
+      description: 'Filtro seleccionado.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'filterType'
+        }
+      }
+    },
+    startOpen: {
+      control: 'boolean',
+      description: 'Indica si el panel se renderiza abierto.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    tooltipsContentMap: {
+      control: 'none',
+      description: 'Mapa de contenido para los tooltips.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Record<string, string>'
+        }
+      }
+    }
+  },
+  component: _.default,
+  parameters: {
+    jsonschema: {
+      schema: _propsSchema.default
+    },
+    controls: {
+      exclude: ['categories', 'categoriesConfig', 'children', 'classNames', 'classes', 'handleSelectFilter', 'onDeleteFilterGrouping', 'onEditFilterGrouping', 'selectedFilter', 'tooltipsContentMap']
+    },
+    docs: {
+      description: {
+        component: 'Panel de filtros rápidos, con búsqueda y acciones de edición y eliminación de filtros y categorías colapsables.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTFilterGrouping'
+};
+const Playground = exports.Playground = {
+  name: 'Playground',
+  parameters: {
+    backgrounds: {
+      default: 'Oscuro'
+    }
+  },
+  render: args => {
+    const [selectedFilter, setSelectedFilter] = (0, _react.useState)(args.selectedFilter);
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("section", {
+      className: _stylesModule.default.storyContainer
+    }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+      handleSelectFilter: filter => {
+        args.handleSelectFilter(filter);
+        setSelectedFilter(filter);
+      },
+      selectedFilter: selectedFilter
+    }), /*#__PURE__*/_react.default.createElement("section", {
+      className: _stylesModule.default.defaultContainer
+    }, /*#__PURE__*/_react.default.createElement(_UTBodyPlaceholder.default, {
+      classNames: {
+        bodyPlaceholder: _stylesModule.default.bodyPlaceholder
+      }
+    })))), /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "testingShield"
+    }));
+  }
+};
+const TestingSite = exports.TestingSite = {
+  ...Playground,
+  name: 'Test Site',
+  play: _tests.UTFilterGroupingTests
+};

package/dist/components/UTFilterGrouping/stories/constants.json

@@ -0,0 +1,282 @@
+{
+  "CATEGORIES": [
+    {
+      "category": "procedure",
+      "filters": [
+        {
+          "backoffice_user_id": null,
+          "category": "procedure",
+          "description": "Descripción moderadamente larga",
+          "filter_params": [
+            {
+              "assigned_user": null
+            }
+          ],
+          "id": 1,
+          "name": "Sin Asignar",
+          "order": 1,
+          "pinned": true,
+          "visible": true
+        },
+        {
+          "backoffice_user_id": null,
+          "category": "procedure",
+          "description": "Filtro",
+          "filter_params": [],
+          "id": 7,
+          "name": "Todos Asignados",
+          "order": 2,
+          "pinned": true,
+          "visible": true
+        },
+        {
+          "backoffice_user_id": "2",
+          "category": "procedure",
+          "description": "",
+          "filter_params": [
+            {
+              "key": "Key",
+              "values": "Values"
+            },
+            {
+              "key": "Key",
+              "values": "Values"
+            }
+          ],
+          "id": 3,
+          "name": "Filtro Custom Muy Largo",
+          "order": 1,
+          "pinned": false,
+          "visible": true
+        },
+        {
+          "backoffice_user_id": "2",
+          "category": "procedure",
+          "description": "",
+          "filter_params": [
+            {
+              "key": "Key",
+              "values": "Values"
+            },
+            {
+              "key": "Key",
+              "values": "Values"
+            }
+          ],
+          "id": 4,
+          "name": "Filtro Custom 1",
+          "order": 2,
+          "pinned": false,
+          "visible": true
+        },
+        {
+          "backoffice_user_id": "2",
+          "category": "procedure",
+          "description": "Custom",
+          "filter_params": [
+            {
+              "key": "Key",
+              "values": "Values"
+            },
+            {
+              "key": "Key",
+              "values": "Values"
+            }
+          ],
+          "id": 5,
+          "name": "Filtro Custom 2",
+          "order": 3,
+          "pinned": false,
+          "visible": true
+        },
+        {
+          "backoffice_user_id": "2",
+          "category": "procedure",
+          "description": "Descripcion",
+          "filter_params": [
+            {
+              "key": "Key",
+              "values": "Values"
+            },
+            {
+              "key": "Key",
+              "values": "Values"
+            }
+          ],
+          "id": 6,
+          "name": "Filtro Custom 3",
+          "order": 4,
+          "pinned": false,
+          "visible": true
+        }
+      ],
+      "id": 1,
+      "name": "TRÁMITES"
+    },
+    {
+      "category": "claim",
+      "filters": [
+        {
+          "backoffice_user_id": null,
+          "category": "claim",
+          "description": "Reclamos",
+          "filter_params": [
+            {
+              "assigned_user": null
+            }
+          ],
+          "id": 2,
+          "name": "Sin Asignar",
+          "order": 1,
+          "pinned": true,
+          "visible": true
+        },
+        {
+          "backoffice_user_id": null,
+          "category": "claim",
+          "description": "Filtro Cliente",
+          "filter_params": [],
+          "id": 8,
+          "name": "Cliente",
+          "order": 2,
+          "pinned": true,
+          "visible": true
+        },
+        {
+          "backoffice_user_id": "2",
+          "category": "claim",
+          "description": "Descripcion",
+          "filter_params": [
+            {
+              "key": "Key",
+              "values": "Values"
+            },
+            {
+              "key": "Key",
+              "values": "Values"
+            }
+          ],
+          "id": 9,
+          "name": "Filtro Custom 4",
+          "order": 1,
+          "pinned": false,
+          "visible": true
+        }
+      ],
+      "id": 2,
+      "name": "RECLAMOS"
+    },
+    {
+      "category": "test",
+      "filters": [
+        {
+          "backoffice_user_id": null,
+          "category": "test",
+          "description": "Categoría de prueba",
+          "filter_params": [
+            {
+              "assigned_user": null
+            }
+          ],
+          "id": 2,
+          "name": "Sin Asignar",
+          "order": 1,
+          "pinned": true,
+          "visible": true
+        }
+      ],
+      "id": 3,
+      "name": "PRUEBA"
+    }
+  ],
+  "CATEGORIES_CONFIG": {
+    "procedure": {
+      "avatarPalette": [
+        {
+          "backgroundColor": "var(--identitySolidTone1)",
+          "color": "light",
+          "colorTheme": "light"
+        }
+      ],
+      "icon": "IconFileDescription"
+    },
+    "claim": {
+      "avatarPalette": [
+        {
+          "backgroundColor": "var(--identitySolidTone3)",
+          "color": "light",
+          "colorTheme": "light"
+        }
+      ],
+      "icon": "IconMessageExclamation"
+    },
+    "test": {
+      "avatarPalette": [
+        {
+          "backgroundColor": "var(--identitySolidTone4)",
+          "color": "light",
+          "colorTheme": "light"
+        }
+      ],
+      "icon": "IconPencil"
+    }
+  },
+  "DATA_TEST_ID": "customCollapsedId",
+  "MISC": {
+    "HOVERABLE_KEY": "data-test-hover",
+    "HOVERABLE_VALUE": "true",
+    "HTML_ELEMENTS": {
+      "ARTICLE": "article",
+      "DIV": "div",
+      "HEADER": "header"
+    },
+    "INDEX_PLACEHOLDER": "{{index}}",
+    "SEARCH_STRING": "test",
+    "SHIELD_KEY": "style",
+    "SHIELD_VALUE": "height: 100vh; left: 0; position: fixed; top: 0; width: 100vw; z-index: 9999;",
+    "TESTING_SHIELD": "testingShield"
+  },
+  "NO_FILTERS_TEXT": "Agrega uno para tener un acceso desde este panel.",
+  "NO_FILTERS_TITLE": "No hay filtros personalizados",
+  "PANEL_TITLE": "Filtros rápidos",
+  "POSITION": "left",
+  "TEST_IDS": {
+    "categoryHeaderAvatar": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.avatar",
+    "categoryHeaderCollapse": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.collapseButton",
+    "categoryHeaderTitle": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.label",
+    "categoryItemClientDeleteButton": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryItem.clientFilter.{{index}}.deleteButton",
+    "categoryItemClientDeleteButtonTooltip": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryItem.clientFilter.{{index}}.deleteButtonTooltip",
+    "categoryItemClientEditButton": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryItem.clientFilter.{{index}}.editButton",
+    "categoryItemClientEditButtonTooltip": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryItem.clientFilter.{{index}}.editButtonTooltip",
+    "categoryItemClientName": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryItem.clientFilter.{{index}}.name",
+    "categoryItemClientNameContainer": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryItem.clientFilter.{{index}}.nameContainer",
+    "categoryItemPinnedIcon": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryItem.clientFilter.{{index}}.pinned",
+    "categoryItemUserDeleteButton": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryItem.userFilter.{{index}}.deleteButton",
+    "categoryItemUserDeleteButtonTooltip": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryItem.userFilter.{{index}}.deleteButtonTooltip",
+    "categoryItemUserEditButton": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryItem.userFilter.{{index}}.editButton",
+    "categoryItemUserEditButtonTooltip": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryItem.userFilter.{{index}}.editButtonTooltip",
+    "categoryItemUserName": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryItem.userFilter.{{index}}.name",
+    "categoryItemUserNameContainer": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryItem.userFilter.{{index}}.nameContainer",
+    "emptyCategoryDescription": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryEmpty.description",
+    "emptyCategoryIcon": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryEmpty.icon",
+    "emptyCategoryTitle": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryEmpty.title",
+    "expandButton": "customCollapsedId.groupingPanel.collapsedPanelContent.expandButton",
+    "headerAddFilter": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentHeader.addFilterButton",
+    "headerCollapseButton": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentHeader.collapseButton",
+    "headerCollapseButtonTooltip": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentHeader.collapseButtonTooltip",
+    "headerSearchButton": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchButton",
+    "headerSearchButtonTooltip": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchButtonTooltip",
+    "headerSearchField": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentHeader.searchField",
+    "headerSearchFieldCustomAction": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentHeader.customSearchAction",
+    "headerTitle": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentHeader.title",
+    "persistentFilterContainer": "customCollapsedId.groupingPanel.expandedPanelContent.expandedPanelContentCategory.{{category}}.expandedPanelContentCategoryItem.userFilter.persistentFilter.nameContainer",
+    "popperLabel": "customCollapsedId.groupingPanel.expandedPanelContent.popper.label",
+    "popperTitle": "customCollapsedId.groupingPanel.expandedPanelContent.popper.title"
+  },
+  "TOOLTIPS_CONTENT_MAP": {
+    "collapseButton": "Colapsar panel",
+    "deleteButton": "Eliminar filtro",
+    "editButton": "Editar filtro",
+    "searchButton": "Buscar filtros"
+  }
+}