@widergy/energy-ui 3.121.3 → 3.122.1

package/dist/components/UTSearchField/index.js

@@ -16,6 +16,7 @@ const UTSearchField = _ref => {
   let {
     classes,
     className,
+    customAction,
     dataKeyboard,
     dataTestId,
     disabled,
@@ -45,10 +46,10 @@ const UTSearchField = _ref => {
       shade: '02'
     }
   }];
-  const rightAdornments = value ? [{
+  const rightAdornments = value || customAction ? [{
     name: _constants.COMPONENT_KEYS.ACTION,
     props: {
-      action
+      action: customAction || action
     }
   }] : [];
   return /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
@@ -76,6 +77,11 @@ const UTSearchField = _ref => {
 const propTypes = exports.propTypes = {
   className: _propTypes.string,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
+  customAction: (0, _propTypes.shape)({
+    Icon: _propTypes.string,
+    onClick: _propTypes.func,
+    size: _propTypes.string
+  }),
   dataKeyboard: _propTypes.string,
   dataTestId: _propTypes.string,
   disabled: _propTypes.bool,

package/dist/components/UTSearchField/stories/UTSearchField.mdx

@@ -0,0 +1,11 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/addon-docs';
+
+import * as UTSearchFieldStories from './UTSearchField.stories';
+
+<Meta of={UTSearchFieldStories} />
+
+<Title>UTSearchField</Title>
+
+<Description of={UTSearchFieldStories} />
+
+<ArgTypes />

package/dist/components/UTSearchField/stories/UTSearchField.stories.js

@@ -0,0 +1,250 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithValue = exports.WithCustomAction = exports.Playground = exports.Disabled = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ = _interopRequireDefault(require(".."));
+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 PlaygroundTemplate = args => {
+  const [value, setValue] = (0, _react.useState)(args.value);
+  const handleChange = searchValue => {
+    setValue(searchValue);
+    console.log('Search value:', searchValue);
+  };
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+    value: value,
+    onChange: handleChange
+  }));
+};
+var _default = exports.default = {
+  args: {
+    placeholder: 'Buscar...',
+    disabled: false,
+    variant: 'gray'
+  },
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Clase CSS personalizada para el contenedor.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    classes: {
+      control: 'none',
+      description: 'Clases personalizadas para elementos internos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Record<string, string>'
+        }
+      }
+    },
+    customAction: {
+      control: 'none',
+      description: 'Acción personalizada para el botón derecho.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'shape({ Icon: string, onClick: func, size: string })'
+        }
+      }
+    },
+    dataKeyboard: {
+      control: 'text',
+      description: 'Identificador para teclado virtual.',
+      table: {
+        defaultValue: {
+          summary: 'search'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    dataTestId: {
+      control: 'text',
+      description: 'Identificador para testing.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita el campo de búsqueda.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    id: {
+      control: 'text',
+      description: 'Identificador HTML del elemento.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onBlur: {
+      control: 'none',
+      description: 'Callback ejecutado cuando el campo pierde el foco.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'function'
+        }
+      }
+    },
+    onChange: {
+      control: 'none',
+      description: 'Callback ejecutado cuando cambia el valor del campo.',
+      table: {
+        defaultValue: {
+          summary: '() => {}'
+        },
+        type: {
+          summary: 'function'
+        }
+      }
+    },
+    onFocus: {
+      control: 'none',
+      description: 'Callback ejecutado cuando el campo recibe el foco.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'function'
+        }
+      }
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Texto de placeholder del campo de búsqueda.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    size: {
+      control: 'text',
+      description: 'Tamaño del campo de entrada.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    type: {
+      control: 'text',
+      description: 'Tipo de entrada HTML.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    value: {
+      control: 'text',
+      description: 'Valor actual del campo de búsqueda.',
+      table: {
+        defaultValue: {
+          summary: 'null'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    variant: {
+      control: 'text',
+      description: 'Variante de estilo del campo.',
+      table: {
+        defaultValue: {
+          summary: 'gray'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Campo de búsqueda con icono de lupa y botón de limpiar.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTSearchField'
+};
+const Playground = exports.Playground = {
+  name: 'Playground',
+  render: PlaygroundTemplate
+};
+const WithValue = exports.WithValue = {
+  name: 'Con valor',
+  args: {
+    value: 'Texto de búsqueda'
+  },
+  render: PlaygroundTemplate
+};
+const Disabled = exports.Disabled = {
+  name: 'Deshabilitado',
+  args: {
+    disabled: true,
+    placeholder: 'Campo deshabilitado'
+  },
+  render: PlaygroundTemplate
+};
+const WithCustomAction = exports.WithCustomAction = {
+  name: 'Con acción personalizada',
+  args: {
+    customAction: {
+      Icon: 'IconFilter',
+      onClick: () => console.log('Custom action clicked'),
+      size: 'small'
+    },
+    value: 'Búsqueda con filtro'
+  }
+};

package/dist/components/UTSignature/UTSignature.stories.js

@@ -94,7 +94,8 @@ var _default = exports.default = {
         component: 'Este componente se usa para renderizar un canvas de firma.'
       }
     }
-  }
+  },
+  title: 'Energy-UI/UTSignature'
 };
 const Default = exports.Default = {
   args: {

package/dist/components/UTStatus/UTStatus.stories.js

@@ -202,7 +202,8 @@ var _default = exports.default = {
         component: 'Este componente se usa para mostrar estados con o sin iconos asociados. Soporta diferentes variantes de color, tipos de tema y tamaños. Incluye funcionalidad de tooltip y puede personalizarse con iconos personalizados.'
       }
     }
-  }
+  },
+  title: 'Energy-UI/UTStatus'
 };
 const Default = exports.Default = {
   args: {

package/dist/components/UTSwitch/versions/V1/theme.js

@@ -10,10 +10,11 @@ const retrieveStyle = _ref => {
     theme
   } = _ref;
   const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
-  const actionTheme = actionPaletteColors.accent;
-  const grayTheme = actionPaletteColors.gray;
-  const neutralTheme = actionPaletteColors.neutral;
-  const lightTheme = actionPaletteColors.light;
+  const paletteColors = theme.Palette;
+  const actionTheme = actionPaletteColors.accent || paletteColors.accent;
+  const grayTheme = actionPaletteColors.gray || paletteColors.gray;
+  const neutralTheme = actionPaletteColors.neutral || paletteColors.neutral;
+  const lightTheme = actionPaletteColors.light || paletteColors.light;
   return {
     sliderContainer: {
       '&:hover > $sliderBack': {

package/dist/components/UTTable/UTTable.stories.js

@@ -583,7 +583,8 @@ var _default = exports.default = {
         component: 'Componente de tabla avanzado con soporte para paginación, ordenamiento, selección de filas, filtros y acciones personalizadas. Incluye versión responsiva y múltiples opciones de configuración.'
       }
     }
-  }
+  },
+  title: 'Energy-UI/UTTable'
 }; // Basic Stories
 const Basic = exports.Basic = {
   args: {

package/dist/constants/Palette.js

@@ -20,6 +20,7 @@ const COLOR_THEMES = exports.COLOR_THEMES = {
   light: 'light',
   negative: 'negative',
   neutral: 'neutral',
+  primary: 'primary',
   success: 'success',
   warning: 'warning'
 };

package/dist/constants/testIds.js

@@ -6,23 +6,55 @@ Object.defineProperty(exports, "__esModule", {
 exports.TEST_IDS = exports.ID_CONSTANTS = void 0;
 const ID_CONSTANTS = exports.ID_CONSTANTS = {
   ACTIONS: 'actions',
+  ADD_FILTER_BUTTON: 'addFilterButton',
+  AVATAR: 'avatar',
   BOTTOM_NAV: 'bottomNav',
   CANVAS: 'canvas',
   CELL: 'cell',
   CLEAR_BUTTON: 'clearButton',
+  CLIENT_FILTER: 'clientFilter',
+  COLLAPSED_PANEL_CONTENT: 'collapsedPanelContent',
+  COLLAPSE_BUTTON: 'collapseButton',
+  COLLAPSE_BUTTON_TOOLTIP: 'collapseButtonTooltip',
   CREDIT_CARD: 'creditCard',
+  CUSTOM_SEARCH_ACTION: 'customSearchAction',
   DATA_CATEGORY: 'dataCategory',
   DATA_ELEMENT: 'dataElement',
+  DELETE_BUTTON: 'deleteButton',
+  DELETE_BUTTON_TOOLTIP: 'deleteButtonTooltip',
+  DESCRIPTION: 'description',
   DIALOG: 'dialog',
+  EDIT_BUTTON: 'editButton',
+  EDIT_BUTTON_TOOLTIP: 'editButtonTooltip',
+  EXPANDED_PANEL_CONTENT: 'expandedPanelContent',
+  EXPANDED_PANEL_CONTENT_CATEGORY: 'expandedPanelContentCategory',
+  EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY: 'expandedPanelContentCategoryEmpty',
+  EXPANDED_PANEL_CONTENT_CATEGORY_HEADER: 'expandedPanelContentCategoryHeader',
+  EXPANDED_PANEL_CONTENT_CATEGORY_ITEM: 'expandedPanelContentCategoryItem',
+  EXPANDED_PANEL_CONTENT_HEADER: 'expandedPanelContentHeader',
+  EXPAND_BUTTON: 'expandButton',
+  FILTER_GROUPING: 'filterGrouping',
+  GROUPING_PANEL: 'groupingPanel',
   HEADER: 'header',
   HELP_TEXT: 'helpText',
+  ICON: 'icon',
+  LABEL: 'label',
+  NAME: 'name',
+  NAME_CONTAINER: 'nameContainer',
   ONBOARDING: 'onboarding',
   PANEL: 'panel',
+  PERSISTENT_FILTER: 'persistentFilter',
+  PINNED: 'pinned',
+  POPPER: 'popper',
+  SEARCH_BUTTON: 'searchButton',
+  SEARCH_BUTTON_TOOLTIP: 'searchButtonTooltip',
+  SEARCH_FIELD: 'searchField',
   SELECTION_COMPONENT: 'selectionComponent',
   STATUS_MESSAGE: 'statusMessage',
-  TABLE_ROW: 'tableRow',
   TABLE: 'table',
+  TABLE_ROW: 'tableRow',
   TITLE: 'title',
+  USER_FILTER: 'userFilter',
   VALIDATION_DATA: 'validationData',
   WORKFLOW_CONTAINER: 'workflowContainer'
 };
@@ -62,6 +94,26 @@ const TEST_IDS = exports.TEST_IDS = {
     closeButton: "".concat(ID_CONSTANTS.DIALOG, ".closeButton"),
     title: "".concat(ID_CONSTANTS.DIALOG, ".title")
   },
+  filterGrouping: {
+    groupingPanel: {
+      collapsedPanelContent: {
+        expandButton: "".concat(ID_CONSTANTS.FILTER_GROUPING, ".").concat(ID_CONSTANTS.GROUPING_PANEL, ".").concat(ID_CONSTANTS.COLLAPSED_PANEL_CONTENT, ".").concat(ID_CONSTANTS.EXPAND_BUTTON)
+      },
+      expandedPanelContent: {
+        expandedPanelContentCategory: "".concat(ID_CONSTANTS.FILTER_GROUPING, ".").concat(ID_CONSTANTS.GROUPING_PANEL, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT_CATEGORY),
+        expandedPanelContentHeader: {
+          addFilterButton: "".concat(ID_CONSTANTS.FILTER_GROUPING, ".").concat(ID_CONSTANTS.GROUPING_PANEL, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT_HEADER, ".").concat(ID_CONSTANTS.ADD_FILTER_BUTTON),
+          collapseButton: "".concat(ID_CONSTANTS.FILTER_GROUPING, ".").concat(ID_CONSTANTS.GROUPING_PANEL, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT_HEADER, ".").concat(ID_CONSTANTS.COLLAPSE_BUTTON),
+          collapseButtonTooltip: "".concat(ID_CONSTANTS.FILTER_GROUPING, ".").concat(ID_CONSTANTS.GROUPING_PANEL, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT_HEADER, ".").concat(ID_CONSTANTS.COLLAPSE_BUTTON_TOOLTIP),
+          customSearchAction: "".concat(ID_CONSTANTS.FILTER_GROUPING, ".").concat(ID_CONSTANTS.GROUPING_PANEL, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT_HEADER, ".").concat(ID_CONSTANTS.CUSTOM_SEARCH_ACTION),
+          searchButton: "".concat(ID_CONSTANTS.FILTER_GROUPING, ".").concat(ID_CONSTANTS.GROUPING_PANEL, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT_HEADER, ".").concat(ID_CONSTANTS.SEARCH_BUTTON),
+          searchButtonTooltip: "".concat(ID_CONSTANTS.FILTER_GROUPING, ".").concat(ID_CONSTANTS.GROUPING_PANEL, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT_HEADER, ".").concat(ID_CONSTANTS.SEARCH_BUTTON_TOOLTIP),
+          searchField: "".concat(ID_CONSTANTS.FILTER_GROUPING, ".").concat(ID_CONSTANTS.GROUPING_PANEL, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT_HEADER, ".").concat(ID_CONSTANTS.SEARCH_FIELD),
+          title: "".concat(ID_CONSTANTS.FILTER_GROUPING, ".").concat(ID_CONSTANTS.GROUPING_PANEL, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT, ".").concat(ID_CONSTANTS.EXPANDED_PANEL_CONTENT_HEADER, ".").concat(ID_CONSTANTS.TITLE)
+        }
+      }
+    }
+  },
   onboarding: {
     close: "".concat(ID_CONSTANTS.ONBOARDING, ".close"),
     description: "".concat(ID_CONSTANTS.ONBOARDING, ".description"),

package/dist/index.js

@@ -189,6 +189,12 @@ Object.defineProperty(exports, "UTFileInput", {
     return _UTFileInput.default;
   }
 });
+Object.defineProperty(exports, "UTFilterGrouping", {
+  enumerable: true,
+  get: function () {
+    return _UTFilterGrouping.default;
+  }
+});
 Object.defineProperty(exports, "UTGoogleAutocomplete", {
   enumerable: true,
   get: function () {
@@ -540,6 +546,7 @@ var _UTDotMenu = _interopRequireDefault(require("./components/UTDotMenu"));
 var _UTEmojiPicker = _interopRequireDefault(require("./components/UTEmojiPicker"));
 var _UTExternalLink = _interopRequireDefault(require("./components/UTExternalLink"));
 var _UTFileInput = _interopRequireDefault(require("./components/UTFileInput"));
+var _UTFilterGrouping = _interopRequireDefault(require("./components/UTFilterGrouping"));
 var _UTGoogleAutocomplete = _interopRequireDefault(require("./components/UTGoogleAutocomplete"));
 var _UTGraph = _interopRequireDefault(require("./components/UTGraph"));
 var _UTIcon = _interopRequireDefault(require("./components/UTIcon"));

package/dist/types/iconTypes.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconPropTypes = void 0;
+var _propTypes = require("prop-types");
+const iconPropTypes = exports.iconPropTypes = (0, _propTypes.shape)({
+  area: _propTypes.bool,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  className: _propTypes.string,
+  /**
+   * @deprecated The "color" prop is deprecated and will be removed in a future release. Please use "colorTheme" instead.
+   */
+  color: _propTypes.string,
+  colorTheme: _propTypes.string,
+  dataTestId: _propTypes.string,
+  fillShade: _propTypes.string,
+  fillTheme: _propTypes.string,
+  name: _propTypes.string,
+  shade: _propTypes.string,
+  size: _propTypes.number,
+  theme: _propTypes.object,
+  variant: _propTypes.string
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.121.3",
+  "version": "3.122.1",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",
@@ -19,11 +19,14 @@
     "prebuild": "rimraf dist",
     "build": "NODE_ENV=production babel src/lib --out-dir dist --copy-files",
     "sass-lint": "./node_modules/sass-lint/bin/sass-lint.js -v -q",
+    "prepare": "husky install",
     "prepublishOnly": "npm run build",
     "dev": "nodemon -e scss,js -x yalc publish --push",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "deploy-storybook": "node scripts/deployStorybook.js",
+    "test-storybook": "test-storybook --testTimeout=60000",
+    "run-and-test-storybook": "yarn playwright install --with-deps chromium 2>/dev/null || true && concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn storybook\" \"wait-on http://localhost:6006 && test-storybook --testTimeout=60000\"",
     "aws-configure": "bash scripts/aws-configure.sh"
   },
   "dependencies": {
@@ -88,8 +91,10 @@
     "@storybook/react": "^8.0.9",
     "@storybook/react-webpack5": "^8.0.9",
     "@storybook/test": "^8.0.9",
+    "@storybook/test-runner": "^0.19.1",
     "@widergy/semantic-release-package-config": "^1.0.0",
     "babel-preset-react-app": "^10.0.1",
+    "concurrently": "^9.2.1",
     "cross-env": "^7.0.3",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^10.1.8",
@@ -104,11 +109,13 @@
     "prettier-eslint": "^15.0.1",
     "prop-types": ">=15.5.10",
     "react": "^18.2.0",
+    "react-css-vars": "^1.2.1",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
     "sass-lint": "^1.12.1",
     "semantic-release": "^15.13.31",
     "storybook": "^8.0.9",
+    "wait-on": "^9.0.3",
     "webpack": "^5.90.1"
   },
   "release": {