dibk-design 2.0.4 → 2.0.6

package/dist/components/Button.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _theme = require("../functions/theme");
+var _helpers = require("functions/helpers");
 var _ButtonModule = _interopRequireDefault(require("./Button.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -37,7 +38,7 @@ var Button = function Button(props) {
   delete buttonProps.noHover;
   delete buttonProps.rounded;
   var themeStyle = props.theme ? getThemeStyle(props.theme, props.color) : null;
-  var className = "".concat(_ButtonModule.default.button, " ").concat(_ButtonModule.default[props.color], " ").concat(_ButtonModule.default[props.size], " ").concat(getArrowClass(props.arrow), " ").concat(props.theme ? _ButtonModule.default.hasTheme : "", " ").concat(props.noHover ? _ButtonModule.default.noHover : "", " ").concat(props.rounded ? _ButtonModule.default.rounded : "");
+  var className = (0, _helpers.classNameArrayToClassNameString)([_ButtonModule.default.button, _ButtonModule.default[props.color], _ButtonModule.default[props.size], getArrowClass(props.arrow), props.theme && _ButtonModule.default.hasTheme, props.noHover && _ButtonModule.default.noHover, props.rounded && _ButtonModule.default.rounded, props.hasErrors && _ButtonModule.default.hasErrors]);
   return (_props$href = props.href) !== null && _props$href !== void 0 && _props$href.length ? _react.default.createElement("a", _extends({}, buttonProps, {
     className: className,
     style: themeStyle
@@ -53,6 +54,7 @@ Button.propTypes = {
   arrow: _propTypes.default.oneOf(["none", "left", "right"]),
   theme: _propTypes.default.object,
   disabled: _propTypes.default.bool,
+  hasErrors: _propTypes.default.bool,
   noHover: _propTypes.default.bool,
   rounded: _propTypes.default.bool,
   href: _propTypes.default.string,
@@ -62,8 +64,9 @@ Button.defaultProps = {
   color: "default",
   size: "regular",
   disabled: false,
+  hasErrors: false,
   noHover: false,
-  arrow: 'none'
+  arrow: "none"
 };
 var _default = Button;
 exports.default = _default;

package/dist/components/Button.module.scss

@@ -177,6 +177,11 @@
     }
   }
 
+  &.hasErrors {
+    @include box-shadow(0 0 2px 1px $color-error);
+    border-color: $color-error;
+  }
+
   &.rounded {
     border-radius: 20px;
   }

package/dist/components/CheckBoxInput.js

@@ -32,7 +32,9 @@ var CheckBoxInput = function CheckBoxInput(props) {
     required: props.required || props.requiredGroup,
     onChange: props.onChange,
     tabIndex: props.tabIndex || null,
-    "aria-controls": props["aria-controls"]
+    "aria-controls": props["aria-controls"],
+    "aria-invalid": props.hasErrors ? "true" : null,
+    "aria-describedby": props["aria-describedby"]
   };
   return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("input", inputProps)) : _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("span", {
     className: _CheckBoxInputModule.default.requiredSymbol
@@ -50,7 +52,8 @@ CheckBoxInput.propTypes = {
   hasErrors: _propTypes.default.bool,
   theme: _propTypes.default.object,
   checkmarkCharacter: _propTypes.default.string,
-  "aria-controls": _propTypes.default.string
+  "aria-controls": _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string
 };
 CheckBoxInput.defaultProps = {
   checked: false,

package/dist/components/CheckBoxListItem.js

@@ -22,6 +22,8 @@ var CheckBoxListItem = function CheckBoxListItem(props) {
     requiredGroup: props.requiredGroup,
     contentOnly: props.contentOnly,
     hasErrors: props.hasErrors,
+    "aria-controls": props["aria-controls"],
+    "aria-describedby": props["aria-describedby"],
     id: props.id,
     theme: props.theme,
     checkmarkCharacter: props.checkmarkCharacter
@@ -42,7 +44,9 @@ CheckBoxListItem.propTypes = {
   theme: _propTypes.default.object,
   compact: _propTypes.default.bool,
   hasErrors: _propTypes.default.bool,
-  checkmarkCharacter: _propTypes.default.string
+  checkmarkCharacter: _propTypes.default.string,
+  "aria-controls": _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string
 };
 CheckBoxListItem.defaultProps = {
   checked: false,

package/dist/components/ErrorMessage.js

@@ -16,12 +16,18 @@ var ErrorMessage = function ErrorMessage(props) {
       color: (0, _theme.getThemePaletteBackgroundColor)(theme, "warning")
     };
   };
-  return _react.default.createElement("span", {
-    className: _ErrorMessageModule.default.errorMessage,
-    style: getThemeErrorMessageStyle(props.theme)
-  }, props.content ? props.content : "");
+  var getErrorElementProps = function getErrorElementProps() {
+    var _props$id;
+    return {
+      id: !!((_props$id = props.id) !== null && _props$id !== void 0 && _props$id.length) ? props.id : null,
+      className: _ErrorMessageModule.default.errorMessage,
+      style: getThemeErrorMessageStyle(props.theme)
+    };
+  };
+  return _react.default.createElement("span", getErrorElementProps(), props.content ? props.content : "");
 };
 ErrorMessage.propTypes = {
+  id: _propTypes.default.string,
   content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
   theme: _propTypes.default.object
 };

package/dist/components/InputField.js

@@ -37,8 +37,11 @@ var InputField = function InputField(props) {
   var renderValueAsText = function renderValueAsText(value, defaultContent) {
     return props.type === "date" ? value ? formatDate(value) : defaultContent : value ? value : defaultContent;
   };
+  var getErrorElementId = function getErrorElementId() {
+    return "".concat(props.id, "-errorMessage");
+  };
   var getInputElementProps = function getInputElementProps(defaultValue, defaultKey, styleRules) {
-    var _ref;
+    var _props$errorMessage, _props$ariaDescribed, _ref;
     return _ref = {
       name: props.name,
       readOnly: props.readOnly,
@@ -52,7 +55,7 @@ var InputField = function InputField(props) {
       max: props.max || null,
       onChange: props.onChange,
       onBlur: props.onBlur
-    }, _defineProperty(_ref, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_ref, "placeholder", props.placeholder || null), _defineProperty(_ref, "className", props.hasErrors ? _InputFieldModule.default.hasErrors : null), _defineProperty(_ref, "aria-describedby", props["aria-describedby"] || null), _defineProperty(_ref, "style", styleRules), _ref;
+    }, _defineProperty(_ref, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_ref, "placeholder", props.placeholder || null), _defineProperty(_ref, "className", props.hasErrors ? _InputFieldModule.default.hasErrors : null), _defineProperty(_ref, "aria-describedby", props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null), _defineProperty(_ref, "aria-invalid", props.hasErrors ? "true" : null), _defineProperty(_ref, "style", styleRules), _ref;
   };
   var defaultValue = props.defaultValue ? props.defaultValue : props.value || null;
   var defaultKey = props.elementKey || null;
@@ -78,6 +81,7 @@ var InputField = function InputField(props) {
     type: "button",
     theme: props.theme
   }) : null) : null), !props.contentOnly ? _react.default.createElement("input", getInputElementProps(defaultValue, defaultKey, styleRules)) : _react.default.createElement("span", null, renderValueAsText(props.value || props.defaultValue, props.defaultContent)), _react.default.createElement(_ErrorMessage.default, {
+    id: getErrorElementId(),
     content: props.errorMessage,
     theme: props.theme
   }));
@@ -101,6 +105,7 @@ InputField.propTypes = {
   dateFormat: _propTypes.default.string,
   placeholder: _propTypes.default.string,
   defaultContent: _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string,
   hasErrors: _propTypes.default.bool,
   errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
   theme: _propTypes.default.object

package/dist/components/RadioButtonInput.js

@@ -31,7 +31,9 @@ var RadioButtonInput = function RadioButtonInput(props) {
     required: props.required || props.requiredGroup,
     onChange: props.onChange,
     tabIndex: props.tabIndex || null,
-    "aria-controls": props["aria-controls"]
+    "aria-controls": props["aria-controls"],
+    "aria-invalid": props.hasErrors ? "true" : null,
+    "aria-describedby": props["aria-describedby"]
   };
   return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_RadioButtonIcon.default, iconProps), _react.default.createElement("input", inputProps)) : null, _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("span", {
     className: _RadioButtonInputModule.default.requiredSymbol
@@ -49,7 +51,8 @@ RadioButtonInput.propTypes = {
   hasErrors: _propTypes.default.bool,
   theme: _propTypes.default.object,
   inputValue: _propTypes.default.string.isRequired,
-  "aria-controls": _propTypes.default.string
+  "aria-controls": _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string
 };
 RadioButtonInput.defaultProps = {
   name: "",

package/dist/components/RadioButtonListItem.js

@@ -23,6 +23,8 @@ var RadioButtonListItem = function RadioButtonListItem(props) {
     requiredGroup: props.requiredGroup,
     contentOnly: props.contentOnly,
     hasErrors: props.hasErrors,
+    "aria-controls": props["aria-controls"],
+    "aria-describedby": props["aria-describedby"],
     id: props.id,
     name: props.name,
     theme: props.theme
@@ -43,7 +45,9 @@ RadioButtonListItem.propTypes = {
   contentOnly: _propTypes.default.bool,
   compact: _propTypes.default.bool,
   theme: _propTypes.default.object,
-  hasErrors: _propTypes.default.bool
+  hasErrors: _propTypes.default.bool,
+  "aria-controls": _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string
 };
 RadioButtonListItem.defaultProps = {
   name: "",

package/dist/components/Select.js

@@ -70,6 +70,9 @@ var Select = function Select(props) {
       disabled: true
     }, placeholder) : "";
   };
+  var getErrorElementId = function getErrorElementId() {
+    return "".concat(props.id, "-errorMessage");
+  };
   if (props.contentOnly) {
     var value = props.defaultValue ? props.defaultValue : props.value || null;
     return _react.default.createElement("div", {
@@ -78,7 +81,7 @@ var Select = function Select(props) {
       htmlFor: props.id
     }, props.label), _react.default.createElement("span", null, value ? props.keyAsContent ? getKeyByValue(value, props.options) : value : props.defaultContent));
   } else {
-    var _props$width, _selectElementProps, _props$width2;
+    var _props$width, _props$errorMessage, _props$ariaDescribed, _selectElementProps, _props$width2;
     var defaultValue = !props.value && props.defaultValue ? props.defaultValue : false;
     var styleRules = _objectSpread(_objectSpread({}, props.hasErrors ? getThemeErrorInputStyle(props.theme) : null), ((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
       maxWidth: props.width
@@ -88,7 +91,7 @@ var Select = function Select(props) {
       multiple: props.multiple,
       required: props.required,
       disabled: props.disabled
-    }, _defineProperty(_selectElementProps, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_selectElementProps, "onChange", props.onChange), _defineProperty(_selectElementProps, "id", props.id), _defineProperty(_selectElementProps, "role", props.role), _defineProperty(_selectElementProps, "key", "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6))), _defineProperty(_selectElementProps, "className", props.hasErrors ? _SelectModule.default.hasErrors : ""), _defineProperty(_selectElementProps, "style", styleRules), _selectElementProps);
+    }, _defineProperty(_selectElementProps, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_selectElementProps, "onChange", props.onChange), _defineProperty(_selectElementProps, "id", props.id), _defineProperty(_selectElementProps, "role", props.role), _defineProperty(_selectElementProps, "key", "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6))), _defineProperty(_selectElementProps, "className", props.hasErrors ? _SelectModule.default.hasErrors : ""), _defineProperty(_selectElementProps, "aria-describedby", props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null), _defineProperty(_selectElementProps, "aria-invalid", props.hasErrors ? "true" : null), _defineProperty(_selectElementProps, "style", styleRules), _selectElementProps);
     return _react.default.createElement("div", {
       className: _SelectModule.default.select
     }, _react.default.createElement(_Label.default, {
@@ -104,6 +107,7 @@ var Select = function Select(props) {
       className: _SelectModule.default.selectListArrow,
       style: getThemeArrowStyle(props.theme)
     }), _react.default.createElement("select", selectElementProps, renderPlaceholderOption(props.placeholder, props.placeholderValue), renderOptionElements(props.options))), _react.default.createElement(_ErrorMessage.default, {
+      id: getErrorElementId(),
       content: props.errorMessage,
       theme: props.theme
     }));
@@ -129,6 +133,7 @@ Select.propTypes = {
   placeholder: _propTypes.default.string,
   placeholderValue: _propTypes.default.string,
   defaultContent: _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string,
   hasErrors: _propTypes.default.bool,
   errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
   theme: _propTypes.default.object

package/dist/components/Textarea.js

@@ -25,8 +25,11 @@ var Textarea = function Textarea(props) {
   var renderValueAsText = function renderValueAsText(value, defaultContent) {
     return value ? value : defaultContent;
   };
+  var getErrorElementId = function getErrorElementId() {
+    return "".concat(props.id, "-errorMessage");
+  };
   var renderInputField = function renderInputField() {
-    var _props$value, _props$defaultValue, _props$width, _props$resize, _textareaElementProps;
+    var _props$value, _props$defaultValue, _props$width, _props$resize, _props$errorMessage, _props$ariaDescribed, _textareaElementProps;
     var defaultValue = !((_props$value = props.value) !== null && _props$value !== void 0 && _props$value.length) && (_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 && _props$defaultValue.length ? props.defaultValue : false;
     var defaultKey = props.elementKey || null;
     var styleRules = _objectSpread(_objectSpread(_objectSpread({}, props.hasErrors ? getThemeErrorInputStyle(props.theme) : null), ((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
@@ -44,7 +47,7 @@ var Textarea = function Textarea(props) {
       key: defaultKey || "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6)),
       onChange: props.onChange,
       onBlur: props.onBlur
-    }, _defineProperty(_textareaElementProps, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_textareaElementProps, "placeholder", props.placeholder), _defineProperty(_textareaElementProps, "rows", props.rows), _defineProperty(_textareaElementProps, "className", props.hasErrors ? _TextareaModule.default.hasErrors : ""), _defineProperty(_textareaElementProps, "style", styleRules), _textareaElementProps);
+    }, _defineProperty(_textareaElementProps, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_textareaElementProps, "placeholder", props.placeholder), _defineProperty(_textareaElementProps, "rows", props.rows), _defineProperty(_textareaElementProps, "className", props.hasErrors ? _TextareaModule.default.hasErrors : ""), _defineProperty(_textareaElementProps, "aria-describedby", props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null), _defineProperty(_textareaElementProps, "aria-invalid", props.hasErrors ? "true" : null), _defineProperty(_textareaElementProps, "style", styleRules), _textareaElementProps);
     return _react.default.createElement("textarea", textareaElementProps);
   };
   return _react.default.createElement("div", {
@@ -54,6 +57,7 @@ var Textarea = function Textarea(props) {
   }, props.label, props.required && _react.default.createElement("span", {
     className: _TextareaModule.default.requiredSymbol
   }, "*")), !props.contentOnly ? renderInputField() : _react.default.createElement("span", null, renderValueAsText(props.value || props.defaultValue, props.defaultContent)), _react.default.createElement(_ErrorMessage.default, {
+    id: getErrorElementId(),
     content: props.errorMessage,
     theme: props.theme
   }));
@@ -75,6 +79,7 @@ Textarea.propTypes = {
   contentOnly: _propTypes.default.bool,
   placeholder: _propTypes.default.string,
   defaultContent: _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string,
   hasErrors: _propTypes.default.bool,
   errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
   theme: _propTypes.default.object

package/package.json

@@ -1,83 +1,83 @@
 {
-  "name": "dibk-design",
-  "version": "2.0.4",
-  "private": false,
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "sass": "^1.55.0",
-    "web-vitals": "^3.0.3"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build-components": "NODE_ENV=production babel src/stories --ignore src/**/*.stories.jsx --out-dir dist/components --copy-files --no-copy-ignored",
-    "build-functions": "NODE_ENV=production babel src/functions --out-dir dist/functions --copy-files --no-copy-ignored",
-    "build-index": "NODE_ENV=production babel src/index.js --out-dir dist --copy-files --no-copy-ignored",
-    "build-style": "NODE_ENV=production babel src/style --out-dir dist/style --copy-files --no-copy-ignored",
-    "build-assets": "NODE_ENV=production babel src/assets --out-dir dist/assets --copy-files --no-copy-ignored",
-    "build": "rm -rf dist && yarn build-components && yarn build-functions && yarn build-index && yarn build-style && yarn build-assets",
-    "eject": "react-scripts eject",
-    "storybook": "storybook dev -p 6006 -s public",
-    "build-storybook": "storybook build -s public -o docs"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
+    "name": "dibk-design",
+    "version": "2.0.6",
+    "private": false,
+    "main": "dist/index.js",
+    "module": "dist/index.js",
+    "files": [
+        "dist",
+        "README.md"
     ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
+    "dependencies": {
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^14.4.3",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-scripts": "5.0.1",
+        "sass": "^1.55.0",
+        "web-vitals": "^3.0.3"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build-components": "NODE_ENV=production babel src/stories --ignore src/**/*.stories.jsx --out-dir dist/components --copy-files --no-copy-ignored",
+        "build-functions": "NODE_ENV=production babel src/functions --out-dir dist/functions --copy-files --no-copy-ignored",
+        "build-index": "NODE_ENV=production babel src/index.js --out-dir dist --copy-files --no-copy-ignored",
+        "build-style": "NODE_ENV=production babel src/style --out-dir dist/style --copy-files --no-copy-ignored",
+        "build-assets": "NODE_ENV=production babel src/assets --out-dir dist/assets --copy-files --no-copy-ignored",
+        "build": "rm -rf dist && yarn build-components && yarn build-functions && yarn build-index && yarn build-style && yarn build-assets",
+        "eject": "react-scripts eject",
+        "storybook": "start-storybook -p 6006 -s public",
+        "build-storybook": "build-storybook -s public -o docs"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
         ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.18.10",
-    "@storybook/addon-a11y": "^7.0.0-alpha.37",
-    "@storybook/addon-actions": "^7.0.0-alpha.37",
-    "@storybook/addon-essentials": "^7.0.0-alpha.37",
-    "@storybook/addon-interactions": "^7.0.0-alpha.37",
-    "@storybook/addon-links": "^7.0.0-alpha.37",
-    "@storybook/addons": "^7.0.0-alpha.37",
-    "@storybook/node-logger": "^7.0.0-alpha.37",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^7.0.0-alpha.37",
-    "@storybook/react-webpack5": "^7.0.0-alpha.37",
-    "@storybook/testing-library": "^0.0.14-next.0",
-    "@storybook/theming": "^7.0.0-alpha.37",
-    "babel-plugin-named-exports-order": "^0.0.2",
-    "babel-plugin-transform-remove-console": "^6.9.4",
-    "prop-types": "^15.8.1",
-    "react-router-dom": "^6.4.2",
-    "storybook": "^7.0.0-alpha.37",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.74.0"
-  }
+        "overrides": [
+            {
+                "files": [
+                    "**/*.stories.*"
+                ],
+                "rules": {
+                    "import/no-anonymous-default-export": "off"
+                }
+            }
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.18.10",
+        "@storybook/addon-a11y": "^6.5.12",
+        "@storybook/addon-actions": "^6.5.12",
+        "@storybook/addon-essentials": "^6.5.12",
+        "@storybook/addon-interactions": "^6.5.12",
+        "@storybook/addon-links": "^6.5.12",
+        "@storybook/addons": "^6.5.12",
+        "@storybook/builder-webpack5": "^6.5.12",
+        "@storybook/manager-webpack5": "^6.5.12",
+        "@storybook/node-logger": "^6.5.12",
+        "@storybook/preset-create-react-app": "^4.1.2",
+        "@storybook/react": "^6.5.12",
+        "@storybook/testing-library": "^0.0.13",
+        "@storybook/theming": "^6.5.12",
+        "babel-plugin-named-exports-order": "^0.0.2",
+        "babel-plugin-transform-remove-console": "^6.9.4",
+        "prop-types": "^15.8.1",
+        "react-router-dom": "^6.4.2",
+        "url-loader": "^4.1.1",
+        "webpack": "^5.74.0"
+    }
 }