@widergy/energy-ui 3.95.0 → 3.96.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.96.0](https://github.com/widergy/energy-ui/compare/v3.95.0...v3.96.0) (2025-07-30)
+
+
+### Features
+
+* storybook setup and initial stories ([#447](https://github.com/widergy/energy-ui/issues/447)) ([4bf591b](https://github.com/widergy/energy-ui/commit/4bf591b3f3d1b2a8c7e57667cd23c9a73789dc22))
+
 # [3.95.0](https://github.com/widergy/energy-ui/compare/v3.94.1...v3.95.0) (2025-07-29)
 
 

package/dist/components/UTDocumentWizard/index.js

@@ -78,12 +78,10 @@ const UTDocumentWizard = _ref => {
   };
   const containerRef = (0, _react.useRef)(null);
   const actualPage = pages === null || pages === void 0 ? void 0 : pages.find(page => "".concat(page.id) === "".concat(selectedTab));
-  (0, _react.useEffect)(() => {
-    return () => {
-      if (changeTimeoutRef.current) {
-        clearTimeout(changeTimeoutRef.current);
-      }
-    };
+  (0, _react.useEffect)(() => () => {
+    if (changeTimeoutRef.current) {
+      clearTimeout(changeTimeoutRef.current);
+    }
   }, []);
   const [sheetOpen, setSheetOpen] = (0, _react.useState)(false);
   const {

package/dist/components/UTEmojiPicker/index.js

@@ -17,7 +17,7 @@ var _utils = require("./utils");
 var _constants = require("./constants");
 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); }
+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); } /* eslint-disable jsx-a11y/click-events-have-key-events */
 const UTEmojiPicker = _ref => {
   let {
     ButtonComponent = _UTTouchableWithoutFeedback.default,

package/dist/components/UTLabel/UTLabel.mdx

@@ -0,0 +1,13 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTLabelStories from './UTLabel.stories';
+
+<Meta of={UTLabelStories} />
+
+<Title>UTLabel</Title>
+
+<Description of={UTLabelStories} />
+
+<Canvas of={UTLabelStories.Default} withToolbar name="UTLabel" />
+
+<ArgTypes exclude={['classes', 'style', 'title']} />

package/dist/components/UTLabel/UTLabel.stories.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _utils = require("stories/utils");
+var _Palette = require("../../constants/Palette");
+var _constants = require("./constants");
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  args: {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Texto a mostrar en el componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    colorTheme: {
+      control: 'select',
+      description: 'Determina el color de la paleta a usar.',
+      options: Object.values(_Palette.COLOR_THEMES),
+      table: {
+        defaultValue: {
+          summary: _constants.DEFAULT_PROPS.colorTheme
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    shade: {
+      control: 'select',
+      description: 'Determina el tono de la prop `colorTheme` a usar.',
+      options: Object.values(_Palette.COLOR_SHADES),
+      table: {
+        defaultValue: {
+          summary: '05'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    markdownRenderers: {
+      control: false,
+      description: 'Mapper de componentes HTML a componentes react. Para más detalles revisar la sección Markdown Renderers',
+      table: {
+        defaultValue: {
+          summary: 'Detalles',
+          detail: 'Por defecto hay un renderer para elementos <a> que presetea algunos atributos de la etiqueta.'
+        },
+        type: {
+          summary: 'Object'
+        }
+      }
+    },
+    variant: {
+      control: 'select',
+      description: 'Determina el componente HTML a renderizar.',
+      options: Object.keys(_constants.VARIANTS),
+      table: {
+        defaultValue: {
+          summary: _constants.DEFAULT_PROPS.variant
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(Object.keys(_constants.VARIANTS))
+        }
+      }
+    },
+    weight: {
+      control: 'select',
+      description: 'Determina el valor del atributo `font-weight`.',
+      options: Object.keys(_constants.WEIGHTS),
+      table: {
+        defaultValue: {
+          summary: _constants.DEFAULT_PROPS.weight
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(Object.keys(_constants.WEIGHTS))
+        }
+      }
+    },
+    withMarkdown: {
+      control: 'boolean',
+      description: 'Determina si renderizar el contenido como markdown o texto plano.',
+      table: {
+        defaultValue: {
+          summary: _constants.DEFAULT_PROPS.withMarkdown
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    className: {
+      control: false,
+      description: 'Clase que se le pasa al elemento contenedor.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  component: _.default,
+  parameters: {
+    controls: {
+      exclude: ['classes', 'field', 'style', 'title']
+    },
+    docs: {
+      description: {
+        component: 'Este componente se usa para renderizar texto. Consume la paleta de colores. Acepta markdown para formatear texto.'
+      }
+    }
+  }
+};
+const Default = exports.Default = {
+  args: {
+    colorTheme: _constants.DEFAULT_PROPS.colorTheme,
+    variant: _constants.DEFAULT_PROPS.variant,
+    weight: _constants.DEFAULT_PROPS.weight,
+    withMarkdown: _constants.DEFAULT_PROPS.withMarkdown,
+    shade: '05'
+  },
+  name: 'Playground'
+};

package/dist/components/UTModal/index.js

@@ -17,7 +17,7 @@ var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 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); }
+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); } /* eslint-disable jsx-a11y/click-events-have-key-events */
 const UTModal = _ref => {
   let {
     cancelAction,

package/dist/components/UTPanel/versions/V0/index.js

@@ -41,7 +41,6 @@ const UTPanel = _ref => {
     ...props
   } = _ref;
   const {
-    title: titleClass,
     titleIcon: titleIconClass,
     titleContainer: titleContainerClass,
     perfectScrollbar: perfectScrollbarClass,

package/dist/components/UTPanel/versions/V1/index.js

@@ -91,7 +91,6 @@ const UTPanel = _ref => {
     headerContainer: headerContainerClass,
     iconClose: iconCloseClass,
     perfectScrollbar: perfectScrollbarClass,
-    title: titleClass,
     ...drawerClasses
   } = classes;
   return /*#__PURE__*/_react.default.createElement(_SwipeableDrawer.default, _extends({

package/dist/components/UTSelect/versions/V1/components/InputComponent/index.js

@@ -29,16 +29,9 @@ const InputComponent = _ref => {
   } = _ref;
   const {
     InputProps: {
-      startAdornment,
-      endAdornment,
-      className,
       ...restInputProps
     },
     inputProps: {
-      onBlur: paramsOnBlur,
-      onChange: paramsOnChange,
-      onFocus: paramsOnFocus,
-      value: paramsValue,
       ...restInputPropsFromField
     },
     ...restParams

package/dist/components/UTSelectableCard/index.js

@@ -15,7 +15,7 @@ var _UTIcon = _interopRequireDefault(require("../UTIcon"));
 var _constants = require("./constants");
 var _theme = require("./theme");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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); }
+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); } /* eslint-disable jsx-a11y/click-events-have-key-events */
 var CheckIcon = function CheckIcon(props) {
   return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
     fillRule: "evenodd",

package/dist/components/UTStatus/UTStatus.mdx

@@ -0,0 +1,13 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTStatusStories from './UTStatus.stories.js';
+
+<Meta of={UTStatusStories} />
+
+<Title>UTStatus</Title>
+
+<Description of={UTStatusStories} />
+
+<Canvas of={UTStatusStories.Default} withToolbar />
+
+<ArgTypes exclude={['classes', 'title']} />

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

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _utils = require("stories/utils");
+var _constants = require("./constants");
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  args: {
+    children: 'Información de estado',
+    size: _constants.DEFAULT_PROPS.size,
+    type: _constants.DEFAULT_PROPS.type
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Texto a mostrar en el componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    Icon: {
+      control: false,
+      description: 'Icono a mostrar en el componente. Sobreescribe el default. Solo se muestra si `withoutIcon` es `false`.',
+      table: {
+        defaultValue: {
+          summary: 'Detalles',
+          detail: 'Cada variant tiene su Icon default.'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(['ReactComponent', 'string'])
+        }
+      }
+    },
+    className: {
+      control: false,
+      description: 'Clase que recibe el contenedor.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    variant: {
+      control: 'select',
+      description: 'Determina la variante del componente a usar.',
+      options: Object.keys(_constants.VARIANTS),
+      table: {
+        defaultValue: {
+          summary: 'success'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(Object.keys(_constants.VARIANTS))
+        }
+      }
+    },
+    type: {
+      control: 'select',
+      description: 'Determina el tema a usar.',
+      options: Object.keys(_constants.TYPES),
+      table: {
+        defaultValue: {
+          summary: _constants.DEFAULT_PROPS.type
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(Object.keys(_constants.TYPES))
+        }
+      }
+    },
+    size: {
+      control: 'inline-radio',
+      description: 'Determina el tamaño del texto.',
+      options: Object.keys(_constants.SIZES),
+      table: {
+        defaultValue: {
+          summary: _constants.DEFAULT_PROPS.size
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(Object.keys(_constants.SIZES))
+        }
+      }
+    },
+    withoutIcon: {
+      control: 'boolean',
+      description: 'Determina si se debe mostrar u ocultar el icono.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    }
+  },
+  component: _.default,
+  parameters: {
+    controls: {
+      exclude: ['classes', 'title']
+    },
+    docs: {
+      description: {
+        component: 'Este componente se usa para mostrar estados con o sin iconos asociados.'
+      }
+    }
+  }
+};
+const Default = exports.Default = {
+  args: {
+    size: _constants.DEFAULT_PROPS.size,
+    type: _constants.DEFAULT_PROPS.type,
+    variant: _constants.DEFAULT_PROPS.variant,
+    withoutIcon: _constants.DEFAULT_PROPS.withoutIcon
+  },
+  name: 'Playground'
+};

package/dist/components/UTStatus/constants.js

@@ -24,5 +24,6 @@ const TYPES = exports.TYPES = {
 const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
   size: 'medium',
   type: 'default',
-  variant: 'success'
+  variant: 'success',
+  withoutIcon: false
 };

package/dist/components/UTTable/components/ActionIcons/index.js

@@ -16,7 +16,7 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _constants = require("./constants");
 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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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); }
+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); } /* eslint-disable jsx-a11y/click-events-have-key-events */
 const ActionIcons = _ref => {
   let {
     classes,

package/dist/components/UTTextInput/versions/V0/index.js

@@ -100,12 +100,6 @@ class UTTextInput extends _react.PureComponent {
     // Deeper analysis should be done when refactoring the component to match
     // design requirements.
     const {
-      base,
-      selectedOptionsIds,
-      retrieveStyle: rs,
-      retrieveMuiTheme: rmt,
-      Component,
-      muiTheme,
       ...textFieldPropsToForward
     } = others;
     const endAction = type === _constants.INPUT_TYPES.PASSWORD ? /*#__PURE__*/_react.default.createElement(_UTButton.default, {

package/dist/components/UTTouchableWithoutFeedback/index.js

@@ -10,7 +10,7 @@ var _UTRipple = _interopRequireDefault(require("../UTRipple"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 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); }
+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); } /* eslint-disable jsx-a11y/click-events-have-key-events */
 const UTTouchableWithoutFeedback = _ref => {
   let {
     children,

package/dist/components/WithLoading/index.js

@@ -7,14 +7,12 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Loading = _interopRequireDefault(require("../Loading"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const WithLoading = (shouldLoad, text, className, size, thickness, textClassName) => WrappedComponent => props => {
-  return shouldLoad(props) ? /*#__PURE__*/_react.default.createElement(_Loading.default, {
-    text: text,
-    className: className,
-    thickness: thickness,
-    size: size,
-    textClassName: textClassName
-  }) // eslint-disable-line react/prop-types
-  : /*#__PURE__*/_react.default.createElement(WrappedComponent, props);
-};
+const WithLoading = (shouldLoad, text, className, size, thickness, textClassName) => WrappedComponent => props => shouldLoad(props) ? /*#__PURE__*/_react.default.createElement(_Loading.default, {
+  text: text,
+  className: className,
+  thickness: thickness,
+  size: size,
+  textClassName: textClassName
+}) // eslint-disable-line react/prop-types
+: /*#__PURE__*/_react.default.createElement(WrappedComponent, props);
 var _default = exports.default = WithLoading;

package/dist/index.js

@@ -483,8 +483,8 @@ var _EnergyThemeProvider = _interopRequireDefault(require("./components/EnergyTh
 var _keyboardUtils = _interopRequireDefault(require("./utils/keyboardUtils"));
 var _UTActionCard = _interopRequireDefault(require("./components/UTActionCard"));
 var _UTAlert = _interopRequireDefault(require("./components/UTAlert"));
-var _UTAttachment = _interopRequireDefault(require("./components/UTAttachment"));
 var _UTAttachmentList = _interopRequireDefault(require("./components/UTAttachmentList"));
+var _UTAttachment = _interopRequireDefault(require("./components/UTAttachment"));
 var _UTAutocomplete = _interopRequireDefault(require("./components/UTAutocomplete"));
 var _UTAvatar = _interopRequireDefault(require("./components/UTAvatar"));
 var _UTBadge = _interopRequireDefault(require("./components/UTBadge"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.95.0",
+  "version": "3.96.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",
@@ -20,9 +20,14 @@
     "build": "NODE_ENV=production babel src/lib --out-dir dist --copy-files",
     "sass-lint": "./node_modules/sass-lint/bin/sass-lint.js -v -q",
     "prepublishOnly": "npm run build",
-    "dev": "nodemon -e scss,js -x yalc publish --push"
+    "dev": "nodemon -e scss,js -x yalc publish --push",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "deploy-storybook": "node scripts/deployStorybook.js",
+    "aws-configure": "bash scripts/aws-configure.sh"
   },
   "dependencies": {
+    "@babel/eslint-parser": "^7.23.10",
     "@date-io/dayjs": "1.x",
     "@material-ui/core": "^4.4.0",
     "@material-ui/icons": "^3.0.1",
@@ -69,26 +74,37 @@
     "@babel/preset-react": "^7.0.0",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
+    "@storybook/addon-essentials": "^8.0.9",
+    "@storybook/addon-interactions": "^8.0.9",
+    "@storybook/addon-links": "^8.0.9",
+    "@storybook/addon-onboarding": "^8.0.9",
+    "@storybook/blocks": "^8.0.9",
+    "@storybook/preset-create-react-app": "^8.0.9",
+    "@storybook/react": "^8.0.9",
+    "@storybook/react-webpack5": "^8.0.9",
+    "@storybook/test": "^8.0.9",
     "@widergy/semantic-release-package-config": "^1.0.0",
     "babel-preset-react-app": "^10.0.1",
     "cross-env": "^7.0.3",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.11.0",
     "gh-pages": "^6.0.0",
     "husky": "^8.0.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.6.2",
     "prettier-eslint": "^15.0.1",
     "prop-types": ">=15.5.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.1",
     "sass-lint": "^1.12.1",
-    "semantic-release": "^15.13.31"
+    "semantic-release": "^15.13.31",
+    "storybook": "^8.0.9",
+    "webpack": "^5.90.1"
   },
   "release": {
     "extends": "@widergy/semantic-release-package-config"