@widergy/energy-ui 3.158.1 → 3.159.0

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

@@ -0,0 +1,359 @@
+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); }
+import React, { useState } from 'react';
+import { fn } from '@storybook/test';
+import { joinArgTypes } from 'stories/utils';
+import UTBodyPlaceholder from '../../UTBodyPlaceholder';
+import UTShortcutPanel from '..';
+import { PANEL_POSITIONS } from '../constants';
+import { TEST_IDS } from '../../../constants/testIds';
+import propsSchema from './props.schema.json';
+import data from './constants.json';
+import styles from './styles.module.scss';
+import { UTShortcutPanelTests } from './tests';
+const {
+  filterGrouping
+} = TEST_IDS;
+export default {
+  args: {
+    categories: data.CATEGORIES,
+    categoriesConfig: data.CATEGORIES_CONFIG,
+    children: undefined,
+    classNames: undefined,
+    dataTestId: data.DATA_TEST_ID,
+    disableCollapsibleCategories: false,
+    handleSelectFilter: fn(),
+    hideAddFilterButton: false,
+    iconProps: undefined,
+    noFiltersTitle: data.NO_FILTERS_TITLE,
+    noFiltersText: data.NO_FILTERS_TEXT,
+    onDeleteFilterGrouping: fn(),
+    onEditFilterGrouping: fn(),
+    onTogglePanel: fn(),
+    panelTitle: data.PANEL_TITLE,
+    position: data.POSITION,
+    selectedFilter: undefined,
+    scrollProps: undefined,
+    startOpen: true,
+    tooltipsContentMap: data.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 `UTShortcutPanel`.',
+      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'
+        }
+      }
+    },
+    disableCollapsibleCategories: {
+      control: 'boolean',
+      description: 'Si es `true`, las categorías no se pueden colapsar.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    handleSelectFilter: {
+      action: 'hi',
+      control: 'none',
+      description: 'Función callback que se ejecuta cuando se selecciona un filtro.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Function'
+        }
+      }
+    },
+    hideAddFilterButton: {
+      control: 'boolean',
+      description: 'Si es `true`, el botón de agregar filtro no se muestra.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    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'
+        }
+      }
+    },
+    onTogglePanel: {
+      control: 'none',
+      description: 'Función callback que se ejecuta cuando se presiona el botón de toggle del panel.',
+      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(PANEL_POSITIONS),
+      table: {
+        defaultValue: {
+          summary: 'left'
+        },
+        type: {
+          summary: joinArgTypes(Object.values(PANEL_POSITIONS))
+        }
+      }
+    },
+    scrollProps: {
+      control: 'none',
+      description: 'Props para el componente de scroll.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    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: UTShortcutPanel,
+  parameters: {
+    jsonschema: {
+      schema: propsSchema
+    },
+    controls: {
+      exclude: ['categories', 'categoriesConfig', 'children', 'classNames', 'classes', 'handleSelectFilter', 'onDeleteFilterGrouping', 'onEditFilterGrouping', 'onTogglePanel', 'scrollProps', '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/UTShortcutPanel'
+};
+export const Playground = {
+  name: 'Playground',
+  parameters: {
+    backgrounds: {
+      default: 'Oscuro'
+    }
+  },
+  render: args => {
+    const [selectedFilter, setSelectedFilter] = useState(args.selectedFilter);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
+      className: styles.storyContainer
+    }, /*#__PURE__*/React.createElement(UTShortcutPanel, _extends({}, args, {
+      handleSelectFilter: filter => {
+        args.handleSelectFilter(filter);
+        setSelectedFilter(filter);
+      },
+      selectedFilter: selectedFilter
+    }), /*#__PURE__*/React.createElement("section", {
+      className: styles.defaultContainer
+    }, /*#__PURE__*/React.createElement(UTBodyPlaceholder, {
+      classNames: {
+        bodyPlaceholder: styles.bodyPlaceholder
+      }
+    })))), /*#__PURE__*/React.createElement("div", {
+      "data-testid": "testingShield"
+    }));
+  }
+};
+export const TestingSite = {
+  ...Playground,
+  name: 'Test Site',
+  play: UTShortcutPanelTests
+};

package/dist/esm/components/UTShortcutPanel/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"
+  }
+}